/* ─────────────────────────────────────────
RESET & TOKENS
───────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Hint to the browser which color-scheme its native UI (select dropdowns,
   date pickers, scrollbars, autofill) should match. Without this, Chrome
   renders <select> option lists in light mode regardless of our CSS. */
:root { color-scheme: dark; }
html.light { color-scheme: light; }

:root {
    --red: #c41717;
    --red-dark: #9e1010;
    --black: #0a0a0a;
    --off-black: #111111;
    --charcoal: #1c1c1e;
    --gray-darker: #232325;
    --gray-dark: #3a3a3c;
    --gray-mid: #6e6e73;
    --gray-light: #aeaeb2;
    --gray-lighter: #d2d2d7;
    --off-white: #f4f3f0;
    --white: #ffffff;

    --bg: #0e0e10;
    --surface: #18181b;
    --surface-2: #1f1f23;
    --surface-3: #2a2a2f;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text: #f4f4f5;
    --text-mid: #a1a1aa;
    --text-dim: #71717a;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md:
        0 4px 14px -4px rgba(0, 0, 0, 0.35),
        0 2px 4px -1px rgba(0, 0, 0, 0.18);
    --shadow-lg:
        0 14px 40px -12px rgba(0, 0, 0, 0.45),
        0 4px 12px -2px rgba(0, 0, 0, 0.18);

    --font:
        -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", "Fira Code", monospace;

    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --topbar-h: 60px;
    --sidebar-w: 240px;
}

html.light {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --surface-3: #f0f0f2;
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.14);
    --text: #0a0a0a;
    --text-mid: #3a3a3c;
    --text-dim: #6e6e73;
}

html,
body {
    height: 100%;
}

/* Sleek custom scrollbar matching the dark theme. Firefox uses the two
   high-level properties; Chromium/Safari/Edge use the ::-webkit-scrollbar
   pseudo-elements. Both target "any scrollable area" so the modal, the
   admin main pane, and any inner scrolling region pick this up uniformly. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.18s;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 16, 46, 0.55);
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active {
    background: var(--red, #c8102e);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Light theme — darker thumb for contrast on a white background */
html.light * {
    scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}
html.light *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    background-clip: padding-box;
}
html.light *::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 16, 46, 0.6);
    background-clip: padding-box;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    line-height: 1.45;
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}
a {
    text-decoration: none;
    color: inherit;
}
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}
input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 1px 6px;
    background: var(--surface-3);
    border-radius: 5px;
}

/* ─────────────────────────────────────────
LOCKED SCREEN (soft client-side gate)
───────────────────────────────────────── */
.admin-locked-screen {
    display: none;
}
html.admin-locked .admin-locked-screen {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
}
html.admin-locked .admin-shell {
    display: none;
}

.admin-locked-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.admin-locked-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 14px;
    background: rgba(196, 23, 23, 0.12);
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-locked-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 10px;
}
.admin-locked-card h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.admin-locked-card p {
    font-size: 14px;
    color: var(--text-mid);
    margin-bottom: 22px;
}
.admin-locked-actions {
    margin-bottom: 18px;
}
.admin-locked-btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--red);
    color: #fff;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 600;
    transition:
        background 0.2s,
        transform 0.15s;
}
.admin-locked-btn:hover {
    background: var(--red-dark);
    transform: scale(1.02);
}
.admin-locked-note {
    font-size: 11px;
    color: var(--text-dim);
    margin: 0;
    line-height: 1.5;
}

/* ─────────────────────────────────────────
SHELL LAYOUT
───────────────────────────────────────── */
.admin-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas:
        "topbar topbar"
        "sidebar main";
    height: 100vh;
}

/* ─────────────────────────────────────────
TOPBAR
───────────────────────────────────────── */
.admin-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 10;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-brand-logo {
    height: 36px;
    width: auto;
}
html:not(.light) .admin-brand-logo {
    filter: brightness(0) invert(1);
}
.admin-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.admin-brand-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.admin-brand-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
}

