/* ===========================================================
   Admin Panel — theme tokens + chrome
   -----------------------------------------------------------
   Every colour in this file (and in page-builder.css /
   page-preview.css) resolves through a token defined below,
   and every one of those tokens now resolves through a BRAND
   token from assets/brand.css. A literal hex in this file is a
   bug by definition — it is a colour that cannot follow the
   brand and cannot follow the theme.

   What changed with the rebrand: the light/dark pairs that used
   to be spelled out twice here are mostly defined ONCE now.
   assets/brand.css already flips --ink/--paper/--grey/--line/
   --stone per theme, so "--admin-surface: var(--paper)" is
   correct in both. Only tokens that are genuinely
   theme-specific — the overlay washes, which tint with black on
   light and white on dark — still need a second definition.

   Load order (admin/partials/header.php): bootstrap.min.css,
   then brand.css, then this file.

   TEXT TIERS AND CONTRAST
   The four text tiers stay visually distinct rather than
   collapsing onto the 4.5:1 floor, and each is pinned against
   the WORST backdrop it lands on — the --grey band, in both
   themes. Measured (light / dark, against --grey):

       --admin-text          16.75 / 15.76
       --admin-text-soft      9.00 / 10.44
       --admin-text-muted     7.21 /  9.10
       --admin-text-faint     5.07 /  8.49   (= --stone)
       --admin-placeholder    3.19 /  5.70   (decorative icons, 3:1)

   (2026-10-15 palette.) Light mode is still the tight one: --stone
   is 5.07:1 on the grey canvas. Re-check before changing any
   percentage below.
   =========================================================== */

/* ---- Structural (theme-independent) ---- */
:root {
    --sidebar-width: 240px;
    --topbar-height: 56px;
    --font-admin: var(--font-body);

    /* Accent. The panel's accent IS the brand's actionable colour;
       --admin-accent-rgb drives every translucent accent tint below, so
       overriding just these two (see BRAND_DASHBOARD_ACCENT in
       admin/partials/header.php) still recolours the whole panel for a
       white-label install. */
    --admin-accent: var(--cobalt);
    --admin-accent-rgb: 31, 95, 224;   /* --cobalt (#1F5FE0) */
}
:root[data-bs-theme="dark"] {
    --admin-accent-rgb: 37, 99, 235;   /* dark --cobalt (#2563EB) */
}

/* ---- Semantic mapping onto the brand tokens ----
   Defined once; the brand tokens underneath flip per theme. */
:root {
    --sidebar-bg: var(--paper);
    --sidebar-border: var(--line);
    --sidebar-brand-color: var(--ink);
    --sidebar-link-color: var(--admin-text-muted);
    --sidebar-link-hover: var(--ink);
    --sidebar-link-active: var(--ink);
    --sidebar-sublink-color: var(--admin-text-faint);
    --sidebar-sublink-hover: var(--ink);
    --sidebar-muted: var(--admin-text-faint);

    --topbar-bg: var(--paper);
    --topbar-border: var(--line);
    --topbar-icon: var(--admin-text-faint);
    --topbar-icon-hover: var(--ink);

    --admin-surface: var(--paper);
    --admin-surface-alt: var(--grey);
    --admin-canvas-bg: var(--grey);
    --admin-border: var(--line);
    --admin-border-strong: color-mix(in srgb, var(--line) 86%, var(--ink));
    --admin-border-hover: color-mix(in srgb, var(--line) 70%, var(--ink));
    --admin-border-hover-strong: color-mix(in srgb, var(--line) 60%, var(--ink));

    --admin-heading: var(--ink);
    --admin-text: var(--ink);
    --admin-text-soft: color-mix(in srgb, var(--ink) 80%, var(--paper));
    --admin-text-muted: color-mix(in srgb, var(--ink) 74%, var(--paper));
    --admin-text-faint: var(--stone);
    --admin-placeholder-icon: color-mix(in srgb, var(--stone) 78%, var(--paper));

    /* Accent as *text*. --cobalt-text is already the theme-correct
       readable form of the accent (lifted on dark), so this no longer
       needs its own light/dark derivation. A white-label accent set via
       BRAND_DASHBOARD_ACCENT still gets the old color-mix treatment,
       since we cannot know its luminance ahead of time. */
    --admin-accent-text: var(--cobalt-text);

    /* Cards and panels carry the brand's soft shadows (brand.css). Kept
       as tokens so one edit here retunes depth across ~79 call sites. */
    --admin-shadow-lg: var(--shadow-lg);
    --admin-shadow-card: var(--shadow);
    --admin-shadow-sidebar: none;

    /* Badge tokens. Retained for any markup still using them; the state
       vocabulary in brand.css (.state / .state-*) is what actual status
       chips use now — see admin/lib/state.php. */
    --admin-badge-bg: var(--grey);
    --admin-badge-color: var(--admin-text-muted);
    --admin-badge-alt-bg: var(--grey);
    --admin-badge-alt-color: var(--admin-text-faint);
}

/* ---- Theme-specific only ----
   These cannot be expressed through a flipping brand token: a wash
   tints with black on light and with white on dark, and the sidebar
   scrim needs different opacity over a light vs dark page. */
:root {
    --sidebar-submenu-bg: rgba(0, 0, 0, 0.03);
    --sidebar-overlay-bg: rgba(0, 0, 0, 0.35);

    --admin-overlay-weak: rgba(0, 0, 0, 0.025);
    --admin-overlay: rgba(0, 0, 0, 0.04);
    --admin-overlay-strong: rgba(0, 0, 0, 0.07);
    --admin-inset: rgba(0, 0, 0, 0.03);

    /* Bootstrap's .btn-close is a dark glyph — correct as-is on light. */
    --admin-btn-close-filter: none;
}

:root[data-bs-theme="dark"] {
    --sidebar-submenu-bg: rgba(0, 0, 0, 0.15);
    --sidebar-overlay-bg: rgba(0, 0, 0, 0.55);

    --admin-overlay-weak: rgba(255, 255, 255, 0.03);
    --admin-overlay: rgba(255, 255, 255, 0.05);
    --admin-overlay-strong: rgba(255, 255, 255, 0.08);
    --admin-inset: rgba(0, 0, 0, 0.12);

    --admin-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---- Bootstrap variable overrides ----
   brand.css already re-points the bulk of Bootstrap's variables at the
   brand tokens for every surface. These are the few the admin panel
   needs beyond that, and they are theme-independent now because the
   tokens they reference flip on their own. */
:root, :root[data-bs-theme="dark"] {
    --bs-body-bg: var(--grey);
    --bs-body-color: var(--admin-text);
    --bs-secondary-bg: var(--grey);
    --bs-tertiary-bg: var(--grey);
    --bs-card-bg: var(--admin-surface);
    --bs-border-color: var(--line);
    --bs-border-color-translucent: var(--line);
    --bs-input-bg: var(--admin-surface);
}

/* ---- Base ---- */
body.admin-body {
    font-family: var(--font-admin);
    font-size: 0.875rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-admin);
}

/* ---- Login Page ---- */
.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.admin-login-page > * {
    width: 100%;
}

.admin-login-page .card {
    border: 1px solid var(--admin-border-strong);
    box-shadow: var(--admin-shadow-lg);
}

.admin-login-page h2 {
    font-size: 1.4rem;
    font-weight: 600;
}

