/* Auditis client. Palette copied from the original platform's dark shell (frontend/style.css,
   "Nocturne"): every colour is a role token on :root. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #161826;
  --bg2: #1e2030;
  --bg3: #272a3b;
  --border: #2c2f40;
  --border-bright: #3f4356;
  --brand-primary: #007f67;
  --brand-primary-hover: #00a382;
  --teal: color-mix(in srgb, var(--brand-primary) 66%, #ffffff);
  --teal-dim: color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --ok: #2eb98d;
  --amber: #d99b2e;
  --amber-dim: color-mix(in srgb, var(--amber) 20%, transparent);
  --red: #e0645a;
  --red-dim: color-mix(in srgb, var(--red) 20%, transparent);
  --text: #e9e9ed;
  --text-dim: #9fa2ad;
  --text-faint: #8d8f97;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
}

body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); min-height: 100vh; }
h1 { font-size: 22px; font-weight: 600; margin-bottom: 20px; }
h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
h3 { font-size: 14px; font-weight: 600; margin: 16px 0 8px; }
[hidden] { display: none !important; }

.topbar { display: flex; align-items: center; gap: 24px; padding: 12px 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: .02em; color: var(--teal); }
.breadcrumb { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand { text-decoration: none; }
.brand:hover { color: var(--text); }
.crumb { color: var(--text); font-weight: 500; }
.crumb::before { content: "›"; color: var(--text-faint); margin-right: 10px; }
#lang-toggle { margin-left: auto; }
.stepper { display: flex; gap: 8px; list-style: none; flex: 1; flex-wrap: wrap; counter-reset: step; }
.stepper li { color: var(--text-faint); padding: 4px 10px; border-radius: 999px; counter-increment: step; }
.stepper li::before { content: counter(step) ". "; }
.stepper li.active { color: var(--text); background: var(--teal-dim); }
.stepper li.done { color: var(--text-dim); }

main { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }
.step { display: block; }
.banner { display: flex; gap: 12px; align-items: center; padding: 12px 16px; margin-bottom: 20px; border: 1px solid var(--border-bright); border-radius: var(--radius-md); background: var(--bg2); flex-wrap: wrap; }
.banner.warn { border-color: var(--red); background: var(--red-dim); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg2); }
.card.option { cursor: pointer; position: relative; padding-left: 52px; }
.card.option input { position: absolute; left: 20px; top: 22px; width: 18px; height: 18px; accent-color: var(--brand-primary); }
.card.option:has(input:checked) { border-color: var(--teal); background: var(--teal-dim); }
.card-title { font-weight: 600; word-break: break-word; }
.card-desc { color: var(--text-dim); }

/* The toolbox: one tile per tool. */
.lead { margin: -12px 0 20px; }
.tiles { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 320px)); }
.tile { color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.tile:hover, .tile:focus-visible { border-color: var(--teal); background: var(--bg3); outline: none; }
.tile-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: var(--radius-md); background: var(--teal-dim); color: var(--teal); }
.tile-icon svg { width: 22px; height: 22px; }

.panel { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg2); padding: 20px; margin-bottom: 20px; min-width: 0; }
.panel legend { padding: 0 6px; color: var(--text-dim); font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > label, .label { color: var(--text-dim); font-weight: 500; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.hint { color: var(--text-dim); font-size: 13px; }
.hint.warn, .warn { color: var(--amber); }
#parse-list .hint { white-space: pre-line; }
.ok { color: var(--ok); }

input[type=text], input[type=password], input[type=date], select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border-bright); border-radius: var(--radius-sm);
  padding: 8px 10px; font: inherit; min-width: 0;
}
input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, select:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
input.invalid { border-color: var(--red); background: var(--red-dim); }
#address, #reference { width: min(560px, 100%); }

.btn { font: inherit; font-weight: 500; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-bright); background: var(--bg3); color: var(--text); cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--teal); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* A link styled as a button or a card keeps the page's colours, not the browser's blue. */
a.btn, a.card { color: var(--text); text-decoration: none; }
a.btn.primary { color: #fff; }
a.card:hover, a.card:focus-visible { border-color: var(--teal); background: var(--bg3); outline: none; }
.back-link { color: var(--teal); text-decoration: none; }
.back-link:hover, .back-link:focus-visible { text-decoration: underline; }
.btn.primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--brand-primary-hover); }
.btn.ghost { background: transparent; }
.btn.small { padding: 2px 10px; font-size: 13px; }

.file-pick { display: flex; align-items: center; gap: 12px; }
.file-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-pick input:focus-visible + .btn { outline: 2px solid var(--teal); outline-offset: 2px; }
.file-pick .file-name { color: var(--text-dim); overflow-wrap: anywhere; }
.actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* The history's runs: one row each, the whole row opening the run. */
table.history-runs { width: 100%; margin-bottom: 12px; }
table.history-runs tbody tr { cursor: pointer; }
table.history-runs tbody tr:hover td { background: var(--teal-dim); }
/* A history run: inputs on the left, outputs on the right. */
.history-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.history-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.history-col ul:not(.warnings) { padding-left: 20px; }
.history-files { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.history-files .btn { max-width: 100%; word-break: break-word; text-align: left; }

.autocomplete { position: relative; width: min(560px, 100%); }
.autocomplete input { width: 100%; }
.suggestions { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px); list-style: none; background: var(--bg2); border: 1px solid var(--border-bright); border-radius: var(--radius-sm); max-height: 260px; overflow-y: auto; }
.suggestions li { padding: 8px 10px; cursor: pointer; }
.suggestions li:hover { background: var(--bg3); }

