:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --text: #172033;
  --muted: #64748b;
  --line: #dbe4f0;
  --primary: #0ea5e9;
  --primary-dark: #0369a1;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #f59e0b;
  --shadow: 0 14px 38px rgba(15, 23, 42, .08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #e0f2fe, transparent 35%), var(--bg);
  color: var(--text);
}
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 28px 36px;
  background: linear-gradient(135deg, #075985, #0ea5e9);
  color: white;
  box-shadow: var(--shadow);
}
h1 { margin: 0; font-size: clamp(26px, 4vw, 42px); }
h2 { margin: 0 0 12px; font-size: 18px; }
.eyebrow { margin: 0 0 8px; opacity: .86; text-transform: uppercase; letter-spacing: .13em; font-size: 12px; }
.subtitle { margin: 8px 0 0; opacity: .9; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
main { padding: 24px 36px 48px; }
.conflict-banner, .security-banner { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid #fbbf24; background: #fffbeb; color: #92400e; box-shadow: var(--shadow); }
.security-banner { border-color: #fecaca; background: #fef2f2; color: #991b1b; align-items: center; }
.conflict-banner div:first-child, .security-banner div:first-child { display: grid; gap: 4px; }
.conflict-banner span, .security-banner span { font-size: 13px; font-weight: 700; }
.conflict-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 800; color: #78350f; }
.conflict-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #fef3c7; border: 1px solid #fde68a; }
.conflict-diff { margin-top: 8px; display: grid; gap: 8px; max-height: 260px; overflow: auto; padding-right: 4px; }
.conflict-diff-section { display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.72); border: 1px solid #fde68a; }
.conflict-diff-section strong { color: #78350f; }
.conflict-diff-list { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 12px; font-weight: 700; }
.conflict-empty { font-size: 12px; font-weight: 800; color: #166534; }
.conflict-warning { font-size: 12px; font-weight: 900; color: #991b1b; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left, #e0f2fe, transparent 35%), var(--bg); }
.login-card { width: min(440px, 100%); display: grid; gap: 12px; padding: 28px; border-radius: 22px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
.login-card h1 { color: var(--text); font-size: 28px; }
.user-mode { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.viewer-mode .btn:not(#logoutBtn):not(#exportCsvBtn):not(#exportExcelBtn):not(#exportArrearsBtn):not(#exportArrearsExcelBtn):not(#printArrearsBtn):not(#printReceiptBtn):not(#exportAuditLogBtn) { opacity: .55; cursor: not-allowed; }
.panel {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(219,228,240,.9);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.controls {
  display: grid;
  grid-template-columns: 130px 180px 190px 160px minmax(220px, 1fr);
  gap: 14px;
  padding: 18px;
  align-items: end;
}
label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 700; }
input, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  background: white;
  color: var(--text);
}
.btn {
  border: 0;
  background: var(--primary);
  color: white;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(14,165,233,.22);
}
.btn.secondary { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); }
.btn.secondary-panel { background: #e0f2fe; color: #075985; box-shadow: none; border: 1px solid #bae6fd; }
.file-action { display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.file-action input { display: none; }
.btn.danger { background: #ef4444; }
.btn.soft-danger { background: #fee2e2; color: #991b1b; box-shadow: none; border: 1px solid #fecaca; }
.link-button {
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  font: inherit;
  font-weight: 900;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-button:hover { color: var(--primary); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 14px; margin: 18px 0; }
.card { padding: 18px; border-radius: 18px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
.card .label { color: var(--muted); font-size: 13px; font-weight: 800; }
.card .value { font-size: 25px; font-weight: 900; margin-top: 7px; }
.grid-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.side-panel, .table-panel, .recap-panel { padding: 18px; }
.storage-mode { margin: 0 0 12px; padding: 10px 12px; background: #f0f9ff; border: 1px solid #bae6fd; color: #075985; border-radius: 12px; font-size: 13px; font-weight: 800; }
.flow { padding-left: 22px; color: #334155; line-height: 1.55; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.form-stack { display: grid; gap: 10px; }
.settings-form label { font-size: 12px; }
.checkbox-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.checkbox-line input { width: auto; }
.quick-payment-form select, .quick-payment-form input { min-width: 0; }
.form-note { margin: -2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.resident-history-controls, .source-reference-controls { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr); gap: 12px; margin-bottom: 14px; }
.resident-history-panel table { min-width: 760px; }
.resident-editor { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 16px; background: #f8fafc; overflow: hidden; }
.resident-editor summary { cursor: pointer; padding: 12px 14px; font-weight: 900; color: var(--primary-dark); }
.resident-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 10px; padding: 0 14px 14px; }
.resident-editor-actions { display: flex; gap: 10px; flex-wrap: wrap; grid-column: 1 / -1; }
.source-sheet-meta { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.workbook-diff-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.workbook-diff-form input { max-width: 360px; }
.source-sheet-pill { padding: 12px 14px; border-radius: 14px; background: #eef2ff; border: 1px solid #c7d2fe; }
.source-sheet-pill strong { display: block; color: #3730a3; font-size: 16px; }
.source-sheet-pill span { color: #4338ca; font-size: 12px; font-weight: 800; }
.user-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.user-card { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #f8fafc; }
.user-card h3 { margin: 0 0 8px; }
#usersTable { min-width: 960px; }
#usersTable th { background: #dbeafe; color: #1d4ed8; }
.disabled-user { opacity: .58; background: #f8fafc; }
.security-small { color: #b91c1c; font-size: 11px; font-weight: 900; }
.audit-log-summary { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.audit-pill { padding: 12px 14px; border-radius: 14px; background: #f0fdf4; border: 1px solid #bbf7d0; }
.audit-pill strong { display: block; color: #166534; font-size: 18px; }
.audit-pill span { color: #15803d; font-size: 12px; font-weight: 800; }
#auditLogTable { min-width: 1100px; }
#auditLogTable th { background: #dcfce7; color: #166534; }
#auditLogTable td { vertical-align: top; }
.muted-small { color: var(--muted); font-size: 11px; }
.source-sheet-wrap { max-height: 520px; }
#sourceSheetTable { min-width: 900px; }
#sourceSheetTable th { background: #e0e7ff; color: #3730a3; }
#sourceSheetTable td { white-space: pre-wrap; max-width: 240px; }
.row-number { color: var(--muted); font-weight: 800; background: #f8fafc; }
.history-paid { color: var(--success); font-weight: 800; }
.history-missing { color: var(--warning); font-weight: 800; }
.receipt-empty { padding: 22px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); background: #f8fafc; font-weight: 700; }
.receipt-card { background: white; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; max-width: 820px; }
.receipt-top { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 22px; background: linear-gradient(135deg, #075985, #0ea5e9); color: white; }
.receipt-top h3 { margin: 4px 0 0; font-size: 24px; }
.receipt-eyebrow { margin: 0; opacity: .86; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
.receipt-no { padding: 8px 10px; border: 1px solid rgba(255,255,255,.45); border-radius: 10px; font-weight: 900; background: rgba(255,255,255,.12); }
.receipt-body { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: stretch; }
.receipt-body dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.receipt-body dt { color: var(--muted); font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.receipt-body dd { margin: 0; font-size: 16px; font-weight: 900; }
.receipt-amount { border: 1px solid #bae6fd; border-radius: 16px; background: #f0f9ff; padding: 18px; display: grid; align-content: center; gap: 8px; }
.receipt-amount span { color: #075985; font-size: 13px; font-weight: 800; }
.receipt-amount strong { color: var(--primary-dark); font-size: 28px; }
.receipt-footer { display: flex; justify-content: space-between; gap: 18px; padding: 18px 22px 24px; border-top: 1px solid var(--line); color: var(--muted); }
.receipt-footer strong { display: block; color: var(--text); margin-top: 4px; }
.signature-box { min-width: 160px; text-align: center; padding-top: 54px; border-bottom: 1px solid var(--text); color: var(--text); font-weight: 800; }
.table-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 12px; }
#tableHint { margin: 0; color: var(--muted); }
.table-actions { display: grid; justify-items: end; gap: 10px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.dot.paid { background: var(--success); }
.dot.due { background: var(--warning); }
.table-wrap { overflow: auto; max-height: 68vh; border: 1px solid var(--line); border-radius: 16px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1280px; background: white; }
th, td { border-bottom: 1px solid #e8eef6; border-right: 1px solid #edf2f7; padding: 8px; font-size: 13px; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 2; background: #e0f2fe; color: #075985; text-align: left; }
th.month { text-align: center; background: #bae6fd; }
td.sticky, th.sticky { position: sticky; left: 0; z-index: 3; background: white; }
th.sticky { background: #e0f2fe; }
tr.group-row td { background: #eff6ff; color: #1d4ed8; font-weight: 900; }
tr.paid-row td:first-child { border-left: 5px solid var(--success); }
tr.due-row td:first-child { border-left: 5px solid var(--warning); }
td input { padding: 7px 8px; border-radius: 9px; font-size: 12px; min-width: 88px; }
td input.amount { min-width: 92px; text-align: right; }
.total-cell { font-weight: 900; color: var(--primary-dark); }
.custom-rate { margin-top: 3px; color: #7c3aed; font-size: 11px; font-weight: 900; }
.recap-panel { margin-top: 18px; }
.section-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 14px; }
.section-head p { margin: 4px 0 0; color: var(--muted); }
.section-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.recap-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 12px; }
.recap-item { padding: 14px; border-radius: 16px; background: #f8fafc; border: 1px solid var(--line); }
.recap-item strong { display: block; font-size: 18px; margin-bottom: 4px; }
.recap-item span { color: var(--muted); font-size: 12px; }
.arrears-summary { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.arrears-pill { padding: 14px; border-radius: 16px; background: #fff7ed; border: 1px solid #fed7aa; }
.arrears-pill strong { display: block; color: #9a3412; font-size: 20px; }
.arrears-pill span { color: #7c2d12; font-size: 12px; font-weight: 700; }
.small-table-wrap { max-height: 420px; }
#arrearsTable { min-width: 900px; }
#arrearsTable th { background: #ffedd5; color: #9a3412; }
.risk-high { color: #dc2626; font-weight: 900; }
.risk-medium { color: #d97706; font-weight: 900; }
.risk-low { color: #16a34a; font-weight: 900; }
@media (max-width: 980px) {
  .topbar, .table-head, .conflict-banner, .security-banner { flex-direction: column; align-items: stretch; }
  main { padding: 18px; }
  .controls, .grid-layout, .cards, .recap-grid, .arrears-summary, .resident-history-controls, .source-reference-controls, .source-sheet-meta, .audit-log-summary, .resident-editor-grid, .user-admin-grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: stretch; }
  .receipt-body, .receipt-body dl { grid-template-columns: 1fr; }
  .receipt-top, .receipt-footer { flex-direction: column; }
}
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  :root { --line: #94a3b8; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff !important; color: #0f172a; font-family: Arial, Helvetica, sans-serif; }
  main { padding: 0 !important; }
  .topbar, .controls, .side-panel, .cards, .user-admin-panel, .audit-log-panel, .operational-import-panel, .workbook-import-panel, .source-reference-panel, .resident-history-panel, .section-actions, .no-print, .table-actions .btn { display: none !important; }
  .panel { box-shadow: none !important; border-radius: 0 !important; background: #fff !important; border: 0 !important; }
  body::before {
    content: attr(data-print-org) '\A' attr(data-print-title) '\A' attr(data-print-subtitle) ' — ' attr(data-print-generated);
    display: block;
    white-space: pre;
    padding: 8px 10px 9px;
    margin: 0 0 8px;
    border: 1px solid #075985;
    border-left: 10px solid #075985;
    background: linear-gradient(90deg, #e0f2fe, #ffffff);
    color: #0f172a;
    font-weight: 800;
    line-height: 1.35;
  }
  body::after {
    content: 'Aplikasi Iuran Warga · Pakal Residence RT 05 / RW 03';
    position: fixed;
    bottom: 0;
    right: 0;
    color: #64748b;
    font-size: 8px;
  }
  .table-wrap, .small-table-wrap { max-height: none !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; }
  table { border-collapse: collapse !important; border-spacing: 0 !important; min-width: 0 !important; width: 100% !important; background: white !important; }
  th { position: static !important; background: #dbeafe !important; color: #0f172a !important; font-weight: 900; text-align: center; }
  th, td { border: 1px solid #94a3b8 !important; padding: 3.5px 4px !important; font-size: 8.2px !important; line-height: 1.18 !important; vertical-align: middle !important; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  tr.group-row td { background: #dbeafe !important; color: #1e3a8a !important; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
  tr:nth-child(even):not(.group-row) td { background: #f8fafc !important; }
  td.sticky, th.sticky { position: static !important; background: inherit !important; }
  input { border: 0 !important; padding: 0 !important; background: transparent !important; font-size: inherit !important; color: #0f172a !important; min-width: 0 !important; }
  td input[type='date'] { width: 52px !important; }
  td input.amount { width: 58px !important; text-align: right !important; }
  .link-button { color: #0f172a !important; text-decoration: none !important; font-weight: 800; }
  .total-cell, .risk-high, .risk-medium, .risk-low { font-weight: 900 !important; }

  body.print-ledger-mode .grid-layout { display: block !important; }
  body.print-ledger-mode .table-panel { display: block !important; padding: 0 !important; margin: 0 !important; }
  body.print-ledger-mode .table-head { display: flex !important; margin-bottom: 6px !important; border-bottom: 2px solid #075985; padding-bottom: 5px; }
  body.print-ledger-mode #tableHint, body.print-ledger-mode .legend { display: none !important; }
  body.print-ledger-mode h2 { font-size: 13px !important; margin: 0 !important; }
  body.print-ledger-mode #duesTable th:nth-child(4),
  body.print-ledger-mode #duesTable td:nth-child(4) { display: none !important; }
  body.print-ledger-mode #duesTable th, body.print-ledger-mode #duesTable td { font-size: 7.1px !important; padding: 2.2px 2.4px !important; }
  body.print-ledger-mode #duesTable th.month { background: #93c5fd !important; }
  body.print-ledger-mode tr.paid-row td:first-child { border-left: 4px solid #16a34a !important; }
  body.print-ledger-mode tr.due-row td:first-child { border-left: 4px solid #f59e0b !important; }

  body.print-arrears-mode .recap-panel:not(:first-of-type),
  body.print-arrears-mode .grid-layout { display: none !important; }
  body.print-arrears-mode .recap-panel:first-of-type { display: block !important; margin: 0 !important; padding: 0 !important; }
  body.print-arrears-mode .section-head { display: flex !important; align-items: flex-start !important; border-bottom: 2px solid #9a3412; padding-bottom: 7px; margin-bottom: 8px; }
  body.print-arrears-mode .section-head h2 { font-size: 13px !important; margin: 0 !important; }
  body.print-arrears-mode .section-head p { font-size: 9px !important; margin: 2px 0 0 !important; color: #475569 !important; }
  body.print-arrears-mode .arrears-summary { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 5px !important; margin-bottom: 8px !important; }
  body.print-arrears-mode .arrears-pill { background: #fff7ed !important; border: 1px solid #fb923c !important; padding: 6px !important; border-radius: 0 !important; }
  body.print-arrears-mode .arrears-pill strong { font-size: 13px !important; color: #9a3412 !important; }
  body.print-arrears-mode .arrears-pill span { font-size: 8px !important; color: #7c2d12 !important; }
  body.print-arrears-mode #arrearsTable th { background: #fed7aa !important; color: #7c2d12 !important; }
  body.print-arrears-mode #arrearsTable th, body.print-arrears-mode #arrearsTable td { font-size: 8.8px !important; padding: 4px 5px !important; }
  body.print-arrears-mode #arrearsTable th:nth-child(3),
  body.print-arrears-mode #arrearsTable td:nth-child(3) { display: none !important; }

  body.print-receipt-mode .topbar,
  body.print-receipt-mode .controls,
  body.print-receipt-mode .grid-layout,
  body.print-receipt-mode .recap-panel:not(.receipt-panel),
  body.print-receipt-mode .no-print { display: none !important; }
  body.print-receipt-mode::before, body.print-receipt-mode::after { display: none !important; }
  body.print-receipt-mode .receipt-panel { margin: 0 !important; padding: 0 !important; }
  body.print-receipt-mode .receipt-card { max-width: none !important; border: 1px solid #111827 !important; border-radius: 0 !important; break-inside: avoid; }
  body.print-receipt-mode .receipt-top { background: #075985 !important; color: white !important; }
  body.print-receipt-mode .receipt-footer { border-top: 1px solid #111827 !important; }
  body.print-receipt-mode .signature-box { min-width: 220px; padding-top: 72px; }
}