/* =========================================================
   KX Developers Admin — Bento Design System
   Matches the frontend tokens (style.css) for visual sync.
   Sidebar uses --inverse-surface (always dark, mirroring how
   the frontend uses inverse cards for high-emphasis surfaces);
   the rest of the panel switches with the global theme toggle.
   ========================================================= */

/* Inter + JetBrains Mono are loaded locally from /assets/vendor/fonts/ via the layout header. */

/* ── Bento tokens (mirror of frontend) ───────────────────── */
:root {
    /* Surfaces */
    --bg:           #f4f5f7;
    --bg-soft:      #eceef2;
    --surface:      #ffffff;
    --surface-2:    #fafbfc;

    /* Ink */
    --ink:          #0b0d12;
    --ink-soft:     #1f2330;
    --ink-2:        #4b5263;
    --muted:        #7a8090;
    --muted-soft:   #aab0bd;
    --hairline:     #e6e8ee;
    --hairline-soft:#f1f3f7;

    /* Inverse — for sidebar, primary CTAs, and other "always dark" surfaces */
    --inverse-surface: #0b0d12;
    --inverse-text:    #ffffff;
    --inverse-muted:   #94a3b8;
    --inverse-hairline:rgba(255,255,255,.08);

    /* Brand */
    --brand:        #1d4ed8;
    --brand-hover:  #1e40af;
    --brand-soft:   #dbeafe;
    --accent:       #06b6d4;
    --accent-2:     #0ea5e9;

    /* Status colors */
    --status-success:#16a34a;
    --status-warning:#d97706;
    --status-danger: #dc2626;
    --status-info:   #1d4ed8;

    /* Card */
    --card-radius:    20px;
    --card-radius-sm: 14px;
    --card-radius-lg: 28px;
    --card-pad:       1.5rem;

    /* Shadows */
    --shadow-1: 0 1px 2px rgba(11,13,18,.04), 0 2px 8px rgba(11,13,18,.04);
    --shadow-2: 0 1px 2px rgba(11,13,18,.05), 0 8px 24px -4px rgba(11,13,18,.08);
    --shadow-3: 0 1px 2px rgba(11,13,18,.06), 0 24px 48px -16px rgba(11,13,18,.16);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-collapsed: 72px;
    --topbar-h: 64px;

    --easing: cubic-bezier(.2, .8, .2, 1);

    /* Legacy aliases — keep old class rules using these working */
    --primary:       var(--brand);
    --primary-hover: var(--brand-hover);
    --primary-light: var(--brand-soft);
    --text:          var(--ink);
    --border:        var(--hairline);
    --radius:        var(--card-radius-sm);
    --shadow:        var(--shadow-1);
    --shadow-md:     var(--shadow-2);
    --shadow-lg:     var(--shadow-3);
    --card-bg:       var(--surface);
    --sidebar-bg:    var(--inverse-surface);
    --font:          var(--font-sans);

    color-scheme: light;
}

/* ── Dark theme override ─────────────────────────────────── */
[data-theme="dark"] {
    --bg:           #0b0d12;
    --bg-soft:      #14171f;
    --surface:      #161922;
    --surface-2:    #1c2030;

    --ink:          #f1f5f9;
    --ink-soft:     #e2e8f0;
    --ink-2:        #cbd5e1;
    --muted:        #94a3b8;
    --muted-soft:   #64748b;
    --hairline:     #2a2e3d;
    --hairline-soft:#1f2330;

    --brand-soft:   rgba(29, 78, 216, 0.18);

    --shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.30);
    --shadow-2: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px -4px rgba(0,0,0,.45);
    --shadow-3: 0 1px 2px rgba(0,0,0,.50), 0 24px 48px -16px rgba(0,0,0,.55);

    /* Sidebar slightly lighter than page bg in dark mode for separation */
    --inverse-surface: #1c2030;
    --inverse-text:    #ffffff;
    --inverse-hairline:rgba(255,255,255,.06);

    color-scheme: dark;
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background .25s var(--easing), color .25s var(--easing);
}
a { color: var(--brand); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand-hover); }
img { max-width: 100%; height: auto; display: block; }
code, kbd, pre, samp { font-family: var(--font-mono); }
/* Inline code chips inside body text — subtle bg, theme-aware, wrap mid-string
   so long URLs/paths don't overflow narrow containers. */
:not(pre) > code {
    background: var(--bg-soft);
    color: var(--brand);
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
    font-size: 0.85em;
    overflow-wrap: anywhere;
    word-break: break-word;
}
[data-theme="dark"] :not(pre) > code { background: var(--surface-2); color: #93c5fd; }
/* Form helper text — allow wrapping so embedded code doesn't overflow,
   and use --muted token so contrast stays readable in both themes
   (Bootstrap default is too dim against our dark surfaces). */
.form-text {
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--muted) !important;
    font-size: 0.8125rem;
    line-height: 1.5;
}
[data-theme="dark"] .form-text { color: var(--ink-2) !important; }
hr { border: 0; border-top: 1px solid var(--hairline); }

/* =========================================================
   Login Page (matches frontend hero/auth aesthetic)
   ========================================================= */
body.login-page {
    background:
        radial-gradient(circle at 18% 18%, rgba(29,78,216,.16), transparent 45%),
        radial-gradient(circle at 82% 82%, rgba(6,182,212,.14), transparent 45%),
        var(--bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-container { width: 100%; max-width: 460px; padding: 1.5rem; }
.login-card {
    background: var(--surface);
    border-radius: var(--card-radius);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-3);
    padding: 2.75rem 2.5rem;
}
.login-header { text-align: center; margin-bottom: 2rem; }
.login-logo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1.25rem;
    padding: 1rem 1.5rem;
    background: var(--inverse-surface);
    border-radius: 18px;
    box-shadow: var(--shadow-2);
    min-height: 88px;
}
.login-logo-img { max-height: 56px; max-width: 200px; width: auto; height: auto; display: block; object-fit: contain; }
.login-icon {
    width: 68px;
    height: 68px;
    background: var(--inverse-surface);
    color: var(--inverse-text);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.875rem;
    box-shadow: var(--shadow-2);
}
.login-title {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 0.375rem;
    letter-spacing: -0.5px;
}
.login-subtitle { color: var(--muted); font-size: 0.9375rem; }
.login-footer { text-align: center; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }

/* =========================================================
   Layout
   ========================================================= */
#wrapper { display: flex; min-height: 100vh; }

/* ── Sidebar (always dark — uses inverse tokens) ─────────── */
#sidebar {
    width: var(--sidebar-width);
    background: var(--inverse-surface);
    color: var(--inverse-text);
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    z-index: 200;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width .28s var(--easing);
}
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 2px; }

#main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left .28s var(--easing);
}

body.sidebar-collapsed #sidebar { width: var(--sidebar-collapsed); }
body.sidebar-collapsed #main-content { margin-left: var(--sidebar-collapsed); }
body.sidebar-collapsed .sidebar-brand-name,
body.sidebar-collapsed .sidebar-nav-label,
body.sidebar-collapsed .sidebar-badge,
body.sidebar-collapsed .sidebar-chevron,
body.sidebar-collapsed .sidebar-divider-label,
body.sidebar-collapsed .sidebar-user-info,
body.sidebar-collapsed .sidebar-logout-label {
    opacity: 0; width: 0; overflow: hidden; pointer-events: none;
}
body.sidebar-collapsed .sidebar-brand { justify-content: center; gap: 0; }
body.sidebar-collapsed .sidebar-item,
body.sidebar-collapsed .sidebar-group-toggle,
body.sidebar-collapsed .sidebar-group {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 4px auto;
    gap: 0;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}
body.sidebar-collapsed .sidebar-item span,
body.sidebar-collapsed .sidebar-group-toggle span:not(.sidebar-badge) { display: none; }
/* Chevron and notification badge use margin-left: auto to push themselves
   to the right edge. Setting width:0 keeps them in the flex flow so the
   auto-margin still steals space, leaving the icon left-aligned in the
   chip. Removing them entirely fixes the centering. */
body.sidebar-collapsed .sidebar-chevron,
body.sidebar-collapsed .sidebar-badge { display: none !important; }
body.sidebar-collapsed .sidebar-group { display: flex; }
body.sidebar-collapsed .sidebar-group .sidebar-group-toggle { width: 100%; height: 100%; margin: 0; }
body.sidebar-collapsed .sidebar-submenu { display: none !important; }
/* Footer: stack avatar + logout vertically so they both fit in the 72px rail
   without clipping. Center each item; tighten footer padding. */
body.sidebar-collapsed .sidebar-footer { padding: 0.625rem 0; }
body.sidebar-collapsed .sidebar-user {
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}
body.sidebar-collapsed .sidebar-logout { margin: 0; }

/* In collapsed mode, the parent group toggle should show an "active" pill
   when its submenu page is current (mirrors how regular sidebar items look). */
body.sidebar-collapsed .sidebar-group.open .sidebar-group-toggle {
    background: var(--brand);
    color: #fff;
    border-radius: 12px;
}
body.sidebar-collapsed .sidebar-group-toggle { cursor: pointer; }
/* Tone down the shadow on collapsed active items so 44×44 chips don't read
   as floating buttons. */
body.sidebar-collapsed .sidebar-item.active,
body.sidebar-collapsed .sidebar-group.open .sidebar-group-toggle {
    box-shadow: 0 2px 8px rgba(29,78,216,.30);
}
/* Divider in collapsed mode — narrower, centered */
body.sidebar-collapsed .sidebar-divider { margin: 0.5rem auto; width: 28px; }

/* =========================================================
   Sidebar header / brand chip
   ========================================================= */
.sidebar-header {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--inverse-hairline);
    flex-shrink: 0;
}
.sidebar-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.sidebar-logo-img {
    max-height: 36px;
    width: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}
.sidebar-logo-icon {
    width: 38px; height: 38px;
    background: var(--brand);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(29,78,216,.4);
}
.sidebar-brand-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    transition: opacity .2s, width .2s;
    letter-spacing: -0.25px;
}

/* Compact emblem — hidden by default, shown only in collapsed sidebar.
   No background chip — the favicon renders with its native colors so the
   brand artwork stays recognisable. Fallback Bootstrap icon gets a subtle
   tinted backdrop so it doesn't float against pure dark. */
.sidebar-logo-mark {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: transparent;
}
.sidebar-logo-mark:has(i) { background: rgba(255,255,255,.06); }
.sidebar-logo-mark-img { max-width: 36px; max-height: 36px; width: auto; height: auto; object-fit: contain; }
body.sidebar-collapsed .sidebar-logo-img,
body.sidebar-collapsed .sidebar-logo-icon,
body.sidebar-collapsed .sidebar-brand-name { display: none !important; }
body.sidebar-collapsed .sidebar-logo-mark { display: flex; }
body.sidebar-collapsed .sidebar-header { padding: 0.875rem 0; display: flex; justify-content: center; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; gap: 0; }

/* =========================================================
   Sidebar nav
   ========================================================= */
.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.75rem 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    margin: 1px 0.625rem;
    border-radius: 10px;
    color: rgba(255,255,255,.65);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}
.sidebar-item i { font-size: 1.075rem; flex-shrink: 0; width: 20px; text-align: center; }
.sidebar-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-item.active {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 14px rgba(29,78,216,.45);
}

