:root {
  --brand: #0b3d91;          /* PFT kurumsal lacivert — gerektiğinde değiştirin */
  --brand-dark: #082c69;
  --accent: #1aa179;         /* kalite/onay yeşili */
  --danger: #c0392b;
  --bg: #ccd3db;          /* yumuşak gri-mavi fon — gece parlamasını azaltır (tek satırda ayarlanabilir) */
  --card: #ffffff;
  --text: #1b2430;
  --muted: #4e5863;          /* 4.8:1 on --bg, the darkest surface it sits on (AA 4.5).
                                #6b7682 was 3.06 there; the backlog's #5a646f only 3.99 */
  --link: #0b3d91;           /* link TEXT colour; --brand is for fills and may differ */
  --focus: #0b3d91;          /* focus rings and the search field frame */
  --border: #e2e7ee;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(16, 33, 60, .08), 0 8px 24px rgba(16, 33, 60, .06);
  --maxw: 920px;
}

/* ── Dark theme ──────────────────────────────────────────────────────
   Applied by setting <html data-theme="dark"> (see base.html). Most of the
   UI is driven by the CSS variables below; a handful of elements hard-code a
   light surface (#fff etc.) and get explicit overrides further down. The brand
   navy header and the dark footer stay the same in both themes. */
html[data-theme="dark"] {
  --brand: #14488f;
  --brand-dark: #0e356e;
  --bg: #0f141a;
  --card: #1b232d;
  --text: #e6edf3;
  --muted: #9aa6b4;
  --link: #93c5fd;           /* --brand #14488f is 1.8:1 on a dark card — links were near invisible */
  --focus: #6f9be8;          /* 5.7:1 on the card; --brand gave 1.8, under the 3:1 a focus ring needs */
  --border: #2b3642;
  --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=file],
