/* VAC Child Protection: modern dashboard theme on top of Bootstrap 5.3.
   Neutral greys, one indigo accent, soft cards, 8px spacing rhythm. No build step. */

/* Inter (SIL Open Font License), latin subset, one variable file (~48 KB). Text shows in the system font until it loads. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.2.8/files/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.2.8/files/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
  --ink: #14181f;          /* text, 17.8:1 on white */
  --ink-2: #4a5261;        /* secondary text, 7.9:1 */
  --ink-3: #5f6775;        /* tertiary text, 5.7:1 */
  --line: #e3e6eb;         /* card and divider lines */
  --line-soft: #eceef2;    /* table rows */
  --line-strong: #cfd4dc;
  --field-line: #7d8592;   /* form control and outline-button borders, 3.7:1 on white, 3.4:1 on the canvas */
  --canvas: #f5f6f8;
  --surface: #fff;
  --surface-2: #f9fafb;
  --hover: #f1f3f6;
  --accent: #3446c8;       /* the one accent, 7.4:1 on white */
  --accent-strong: #2a3aa8;
  --accent-deep: #26359c;
  --accent-soft: #eef0fb;
  --accent-line: #c9cff3;
  --teal: #0e7490;
  --teal-strong: #0b5f76;
  --amber: #f5b301;
  --danger: #c42b1c;
  --success: #13804b;
  --radius-sm: .375rem;
  --radius: .5rem;
  --radius-lg: .75rem;
  --shadow-xs: 0 1px 2px rgba(20, 24, 31, .05);
  --shadow-sm: 0 1px 3px rgba(20, 24, 31, .08), 0 1px 2px rgba(20, 24, 31, .04);
  --shadow-md: 0 8px 20px -6px rgba(20, 24, 31, .12), 0 2px 6px -2px rgba(20, 24, 31, .06);
  --ring: 0 0 0 3px rgba(52, 70, 200, .25);
  --sidebar-w: 16rem;

  /* Bootstrap variables */
  --bs-font-sans-serif: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-line-height: 1.55;
  --bs-body-color: #14181f;
  --bs-body-color-rgb: 20, 24, 31;
  --bs-body-bg: #fff;             /* Bootstrap paints inputs, cards and checkboxes with this; the page canvas is set on body */
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-heading-color: #14181f;
  --bs-secondary-color: #4a5261;
  --bs-secondary-color-rgb: 74, 82, 97;
  --bs-border-color: #e3e6eb;
  --bs-border-color-translucent: rgba(20, 24, 31, .1);
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .75rem;
  --bs-primary: #3446c8;
  --bs-primary-rgb: 52, 70, 200;
  --bs-primary-bg-subtle: #eef0fb;
  --bs-primary-border-subtle: #c9cff3;
  --bs-primary-text-emphasis: #26359c;
  --bs-secondary-bg-subtle: #f1f2f5;
  --bs-secondary-border-subtle: #d5d9e0;
  --bs-secondary-text-emphasis: #3d4451;
  --bs-success: #13804b;
  --bs-success-rgb: 19, 128, 75;
  --bs-success-bg-subtle: #ecf8f1;
  --bs-success-border-subtle: #a9dcc0;
  --bs-success-text-emphasis: #0f6b3e;
  --bs-info: #0e7490;
  --bs-info-rgb: 14, 116, 144;
  --bs-info-bg-subtle: #e6f5f6;
  --bs-info-border-subtle: #a8d9de;
  --bs-info-text-emphasis: #0b5c66;
  --bs-warning: #f5b301;
  --bs-warning-rgb: 245, 179, 1;
  --bs-warning-bg-subtle: #fff6e0;
  --bs-warning-border-subtle: #f3d68f;
  --bs-warning-text-emphasis: #7a4300;
  --bs-danger: #c42b1c;
  --bs-danger-rgb: 196, 43, 28;
  --bs-danger-bg-subtle: #fef1f0;
  --bs-danger-border-subtle: #f6c4bf;
  --bs-danger-text-emphasis: #9b2318;
  --bs-link-color: #3446c8;
  --bs-link-color-rgb: 52, 70, 200;
  --bs-link-hover-color: #26359c;
  --bs-link-hover-color-rgb: 38, 53, 156;
  --bs-focus-ring-color: rgba(52, 70, 200, .25);
  --bs-form-invalid-color: #c42b1c;
  --bs-form-invalid-border-color: #c42b1c;
}

/* ---------- Base ---------- */
body { background: var(--canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; }
h1, .h1, h2, .h2, h3, .h3 { font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 600; letter-spacing: -.01em; }
/* Even heading lines and no one-word last line */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, legend { text-wrap: balance; }
p, li, dd, .lead, .form-text, .invalid-feedback { text-wrap: pretty; }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem; }
.lead { font-size: 1.125rem; font-weight: 400; color: var(--ink-2); }
a { text-underline-offset: .2em; }
strong, b { font-weight: 600; }
hr { border-color: var(--line); opacity: 1; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
main:focus, main:focus-visible { outline: none; }

.skip-link { position: absolute; z-index: 1080; top: .5rem; left: .5rem; background: var(--ink); color: #fff;
  padding: .5rem 1rem; border-radius: var(--radius); font-weight: 600; }
.skip-link:focus { color: #fff; }

.main-col { min-width: 0; }
@media (min-width: 1200px) { .main-col { padding: 2rem !important; } }
.shell-app .app-frame { min-height: 100vh; min-height: 100dvh; }
/* The sidebar is sticky; this paints its column down the whole page behind it */
@media (min-width: 768px) {
  .shell-app .app-frame { background: linear-gradient(to right, var(--surface) calc(var(--sidebar-w) - 1px), var(--line) calc(var(--sidebar-w) - 1px), var(--line) var(--sidebar-w), transparent var(--sidebar-w)); }
}
.shell-public .main-col { max-width: 72rem; width: 100%; margin-inline: auto; }

.site-footer { color: var(--ink-3) !important; }

/* ---------- Brand ---------- */
.brand-mark { width: auto; height: 2.25rem; flex: none; object-fit: contain; }

/* ---------- Top bar (public pages; staff on phones) ---------- */
.app-topbar {
  --bs-navbar-padding-y: .75rem;
  --bs-navbar-color: var(--ink-2);
  --bs-navbar-hover-color: var(--ink);
  --bs-navbar-active-color: var(--accent-deep);
  --bs-navbar-brand-color: var(--ink);
  --bs-navbar-brand-hover-color: var(--ink);
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-nav-link-padding-x: .75rem;
  --bs-navbar-toggler-border-color: var(--field-line);
  --bs-navbar-toggler-border-radius: var(--radius);
  --bs-navbar-toggler-focus-width: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.shell-public .app-topbar > .container-fluid { max-width: 72rem; }
/* Public pages: the bar with Quick exit stays on screen on long pages; anchors and focus land below it */
.shell-public .app-topbar { position: sticky; top: 0; z-index: 1020; }
html:has(> .shell-public) { scroll-padding-top: 7.5rem; }  /* bar (69px) plus the field's label */
.no-js .shell-public .app-topbar { position: static; }
@media (min-width: 768px) { .shell-public .app-topbar > .container-fluid { padding-inline: 1.5rem; } }
@media (min-width: 1200px) { .shell-public .app-topbar > .container-fluid { padding-inline: 2rem; } }
.navbar-brand { display: inline-flex; align-items: center; gap: .625rem; min-height: 44px; font-weight: 650; font-size: 1.0625rem; letter-spacing: -.01em; }
.app-topbar .nav-link { display: flex; align-items: center; gap: .75rem; border-radius: var(--radius); font-weight: 500; font-size: .9375rem; }
.app-topbar .nav-link:hover { background: var(--hover); }
.app-topbar .nav-link.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.navbar-toggler { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); }
.navbar-toggler-icon { width: 1.375rem; height: 1.375rem; }
.navbar-toggler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 767.98px) {
  .app-topbar .navbar-collapse { margin-top: .75rem; border-top: 1px solid var(--line); }
  .app-topbar .navbar-nav { padding-top: .5rem; gap: .125rem; }
  .app-topbar .nav-link { min-height: 44px; padding: .5rem .75rem; }
  .app-topbar .nav-account { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
}
@media (min-width: 768px) { .shell-public .app-topbar .navbar-nav { gap: .25rem; } }

/* ---------- Sidebar (staff, tablet and up) ---------- */
.sidebar { width: var(--sidebar-w); position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 1.25rem .75rem 1rem; background: var(--surface); border-right: 1px solid var(--line); }
@media (max-width: 767.98px) { .sidebar { display: none; } }
.sidebar-brand { display: flex; align-items: center; gap: .625rem; padding: 0 .5rem; margin-bottom: 1.25rem;
  color: var(--ink); font-weight: 650; letter-spacing: -.01em; text-decoration: none; }
.sidebar-brand:hover { color: var(--ink); }
.sidebar-office { display: flex; flex-direction: column; gap: .125rem; margin: 0 .25rem 1.25rem; padding: .625rem .75rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.sidebar-office-name { font-size: .875rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sidebar-office-role { font-size: .75rem; color: var(--ink-3); line-height: 1.35; }
.sidebar .nav { flex: 1 0 auto; }
.sidebar .nav-link { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; padding: .5rem .75rem;
  border-radius: var(--radius); color: var(--ink-2); font-size: .9375rem; font-weight: 500;
  transition: background-color .15s ease, color .15s ease; }
.sidebar .nav-link:hover { background: var(--hover); color: var(--ink); }
.sidebar .nav-link.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.sidebar .nav-account { margin-top: auto !important; padding-top: .75rem; border-top: 1px solid var(--line); }
.nav-icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--ink-3); }
.nav-link:hover .nav-icon { color: var(--ink-2); }
.nav-link.active .nav-icon { color: var(--accent); }
.nav-link .badge { margin-left: auto; }
.nav-link .badge::before { display: none; }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; box-shadow: none; }
.nav-link.btn { justify-content: flex-start; text-align: left; border: 0; box-shadow: none; text-decoration: none; }
.nav-link.btn:hover, .nav-link.btn:active { text-decoration: none; }
.nav-user { color: var(--ink-3); font-size: .8125rem; font-weight: 400; overflow-wrap: anywhere; }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: .9375rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.4;
  --bs-btn-border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; text-align: center;
  box-shadow: var(--shadow-xs);
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-xs); }
.btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .75rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: .625rem; min-height: 3rem; }
.btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .375rem; --bs-btn-font-size: .875rem; --bs-btn-border-radius: var(--radius-sm); min-height: 2.25rem; }
.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-strong); --bs-btn-hover-border-color: var(--accent-strong);
  --bs-btn-active-bg: var(--accent-deep); --bs-btn-active-border-color: var(--accent-deep);
  --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--accent); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent-deep); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent-strong);
  --bs-btn-active-color: var(--accent-deep); --bs-btn-active-bg: #e2e6f8; --bs-btn-active-border-color: var(--accent-strong);
}
.btn-outline-secondary, .btn-outline-dark {
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--field-line);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--hover); --bs-btn-hover-border-color: #6f7785;
  --bs-btn-active-color: var(--ink); --bs-btn-active-bg: #e9ecf0; --bs-btn-active-border-color: #6f7785;
}
.btn-outline-danger {
  --bs-btn-color: var(--danger); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: #9b2318; --bs-btn-hover-bg: var(--bs-danger-bg-subtle); --bs-btn-hover-border-color: #a82416;
  --bs-btn-active-color: #9b2318; --bs-btn-active-bg: #fde3e0; --bs-btn-active-border-color: #a82416;
}
.btn-info {
  --bs-btn-color: #fff; --bs-btn-bg: var(--teal); --bs-btn-border-color: var(--teal);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--teal-strong); --bs-btn-hover-border-color: var(--teal-strong);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #094e61; --bs-btn-active-border-color: #094e61;
}
.btn-warning {
  --bs-btn-color: #1d1300; --bs-btn-bg: var(--amber); --bs-btn-border-color: #a87800;  /* edge 3.9:1 on white */
  --bs-btn-hover-color: #1d1300; --bs-btn-hover-bg: #e8a900; --bs-btn-hover-border-color: #946a00;
  --bs-btn-active-color: #1d1300; --bs-btn-active-bg: #d99e00; --bs-btn-active-border-color: #8a6200;
}
.btn-dark {
  --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: #2a303b; --bs-btn-hover-border-color: #2a303b;
  --bs-btn-active-bg: #343b48; --bs-btn-active-border-color: #343b48;
}
.btn-link { --bs-btn-font-weight: 600; --bs-btn-color: var(--accent); --bs-btn-hover-color: var(--accent-deep);
  --bs-btn-active-color: var(--accent-deep); box-shadow: none; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn-link:focus-visible { box-shadow: none; }
.quick-exit { font-weight: 700; }

/* ---------- Forms ---------- */
.form-label { font-size: .9375rem; font-weight: 550; color: var(--ink); margin-bottom: .5rem; }
.asteriskField { margin-left: .125rem; color: var(--ink-3); font-weight: 400; }
.form-text { margin-top: .375rem; font-size: .8125rem; color: var(--ink-3); }
.form-control, .form-select { min-height: 2.5rem; padding: .5rem .75rem; font-size: 1rem; color: var(--ink);
  background-color: var(--surface); border-color: var(--field-line); border-radius: var(--radius); box-shadow: var(--shadow-xs);
  transition: border-color .15s ease, box-shadow .15s ease; }
.form-select { padding-right: 2.25rem; }
.form-control::placeholder { color: #6e7583; }
.form-control:focus, .form-control:focus-within, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px rgba(52, 70, 200, .18); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus, .form-control.is-invalid:focus-within, .form-select.is-invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger), 0 0 0 4px rgba(196, 43, 28, .16); }
.form-control:disabled, .form-select:disabled { background-color: var(--hover); color: var(--ink-3); }
.invalid-feedback { margin-top: .375rem; font-size: .875rem; font-weight: 500; }
.invalid-feedback p { margin: 0; }
.invalid-feedback strong { font-weight: 600; }
[id^="div_id_"]:has(.is-invalid) { padding-left: .875rem; border-left: 3px solid var(--danger); }
.form-check { min-height: 1.75rem; padding-left: 1.875em; }
.form-check .form-check-input { margin-left: -1.875em; }
.form-check-input { width: 1.25em; height: 1.25em; margin-top: .15em; border-color: var(--field-line); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.form-check-label { font-weight: 500; }

/* Long office names in dropdowns must not push forms wider than a phone screen */
fieldset, .panel-details, .panel-details .card-body, form { min-width: 0; max-width: 100%; }
.form-select { max-width: 100%; text-overflow: ellipsis; }

/* ---------- Cards ---------- */
.card {
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-cap-padding-y: .75rem;
  --bs-card-cap-padding-x: 1.5rem;
  --bs-card-cap-bg: var(--surface);
  --bs-card-bg: var(--surface);
  box-shadow: var(--shadow-xs);
}
@media (max-width: 575.98px) { .card { --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1rem; --bs-card-cap-padding-x: 1rem; } }
.card-body > h2:first-child { margin-bottom: 1rem; }
.card-muted { --bs-card-bg: var(--surface-2); box-shadow: none; }

/* ---------- Alerts ---------- */
.alert { --bs-alert-padding-x: 1rem; --bs-alert-padding-y: .875rem; --bs-alert-border-radius: var(--radius-lg);
  --bs-alert-margin-bottom: 1.5rem; font-size: .9375rem; }
.alert.py-2 { padding-top: .75rem !important; padding-bottom: .75rem !important; }
.alert-link { font-weight: 600; text-decoration: underline; }
.alert .h6, .alert h2 { margin-bottom: .5rem; }
.alert-dismissible .btn-close { padding: 1.125rem 1rem; }
#error-summary { color: var(--ink); background: var(--surface); border: 2px solid var(--danger); box-shadow: var(--shadow-sm); }
#error-summary h2 { color: #9b2318; font-size: 1.0625rem; }
#error-summary ul { padding-left: 1.25rem; }
#error-summary li + li { margin-top: .5rem; }
#error-summary .alert-link { color: var(--danger); }
#error-summary:focus { outline: 3px solid rgba(196, 43, 28, .3); outline-offset: 2px; }

/* ---------- Badges: status is a soft pill with a dot, case class is an outlined pill ---------- */
.badge { --bs-badge-padding-x: .625rem; --bs-badge-padding-y: .3125rem; --bs-badge-font-size: .75rem; --bs-badge-font-weight: 600;
  --bs-badge-border-radius: 999px; display: inline-flex; align-items: center; gap: .375rem; line-height: 1.1;
  letter-spacing: .01em; vertical-align: middle; white-space: nowrap; }
.badge[class*="text-bg-"]::before { content: ""; width: .375rem; height: .375rem; flex: none; border-radius: 50%; background: var(--dot, currentColor); }
.badge.text-bg-primary { color: var(--accent-deep) !important; background-color: var(--accent-soft) !important; --dot: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.badge.text-bg-warning { color: #7a4300 !important; background-color: #fff3d6 !important; --dot: #e09d00; box-shadow: inset 0 0 0 1px #f3d68f; }
.badge.text-bg-info { color: #0b5c66 !important; background-color: #e6f5f6 !important; --dot: #0e8a97; box-shadow: inset 0 0 0 1px #a8d9de; }
.badge.text-bg-secondary { color: #5b3fb0 !important; background-color: #f2effc !important; --dot: #7b5fd6; box-shadow: inset 0 0 0 1px #d8cff5; }
.badge.text-bg-dark { color: #3d4451 !important; background-color: #eef0f3 !important; --dot: #8a919d; box-shadow: inset 0 0 0 1px #d5d9e0; }
.badge.text-bg-danger { color: #9b2318 !important; background-color: #fef1f0 !important; --dot: var(--danger); box-shadow: inset 0 0 0 1px #f6c4bf; }
.badge.bg-white { background-color: var(--surface) !important; }
.badge.border-danger { border-color: #eaa49c !important; color: #b42318 !important; }
.badge.border-success { border-color: #96d1b0 !important; color: #127a47 !important; }
.badge.bg-white.border:not(.border-danger):not(.border-success) { border-color: var(--line-strong) !important; color: var(--ink-2) !important; }
.nav-link .badge.text-bg-warning { color: #7a4300 !important; background-color: #ffe9b0 !important; box-shadow: none; min-width: 1.5rem; justify-content: center; }

/* ---------- Tables ---------- */
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.table-card > .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line-soft);
  --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--ink); margin-bottom: 0; font-size: .9375rem; }
.table-card > .table > thead > tr > th { --bs-table-bg: var(--surface-2); --bs-table-color: var(--ink-3);
  padding: .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3;
  border-bottom: 1px solid var(--line); vertical-align: bottom; }
.table-card > .table > tbody > tr > td { padding: .875rem .75rem; }
.table-card > .table > tbody > tr:last-child > td { border-bottom: 0; }
.table-card > .table-sm > thead > tr > th, .table-card > .table-sm > tbody > tr > td { padding: .625rem .75rem; }
.table-card > .table > * > tr > :first-child { padding-left: 1rem; }
.table-card > .table > * > tr > :last-child { padding-right: 1rem; }
.table-card > .table > thead > tr > th:first-child { border-top-left-radius: calc(var(--radius-lg) - 1px); }
.table-card > .table > thead > tr > th:last-child { border-top-right-radius: calc(var(--radius-lg) - 1px); }
.case-table td .badge { margin-block: .125rem; }
.case-table a.case-number { display: inline-block; padding-block: .75rem; margin-block: -.75rem; font-weight: 600; text-decoration: none; }
.case-table a.case-number:hover { text-decoration: underline; }
.case-table td { font-variant-numeric: tabular-nums; }
.case-table td.case-reason { min-width: 6rem; overflow-wrap: normal; }  /* "Follow-up overdue" wraps between words */
/* Up to large laptops the sidebar leaves a narrow content column: tighter cells so no column is cut off */
@media (max-width: 1399.98px) {
  .table-card > .table > thead > tr > th, .table-card > .table > tbody > tr > td { padding-inline: .5rem; }
}
@media (max-width: 575.98px) {
  .table-card > .table > * > tr > :first-child { padding-left: .75rem; }
  .table-card > .table > * > tr > :last-child { padding-right: .75rem; }
}
.count-table td.text-end, .count-table th.text-end { font-variant-numeric: tabular-nums; }
.result-count { margin-bottom: .75rem; }

/* Long words or links typed into notes must not widen the page */
.detail-list dd, .timeline-item, .alert { overflow-wrap: anywhere; }  /* case-table cells keep break-word: no mid-word breaks */

/* ---------- Pagination ---------- */
.pagination { --bs-pagination-padding-x: .875rem; --bs-pagination-padding-y: .5rem; --bs-pagination-font-size: .9375rem;
  --bs-pagination-color: var(--ink); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--line-strong);
  --bs-pagination-border-radius: var(--radius); --bs-pagination-hover-color: var(--ink); --bs-pagination-hover-bg: var(--hover);
  --bs-pagination-hover-border-color: var(--line-strong); --bs-pagination-focus-color: var(--ink); --bs-pagination-focus-bg: var(--surface);
  --bs-pagination-focus-box-shadow: var(--ring); --bs-pagination-disabled-color: var(--ink-2);
  --bs-pagination-disabled-bg: var(--surface); --bs-pagination-disabled-border-color: var(--line-strong); }
.page-link { font-weight: 500; }

/* ---------- Case numbers ---------- */
.case-number { white-space: nowrap; font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum", "zero"; letter-spacing: 0; }
h1.case-number { font-size: 1.625rem; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Dashboard stat cards ---------- */
.stat-link { text-decoration: none; color: inherit; display: block; height: 100%; border-radius: var(--radius-lg); }
.stat-card { position: relative; border-color: var(--line) !important; transition: border-color .15s ease, box-shadow .15s ease; }
.stat-card .card-body { display: flex; flex-direction: column; justify-content: space-between; gap: .75rem; padding: 1.25rem; }
.stat-card .small { display: flex; align-items: flex-start; gap: .5rem; padding-right: 1.5rem; font-size: .8125rem; font-weight: 550;
  line-height: 1.35; color: var(--ink-2); }
.stat-card .small::before { content: ""; width: .5rem; height: .5rem; margin-top: .3rem; flex: none; border-radius: 50%; background: var(--stat-dot, var(--ink-3)); }
.stat-card.border-warning { --stat-dot: #e09d00; }
.stat-card.border-primary { --stat-dot: var(--accent); }
.stat-card.border-danger { --stat-dot: var(--danger); }
.stat-card.border-success { --stat-dot: var(--success); }
.stat-card .display-6 { font-size: 2rem; font-weight: 650; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-card::after { content: ""; position: absolute; top: 1.125rem; right: 1rem; width: 1.25rem; height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238a919d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 5 5 5-5 5'/%3E%3C/svg%3E") center / 1.125rem no-repeat;
  transition: transform .15s ease; }
.stat-link:hover .card, .stat-link:focus-visible .card { border-color: var(--accent-line) !important; box-shadow: var(--shadow-md); }
.stat-link:hover .stat-card::after, .stat-link:focus-visible .stat-card::after { transform: translateX(2px); }
.stat-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .stat-card .card-body { padding: 1rem; }
  .stat-card::after { top: .875rem; right: .75rem; }
  .stat-card .display-6 { font-size: 1.75rem; }
}

/* ---------- Filter bars (case list, reports) ---------- */
.filter-form { margin: 0 0 1rem !important; padding: .5rem .75rem 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.filter-form .form-label { font-size: .8125rem; font-weight: 600; color: var(--ink-2); margin-bottom: .25rem; }
.filter-form .form-check { margin-top: 1.75rem; }
.filter-form .form-check-label { font-size: .875rem; line-height: 1.35; }

/* ---------- Case page: details, then actions, then timeline on phones; actions beside both on wide screens ---------- */
.case-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "details" "panel" "timeline"; }
@media (min-width: 1200px) {
  .case-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "details panel" "timeline panel"; align-items: start; }
}
.area-details { grid-area: details; }
.area-panel { grid-area: panel; }
.area-timeline { grid-area: timeline; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
@media (max-width: 575.98px) { .area-timeline { padding: 1.25rem 1rem; } }
.area-timeline > h2 { margin-bottom: 1.25rem; }

.detail-list.small { font-size: .9375rem; }
.detail-list { margin-top: -.25rem; }
.detail-list dt { font-weight: 500; color: var(--ink-3); }
.detail-list dd { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .detail-list dt { padding-top: .75rem; border-top: 1px solid var(--line-soft); }
  .detail-list dt:first-of-type { padding-top: 0; border-top: 0; }
  .detail-list dd { padding-top: .125rem; padding-bottom: .75rem; }  /* keep the grid's side padding, like dt */
}
@media (min-width: 576px) {
  .detail-list dt, .detail-list dd { padding-block: .75rem; border-top: 1px solid var(--line-soft); }
  .detail-list dt:first-of-type, .detail-list dt:first-of-type + dd { padding-top: .25rem; border-top: 0; }
}

.area-panel .card-body > h2.h6 { font-size: 1rem; }
.panel-details > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3rem;
  cursor: pointer; font-weight: 600; font-size: .9375rem; list-style: none; transition: background-color .15s ease; }
.panel-details > summary::-webkit-details-marker { display: none; }
.panel-details > summary::after { content: ""; width: 1.25rem; height: 1.25rem; flex: none; transition: transform .15s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235f6775' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E") center / 1.25rem no-repeat; }
.panel-details[open] > summary::after { transform: rotate(180deg); }
.panel-details > summary:hover { background: var(--surface-2); }
.panel-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel-details:not([open]) > summary { border-bottom: 0; border-radius: var(--bs-card-inner-border-radius); }
.panel-details.border-danger-subtle > summary { color: #9b2318; }
.accept-card { --bs-card-bg: #fffaee; border-color: #f3d68f !important; }

.timeline-item { position: relative; margin-left: .375rem; padding-left: 1.25rem; padding-bottom: 1.25rem !important; border-left: 2px solid var(--line); }
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0 !important; }
.timeline-item::before { content: ""; position: absolute; left: -7px; top: .3125rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface); border: 2px solid #9aa1ad; }
.timeline-item.referral::before { background: var(--teal); border-color: var(--teal); }
.timeline-item:first-child::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.timeline-item > .small.text-body-secondary { font-size: .8125rem; color: var(--ink-3) !important; }
.timeline-item > div:nth-child(2) { margin-top: .125rem; }
.timeline-item > .small:not(.text-body-secondary) { margin-top: .25rem; color: var(--ink-2); font-size: .9rem; }

/* ---------- Public home ---------- */
.sauti-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  padding: 1rem 1.25rem; color: #4a2a00; background: var(--bs-warning-bg-subtle); border: 1px solid var(--bs-warning-border-subtle);
  border-radius: var(--radius-lg); }
.sauti-banner .fs-5 { display: flex; align-items: center; gap: .875rem; font-size: 1.0625rem !important; font-weight: 600; line-height: 1.35; }
.sauti-banner .fs-5::before { content: ""; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%;
  background: #fde6a8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a4300' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.6l1.4 4.2-2 1.3a11 11 0 0 0 6.4 6.4l1.3-2 4.2 1.4v2.6a2 2 0 0 1-2.1 2A16.5 16.5 0 0 1 4.5 5.6a2 2 0 0 1 2.1-2.1z'/%3E%3C/svg%3E") center / 1.25rem no-repeat; }
@media (max-width: 575.98px) { .sauti-banner { padding: 1rem; } .sauti-banner .btn { flex: 1 1 100%; } }

.home-hero h1 { margin-bottom: 1rem; font-size: clamp(1.875rem, 1.35rem + 1.8vw, 2.5rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
.home-hero .lead { margin-bottom: 1.5rem; }
@media (min-width: 992px) { .home-hero { padding-top: .5rem; padding-right: 2rem; } }
.check-list { display: grid; gap: .75rem; padding: 0; list-style: none; }
.check-list li { position: relative; min-height: 1.5rem; padding-left: 2.25rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233446c8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7'/%3E%3C/svg%3E") center / .9375rem no-repeat; }
.cta-row .btn { flex: 1 1 auto; }
@media (min-width: 576px) { .cta-row .btn { flex: 0 0 auto; } }
.card-muted .card-body p strong { color: var(--ink); }

/* ---------- Public report form: big touch targets ---------- */
.report-form .form-control, .report-form .form-select { min-height: 48px; font-size: 1.05rem; }
.report-form fieldset, .form-sections fieldset { padding: 1.5rem 1.5rem .5rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
@media (max-width: 575.98px) { .report-form fieldset, .form-sections fieldset { padding: 1.25rem 1rem .25rem; } }
.report-form legend, .form-sections legend { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: 1.125rem; font-weight: 600; }
.report-form .form-text { font-size: .875rem; }
.report-form legend .fw-normal, .form-sections legend .fw-normal { font-size: 1rem; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-right: .375rem;
  vertical-align: .0625rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-size: .875rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--accent-line); }
/* Phone numbers and short links inside sentences: a 44px-tall tap area, same look and line height */
main a[href^="tel:"]:not(.btn), .auth-wrap > p > a { position: relative; }
main a[href^="tel:"]:not(.btn) { white-space: nowrap; }
main a[href^="tel:"]:not(.btn)::after, .auth-wrap > p > a::after { content: ""; position: absolute; inset: -.875rem -.25rem; }
.helpline-note { padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
form[aria-busy="true"] [type="submit"] { cursor: progress; }  /* app.js: the form is sending */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Report sent ---------- */
.done-card { padding: 2rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
@media (max-width: 575.98px) { .done-card { padding: 1.5rem 1rem; } }
.done-card::before { content: ""; display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%;
  background: #e3f5ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2313804b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7'/%3E%3C/svg%3E") center / 1.75rem no-repeat;
  box-shadow: 0 0 0 6px #f1faf4; }
.case-ticket { margin: .5rem 0 1.5rem; padding: 1rem .75rem; font-size: clamp(1.375rem, .9rem + 3vw, 2rem); font-weight: 700; line-height: 1.2;
  color: var(--ink); background: var(--accent-soft); border: 2px dashed #8f9be3; border-radius: var(--radius-lg);
  white-space: normal; overflow-wrap: anywhere; }

/* ---------- Log in ---------- */
.auth-wrap { max-width: 26rem; margin: .5rem auto 0; }
@media (min-width: 768px) { .auth-wrap { margin-top: 2.5rem; } }
.auth-card .brand-mark { height: 4rem; margin-bottom: 1.25rem; }

/* ---------- Services directory ---------- */
.provider-list > li { padding-top: 1rem; margin-bottom: 1rem !important; border-top: 1px solid var(--line-soft); }
.provider-list > li:first-child { padding-top: 0; border-top: 0; }
.provider-list > li:last-child { margin-bottom: 0 !important; }

/* ---------- Reports ---------- */
.report-summary { padding: .875rem 1.25rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); color: var(--ink-2); }
.report-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Error and no-access pages ---------- */
.state-card { padding: 2rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
@media (max-width: 575.98px) { .state-card { padding: 1.5rem 1rem; } }
.state-card::before { content: ""; display: block; width: 3rem; height: 3rem; margin-bottom: 1.25rem; border-radius: var(--radius-lg);
  background: var(--accent-soft) var(--state-icon) center / 1.5rem no-repeat; }
.state-lock { --state-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233446c8' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.state-search { --state-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233446c8' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E"); }
.state-clock { --state-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233446c8' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }

/* Standalone 500 page (no Bootstrap) */
.error-page { max-width: 40rem; margin: 2rem auto; padding: 0 1rem; font-family: var(--bs-font-sans-serif); line-height: 1.55; color: var(--ink); background: var(--canvas); }
.error-page h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.error-page a { color: var(--accent); }

/* ---------- Small screens and touch: targets of at least 44px ---------- */
@media (max-width: 767.98px) {
  .btn, .btn-sm { min-height: 44px; }
  .form-control, .form-select { min-height: 44px; }
  .page-link { min-height: 44px; display: flex; align-items: center; }
  .form-check { min-height: 44px; display: flex; align-items: center; gap: .5rem; padding-left: 0; }
  .form-check .form-check-input { margin: 0; flex: none; }
  .filter-form .form-check { margin-top: 0; }
}
/* Phones: brand, Quick exit and the menu button must share one row */
@media (max-width: 400px) {
  .navbar-brand { font-size: 1rem; margin-right: .5rem; }
  .shell-public .app-topbar .brand-mark { display: none; }
  .app-topbar .quick-exit { --bs-btn-padding-x: .625rem; }
}
@media (max-width: 359.98px) { .brand-long { display: none; } }

/* Long unbroken words (e.g. office names without spaces) wrap instead of widening the page */
h1, .h3, .sidebar, .navbar-brand { overflow-wrap: anywhere; }

/* Without Bootstrap's script (JavaScript off or blocked) the phone menu stays open so people can still navigate */
.no-js .navbar-collapse.collapse { display: block; }
.no-js .navbar-toggler { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

@media print {
  .sidebar, .app-topbar, .skip-link, .area-panel, .site-footer { display: none !important; }
  body { background: #fff; }
  .card, .area-timeline, .table-card { box-shadow: none; }
}