/* ==========================================================================
   AIMS Media Admin — component styles.
   Colours come from css/theme.css (generated from DESIGN.md, light + dark), so nothing here
   is hard-coded per theme: flip <html class="dark"> and every rule below follows.
   Layout is done with Tailwind utilities in the markup; this file holds the pieces that are
   repeated everywhere (buttons, fields, chips, switch, drawer, skeletons) and the few
   things utilities can't express.
   ========================================================================== */

/* ---------- Typography: Roboto for the UI, Merriweather only for page titles (see js/tailwind.config.js) ---------- */
:root {
    --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Minimal reset (Tailwind preflight is disabled — see js/tailwind.config.js) ---------- */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: rgb(var(--c-line)); }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea, optgroup { font: inherit; color: inherit; margin: 0; padding: 0; letter-spacing: inherit; }
button, [role="button"] { cursor: pointer; background: transparent; border: 0; }
button:disabled { cursor: default; }
table { border-collapse: collapse; border-color: inherit; text-indent: 0; }
hr { border-top-width: 1px; height: 0; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline-offset: 2px; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: rgb(var(--c-background));
    color: rgb(var(--c-on-surface));
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
}
::selection { background: rgb(var(--c-accent)); color: #131f00; }
a { color: inherit; text-decoration: none; }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 20px; line-height: 1; vertical-align: middle; user-select: none; flex-shrink: 0;
}
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ---------- Surfaces ---------- */
.card {
    background: rgb(var(--c-surface-container-lowest));
    border: 1px solid rgb(var(--c-line));
    border-radius: .5rem;
}
.card-hover { transition: border-color .15s, transform .15s, box-shadow .15s; }
.card-hover:hover { border-color: rgb(var(--c-line-strong)); }
.card-selected { border-color: rgb(var(--c-accent)); box-shadow: 0 0 0 2px rgb(var(--c-accent) / .35); }
.divider { border-color: rgb(var(--c-line)); }
.band { background: rgb(var(--c-surface-container-low)); }

