/* The dashboard's styles. System fonts only (nothing is fetched from outside); right-to-left comes
   from <html dir="rtl">, so margins and alignment below are logical. */
:root {
  --bg: #f4f5f7;
  --fg: #1c1e21;
  --muted: #5b6270;
  --card: #ffffff;
  --line: #d5d9e0;
  --accent: #1d4ed8;
  --accent-fg: #ffffff;
  --error-bg: #fdecec;
  --error-fg: #8a1c1c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --fg: #e8eaee;
    --muted: #a0a7b4;
    --card: #1e2127;
    --line: #343942;
    --accent: #6b9bff;
    --accent-fg: #0b1220;
    --error-bg: #3a1a1a;
    --error-fg: #ffb4b4;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  line-height: 1.6;
}
main { max-width: 28rem; margin: 3rem auto; padding: 0 1rem; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 1rem; background: var(--card); border-block-end: 1px solid var(--line);
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: 1.5rem;
}
h1 { margin-block: 0 1rem; font-size: 1.4rem; }
label { display: block; margin-block: .75rem .25rem; font-weight: 600; }
input {
  width: 100%; padding: .6rem .7rem; font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--line); border-radius: .35rem;
}
button {
  margin-block-start: 1rem; padding: .6rem 1.2rem; font: inherit; cursor: pointer;
  color: var(--accent-fg); background: var(--accent); border: 0; border-radius: .35rem;
}
button.link { margin: 0; padding: 0; color: var(--accent); background: none; text-decoration: underline; }
.error {
  padding: .6rem .8rem; color: var(--error-fg); background: var(--error-bg); border-radius: .35rem;
}
.qr { display: flex; justify-content: center; margin-block: 1rem; }
.qr svg { max-width: 100%; height: auto; border: 1px solid var(--line); }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; word-break: break-all; }

/* --- the reviewer's pages (exception list and detail) ------------------------------------------ */
:root {
  --sev-high: #b42318; --sev-high-bg: #fde7e4;
  --sev-medium: #9a5b00; --sev-medium-bg: #fdf1d6;
  --sev-low: #3d4a5c; --sev-low-bg: #e8ecf2;
  --ok: #17663a; --ok-bg: #def3e5;
  --hit-bg: #fff3bf; --hit-border: #d19a00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sev-high: #ffb4a9; --sev-high-bg: #4a1f1a;
    --sev-medium: #ffd37a; --sev-medium-bg: #43330f;
    --sev-low: #c3cbd8; --sev-low-bg: #2b313b;
    --ok: #8fdca9; --ok-bg: #173a27;
    --hit-bg: #4d3f0a; --hit-border: #e0b030;
  }
}
main.wide { max-width: 80rem; margin-block: 1.5rem; }
a { color: var(--accent); }
.topbar nav { margin-inline-end: auto; }
.topbar { gap: 1rem; }
.topbar form { margin: 0; }

.banner {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; margin-block: 0 1rem;
  padding: .75rem 1rem; color: var(--sev-medium); background: var(--sev-medium-bg);
  border: 1px solid var(--sev-medium); border-radius: .4rem;
}

.filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem 1rem;
  align-items: end; margin-block: 0 1rem; padding: 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: .5rem;
}
.filters label { margin-block: 0 .2rem; font-size: .9rem; }
.filters select, .filters input {
  width: 100%; padding: .45rem .5rem; font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--line); border-radius: .35rem;
}
.filters .actions { display: flex; gap: 1rem; align-items: center; }
.filters .actions button { margin: 0; }

.count, .empty, .muted, .hint { color: var(--muted); }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: .5rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .55rem .75rem; text-align: start; border-block-end: 1px solid var(--line); }
th { font-size: .85rem; color: var(--muted); white-space: nowrap; }
tbody tr:last-child td { border-block-end: 0; }
tbody tr.exception:hover { background: var(--bg); }

.badge {
  display: inline-block; padding: .1rem .55rem; font-size: .85rem; font-weight: 600; white-space: nowrap;
  color: var(--sev-low); background: var(--sev-low-bg); border-radius: 1rem;
}
.badge.sev-high { color: var(--sev-high); background: var(--sev-high-bg); }
.badge.sev-medium { color: var(--sev-medium); background: var(--sev-medium-bg); }
.badge.sev-low { color: var(--sev-low); background: var(--sev-low-bg); }
.badge.state-ready { color: var(--ok); background: var(--ok-bg); }
.badge.state-no_footage, .badge.state-failed { color: var(--sev-high); background: var(--sev-high-bg); }
.badge.state-no_coverage, .badge.state-clip_pending { color: var(--sev-medium); background: var(--sev-medium-bg); }
.badge.cause { color: var(--fg); background: var(--hit-bg); border: 1px solid var(--hit-border); }
.badge.flag { margin-inline-end: .25rem; }