/* ── OMS-style admin header (mirrors /user/) ──────────────────────────── */
.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 18px;
}
.admin-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border, #d8d8d8);
    background: transparent;
    color: var(--text-strong, #f6f6f7);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.admin-back-link:hover {
    background: rgba(196, 23, 23, 0.18);
    border-color: var(--red, #c81e1e);
    color: #ff7a7a;
    transform: translateX(-2px);
}
html.light .admin-back-link {
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
}
html.light .admin-back-link:hover {
    background: rgba(196, 23, 23, 0.08);
    color: var(--red, #c81e1e);
}
.admin-brand-oms {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: inherit;
}
.admin-brand-oms .admin-brand-logo {
    height: 110px;
    width: auto;
    object-fit: contain;
}
.admin-brand-omslabel {
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: #0e0e10;
    line-height: 1;
    position: relative;
    z-index: 21;
    margin-left: -22px;
}
html:not(.light) .admin-brand-omslabel { color: #ffffff; }
/* Bump topbar to fit the 110px logo + let it overflow downward like OMS. */
.admin-shell {
    grid-template-rows: 68px 1fr !important;
}
.admin-topbar {
    overflow: visible !important;
    z-index: 20;
}
.admin-brand-oms .admin-brand-logo {
    position: relative;
    z-index: 21;
}

/* ── Welcome pane (admin-themed) ──────────────────────────────────────── */
.admin-welcome-hero {
    margin-bottom: 28px;
    padding: 36px;
    border-radius: 16px;
    background: linear-gradient(135deg, #c81e1e 0%, #8a0c0c 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.admin-welcome-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,0.12), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(0,0,0,0.25), transparent 50%);
    pointer-events: none;
}
.admin-welcome-tag {
    display: inline-block;
    padding: 5px 11px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    position: relative;
    z-index: 1;
}
.admin-welcome-headline {
    margin: 0 0 12px 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    max-width: 36ch;
    position: relative;
    z-index: 1;
}
.admin-welcome-sub {
    margin: 0 0 22px 0;
    font-size: 15px;
    line-height: 1.55;
    max-width: 60ch;
    opacity: 0.92;
    position: relative;
    z-index: 1;
}
.admin-welcome-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.admin-welcome-cta-row .admin-btn:not(.admin-btn--primary) {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.admin-welcome-cta-row .admin-btn:not(.admin-btn--primary):hover {
    background: rgba(255, 255, 255, 0.2);
}

.admin-welcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.admin-welcome-card {
    padding: 22px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.admin-welcome-card:hover {
    transform: translateY(-2px);
    border-color: rgba(200, 30, 30, 0.4);
    box-shadow: 0 8px 24px -10px rgba(200, 30, 30, 0.25);
}
.admin-welcome-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: rgba(200, 30, 30, 0.12);
    color: #c81e1e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-welcome-icon svg { width: 20px; height: 20px; }
.admin-welcome-card h3 {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 700;
}
.admin-welcome-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted, #6a6a6a);
}
.admin-welcome-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 22px;
    border-radius: 12px;
    background: var(--surface-subtle, #fafafa);
    border: 1px solid var(--border);
}
html:not(.light) .admin-welcome-strip {
    background: #15151a;
}
.admin-welcome-strip-stat { text-align: center; }
.admin-welcome-strip-num {
    font-family: "Geist", -apple-system, system-ui, sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #c81e1e;
    line-height: 1;
    margin-bottom: 4px;
}
.admin-welcome-strip-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--text-muted, #6a6a6a);
}
@media (max-width: 720px) {
    .admin-welcome-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Profile Settings pane ───────────────────────────────────────────── */
.admin-profile-card {
    padding: 28px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.admin-profile-card-head { margin-bottom: 18px; }
.admin-profile-card-head h2 {
    margin: 0 0 4px 0;
    font-size: 17px;
    font-weight: 700;
}
.admin-profile-card-head p {
    margin: 0;
    color: var(--text-muted, #6a6a6a);
    font-size: 13px;
    line-height: 1.5;
}
.admin-profile-card-danger { border-color: rgba(200, 30, 30, 0.25); }
.admin-profile-card-danger .admin-profile-card-head h2 { color: #c81e1e; }
html:not(.light) .admin-profile-card-danger { border-color: rgba(255, 80, 80, 0.35); }
html:not(.light) .admin-profile-card-danger .admin-profile-card-head h2 { color: #ff7a7a; }

.admin-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 18px;
}
.admin-profile-field { display: flex; flex-direction: column; gap: 6px; }
.admin-profile-field-wide { grid-column: 1 / -1; }
.admin-profile-field label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6a6a6a);
}
.admin-profile-field input,
.admin-profile-field select {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--input-bg, var(--surface));
    color: inherit;
    font-size: 14px;
    line-height: 1.4;
    font-family: inherit;
}
.admin-profile-field input:focus,
.admin-profile-field select:focus {
    outline: none;
    border-color: #c81e1e;
    box-shadow: 0 0 0 3px rgba(200, 30, 30, 0.18);
}
.admin-profile-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted, #6a6a6a);
    line-height: 1.5;
}
.admin-profile-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.admin-profile-status {
    flex: 1;
    font-size: 13px;
    color: var(--text-muted, #6a6a6a);
    min-height: 1.5em;
}
.admin-profile-status.is-error { color: #c81e1e; font-weight: 500; }
.admin-profile-status.is-success { color: #1e8a4e; font-weight: 500; }
html:not(.light) .admin-profile-status.is-error { color: #ff7a7a; }
html:not(.light) .admin-profile-status.is-success { color: #6fd99a; }
.admin-profile-form-confirm {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--border);
}

.admin-topbar-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-theme-toggle {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--text-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, color 0.18s;
}
.admin-theme-toggle:hover {
    background: var(--surface-3);
    color: var(--text);
}
.admin-theme-toggle svg {
    width: 16px;
    height: 16px;
}
.admin-theme-toggle .icon-sun {
    display: none;
}
html.light .admin-theme-toggle .icon-moon {
    display: none;
}
html.light .admin-theme-toggle .icon-sun {
    display: block;
}

.admin-role-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--red);
    padding: 4px 10px;
    background: rgba(196, 23, 23, 0.12);
    border-radius: 980px;
}

.admin-signout {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-mid);
    padding: 7px 14px;
    border-radius: 980px;
    transition:
        color 0.2s,
        background 0.2s;
}
.admin-signout:hover {
    color: var(--text);
    background: var(--surface-3);
}

/* ─────────────────────────────────────────
SIDEBAR
───────────────────────────────────────── */
.admin-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 18px 12px 12px;
}

.admin-sidebar-section + .admin-sidebar-section {
    margin-top: 18px;
}

.admin-sidebar-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 0 10px 8px;
}

.admin-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.admin-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-mid);
    text-align: left;
    transition:
        background 0.15s,
        color 0.15s;
}
.admin-nav-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-dim);
    transition: color 0.15s;
}
.admin-nav-btn span:first-of-type {
    flex: 1;
    min-width: 0;
}
.admin-nav-btn:hover {
    background: var(--surface-3);
    color: var(--text);
}
.admin-nav-btn:hover svg {
    color: var(--text-mid);
}
.admin-nav-btn.is-active {
    background: var(--red-alpha, rgba(196, 23, 23, 0.12));
    color: var(--red);
    background: rgba(196, 23, 23, 0.12);
}
.admin-nav-btn.is-active svg {
    color: var(--red);
}

.admin-pill {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 980px;
    background: var(--surface-3);
    color: var(--text-dim);
    flex-shrink: 0;
}
.admin-count-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    min-width: 20px;
    text-align: center;
    border-radius: 980px;
    background: var(--surface-3);
    color: var(--text-mid);
    flex-shrink: 0;
}
.admin-nav-btn.is-active .admin-count-badge,
.admin-nav-btn.is-active .admin-pill {
    background: rgba(196, 23, 23, 0.18);
    color: var(--red);
}

.admin-sidebar-foot {
    margin-top: auto;
    padding: 12px 10px 4px;
    border-top: 1px solid var(--border);
}
.admin-build-tag {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────
MAIN
───────────────────────────────────────── */
.admin-main {
    grid-area: main;
    overflow-y: auto;
    background: var(--bg);
    position: relative;
}

.admin-pane {
    display: none;
    padding: 28px 36px 64px;
    max-width: 1200px;
    margin: 0 auto;
}
.admin-pane.is-active {
    display: block;
}
.admin-pane--frame {
    max-width: none;
    padding: 0;
    height: 100%;
    display: none;
    flex-direction: column;
}
.admin-pane--frame.is-active {
    display: flex;
}
.admin-tool-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: var(--bg);
    /* Subtract the topbar so the iframe fills the rest of the viewport
       without scrolling the outer admin shell. */
    min-height: 0;
}

.admin-pane-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.admin-pane--frame .admin-pane-header {
    padding: 22px 36px 18px;
    margin-bottom: 0;
    flex-shrink: 0;
}
.admin-pane-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 8px;
}
.admin-pane-header h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.admin-pane-header p {
    font-size: 13.5px;
    color: var(--text-mid);
    max-width: 520px;
}