/* Theme toggle on the login page — no topbar to hang it off, so it floats. */
.admin-login-theme {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* ---- Admin Layout ---- */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.admin-sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform 0.25s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Sidebar brand */
.sidebar-brand {
    padding: 1.1rem 1.25rem 1rem;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--sidebar-brand-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.sidebar-brand-link:hover {
    color: var(--sidebar-brand-color);
}

.sidebar-brand-link > i {
    color: var(--admin-accent);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.sidebar-brand-logo {
    max-height: 36px;
    max-width: 160px;
    object-fit: contain;
}

/* Sidebar nav */
.sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
}

.sidebar-link,
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin: 1px 0.625rem;
    width: calc(100% - 1.25rem);
    border-radius: var(--radius);
    color: var(--sidebar-link-color);
    text-decoration: none;
    background: none;
    border: none;
    font-family: var(--font-admin);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    text-align: left;
    line-height: 1.4;
}

.sidebar-link:hover,
.sidebar-group-toggle:hover {
    color: var(--sidebar-link-hover);
    background: var(--admin-overlay);
}

.sidebar-link.active {
    color: var(--sidebar-link-active);
    background: var(--sidebar-active-bg, rgba(var(--admin-accent-rgb), 0.10));
    color: var(--admin-accent-text);
    font-weight: 600;
}

.sidebar-link > i,
.sidebar-group-toggle > i:first-child {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

/* Sidebar group (collapsible) */
.sidebar-chevron {
    transition: transform 0.2s ease;
    font-size: 0.65rem;
    margin-left: auto;
    flex-shrink: 0;
}

.sidebar-group.is-open .sidebar-chevron {
    transform: rotate(180deg);
}

.sidebar-group-toggle.active {
    color: var(--sidebar-sublink-hover);
}

.sidebar-submenu {
    display: none;
    background: var(--sidebar-submenu-bg);
    padding: 0.2rem 0;
}

.sidebar-submenu.show {
    display: block;
}

.sidebar-sublink {
    display: block;
    padding: 0.4rem 0.75rem 0.4rem 2.35rem;
    margin: 1px 0.625rem;
    border-radius: var(--radius);
    color: var(--sidebar-sublink-color);
    text-decoration: none;
    font-size: 0.825rem;
    font-weight: 500;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.sidebar-sublink:hover {
    color: var(--sidebar-sublink-hover);
    background: var(--admin-overlay);
}

.sidebar-sublink.active {
    color: var(--sidebar-link-active);
    background: rgba(var(--admin-accent-rgb), 0.10);
    color: var(--admin-accent-text);
    font-weight: 600;
}

/* Sidebar footer */
.sidebar-footer {
    flex-shrink: 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-link-external {
    opacity: 0.65;
}

.sidebar-link-external:hover {
    opacity: 1;
}

.sidebar-version {
    font-size: .65rem;
    color: var(--sidebar-muted);
    text-align: center;
    padding: .3rem 0 .15rem;
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--sidebar-overlay-bg);
    z-index: 1039;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.active {
    display: block;
}

/* ---- Main wrapper ---- */
.admin-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* ---- Top bar ---- */
.admin-topbar {
    position: sticky;
    top: 0;
    height: var(--topbar-height);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 0.75rem;
    z-index: 900;
    flex-shrink: 0;
}

.topbar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--topbar-icon);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius);
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.topbar-toggle:hover {
    color: var(--topbar-icon-hover);
    background: var(--admin-overlay-strong);
}

.topbar-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--admin-heading);
    letter-spacing: -0.01em;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.topbar-username {
    font-size: 0.8rem;
    color: var(--admin-text-muted);
}

/* ---- Theme toggle (topbar + login page) ---- */
.theme-toggle-btn {
    background: none;
    border: none;
    color: var(--admin-text-faint);
    font-size: 0.975rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius);
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.theme-toggle-btn:hover,
.theme-toggle-btn[aria-expanded="true"] {
    color: var(--topbar-icon-hover);
    background: var(--admin-overlay-strong);
}

.theme-toggle-menu {
    min-width: 9rem;
    font-size: 0.825rem;
}

.theme-toggle-menu .dropdown-item {
    display: flex;
    align-items: center;
}

/* The tick marks the stored preference, not the resolved theme — "Auto" stays
   ticked whichever way the OS currently resolves it. */
.theme-toggle-check {
    visibility: hidden;
    font-size: 0.7rem;
}

.theme-toggle-menu .dropdown-item.active .theme-toggle-check {
    visibility: visible;
}

.theme-toggle-menu .dropdown-item.active {
    background: var(--admin-overlay);
    color: inherit;
}

/* ---- Persistent per-page save button (topbar-actions) ---- */
.topbar-save-btn {
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.topbar-save-btn.is-dirty {
    background-color: var(--admin-accent);
    border-color: var(--admin-accent);
    color: #fff;                          /* on a solid accent fill in both themes */
    box-shadow: 0 0 0 3px rgba(var(--admin-accent-rgb), 0.25);
    animation: topbar-save-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .topbar-save-btn.is-dirty { animation: none; }
}

@keyframes topbar-save-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--admin-accent-rgb), 0.25); }
    50%      { box-shadow: 0 0 0 5px rgba(var(--admin-accent-rgb), 0.12); }
}