.back { margin-block: 0 .5rem; }
.exc-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.exc-head h1 { margin: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem 1.5rem; margin-block: 1rem; }
.facts div { min-width: 0; }
.facts dt { font-size: .85rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.verdict { margin-block: 1rem; padding: .75rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: .5rem; }
.verdict h2 { margin-block: 0 .25rem; font-size: 1.05rem; }
.verdict .note { white-space: pre-wrap; margin-block: .25rem 0; }
h2 { font-size: 1.15rem; margin-block: 1.5rem .5rem; }

.clips { display: flex; flex-wrap: wrap; gap: 1rem; }
.clips h2 { flex-basis: 100%; margin-block-end: 0; }
.clips .hint, .clips .no-clip { margin-block: 0; }
figure.clip { margin: 0; flex: 1 1 24rem; max-width: 40rem; }
figure.clip video { display: block; width: 100%; max-height: 70vh; background: #000; border-radius: .4rem; }
figure.clip figcaption { margin-block-start: .25rem; color: var(--muted); font-size: .9rem; }
.no-clip { padding: .6rem .8rem; font-weight: 600; color: var(--sev-medium); background: var(--sev-medium-bg); border-radius: .35rem; }

table.lines tr.hit td { background: var(--hit-bg); }
table.lines tr.hit td:first-child { border-inline-start: 4px solid var(--hit-border); }

/* --- verdicts, cases, audit log, export (Task 19) ----------------------------------------------- */
:root {
  --case-open: #9a5b00; --case-open-bg: #fdf1d6;
  --case-closed: #3d4a5c; --case-closed-bg: #e8ecf2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --case-open: #ffd37a; --case-open-bg: #43330f;
    --case-closed: #c3cbd8; --case-closed-bg: #2b313b;
  }
}
.topbar nav { display: flex; gap: 1rem; }
.badge.case-open { color: var(--case-open); background: var(--case-open-bg); }
.badge.case-closed { color: var(--case-closed); background: var(--case-closed-bg); }

.verdict-form { margin-block: 1rem; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: .5rem; }
.verdict-form h2 { margin-block-start: 0; }
.verdict-form form { display: grid; gap: .25rem; max-width: 36rem; }
.verdict-form fieldset { margin: 0; padding: 0; border: 0; }
.verdict-form legend { padding: 0; font-weight: 600; }
.verdict-form .choices { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.verdict-form .choices legend { flex-basis: 100%; }
.verdict-form label.choice { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; }
.verdict-form input[type="radio"] { width: auto; margin: 0; }
.verdict-form textarea, .verdict-form select, .export textarea {
  width: 100%; padding: .5rem .6rem; font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--line); border-radius: .35rem;
}
.verdict-form .hint { margin-block: .25rem; font-size: .9rem; }
.verdict-form .error { margin-block: 0 .5rem; }
.case-link { margin-block: .25rem 0; }

.clip-actions { margin-block: .25rem 0; font-size: .9rem; }
.case-close { margin-block: 1rem; padding: .75rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: .5rem; }
.case-close h2 { margin-block-start: 0; font-size: 1.05rem; }
.case-close form { margin: 0; }
table.audit td[data-col="detail"] code { font-size: .85rem; }
.export { max-width: 44rem; margin-inline: auto; }
.export dl.facts { grid-template-columns: 1fr; }

/* --- health, settings and the cashier summary (Task 20) ----------------------------------------- */
.badge.ok { color: var(--ok); background: var(--ok-bg); }
.badge.warn { color: var(--sev-medium); background: var(--sev-medium-bg); }
.badge.bad { color: var(--sev-high); background: var(--sev-high-bg); }
.bad-text { color: var(--sev-high); font-weight: 700; }
.warn-text { color: var(--sev-medium); font-weight: 700; }

.notice {
  margin-block: 0 1rem; padding: .75rem 1rem; background: var(--card);
  border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: .4rem;
}

.health-disk { margin-block: 0 1rem; }
.health-disk h2 { margin-block-start: 0; }
.disk { margin: 0; font-size: 2rem; font-weight: 700; color: var(--ok); }
.disk.alert { color: var(--sev-high); }
.alert-text {
  display: inline-block; margin-block: .25rem 0; padding: .4rem .75rem; font-weight: 600;
  color: var(--sev-high); background: var(--sev-high-bg); border: 1px solid var(--sev-high);
  border-radius: .35rem;
}
table.health td[data-col="ingest-error"] code { font-size: .85rem; }

table.cashiers tr.flagged td { background: var(--sev-medium-bg); }
table.cashiers tr.flagged td:first-child { border-inline-start: 4px solid var(--sev-medium); }
.rule-count { display: inline-block; margin-inline-end: .75rem; white-space: nowrap; }

.branch-settings { margin-block: 0 1rem; }
.branch-settings h2 { margin-block-start: 0; }
.branch-settings h3 { margin-block: 1.25rem .4rem; font-size: 1rem; }
.branch-settings .table-wrap { margin-block-end: .5rem; }
.branch-settings .hint { margin-block: .25rem 0; font-size: .9rem; }
.branch-settings td code { display: inline-block; margin-inline-end: .75rem; }