/* All styling for the dashboard and login pages.

   Sections, in order:
     1. Colours and page layout (header, top tabs)
     2. Reusable pieces (cards, inputs, buttons, summary cards, tables, badges)
     3. Help text, login page
     4. Data Analysis tab (sidebar, sub-tabs, results)
   Colours are set once as variables in :root and reused everywhere. */

/* ===================== 1. Colours and page layout ===================== */

/* The Inter font, served by the app itself (static/fonts, SIL Open Font License),
   so no page ever contacts Google: nothing about the visitor leaves this site. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/inter-latin-700.woff2") format("woff2"); }


:root {
  /* Brand + surfaces */
  --accent: #3b5bdb;
  --accent-strong: #2f4ac0;
  --accent-soft: #edf1ff;
  --accent-ring: rgba(59, 91, 219, 0.25);
  --bg: #f4f6fb;
  --surface: #ffffff;
  --bg-soft: #f7f8fc;
  --border: #e2e6ef;
  --border-strong: #cfd5e3;

  /* Text */
  --text: #1c2333;
  --text-muted: #667085;

  /* Status */
  --success: #15803d;
  --success-soft: #e7f6ec;
  --danger: #c0392b;
  --danger-soft: #fdecea;
  --warning: #b45309;
  --warning-soft: #fef3e2;
  --error: #c0392b;

  /* Summary card accents, cycled in order */
  --c1: #3b5bdb;
  --c2: #0d9488;
  --c3: #7c3aed;
  --c4: #d97706;
  --c5: #db2777;
  --c6: #0284c7;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

b { font-weight: 600; }

/* ---------- Header ---------- */
.app-header {
  background: linear-gradient(120deg, #2f4ac0 0%, #3b5bdb 55%, #4c6ef5 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(28, 35, 51, 0.12);
}
.app-header-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 18px 28px 0 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
}
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.subtitle {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  margin-top: 2px;
}

/* ---------- Top-level tabs (sit in the header) ---------- */
.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tab-btn {
  margin: 0;
  padding: 10px 18px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tab-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.tab-btn.active {
  background: var(--bg);
  color: var(--accent);
  font-weight: 600;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Page body ---------- */
main {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 28px 60px 28px;
}

.muted { color: var(--text-muted); font-size: 13px; }
.error { color: var(--error); font-size: 13px; margin-top: 8px; }
.error:empty { display: none; }

@media (max-width: 640px) {
  .app-header-inner, main { padding-left: 16px; padding-right: 16px; }
  .tab-btn { padding: 9px 12px; }
}

/* ===================== 2. Reusable pieces ===================== */

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}

.upload-card {
  max-width: 640px;
  padding: 24px;
}
.upload-card .field-block { margin-bottom: 0; }
.upload-card #uploadStatus { margin-top: 12px; }
.upload-card #uploadStatus:empty { display: none; }

/* ---------- Form controls ---------- */
.field-block { margin-bottom: 16px; }
label.block-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

select, input[type="file"], input[type="number"], input[type="password"] {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
select:focus, input[type="number"]:focus, input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

input[type="file"] {
  padding: 18px 14px;
  border: 2px dashed var(--border-strong);
  background: var(--bg-soft);
  cursor: pointer;
}
input[type="file"]:hover { border-color: var(--accent); background: var(--accent-soft); }
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 500;
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent);
  margin: 0;
}

/* Fieldsets render as labelled groups; "Select all / Deselect all" sit on the legend's right. */
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 18px 0;
  min-width: 0;
}
legend {
  float: left;
  padding: 0;
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
}
.fieldset-actions {
  float: right;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
fieldset > .checkbox-grid,
fieldset > .radio-grid,
fieldset > .hint { clear: both; }

/* Checkbox / radio options as toggle chips. */
.checkbox-grid, .radio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.checkbox-grid label, .radio-grid label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text);
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
}
.checkbox-grid label:hover, .radio-grid label:hover { border-color: var(--accent); }
.checkbox-grid label:has(input:checked),
.radio-grid label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
  font-weight: 500;
}
.checkbox-grid.months { display: grid; grid-template-columns: repeat(4, 1fr); }
.checkbox-grid.months label { justify-content: flex-start; }
.radio-grid.stacked { flex-direction: column; }
.radio-grid.stacked label { border-radius: var(--radius-sm); white-space: normal; }