/* ---------- Form controls (44px, 4px radius — DESIGN.md) ---------- */
.fld {
    width: 100%; height: 44px; padding: 0 .875rem;
    background: rgb(var(--c-surface-container-lowest));
    color: rgb(var(--c-on-surface));
    border: 1px solid rgb(var(--c-line));
    border-radius: .25rem;
    font: 400 14px/20px var(--font-sans);
    transition: border-color .15s, box-shadow .15s;
}
textarea.fld { height: auto; min-height: 96px; padding: .625rem .875rem; resize: vertical; line-height: 22px; }
select.fld {
    appearance: none; padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238e9380' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .6rem center;
}
.fld::placeholder { color: rgb(var(--c-outline)); }
.fld:hover { border-color: rgb(var(--c-outline-variant)); }
.fld:focus {
    outline: none;
    border-color: rgb(var(--c-primary-container));
    box-shadow: 0 0 0 2px rgb(var(--c-primary-container) / .22);
}
.fld:disabled { opacity: .6; cursor: not-allowed; background: rgb(var(--c-surface-container)); }
.fld-error, .fld.invalid { border-color: rgb(var(--c-error)); }
.fld-label {
    display: block; margin-bottom: 6px;
    font: 600 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
    color: rgb(var(--c-on-surface-variant));
}
.fld-hint { margin-top: 4px; font: 400 12px/16px var(--font-sans); color: rgb(var(--c-on-surface-variant)); }
.fld-msg { margin-top: 4px; font: 400 12px/16px var(--font-sans); color: rgb(var(--c-error)); }
input[type="checkbox"].chk { width: 18px; height: 18px; accent-color: rgb(var(--c-primary-container)); cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: 44px; padding: 0 1.125rem; border-radius: .25rem; border: 1px solid transparent;
    font: 600 14px/20px var(--font-sans); white-space: nowrap; cursor: pointer;
    transition: background .15s, border-color .15s, transform .08s, filter .15s, opacity .15s;
}
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; }
.btn-sm { height: 36px; padding: 0 .75rem; font-size: 13px; }
.btn-primary { background: #496800; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #364e00; }
.dark .btn-primary:hover:not(:disabled) { background: #5a8000; }
.btn-secondary { background: rgb(var(--c-surface-container-lowest)); color: rgb(var(--c-on-surface)); border-color: rgb(var(--c-line)); }
.btn-secondary:hover:not(:disabled) { background: rgb(var(--c-surface-container-low)); border-color: rgb(var(--c-line-strong)); }
.btn-ghost { background: transparent; color: rgb(var(--c-on-surface-variant)); }
.btn-ghost:hover:not(:disabled) { background: rgb(var(--c-surface-container)); color: rgb(var(--c-on-surface)); }
.btn-danger { background: rgb(var(--c-error)); color: rgb(var(--c-on-error)); }
.btn-danger:hover:not(:disabled) { filter: brightness(.92); }
.btn-danger-ghost { background: transparent; color: rgb(var(--c-error)); }
.btn-danger-ghost:hover:not(:disabled) { background: rgb(var(--c-error-container) / .6); }
/* The one signature gradient button per screen (DESIGN.md: "used strictly once per screen context"). */
.btn-brand {
    background-image: linear-gradient(45deg, #8DBE24, #F9CF00); color: #1b1c1c;
    border-color: rgba(0, 0, 0, .06); font-weight: 700;
}
.btn-brand:hover:not(:disabled) { filter: brightness(1.05); }
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0;
    border-radius: .25rem; border: 0; background: transparent; color: rgb(var(--c-on-surface-variant)); cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-icon:hover:not(:disabled) { background: rgb(var(--c-surface-container)); color: rgb(var(--c-on-surface)); }
.btn-icon:disabled { opacity: .35; cursor: not-allowed; }
.btn-icon.danger:hover:not(:disabled) { background: rgb(var(--c-error-container) / .6); color: rgb(var(--c-error)); }
.btn-icon:focus-visible { outline: 2px solid rgb(var(--c-accent)); }

/* ---------- Chips / status badges (pill, mono, uppercase) ---------- */
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 9999px;
    font: 600 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.chip-attn { background: rgb(var(--c-attention)); color: rgb(var(--c-on-attention)); }
.chip-ok { background: rgb(var(--c-ok-container)); color: rgb(var(--c-ok)); }
.chip-muted { background: rgb(var(--c-surface-container)); color: rgb(var(--c-on-surface-variant)); }
.chip-err { background: rgb(var(--c-error-container)); color: rgb(var(--c-on-error-container)); }
.chip-primary { background: rgb(var(--c-primary-container) / .16); color: rgb(var(--c-primary)); }
.chip-outline { background: transparent; color: rgb(var(--c-on-surface-variant)); border: 1px solid rgb(var(--c-line)); }
.pulse-dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; animation: pulseDot 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.count-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px;
    font: 700 11px/1 var(--font-sans); background: rgb(var(--c-attention)); color: rgb(var(--c-on-attention));
}

/* Filter pills / tabs */
.pill {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 9999px; cursor: pointer;
    border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface-container-lowest)); color: rgb(var(--c-on-surface-variant));
    font: 600 12px/1 var(--font-sans); letter-spacing: .02em; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.pill:hover { background: rgb(var(--c-surface-container-low)); color: rgb(var(--c-on-surface)); }
.pill.active { background: rgb(var(--c-primary-container)); border-color: transparent; color: #fff; }
.pill .n { opacity: .7; font-weight: 500; }
.scroll-x { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { flex: 0 0 auto; }

/* Segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: .375rem; background: rgb(var(--c-surface-container)); }
.seg > button {
    height: 36px; padding: 0 14px; border: 0; border-radius: .25rem; background: transparent; cursor: pointer;
    font: 600 13px/1 var(--font-sans); color: rgb(var(--c-on-surface-variant)); transition: background .15s, color .15s;
}
.seg > button:hover { color: rgb(var(--c-on-surface)); }
.seg > button.on { background: rgb(var(--c-surface-container-lowest)); color: rgb(var(--c-primary)); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* ---------- Switch (a <button role="switch">; its look is driven purely by aria-checked) ---------- */
.switch {
    position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; padding: 0; cursor: pointer;
    border-radius: 9999px; border: 1px solid rgb(var(--c-outline-variant)); background: rgb(var(--c-surface-container-highest));
    transition: background .2s, border-color .2s;
}
.switch::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 9999px;
    background: rgb(var(--c-outline)); transition: transform .2s, background .2s;
}
.switch[aria-checked="true"] { background: #496800; border-color: transparent; }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }
.switch:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; }
.switch:disabled { opacity: .5; cursor: not-allowed; }
/* A bigger invisible hit area (44px tall) for switches that stand alone, without growing the visible track. */
.switch-hit::before { content: ''; position: absolute; inset: -11px -4px; }

/* ---------- Sidebar / navigation ---------- */
.sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: 264px; display: flex; flex-direction: column;
    background: rgb(var(--c-surface-container-lowest)); border-right: 1px solid rgb(var(--c-line));
    transform: translateX(-100%); transition: transform .25s ease;
}
.sidebar.is-open { transform: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
@media (min-width: 1024px) { .sidebar { transform: none; box-shadow: none; } }
.nav-label { padding: 12px 12px 4px; font: 600 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-outline)); }
.nav-item {
    display: flex; align-items: center; gap: .75rem; min-height: 40px; padding: 6px 12px; margin-bottom: 2px; border-radius: .5rem;
    border-left: 3px solid transparent; color: rgb(var(--c-on-surface-variant)); font: 500 14px/20px var(--font-sans);
    transition: background .15s, color .15s;
}
.nav-item:hover { background: rgb(var(--c-surface-container-low)); color: rgb(var(--c-on-surface)); }
.nav-item.active { background: rgb(var(--c-primary-container) / .14); color: rgb(var(--c-primary)); font-weight: 600; border-left-color: rgb(var(--c-accent)); }
.topbar { background: rgb(var(--c-surface-container-lowest) / .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgb(var(--c-line)); padding-top: env(safe-area-inset-top); }

/* ---------- List rows ---------- */
.list-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid rgb(var(--c-line)); transition: background .12s; }
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: rgb(var(--c-surface-container-low)); }
.list-row.drop-target { box-shadow: inset 0 2px 0 rgb(var(--c-accent)); background: rgb(var(--c-accent) / .08); }
.dragging { opacity: .45; }
.drag-handle { cursor: grab; color: rgb(var(--c-outline)); touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.col-head { font: 600 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-on-surface-variant)); }
/* Small caps-style labels, timestamps, slugs and counts. Formerly a monospace face; now Roboto with
   tabular figures so numbers still line up. Real code uses var(--font-mono). */
.mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.line-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Drawer / modal ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; }
.scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .45); backdrop-filter: blur(2px); animation: fadeIn .18s ease-out; }
.drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 480px; display: flex; flex-direction: column;
    background: rgb(var(--c-surface-container-lowest)); border-left: 1px solid rgb(var(--c-line-strong));
    box-shadow: 0 8px 24px rgba(27, 28, 28, .18); animation: slideInRight .22s ease-out;
    padding-bottom: env(safe-area-inset-bottom);
}
.modal {
    position: relative; margin: auto; width: calc(100% - 2rem); max-width: 520px; max-height: calc(100% - 2rem); overflow: auto;
    background: rgb(var(--c-surface-container-lowest)); border: 1px solid rgb(var(--c-line-strong)); border-radius: .5rem;
    box-shadow: 0 8px 24px rgba(27, 28, 28, .22); animation: popIn .16s ease-out;
}

/* A drawer with .drawer-touch keeps every control at least 44px tall on phones (used by the People editor). */
@media (max-width: 767.98px) {
    .drawer-touch .btn, .drawer-touch .btn-icon, .drawer-touch .seg > button { min-height: 44px; }
    .drawer-touch .btn-icon { min-width: 44px; }
    .drawer-touch .md-toolbar .btn-icon { width: 44px; height: 44px; }
}

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; z-index: 80; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; right: 1rem; bottom: 1rem; left: 1rem; max-width: 420px; margin-left: auto; padding-bottom: env(safe-area-inset-bottom); }
.toast { pointer-events: auto; display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border-radius: .5rem; animation: slideUp .2s ease-out;
    background: rgb(var(--c-inverse-surface)); color: rgb(var(--c-inverse-on-surface)); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
@media (max-width: 639px) { .toast-stack { top: calc(env(safe-area-inset-top) + 4.25rem); bottom: auto; } }

/* ---------- Skeletons / misc ---------- */
.skel {
    border-radius: .25rem; background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
    background-image: linear-gradient(90deg, rgb(var(--c-surface-container-high)) 25%, rgb(var(--c-surface-container-highest)) 50%, rgb(var(--c-surface-container-high)) 75%);
}
.checker {
    background-color: rgb(var(--checker-b));
    background-image: linear-gradient(45deg, rgb(var(--checker-a)) 25%, transparent 25%), linear-gradient(-45deg, rgb(var(--checker-a)) 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, rgb(var(--checker-a)) 75%), linear-gradient(-45deg, transparent 75%, rgb(var(--checker-a)) 75%);
    background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.dot-grid { background-image: radial-gradient(rgb(var(--c-outline-variant)) 1px, transparent 1px); background-size: 24px 24px; }
.brand-gradient { background-image: linear-gradient(45deg, #8DBE24, #F9CF00); color: #1b1c1c; }
.sticky-bar { position: sticky; bottom: 0; z-index: 30; }
.unsaved-bar { background: rgb(var(--c-inverse-surface)); color: rgb(var(--c-inverse-on-surface)); border-left: 4px solid rgb(var(--c-attention)); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.spin { animation: spin 1s linear infinite; }

@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes popIn { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-fade { animation: fadeIn .25s ease-out; }

/* ---------- Mobile ---------- */
/* 16px inputs stop iOS zooming the page on focus. */
@media (max-width: 767.98px) { input.fld, select.fld, textarea.fld { font-size: 16px; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Blazor reconnect / error UI */
#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: .75rem 1.25rem; background: rgb(var(--c-error-container)); color: rgb(var(--c-on-error-container)); font-size: .875rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }