/* ============================================================
 * fines-finder admin — stylesheet
 * Themes: [data-theme="dark"] (default) | [data-theme="light"]
 * Scale: --ui-scale drives html font-size; all rem units scale.
 * ============================================================ */

/* ---------- scale mechanism --------------------------------- */
html {
    /* Driven by boot script from cookie; JS updates inline style.
       The zoom control itself uses fixed px — it is immune to this. */
    font-size: calc(14px * var(--ui-scale, 1));
}

/* ---------- dark palette (default) -------------------------- */
:root,
[data-theme="dark"] {
    --bg:      #0f1115;
    --panel:   #181b22;
    --panel2:  #1f232c;
    --border:  #2a2f3a;
    --text:    #e6e8ec;
    --muted:   #8b93a3;
    --accent:  #4f8cff;
    --accent2: #3a6fd8;
    --ok:      #3fb950;
    --warn:    #d29922;
    --err:     #f85149;

    /* theme toggle icon */
    --theme-icon: "☀";
}

/* ---------- light palette ----------------------------------- */
[data-theme="light"] {
    --bg:      #f0f3f8;
    --panel:   #ffffff;
    --panel2:  #eef1f6;
    --border:  #d0d7e3;
    --text:    #1c2333;
    --muted:   #5b6882;
    --accent:  #0969da;
    --accent2: #0550ae;
    --ok:      #1a7f37;
    --warn:    #9a6700;
    --err:     #cf222e;

    --theme-icon: "🌙";

    /* badges need different alpha in light — re-tint semantic colors */
    --badge-ok-bg:   rgba(26,127,55,.12);
    --badge-ok-fg:   #1a7f37;
    --badge-ok-bdr:  rgba(26,127,55,.35);

    --badge-warn-bg:  rgba(154,103,0,.12);
    --badge-warn-fg:  #7d5700;
    --badge-warn-bdr: rgba(154,103,0,.35);

    --badge-err-bg:   rgba(207,34,46,.12);
    --badge-err-fg:   #cf222e;
    --badge-err-bdr:  rgba(207,34,46,.35);
}

/* ---------- base -------------------------------------------- */
* { box-sizing: border-box; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height: 1.45; font-size: 1rem;
}
.muted { color: var(--muted); }
.small { font-size: 0.857rem; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.err { color: var(--err); }
.m0 { margin: 0 0 0.857rem; }
h1 { font-size: 1.571rem; margin: 0 0 0.429rem; }
h2 { font-size: 1.286rem; margin: 1.714rem 0 0.571rem; }
h3 { font-size: 1rem; margin: 1.143rem 0 0.429rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* ---------- topbar ------------------------------------------ */
.topbar {
    display: flex; align-items: center; gap: 1.714rem;
    padding: 1rem 2rem; background: var(--panel);
    border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5;
    transition: background .2s, border-color .2s;
}
.brand { font-weight: 700; font-size: 1.143rem; }
.nav { display: flex; gap: 1.286rem; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.nav a {
    color: var(--muted); text-decoration: none; padding: 0.429rem 0;
    border-bottom: 2px solid transparent; transition: border-color .15s, color .15s;
}
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- theme toggle ------------------------------------ */
/* Fixed px — immune to --ui-scale. NEVER use rem here. */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    color: var(--muted);
    transition: border-color .15s, color .15s, background .15s;
    flex-shrink: 0;
    /* HARD RULE: no rem, no calc with --ui-scale */
}
.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--text);
    background: var(--panel2);
}

/* ---------- zoom control ------------------------------------ */
/* ALL measurements are fixed px — this control does NOT scale with --ui-scale. */
.zoom-control {
    display: inline-flex; align-items: center;
    gap: 4px;
    /* HARD RULE: no rem, no em, no calc(px * var(--ui-scale)) anywhere in this block */
}
.zoom-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1;
    transition: border-color .12s, color .12s, background .12s;
    /* fixed px — immune to scale */
}
.zoom-btn:hover:not([disabled]) {
    border-color: var(--accent);
    color: var(--text);
    background: var(--panel2);
}
.zoom-btn[disabled] {
    opacity: .3;
    cursor: not-allowed;
}
.zoom-label {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: var(--muted);
    min-width: 32px;
    text-align: center;
    /* fixed size — never shifts between 85% and 100% or 145% */
    user-select: none;
}