.sidebar-badge {
    margin-left: auto;
    background: var(--status-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
    transition: opacity .2s, width .2s;
}

.sidebar-group { margin: 1px 0.625rem; }
.sidebar-group-toggle {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    color: rgba(255,255,255,.65);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-group-toggle i:first-child { font-size: 1.075rem; flex-shrink: 0; width: 20px; text-align: center; }
.sidebar-group-toggle:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-group.open .sidebar-group-toggle { color: rgba(255,255,255,.85); }
.sidebar-chevron { font-size: 0.7rem; transition: transform .2s, opacity .2s, width .2s; flex-shrink: 0; }
.sidebar-group.open .sidebar-chevron { transform: rotate(180deg); }

.sidebar-submenu { display: none; padding: 0.25rem 0 0.25rem 2.5rem; }
.sidebar-group.open .sidebar-submenu { display: block; }
.sidebar-subitem {
    display: block;
    padding: 0.4rem 0.75rem;
    color: rgba(255,255,255,.55);
    font-size: 0.825rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: color .15s, background .15s;
    white-space: nowrap;
}
.sidebar-subitem:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-subitem.active { color: #fff; background: rgba(29,78,216,.35); }

.sidebar-divider {
    height: 1px;
    background: var(--inverse-hairline);
    margin: 0.5rem 1.25rem;
}

.sidebar-footer {
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--inverse-hairline);
    flex-shrink: 0;
}
.sidebar-user { display: flex; align-items: center; gap: 0.75rem; }
.sidebar-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 0.825rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
    font-size: 0.825rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-role {
    font-size: 0.7rem;
    color: rgba(255,255,255,.5);
    text-transform: capitalize;
}
.sidebar-logout {
    color: rgba(255,255,255,.5);
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-left: auto;
    transition: color .15s, background .15s;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
}
.sidebar-logout:hover { color: #fca5a5; background: rgba(239,68,68,.15); }

/* Sidebar tooltips — shown only when sidebar is collapsed.
   Colours are intentionally INVERSE of the active theme so the chip pops
   against both the always-dark sidebar and the theme-coloured page. */
.tooltip.sidebar-tooltip { --bs-tooltip-opacity: 1; }
.tooltip.sidebar-tooltip .tooltip-inner {
    /* Light mode: dark chip with white text */
    background: #0b0d12;
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    font-weight: 500;
    font-size: 0.825rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
}
.tooltip.sidebar-tooltip .tooltip-arrow::before { border-right-color: #0b0d12 !important; }

/* Dark mode: invert — light chip with dark text */
[data-theme="dark"] .tooltip.sidebar-tooltip .tooltip-inner {
    background: #ffffff;
    color: #0b0d12;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
[data-theme="dark"] .tooltip.sidebar-tooltip .tooltip-arrow::before { border-right-color: #ffffff !important; }

/* =========================================================
   Topbar
   ========================================================= */
#topbar {
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 0.75rem;
    flex-shrink: 0;
}

.topbar-toggle {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.35rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    line-height: 1;
}
.topbar-toggle:hover { background: var(--bg-soft); color: var(--ink); }

.topbar-search {
    position: relative;
    flex: 1;
    max-width: 480px;
    margin-left: 0.5rem;
}
.topbar-search-input {
    width: 100%;
    padding: 0.55rem 2.5rem 0.55rem 2.4rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 0.875rem;
    background: var(--bg-soft);
    color: var(--ink);
    transition: background .15s, border-color .15s, box-shadow .15s;
    font-family: var(--font-sans);
}
.topbar-search-input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}
.topbar-search-input::placeholder { color: var(--muted); }
.topbar-search-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 0.95rem;
    pointer-events: none;
}
.topbar-search-hint {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 5px;
    padding: 0.1rem 0.4rem;
    color: var(--muted);
    pointer-events: none;
    font-family: var(--font-mono);
}

.topbar-right { display: flex; align-items: center; gap: 0.375rem; margin-left: auto; }
.topbar-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--muted);
    font-size: 1.05rem;
    cursor: pointer;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}
.topbar-btn:hover {
    background: var(--bg-soft);
    color: var(--ink);
    border-color: var(--hairline);
}

/* Theme toggle (sun/moon) — added in topbar */
.topbar-theme [data-theme-icon-light] { display: inline; }
.topbar-theme [data-theme-icon-dark]  { display: none; }
[data-theme="dark"] .topbar-theme [data-theme-icon-light] { display: none; }
[data-theme="dark"] .topbar-theme [data-theme-icon-dark]  { display: inline; }

.topbar-avatar {
    background: var(--brand);
    color: #fff;
    border: none;
    width: 38px; height: 38px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: filter .15s;
}
.topbar-avatar::after { display: none; }
.topbar-avatar:hover, .topbar-avatar:focus { filter: brightness(1.08); outline: none; }

/* =========================================================
   Content
   ========================================================= */
#content { flex: 1; padding: 0 0 2.5rem; }

/* Page header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.75rem 1.75rem 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-title {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 0.25rem;
    letter-spacing: -0.5px;
    font-family: var(--font-sans);
}
.page-subtitle { color: var(--muted); font-size: 0.9375rem; }

/* Flash alerts */
.flash-alert {
    margin: 0.75rem 1.75rem 0;
    border-radius: var(--card-radius-sm);
    animation: alertSlideIn .3s ease;
}
@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.delete-modal-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(239,68,68,.12);
    color: var(--status-danger);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* Generic confirm modal icon (defaults to info / brand colour, swaps to danger
   when the trigger has data-confirm-type="danger"). */
.admin-confirm-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.admin-confirm-icon.admin-confirm-icon-danger {
    background: rgba(239,68,68,.12);
    color: var(--status-danger);
}
[data-theme="dark"] .admin-confirm-icon { background: rgba(29,78,216,.25); color: #93c5fd; }
[data-theme="dark"] .admin-confirm-icon.admin-confirm-icon-danger { background: rgba(239,68,68,.18); color: #fca5a5; }

.admin-toast {
    z-index: 9999;
    min-width: 260px;
    border-radius: var(--card-radius-sm);
    font-size: 0.875rem;
    animation: alertSlideIn .2s ease;
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-2);
    color: var(--ink);
}

/* =========================================================
   Cards (bento)
   ========================================================= */
.card {
    background: var(--surface);
    border-radius: var(--card-radius);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-1);
    margin: 0 1.75rem 1.5rem;
    color: var(--ink);
    overflow: hidden;
}
/* Cards inside Bootstrap columns shouldn't double up on horizontal gutter —
   the column padding already provides the inset. Without this override,
   .card's 1.75rem margin compounds with the col padding and creates wide
   empty bands between cards in dashboard-style grids. */
.row > [class*="col"] > .card,
.row > [class*="col"] > .stat-card { margin-left: 0; margin-right: 0; }
.row > [class*="col"] > .card:last-child,
.row > [class*="col"] > .stat-card:last-child { margin-bottom: 0; }

/* When a Bootstrap row is at the top level of the content area, give it the
   same horizontal inset as cards. Without this, cards inside .col-* land
   flush against the page edge because the row itself has no horizontal
   padding. Covers the common form-wrapped layouts (section_form, post
   editor, etc.) too. Nested rows inside .card-body, .modal etc. are
   untouched because they're not direct children of #content / form / etc. */
#content > .row,
#content > form > .row,
#content > section > .row,
#content > div:not(.card):not(.page-header):not(.alert):not(.flash-alert) > .row {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
}

/* Roles & Permissions matrix — keeps role columns compact so the checkbox
   sits centered without wide empty bands when viewed on a desktop. */
.roles-matrix { table-layout: auto; }
.roles-matrix thead th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--hairline);
    padding: 1rem;
    vertical-align: top;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
/* Role name (first child div in the th) — uppercase, prominent */
.roles-matrix thead th .roles-matrix-role-name {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink);
    line-height: 1.2;
}
/* Role description — clearly subordinate, normal case, on its own line */
.roles-matrix thead th .roles-matrix-role-desc {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.45;
    color: var(--muted);
    margin-top: 0.5rem;
}
.roles-matrix td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--hairline-soft); }
.roles-matrix tr:last-child td { border-bottom: 0; }
.roles-matrix .roles-matrix-role { width: 180px; min-width: 160px; }
.roles-matrix .roles-matrix-cell { width: 180px; vertical-align: middle; }
.roles-matrix .form-check-input { width: 20px; height: 20px; cursor: pointer; }
.roles-matrix code { font-size: 0.78rem; }

/* Bootstrap badge subtle utilities — used by override badge in roles matrix */
.bg-warning-subtle { background-color: rgba(217,119,6,.12) !important; }
.text-warning-emphasis { color: var(--status-warning) !important; }
[data-theme="dark"] .bg-warning-subtle { background-color: rgba(217,119,6,.18) !important; }
[data-theme="dark"] .text-warning-emphasis { color: #fdba74 !important; }
.bg-success-subtle { background-color: rgba(22,163,74,.12) !important; }
.text-success-emphasis { color: var(--status-success) !important; }
[data-theme="dark"] .bg-success-subtle { background-color: rgba(22,163,74,.18) !important; }
[data-theme="dark"] .text-success-emphasis { color: #86efac !important; }
.bg-danger-subtle { background-color: rgba(220,38,38,.12) !important; }
.text-danger-emphasis { color: var(--status-danger) !important; }
[data-theme="dark"] .bg-danger-subtle { background-color: rgba(220,38,38,.18) !important; }
[data-theme="dark"] .text-danger-emphasis { color: #fca5a5 !important; }

/* Borders adapting to theme tokens — used by `.border`, `.border-top`, etc. */
.border { border-color: var(--hairline) !important; }
.border-top { border-top-color: var(--hairline) !important; }
.border-bottom { border-bottom-color: var(--hairline) !important; }
.border-start { border-left-color: var(--hairline) !important; }
.border-end { border-right-color: var(--hairline) !important; }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hairline);
    padding: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.2px;
}
.card-body { padding: 1.25rem; color: var(--ink); }

/* Stat cards (dashboard) */
.stat-card {
    background: var(--surface);
    border-radius: var(--card-radius);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-1);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    transition: transform .2s var(--easing), box-shadow .2s var(--easing);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.stat-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.stat-icon-wrap {
    width: 50px; height: 50px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.stat-icon-blue   { background: var(--brand-soft); color: var(--brand); }
.stat-icon-green  { background: rgba(22,163,74,.14); color: var(--status-success); }
.stat-icon-orange { background: rgba(217,119,6,.16); color: var(--status-warning); }
.stat-icon-purple { background: rgba(124,58,237,.14); color: #7c3aed; }

.stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -1px;
    font-feature-settings: 'tnum';
}
.stat-label { font-size: 0.825rem; color: var(--muted); font-weight: 500; }
.stat-link {
    font-size: 0.8rem;
    color: var(--brand);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    transition: gap .15s;
}
.stat-link:hover { gap: 0.5rem; }

/* =========================================================
   Tables
   ========================================================= */
.table {
    font-size: 0.875rem;
    color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--hairline-soft);
    --bs-table-striped-color: var(--ink);
    --bs-table-striped-bg: var(--bg-soft);
    --bs-table-hover-color: var(--ink);
    --bs-table-hover-bg: var(--bg-soft);
}
.table thead th {
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--hairline);
    padding: 0.85rem 1rem;
    white-space: nowrap;
}
.table tbody td {
    vertical-align: middle;
    padding: 0.85rem 1rem;
    border-color: var(--hairline-soft);
    color: var(--ink);
}
.table-hover > tbody > tr:hover > * { background-color: var(--bg-soft); }
.table-light, .table-light > * {
    --bs-table-bg: var(--surface-2);
    --bs-table-color: var(--ink);
}