.admin-pane-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.admin-link-btn {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-mid);
    padding: 7px 12px;
    border-radius: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-link-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.admin-link-btn--inline {
    background: transparent;
    border: 1px dashed var(--border-strong);
    color: var(--text-mid);
    margin-top: 8px;
}
.admin-link-btn--inline:hover {
    color: var(--red);
    border-color: var(--red);
    background: transparent;
}

/* ─────────────────────────────────────────
DASHBOARD TILES
───────────────────────────────────────── */
.admin-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.admin-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    transition: border-color 0.18s, transform 0.18s;
}
.admin-tile:hover {
    border-color: var(--border-strong);
}
.admin-tile-eyebrow {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.admin-tile-num {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text);
}
.admin-tile-foot {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 6px;
}

.admin-banner {
    padding: 12px 16px;
    border-radius: 11px;
    font-size: 13px;
    color: var(--text-mid);
    margin-bottom: 24px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

/* ── Analytics pane ──
   Two big-number cards for site visits + a per-post engagement table.
   Sparklines render inline as SVGs; rendered client-side from the daily
   buckets returned by /admin/analytics/sites. Cards are positioned so
   their hover tooltip can absolute-position over them. */
.admin-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.admin-analytics-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 22px 14px;
}
.admin-tile-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
}
.admin-tile-value {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.admin-tile-sub {
    font-size: 12px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.admin-analytics-spark {
    margin-top: 14px;
    height: 90px;
    display: block;
    position: relative;
}
.admin-analytics-spark svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.admin-analytics-spark-hit {
    cursor: crosshair;
}
.admin-analytics-spark-cursor {
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.admin-analytics-spark-dot {
    pointer-events: none;
    transition: opacity 0.12s ease;
    filter: drop-shadow(0 1px 3px rgba(196, 23, 23, 0.4));
}

/* Tooltip floats above the hovered data point. position:absolute is
   measured against the .admin-analytics-card. The transform centers it
   horizontally and lifts it above the dot. opacity 0 by default; JS
   sets opacity 1 + left/top on hover. */
.admin-analytics-spark-tooltip {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    background: var(--surface-2, #1a1a1a);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 5;
    white-space: nowrap;
    min-width: 150px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.admin-analytics-tooltip-date {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.admin-analytics-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-variant-numeric: tabular-nums;
    padding: 2px 0;
}
.admin-analytics-tooltip-row span {
    color: var(--text-dim);
    font-size: 11px;
}
.admin-analytics-tooltip-row strong {
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
}
.admin-pane-subhead {
    margin: 8px 0 16px;
}
.admin-pane-subhead h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text);
}
.admin-pane-subhead p {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0;
}
.admin-table-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.admin-empty-cell {
    text-align: center;
    color: var(--text-dim);
    padding: 24px 8px;
}
.admin-analytics-news-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(120, 120, 120, 0.12);
    color: var(--text-dim);
}
.admin-analytics-news-status.is-published {
    color: #1f9d55;
    background: rgba(31, 157, 85, 0.12);
}

/* News engagement table — rows are clickable to open the per-post
   analytics modal. Title text + subtle hover highlight to indicate. */
.admin-analytics-news-row { cursor: pointer; transition: background 0.12s; }
.admin-analytics-news-row:hover { background: var(--surface-2, rgba(255, 255, 255, 0.03)); }
.admin-analytics-news-row:hover .admin-analytics-news-title { color: var(--red, #c41717); }
.admin-analytics-news-title { transition: color 0.12s; }

/* ── Per-post analytics modal ──────────────────────────────────────────
   Full-screen overlay with a centered panel. Click backdrop or press
   Escape to close. Body scroll-locked while open. */
body.admin-modal-open { overflow: hidden; }

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-modal[hidden] { display: none; }
.admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.admin-modal-panel {
    position: relative;
    background: var(--surface, #0f0f0f);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    width: min(880px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 28px 28px 24px;
}
.admin-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 999px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.admin-modal-close svg { width: 16px; height: 16px; }
.admin-modal-close:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--border-strong, rgba(255, 255, 255, 0.18));
}
.admin-modal-head {
    margin-bottom: 18px;
    padding-right: 48px; /* keep title clear of the close button */
}
.admin-modal-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--red, #c41717);
    margin-bottom: 6px;
}
.admin-modal-head h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--text);
    line-height: 1.2;
}
.admin-modal-sub {
    font-size: 12px;
    color: var(--text-dim);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.admin-modal-sub a {
    color: var(--red, #c41717);
    text-decoration: none;
    font-weight: 600;
}
.admin-modal-sub a:hover { text-decoration: underline; }
.admin-modal-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.admin-analytics-grid--inmodal {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 14px;
}
.admin-analytics-chart-card {
    position: relative;
    padding: 18px 20px;
}
.admin-analytics-spark--tall {
    height: 200px;
    margin-top: 12px;
}
.admin-analytics-spark--medium {
    height: 140px;
    margin-top: 12px;
}

/* Subhead layout when paired with inline controls (range buttons) */
.admin-pane-subhead--with-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

/* Geographic breakdown — two ranked bar lists side by side. Country/state
   on the left, scaled bar in the middle, visit count on the right. The
   bar's width is relative to the max in its OWN list (countries vs states
   scale independently) so the chart stays readable at small numbers. */
.admin-geo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.admin-geo-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.admin-geo-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    padding: 7px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.admin-geo-row:first-child { border-top: none; }
.admin-geo-rank {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-align: center;
    opacity: 0.6;
}
.admin-geo-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.admin-geo-toprow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.admin-geo-label {
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.admin-geo-flag {
    height: 13px;
    width: auto;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* Reconciliation line under the section subhead. */
.admin-geo-recon {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
/* Unknown-location bucket row — muted, non-interactive. */
.admin-geo-row--unknown { opacity: 0.7; }
.admin-geo-row--unknown .admin-geo-label { color: var(--text-mid); font-weight: 500; font-style: italic; }
.admin-geo-bar--muted {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* Selectable country rows (master-detail: click to load the right panel). */
.admin-geo-row.is-selectable {
    cursor: pointer;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: -6px;
    margin-right: -6px;
    border-radius: 8px;
    transition: background 0.12s;
}
.admin-geo-row.is-selectable:hover { background: rgba(255, 255, 255, 0.04); }
.admin-geo-row.is-selected {
    background: rgba(196, 23, 23, 0.10);
    box-shadow: inset 2px 0 0 var(--red);
}
.admin-geo-arrow {
    margin-left: 6px;
    color: var(--text-dim);
    font-weight: 700;
    transition: transform 0.12s, color 0.12s;
}
.admin-geo-row.is-selected .admin-geo-arrow { color: var(--red); transform: translateX(2px); }

/* Expandable state rows (city drill-down). */
.admin-geo-row.is-expandable { cursor: pointer; }
.admin-geo-caret {
    font-size: 9px;
    color: var(--text-dim);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.admin-geo-row.is-open .admin-geo-caret { transform: rotate(180deg); }
/* Nested drill-down tree (country → region → city). Each level is an
   .admin-geo-children container holding more .admin-geo-row nodes. */
.admin-geo-children {
    margin-top: 8px;
    padding-left: 6px;
    border-top: 1px dashed var(--border);
    border-left: 1px solid var(--border);
    margin-left: 2px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 8px;
}
/* The class-set display:flex above wins over the [hidden] attribute's UA
   default, so the disclosure would never close. Force it shut when hidden. */
.admin-geo-children[hidden] { display: none !important; }
/* Sub-rows (regions/cities) read a touch smaller + dimmer than top-level. */
.admin-geo-row[data-geo-level="1"] .admin-geo-label,
.admin-geo-row[data-geo-level="2"] .admin-geo-label { font-weight: 500; }
.admin-geo-row[data-geo-level="1"] { font-size: 12.5px; padding: 5px 0; border-top: none; }
.admin-geo-row[data-geo-level="2"] { font-size: 12px; padding: 4px 0; border-top: none; }
.admin-geo-row[data-geo-level="2"] .admin-geo-bar-wrap { height: 4px; }
.admin-geo-value {
    text-align: right;
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.admin-geo-share {
    color: var(--text-dim);
    font-weight: 500;
    font-size: 11px;
    margin-left: 4px;
}
.admin-geo-bar-wrap {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}
.admin-geo-bar {
    height: 100%;
    background: linear-gradient(90deg, rgba(196, 23, 23, 0.55), rgba(196, 23, 23, 0.95));
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* News engagement: one consolidated card. Top row holds inline stats
   + range buttons; chart fills the rest. Layout mirrors the site
   visit cards above but the stats go horizontally instead of stacking. */
.admin-news-overview-card {
    position: relative;
    padding: 22px 24px 18px;
    margin-bottom: 24px;
}
.admin-news-overview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.admin-news-overview-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: baseline;
}
.admin-news-overview-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-news-overview-stat-num {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.admin-news-overview-stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}
.admin-news-overview-stat--lifetime .admin-news-overview-stat-num {
    font-size: 20px;
    color: var(--text-dim);
}
.admin-news-overview-stat--lifetime .admin-news-overview-stat-label {
    color: var(--text-dim);
    opacity: 0.7;
}
.admin-analytics-axis-label {
    fill: var(--text-dim, #71717a);
    font-size: 9px;
    font-family: inherit;
}
.admin-analytics-legend {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-dim);
}
.admin-analytics-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-analytics-legend-swatch {
    display: inline-block;
    width: 14px; height: 2px;
    border-radius: 1px;
}
.admin-analytics-legend-swatch--likes {
    background: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.45) 0 3px,
        transparent 3px 6px
    );
}
.admin-banner strong {
    color: var(--text);
    font-weight: 600;
}
.admin-banner--note {
    border-color: rgba(196, 23, 23, 0.25);
    background: rgba(196, 23, 23, 0.06);
}

.admin-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.admin-quick-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: left;
    transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.admin-quick-card:hover {
    border-color: var(--red);
    transform: translateY(-1px);
}
.admin-quick-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(196, 23, 23, 0.12);
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-quick-icon svg {
    width: 16px;
    height: 16px;
}
.admin-quick-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}
.admin-quick-desc {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ─────────────────────────────────────────
EMBEDDED IFRAME (Quote Generator)
───────────────────────────────────────── */
.admin-frame-wrap {
    flex: 1;
    margin: 0 24px 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.admin-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ─────────────────────────────────────────
COMING SOON
───────────────────────────────────────── */
.admin-coming-soon {
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: 18px;
    padding: 64px 32px;
    text-align: center;
}
.admin-coming-soon-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background: var(--surface-3);
    color: var(--text-mid);
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-coming-soon-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 980px;
    background: rgba(196, 23, 23, 0.12);
    color: var(--red);
    margin-bottom: 14px;
}
.admin-coming-soon h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.admin-coming-soon p {
    font-size: 14px;
    color: var(--text-mid);
    max-width: 480px;
    margin: 0 auto;
}

/* ─────────────────────────────────────────
TABLES
───────────────────────────────────────── */
.admin-filter-group {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2px;
}
.admin-filter {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-mid);
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.15s;
}
.admin-filter:hover {
    color: var(--text);
}
.admin-filter.is-active {
    background: var(--surface-3);
    color: var(--text);
}

.admin-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.admin-table thead {
    background: var(--surface-2);
}
.admin-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.admin-table th.admin-num,
.admin-table td.admin-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.admin-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
    cursor: pointer;
}
.admin-table tbody tr:last-child {
    border-bottom: none;
}
.admin-table tbody tr:hover {
    background: var(--surface-2);
}
.admin-table td {
    padding: 14px 16px;
    color: var(--text);
}
.admin-table td.admin-cell-meta {
    color: var(--text-dim);
    font-size: 12.5px;
}

.admin-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 980px;
    letter-spacing: 0.02em;
}
.admin-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.admin-status--new {
    color: #ff8a3d;
    background: rgba(255, 138, 61, 0.12);
}
.admin-status--in_review {
    color: #3d8bff;
    background: rgba(61, 139, 255, 0.12);
}
.admin-status--quoted {
    color: #1ea54a;
    background: rgba(30, 165, 74, 0.12);
}
.admin-status--closed {
    color: var(--text-dim);
    background: var(--surface-3);
}
.admin-status--sent {
    color: #3d8bff;
    background: rgba(61, 139, 255, 0.12);
}
.admin-status--awaiting {
    color: #ff8a3d;
    background: rgba(255, 138, 61, 0.12);
}
.admin-status--replied {
    color: #1ea54a;
    background: rgba(30, 165, 74, 0.12);
}

.admin-empty {
    padding: 48px 24px;
    text-align: center;
    font-size: 13.5px;
    color: var(--text-dim);
}

.admin-row-action {
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
}
.admin-table tbody tr:hover .admin-row-action {
    color: var(--red);
}

/* ─────────────────────────────────────────
RFQ FORM
───────────────────────────────────────── */
.admin-rfq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .admin-rfq-grid {
        grid-template-columns: 1fr;
    }
}

.admin-rfq-form,
.admin-rfq-history {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 22px 24px;
}

.admin-card-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    color: var(--text);
}

.admin-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}
.admin-field > label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-mid);
    margin-bottom: 6px;
}
.admin-field input[type="text"],
.admin-field input[type="date"],
.admin-field input[type="number"],
.admin-field select,
.admin-field textarea {
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
    outline: none;
    border-color: var(--red);
    background: var(--surface);
}
.admin-field textarea {
    resize: vertical;
    min-height: 70px;
    font-family: inherit;
}
.admin-field select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5L6 7.5L9 4.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.admin-rfq-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-rfq-item {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 80px 32px;
    gap: 6px;
    align-items: center;
}
.admin-rfq-item input {
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
}
.admin-rfq-item input:focus {
    outline: none;
    border-color: var(--red);
    background: var(--surface);
}
.admin-rfq-item-remove {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.admin-rfq-item-remove:hover {
    color: var(--red);
    background: rgba(196, 23, 23, 0.08);
}

.admin-rfq-submit-row {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.admin-btn {
    padding: 10px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-btn--primary {
    background: var(--red);
    color: #fff;
}
.admin-btn--primary:hover {
    background: var(--red-dark);
    transform: translateY(-1px);
}
.admin-btn--ghost {
    background: transparent;
    color: var(--text-mid);
}
.admin-btn--ghost:hover {
    color: var(--text);
    background: var(--surface-3);
}

/* Field label row (label + meta) */
.admin-field-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.admin-field-row > label {
    margin-bottom: 0;
}
.admin-req {
    color: var(--red);
    font-weight: 700;
    margin-left: 2px;
}
.admin-opt {
    color: var(--text-dim);
    font-weight: 400;
    font-size: 11px;
    margin-left: 6px;
}

/* Manufacturer chip grid */
.admin-mfg-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.admin-link-btn--mini {
    padding: 3px 9px;
    font-size: 11px;
    border-radius: 7px;
}

.admin-mfg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
}
.admin-mfg-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-mid);
    text-align: left;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s,
        box-shadow 0.15s;
    min-width: 0;
}
.admin-mfg-chip:hover {
    border-color: var(--border-strong);
    color: var(--text);
}
.admin-mfg-chip-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-mfg-chip-check {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1.5px solid var(--border-strong);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.15s;
}
.admin-mfg-chip-check svg {
    width: 10px;
    height: 10px;
}
.admin-mfg-chip[aria-pressed="true"] {
    background: rgba(196, 23, 23, 0.1);
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 2px 8px -2px rgba(196, 23, 23, 0.25);
}
.admin-mfg-chip[aria-pressed="true"] .admin-mfg-chip-check {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* BOM dropzone */
.admin-bom-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 18px;
    background: var(--surface-2);
    border: 1.5px dashed var(--border-strong);
    border-radius: 11px;
    color: var(--text-mid);
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
    text-align: center;
}
.admin-bom-drop:hover,
.admin-bom-drop:focus-visible {
    border-color: var(--red);
    color: var(--text);
    background: rgba(196, 23, 23, 0.04);
    outline: none;
}
.admin-bom-drop.is-dragover {
    border-style: solid;
    border-color: var(--red);
    background: rgba(196, 23, 23, 0.1);
    color: var(--red);
}
.admin-bom-drop.has-file {
    border-style: solid;
    border-color: rgba(30, 165, 74, 0.5);
    background: rgba(30, 165, 74, 0.06);
    color: #1ea54a;
}
.admin-bom-drop.has-file .admin-bom-drop-icon {
    color: #1ea54a;
}
.admin-bom-drop-icon {
    color: var(--text-dim);
    transition: color 0.15s;
}
.admin-bom-drop:hover .admin-bom-drop-icon {
    color: var(--red);
}
.admin-bom-drop-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}
.admin-bom-drop.has-file .admin-bom-drop-title {
    color: #1ea54a;
}
.admin-bom-drop-sub {
    font-size: 12px;
    color: var(--text-dim);
}
.admin-bom-drop.has-file .admin-bom-drop-sub {
    color: var(--text-mid);
}
.admin-bom-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-mid);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s;
}
.admin-bom-clear:hover {
    color: var(--red);
    border-color: var(--red);
}