/* ---------- layout ------------------------------------------ */
.wrap { max-width: 88.571rem; margin: 0 auto; padding: 1.714rem 2rem 5.714rem; }

/* ---------- panel ------------------------------------------- */
.panel {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 10px; padding: 1.286rem 1.429rem; margin: 1rem 0;
    transition: background .2s, border-color .2s;
}
.panel summary { cursor: pointer; font-weight: 600; padding: 0.429rem 0; }
.empty { color: var(--muted); text-align: center; padding: 2.571rem 0; }

.page-head {
    display: flex; align-items: baseline; gap: 1.429rem;
    margin-bottom: 1.286rem; flex-wrap: wrap;
}
.plate-big {
    font-family: ui-monospace,Menlo,monospace; font-weight: 700;
    background: #fff; color: #111; padding: 0.286rem 0.857rem; border-radius: 5px;
    letter-spacing: 1px;
}
[data-theme="light"] .plate-big { background: #1c2333; color: #f0f3f8; }

.plate-link {
    color: var(--accent); font-family: ui-monospace,Menlo,monospace;
    font-weight: 700; text-decoration: underline;
    text-underline-offset: 3px;
}
.plate-link:hover { color: var(--accent2); }

/* ---------- buttons ----------------------------------------- */
.btn {
    font-size: 0.929rem; padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid var(--border);
    background: var(--panel2); color: var(--text); cursor: pointer;
    font-family: inherit; transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent2); color: #fff; }
.btn-primary:hover { background: var(--accent2); }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--err); border-color: rgba(248,81,73,.4); }
.btn-danger:hover { background: rgba(248,81,73,.12); }
[data-theme="light"] .btn-danger { border-color: rgba(207,34,46,.4); }
[data-theme="light"] .btn-danger:hover { background: rgba(207,34,46,.1); }
.inline { display: inline-block; margin: 0; }
.trigger-form { margin: 0; }