.topbar-logout {
    color: var(--admin-text-faint);
    text-decoration: none;
    font-size: 0.975rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius);
    transition: color 0.15s ease, background 0.15s ease;
    line-height: 1;
}

.topbar-logout:hover {
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), 0.12);
}

/* ---- Content area ---- */
.admin-content {
    flex: 1;
    padding: 1.75rem 2rem 2.5rem;
}

/* ---- Page headings ---- */
.admin-content h1 {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--admin-heading);
}

/* ---- Cards ---- */
.card {
    border-color: var(--admin-border) !important;
}

.card {
    border-radius: var(--radius-lg);
    box-shadow: var(--admin-shadow-card);
}

.card-header {
    border-bottom-color: var(--admin-border) !important;
    background: transparent !important;
    font-weight: 600;
}

.card-footer {
    border-top-color: var(--admin-border) !important;
    background: var(--admin-overlay-weak) !important;
}

/* ---- Dashboard counts ----
   One ruled row inside a card: each count is a link with its number and
   label inline. Wraps to two or three per line on narrower screens. */
.count-row { display: flex; flex-wrap: wrap; }
.count-item {
    flex: 1 1 160px;
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--admin-border);
    border-bottom: 1px solid var(--admin-border);
    margin-bottom: -1px;
    color: var(--admin-text-muted);
    text-decoration: none;
    transition: background-color .15s ease;
}
.count-item:last-child { border-right: 0; }
.count-item:hover { background: var(--admin-overlay); color: var(--admin-heading); }
.count-value { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1; color: var(--admin-heading); }
.count-label { font-size: .875rem; font-weight: 500; }
.count-item.is-attention .count-value { color: var(--admin-accent-text); }

/* ---- Dashboard setup checklist (admin/partials/onboarding-checklist.php) ----
   Collapsed by default. The header sits on a wash of the admin accent so it
   reads as the one thing on the dashboard asking for action (and follows an
   agency's accent on a white-labelled admin); the steps open onto plain
   surface below it. Progress is one bar segment per step, so the collapsed
   card still shows how much is left. The next step is the only filled
   button once the list is open. */
.setup-card {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--admin-accent) 32%, var(--admin-border));
    background: color-mix(in srgb, var(--admin-accent) 6%, var(--admin-surface));
}
.setup-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
    padding: 1rem 1.25rem .75rem;
}
.setup-summary { min-width: 0; }
.setup-heading { margin: 0 0 .2rem; font-size: 1rem; font-weight: 650; color: var(--admin-heading); }
.setup-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; margin: 0; font-size: .875rem; color: var(--admin-text-muted); }
.setup-count { font-weight: 600; color: var(--admin-heading); }
.setup-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--admin-text-faint); }
.setup-next { color: var(--admin-accent-text); font-weight: 500; text-decoration: none; }
.setup-next:hover { text-decoration: underline; text-underline-offset: .2em; }
.setup-controls { display: flex; align-items: center; gap: .5rem; }
.setup-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 40%, var(--admin-border));
    background: var(--admin-surface); color: var(--admin-accent-text); font-weight: 600;
}
.setup-toggle:hover, .setup-toggle:focus-visible { background: var(--admin-surface); color: var(--admin-accent-text); border-color: var(--admin-accent); }
.setup-toggle .fa-chevron-down { font-size: .75em; transition: transform .2s ease; }
.setup-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.setup-toggle-open { display: none; }
.setup-toggle[aria-expanded="true"] .setup-toggle-open { display: inline; }
.setup-toggle[aria-expanded="true"] .setup-toggle-closed { display: none; }

