/* Shared light/dark semantics. Text, labels and icons remain meaningful without color. */
:root { --tone-blue:#e9f2fd; --tone-green:#e4f4ec; --tone-orange:#fff0e4; --tone-purple:#f0ebfa; --tone-amber:#fff6d9; }
[data-theme="dark"] {
  color-scheme:dark; --ink-950:#eef5f4; --ink-800:#dae7e5; --ink-650:#bbcfcc; --ink-500:#a1b5b3;
  --paper:#192c31; --canvas:#102126; --canvas-deep:#20383e; --line:#3a5156;
  --brand-900:#103940; --brand-800:#91d8d2; --brand-700:#75c9c3; --brand-100:#25484b; --brand-50:#203b40;
  --success:#88dcba; --success-soft:#204639; --warning:#f4ca82; --warning-soft:#483c25;
  --danger:#ffa5a5; --danger-soft:#492e35; --info:#a8d0fb; --info-soft:#263f59;
  --accent:#ffad87; --accent-soft:#48332d; --tone-blue:#223d56; --tone-green:#244439;
  --tone-orange:#48372c; --tone-purple:#39304e; --tone-amber:#443d23;
  --shadow-sm:0 2px 10px #0002; --shadow-md:0 12px 32px #0005;
}
[hidden], [data-hidden="true"] { display:none !important; }
.tone-blue { background:var(--tone-blue) !important; }
.tone-green { background:var(--tone-green) !important; }
.tone-orange { background:var(--tone-orange) !important; }
.tone-purple { background:var(--tone-purple) !important; }
.tone-amber { background:var(--tone-amber) !important; }
.stat-card { border-top:3px solid color-mix(in srgb, var(--ink-650) 23%, transparent); }
.stat-card::after { opacity:.25; }
.bank-module .batch-summary > div:nth-child(1) { background:var(--tone-blue); }
.bank-module .batch-summary > div:nth-child(2) { background:var(--tone-amber); }
.bank-module .batch-summary > div:nth-child(3) { background:var(--tone-orange); }
.bank-module .batch-summary > div:nth-child(4) { background:var(--tone-green); }
.filter-bar, .bank-module .card > .toolbar { background:var(--canvas-deep); padding:16px; border-block:1px solid var(--line); }
.mobile-menu { display:grid; flex-shrink:0; }
.sidebar, .workspace { transition:width var(--ease),padding var(--ease),transform var(--ease); }
.sidebar-collapsed { --sidebar:76px; }
.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-item > span,.sidebar-collapsed .sidebar-foot { display:none; }
.sidebar-collapsed .sidebar-brand { padding:0; justify-content:center; }
.sidebar-collapsed .sidebar-nav { padding-inline:10px; }
.sidebar-collapsed .nav-item { justify-content:center; min-height:44px; padding:12px; }
.theme-toggle { font-size:24px; flex:0 0 40px; line-height:1; }
.main,.workspace,.card,.grid > *, .field, .toolbar > *, .request-copy,.detail-pair { min-width:0; }
.table-wrap { width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.table-wrap:focus-visible { outline-offset:-3px; }
.data-table { min-width:620px; }
.data-table td { overflow-wrap:anywhere; }
.request-copy span,.detail-head .muted { overflow-wrap:anywhere; }
.topbar-search { min-width:120px; }
.search-dropdown { top:calc(100% + 8px); width:100%; max-height:min(65vh,520px); overflow-y:auto; }
.search-dropdown .icon { position:static; transform:none; }
.text-button { background:transparent; color:var(--brand-800); border:0; border-bottom:1px dotted currentColor; padding:2px 0; text-align:left; font-weight:650; cursor:pointer; }
.filter-bar { display:flex; flex-wrap:wrap; align-items:end; gap:14px; }
.filter-bar .field { flex:1 1 155px; }
[data-theme="dark"] .quick-action { background:var(--canvas-deep); color:var(--ink-950); border-color:var(--line); }
.filter-bar .field:first-child { flex:2 1 220px; }
.pagination { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:18px; border-top:1px solid var(--line); }
.pagination .field { width:145px; }
.pagination-buttons { display:flex; gap:5px; flex-wrap:wrap; margin-left:auto; }
.pagination-buttons .btn { padding:8px 12px; }
.payments-panel { scroll-margin-top:calc(var(--topbar) + 12px); }
.attention-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; margin-block:18px; }
.attention-card { max-height:380px; overflow:auto; }
.attention-link { display:flex; flex-direction:column; gap:4px; text-align:left; width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--ink-950); padding:13px 0; cursor:pointer; }
.attention-link span { color:var(--ink-650); font-size:13px; }
.empty-note { padding:12px 0; color:var(--ink-650); }
.month-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.month-card { padding:16px; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; gap:6px; }
.month-card small { color:var(--ink-650); }
.resident-metrics { margin-block:20px; }
.resident-history { padding:18px 0; border-top:1px solid var(--line); margin-top:20px; }
summary { cursor:pointer; font-weight:700; }
.resident-history form, .maintenance-list { margin-top:20px; }
.dashboard-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-block:24px; }
.dashboard-options label { display:flex; align-items:center; gap:12px; padding:15px; background:var(--canvas); border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.dashboard-options input, .bank-unit-choices input { width:20px; height:20px; accent-color:var(--brand-700); flex:0 0 auto; }
form > fieldset { border:0; margin:0; padding:0; min-width:0; }
.maintenance-row,.unit-directory-row { display:flex; gap:16px; justify-content:space-between; align-items:center; padding-block:16px; border-bottom:1px solid var(--line); }
.maintenance-row p,.unit-directory-row p { margin:4px 0; color:var(--ink-650); }
.two-col:has(> [data-hidden="true"]) { grid-template-columns:1fr; }
[data-theme="dark"] :is(.topbar,.card,.modal,.dropdown,.toast,.input,.select,.textarea,.icon-button,.btn-secondary,.search-key,.tab-button.active,.report-hero,.access-card,.access-provider-button) { background-color:var(--paper); color:var(--ink-950); border-color:var(--line); }
[data-theme="dark"] :is(.modal-head,.modal-foot,.data-table th,.request-item.active,.bank-saved,.dropzone,.confirmation-summary,.section-tabs,.access-shell,.access-surface) { background-color:var(--canvas-deep); color:var(--ink-950); border-color:var(--line); }
[data-theme="dark"] :is(.btn-primary,.access-submit) { background:#236d72; color:#fff; }
[data-theme="dark"] .topbar-search input { background:var(--canvas); color:var(--ink-950); }
[data-theme="dark"] .topbar-search input:focus { background:var(--paper); }
[data-theme="dark"] :is(.bank-withdrawal,.bank-module tr.withdrawal,.bank-cash-pending) { background:var(--warning-soft); }
[data-theme="dark"] :is(.wizard-card,.feature-card,.feature-check span,.wizard-summary > div,.feature-quantity input,.wizard-progress span) { background:var(--paper); color:var(--ink-950); border-color:var(--line); }
[data-theme="dark"] .wizard-shell { background:var(--canvas); }
[data-theme="dark"] .stat-icon { background:var(--canvas-deep); color:var(--ink-950); }
/* Template panels and shared notices must not retain light-theme surfaces/text. */
[data-theme="dark"] .template-hero { background:linear-gradient(135deg,var(--paper),var(--brand-50)); }
[data-theme="dark"] .template-sheet-list > div { background:var(--canvas-deep); border-color:var(--line); }
[data-theme="dark"] .notice { color:var(--ink-800); border-color:var(--line); }
[data-theme="dark"] .notice.warning { color:var(--warning); border-color:#b28a47; }
[data-theme="dark"] .notice.danger { color:var(--danger); }
/* Small explanatory text also needs readable contrast in the light template. */
.template-sheet-list small { color:var(--ink-650); }
[data-theme="dark"] .avatar { color:#fff; background:#725248; }
.modal { max-height:calc(100dvh - 32px); }
.modal-body { overscroll-behavior:contain; min-height:0; }
.modal > form { min-height:0; display:flex; flex-direction:column; overflow:hidden; flex:1 1 auto; }
.modal-head,.modal-foot { flex-shrink:0; }
body:has(.modal-backdrop) { overflow:hidden; }
[data-theme="dark"] .data-table td { border-bottom-color:var(--line); }
[data-theme="dark"] .data-table tbody tr:hover { background:var(--canvas-deep); }
@media(min-width:901px) { .mobile-overlay { display:none; } }
@media(max-width:1100px) { .month-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) {
  .sidebar-collapsed { --sidebar:240px; }
  .sidebar-collapsed .brand-copy { display:flex; }
  .sidebar-collapsed .nav-label,.sidebar-collapsed .nav-item > span { display:block; }
  .sidebar-collapsed .sidebar-brand { justify-content:flex-start; padding:0 20px; }
  .sidebar-collapsed .nav-item { justify-content:flex-start; }
  .sidebar { top:var(--topbar); visibility:hidden; }
  .sidebar.open { visibility:visible; }
  .sidebar-brand { display:none; }
  .topbar { z-index:45; }
  .mobile-overlay { top:var(--topbar); }
  .workspace { padding-left:0; }
  .month-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
  :root { --topbar:116px; }
  .topbar { flex-wrap:wrap; align-content:center; column-gap:8px; row-gap:8px; height:var(--topbar); }
  .topbar > .topbar-popover-anchor { flex:1; min-width:0; }
  .topbar-search { display:block; order:5; flex:0 0 100%; max-width:none; margin:0; }
  .topbar-search input { height:40px; }
  .topbar-actions { margin-left:auto; gap:4px; }
  .tenant-switch { width:100%; padding:4px; gap:6px; }
  .tenant-switch-copy { max-width:110px; }
  .tenant-icon { display:none; }
  .profile-button { min-width:36px; width:36px; padding:0; }
  .main { padding:18px 12px 36px; }
  .input,.select,.textarea,.topbar-search input { font-size:16px; max-width:100%; }
  .toolbar-group { flex-wrap:wrap; }
  .filter-bar { display:grid; grid-template-columns:1fr; }
  .filter-bar .field, .filter-bar .field:first-child { flex:none; width:100%; }
  .field-grid,.dashboard-options { grid-template-columns:1fr; }
  .pagination-buttons { margin-left:0; }
  .pagination .btn { min-height:42px; }
  .month-card { padding:12px; font-size:13px; }
  .card-pad { padding:16px; }
  .maintenance-row,.unit-directory-row { flex-wrap:wrap; }
  .modal,.modal.modal-lg { max-height:94dvh; }
  .modal-foot { flex-wrap:wrap; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex:1 1 130px; }
  .bank-unit-choices { max-height:260px; }
}
@media(prefers-reduced-motion:reduce) { .sidebar,.workspace { transition:none; } }
@media print { .pagination,.resident-history, .attention-link button { display:none; } .table-wrap { overflow:visible; } }