/* Water Billing - appearance upgrade layer. Loaded AFTER the existing stylesheets,
   so it refines them without replacing anything. Delete this file to revert. */
:root{
  --wb-primary:#0b6fb8; --wb-primary-dark:#084f86; --wb-accent:#14a3a8;
  --wb-bg:#f3f6f9; --wb-surface:#fff; --wb-text:#1f2d3a; --wb-muted:#6b7a89; --wb-border:#e1e8ee;
  --wb-radius:10px; --wb-shadow:0 1px 2px rgba(16,40,64,.06),0 4px 14px rgba(16,40,64,.06);
}
body{background:var(--wb-bg);color:var(--wb-text);-webkit-font-smoothing:antialiased}
.navbar.bg-primary{background:linear-gradient(90deg,var(--wb-primary-dark),var(--wb-primary)) !important;box-shadow:0 2px 8px rgba(8,79,134,.25)}
.navbar .nav-link{border-radius:6px;padding:.45rem .7rem;transition:background .15s}
.navbar .nav-link:hover,.navbar .nav-link:focus{background:rgba(255,255,255,.14)}
.card{border:1px solid var(--wb-border);border-radius:var(--wb-radius);box-shadow:var(--wb-shadow)}
.card .text-uppercase{font-size:.72rem;letter-spacing:.06em;color:var(--wb-muted) !important}
.kpi .kpi-label{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--wb-muted)}
.kpi .kpi-value{font-size:1.6rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.table{--bs-table-bg:var(--wb-surface);font-variant-numeric:tabular-nums}
.table thead th{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--wb-border)}
.table thead:not([class*="table-"]) th{color:var(--wb-muted)}
.table-hover tbody tr:hover{background:#f1f7fc}
.btn{border-radius:8px}
.btn-primary{background:var(--wb-primary);border-color:var(--wb-primary)}
.btn-primary:hover{background:var(--wb-primary-dark);border-color:var(--wb-primary-dark)}
.form-control:focus,.form-select:focus,.btn:focus-visible,.nav-link:focus-visible{box-shadow:0 0 0 .2rem rgba(11,111,184,.25);border-color:var(--wb-primary);outline:none}
.form-control,.form-select{border-radius:8px;border-color:#cfd9e2}
.alert{border-radius:var(--wb-radius)}
/* status chips: use class="status-chip status-paid|status-partial|status-unpaid|status-overdue" */
.status-chip{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600}
.status-paid{background:#dcf5e5;color:#12683a}.status-partial{background:#fff0cc;color:#8a5a00}
.status-unpaid{background:#e3effa;color:#0b4f88}.status-overdue{background:#fde2e1;color:#a52834}
/* tables never force the page to scroll sideways on phones */
@media (max-width:576px){.container,.container-fluid{padding-left:.75rem;padding-right:.75rem}.kpi .kpi-value{font-size:1.3rem}h1{font-size:1.45rem}}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
@media print{.navbar,.btn,.no-print{display:none !important}body{background:#fff}.card{box-shadow:none;border-color:#999}.table thead th{position:static;background:#eee !important;color:#000}}

/* ---- Sticky table headers: the table scrolls inside its frame, the header row stays put ---- */
.table-scroll,.table-responsive{max-height:calc(100vh - 220px);overflow:auto;position:relative}
.table-scroll>.table,.table-responsive>.table{margin-bottom:0}
.table>thead>tr>th{position:sticky;top:0;z-index:3;box-shadow:inset 0 -2px 0 #cfd9e2}
.table>thead:not([class*="table-"])>tr>th{background:#eef3f7}
.table>thead[class*="table-"]>tr>th{background-clip:padding-box}
.table-scroll,.table-responsive{scrollbar-width:thin}
/* ---- Collapsible sections (e.g. System Register): hidden until clicked ---- */
.collapsible-toggle{font-weight:600}
.collapse-caret{display:inline-block;transition:transform .15s}
.collapsible-toggle[aria-expanded="true"] .collapse-caret{transform:rotate(90deg)}
@media print{.table-scroll,.table-responsive{max-height:none !important;overflow:visible !important}.collapse:not(.show){display:block !important}.collapsible-toggle{display:none}}