.admin-bom-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: #1ea54a;
}
.admin-bom-status::before {
    content: "✓";
    font-size: 13px;
}

.admin-bom-divider {
    display: flex;
    align-items: center;
    margin: 12px 0;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.admin-bom-divider::before,
.admin-bom-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.admin-bom-divider span {
    padding: 0 12px;
}

/* RFQ history list */
.admin-rfq-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-rfq-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 11px;
}
.admin-rfq-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.admin-rfq-row-mfg {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.admin-rfq-row-project {
    font-size: 12.5px;
    color: var(--text-mid);
}

/* ─────────────────────────────────────────
ORDER DETAIL MODAL
───────────────────────────────────────── */
.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.admin-modal.is-open {
    display: flex;
}
.admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.admin-modal-dialog {
    position: relative;
    width: 100%;
    /* Bumped from 560 to 720 — the order detail now fits a 5-step pipeline,
       a min/max lead-time row, and an attachment upload form, none of
       which fit comfortably in a sub-600 column. */
    max-width: 720px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow-lg);
}
.admin-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--text-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.admin-modal-close:hover {
    background: var(--surface-3);
    color: var(--text);
}

.admin-detail-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 8px;
}
.admin-detail-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.admin-detail-sub {
    font-size: 13px;
    color: var(--text-mid);
    margin-bottom: 18px;
}
.admin-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    background: var(--surface-2);
    border-radius: 10px;
}
.admin-detail-cell-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.admin-detail-cell-value {
    font-size: 13.5px;
    color: var(--text);
    font-weight: 500;
}
.admin-detail-items {
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px;
}
.admin-detail-items li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.admin-detail-items li:last-child {
    border-bottom: none;
}
.admin-detail-items .name {
    color: var(--text);
}
.admin-detail-items .qty {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.admin-detail-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ─────────────────────────────────────────
RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 880px) {
    .admin-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }
    .admin-sidebar {
        display: none;
    }
    .admin-pane {
        padding: 22px 18px 48px;
    }
    .admin-pane-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .admin-pane--frame .admin-pane-header {
        padding: 16px 18px;
    }
    .admin-frame-wrap {
        margin: 0 18px 18px;
    }
}