.row-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}
.row-actions a {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand);
    transition: color .15s;
}
.row-actions a:hover { color: var(--brand-hover); text-decoration: underline; }
.row-actions .separator { color: var(--muted-soft); font-size: 0.75rem; user-select: none; }

.btn-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--muted);
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
}
.btn-icon:hover {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: rgba(29,78,216,.3);
}
.btn-icon.btn-icon-danger:hover {
    background: rgba(220,38,38,.10);
    color: var(--status-danger);
    border-color: rgba(220,38,38,.3);
}

/* =========================================================
   Status badges
   ========================================================= */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    text-transform: capitalize;
}
.status-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}
.badge-published  { background: rgba(22,163,74,.14);  color: #15803d; }
.badge-draft      { background: rgba(217,119,6,.14); color: #b45309; }
.badge-scheduled  { background: rgba(14,165,233,.14); color: #0369a1; }
.badge-pending    { background: rgba(234,88,12,.14);  color: #c2410c; }
.badge-approved   { background: rgba(22,163,74,.14);  color: #15803d; }
.badge-spam       { background: rgba(157,23,77,.14);  color: #9d174d; }
.badge-trash      { background: rgba(220,38,38,.14);  color: #991b1b; }
.badge-private    { background: rgba(126,34,206,.14); color: #7e22ce; }

/* =========================================================
   Forms
   ========================================================= */
.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 0.4rem;
    letter-spacing: -0.1px;
}
.form-control,
.form-select {
    font-size: 0.875rem;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s, background .2s;
    background-color: var(--surface);
    padding: 0.55rem 0.85rem;
    font-family: var(--font-sans);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29,78,216,.12);
    outline: none;
    background-color: var(--surface);
    color: var(--ink);
}
.form-control::placeholder { color: var(--muted); }
.form-control-lg {
    font-size: 1.0625rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
}
textarea.form-control { resize: vertical; min-height: 90px; }

.form-check-input {
    background-color: var(--surface);
    border-color: var(--hairline);
}
.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.form-switch .form-check-input:checked { background-color: var(--brand); }

.input-group-text {
    background: var(--surface-2);
    border-color: var(--hairline);
    color: var(--muted);
    font-size: 0.875rem;
}

/* TinyMCE wrapper */
.tox-tinymce {
    border-radius: 12px !important;
    border-color: var(--hairline) !important;
    min-height: 450px;
}
.tox-tinymce:focus-within {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(29,78,216,.12) !important;
}
.tinymce-editor { display: block; width: 100%; }

/* =========================================================
   Media library
   ========================================================= */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}
.media-item {
    position: relative;
    cursor: pointer;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    background: var(--bg-soft);
}
.media-item:hover, .media-item.selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
    transform: translateY(-2px);
}
.media-thumb {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-soft);
    position: relative;
}
.media-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s;
}
.media-item:hover .media-thumb img { transform: scale(1.05); }
.media-file-icon {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 2.5rem;
    color: var(--muted);
}
.media-overlay {
    position: absolute; inset: 0;
    background: rgba(11,13,18,.55);
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity .2s;
}
.media-item:hover .media-overlay { opacity: 1; }
.media-info { padding: 0.5rem 0.625rem; background: var(--surface); }
.media-filename {
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--ink);
}
.media-filesize { font-size: 0.65rem; color: var(--muted); }
.media-detail-preview { max-height: 300px; object-fit: contain; }

.user-avatar-sm { width: 40px; height: 40px; object-fit: cover; flex-shrink: 0; }
.user-avatar-lg { width: 80px; height: 80px; object-fit: cover; display: block; margin: 0 auto; }

/* =========================================================
   Card tabs (status filter)
   ========================================================= */
.card-tab-top { border-radius: var(--card-radius) var(--card-radius) 0 0; overflow: visible; }
.card-tab-bottom { border-radius: 0 0 var(--card-radius) var(--card-radius); }
.card-tab-top .card-body { padding-bottom: 0.5rem !important; }

.card-tab-top .nav-tabs { border-bottom: none; gap: 2px; }
.card-tab-top .nav-tabs .nav-link {
    border: none;
    border-radius: 10px;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    background: transparent;
    transition: background .15s, color .15s;
}
.card-tab-top .nav-tabs .nav-link:hover { background: var(--bg-soft); color: var(--ink); }
.card-tab-top .nav-tabs .nav-link.active { background: var(--brand); color: #fff; }
.card-tab-top .nav-tabs .nav-link .badge {
    font-size: 0.68rem;
    font-weight: 600;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
    line-height: 1;
}
.card-tab-top .nav-tabs .nav-link.active .badge {
    --bs-secondary-rgb: 255, 255, 255;
    --bs-warning-rgb:   255, 255, 255;
    --bs-success-rgb:   255, 255, 255;
    --bs-danger-rgb:    255, 255, 255;
    --bs-primary-rgb:   255, 255, 255;
    --bs-info-rgb:      255, 255, 255;
    --bs-bg-opacity:    0.22;
    color: rgba(255, 255, 255, .9) !important;
}

.comment-content-cell { max-width: 350px; }
.menu-item-picker-list { max-height: 150px; overflow-y: auto; }

/* =========================================================
   Buttons (Bootstrap overrides — bento)
   ========================================================= */
.btn {
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 10px;
    transition: all .15s var(--easing);
    letter-spacing: -0.1px;
}
.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #fff;
}
.btn-primary:focus { box-shadow: 0 0 0 3px rgba(29,78,216,.25); }

.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}
.btn-outline-primary:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--ink-soft);
    border-color: var(--hairline);
    background: var(--surface);
}
.btn-outline-secondary:hover {
    background: var(--bg-soft);
    color: var(--ink);
    border-color: var(--hairline);
}

.btn-secondary {
    background: var(--bg-soft);
    border-color: var(--bg-soft);
    color: var(--ink);
}
.btn-secondary:hover {
    background: var(--hairline);
    border-color: var(--hairline);
    color: var(--ink);
}

