/* CaseVault — the theme (v1.124, "Navy Ledger"; v1.125 type scale).
 *
 * Loaded after app.css, so the colours and the font here win. One place for the palette: deep navy on
 * a warm off-white, flat (thin borders instead of shadows), square corners, and one colour per meaning
 * everywhere: Open blue, Pending amber, Closed green, Archived warm grey, Overdue red. The font is
 * JetBrains Mono, bundled in vendor/ so it looks the same on every PC (and needs no internet).
 */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("../vendor/jetbrains-mono/jetbrains-mono-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/jetbrains-mono/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/jetbrains-mono/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

/* Light. The selector matches app.css's palette rules, so this one (loaded later) wins. */
:root, :root:not([data-theme="dark"]) {
  --font: "JetBrains Mono", Consolas, "Cascadia Mono", "Liberation Mono", "DejaVu Sans Mono", monospace;
  --mono: var(--font);
  /* v1.125: the type scale. Six sizes; every text size in app.css is one of these (icons and the
     clock keep their own). Three weights: 400 regular, 600 semibold, 700 bold. */
  /* v1.142: text 11 pt, small text 10 pt (never smaller), headers 12 pt (1 pt = 1.333 px). */
  --fs-tiny: .8333rem;  /* badges, counts, table headers, captions under icons (10 pt) */
  --fs-small: .8333rem; /* hints, meta lines, buttons in tables, form labels (10 pt) */
  --fs-text: .9167rem;  /* body text and inputs (11 pt) */
  --fs-sub: 1rem;       /* card titles, sub-sections (12 pt) */
  --fs-section: 1rem;   /* section headers (12 pt) */
  --fs-title: 1rem;     /* page titles (12 pt) */
  --bg: #f5f4f0;
  --surface: #fffefb;
  --surface-2: #ebe9e3;
  --border: #d9d6cd;
  --text: #1b2230;
  --muted: #596172;
  --accent: #1f3a5f;
  --accent-text: #ffffff;
  --accent-soft: rgba(31, 58, 95, .10);
  --accent-strong: #1f3a5f;
  --link: #2f6db5;
  --btn-primary-bg: #e4eaf2;
  --btn-primary-hover: #d6dfeb;
  --danger: #b3261e;
  --danger-soft: rgba(179, 38, 30, .10);
  --danger-strong: #8f1d17;
  --btn-danger-bg: #f8e3e1;
  --btn-danger-hover: #f2d3cf;
  --warn: #946200;
  --warn-soft: rgba(148, 98, 0, .13);
  --ok: #2e7d4f;
  --ok-soft: rgba(46, 125, 79, .12);
  --shadow: 0 1px 2px rgba(27, 34, 48, .06);
  --shadow-lg: 0 .8rem 2.4rem rgba(27, 34, 48, .16);
  --topbar-bg: rgba(255, 254, 251, .94);
  --box-edge: #d2cec3;
  --box-line: #c6c1b5;
  /* Status: one colour per meaning, everywhere. */
  --st-open: #2f6db5; --st-open-soft: rgba(47, 109, 181, .12);
  --st-pending: #946200; --st-pending-soft: rgba(148, 98, 0, .13);
  --st-closed: #2e7d4f; --st-closed-soft: rgba(46, 125, 79, .12);
  --st-archived: #6b665c; --st-archived-soft: rgba(107, 102, 92, .14);
  /* Sections: Missions navy-blue, General Files muted plum. */
  --sec-mission: #2f6db5;
  --sec-general: #6b5a8e;
  --hero-1: #152a45;
  --hero-2: #26476f;
}
/* Dark: the same tokens, for the system setting and for the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11161e; --surface: #171d27; --surface-2: #1f2733; --border: #2c3644; --text: #e2e6ec; --muted: #9aa3b2;
    --accent: #8fb3e0; --accent-text: #11161e; --accent-soft: rgba(143, 179, 224, .14); --accent-strong: #b7cfee; --link: #8fb3e0;
    --btn-primary-bg: rgba(143, 179, 224, .16); --btn-primary-hover: rgba(143, 179, 224, .26);
    --danger: #f2867d; --danger-soft: rgba(242, 134, 125, .15); --danger-strong: #f6a59e; --btn-danger-bg: rgba(242, 134, 125, .16); --btn-danger-hover: rgba(242, 134, 125, .26);
    --warn: #e2b552; --warn-soft: rgba(226, 181, 82, .15); --ok: #6cc08f; --ok-soft: rgba(108, 192, 143, .14);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .55); --topbar-bg: rgba(23, 29, 39, .92);
    --box-edge: #34404f; --box-line: #435064;
    --st-open: #8fb3e0; --st-open-soft: rgba(143, 179, 224, .15); --st-pending: #e2b552; --st-pending-soft: rgba(226, 181, 82, .15);
    --st-closed: #6cc08f; --st-closed-soft: rgba(108, 192, 143, .14); --st-archived: #b1aa9d; --st-archived-soft: rgba(177, 170, 157, .14);
    --sec-mission: #8fb3e0; --sec-general: #b3a3d6; --hero-1: #16233a; --hero-2: #213a5c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11161e; --surface: #171d27; --surface-2: #1f2733; --border: #2c3644; --text: #e2e6ec; --muted: #9aa3b2;
  --accent: #8fb3e0; --accent-text: #11161e; --accent-soft: rgba(143, 179, 224, .14); --accent-strong: #b7cfee; --link: #8fb3e0;
  --btn-primary-bg: rgba(143, 179, 224, .16); --btn-primary-hover: rgba(143, 179, 224, .26);
  --danger: #f2867d; --danger-soft: rgba(242, 134, 125, .15); --danger-strong: #f6a59e; --btn-danger-bg: rgba(242, 134, 125, .16); --btn-danger-hover: rgba(242, 134, 125, .26);
  --warn: #e2b552; --warn-soft: rgba(226, 181, 82, .15); --ok: #6cc08f; --ok-soft: rgba(108, 192, 143, .14);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .55); --topbar-bg: rgba(23, 29, 39, .92);
  --box-edge: #34404f; --box-line: #435064;
  --st-open: #8fb3e0; --st-open-soft: rgba(143, 179, 224, .15); --st-pending: #e2b552; --st-pending-soft: rgba(226, 181, 82, .15);
  --st-closed: #6cc08f; --st-closed-soft: rgba(108, 192, 143, .14); --st-archived: #b1aa9d; --st-archived-soft: rgba(177, 170, 157, .14);
  --sec-mission: #8fb3e0; --sec-general: #b3a3d6; --hero-1: #16233a; --hero-2: #213a5c;
  color-scheme: dark;
}

body { font-family: var(--font); }
/* Pending in the same place as the others (it used the old warn colours). */
.status-pending { background: var(--st-pending-soft); color: var(--st-pending); }
/* The banner: navy, flat. */
.hero { background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 100%); box-shadow: none; }

