/* ============================================================
 * 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(16px * var(--ui-scale, 1));
}

/* ---------- theme toggle icon only; palette lives in css/tokens.css ---------- */
:root,
[data-theme="dark"] {
    --theme-icon: "☀";
}
[data-theme="light"] {
    --theme-icon: "🌙";
}

/* ---------- base -------------------------------------------- */
* { box-sizing: border-box; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    /* Family comes from the token — never a literal stack here. This line used
       to hardcode the system stack while .admin-body applied var(--font),
       so the "one family" decision had two owners that disagreed. */
    font-family: var(--font);
    /* body IS the base (1rem = 16px * --ui-scale), not a step of the --fs-*
       scale; the scale expresses sizes RELATIVE to it. */
    line-height: 1.45; font-size: 1rem;
}
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.err { color: var(--err); }
.m0 { margin: 0 0 0.857rem; }
/* Explicit weights: without them headings inherit the browser default (700),
   which is the "bold effect" this redesign removes. 600 is the ceiling. */
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); margin: 0 0 0.429rem; letter-spacing: -.02em; }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); margin: 1.714rem 0 0.571rem; letter-spacing: -.015em; }
h3 { font-size: var(--fs-sm); font-weight: var(--fw-medium); margin: 1.143rem 0 0.429rem; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

/* ---------- 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: var(--fw-semibold); font-size: var(--fs-xl); }
.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 ------------------------------------ */
/* Rules live in css/components.css so BOTH shells get them (the client
   shell does not load style.css). */

/* ---------- 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: var(--fw-medium); 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: var(--fw-semibold);
    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: var(--fw-semibold); text-decoration: underline;
    text-underline-offset: 3px;
}
.plate-link:hover { color: var(--accent-hover); }

/* ---------- buttons ----------------------------------------- */
/* Moved to css/components.css: both shells load that file, this one is
   operator-only, and .btn is now used on tenant pages too (row drawers). */
.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: var(--ok-soft); border: 1px solid var(--ok-border); color: var(--ok); font-size: var(--fs-md);
}
.flash.err { background: var(--err-soft); border-color: var(--err-border); color: var(--err); }

/* ---------- 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: var(--fs-md); 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: var(--fs-md);
}
.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: var(--accent-fg); border-color: var(--accent-hover); }
.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: var(--fw-medium); font-size: var(--fs-md); text-transform: uppercase; color: var(--muted); letter-spacing: .5px; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.table tr[data-href] { cursor: pointer; }
.table tr[data-href]:hover td { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.table .actions { white-space: nowrap; text-align: right; }
.row-disabled td { opacity: .5; }

/* ---------- badges ------------------------------------------ */
/* Moved to css/components.css — see the note on buttons above. */

/* ---------- pills ------------------------------------------- */
.state-pill, .site-pill {
    font-family: ui-monospace,Menlo,monospace; font-size: var(--fs-sm);
    padding: 2px 7px; border-radius: 4px;
}
.state-pill { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.site-pill { background: var(--accent-soft); color: var(--accent); }

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

/* ---------- 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: var(--fw-semibold); }
.cit-amt  { color: var(--warn); font-weight: var(--fw-semibold); }
.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: var(--fs-md); color: var(--muted);
    transition: border-color .2s;
}
code { font-family: ui-monospace,Menlo,monospace; font-size: var(--fs-md); 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;
}

/* shared fine note in the admin plate detail (sub-6) */
.cit-note{margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
.cit-note-label{display:block;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.cit-note textarea{width:100%;box-sizing:border-box;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font:inherit;font-size:var(--fs-md);resize:vertical}
.cit-note textarea:focus{outline:none;border-color:var(--accent)}
.cit-note-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}