.btn-light {
    background: var(--surface);
    border-color: var(--hairline);
    color: var(--ink);
}
.btn-light:hover {
    background: var(--bg-soft);
    color: var(--ink);
}

.btn-dark {
    background: var(--inverse-surface);
    border-color: var(--inverse-surface);
    color: #fff;
}

/* =========================================================
   Dropdowns
   ========================================================= */
.dropdown-menu {
    border-radius: var(--card-radius-sm);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-2);
    font-size: 0.875rem;
    padding: 0.5rem;
    background: var(--surface);
    color: var(--ink);
}
.dropdown-item {
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    color: var(--ink);
    transition: background .15s, color .15s;
    display: flex; align-items: center; gap: 0.5rem;
}
.dropdown-item:hover { background: var(--bg-soft); color: var(--ink); }
.dropdown-item.text-danger:hover {
    background: rgba(220,38,38,.10);
    color: var(--status-danger);
}
.dropdown-divider { border-color: var(--hairline); margin: 0.4rem 0; }

/* =========================================================
   Settings tabs
   ========================================================= */
#settings-tabs .nav-link {
    color: var(--ink-soft);
    font-weight: 500;
    border-radius: 10px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    display: flex; align-items: center; gap: 0.625rem;
    transition: background .15s, color .15s;
    margin-bottom: 2px;
}
#settings-tabs .nav-link:hover { background: var(--bg-soft); color: var(--brand); }
#settings-tabs .nav-link.active {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 14px rgba(29,78,216,.35);
}

/* =========================================================
   Menu builder
   ========================================================= */
.menu-item {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.menu-item:hover { box-shadow: var(--shadow-1); border-color: var(--brand-soft); }
.menu-item-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.875rem; }

.drag-handle {
    cursor: grab;
    color: var(--muted-soft);
    font-size: 1.1rem;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity .15s;
}
.drag-handle:hover { opacity: 1; color: var(--muted); }
.drag-handle:active { cursor: grabbing; }

.menu-item-title { font-size: 0.875rem; font-weight: 500; flex-grow: 1; color: var(--ink); }
.menu-item-type {
    font-size: 0.7rem;
    color: var(--muted);
    background: var(--bg-soft);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 500;
}
.menu-item-edit {
    border-top: 1px solid var(--hairline);
    background: var(--surface-2);
    padding: 0.85rem 0.875rem;
}
.menu-children {
    padding-left: 1.75rem;
    border-left: 2px solid var(--hairline);
    margin-left: 0.875rem;
    margin-top: 0.375rem;
}

/* =========================================================
   Section rows (Homepage builder)
   ========================================================= */
.section-row { background: var(--surface); transition: background .15s; }
.section-row:hover { background: var(--bg-soft); }
.section-row.sortable-chosen {
    opacity: 0.85;
    background: var(--brand-soft);
    box-shadow: var(--shadow-2);
}

.cursor-grab { cursor: grab; }
.border-dashed { border-style: dashed !important; }

#upload-dropzone, #media-upload-dropzone {
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
#upload-dropzone:hover, #upload-dropzone.drag-over,
#media-upload-dropzone:hover, #media-upload-dropzone.drag-over {
    background: rgba(29,78,216,.04);
    border-color: var(--brand) !important;
}

/* =========================================================
   Post form
   ========================================================= */
.post-title-input {
    width: 100%;
    font-size: 1.625rem;
    font-weight: 800;
    border: none;
    border-bottom: 2px solid var(--hairline);
    border-radius: 0;
    padding: 0.4rem 0;
    color: var(--ink);
    background: transparent;
    outline: none;
    transition: border-color .2s;
    letter-spacing: -0.7px;
    font-family: var(--font-sans);
}
.post-title-input:focus { border-bottom-color: var(--brand); }
.post-title-input::placeholder { color: var(--muted-soft); }

.featured-image-preview {
    aspect-ratio: 16/9;
    background: var(--bg-soft);
    border-radius: 14px;
    overflow: hidden;
    border: 2px dashed var(--hairline);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
    font-size: 0.875rem;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
    margin-bottom: 0.75rem;
}
.featured-image-preview:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
}
.featured-image-preview img { width: 100%; height: 100%; object-fit: cover; }

.categories-box {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--hairline) transparent;
    padding: 0.25rem 0.75rem;
}

#meta-desc-count.over-limit { color: var(--status-danger); font-weight: 600; }
#meta-desc-count.near-limit { color: var(--status-warning); }

/* =========================================================
   Quick action buttons (dashboard)
   ========================================================= */
.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: border-color .2s, box-shadow .2s, transform .2s, color .2s;
    width: 100%;
}
.quick-action-btn:hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand), var(--shadow-1);
    color: var(--brand);
    transform: translateY(-1px);
}
.quick-action-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.quick-action-icon-blue   { background: var(--brand-soft); color: var(--brand); }
.quick-action-icon-green  { background: rgba(22,163,74,.14); color: var(--status-success); }
.quick-action-icon-orange { background: rgba(217,119,6,.16); color: var(--status-warning); }
.quick-action-icon-purple { background: rgba(124,58,237,.14); color: #7c3aed; }

/* =========================================================
   Alerts
   ========================================================= */
.alert {
    border-radius: var(--card-radius-sm);
    font-size: 0.875rem;
    border: 1px solid transparent;
    padding: 0.85rem 1rem;
}
.alert-success {
    background: rgba(22,163,74,.10);
    border-color: rgba(22,163,74,.25);
    color: #15803d;
}
.alert-danger {
    background: rgba(220,38,38,.10);
    border-color: rgba(220,38,38,.25);
    color: var(--status-danger);
}
.alert-warning {
    background: rgba(217,119,6,.10);
    border-color: rgba(217,119,6,.25);
    color: var(--status-warning);
}
.alert-info {
    background: var(--brand-soft);
    border-color: rgba(29,78,216,.25);
    color: var(--brand);
}

/* =========================================================
   Pagination
   ========================================================= */
.pagination .page-link {
    color: var(--ink-soft);
    border-color: var(--hairline);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 10px !important;
    margin: 0 2px;
    padding: 0.45rem 0.85rem;
    background: var(--surface);
    transition: background .15s, color .15s, border-color .15s;
}
.pagination .page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.pagination .page-link:hover {
    background: var(--brand-soft);
    border-color: rgba(29,78,216,.3);
    color: var(--brand);
}
.pagination .page-item.disabled .page-link {
    background: var(--surface);
    color: var(--muted-soft);
    border-color: var(--hairline);
}

/* =========================================================
   Modals
   ========================================================= */
.modal-content {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-3);
}
.modal-header { border-bottom-color: var(--hairline); }
.modal-footer { border-top-color: var(--hairline); }
.modal-title { font-weight: 700; color: var(--ink); }
.btn-close { filter: none; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 991.98px) {
    #sidebar {
        transform: translateX(-100%);
        transition: transform .3s var(--easing), box-shadow .3s;
        width: var(--sidebar-width) !important;
    }
    body.sidebar-open #sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 28px rgba(0,0,0,.4);
    }
    #main-content { margin-left: 0 !important; }
    body.sidebar-open::before {
        content: '';
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 199;
        animation: overlayFade .25s ease;
    }
    @keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
    .page-header { padding: 1rem 1rem 0.75rem; flex-direction: column; }
    .card { margin: 0 1rem 1.25rem; }
    .flash-alert { margin: 0.75rem 1rem 0; }
}