.setup-segments { display: flex; gap: 4px; padding: 0 1.25rem 1rem; }
.setup-segments > span {
    flex: 1 1 0; height: 6px; border-radius: 999px;
    background: color-mix(in srgb, var(--admin-accent) 16%, var(--admin-surface));
}
.setup-segments > .is-done { background: var(--admin-accent); }
.setup-segments > .is-next { background: color-mix(in srgb, var(--admin-accent) 16%, var(--admin-surface)); box-shadow: inset 0 0 0 1.5px var(--admin-accent); }

.setup-panel { border-top: 1px solid color-mix(in srgb, var(--admin-accent) 22%, var(--admin-border)); background: var(--admin-surface); }
.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-step {
    display: flex; gap: .85rem; padding: .95rem 1.25rem;
    border-top: 1px solid var(--admin-border);
}
.setup-step:first-child { border-top: 0; }
.setup-mark { flex: none; width: 1.1rem; padding-top: .1rem; font-size: 1.05rem; color: var(--admin-text-faint); text-align: center; }
.setup-step.is-done .setup-mark { color: var(--admin-fg-success); }
.setup-step.is-next .setup-mark { color: var(--admin-accent-text); }
.setup-body { flex: 1 1 auto; min-width: 0; }
.setup-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.setup-title { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--admin-heading); }
.setup-step.is-done { padding-top: .6rem; padding-bottom: .6rem; }
.setup-step.is-done .setup-title { font-weight: 500; color: var(--admin-text-muted); }
.setup-step.is-done .setup-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.setup-why { margin: .2rem 0 .65rem; max-width: 46rem; font-size: .875rem; color: var(--admin-text-soft, var(--admin-text-muted)); }
.setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.setup-link, .setup-actions .btn-link.setup-link {
    padding: 0; border: 0; font-size: .8125rem; font-weight: 500; color: var(--admin-text-muted);
    text-decoration: underline; text-underline-offset: .2em; vertical-align: baseline;
}
.setup-link:hover { color: var(--admin-heading); }
.setup-optional { border-top: 1px solid var(--admin-border); }
.setup-group { margin: 0; padding: .85rem 1.25rem 0; font-size: .8125rem; font-weight: 600; color: var(--admin-text-muted); }
.setup-optional .setup-step:first-child { border-top: 0; }
@media (prefers-reduced-motion: reduce) { .setup-toggle .fa-chevron-down { transition: none; } }

/* ---- Insights (admin/insights/) ----
   Totals in one ruled row like the dashboard counts, but each cell stacks
   label, number and a note, because the note (the change on the previous
   period) is part of the reading. Charts are ink, not accent: they report,
   they don't invite a click. */
.insight-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.insight-total { padding: 1.1rem 1.25rem; border-right: 1px solid var(--admin-border); }
.insight-total:last-child { border-right: 0; }
.insight-total-label { font-size: .8125rem; font-weight: 600; color: var(--admin-text-muted); }
.insight-total-value { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; color: var(--admin-heading); margin: .2rem 0 .3rem; }
.insight-total-note { font-size: .78rem; color: var(--admin-text-faint); line-height: 1.4; }
.insight-total-note .is-up { color: var(--admin-fg-success); font-weight: 600; }
@media (max-width: 991.98px) {
    .insight-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .insight-total:nth-child(2n) { border-right: 0; }
    .insight-total:nth-child(-n+2) { border-bottom: 1px solid var(--admin-border); }
}
.insight-chart-label { font-size: .8125rem; font-weight: 600; color: var(--admin-heading); margin-bottom: .4rem; }
.insight-chart-label span { font-weight: 400; color: var(--admin-text-faint); margin-left: .4rem; }
.insight-bars { display: block; width: 100%; height: 96px; border-bottom: 1px solid var(--admin-border); }
.insight-bars.is-enquiries { height: 40px; }
.insight-bars.is-visits rect { fill: color-mix(in srgb, var(--admin-heading) 26%, transparent); }
.insight-bars.is-enquiries rect { fill: var(--admin-heading); }
.insight-bars rect:hover { fill: var(--admin-accent); }
.insight-chart-axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--admin-text-faint); margin-top: .35rem; }
.insight-share { display: block; height: 4px; margin-top: .35rem; border-radius: 2px; max-width: 14rem;
    background: linear-gradient(var(--admin-heading), var(--admin-heading)) no-repeat 0 0 / var(--w) 100%, var(--admin-overlay-strong); }