/* v1.127: one icon style. Every picture is a colour icon; only the small controls (the open/close
   arrows, the drag grip and the ⋮ menu) are plain shapes, all in the same muted colour, so they never
   compete with the pictures. A button or link still turns them its own colour on hover. */
:where(svg.bi[data-icon^="chevron-"], svg.bi[data-icon="grip-vertical"], svg.bi[data-icon="three-dots-vertical"]) { color: var(--muted); }
:where(button, a, summary):hover > :where(svg.bi[data-icon^="chevron-"], svg.bi[data-icon="grip-vertical"], svg.bi[data-icon="three-dots-vertical"]),
:where(button, a, summary):focus-visible > :where(svg.bi[data-icon^="chevron-"], svg.bi[data-icon="grip-vertical"], svg.bi[data-icon="three-dots-vertical"]) { color: inherit; }

/* v1.128: links are never underlined; they are the link colour (and bolder where they sit in text). */
a, a:hover, a:focus, a:visited, .dropzone .link { text-decoration: none; }
.dropzone .link { color: var(--link); font-weight: 600; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* v1.128: the backup reminder, one slim line under the banner. */
.backup-bar { display: flex; align-items: center; gap: .6rem; margin: -.4rem 0 1rem; padding: .45rem .7rem; background: var(--warn-soft); border: 1px solid var(--warn); border-left-width: 4px; font-size: var(--fs-small); }
.backup-bar > span { flex: 1; min-width: 0; }
.backup-bar > svg:first-child { color: var(--warn); flex: none; }
.backup-bar .backup-bar-close { flex: none; }
/* v1.128: a case opened "in the future" (a typo): flagged. */
.age-future { display: inline-flex; align-items: center; gap: .3rem; color: var(--warn); font-weight: 600; }

/* v1.130: the Open menu on a Mission's case rows. */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu[open] > summary { border-color: var(--accent); color: var(--accent); }
.row-menu-list { position: absolute; right: 0; top: calc(100% + 2px); z-index: 20; min-width: 8rem; display: grid; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.row-menu-list a { padding: .5rem .75rem; color: var(--text); font-size: var(--fs-small); }
.row-menu-list a:hover, .row-menu-list a:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
/* v1.130: long tables keep their headings in view and have light striping. On a wide screen the tables
   fit, so the wrapper clips instead of scrolling sideways, which lets the heading stick to the page. */
:where(table.data-table) thead th { position: sticky; top: 0; z-index: 2; }
:where(table.data-table) tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--surface-2) 38%, var(--surface)); }
@media (min-width: 1200px) { .table-wrap, .ops-page .table-wrap { overflow-x: clip; } }
/* v1.130: the home banner's count chips, flatter: a thin edge in the status colour, no frosted glass. */
.hero-count { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); }
.hero-count:hover { background: rgba(255, 255, 255, .14); }
/* v1.130: the sidebar's INDEPENDENT CASES name wraps onto two lines when the count needs the room,
   instead of running under it. */