/* Long lists (care homes, residents) scroll instead of growing the sidebar. */
.scroll-list {
  max-height: 190px;
  overflow-y: auto;
  padding: 2px;
}

/* ---------- Buttons ---------- */
button {
  font-family: inherit;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
button:disabled {
  background: #a9b7ea;
  cursor: not-allowed;
}

button.big-filter-btn {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}
button.big-filter-btn:hover:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
button.big-filter-btn.is-loading {
  position: relative;
  color: transparent;
}
button.big-filter-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

button.secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
}
button.secondary:hover {
  background: var(--accent);
  color: #fff;
}

button.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
button.link-btn:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

button.remove-row-btn {
  background: var(--surface);
  color: var(--danger);
  border: 1px solid #f0b4ad;
  padding: 3px 10px;
  font-size: 12px;
  margin-top: 0;
}
button.remove-row-btn:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
button.remove-row-btn:disabled {
  background: var(--danger-soft);
  color: #e6a39b;
  border-color: var(--danger-soft);
  cursor: not-allowed;
}

/* ---------- Summary cards ---------- */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.summary-cards:empty { display: none; }
.summary-card {
  --card-accent: var(--c1);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 12px 18px;
  overflow: hidden;
}
.summary-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--card-accent);
}
.summary-card:nth-child(6n+2) { --card-accent: var(--c2); }
.summary-card:nth-child(6n+3) { --card-accent: var(--c3); }
.summary-card:nth-child(6n+4) { --card-accent: var(--c4); }
.summary-card:nth-child(6n+5) { --card-accent: var(--c5); }
.summary-card:nth-child(6n+6) { --card-accent: var(--c6); }
.summary-card .value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.summary-card .label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.summary-cards.compact { margin: 12px 0 0 0; grid-template-columns: repeat(auto-fill, minmax(150px, 220px)); }
.summary-cards.compact > .muted { grid-column: 1 / -1; }

/* ---------- Tables ---------- */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
}
th, td {
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}
th {
  background: var(--bg-soft);
  font-size: 12px;
  font-weight: 600;
  color: #475467;
}
tbody tr:nth-child(even) > td { background: #fafbfe; }
tbody tr:hover > td { background: var(--accent-soft); }
tbody tr:last-child > td { border-bottom: none; }

.table-wrap {
  max-height: 420px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.table-wrap > .muted { display: block; padding: 12px; }
.table-wrap table { margin-top: 0; border: none; }
.table-wrap th { position: sticky; top: 0; z-index: 1; }
.table-wrap.short { max-height: 260px; }
.table-wrap.medium { max-height: 320px; }
.table-wrap.detail { margin-top: 16px; max-height: 560px; }

/* ---------- Status badges (Active residents) ---------- */
.status-active, .status-maybe, .status-mixed {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.status-active { color: var(--success); background: var(--success-soft); }
.status-maybe { color: var(--danger); background: var(--danger-soft); }
.status-mixed { color: var(--warning); background: var(--warning-soft); }
.log-warn { color: var(--warning); font-weight: 600; }

/* ---------- Range sliders ---------- */
input[type="range"] {
  width: 100%;
  margin: 6px 0 2px 0;
  padding: 0;
  accent-color: var(--accent);
}
.slider-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}
.slider-value {
  display: inline-block;
  min-width: 2.2em;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ===================== 3. Help text, login page ===================== */

/* ---------- Help text for newcomers ---------- */
.help-box { margin-bottom: 16px; }
.help-box h2 { font-size: 16px; margin: 0 0 8px 0; }
.help-box ol { margin: 0 0 10px 0; padding-left: 20px; }
.help-box li { margin-bottom: 4px; }
.help-box p { margin: 6px 0 0 0; }
.help-box code { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 12px; }
.hint { color: var(--text-muted); font-size: 12px; margin: 2px 0 8px 0; }
.code-legend { font-size: 13px; margin-top: 12px; }
.code-legend summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.code-legend ul { margin: 6px 0 0 0; padding-left: 18px; color: var(--text-muted); }

/* ---------- Login page ---------- */
.login-page main { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-card { width: 100%; max-width: 380px; padding: 28px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.login-brand .brand-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.login-card button { width: 100%; }
.login-error { margin: 0 0 12px 0; }

/* "Log out" link in the dashboard header */
.logout-link {
  align-self: center;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-decoration: none;
}
.logout-link:hover { color: #fff; text-decoration: underline; }

/* ===================== 4. Data Analysis tab ===================== */

.analysis-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* ---------- Filter sidebar ---------- */
.filter-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 0 18px;
  overflow-y: auto;
}
.filter-panel-title {
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
}
/* Apply button stays visible at the bottom of the sidebar while scrolling the filters. */
.filter-panel-footer {
  position: sticky;
  bottom: 0;
  margin: auto -18px 0 -18px;
  padding: 4px 18px 16px 18px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), var(--surface) 30%);
  border-top: 1px solid var(--border);
}
.filter-panel-footer .big-filter-btn { width: 100%; padding: 11px 18px; }

/* ---------- Results ---------- */
.results-panel { min-width: 0; }

.subtabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin: 0 0 18px 0;
  background: #e7eaf3;
  border-radius: var(--radius);
}
.subtab-btn {
  margin: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.subtab-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.6); }
.subtab-btn.active {
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow);
}
.subtab-panel { display: none; }
.subtab-panel.active { display: block; }