.insight-table td, .insight-table th { padding-left: 1rem; padding-right: 1rem; }
.insight-notes li + li { margin-top: .4rem; }
.insight-notes strong { color: var(--admin-heading); font-weight: 600; }
@media (max-width: 575.98px) { .insight-share { display: none; } }

/* "How they found you" on an enquiry (insightsAttributionBlock). */
.sub-found { display: flex; gap: .6rem; align-items: baseline; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--admin-border); font-size: .8125rem; color: var(--admin-text-soft); max-width: 700px; }
.sub-found > i { color: var(--admin-text-faint); }
.sub-found-label { font-weight: 600; color: var(--admin-heading); margin-right: .25rem; }
.sub-found-tags { margin-top: .35rem; }
.sub-found-tags summary { cursor: pointer; color: var(--admin-text-muted); width: fit-content; }
.sub-found-tags dl { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem; margin: .4rem 0 0; }
.sub-found-tags dt { font-family: var(--font-mono); font-weight: 400; color: var(--admin-text-faint); }
.sub-found-tags dd { margin: 0; word-break: break-word; }

/* ---- List groups ---- */
.list-group-item {
    color: var(--admin-text);
    background-color: transparent;
    border-color: var(--admin-border);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--admin-heading);
    background-color: var(--admin-overlay) !important;
}

.list-group-item-action:active {
    background-color: var(--admin-overlay-strong) !important;
}

/* ---- Tables ---- */
.table {
    --bs-table-striped-bg: var(--admin-overlay-weak);
    --bs-table-hover-bg: var(--admin-overlay);
    border-color: var(--admin-border);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--admin-border);
}

/* Replaces the theme-locked .table-dark this panel used to put on header rows —
   a header that stays near-black under a light theme. */
.table > thead.table-head {
    background: transparent;
}

.table > thead.table-head th {
    color: var(--admin-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    border-bottom-color: var(--admin-border-strong);
}

/* ---- Forms ---- */
.form-control:focus,
.form-select:focus {
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 4px rgba(var(--admin-accent-rgb), 0.18);
}

/* Code/script textareas */
textarea.font-monospace {
    font-size: 0.8rem;
    line-height: 1.6;
    tab-size: 4;
}

/* ---- Nav tabs (settings page) ---- */
.nav-tabs {
    border-color: var(--admin-border-strong);
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    color: var(--admin-text-muted);
    border-color: transparent;
    border-bottom-color: transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color 0.15s ease, background 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--admin-heading);
    background: var(--admin-overlay);
    border-color: transparent;
    border-bottom-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--admin-heading);
    background: var(--admin-surface);
    border-color: var(--admin-border-strong) var(--admin-border-strong) var(--admin-surface);
}

.tab-content > .tab-pane > .card {
    border-top-left-radius: 0;
}

/* ---- Alerts ---- */
.alert-dismissible .btn-close {
    filter: var(--admin-btn-close-filter);
}

/* ---- Badges ---- */
.badge.bg-secondary {
    background-color: var(--admin-badge-bg) !important;
    color: var(--admin-badge-color) !important;
}

