/* ==========================================================================
   AeroREG.ro — "Radar Room" theme
   Drop-in replacement for app/static/app.css. Keeps every class name the
   Jinja templates already use; only the look changes.

   Modes
   - Night is the default look.
   - Day applies when the OS prefers light and the user has not chosen,
     or when <html data-theme="day"> is set by the toggle.
   - <html data-theme="night"> forces night.
   Fonts: Space Grotesk (display) + IBM Plex Mono (body), loaded in base.html.
   ========================================================================== */

/* ---------- tokens: night (default) ---------- */
:root {
  color-scheme: dark;
  --bg: #0A0D0C;
  --panel: #111613;
  --panel-2: #161E1A;
  --inset: #0D1210;
  --field: #0D1210;
  --ink: #D8E6DE;
  --muted: #8A9C93;
  --line: #26332D;
  --accent: #43D9A0;      /* radar green: primary, IR, confirmed, done */
  --accent-2: #E3A857;    /* sweep amber: labels, AMC, medium, implemented */
  --cyan: #7FC4E0;        /* GM, in review, "your document" quotes */
  --danger: #F0806E;      /* high, removed, rejected, overdue */
  --on-accent: #06110C;
  --ring-opacity: .30;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --radius: 0px;          /* Radar Room is square-cornered */
  --page-max: 1360px;
}

/* ---------- tokens: day ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="night"]) {
    color-scheme: light;
    --bg: #EDEFEA; --panel: #FFFFFF; --panel-2: #F5F7F3; --inset: #F5F7F3; --field: #FFFFFF;
    --ink: #10201A; --muted: #56655E; --line: #C9D1CB;
    --accent: #127049; --accent-2: #8F5510; --cyan: #2A6A8A; --danger: #B03A2B;
    --on-accent: #FFFFFF; --ring-opacity: .16;
  }
}
:root[data-theme="day"] {
  color-scheme: light;
  --bg: #EDEFEA; --panel: #FFFFFF; --panel-2: #F5F7F3; --inset: #F5F7F3; --field: #FFFFFF;
  --ink: #10201A; --muted: #56655E; --line: #C9D1CB;
  --accent: #127049; --accent-2: #8F5510; --cyan: #2A6A8A; --danger: #B03A2B;
  --on-accent: #FFFFFF; --ring-opacity: .16;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13.5px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 26px; line-height: 1.25; margin: 0 0 12px; }
h2 { font-size: 18px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 0 0 8px; }
.muted { color: var(--muted); font-weight: 400; }
h1 .muted { font-size: .7em; font-weight: 500; }
.small { font-size: 12px; }
/* long Act labels (title, issue, amendment) stay on one line; the full label is in the title attribute */
.doc-label { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; text-decoration: inherit; }
/* the separator and the label wrap together: never a lone "·" at the end of a line */
.doc-label-wrap { white-space: nowrap; }
.mono { font-family: var(--font-body); font-size: 12.5px; }
code { font-family: var(--font-body); background: var(--inset); border: 1px solid var(--line); padding: 1px 5px; }

/* ---------- header / nav (works with the current base.html) ---------- */
header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  min-height: 60px; padding: 10px 40px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em;
  color: var(--accent); text-decoration: none;
}
.brand::before {                    /* radar scope mark */
  content: ""; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%;
  border: 1.5px solid currentColor;
  box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5.5px currentColor;
}
.brand span { color: var(--accent-2); }
.brand:hover { color: var(--accent); }
nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
nav a { color: var(--ink); text-decoration: none; padding: 8px 10px; border-bottom: 2px solid transparent; }
nav a:hover { color: var(--accent); }
nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
nav .org {
  display: inline-flex; align-items: center; gap: 8px; margin-right: 10px;
  padding: 5px 12px; border: 1px solid var(--line); background: var(--panel);
  font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
}
nav .org::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
nav .sep { color: var(--line); margin: 0 6px; }
nav .muted { margin-left: 10px; font-size: 11.5px; }
nav button.link { color: var(--ink); font-size: 11.5px; }

/* optional two-tier header from base.html.example */
.topbar { display: flex; align-items: center; gap: 20px; min-height: 60px; padding: 0 40px; border-bottom: 1px solid var(--line); }
.topbar .spacer { flex: 1; }
.navbar { display: flex; align-items: stretch; gap: 2px; min-height: 46px; padding: 0 32px; border-bottom: 1px solid var(--line); }
.navbar nav { gap: 2px; align-items: stretch; }
.navbar nav a { display: flex; align-items: center; padding: 0 12px; }
.navbar .tagline { margin-left: auto; align-self: center; font-size: 10.5px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font: 500 11.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="day"] .theme-toggle .icon-sun { display: inline; }
:root[data-theme="day"] .theme-toggle .icon-moon { display: none; }