.section-heading {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px 0;
}
.section-subheading {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 14px;
}
.section-subheading:empty { display: none; }
hr.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0 24px 0;
}

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

/* Breakdown tables: 2 x 2 grid on wide screens. */
.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.breakdown-block { min-width: 0; }
.breakdown-block h4 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px 0;
}
.column > .breakdown-block + .breakdown-block { margin-top: 20px; }

/* "Changed within (hours)" box on the Event Filter tab. */
.threshold-card { margin: 4px 0 8px 0; }
.inline-form {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inline-form input[type="number"] { width: 140px; }
.inline-form button { margin-top: 0; }

/* Filters + export button above each detail table. */
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 28px;
}
.table-toolbar > button { margin: 0 0 0 auto; }
.inline-filter { margin: 0; }
.inline-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Segmented control look for the small radio groups. */
.radio-grid.segmented {
  gap: 0;
  flex-wrap: nowrap;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.radio-grid.segmented label {
  border: none;
  border-radius: 0;
  padding: 6px 12px;
}
.radio-grid.segmented label + label { border-left: 1px solid var(--border); }
.radio-grid.segmented input { display: none; }
.radio-grid.segmented label:has(input:checked) {
  background: var(--accent);
  color: #fff;
}

/* ---------- Active residents ---------- */
.slider-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.slider-cards .field-block { margin-bottom: 0; }
.cadence-note { margin: 8px 0; }
.cadence-note:empty { display: none; }

tr.logs-row > td {
  background: var(--bg-soft) !important;
  white-space: normal;
  padding: 12px 16px;
}
.logs-hints { margin: 0 0 10px 18px; padding: 0; font-size: 13px; }
.logs-hints li { margin-bottom: 2px; }
.logs-table { margin-top: 6px; }

/* The flagged table wraps its text so "Show logs" and the expanded logs stay in view. */
#activeFlaggedWrap td { white-space: normal; }
#activeFlaggedWrap td:nth-child(-n+4) { white-space: nowrap; }

/* ---------- Data tab (database mode) ---------- */
.data-status-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.data-status-actions { display: flex; align-items: center; gap: 16px; }

/* Sync status banner on the Data tab (set by renderDataStatus in app.js). */
.sync-status { margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.sync-status.is-running, .sync-status.is-error {
  font-size: 15px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid;
}
.sync-status.is-running { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.sync-status.is-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.sync-status.is-ok { color: var(--success); font-weight: 500; }
.sync-status-line { display: flex; align-items: center; gap: 10px; }
.sync-spinner {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent-ring);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.sync-progress { margin-top: 10px; height: 8px; border-radius: 999px; background: rgba(59, 91, 219, 0.15); overflow: hidden; }
.sync-progress > div { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.4s; }
#dataCareHomesBody tr.muted td { color: var(--text-muted); }
#billingTableWrap td:last-child { white-space: normal; }

@media (max-width: 1280px) {
  .breakdown-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Narrow screens: sidebar above results ---------- */
@media (max-width: 960px) {
  .analysis-layout { grid-template-columns: minmax(0, 1fr); }
  .filter-panel { position: static; max-height: none; }
  .breakdown-grid { grid-template-columns: minmax(0, 1fr); }
}