.badge.bg-light {
    background-color: var(--admin-badge-alt-bg) !important;
    color: var(--admin-badge-alt-color) !important;
}

/* Neutral "chip" badges (page template, nav menu name, form field type).
   These carry .bg-body-tertiary, whose Bootstrap default text colour lands
   too close to its own background — drive them from the badge tokens, which
   are contrast-checked, instead. */
.badge.bg-body-tertiary {
    color: var(--admin-badge-color) !important;
}

/* ---- Bootstrap semantic colours, remapped onto the brand ----
   Text forms of Bootstrap's semantic accents, pointed at the brand's
   status tokens (which flip per theme on their own): blue for things you
   can act on, green for success, amber for warnings, red for failures,
   and a neutral tier for info and secondary text. All are contrast-checked
   in brand.css. */
:root {
    --admin-fg-primary:   var(--cobalt-text);
    --admin-fg-success:   var(--ok-text);
    --admin-fg-danger:    var(--flag-red);
    --admin-fg-info:      var(--admin-text-muted);
    --admin-fg-warning:   var(--warn-text);
    --admin-fg-secondary: var(--admin-text-faint);

    /* Inline code is data, not status — the mono neutral, not a pink. */
    --bs-code-color:      var(--admin-text-muted);
}

.text-primary   { color: var(--admin-fg-primary)   !important; }
.text-success   { color: var(--admin-fg-success)   !important; }
.text-danger    { color: var(--admin-fg-danger)    !important; }
.text-info      { color: var(--admin-fg-info)      !important; }
.text-warning   { color: var(--admin-fg-warning)   !important; }
.text-secondary { color: var(--admin-fg-secondary) !important; }

/* ---- Buttons ----
   Labels only; brand.css settles every outline variant's edge and neutral
   hover. Only primary (blue, the action) and danger (red, destructive)
   carry a colour; success/warning/info buttons take the neutral ink label,
   because a button's colour should say what it does, not decorate it. */
.btn-outline-primary   { --bs-btn-color: var(--admin-fg-primary); }
.btn-outline-danger    { --bs-btn-color: var(--admin-fg-danger);  }
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-secondary { --bs-btn-color: var(--admin-text); }

.btn-link { --bs-btn-color: var(--admin-fg-primary); }

/* Hover labels. brand.css turns every non-primary outline hover into the
   neutral --grey fill, so those keep the ink label and need no rule; only
   the two coloured variants fill solid and flip to white. */
.btn-outline-primary:hover,
.btn-outline-primary:active {
    color: #fff !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:active {
    color: var(--flag-red-label) !important;
}

/* ---- Content item cards (manage pages) ---- */
.item-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.item-card:hover {
    border-color: var(--admin-border-hover);
    box-shadow: var(--admin-shadow-card);
}

.item-card .item-card-img {
    height: 170px;
    object-fit: cover;
    width: 100%;
    display: block;
}

.item-card .item-card-img-placeholder {
    height: 170px;
    background: var(--admin-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-placeholder-icon, var(--admin-border-hover));
    font-size: 0.8rem;
}

.item-card-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.item-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--admin-heading);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.item-card-meta {
    font-size: 0.775rem;
    color: var(--admin-text-muted);
    line-height: 1.5;
    flex: 1;
}

.item-card-meta i {
    width: 0.9rem;
    text-align: center;
    color: var(--admin-text-faint);
}

.item-card-badges {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.item-card-footer {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--admin-border);
    background: var(--admin-inset);
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    align-items: center;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--admin-shadow-sidebar);
    }

    .admin-main {
        margin-left: 0;
    }

    .topbar-toggle {
        display: block;
    }

    .admin-content {
        padding: 1.25rem 1rem 2rem;
    }

    .admin-topbar {
        padding: 0 1rem;
    }

    .topbar-username {
        display: none;
    }

    /* Icon-only save on a phone, so the bar title stays on one line. */
    .topbar-save-label {
        display: none;
    }
}

@media (min-width: 769px) {
    .topbar-toggle {
        display: none !important;
    }
}