/* ── Phase C/D additions ───────────────────────────────────────────────── */

/* Auth gate (shown until session verified) */
.admin-gate {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg, #0e0e10);
    z-index: 999;
    padding: 24px;
}
/* `display: flex` / `display: grid` above defeat the [hidden] attribute that
   admin.js toggles to swap between the gate and shell. Force them hidden. */
.admin-gate[hidden],
.admin-shell[hidden] {
    display: none !important;
}
.admin-gate-card {
    max-width: 460px;
    width: 100%;
    background: var(--surface, #18181b);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 14px;
    padding: 28px 30px;
    text-align: center;
}
.admin-gate-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-light, #aeaeb2);
    margin-bottom: 6px;
}
.admin-gate-title {
    font-size: 22px;
    margin: 0 0 8px;
    color: var(--text, #fff);
}
.admin-gate-msg {
    color: var(--gray-light, #aeaeb2);
    margin: 0 0 18px;
    line-height: 1.5;
}

/* Pipeline mini-indicator (5 dots, one per stage) on order rows */
.pipeline-dots {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}
.pipeline-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gray-dark, #3a3a3c);
    border: 1px solid var(--gray-mid, #6e6e73);
    transition: background 0.15s, border-color 0.15s;
}
.pipeline-dot.is-filled {
    background: var(--red, #c41717);
    border-color: var(--red, #c41717);
}

/* Stage checkoff list inside the order detail modal */
.stage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 22px;
}
.stage-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.stage-row:hover {
    border-color: var(--gray-mid, #6e6e73);
}
.stage-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--red, #c41717);
    margin: 0;
}
.stage-label {
    font-weight: 500;
    color: var(--text, #fff);
}
.stage-date {
    font-size: 13px;
    color: var(--gray-light, #aeaeb2);
    font-variant-numeric: tabular-nums;
}

/* Order detail modal head */
.order-detail-head {
    margin-bottom: 22px;
}
.order-detail-head h2 {
    margin: 4px 0 8px;
    font-size: 22px;
    color: var(--text, #fff);
}
.order-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--gray-light, #aeaeb2);
    font-size: 13px;
}

/* Card variant for chart container (no internal table) */
.admin-card {
    background: var(--surface, #18181b);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 18px 0;
}
.admin-card--chart {
    height: 360px;
    display: flex;
    flex-direction: column;
}
.admin-card--chart canvas {
    flex: 1;
    min-height: 0;
}

/* Payment record form in the order modal */
/* Flex-wrap layout — same change pattern as the attachment form. The old
   5-column grid (110/1fr/140/1.5fr/auto) overflowed the dialog when the
   Notes column expanded, pushing the "Record payment" button off the right
   edge. flex-wrap with sensible flex-basis values reflows cleanly. */
.admin-pay-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed var(--border, #2a2a2c);
    border-radius: 8px;
}
.admin-pay-form input,
.admin-pay-form select {
    padding: 8px 10px;
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 6px;
    background: var(--bg, #0e0e10);
    color: var(--text, #fff);
    font: inherit;
    box-sizing: border-box;
}
.admin-pay-form input[name="amount"]      { flex: 0 1 110px; }
.admin-pay-form select[name="kind"]       { flex: 0 1 110px; }
.admin-pay-form input[name="received_at"] { flex: 0 1 145px; }
.admin-pay-form input[name="notes"]       { flex: 1 1 200px; min-width: 160px; }
.admin-pay-form button[type="submit"]     { flex: 0 0 auto; }

/* Attachments — admin-side list + upload form. Mirrors the payment table
   pattern visually so the order modal feels coherent. */
.admin-att-list {
    margin-top: 6px;
    margin-bottom: 12px;
}
.admin-att-list .admin-empty {
    font-size: 12.5px;
    color: var(--text-mid, #888);
    padding: 10px 0;
}
.admin-att-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--surface, #1a1a1c);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}
.admin-att-kind {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
.admin-att-kind--quote       { background: rgba(80, 130, 200, 0.16); color: #7aaedf; }
.admin-att-kind--unsigned_po { background: rgba(220, 150, 60, 0.16); color: #f0b96a; }
.admin-att-kind--signed_po   { background: rgba(80, 160, 110, 0.16); color: #6cc294; }
.admin-att-kind--plans_specs { background: rgba(196, 23, 23, 0.16); color: #ff6b7c; }
.admin-att-name {
    flex: 1;
    color: var(--text, #fff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-att-size {
    color: var(--text-mid, #888);
    font-size: 12px;
    flex-shrink: 0;
}
.admin-att-action {
    background: transparent;
    border: 1px solid var(--border, #2a2a2c);
    color: var(--text, #fff);
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s;
}
.admin-att-action:hover {
    border-color: var(--red, #c8102e);
    background: rgba(200, 16, 46, 0.08);
}
.admin-att-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-mid, #888);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.admin-att-delete:hover {
    color: var(--red, #c8102e);
    border-color: var(--red, #c8102e);
    background: rgba(200, 16, 46, 0.08);
}
/* Flex-wrap so it gracefully reflows on narrow modals (was a 4-col grid
   that crushed the "Quote (sent to customer)" dropdown into a column too
   thin to fit its label). Each field has its own little label above for
   clarity now. */
.admin-att-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px dashed var(--border, #2a2a2c);
    border-radius: 8px;
}
.admin-att-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 130px;
}
.admin-att-form-field--grow {
    flex: 1 1 220px;
    min-width: 220px;
}
.admin-att-form-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-mid, #888);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.admin-att-form select,
.admin-att-form input[type="file"] {
    padding: 7px 10px;
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 6px;
    background: var(--bg, #0e0e10);
    color: var(--text, #fff);
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}
.admin-att-form button[type="submit"] {
    align-self: flex-end;
    flex-shrink: 0;
}
.admin-att-status {
    font-size: 12px;
    color: var(--text-mid, #888);
    flex-basis: 100%;
}
.admin-att-status.is-ok   { color: #16a34a; }
.admin-att-status.is-err  { color: var(--red, #c8102e); }
.admin-att-status.is-busy { color: var(--text-mid, #888); }

/* Lead-time range — extra dash separator between min and max inputs */
.lead-time-dash {
    color: var(--text-mid, #888);
    font-size: 14px;
    user-select: none;
}

/* Editable items table — qty/cost/price are inputs that recompute the
   profit column + totals row live as the admin types. Keep the input chrome
   minimal (transparent bg, faint border) so the table still reads as a
   table, not a giant form. */
.admin-items-table .item-cell {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 5px 7px;
    color: var(--text, #fff);
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
}
.admin-items-table .item-cell--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    max-width: 100px;
    margin-left: auto;
}
.admin-items-table .item-cell:hover {
    border-color: var(--border, #2a2a2c);
}
.admin-items-table .item-cell:focus {
    outline: none;
    border-color: var(--red, #c8102e);
    background: var(--bg, #0e0e10);
}
/* Spinner buttons are visually noisy; trust the user can type. */
.admin-items-table .item-cell--num::-webkit-outer-spin-button,
.admin-items-table .item-cell--num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.admin-items-table .items-totals td {
    font-weight: 600;
    border-top: 2px solid var(--border, #2a2a2c);
    padding-top: 10px;
    color: var(--text, #fff);
    font-variant-numeric: tabular-nums;
}
.admin-items-table .items-totals td[data-items-total-profit] { color: #6cc294; }

.admin-items-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 18px;
}
.admin-items-status {
    font-size: 12.5px;
    color: var(--text-mid, #888);
}
.admin-items-status.is-ok   { color: #16a34a; }
.admin-items-status.is-err  { color: var(--red, #c8102e); }
.admin-items-status.is-busy { color: var(--text-mid, #888); }

/* Internal-only sections (markup) get a tiny tag in the title so admin
   knows the field is never customer-visible. */
.admin-internal-title { display: flex; align-items: center; gap: 8px; }
.admin-internal-tag {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(220, 150, 60, 0.16);
    color: #f0b96a;
}

.markup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.markup-input {
    width: 110px;
    padding: 8px 10px;
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 6px;
    background: var(--bg, #0e0e10);
    color: var(--text, #fff);
    font: inherit;
    font-variant-numeric: tabular-nums;
}
.markup-suffix {
    color: var(--text-mid, #888);
    margin-right: 4px;
    font-size: 13px;
}
.markup-status {
    font-size: 12.5px;
    color: var(--text-mid, #888);
    margin-left: 4px;
}
.markup-status.is-ok   { color: #16a34a; }
.markup-status.is-err  { color: var(--red, #c8102e); }
.markup-status.is-busy { color: var(--text-mid, #888); }
.markup-hint {
    font-size: 11.5px;
    color: var(--text-mid, #888);
    line-height: 1.45;
    margin-bottom: 18px;
    padding-left: 2px;
}

/* "Generate BOM PDF" button row above the items table. */
.bom-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.bom-action-hint {
    font-size: 12px;
    color: var(--text-mid, #888);
    flex: 1 1 200px;
    min-width: 200px;
}

/* Per-row delete button in the payments table. Subtle until hovered, then
   hints at destructiveness with red. The actual deletion goes through a
   confirm() dialog so the visual cue is just a hint, not a warning. */
.admin-pay-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-mid, #888);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.admin-pay-delete:hover {
    color: var(--red, #c8102e);
    border-color: var(--red, #c8102e);
    background: rgba(200, 16, 46, 0.08);
}
.admin-pay-delete:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Lead time editor row (admin order modal). Tight horizontal layout that
   collapses to a 2-row layout on narrow screens. */
.lead-time-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.lead-time-amount {
    width: 90px;
    padding: 8px 10px;
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 6px;
    background: var(--bg, #0e0e10);
    color: var(--text, #fff);
    font: inherit;
}
.lead-time-unit {
    padding: 8px 10px;
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 6px;
    background: var(--bg, #0e0e10);
    color: var(--text, #fff);
    font: inherit;
}
.lead-time-status {
    font-size: 12.5px;
    color: var(--text-mid, #888);
}
.lead-time-status.is-ok  { color: #16a34a; }
.lead-time-status.is-err { color: var(--red, #c8102e); }
.lead-time-status.is-busy { color: var(--text-mid, #888); }

/* Computed estimated-ship readout — sits just under the lead-time inputs,
   slightly de-emphasized but `<strong>` inside is highlighted. */
.lead-time-result {
    font-size: 13px;
    color: var(--text-mid, #888);
    padding: 10px 12px;
    border: 1px dashed var(--border, #2a2a2c);
    border-radius: 6px;
    margin-bottom: 18px;
}
.lead-time-result strong {
    color: var(--text, #fff);
    font-variant-numeric: tabular-nums;
}

/* Native file-input "Choose File" button — by default it's a bright OS
   widget that clashes with the dark admin theme. Restyle it to match the
   surrounding inputs. Covers both the modern spec (::file-selector-button)
   and the WebKit-prefixed legacy form. */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
    margin-right: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--surface-2);
    border-color: var(--red);
    color: var(--red);
}

/* ── BOM customize modal form ────────────────────────────────────────── */
.bom-custom-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}
.bom-custom-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bom-custom-field > span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mid);
}
.bom-custom-field input,
.bom-custom-field textarea {
    width: 100%;
    padding: 9px 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.12s, background 0.12s;
}
.bom-custom-field textarea {
    resize: vertical;
    min-height: 56px;
    line-height: 1.4;
}
.bom-custom-field input:focus,
.bom-custom-field textarea:focus {
    outline: none;
    border-color: var(--red);
    background: var(--surface-3);
}
.bom-custom-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 4px;
}

/* ── News table + form ─────────────────────────────────────────────── */
.admin-news-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}
.admin-news-slug {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    color: var(--text-mid);
    margin-top: 2px;
}
.admin-news-status {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
}
.admin-news-status.is-published {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.25);
}
.admin-news-status.is-draft {
    color: var(--text-mid);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
}
.news-form-hint {
    font-size: 10px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-dim);
    margin-left: 6px;
}
.news-slug-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.news-slug-prefix {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    color: var(--text-mid);
    flex-shrink: 0;
}
.news-body-textarea {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
}

/* ── News media manager ──────────────────────────────────────────────── */
.news-media-manager {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    background: var(--surface-2);
}
.news-media-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.news-media-empty {
    font-size: 12px;
    color: var(--text-mid);
    padding: 14px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 8px;
}
.news-media-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.news-media-thumb {
    width: 64px;
    height: 48px;
    background-color: var(--surface-3);
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
.news-media-thumb.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mid);
}
.news-media-thumb.is-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}
.news-media-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.news-media-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.news-media-type {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--red);
}
.news-media-url {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    color: var(--text-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-media-controls {
    display: flex;
    gap: 4px;
}
.news-media-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-mid);
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.news-media-btn:hover:not(:disabled) {
    color: var(--text);
    border-color: var(--border-strong);
}
.news-media-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.news-media-btn--danger:hover {
    color: var(--red);
    border-color: var(--red);
}
.news-media-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.news-media-status {
    font-size: 12px;
    color: var(--text-mid);
    min-height: 14px;
}
.news-media-status.is-err  { color: var(--red); }
.news-media-status.is-ok   { color: #16a34a; }
.news-media-status.is-busy { color: var(--text-mid); }

/* Order number badge in the admin orders table — monospace + slight tint
   so the RPQddmmyy-NN code reads as a code rather than prose. */
.admin-order-num {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: rgba(196, 23, 23, 0.08);
    border: 1px solid rgba(196, 23, 23, 0.18);
    padding: 3px 7px;
    border-radius: 5px;
    letter-spacing: -0.01em;
}

/* ── Products (catalog) ──────────────────────────────────────────────── */

.admin-products {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.admin-products-cat {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}
.admin-products-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.admin-products-cat-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text);
}
.admin-products-cat-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-mid);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.admin-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    padding: 16px;
}
.admin-product-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, transform 0.15s;
    cursor: pointer;
}
.admin-product-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.admin-product-thumb {
    aspect-ratio: 4 / 3;
    background: var(--surface-3);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--border);
}
.admin-product-thumb.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mid);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.admin-product-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.admin-product-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.admin-product-spec-count {
    font-size: 11px;
    color: var(--text-mid);
    margin-top: auto;
    padding-top: 6px;
}

/* ── Product edit modal form ─────────────────────────────────────────── */

.product-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.product-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.product-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.product-form-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mid);
}
.product-form-input,
.product-form-select,
.product-form-textarea {
    width: 100%;
    padding: 9px 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13.5px;
    font-family: inherit;
    transition: border-color 0.12s, background 0.12s;
}
.product-form-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}
.product-form-input:focus,
.product-form-select:focus,
.product-form-textarea:focus {
    outline: none;
    border-color: var(--red);
    background: var(--surface-3);
}
.product-form-help {
    font-size: 12px;
    color: var(--text-mid);
    margin-top: 2px;
}
.product-image-block {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.product-image-preview {
    width: 130px;
    aspect-ratio: 4 / 3;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: var(--surface-2);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mid);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.product-image-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.product-image-status {
    font-size: 12px;
    color: var(--text-mid);
}
.product-image-status.is-err  { color: var(--red); }
.product-image-status.is-ok   { color: #16a34a; }
.product-image-status.is-busy { color: var(--text-mid); }

/* Specs editor: stack of rows, each with name + value + options + remove. */
.product-specs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    background: var(--surface-2);
}
.product-specs-empty {
    font-size: 12px;
    color: var(--text-mid);
    padding: 6px 2px;
}
.product-spec-row {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 1.4fr auto;
    gap: 8px;
    align-items: start;
}
.product-spec-row .product-form-input {
    padding: 7px 9px;
    font-size: 12.5px;
}
.product-spec-remove {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-mid);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    align-self: center;
}
.product-spec-remove:hover {
    color: var(--red);
    border-color: var(--red);
}

.product-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}
.product-form-actions .admin-btn--danger {
    background: transparent;
    color: var(--red);
    border: 1px solid var(--red);
    margin-right: auto;
}
.product-form-actions .admin-btn--danger:hover {
    background: var(--red);
    color: #fff;
}

/* ─────────────────────────────────────────
CUSTOMERS — roster table + helpers + detail modal
───────────────────────────────────────── */

/* Generic small helpers reused by the customers pane. */
.admin-muted { color: var(--text-dim); }
.admin-note {
    font-size: 12.5px;
    color: var(--text-mid);
    background: rgba(196, 23, 23, 0.08);
    border: 1px solid rgba(196, 23, 23, 0.22);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.admin-pill--open {
    background: rgba(196, 23, 23, 0.16);
    color: var(--red);
}
.admin-pill--role {
    margin-left: 6px;
    vertical-align: 1px;
}

/* Search box in the pane header. */
.admin-search-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px 12px;
    transition: border-color 0.12s;
}
.admin-search-box:focus-within { border-color: var(--red); }
.admin-search-box svg { width: 15px; height: 15px; color: var(--text-dim); flex-shrink: 0; }
.admin-search-box input {
    border: none;
    background: none;
    outline: none;
    color: var(--text);
    font-size: 13px;
    width: 200px;
}
.admin-search-box input::placeholder { color: var(--text-dim); }

/* Sortable column headers. */
.admin-customers-table th.is-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.12s;
}
.admin-customers-table th.is-sortable:hover { color: var(--text); }
.admin-customers-table th.is-sortable.is-active { color: var(--red); }
.admin-customers-table th.is-sortable.is-active::after {
    content: '▾';
    font-size: 9px;
    margin-left: 5px;
    vertical-align: 1px;
}
.admin-customers-table th.is-sortable.is-active.is-asc::after { content: '▴'; }
.admin-customers-table tbody tr { cursor: pointer; }
.admin-customers-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* Name cell: round monogram avatar + name. */
.cust-name-cell { display: flex; align-items: center; gap: 10px; }
.cust-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(196, 23, 23, 0.85), var(--red-dark));
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cust-name { font-weight: 600; color: var(--text); }

/* ── Customer detail modal ── */
.admin-modal--customer { z-index: 150; }
.admin-modal--customer[hidden] { display: none; }
.admin-modal--customer:not([hidden]) { display: flex; }
.admin-modal-panel--customer { width: min(720px, calc(100vw - 32px)); }

/* The news-analytics modal toggles via the [hidden] attribute, but a later
   `.admin-modal { display:none }` rule (the order-detail modal block) wins the
   cascade and would keep it invisible. These explicit, !important rules force
   correct show/hide regardless of source order. */
.admin-modal[data-news-analytics-modal] { z-index: 160; }
.admin-modal[data-news-analytics-modal][hidden] { display: none !important; }
.admin-modal[data-news-analytics-modal]:not([hidden]) { display: flex !important; }

.cust-modal-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding-right: 48px;
}
.cust-modal-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(196, 23, 23, 0.85), var(--red-dark));
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cust-modal-headtext h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 2px 0 5px;
    color: var(--text);
    line-height: 1.15;
}
.cust-modal-sub { font-size: 12.5px; color: var(--text-dim); }
.cust-modal-sub a { color: var(--text-mid); text-decoration: none; }
.cust-modal-sub a:hover { color: var(--red); }
.cust-status { text-transform: capitalize; }

.cust-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}
.cust-field { background: var(--surface-2); padding: 12px 14px; }
.cust-field-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
    margin-bottom: 5px;
}
.cust-field-value { font-size: 13.5px; color: var(--text); font-weight: 500; word-break: break-word; }

.cust-projects-block { margin-bottom: 18px; }
.cust-projects-block .admin-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.cust-projects { display: flex; flex-direction: column; gap: 7px; }
.cust-project-row {
    display: grid;
    grid-template-columns: 84px 1fr auto auto auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    text-align: left;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: border-color 0.12s, background 0.12s;
}
.cust-project-row:hover { border-color: var(--red); background: rgba(196, 23, 23, 0.05); }
.cust-project-num { font-weight: 700; color: var(--text); }
.cust-project-stage { color: var(--text-mid); }
.cust-project-meta { color: var(--text-dim); font-size: 12px; }
.cust-project-date { color: var(--text-dim); font-size: 12px; }
.cust-project-total { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .cust-project-row { grid-template-columns: 1fr auto; row-gap: 4px; }
    .cust-project-meta, .cust-project-date { display: none; }
    .admin-search-box input { width: 130px; }
}