.station { display: flex; gap: 10px; align-items: center; padding: 6px 0; flex-wrap: wrap; cursor: pointer; }
.station input { accent-color: var(--brand-primary); }
.choice { gap: 20px; }
.choice label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.choice input { accent-color: var(--brand-primary); }
#weather-import { margin-top: 12px; }
.tag { font-size: 12px; color: var(--amber); border: 1px solid var(--amber); border-radius: 999px; padding: 0 8px; }

.dropzone { display: block; padding: 28px; border: 1px dashed var(--border-bright); border-radius: var(--radius-md); text-align: center; color: var(--text-dim); cursor: pointer; }
.dropzone.over, .dropzone:hover { border-color: var(--teal); color: var(--text); }
.dropzone input { display: none; }
.file-list { list-style: none; margin-top: 12px; }
.file-list li { display: flex; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.file-list li > span:first-child { flex: 1; min-width: 160px; word-break: break-word; }
.file-list li.error .status { color: var(--red); }
.file-list li.done .status { color: var(--ok); }
.file-list li > ul, .file-list li > p { flex-basis: 100%; }

.spinner { display: inline-flex; gap: 8px; align-items: center; color: var(--text-dim); }
.spinner::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--border-bright); border-top-color: var(--teal); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.facts { list-style: none; margin: 12px 0; }
details { margin: 6px 0; }
details summary { cursor: pointer; color: var(--text-dim); }
details.empty summary { cursor: default; }
details ul { margin: 6px 0 6px 20px; color: var(--text-dim); font-size: 13px; }
.facts li.edited { color: var(--teal); }
/* Weather corrections: each run of interpolated or blank hours opens on its hours. */
.runs { margin: 6px 0 6px 20px; font-size: 13px; }
.runs details.run summary { color: var(--text-dim); }
.runs details.run[open] { padding-bottom: 8px; }
.run-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
table.weather-hours { margin-top: 6px; }
table.weather-hours tr.neighbour td { color: var(--text-faint); }
table.weather-hours tr.edited td { background: var(--teal-dim); }
table.weather-hours input[type=text] { width: 90px; }

.table-scroll { overflow-x: auto; }
table.grid { border-collapse: collapse; margin-top: 12px; font-size: 13px; }
table.grid th, table.grid td { border-bottom: 1px solid var(--border); padding: 4px 8px; text-align: left; white-space: nowrap; }
table.grid th { color: var(--text-faint); font-weight: 500; }
table.review input[type=text] { width: 110px; padding: 4px 6px; }
table.review input[type=date] { padding: 4px 6px; }
table.review select { padding: 4px 6px; }
table.review tr.flagged td { background: var(--amber-dim); }

table.review tr.current-doc td:first-child { box-shadow: inset 3px 0 0 var(--teal); }
.link-btn { font: inherit; color: var(--teal); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.link-btn:hover { text-decoration: underline; }

/* The bill review: the results on the left, the source documents on the right. */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head h2 { margin-bottom: 0; }
.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.review-main { min-width: 0; }
#bill-warnings:not(:empty) { margin: 16px 0; }
.doc-viewer { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 32px); min-width: 0; }
.doc-viewer select { width: 100%; }
.doc-viewer iframe { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg3); }
.doc-viewer .doc-image { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg3); }
.doc-viewer .doc-image img { display: block; width: 100%; height: auto; }
.review-layout.no-docs { grid-template-columns: minmax(0, 1fr); }
.review-layout.no-docs .doc-viewer { position: static; height: auto; order: -1; }

/* Full window: the panel covers the page and each column scrolls on its own. */
body.no-scroll { overflow: hidden; }
#bills-panel.expanded { position: fixed; inset: 0; z-index: 50; margin: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; }
#bills-panel.expanded .review-layout { flex: 1; min-height: 0; align-items: stretch; }
#bills-panel.expanded .review-main { overflow: auto; padding-right: 4px; }
#bills-panel.expanded .doc-viewer { position: static; height: auto; min-height: 0; }

@media (max-width: 960px) {
  .review-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-viewer { position: static; height: 70vh; }
  #bills-panel.expanded { overflow: auto; }
  #bills-panel.expanded .review-layout { flex: none; }
  #bills-panel.expanded .review-main { overflow: visible; }
  #bills-panel.expanded .doc-viewer { height: 70vh; }
}
.warnings { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.warnings li { padding: 6px 10px; border-left: 3px solid var(--amber); background: var(--bg); border-radius: var(--radius-sm); }
.warnings li.blocking { border-left-color: var(--red); background: var(--red-dim); }
.warnings li.link { cursor: pointer; }
.warnings li.link:hover { background: var(--bg3); }

@media (max-width: 600px) {
  main { padding: 20px 16px 48px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .history-cols { grid-template-columns: minmax(0, 1fr); }
  .topbar { padding: 12px 16px; }
}

.auth { position: fixed; inset: 60px 0 0 0; z-index: 50; overflow: auto; background: var(--bg); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card form { display: flex; flex-direction: column; gap: 8px; }
.user-bar { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.user-email { color: var(--text-dim); }

/* Admin area: its sections, then one card per template. */
.subnav { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.subnav a { padding: 8px 14px; color: var(--text-dim); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover, .subnav a:focus-visible { color: var(--text); }
.subnav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--teal); }
#admin-template-cards details summary { cursor: pointer; color: var(--text-dim); }
#admin-template-cards details .history-files { margin-top: 8px; }
.file-pick input:disabled + .btn { opacity: .45; cursor: not-allowed; }
.tag.project { color: var(--teal); border-color: var(--teal); white-space: nowrap; }
#extend-selects span { align-self: center; color: var(--text-dim); }