html[data-theme="dark"] input:not([type]),
html[data-theme="dark"] .filter-search,
html[data-theme="dark"] .filter-select,
html[data-theme="dark"] #serial { background: #121922; color: var(--text); }
html[data-theme="dark"] .btn { background: #232e3a; color: var(--text); }
html[data-theme="dark"] .btn:hover { background: #2b3744; }
/* The two rules above out-rank `.btn.primary` / `.btn.danger` (html[attr] adds
   weight), so in dark mode every button came out the same grey — "+ New form"
   and even "Delete selected" included. Restate the variants with equal weight;
   they come later, so they win. */
html[data-theme="dark"] .btn.primary { background: #2a64c5; border-color: #2a64c5; color: #fff; }
html[data-theme="dark"] .btn.primary:hover { background: #1f55ad; border-color: #1f55ad; }
html[data-theme="dark"] .btn.secondary { background: #232e3a; border-color: #6f9be8; color: #a9c6ff; }
html[data-theme="dark"] .btn.secondary:hover { background: #2b3744; }
html[data-theme="dark"] .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
html[data-theme="dark"] .btn.danger:hover { background: #a43022; }
html[data-theme="dark"] table.data th { background: #222c37; }
html[data-theme="dark"] .alert { background: #1f2935; color: var(--text); }
html[data-theme="dark"] .alert.error { background: #3a1d1b; border-color: #5c2b27; color: #f3b4ae; }
html[data-theme="dark"] .alert.warn { background: #3a2e12; border-color: #5c4a1c; color: #f5d38a; }
html[data-theme="dark"] .alert.success { background: #15302a; border-color: #1f5145; color: #9fe0c8; }
html[data-theme="dark"] .verified-badge { background: #15302a; border-color: #1f5145; color: #9fe0c8; }
html[data-theme="dark"] code { background: #222c37; color: #e6edf3; }
html[data-theme="dark"] .count-badge { background: #2b3642; color: var(--muted); }
html[data-theme="dark"] .pdf-page { box-shadow: 0 0 0 1px #000, var(--shadow); }

* { box-sizing: border-box; }

/* The HTML `hidden` attribute must always win: rules like `.btn
   { display:inline-block }` outrank the browser's built-in [hidden] style,
   which silently un-hides elements JS meant to hide (phone toolbar bug). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--link); }

/* ── Header / footer ─────────────────────────────────────────────── */
.site-header {
  background: var(--brand);
  color: #fff;
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; }
.brand-logo { height: 66px; width: auto; display: block; background: #fff;
  padding: 8px 16px; border-radius: 11px; }
.brand-text { font-size: 1.25rem; }
.brand-text { font-weight: 600; font-size: 1.05rem; letter-spacing: .2px; }
.admin-nav a { color: #fff; text-decoration: none; margin-left: 1rem; opacity: .9; font-size: .95rem; }
.admin-nav a:hover { opacity: 1; text-decoration: underline; }
.admin-nav a[aria-current="page"] { opacity: 1; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-sep { display: inline-block; width: 1px; height: 1.1rem; margin-left: 1rem;
  background: rgba(255, 255, 255, .35); vertical-align: middle; }

/* "Powered by Minos" vendor credit — sits on the light-grey page background
   (not the dark footer), so the brand's shadowed wordmark reads in full colour.
   margin-top:auto pins this band + the footer to the bottom together. */
.vendor-credit {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1.7rem 1rem .5rem;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.vendor-logo {
  height: 30px;
  width: auto;
  display: block;
  opacity: .9;
  transition: opacity .15s ease;
}
.vendor-credit:hover .vendor-logo { opacity: 1; }

.site-footer {
  padding: 1.4rem 1rem;
  text-align: center;
  background: #333b45;          /* darker grey so the page bottom isn't glaring at night */
  color: #b7c0cb;
  font-size: .85rem;
}
.login-back { margin-top: 1.1rem; text-align: center; font-size: .9rem; }

/* Compact product-series hint under the search heading. */
.series-hint { margin: .5rem 0 0; font-size: .82rem; color: var(--muted); }
.series-hint strong { color: var(--text); font-weight: 600; }

/* ── Layout ──────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--maxw); margin: 1.5rem auto; padding: 0 1rem; }
/* Admin list needs room for all columns on one line — widen it so the full row
   fits without a horizontal scrollbar on a normal desktop. Sized generously so
   4–5 digit row numbers (1000s of records) never tip the table into overflow. */
.container.wide { max-width: 1500px; }
/* Fixed-width row-number column: reserving space for up to 5 digits means the
   column doesn't grow (and re-tip the layout) as the numbers get bigger. */
.col-num { width: 3.5rem; min-width: 3.5rem; text-align: right; color: var(--muted); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}
.card.narrow { max-width: 460px; margin: 2.5rem auto; }
.card.center { text-align: center; }

h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* ── Forms ───────────────────────────────────────────────────────── */
label { display: block; font-weight: 600; font-size: .9rem; margin: 1rem 0 .35rem; }
input[type=text], input[type=password], input[type=file], input:not([type]) {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
}
input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }

/* Hero serial-number field — a deliberately prominent, on-brand frame so the
   page's primary action reads instantly. #serial (id) outranks the generic
   input rules above without !important; admin inputs stay subtle. */
#serial {
  border: 2px solid var(--focus);
  border-radius: 10px;
  padding: .8rem .9rem;
  font-size: 1.1rem;
  letter-spacing: .5px;                    /* spaces out the typed serial digits */
  background: #fdfdff;
}
#serial::placeholder { color: #6b7682; letter-spacing: normal; }   /* was #9aa6b4, 2.4:1 */
/* Dark: browser-default placeholders are #757575 (3.8:1 on the dark field). */
html[data-theme="dark"] ::placeholder,
html[data-theme="dark"] #serial::placeholder { color: #8b96a3; }
#serial:focus {
  outline: none;                           /* replaced by a clearly visible ring */
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(11, 61, 145, .18);
}
html[data-theme="dark"] #serial:focus { box-shadow: 0 0 0 3px rgba(111, 155, 232, .35); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lookup-form { margin-top: 1rem; }
.form-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: .6rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #f0f3f8; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
/* Secondary: a create action that is not the main one (Data import). */
.btn.secondary { background: #fff; border-color: var(--brand); color: var(--brand); }
.btn.secondary:hover { background: #eaf0fb; }
.lookup-form .btn { width: 100%; margin-top: 1.25rem; padding: .75rem; font-size: 1rem; }
.link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--link); }
html[data-theme="dark"] .link.danger { color: #ef8a80; }   /* --danger is 2.9:1 on a dark card */
.link.danger { color: var(--danger); }

/* ── Alerts ──────────────────────────────────────────────────────── */
.alert { padding: .75rem 1rem; border-radius: 8px; margin: 1rem 0; background: #eef2f8; border: 1px solid var(--border); }
.alert.error { background: #fdecea; border-color: #f5c6c2; color: #8a231b; }
/* Not broken, but not safe either — something to fix, not an outage. */
.alert.warn { background: #fff6e0; border-color: #f0d48a; color: #7a4b00; }
.alert.success { background: #e8f7f0; border-color: #b7e6d3; color: #0d6b4d; }
.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }

.code, pre.code {
  background: #0f1b2d; color: #e6edf3; padding: .75rem 1rem; border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem;
  overflow-x: auto; white-space: pre;
}
code { background: #eef2f8; padding: .1rem .35rem; border-radius: 5px; font-size: .88em; }

/* ── Admin table ─────────────────────────────────────────────────── */
.toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.toolbar-actions .btn { white-space: nowrap; }
.toolbar-sep { width: 1px; height: 1.6rem; background: var(--border); margin: 0 .2rem; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
/* Keep every header and cell on a single line (no wrapping to two rows). */
table.data.nowrap th, table.data.nowrap td { white-space: nowrap; }
/* Row above the table: record count (left) + per-page selector (right). */
.list-meta { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.perpage-form { margin: 0; display: flex; align-items: center; gap: .4rem; }
.perpage-form select { padding: .3rem .45rem; }
table.data th, table.data td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data th { background: #f7f9fc; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
table.data tr:last-child td { border-bottom: none; }
.row-actions { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.row-actions form { margin: 0; }

/* ── Viewer ──────────────────────────────────────────────────────── */
.viewer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
dl.meta { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin: .5rem 0 0; }
dl.meta > div { display: flex; flex-direction: column; }
dl.meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
dl.meta dd { margin: 0; font-weight: 600; }

.pdf-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pdf-page { max-width: 100%; box-shadow: var(--shadow); border-radius: 6px; background: #fff; }

@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
  .viewer-head .btn { width: 100%; }
}

/* ── V2: badge, viewer toolbar, admin filters, pagination ────────── */
.count-badge { display: inline-block; font-size: .8rem; font-weight: 600;
  background: var(--border); color: var(--muted); border-radius: 999px;
  padding: .1rem .6rem; vertical-align: middle; margin-left: .4rem; }

.verified-badge { display: inline-flex; align-items: center; gap: .4rem;
  background: #e8f7f0; color: #0d6b4d; border: 1px solid #b7e6d3;
  border-radius: 999px; padding: .25rem .7rem; font-size: .85rem;
  font-weight: 600; margin: .25rem 0 .6rem; }
.verified-badge .vb-check { display: inline-flex; align-items: center;
  justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .7rem; }

.filter-bar { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-search { flex: 1 1 220px; min-width: 180px; padding: .55rem .75rem;
  border: 1px solid var(--border); border-radius: 8px; font-size: .95rem; }
.filter-select { padding: .55rem .6rem; border: 1px solid var(--border);
  border-radius: 8px; font-size: .95rem; background: #fff; }

.sort-link { color: var(--muted); text-decoration: none; }
.sort-link:hover { color: var(--link); }

.pagination { display: flex; align-items: center; gap: 1rem;
  justify-content: center; margin-top: 1.25rem; }

.pdf-toolbar { position: sticky; top: 0; z-index: 5; display: flex;
  align-items: center; gap: .5rem; flex-wrap: wrap; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; padding: .5rem .6rem;
  box-shadow: var(--shadow); margin-bottom: 1rem; }
.pdf-toolbar .spacer { flex: 1 1 auto; }
.zoom-group { display: flex; align-items: center; gap: .25rem; }
.zoom-level { font-size: .9rem; color: var(--muted); min-width: 48px; text-align: center; }
.btn.icon { padding: .3rem .7rem; font-size: 1.1rem; line-height: 1; }

#pdf-container:fullscreen { background: #525659; overflow: auto; padding: 1.5rem; }
#pdf-container:-webkit-full-screen { background: #525659; overflow: auto; padding: 1.5rem; }

@media (max-width: 560px) {
  .pdf-toolbar .btn { flex: 1 1 auto; text-align: center; }
}

.version-tag { display: inline-block; font-size: .72rem; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .55); color: #fff; border-radius: 999px;
  padding: .06rem .5rem; margin-right: .6rem; opacity: .9; vertical-align: middle; }
.site-footer .ver { color: #a9b3bf; }   /* was 3.7:1 on the footer */

/* Public-page "Admin" entry button (top-right) */
.admin-link { border: 1px solid rgba(255, 255, 255, .6); border-radius: 8px;
  padding: .35rem .95rem; font-size: .9rem; font-weight: 600; }
.admin-link:hover { background: rgba(255, 255, 255, .16);
  text-decoration: none !important; opacity: 1; }

/* Dark-mode toggle button (header, on the navy bar in both themes) */
.theme-toggle { background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35); color: #fff; border-radius: 8px;
  padding: .25rem .5rem; font-size: 1rem; line-height: 1; cursor: pointer;
  margin-right: .6rem; vertical-align: middle; }
.theme-toggle:hover { background: rgba(255, 255, 255, .22); }

/* Import dry-run status colours — as classes (not inline) so dark mode can
   re-tint them for contrast. */
.st-ok     { color: #0d6b4d; }
.st-update { color: #2563eb; }
.st-dup    { color: #9a6700; }
.st-err    { color: #8a231b; }
html[data-theme="dark"] .st-ok     { color: #6ee7b7; }
html[data-theme="dark"] .st-update { color: #93c5fd; }
html[data-theme="dark"] .st-dup    { color: #fcd34d; }
html[data-theme="dark"] .st-err    { color: #fca5a5; }

/* ── Label scanning (landing page) ──────────────────────────────────────── */
.scan-divider { display: flex; align-items: center; gap: .75rem;
  margin: 1.4rem 0 .9rem; color: var(--muted); font-size: .85rem; }
.scan-divider::before, .scan-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border); }
.scan-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.scan-actions .btn { flex: 1; min-width: 150px; }
.scan-hint { margin-top: .55rem; }
.scan-panel { margin-top: 1rem; text-align: center; }
.scan-panel video { width: 100%; max-height: 60vh; border-radius: 10px;
  background: #000; border: 1px solid var(--border); }

/* ── Mobile polish — media queries only, desktop layouts untouched ──────── */
/* Header: on narrow screens the nav items (theme toggle, version, Admin /
   admin links) used inline margins and overlapped when they wrapped; make the
   nav a wrapping flex row with real gaps and shrink the logo a notch. */
@media (max-width: 600px) {
  .site-header { padding: .75rem 1rem; gap: .6rem; }
  .brand-logo { height: 46px; padding: 6px 10px; border-radius: 9px; }
  .brand-text { font-size: .88rem; white-space: nowrap; }  /* tek satır kalsın */
  .admin-nav { display: flex; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; gap: .45rem; }
  .admin-nav a { margin-left: 0; }
  .nav-sep, .toolbar-sep { display: none; }   /* orphaned once rows wrap */
  .theme-toggle, .version-tag { margin-right: 0; }
}
/* Viewer meta (Serial/Type/Batch/Date): the desktop flex row looks ragged
   when it wraps on a phone — switch to a tidy two-column grid there. */
@media (max-width: 560px) {
  dl.meta { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem; }
}

/* Destructive bulk action button (admin list) */
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: #a43022; }
.btn.danger:disabled { opacity: .45; cursor: not-allowed; }

/* Numbered pagination (top & bottom of the admin list) */
.pagination { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  justify-content: center; margin: 1rem 0; }
.page-btn { padding: .35rem .7rem; font-size: .9rem; min-width: 2.2rem; text-align: center; }
.page-btn.active { background: var(--brand); border-color: var(--brand); color: #fff;
  pointer-events: none; }
.page-gap { padding: 0 .2rem; color: var(--muted); }
html[data-theme="dark"] .page-btn.active { background: var(--brand); color: #fff; }

/* Bulk-action buttons share the meta row with the per-page selector */
.bulk-btn { margin-right: .4rem; }
.bulk-btn:disabled { opacity: .45; cursor: not-allowed; }
.bulk-selected summary { cursor: pointer; }

/* Nav "About" button — looks like the other admin-nav links */
.admin-nav .navlink { background: none; border: none; color: #fff; cursor: pointer;
  font: inherit; font-size: .95rem; opacity: .9; padding: 0; margin-left: 1rem; }
.admin-nav .navlink:hover { opacity: 1; text-decoration: underline; }

/* ── Modal (admin About dialog) ─────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: 1rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal-box { position: relative; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.6rem 1.75rem; max-width: 640px;
  width: 100%; max-height: 82vh; overflow-y: auto; }
.modal-x { position: absolute; top: .5rem; right: .7rem; background: none;
  border: none; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--muted); }
.modal-x:hover { color: var(--text); }
.changelog { list-style: none; margin: 0; padding: 0; }
.changelog li { display: flex; gap: .7rem; padding: .5rem 0;
  border-bottom: 1px solid var(--border); font-size: .9rem; }
.changelog li:last-child { border-bottom: none; }
.cl-ver { flex: 0 0 3.2rem; font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--link); }
.cl-note { color: var(--text); }

/* ── Access log ──────────────────────────────────────────────────────
   Summary tiles + the small event/status labels used on /admin/access-logs.
   Everything here is driven by the theme variables, so dark mode needs no
   extra rules apart from the two tag colours (which are semantic, not
   surface colours, and so are stated explicitly for both themes). */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
         gap: .75rem; margin: 0 0 .6rem; padding: 0; }
.stat { background: var(--card); border: 1px solid var(--border);
        border-radius: var(--radius); padding: .8rem 1rem; box-shadow: var(--shadow); }
.stat dt { font-size: .72rem; color: var(--muted); text-transform: uppercase;
           letter-spacing: .06em; margin-bottom: .3rem; }
.stat dd { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.1;
           font-variant-numeric: tabular-nums; }
.stat-of { font-size: .8rem; font-weight: 500; color: var(--muted); }

.section-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
                margin: 2rem 0 .5rem; }
.section-head h2 { margin: 0; font-size: 1.15rem; }
.section-head p { margin: 0; max-width: 46em; }

.tag { display: inline-block; font-size: .72rem; font-weight: 600;
       padding: .15em .5em; border-radius: 4px; white-space: nowrap; }
.tag.open { background: #fdecea; color: #8a231b; }
.tag.closed { background: #e8f7f0; color: #0d6b4d; }
html[data-theme="dark"] .tag.open { background: #3a1d1b; color: #f3b4ae; }
html[data-theme="dark"] .tag.closed { background: #15302a; color: #9fe0c8; }

/* Event labels. --accent and --danger are surface/brand colours tuned for
   fills, not for small text: measured on the actual card backgrounds they
   fall under 4.5:1 (accent 3.3 on white, danger 2.9 on the dark card), so
   each label states a per-theme text colour of its own. */
.kind { font-size: .8rem; font-weight: 600; }
.kind-view { color: var(--link); }
.kind-ok { color: #0d6b4d; }
.kind-fail { color: var(--danger); }
html[data-theme="dark"] .kind-view { color: #7aa7e8; }
html[data-theme="dark"] .kind-ok { color: #4fc79b; }
html[data-theme="dark"] .kind-fail { color: #ef8a80; }

/* ── Coverage bars & monthly trend ───────────────────────────────────
   Deliberately plain CSS rather than a charting library: three numbers per
   row do not justify shipping a JS dependency into a page that must stay
   readable on a phone. */
.bar { display: inline-block; width: 5.5rem; height: .5rem; vertical-align: middle;
       background: var(--border); border-radius: 3px; overflow: hidden; margin-right: .4rem; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.bar-fill.warn { background: var(--danger); }

.trend { display: flex; flex-direction: column; gap: .35rem; background: var(--card);
         border: 1px solid var(--border); border-radius: var(--radius);
         padding: .9rem 1rem; box-shadow: var(--shadow); }
.trend-row { display: grid; grid-template-columns: 4.5rem 1fr 3rem auto;
             align-items: center; gap: .6rem; }
.trend-track { background: var(--border); border-radius: 3px; height: .65rem; overflow: hidden; }
.trend-bar { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.trend-value { text-align: right; font-variant-numeric: tabular-nums; }
.trend-note { white-space: nowrap; }
@media (max-width: 40rem) {
  .trend-row { grid-template-columns: 4.5rem 1fr 3rem; }
  .trend-note { display: none; }
}

/* A stat that has crossed into "worth looking at" territory. Semantic, not
   decorative: the border carries the meaning so the number itself stays
   readable in both themes. */
.stat.warn-tile { border-color: var(--danger); }
.stat.warn-tile dd { color: var(--danger); }
html[data-theme="dark"] .stat.warn-tile dd { color: #ef8a80; }

/* Restore-drill failure list on the backups page */
.drill-problems { margin: .4rem 0 0 1.1rem; padding: 0; }

/* Public record summary under the search card (landing page) */
.records-summary { padding: 1.25rem 1.75rem; }
.records-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.records-head h2 { margin: 0; font-size: 1rem; }
.records-total { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.records-table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .92rem; }
.records-table th { text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted); padding: 0 0 .4rem; border-bottom: 1px solid var(--border); }
.records-table td { padding: .55rem 0; border-bottom: 1px solid var(--border); }
.records-table tr:last-child td { border-bottom: none; }
.records-table th:last-child, .records-table td:last-child { text-align: right;
  font-variant-numeric: tabular-nums; padding-left: 1rem; }