@media (max-width: 575.98px) {
    .page-header { padding: 1rem; }
    .stat-value { font-size: 1.85rem; }
    #topbar { padding: 0 1rem; }
    .topbar-search { display: none !important; }
}

/* =========================================================
   Utilities
   ========================================================= */
.text-primary-custom { color: var(--brand); }
.bg-primary-light { background: var(--brand-soft); }
.text-muted { color: var(--muted) !important; }
.text-dark { color: var(--ink) !important; }

.rounded-10 { border-radius: 10px !important; }
.rounded-8  { border-radius: 8px !important; }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.gap-xs { gap: 0.25rem; }

.fs-7  { font-size: 0.8125rem !important; }
.fs-8  { font-size: 0.775rem  !important; }
.fs-9  { font-size: 0.75rem   !important; }
.fs-10 { font-size: 0.72rem   !important; }

/* Color preview swatches (settings) */
.color-preview-swatch {
    display: inline-block;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
}
.color-preview-logo { max-height: 48px; max-width: 200px; }

/* Social icon colors (kept brand-true regardless of theme) */
.icon-facebook  { color: #1877f2; }
.icon-instagram { color: #e1306c; }
.icon-linkedin  { color: #0a66c2; }
.icon-youtube   { color: #ff0000; }

.progress-xs { height: 4px; }
.progress { background: var(--bg-soft); border-radius: 999px; }

/* Posts table column widths */
.col-checkbox { width: 40px; }
.col-thumb    { width: 52px; }
.col-views    { width: 80px; }
.col-actions  { width: 50px; }

/* Post form helpers */
.post-title-input  { font-size: 1.5rem; }
.permalink-wrap    { max-width: 500px; }
.post-slug-prefix  { font-size: 0.8rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.post-slug-label   { font-size: 0.8rem; white-space: nowrap; color: var(--muted); }
.post-slug-input   { font-size: 0.8rem; }
.meta-desc-counter { font-size: 0.775rem; color: var(--muted); }
.meta-desc-counter.warn { color: var(--status-warning); }
.meta-desc-counter.over { color: var(--status-danger); }

/* SEO preview */
.seo-preview-wrap { border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
.seo-preview-tabs { display: flex; border-bottom: 1px solid var(--hairline); background: var(--surface-2); }
.seo-tab-btn {
    flex: 1; padding: 0.55rem 0.75rem;
    font-size: 0.8125rem; font-weight: 500;
    border: none; background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s, background .15s;
}
.seo-tab-btn:hover { background: var(--bg-soft); color: var(--ink); }
.seo-tab-btn.active {
    background: var(--surface);
    color: var(--brand);
    border-bottom: 2px solid var(--brand);
}
.seo-tab-pane { padding: 1rem; background: var(--surface); }

.seo-google-preview { font-family: Arial, sans-serif; }
.seo-google-url { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.3; margin-bottom: 2px; }
.seo-google-url::before {
    content: ''; display: inline-block; width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EA4335'%3E%3Cpath d='M21.35 11.1h-9.17v2.73h6.51c-.33 3.81-3.5 5.44-6.5 5.44C8.36 19.27 5 16.25 5 12c0-4.1 3.2-7.27 7.2-7.27 3.09 0 4.9 1.97 4.9 1.97L19 4.72S16.56 2 12.1 2C6.42 2 2.03 6.8 2.03 12c0 5.05 4.13 10 10.22 10 5.33 0 9.22-3.64 9.22-9.01 0-1.09-.15-1.9-.12-1.9z'/%3E%3C/svg%3E") no-repeat center/contain;
    vertical-align: middle; margin-right: 4px;
}
.seo-google-title {
    font-size: 1.15rem; color: #1a0dab; line-height: 1.4; font-weight: 400;
    margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seo-google-title.too-long { color: #c5221f; }
.seo-google-desc {
    font-size: 0.8375rem; color: #4d5156; line-height: 1.58;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.seo-bar { height: 6px; background: var(--bg-soft); border-radius: 3px; overflow: hidden; }
.seo-bar-fill { height: 100%; width: 0; border-radius: 3px; background: var(--status-success); transition: width .2s, background .2s; }
.seo-bar-fill.warn { background: var(--status-warning); }
.seo-bar-fill.over { background: var(--status-danger); }

.seo-social-card {
    border: 1px solid var(--hairline);
    border-radius: 12px;
    overflow: hidden;
    font-family: var(--font-sans);
    background: var(--surface);
}
.seo-social-img-wrap { background: var(--bg-soft); min-height: 160px; display: flex; align-items: center; justify-content: center; }
.seo-social-img-placeholder { text-align: center; padding: 24px; color: var(--muted); }
.seo-social-img { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.seo-social-body { padding: 0.85rem 1rem; background: var(--surface); }
.seo-social-domain { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.seo-social-title {
    font-size: 0.9375rem; font-weight: 600; color: var(--ink); line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.seo-social-desc {
    font-size: 0.8125rem; color: var(--muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.featured-image-placeholder-icon { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.featured-image-caption { font-size: 0.8rem; color: var(--muted); }
.categories-manage-link { font-size: 0.775rem; }
.post-options-label     { font-size: 0.875rem; color: var(--ink-soft); }
.reading-time-label     { font-size: 0.8125rem; color: var(--muted); }

/* Posts table cell utilities */
.post-table-thumb {
    width: 48px; height: 38px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}
.post-table-no-thumb {
    width: 48px; height: 38px;
    background: var(--bg-soft);
    color: var(--muted-soft);
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
}
.post-table-title { font-size: 0.875rem; color: var(--ink); }
.post-table-date  { font-size: 0.8125rem; white-space: nowrap; color: var(--muted); }
.post-table-views { font-size: 0.8125rem; white-space: nowrap; color: var(--muted); text-align: right; }
.featured-star-icon { font-size: 0.75rem; }
.category-pill-xs   { font-size: 0.7rem; }

/* Dashboard text utilities */
.dash-post-title  { font-size: 0.875rem; color: var(--ink); }
.dash-post-badge  { font-size: 0.7rem; }
.dash-post-meta   { font-size: 0.8125rem; white-space: nowrap; color: var(--muted); }
.dash-comment-name  { font-size: 0.8125rem; }
.dash-comment-text  { font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); }
.dash-comment-time  { font-size: 0.72rem; color: var(--muted); }
.dash-comment-approve { font-size: 0.75rem; font-weight: 500; }

/* Topbar user info */
.topbar-user-name { font-size: 0.875rem; color: var(--ink); }
.topbar-user-role { font-size: 0.775rem; color: var(--muted); }

/* =========================================================
   Dark-mode tuning
   ========================================================= */
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .quick-action-btn,
[data-theme="dark"] .menu-item,
[data-theme="dark"] .seo-preview-wrap,
[data-theme="dark"] .seo-social-card { background: var(--surface); border-color: var(--hairline); }
[data-theme="dark"] .table thead th { background: var(--surface-2); color: var(--muted); }
[data-theme="dark"] .table-light, [data-theme="dark"] .table-light > * { --bs-table-bg: var(--surface-2); --bs-table-color: var(--ink); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background-color: var(--surface); border-color: var(--hairline); color: var(--ink); }
[data-theme="dark"] .form-control::placeholder { color: var(--muted); opacity: 0.75; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { background-color: var(--surface); color: var(--ink); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29,78,216,.25); }
[data-theme="dark"] .input-group-text { background: var(--surface-2); border-color: var(--hairline); color: var(--muted); }
[data-theme="dark"] .dropdown-menu { background: var(--surface-2); border-color: var(--hairline); color: var(--ink); }
[data-theme="dark"] .dropdown-item { color: var(--ink); }
[data-theme="dark"] .dropdown-item:hover { background: var(--bg-soft); color: var(--ink); }
[data-theme="dark"] .dropdown-divider { border-color: var(--hairline); }
[data-theme="dark"] #topbar { background: var(--surface); border-bottom-color: var(--hairline); }
[data-theme="dark"] .topbar-search-input { background: var(--bg-soft); border-color: var(--hairline); color: var(--ink); }
[data-theme="dark"] .topbar-search-input:focus { background: var(--surface); }
[data-theme="dark"] .topbar-search-hint { background: var(--surface-2); border-color: var(--hairline); color: var(--muted); }
[data-theme="dark"] .topbar-btn { color: var(--muted); }
[data-theme="dark"] .topbar-btn:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--hairline); }
[data-theme="dark"] .btn-icon { background: var(--surface); color: var(--muted); border-color: var(--hairline); }
[data-theme="dark"] .btn-icon:hover { background: var(--brand-soft); color: #93c5fd; border-color: rgba(29,78,216,.4); }
[data-theme="dark"] .btn-light { background: var(--surface); border-color: var(--hairline); color: var(--ink); }
[data-theme="dark"] .btn-light:hover { background: var(--bg-soft); }
[data-theme="dark"] .btn-secondary { background: var(--surface-2); border-color: var(--hairline); color: var(--ink); }
[data-theme="dark"] .btn-outline-secondary { background: var(--surface); border-color: var(--hairline); color: var(--ink-soft); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--bg-soft); color: var(--ink); }
[data-theme="dark"] .menu-item-edit { background: var(--bg-soft); }
[data-theme="dark"] .menu-item-type { background: var(--bg-soft); color: var(--muted); }
[data-theme="dark"] .pagination .page-link { background: var(--surface); color: var(--ink-soft); border-color: var(--hairline); }
[data-theme="dark"] .pagination .page-link:hover { background: var(--bg-soft); border-color: var(--hairline); color: var(--ink); }
[data-theme="dark"] .pagination .page-item.disabled .page-link { background: var(--surface); color: var(--muted-soft); border-color: var(--hairline); }
[data-theme="dark"] .alert-success { background: rgba(22,163,74,.14); color: #86efac; border-color: rgba(22,163,74,.30); }
[data-theme="dark"] .alert-danger  { background: rgba(220,38,38,.14); color: #fca5a5; border-color: rgba(220,38,38,.30); }
[data-theme="dark"] .alert-warning { background: rgba(217,119,6,.14); color: #fdba74; border-color: rgba(217,119,6,.30); }
[data-theme="dark"] .alert-info    { background: var(--brand-soft); color: #93c5fd; border-color: rgba(29,78,216,.40); }
[data-theme="dark"] .delete-modal-icon { background: rgba(239,68,68,.18); color: #fca5a5; }
[data-theme="dark"] .post-title-input { color: var(--ink); border-bottom-color: var(--hairline); }
[data-theme="dark"] .post-title-input::placeholder { color: var(--muted-soft); }
[data-theme="dark"] .featured-image-preview { background: var(--bg-soft); border-color: var(--hairline); color: var(--muted); }
[data-theme="dark"] .featured-image-preview:hover { background: var(--brand-soft); color: #93c5fd; }
[data-theme="dark"] .post-table-no-thumb { background: var(--surface-2); color: var(--muted); }
[data-theme="dark"] .media-info { background: var(--surface); }
[data-theme="dark"] .media-thumb, [data-theme="dark"] .media-item { background: var(--surface-2); }
[data-theme="dark"] .menu-children { border-left-color: var(--hairline); }
[data-theme="dark"] .seo-preview-tabs { background: var(--surface-2); border-bottom-color: var(--hairline); }
[data-theme="dark"] .seo-tab-pane { background: var(--surface); }
[data-theme="dark"] .seo-tab-btn { color: var(--muted); }
[data-theme="dark"] .seo-tab-btn:hover { background: var(--bg-soft); color: var(--ink); }
[data-theme="dark"] .seo-tab-btn.active { background: var(--surface); color: var(--accent-2); border-bottom-color: var(--accent-2); }
[data-theme="dark"] .seo-google-url { color: var(--ink-soft); }
[data-theme="dark"] .seo-google-title { color: #93c5fd; }
[data-theme="dark"] .seo-google-desc { color: var(--muted); }
[data-theme="dark"] .seo-social-domain { color: var(--muted); }
[data-theme="dark"] .seo-social-title { color: var(--ink); }
[data-theme="dark"] .seo-social-desc  { color: var(--muted); }
[data-theme="dark"] .seo-social-img-wrap { background: var(--bg-soft); }
[data-theme="dark"] .login-card { background: var(--surface); border-color: var(--hairline); }
[data-theme="dark"] .login-icon { background: var(--brand); }
[data-theme="dark"] .stat-icon-blue { background: var(--brand-soft); color: #93c5fd; }
[data-theme="dark"] .stat-icon-green { background: rgba(22,163,74,.18); color: #86efac; }
[data-theme="dark"] .stat-icon-orange { background: rgba(217,119,6,.20); color: #fdba74; }
[data-theme="dark"] .stat-icon-purple { background: rgba(124,58,237,.18); color: #c4b5fd; }
[data-theme="dark"] .quick-action-icon-blue   { background: var(--brand-soft); color: #93c5fd; }
[data-theme="dark"] .quick-action-icon-green  { background: rgba(22,163,74,.18); color: #86efac; }
[data-theme="dark"] .quick-action-icon-orange { background: rgba(217,119,6,.20); color: #fdba74; }
[data-theme="dark"] .quick-action-icon-purple { background: rgba(124,58,237,.18); color: #c4b5fd; }
[data-theme="dark"] .badge-published { background: rgba(22,163,74,.18); color: #86efac; }
[data-theme="dark"] .badge-draft     { background: rgba(217,119,6,.18); color: #fdba74; }
[data-theme="dark"] .badge-scheduled { background: rgba(14,165,233,.18); color: #7dd3fc; }
[data-theme="dark"] .badge-pending   { background: rgba(234,88,12,.18); color: #fdba74; }
[data-theme="dark"] .badge-approved  { background: rgba(22,163,74,.18); color: #86efac; }
[data-theme="dark"] .badge-spam      { background: rgba(190,18,60,.18); color: #f9a8d4; }
[data-theme="dark"] .badge-trash     { background: rgba(220,38,38,.18); color: #fca5a5; }
[data-theme="dark"] .badge-private   { background: rgba(126,34,206,.18); color: #d8b4fe; }
[data-theme="dark"] .progress { background: var(--bg-soft); }

/* TinyMCE — content area background to match dark theme */
[data-theme="dark"] .tox-tinymce { background: var(--surface) !important; border-color: var(--hairline) !important; }
[data-theme="dark"] .tox .tox-toolbar, [data-theme="dark"] .tox .tox-toolbar-overlord, [data-theme="dark"] .tox .tox-toolbar__primary { background: var(--surface-2) !important; }
[data-theme="dark"] .tox .tox-tbtn { color: var(--ink) !important; }
[data-theme="dark"] .tox .tox-tbtn svg { fill: var(--ink) !important; }
[data-theme="dark"] .tox .tox-edit-area__iframe { background: var(--surface) !important; }

/* Bootstrap dark-mode hover bg fix for table rows */
[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--bg-soft); color: var(--ink); }

/* Bootstrap badge default backgrounds in dark mode (used by .bg-light-subtle etc.) */
[data-theme="dark"] .bg-light, [data-theme="dark"] .bg-light-subtle { background-color: var(--surface-2) !important; color: var(--ink) !important; }
[data-theme="dark"] .text-bg-light { background-color: var(--surface-2) !important; color: var(--ink) !important; }

/* Bootstrap text-* utilities — ensure good contrast in both themes */
.text-secondary { color: var(--muted) !important; }
[data-theme="dark"] .text-secondary { color: var(--muted) !important; }
.text-info    { color: var(--brand) !important; }
.text-success { color: var(--status-success) !important; }
.text-warning { color: var(--status-warning) !important; }
.text-danger  { color: var(--status-danger) !important; }
[data-theme="dark"] .text-info    { color: #93c5fd !important; }
[data-theme="dark"] .text-success { color: #86efac !important; }
[data-theme="dark"] .text-warning { color: #fdba74 !important; }
[data-theme="dark"] .text-danger  { color: #fca5a5 !important; }

/* Bootstrap bg-* utilities — used as colored badges. Defaults look fine in
   light, but in dark we tone them down so they don't shout. */
[data-theme="dark"] .bg-secondary { background-color: var(--surface-2) !important; color: var(--ink) !important; }
[data-theme="dark"] .bg-info    { background-color: rgba(29,78,216,.30) !important; color: #93c5fd !important; }
[data-theme="dark"] .bg-success { background-color: rgba(22,163,74,.30) !important; color: #86efac !important; }
[data-theme="dark"] .bg-warning { background-color: rgba(217,119,6,.30) !important; color: #fdba74 !important; }
[data-theme="dark"] .bg-danger  { background-color: rgba(220,38,38,.30) !important; color: #fca5a5 !important; }
[data-theme="dark"] .text-bg-secondary { background-color: var(--surface-2) !important; color: var(--ink) !important; }
[data-theme="dark"] .text-bg-primary   { background-color: var(--brand) !important; color: #fff !important; }
[data-theme="dark"] .text-bg-warning   { background-color: rgba(217,119,6,.30) !important; color: #fdba74 !important; }
[data-theme="dark"] .text-bg-success   { background-color: rgba(22,163,74,.30) !important; color: #86efac !important; }
[data-theme="dark"] .text-bg-danger    { background-color: rgba(220,38,38,.30) !important; color: #fca5a5 !important; }

/* Bootstrap small alerts inside cards (dismissible flash) — ensure close
   button is visible against tinted backgrounds in dark mode */
[data-theme="dark"] .alert .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Borders inside content (e.g. <dt> labels with hairline) */
[data-theme="dark"] hr { border-top-color: var(--hairline); }

/* Reports tab pills (used by /admin/reports tab nav) */
.reports-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.95rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--bg-soft);
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.reports-tab:hover { background: var(--surface-2); color: var(--ink); border-color: var(--hairline); }
.reports-tab.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 4px 14px rgba(29,78,216,.35);
}
[data-theme="dark"] .reports-tab { background: var(--surface-2); color: var(--ink-soft); }
[data-theme="dark"] .reports-tab:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--hairline); }
[data-theme="dark"] .reports-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Bootstrap .table-primary (used to highlight "currently editing" row) — defaults to a pale blue
   that turns into a near-white block. Override every CSS variable Bootstrap
   reads (bg, hover-bg, striped-bg, active-bg) so the row stays brand-tinted
   on idle AND hover. */
.table-primary, .table-primary > * {
    --bs-table-bg: rgba(29,78,216,.10);
    --bs-table-hover-bg: rgba(29,78,216,.18);
    --bs-table-striped-bg: rgba(29,78,216,.14);
    --bs-table-active-bg: rgba(29,78,216,.20);
    --bs-table-color: var(--ink);
    --bs-table-hover-color: var(--ink);
    --bs-table-striped-color: var(--ink);
    --bs-table-active-color: var(--ink);
    --bs-table-border-color: rgba(29,78,216,.25);
    color: var(--ink);
}
[data-theme="dark"] .table-primary, [data-theme="dark"] .table-primary > * {
    --bs-table-bg: rgba(29,78,216,.18);
    --bs-table-hover-bg: rgba(29,78,216,.28);
    --bs-table-striped-bg: rgba(29,78,216,.22);
    --bs-table-active-bg: rgba(29,78,216,.30);
    --bs-table-color: var(--ink);
    --bs-table-hover-color: var(--ink);
    --bs-table-striped-color: var(--ink);
    --bs-table-active-color: var(--ink);
    --bs-table-border-color: rgba(29,78,216,.35);
    color: var(--ink);
}

/* List groups (Recent Comments, etc.) — Bootstrap defaults to white bg */
.list-group { --bs-list-group-bg: var(--surface); --bs-list-group-color: var(--ink); --bs-list-group-border-color: var(--hairline); }
.list-group-item { background-color: var(--surface); color: var(--ink); border-color: var(--hairline); }
.list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--bg-soft); color: var(--ink); }
[data-theme="dark"] .list-group { --bs-list-group-bg: var(--surface); --bs-list-group-color: var(--ink); --bs-list-group-border-color: var(--hairline); }
[data-theme="dark"] .list-group-item { background-color: var(--surface); color: var(--ink); border-color: var(--hairline); }
[data-theme="dark"] .list-group-item-action:hover, [data-theme="dark"] .list-group-item-action:focus { background-color: var(--bg-soft); color: var(--ink); }
.list-group-flush > .list-group-item { border-left: 0; border-right: 0; border-radius: 0; }
.list-group-flush > .list-group-item:last-child { border-bottom: 0; }
.list-group-flush > .list-group-item:first-child { border-top: 0; }

/* Select2 (Bootstrap 5 theme) — used by .tag-input on post editor */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--surface) !important;
    border-color: var(--hairline) !important;
    color: var(--ink) !important;
}
.select2-container--bootstrap-5 .select2-selection .select2-selection__rendered { color: var(--ink) !important; }
.select2-container--bootstrap-5 .select2-search__field { color: var(--ink) !important; }
.select2-container--bootstrap-5 .select2-search__field::placeholder { color: var(--muted) !important; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--brand-soft) !important;
    border-color: rgba(29,78,216,.3) !important;
    color: var(--brand) !important;
    border-radius: 999px !important;
    padding: 2px 10px 2px 6px !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--brand) !important;
    background: transparent !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--status-danger) !important;
}
.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--surface) !important;
    border-color: var(--hairline) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-2) !important;
}
.select2-container--bootstrap-5 .select2-results__option { color: var(--ink) !important; }
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--brand) !important;
    color: #fff !important;
}
.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(29,78,216,.12) !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(29,78,216,.25) !important;
    border-color: rgba(29,78,216,.4) !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove { color: #93c5fd !important; }
[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: var(--brand) !important; }