/* ---------- flash ------------------------------------------- */
.flash {
    padding: 0.714rem 1.286rem; border-radius: 6px; margin: 0.857rem 2rem 0;
    background: rgba(63,185,80,.12); border: 1px solid rgba(63,185,80,.4); color: #7ee787; font-size: 0.929rem;
}
.flash.err { background: rgba(248,81,73,.12); border-color: rgba(248,81,73,.4); color: #ffa198; }
[data-theme="light"] .flash { background: rgba(26,127,55,.1); border-color: rgba(26,127,55,.35); color: #1a7f37; }
[data-theme="light"] .flash.err { background: rgba(207,34,46,.1); border-color: rgba(207,34,46,.35); color: #cf222e; }

/* ---------- row-form ---------------------------------------- */
.row-form { display: flex; gap: 0.571rem; flex-wrap: wrap; margin-top: 0.857rem; }
.row-form input, .row-form select {
    background: var(--bg); color: var(--text); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.5rem 0.714rem; font-size: 0.929rem; font-family: inherit;
}
.row-form input[name="plate"] { font-family: ui-monospace,Menlo,monospace; text-transform: uppercase; }
.row-form input[name="state"] { width: 4.286rem; text-transform: uppercase; text-align: center; }
.row-form input[name="tag"] { width: 14.286rem; }

/* ---------- filters ----------------------------------------- */
.filters {
    display: flex; gap: 0.429rem; align-items: center; flex-wrap: wrap;
    margin: 1.286rem 0; font-size: 0.929rem;
}
.filters a {
    color: var(--muted); text-decoration: none;
    padding: 0.286rem 0.714rem; border-radius: 6px;
    border: 1px solid var(--border);
}
.filters a:hover { color: var(--text); }
.filters a.active { background: var(--accent); color: #fff; border-color: var(--accent2); }
.filters .sep { color: var(--border); }

/* ---------- table ------------------------------------------- */
.table {
    width: 100%; border-collapse: collapse;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden; margin: 0.857rem 0;
    transition: background .2s, border-color .2s;
}
.table th, .table td {
    padding: 0.643rem 0.857rem; border-bottom: 1px solid var(--border);
    text-align: left; vertical-align: middle;
}
.table th { background: var(--panel2); font-weight: 600; font-size: 0.857rem; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(79,140,255,.04); }
[data-theme="light"] .table tr:hover td { background: rgba(9,105,218,.05); }
.table tr[data-href] { cursor: pointer; }
.table tr[data-href]:hover td { background: rgba(79,140,255,.09); }
[data-theme="light"] .table tr[data-href]:hover td { background: rgba(9,105,218,.09); }
.table .actions { white-space: nowrap; text-align: right; }
.row-disabled td { opacity: .5; }

/* ---------- badges ------------------------------------------ */
.badge {
    display: inline-block; font-size: 0.786rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; padding: 2px 8px; border-radius: 20px;
    background: rgba(139,147,163,.15); color: var(--muted); border: 1px solid var(--border);
}
.badge-ok   { background: rgba(63,185,80,.15);  color: #7ee787; border-color: rgba(63,185,80,.4); }
.badge-warn { background: rgba(210,153,34,.15); color: #e3b341; border-color: rgba(210,153,34,.4); }
.badge-err  { background: rgba(248,81,73,.15);  color: #ffa198; border-color: rgba(248,81,73,.4); }

/* Light mode badge overrides — dark-mode alphas are too faint on white */
[data-theme="light"] .badge-ok   { background: var(--badge-ok-bg,   rgba(26,127,55,.12));  color: var(--badge-ok-fg,   #1a7f37); border-color: var(--badge-ok-bdr,   rgba(26,127,55,.35)); }
[data-theme="light"] .badge-warn { background: var(--badge-warn-bg,  rgba(154,103,0,.12)); color: var(--badge-warn-fg,  #7d5700); border-color: var(--badge-warn-bdr, rgba(154,103,0,.35)); }
[data-theme="light"] .badge-err  { background: var(--badge-err-bg,   rgba(207,34,46,.12));  color: var(--badge-err-fg,   #cf222e); border-color: var(--badge-err-bdr,  rgba(207,34,46,.35)); }

/* ---------- pills ------------------------------------------- */
.state-pill, .site-pill {
    font-family: ui-monospace,Menlo,monospace; font-size: 0.786rem;
    padding: 2px 7px; border-radius: 4px;
}
.state-pill { background: rgba(255,255,255,.08); color: var(--text); }
[data-theme="light"] .state-pill { background: rgba(28,35,51,.08); }
.site-pill { background: rgba(79,140,255,.15); color: #9ec1ff; }
[data-theme="light"] .site-pill { background: rgba(9,105,218,.12); color: #0550ae; }

/* ---------- stats ------------------------------------------- */
.stats {
    display: flex; gap: 1.286rem; flex-wrap: wrap;
    padding: 0.571rem 0; margin-bottom: 1rem;
}
.stats > div { font-size: 0.929rem; }

/* ---------- citation cards ---------------------------------- */
.cit-card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 8px; padding: 1rem 1.286rem; margin: 0.714rem 0;
    transition: background .2s;
}
.cit-head { display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.cit-num  { font-family: ui-monospace,Menlo,monospace; font-weight: 700; }
.cit-amt  { color: var(--warn); font-weight: 700; }
.cit-sub  { margin-top: 0.286rem; }

/* ---------- thumbs ------------------------------------------ */
.thumbs { display: flex; gap: 0.714rem; flex-wrap: wrap; margin-top: 0.857rem; }
.thumbs a { display: block; }
.thumbs img {
    height: 7.857rem; width: auto; border-radius: 5px; border: 1px solid var(--border);
    background: #000; object-fit: cover;
}
.thumb-doc img { height: 11.429rem; }

/* ---------- footer ------------------------------------------ */
.footer {
    border-top: 1px solid var(--border); padding: 1.286rem 2rem; margin-top: 2.857rem;
    display: flex; gap: 0.857rem; justify-content: space-between; flex-wrap: wrap;
    font-size: 0.857rem; color: var(--muted);
    transition: border-color .2s;
}
code { font-family: ui-monospace,Menlo,monospace; font-size: 0.857rem; background: var(--panel2); padding: 1px 5px; border-radius: 3px; }

/* ---------- smooth theme transition ------------------------- */
body, .topbar, .panel, .table, .cit-card, .footer {
    transition: background .2s, border-color .2s, color .15s;
}