/* ---------- page frame ---------- */
main { max-width: var(--page-max); margin: 0 auto; padding: 28px 40px 60px; }
footer {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: none; margin: 0; padding: 18px 40px;
  border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink);
}
footer .muted { color: var(--muted); }

/* ---------- cards ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 20px;
}
.card.narrow { max-width: 460px; margin: 56px auto; }
.answer h2, .card h2 { font-size: 18px; margin: 18px 0 10px; }
.card > h2:first-child { margin-top: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.two-col > .card { margin-bottom: 0; }
.two-col + .two-col, .two-col + .card, .card + .two-col { margin-top: 20px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .cols, .two-col { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */
label {
  display: block; margin: 10px 0;
  font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
label small { text-transform: none; letter-spacing: 0; }
input, select, textarea {
  display: block; width: 100%; margin-top: 6px; min-height: 40px;
  padding: 8px 12px; font: 13px/1.5 var(--font-body); color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius);
  text-transform: none; letter-spacing: 0;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
input[type="file"] { border-style: dashed; border-color: var(--accent); padding: 8px 10px; }
input[type="checkbox"] { accent-color: var(--accent); }
button.primary {
  margin-top: 14px; min-height: 42px; padding: 0 22px;
  font: 600 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent); border: 0; border-radius: var(--radius); cursor: pointer;
}
button.primary:hover { filter: brightness(1.08); }
button.link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
button.link.danger { color: var(--danger); }
form.inline { display: inline; }
form.row { display: grid; grid-template-columns: 2fr 2fr 1fr auto; gap: 12px; align-items: end; }
form.row label { margin: 0; }
form.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: end; margin-top: 14px; }
form.filters label, form.review label { margin: 0; }
form.filters button.primary, form.row button.primary, form.review button.primary { margin-top: 0; }
form.review { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-top: 12px; }
form.review label { flex: 1 1 260px; }
form.grid-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 16px; align-items: end; }
form.grid-form label { margin: 0; }
form.grid-form .span-2 { grid-column: span 2; }
form.grid-form .span-4 { grid-column: span 4; }
form.stack { margin-top: 6px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; }
legend { padding: 0 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
label.check {
  display: flex; gap: 12px; align-items: center; min-height: 40px; margin: 0;
  font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink);
}
label.check input { width: 18px; height: 18px; min-height: 0; margin: 0; }
p.buttons { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
p.buttons button.primary { margin-top: 0; }
@media (max-width: 760px) {
  form.row, form.grid-form { grid-template-columns: 1fr; }
  form.grid-form .span-2, form.grid-form .span-4 { grid-column: span 1; }
}

/* ---------- flash / refusal ---------- */
.flash { padding: 12px 16px; margin-bottom: 16px; font-size: 12.5px; border: 1px solid; border-radius: var(--radius); }
.flash.ok  { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.flash.err { color: var(--ink); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.refusal {
  padding: 14px 16px; border: 1px solid var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 8%, transparent); line-height: 1.6;
}
.refusal strong { color: var(--accent-2); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
tr.overdue td { background: color-mix(in srgb, var(--danger) 9%, transparent); }
tr.overdue td:nth-child(2) { color: var(--danger); }
td a { color: var(--ink); text-decoration: none; }
td a:hover { color: var(--accent); }
td blockquote, ol.citations blockquote {
  margin: 6px 0; padding: 8px 12px; border: 1px solid var(--line); background: var(--inset); font-size: 12px;
}

/* ---------- pills: one rule, colour per variant via --pc ---------- */
.pill {
  --pc: var(--muted);
  display: inline-block; padding: 1px 7px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.6;
  color: var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent);
  background: color-mix(in srgb, var(--pc) 11%, transparent); border-radius: var(--radius);
}
/* rule type */
.pill.IR, .pill.type-IR { --pc: var(--accent); }
.pill.AMC, .pill.type-AMC { --pc: var(--accent-2); }
.pill.GM, .pill.type-GM, .pill.type-EAR { --pc: var(--cyan); }
.pill.type-ED, .pill.type-CN, .pill.type-EN { --pc: var(--muted); }
/* change type */
.pill.new { --pc: var(--accent); }
.pill.modified { --pc: var(--accent-2); }
.pill.editorial { --pc: var(--muted); }
.pill.removed { --pc: var(--danger); }
/* materiality and impact */
.pill.high, .pill.mat-high, .pill.impact-high { --pc: var(--danger); }
.pill.medium, .pill.mat-medium, .pill.impact-medium { --pc: var(--accent-2); }
.pill.low, .pill.mat-low, .pill.impact-low,
.pill.mat-unknown, .pill.impact-none, .pill.unknown { --pc: var(--muted); }
/* review */
.pill.proposed { --pc: var(--muted); }
.pill.confirmed { --pc: var(--accent); }
.pill.rejected { --pc: var(--danger); }
/* impact runs, questions, documents */
.pill.run-assessed, .pill.answered, .pill.parsed { --pc: var(--accent); }
.pill.run-no_documents, .pill.refused { --pc: var(--accent-2); }
.pill.run-error, .pill.error, .pill.failed { --pc: var(--danger); }
.pill.uploaded, .pill.parsing { --pc: var(--muted); }
/* action status */
.pill.st-open { --pc: var(--muted); }
.pill.st-in_review { --pc: var(--cyan); }
.pill.st-implemented { --pc: var(--accent-2); }
.pill.st-verified { --pc: var(--accent); }
.pill.st-closed { --pc: var(--accent); color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
h1 .pill { vertical-align: middle; font-family: var(--font-body); }

/* ---------- facts ---------- */
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 24px; margin: 14px 0 0; border-top: 1px solid var(--line); font-size: 12.5px; }
dl.facts dt, dl.facts dd { padding: 10px 0; border-bottom: 1px solid var(--line); }
dl.facts dt { color: var(--muted); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
dl.facts dd { margin: 0; word-break: break-word; }
dl.facts select { display: inline-block; width: auto; max-width: 100%; min-height: 34px; margin: 0; font-size: 12px; padding: 4px 8px; }

/* ---------- corpus rules, texts, diff ---------- */
details.rule { border-top: 1px solid var(--line); padding: 10px 0; }
details.rule summary { cursor: pointer; font-size: 12.5px; }
details summary { cursor: pointer; }
details summary:hover { color: var(--accent); }
.rule-meta { font-size: 11px; margin: 8px 0 6px 24px; color: var(--muted); }
.rule-text, pre.rule-text {
  white-space: pre-wrap; font: 12.5px/1.7 var(--font-body);
  margin: 4px 0 8px; padding: 14px 16px; background: var(--inset); border: 1px solid var(--line);
  border-radius: var(--radius); max-height: 520px; overflow: auto;
}
details.rule pre.rule-text { margin-left: 24px; }
pre.diff {
  font: 12.5px/1.7 var(--font-body); white-space: pre-wrap; overflow: auto;
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 0;
}
pre.diff .add, pre.diff .del, pre.diff .ctx { display: block; padding: 1px 16px; }
pre.diff .add { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
pre.diff .del { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); }
pre.diff .ctx { color: var(--muted); }

/* ---------- ask ---------- */
.answer p { max-width: 1180px; font-size: 13.5px; line-height: 1.75; }
ol.citations { list-style: none; padding: 0; counter-reset: cite; display: flex; flex-direction: column; gap: 10px; }
ol.citations li {
  counter-increment: cite; position: relative; margin: 0;
  padding: 14px 16px 14px 52px; border: 1px solid var(--line); background: var(--inset);
}
ol.citations li::before {
  content: counter(cite); position: absolute; left: 18px; top: 13px;
  font: 600 15px var(--font-display); color: var(--accent-2);
}
ol.citations blockquote { border: 0; background: none; padding: 6px 0; font-size: 13px; line-height: 1.65; }

/* ---------- stats strip ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 14px; border: 1px solid var(--line); width: max-content; max-width: 100%; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stats span { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-right: 1px solid var(--line); min-width: 96px; }
.stats span:last-child { border-right: 0; }
.stats span b { font: 600 20px var(--font-display); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* ---------- tab-like filters (actions, audit) ---------- */
p.filters { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.filters a { margin: 0; padding: 10px 14px; font-size: 12.5px; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.filters a:hover { color: var(--accent); }
.filters a.current { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

/* ---------- dashboard ---------- */
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  display: flex; flex-direction: column; gap: 6px; padding: 16px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); text-decoration: none;
}
.tile:hover { border-color: var(--accent); color: var(--ink); }
.tile b { font: 600 38px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--accent); }
.tile span { font-size: 12.5px; font-weight: 400; }
.tile small { font-size: 11px; line-height: 1.5; color: var(--muted); }
.tile.warn { border-color: var(--danger); }
.tile.warn b { color: var(--danger); }
ol.checklist { list-style: none; padding: 0; margin: 0; counter-reset: step; }
ol.checklist li { counter-increment: step; display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); }
ol.checklist li::before {
  content: counter(step); flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--muted);
}
ol.checklist li.done::before {
  content: "✓"; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}
ol.checklist li a { color: var(--ink); text-decoration: none; }
ol.checklist li.done, ol.checklist li.done a { color: var(--muted); text-decoration: none; }

/* ---------- evidence ---------- */
ul.evidence { padding-left: 18px; }
ul.evidence li { margin-bottom: 8px; }

/* ---------- print ---------- */
@media print {
  :root { --bg: #fff; --panel: #fff; --panel-2: #fff; --inset: #fff; --ink: #000; --muted: #444; --line: #bbb; }
  header.top, .topbar, .navbar, .theme-toggle, form { display: none !important; }
}