#sidebar .general-group > .op-head .ind-name, #sidebar .general-group > .op-head .op-name { white-space: normal !important; overflow-wrap: normal; line-height: 1.2; }
/* v1.130: the Mission table's Closing note on one line now the Open menu is narrow. */
table.op-cases-table td.op-closing { width: auto; min-width: 0; white-space: nowrap; }
/* v1.130: sticky table headings sit flush with the top of the page area (it has top padding). */
.main :where(table.data-table) thead th { top: -1.5rem; }

/* v1.131: Find (Ctrl+K). */
.find-form { width: min(36rem, 80vw); max-width: 100%; display: grid; gap: .5rem; }
.find-head { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.find-head .bi { width: 1.2rem; height: 1.2rem; flex: none; }
.find-input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; font-size: var(--fs-sub); padding: .25rem 0; }
.find-input:focus { outline: none; }
.find-list { display: grid; max-height: min(26rem, 60vh); overflow-y: auto; }
.find-row { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center; gap: .6rem; width: 100%; min-width: 0; padding: .5rem; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.find-row > svg { flex: none; }
.find-row .find-title { flex: none; }
.find-row .find-sub { flex: 1 1 auto; min-width: 0; }
.find-row .find-kind { flex: none; margin-left: auto; }

.find-row .bi { width: 1.2rem; height: 1.2rem; }
.find-row .find-title { font-weight: 600; white-space: nowrap; }
.find-row .find-sub { font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-row .find-kind { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .06em; }
.find-row.on, .find-row:hover { background: var(--accent-soft); }
.find-row.on .find-title { color: var(--accent); }
.find-foot { margin: 0; font-size: var(--fs-tiny); display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.find-none { padding: .5rem; }

/* v1.132: Options → Display → Saving While You Type: three equal choices in a row. */
.opt-row.opt-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.opt-choice { justify-content: center; white-space: nowrap; }
.opt-choice.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.opt-save-note { margin-top: .5rem; }

/* v1.133: Arrest Report → Phone Calls: name, relationship and number on one row. */
.arrest-grid.arrest-g-calls { grid-template-columns: 2fr 1.4fr 1.4fr 1fr; }
@media (max-width: 820px) { .arrest-grid.arrest-g-calls { grid-template-columns: 1fr; } }

/* v1.135: statute of limitations notices, 90 days (amber) and 30 days (stronger) before. */
.attention-row.att-sol-notice { border-left: 3px solid var(--st-pending); }
.attention-row.att-sol-soon { border-left: 3px solid var(--warn); background: var(--warn-soft); }
.attention-row.att-sol-notice .att-what, .attention-row.att-sol-soon .att-what { color: var(--warn); }

/* v1.135: the closed / archived date on a case card in Closed Files and Archived. */
.op-case-dates { display: flex; align-items: center; gap: .35rem; padding: 0 .1rem .35rem; }

/* v1.136: Year Summary. */
.ys-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; padding-right: 2.5rem; }
.ys-head h2 { margin: 0; white-space: nowrap; }
.ys-head select { width: auto; min-width: 7rem; }
.ys-stat .muted { white-space: nowrap; }
.ys-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.ys-stat { display: flex; flex-direction: column; align-items: center; padding: .6rem .25rem; border: 1px solid var(--border); background: var(--surface); }
.ys-stat strong { font-size: var(--fs-title); color: var(--accent); }
.ys-h { margin: 1rem 0 .4rem; font-size: var(--fs-sub); }
.ys-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: .35rem; height: 8rem; align-items: end; }
.ys-month { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ys-bar { width: 70%; min-height: 1px; background: var(--accent); }
.ys-n { font-size: var(--fs-small); font-weight: 700; }
.ys-table td.num, .ys-table th.num { text-align: right; white-space: nowrap; }
@media (max-width: 820px) { .ys-stats { grid-template-columns: repeat(2, 1fr); } }

/* v1.136: Archived → Review after N years. */
.ov-review-pick { width: auto; }