/* ============================================================
   SiteBoma - Main Stylesheet
   Every colour comes from the SiteBoma palette in the sb:tokens
   block below: indigo #1E2A78, amber #F59E0B, off-white #F8FAFC,
   slate #0F172A, plus red for errors only.
   ============================================================ */

/* ── Inter (Rasmus Andersson, OFL/Apache-licensed) — the ONE font ─
   Self-hosted to avoid any third-party font request. Loaded with
   font-display:swap so text is visible during font load. Subsets keep
   the woff2 small. ANY page that includes this stylesheet gets Inter
   sitewide — admin, client, public, errors. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* sb:tokens:start ─────────────────────────────────────────────────────────
   THE SITEBOMA PALETTE. Every colour on the site is one of these four, used
   solid or at lower opacity, plus red for errors only:
     indigo #1E2A78 · amber #F59E0B · off-white #F8FAFC · slate #0F172A
   Pages use the ROLE tokens below (--sb-text, --sb-surface, --sb-primary…),
   which the dark theme redefines, so nothing needs a per-page dark patch.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --sb-indigo: #1E2A78;  --sb-indigo-rgb: 30, 42, 120;
    --sb-amber:  #F59E0B;  --sb-amber-rgb: 245, 158, 11;
    --sb-paper:  #F8FAFC;  --sb-paper-rgb: 248, 250, 252;   /* off-white */
    --sb-ink:    #0F172A;  --sb-ink-rgb: 15, 23, 42;        /* slate     */
    --sb-red:    #DC2626;  --sb-red-rgb: 220, 38, 38;       /* errors only */

    /* Roles, light theme (the default) */
    --sb-bg:              var(--sb-paper);
    --sb-surface:         var(--sb-paper);            /* cards, panels, inputs, menus */
    --sb-surface-2:       rgba(30, 42, 120, .04);     /* table heads, chips, soft sections */
    --sb-surface-3:       rgba(30, 42, 120, .08);     /* hover, zebra, stronger wash */
    --sb-text:            var(--sb-ink);
    --sb-text-2:          rgba(15, 23, 42, .82);
    --sb-muted:           rgba(15, 23, 42, .66);      /* 6:1 on off-white */
    --sb-faint:           rgba(15, 23, 42, .60);
    --sb-border:          rgba(15, 23, 42, .12);
    --sb-border-strong:   rgba(15, 23, 42, .26);
    --sb-neutral:         rgba(15, 23, 42, .45);      /* grey dots and badges */
    --sb-primary:         var(--sb-indigo);           /* indigo fills: the same in both themes */
    --sb-primary-text:    var(--sb-indigo);           /* indigo as a text or icon colour */
    --sb-primary-border:  var(--sb-indigo);
    --sb-primary-soft:    rgba(30, 42, 120, .08);
    --sb-primary-line:    rgba(30, 42, 120, .28);
    --sb-primary-hover:   var(--sb-ink);
    --sb-on-primary:      var(--sb-paper);
    --sb-on-primary-hover: var(--sb-paper);
    --sb-accent:          var(--sb-amber);
    --sb-on-accent:       var(--sb-ink);              /* amber always takes slate text, never white */
    --sb-link:            var(--sb-indigo);
    --sb-success:         var(--sb-indigo);           /* no green: success is indigo */
    --sb-success-soft:    rgba(30, 42, 120, .08);
    --sb-warning-text:    #8A5A00;                    /* amber, deepened for TEXT on light surfaces (amber itself is 2:1 on off-white): 5:1 on white, shaded rows and amber tints */
    --sb-warning-soft:    rgba(245, 158, 11, .16);
    --sb-warning-line:    rgba(245, 158, 11, .55);
    --sb-danger:          #B91C1C;                    /* the error red, deepened for TEXT on light surfaces: #DC2626 is under 4.5:1 on tinted rows and pills */
    --sb-danger-solid:    var(--sb-red);
    --sb-danger-soft:     rgba(220, 38, 38, .09);
    --sb-danger-line:     rgba(220, 38, 38, .35);
    --sb-danger-on-dark:  #F87171;                    /* the error red, lightened for dark backgrounds */
    --sb-on-dark:         var(--sb-paper);            /* text on indigo or slate, both themes */
    --sb-on-dark-2:       rgba(248, 250, 252, .78);
    --sb-on-dark-3:       rgba(248, 250, 252, .56);
    --sb-on-dark-line:    rgba(248, 250, 252, .16);
    --sb-band:            var(--sb-ink);              /* footer, top bar, code: dark in both themes */
    --sb-fg-rgb:          var(--sb-ink-rgb);          /* the text colour as channels: rgba(var(--sb-fg-rgb), .6) */
    --sb-surface-rgb:     var(--sb-paper-rgb);        /* the card surface as channels, for frosted panels */

    /* Older token names, kept as aliases so existing pages follow the palette */
    --primary:       var(--sb-primary);
    --primary-dark:  var(--sb-ink);
    --primary-light: var(--sb-primary-soft);
    --accent:        var(--sb-amber);
    --accent-dark:   var(--sb-ink);
    --success:       var(--sb-success);
    --text:          var(--sb-text);
    --muted:         var(--sb-muted);
    --border:        var(--sb-border);
    --bg-light:      var(--sb-surface-2);
    --surface-1:     var(--sb-surface);
    --surface-2:     var(--sb-surface-2);
    --surface-3:     var(--sb-surface-3);
    --text-2:        var(--sb-text-2);
    --link:          var(--sb-link);

    --hk-font: 'Inter', 'Inter Fallback', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Roles, dark theme (chosen with the toggle). Built from the same four colours:
   slate page, indigo-tinted slate cards, off-white text, amber links and accents. */
[data-theme="dark"] {
    --sb-bg:              var(--sb-ink);
    --sb-surface:         #141D41;                    /* indigo at 30% over slate, made solid */
    --sb-surface-2:       rgba(248, 250, 252, .04);
    --sb-surface-3:       rgba(248, 250, 252, .08);
    --sb-text:            var(--sb-paper);
    --sb-text-2:          rgba(248, 250, 252, .84);
    --sb-muted:           rgba(248, 250, 252, .68);
    --sb-faint:           rgba(248, 250, 252, .50);
    --sb-border:          rgba(248, 250, 252, .12);
    --sb-border-strong:   rgba(248, 250, 252, .26);
    --sb-neutral:         rgba(248, 250, 252, .30);
    --sb-primary-text:    var(--sb-paper);
    --sb-primary-border:  rgba(248, 250, 252, .40);
    --sb-primary-soft:    rgba(30, 42, 120, .55);
    --sb-primary-line:    rgba(248, 250, 252, .24);
    --sb-primary-hover:   var(--sb-amber);
    --sb-on-primary-hover: var(--sb-ink);
    --sb-link:            var(--sb-amber);
    --sb-success:         var(--sb-paper);
    --sb-success-soft:    rgba(30, 42, 120, .55);
    --sb-warning-text:    var(--sb-amber);
    --sb-warning-soft:    rgba(245, 158, 11, .14);
    --sb-danger:          #F87171;
    --sb-danger-soft:     rgba(220, 38, 38, .18);
    --sb-danger-line:     rgba(220, 38, 38, .45);
    --sb-fg-rgb:          var(--sb-paper-rgb);
    --sb-surface-rgb:     20, 29, 65;                 /* #141D41 */
    color-scheme: dark;
}
/* sb:tokens:end */

* { box-sizing: border-box; }

/* Enforce Inter on every element — overrides Bootstrap's default font stack
   and any per-page <style> blocks. Monospace stays monospace where the
   browser/Bootstrap explicitly asks for it (code, pre, .font-monospace). */
html, body, button, input, select, textarea, .btn, .form-control, .form-select,
.navbar, .dropdown-menu, .nav-link, .accordion-button, .modal, .modal-title,
.alert, .badge, h1, h2, h3, h4, h5, h6, p, span, div, li, a, label, th, td {
    font-family: var(--hk-font);
}

body {
    font-family: var(--hk-font);
    color: var(--text);
    background: var(--sb-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────────────
   Excel-tight tables — applied sitewide for uniformity.
   Row height = text height. ~20px rows, no breathing room.
   Light-mode colors preserved (white bg, soft borders).
   Use class `.table-airy` for tables that need normal padding.
   ───────────────────────────────────────────────────────────────── */
.table {
    line-height: 1.15;
    margin-bottom: 0;
}
.table thead th {
    padding: .15rem .5rem;
    font-weight: 600;
    color: var(--sb-text-2);
    background: var(--sb-surface);
    border-bottom: 1px solid var(--sb-border);
    white-space: nowrap;
    line-height: 1.15;
}
.table tbody td,
.table tbody th {
    padding: .1rem .5rem;        /* ~1-2px top/bottom — row collapses to text */
    vertical-align: middle;
    border-color: var(--sb-border);
    line-height: 1.15;
}
/* Zebra striping — applied to every .table by default for readability */
.table tbody tr:nth-of-type(odd)  > * { background-color: var(--sb-surface); }
.table tbody tr:nth-of-type(even) > * { background-color: var(--sb-surface-2); }
/* Hover overrides zebra — slightly darker than the even-row tint */
.table.table-hover tbody tr:hover > * { background-color: var(--sb-surface-3) !important; }
/* Inline elements — keep their content height equal-to-or-less-than
   the row's natural text height so they don't push it taller. */
.table .btn,
.table .btn-sm {
    padding: 0 .45rem;
    line-height: 1.4;
    border-radius: 4px;
    font-size: .85rem;
}
.table .badge {
    padding: 0 .4rem;
    line-height: 1.4;
    font-weight: 600;
    font-size: .72rem;
    vertical-align: middle;
}
.table .feature-icon,
.table [class*="rounded-circle"] {
    width: 20px !important;
    height: 20px !important;
    font-size: .7rem !important;
    flex-shrink: 0;
}
.table img.rounded-circle,
.table .avatar {
    width: 18px;
    height: 18px;
}
.table input.form-control,
.table select.form-select,
.table .form-check-input {
    padding: 0 .4rem;
    line-height: 1.4;
    min-height: 0;
    font-size: inherit;
}
.table .form-check {
    min-height: 0;
    margin-bottom: 0;
}

/* Opt-out: tables that want normal padding can add .table-airy */
.table.table-airy thead th { padding: .75rem 1rem; line-height: 1.5; }
.table.table-airy tbody td,
.table.table-airy tbody th { padding: .75rem 1rem; line-height: 1.5; }
.table.table-airy .btn { padding: .35rem .8rem; line-height: 1.5; font-size: 1rem; }

/* ─────────────────────────────────────────────────────────────────
   Hero & homepage polish — subtle, modern, conversion-safe.
   ───────────────────────────────────────────────────────────────── */

/* Subtle dot-grid pattern behind the hero — adds depth without
   competing with the headline. Light at the corners, fading to nothing. */
.hero {
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(248,250,252,.10) 1px, transparent 0);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, var(--sb-band) 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, var(--sb-band) 40%, transparent 100%);
    pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

/* Price-pill below H1 — the conversion anchor.
   Glassy white outline, slightly translucent fill so it sits on the gradient
   without feeling like a separate block. */
.hk-price-pill {
    background: rgba(248,250,252,.12);
    border: 1px solid rgba(248,250,252,.28);
    border-radius: 999px;
    padding: .35rem .85rem .35rem 1rem;
    color: var(--sb-on-dark);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hk-price-pill-label  { font-size: .8rem; opacity: .8; }
.hk-price-pill-amount { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.hk-price-pill-suffix { font-size: .85rem; opacity: .85; }

/* Hero bullets — flat checkmarks, not chunky circles. Reads as
   prerequisites/terms, not as features competing with the CTAs. */
.hk-hero-bullets {
    gap: .15rem 1.25rem;
}
.hk-hero-bullets li {
    color: rgba(248,250,252,.78);
    font-size: .88rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.hk-hero-bullets li i {
    color: var(--sb-accent);
    font-size: .95rem;
    stroke-width: 2;
}

/* Pulsing badge in the hero — communicates "live, active service" */
.hk-pulse {
    box-shadow: 0 0 0 0 rgba(30,42,120,.55);
    animation: hkPulse 2.4s ease-out infinite;
}
@keyframes hkPulse {
    0%   { box-shadow: 0 0 0 0    rgba(30,42,120,.55); }
    65%  { box-shadow: 0 0 0 14px rgba(30,42,120,0);   }
    100% { box-shadow: 0 0 0 0    rgba(30,42,120,0);   }
}
@media (prefers-reduced-motion: reduce) {
    .hk-pulse { animation: none; }
}

/* Primary CTA — gentle lift on hover, white-on-blue */
.hk-cta {
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 4px 14px rgba(15,23,42,.10);
}
.hk-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15,23,42,.18);
}

/* Domain-search card — sleeker shadow, softer corners on dark hero */
.domain-search-card {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ─────────────────────────────────────────────────────────────────
   Pricing card — make the "popular" plan visually dominant
   ───────────────────────────────────────────────────────────────── */
.pricing-card-new.featured-plan {
    position: relative;
    z-index: 2;
    transform: scale(1.025);
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 16px 38px rgba(30, 42, 120, .25), 0 4px 12px rgba(15,23,42,.06);
}
.pricing-card-new.featured-plan:hover {
    transform: scale(1.04);
    box-shadow: 0 22px 48px rgba(30, 42, 120, .32), 0 6px 16px rgba(15,23,42,.08);
}
.pricing-card-new:not(.featured-plan) {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pricing-card-new:not(.featured-plan):hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.pricing-card-new .popular-badge {
    background: linear-gradient(135deg, var(--sb-accent), #f59e0b);
    color: var(--sb-on-accent);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .68rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(245, 158, 11, .35);
}

/* ─────────────────────────────────────────────────────────────────
   Section heading polish — bigger, tighter, more confident
   ───────────────────────────────────────────────────────────────── */
.section-heading {
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--sb-text);
}
.section-sub {
    font-size: 1.05rem;
    color: var(--sb-muted);
    max-width: 620px;
    margin: .5rem auto 0;
}

/* Stat-bar values — slightly larger, more confident */
.stats-bar .stat-item .h3 {
    font-weight: 800;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    letter-spacing: -.02em;
}

/* ─────────────────────────────────────────────────────────────────
   Theme toggle (sun/moon button in the topbar)
   ───────────────────────────────────────────────────────────────── */
.hk-theme-toggle {
    background: rgba(248,250,252,.10);
    border: 1px solid rgba(248,250,252,.18);
    color: var(--sb-on-dark);
    width: 28px; height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    padding: 0;
}
.hk-theme-toggle:hover { background: rgba(248,250,252,.22); transform: rotate(8deg); }
.hk-theme-icon-light, .hk-theme-icon-dark { transition: opacity .2s ease, transform .3s ease; }
.hk-theme-icon-dark   { display: none; }
[data-theme="dark"] .hk-theme-icon-light { display: none; }
[data-theme="dark"] .hk-theme-icon-dark  { display: inline; color: var(--sb-accent); }
@media (prefers-reduced-motion: reduce) {
    .hk-theme-toggle, .hk-theme-icon-light, .hk-theme-icon-dark { transition: none; }
    .hk-theme-toggle:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────
   DARK MODE — applied when <html data-theme="dark">.
   Brand gradients (hero, M-Pesa, footer, primary buttons) stay branded.
   Only neutral surfaces (body, cards, tables, FAQ items, glossary,
   nav, page chrome) shift to dark.
   Smooth-transition applies to body/card/text only — heavier elements
   (gradients, images) snap to avoid jank.
   ───────────────────────────────────────────────────────────────── */
html { transition: background-color .2s ease; }
[data-theme="dark"] {
    color-scheme: dark;
}
[data-theme="dark"] body {
    background: var(--sb-bg);
    color: var(--sb-text);
}
[data-theme="dark"] body,
[data-theme="dark"] .card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .pricing-card-new {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Navbar — was white, now dark with subtle border */
[data-theme="dark"] .navbar.bg-white {
    background-color: #0f172a !important;
    border-bottom: 1px solid var(--sb-border) !important;
}
[data-theme="dark"] .navbar .nav-link,
[data-theme="dark"] .navbar .navbar-brand {
    color: var(--sb-text) !important;
}
[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .nav-link.active { color: var(--sb-link) !important; }
[data-theme="dark"] .dropdown-menu {
    background-color: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text);
}
[data-theme="dark"] .dropdown-item { color: var(--sb-text-2); }
[data-theme="dark"] .dropdown-item:hover { background: var(--sb-surface-3); color: var(--sb-text); }
[data-theme="dark"] .dropdown-divider { border-color: var(--sb-border); }
[data-theme="dark"] .dropdown-header { color: var(--sb-muted); }
[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* Sections with bg-white or default white backgrounds */
[data-theme="dark"] section.bg-white,
[data-theme="dark"] section.bg-light,
[data-theme="dark"] section[style*="background:var(--bg-light)"],
[data-theme="dark"] section[style*="background:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] section[style*="background:linear-gradient(180deg,var(--sb-surface, #F8FAFC)"] {
    background: var(--sb-band) !important;
}
[data-theme="dark"] section[style*="background:linear-gradient(180deg,var(--sb-surface, #F8FAFC)"] {
    background: linear-gradient(180deg, var(--sb-band) 0%, #0f172a 100%) !important;
}

/* Cards, table-cards, generic light containers */
[data-theme="dark"] .table-card,
[data-theme="dark"] .card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .pricing-card-new {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text);
}
[data-theme="dark"] .card-header { background: #0f172a; border-color: var(--sb-border); color: var(--sb-text); }
[data-theme="dark"] .table thead th { background: #0f172a !important; color: var(--sb-muted); border-color: var(--sb-border); }
[data-theme="dark"] .table tbody tr:nth-of-type(odd)  > * { background-color: var(--sb-surface); color: var(--sb-text); }
[data-theme="dark"] .table tbody tr:nth-of-type(even) > * { background-color: var(--sb-surface-2); color: var(--sb-text); }
[data-theme="dark"] .table.table-hover tbody tr:hover > * { background-color: var(--sb-surface-3) !important; }
[data-theme="dark"] .table { color: var(--sb-text); border-color: var(--sb-border); }
[data-theme="dark"] .table-light { background-color: #0f172a !important; color: var(--sb-muted); }

/* Text-utility overrides */
[data-theme="dark"] .text-muted { color: var(--sb-muted) !important; }
[data-theme="dark"] .text-dark  { color: var(--sb-text) !important; }
[data-theme="dark"] hr          { border-color: var(--sb-border); opacity: .5; }
[data-theme="dark"] code        { background: var(--sb-surface-3); color: var(--sb-text); }
[data-theme="dark"] pre, [data-theme="dark"] pre code { background: var(--sb-bg); color: var(--sb-text); }

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text {
    background: #0f172a;
    border-color: var(--sb-border);
    color: var(--sb-text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--sb-faint); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: #0f172a;
    border-color: var(--sb-accent);
    color: var(--sb-text);
    box-shadow: 0 0 0 .2rem rgba(30,42,120,.18);
}
[data-theme="dark"] .form-label { color: var(--sb-text-2); }
[data-theme="dark"] .form-check-input { background-color: #0f172a; border-color: var(--sb-border-strong); }
[data-theme="dark"] .form-check-input:checked { background-color: var(--sb-primary); border-color: var(--sb-primary-line); }
[data-theme="dark"] .form-text { color: var(--sb-muted); }

/* Accordion (Bootstrap) */
[data-theme="dark"] .accordion-item { background: var(--sb-surface); border-color: var(--sb-border); color: var(--sb-text); }
[data-theme="dark"] .accordion-button { background: var(--sb-surface); color: var(--sb-text); }
[data-theme="dark"] .accordion-button:not(.collapsed) { background: #0f172a; color: var(--sb-link); box-shadow: inset 0 -1px 0 var(--sb-border); }
[data-theme="dark"] .accordion-button::after { filter: invert(1) opacity(.7); }
[data-theme="dark"] .accordion-body { color: var(--sb-text-2); }

/* Custom FAQ cards (homepage redesign) */
[data-theme="dark"] .hk-faq-item { background: var(--sb-surface); border-color: var(--sb-border); }
[data-theme="dark"] .hk-faq-item:hover { border-color: var(--sb-border-strong); }
[data-theme="dark"] .hk-faq-q { color: var(--sb-text); }
[data-theme="dark"] .hk-faq-a { color: var(--sb-muted); }

/* Glossary `<dl>` rows */
[data-theme="dark"] dt { color: var(--sb-text); }
[data-theme="dark"] dd { color: var(--sb-muted); }

/* Buttons — keep solid colours, soften .btn-light to a slate */
[data-theme="dark"] .btn-light { background: var(--sb-surface); color: var(--sb-text); border-color: var(--sb-border); }
[data-theme="dark"] .btn-light:hover { background: var(--sb-surface-3); color: var(--sb-text); }
[data-theme="dark"] .btn-outline-secondary { color: var(--sb-text-2); border-color: var(--sb-border-strong); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--sb-surface-3); color: var(--sb-text); border-color: var(--sb-border-strong); }
[data-theme="dark"] .btn-outline-primary { color: var(--sb-link); border-color: var(--sb-primary-line); }
[data-theme="dark"] .btn-outline-primary:hover { background: var(--sb-primary); color: var(--sb-text); }

/* Soft-tinted pricing/feature card backgrounds — convert to dark slate with hue retained */
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="background:var(--sb-surface-3, rgba(30,42,120,.08))"] {
    background: var(--sb-surface-3) !important;
}
[data-theme="dark"] [style*="background:var(--sb-success-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="background:var(--sb-success-soft, rgba(30,42,120,.08))"] {
    background: var(--sb-primary-soft) !important;
}
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"],
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"] {
    background: var(--sb-warning-soft) !important;
}
[data-theme="dark"] [style*="background:var(--sb-danger-soft, rgba(220,38,38,.09))"],
[data-theme="dark"] [style*="background:var(--sb-danger-soft, rgba(220,38,38,.09))"] {
    background: var(--sb-danger-soft) !important;
}
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="background:var(--sb-primary-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="background:var(--sb-primary-soft, rgba(30,42,120,.08))"] {
    background: var(--sb-surface) !important;
}
[data-theme="dark"] [style*="background:var(--sb-primary-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="background:var(--sb-primary-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="background:var(--sb-primary-soft, rgba(30,42,120,.08))"] {
    background: var(--sb-primary-soft) !important;
}
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"],
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"] {
    background: var(--sb-warning-soft) !important;
}
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background:var(--bg-light)"] {
    background: var(--sb-surface) !important;
}
/* Defensive: anchor wrappers around niche-style cards shouldn't expose any link-default bg */
[data-theme="dark"] a:hover [style*="background:var(--bg-light)"],
[data-theme="dark"] a:focus [style*="background:var(--bg-light)"] {
    background: var(--sb-surface-3) !important;
}
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"] {
    background: var(--sb-surface) !important;
}

/* Borders that were light */
[data-theme="dark"] [style*="border:1px solid var(--sb-border, rgba(15,23,42,.12))"],
[data-theme="dark"] [style*="border:1px solid var(--sb-border, rgba(15,23,42,.12))"],
[data-theme="dark"] [style*="border:1px solid var(--sb-primary-line, rgba(30,42,120,.28))"],
[data-theme="dark"] [style*="border:1px solid var(--sb-warning-line, rgba(245,158,11,.55))"],
[data-theme="dark"] [style*="border:1px solid var(--sb-primary-line, rgba(30,42,120,.28))"],
[data-theme="dark"] [style*="border:1px solid var(--sb-warning-line, rgba(245,158,11,.55))"] {
    border-color: var(--sb-border) !important;
}

/* Stats bar — keep brand gradient, force readable text */
[data-theme="dark"] .stats-bar { background: linear-gradient(135deg, var(--sb-band), var(--sb-band)); }

/* Blog post body (blog-post.php, and the preview in the admin blog editor), both themes */
.blog-content { font-size: 1.02rem; line-height: 1.8; color: var(--sb-text, #0F172A); }
.blog-content h2 { font-weight: 700; font-size: 1.4rem; margin: 2rem 0 .75rem; color: var(--sb-text, #0F172A); }
.blog-content h3 { font-weight: 600; font-size: 1.15rem; margin: 1.5rem 0 .5rem; color: var(--sb-text, #0F172A); }
.blog-content p  { margin-bottom: 1.1rem; }
.blog-content ul, .blog-content ol { padding-left: 1.4rem; margin-bottom: 1.1rem; }
.blog-content li { margin-bottom: .4rem; }
.blog-content a:not(.btn)  { color: var(--sb-link, #1E2A78); }
.blog-content a:not(.btn):hover { color: var(--sb-link, #1E2A78); }
.blog-content code { background: var(--sb-surface-2, rgba(30,42,120,.04)); padding: 2px 6px; border-radius: 4px; font-size: .9em; color: var(--sb-text, #0F172A); }
.blog-content table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.blog-content blockquote { border-left: 4px solid var(--sb-primary-border, #1E2A78); padding: .75rem 1.25rem; background: var(--sb-surface-2, rgba(30,42,120,.04)); margin: 1.25rem 0; border-radius: 0 8px 8px 0; }
/* Wide tables and long lines stay inside the column on phones: tables scroll on their own */
.blog-content { overflow-wrap: break-word; }
.blog-content table { display: block; max-width: 100%; overflow-x: auto; }
.blog-content pre { max-width: 100%; overflow-x: auto; }
.blog-content img, .blog-content video, .blog-content iframe { max-width: 100%; }
.blog-content img, .blog-content video { height: auto; }
[data-theme="dark"] .blog-content { color: var(--sb-text-2); }
[data-theme="dark"] .blog-content h2,
[data-theme="dark"] .blog-content h3 { color: var(--sb-text); }
[data-theme="dark"] .blog-content a:not(.btn)   { color: var(--sb-link); }
[data-theme="dark"] .blog-content blockquote { background: var(--sb-surface); border-left-color: var(--sb-primary-line); color: var(--sb-text-2); }
[data-theme="dark"] .blog-content code { background: var(--sb-surface-3); color: var(--sb-text); }

/* Knowledge-base article */
[data-theme="dark"] .kb-article { color: var(--sb-text-2); }
[data-theme="dark"] .kb-article h2,
[data-theme="dark"] .kb-article h3 { color: var(--sb-text); }
[data-theme="dark"] .kb-article a { color: var(--sb-link); }
[data-theme="dark"] .kb-article code { background: var(--sb-surface-3); color: var(--sb-text); }

/* Section headings — slightly lighter so they pop in dark */
[data-theme="dark"] .section-heading { color: var(--sb-text); }
[data-theme="dark"] .section-sub     { color: var(--sb-muted); }
[data-theme="dark"] .footer-col-title { color: var(--sb-on-dark); }

/* Bootstrap modal */
[data-theme="dark"] .modal-content { background: var(--sb-surface); color: var(--sb-text); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--sb-border); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.5); }

/* Alerts — keep coloured backgrounds readable */
[data-theme="dark"] .alert-info    { background: var(--sb-surface); color: var(--sb-link); border-color: var(--sb-primary-line); }
[data-theme="dark"] .alert-warning { background: var(--sb-warning-soft); color: var(--sb-accent); border-color: var(--sb-warning-line); }
[data-theme="dark"] .alert-success { background: var(--sb-primary-soft); color: var(--sb-success); border-color: var(--sb-primary-line); }
[data-theme="dark"] .alert-danger  { background: var(--sb-danger-soft); color: var(--sb-danger); border-color: var(--sb-danger-line); }

/* Currency switcher in dark — already on dark topbar; minor refinement */
[data-theme="dark"] .hk-cur-switch { background: rgba(248,250,252,.06); border-color: rgba(248,250,252,.10); }
[data-theme="dark"] .hk-cur-switch button:not(.active) { color: var(--sb-text-2); }
[data-theme="dark"] .hk-cur-switch button:not(.active):hover { background: rgba(248,250,252,.10); color: var(--sb-text); }

/* Reading-progress bar (from ui-enhancements.js) — keep visible against dark bg */
[data-theme="dark"] .hk-progress { background: linear-gradient(90deg, var(--sb-primary), var(--sb-primary)); }

/* ─────────────────────────────────────────────────────────────────
   DASHBOARD SURFACES (admin + client)
   Each page has its own inline <style> with light hard-codes
   (.dash-card, .svc-list, .content-area, etc). These selectors win
   over the inline ones by combining [data-theme] attribute + class.
   ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] .content-area { background: var(--sb-bg); color: var(--sb-text); }

/* Admin / shared dashboard cards */
[data-theme="dark"] .dash-card {
    background: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text);
}
[data-theme="dark"] .dash-card-head { border-bottom-color: var(--sb-border) !important; color: var(--sb-text); }
[data-theme="dark"] .dash-card-head h6 { color: var(--sb-text); }
[data-theme="dark"] .dash-list li { border-bottom-color: var(--sb-border) !important; }
[data-theme="dark"] .dash-row-info .name { color: var(--sb-text) !important; }
[data-theme="dark"] .dash-row-info .meta,
[data-theme="dark"] .dash-row-tail,
[data-theme="dark"] .dash-empty { color: var(--sb-muted) !important; }

/* Client dashboard service list */
[data-theme="dark"] .svc-list .svc-row { background: var(--sb-surface); color: var(--sb-text); }
[data-theme="dark"] .svc-list .svc-row:hover { background: var(--sb-surface-3) !important; }
[data-theme="dark"] .svc-list .svc-row.svc-suspended { background: var(--sb-danger-soft) !important; }

/* Generic dashboard surfaces — anything still using #fff or #f8f9ff via inline style */
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background: var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="background: var(--sb-surface-2, rgba(30,42,120,.04))"] { background: var(--sb-surface) !important; }
[data-theme="dark"] [style*="border:1px solid var(--sb-border, rgba(15,23,42,.12))"],
[data-theme="dark"] [style*="border:1px solid var(--sb-border, rgba(15,23,42,.12))"],
[data-theme="dark"] [style*="border:1px solid var(--sb-border, rgba(15,23,42,.12))"],
[data-theme="dark"] [style*="border-bottom:1px solid var(--sb-border, rgba(15,23,42,.12))"],
[data-theme="dark"] [style*="border-bottom:1px solid var(--sb-border, rgba(15,23,42,.12))"] { border-color: var(--sb-border) !important; }

/* Page-level helpers — common Bootstrap utility backgrounds */
[data-theme="dark"] .bg-white { background-color: var(--sb-surface) !important; color: var(--sb-text); }
[data-theme="dark"] .bg-light { background-color: var(--sb-surface) !important; color: var(--sb-text); }
[data-theme="dark"] .border   { border-color: var(--sb-border) !important; }
[data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--sb-border) !important; }

/* List groups (used in admin & client) */
[data-theme="dark"] .list-group-item { background: var(--sb-surface); color: var(--sb-text); border-color: var(--sb-border); }
[data-theme="dark"] .list-group-item-action:hover { background: var(--sb-surface-3); color: var(--sb-text); }

/* Nav tabs */
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--sb-border); }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--sb-muted); border-color: transparent; }
[data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--sb-text); border-color: var(--sb-border) var(--sb-border) transparent; }
[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--sb-text); background: var(--sb-surface); border-color: var(--sb-border) var(--sb-border) var(--sb-border); }

/* Badges & pills with light backgrounds */
[data-theme="dark"] .badge.bg-light { background-color: var(--sb-surface-3) !important; color: var(--sb-text) !important; }
[data-theme="dark"] .badge.text-dark { color: var(--sb-text) !important; }

/* Headings inside cards */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--sb-text); }

/* "Pricing card" / metric tiles using inline background:#fff */
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC);border"],
[data-theme="dark"] [style*="background: var(--sb-surface, #F8FAFC);border"],
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"] { background: var(--sb-surface) !important; }

/* Back-to-top button on dark surfaces */
[data-theme="dark"] .hk-top { background: var(--sb-primary); box-shadow: 0 6px 16px rgba(30,42,120,.45); }

/* ─────────────────────────────────────────────────────────────────
   Footer — CSS Grid layout that always fits on one row at desktop.
   Brand column is wider; the 5 menu columns are equal width.
   ───────────────────────────────────────────────────────────────── */
.hk-footer-grid {
    display: grid;
    gap: 2rem 2.25rem;
    grid-template-columns: 2.4fr 1fr 1fr 1fr 1fr 1.15fr;
    align-items: start;
}
.hk-footer-brand {
    max-width: 340px;
}
.hk-footer-brand p {
    line-height: 1.65;
}

/* Brand social icons — rounded chips with accent hover.
   Specificity bumped (.footer + .hk-footer-brand + a) so it
   overrides `.footer a.text-muted` without needing extra !important. */
.footer .hk-footer-brand nav a,
.footer .hk-footer-brand nav a.text-muted {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(248,250,252,.04);
    border: 1px solid rgba(248,250,252,.08);
    color: var(--sb-on-dark-2) !important;
    font-size: 1rem !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.footer .hk-footer-brand nav a:hover,
.footer .hk-footer-brand nav a.text-muted:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #0f172a !important;
    transform: translateY(-2px);
}

/* Column headings — white, with a small accent underline.
   !important on color so it beats `.footer p { color: #94a3b8 !important; }`. */
.footer-col-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sb-on-dark) !important;
    margin-bottom: 1rem !important;
    padding-bottom: .55rem;
    position: relative;
}
.footer-col-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 26px; height: 2px;
    background: var(--accent);
    border-radius: 2px;
    opacity: .95;
}

/* Links — more legible, gentle slide on hover */
.footer-link {
    color: var(--sb-on-dark-2);
    text-decoration: none;
    display: inline-block;
    line-height: 1.55;
    margin-bottom: .35rem;
    transition: color .15s ease, transform .15s ease;
}
.footer-link:hover {
    color: var(--sb-on-dark);
    transform: translateX(3px);
}
.footer-link.fw-semibold { color: var(--sb-on-dark); }

/* Newsletter — styled to live in the dark footer */
#hkNewsletter .form-control {
    background: rgba(248,250,252,.05);
    border: 1px solid rgba(248,250,252,.14);
    color: var(--sb-on-dark);
    height: 46px;
}
#hkNewsletter .form-control::placeholder { color: var(--sb-on-dark-3); }
#hkNewsletter .form-control:focus {
    background: rgba(248,250,252,.08);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245,158,11,.18);
    color: var(--sb-on-dark);
}
#hkNewsletter .btn-primary { height: 46px; padding-inline: 1.35rem; }

@media (max-width: 1199.98px) {
    .hk-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1.15fr; gap: 1.75rem 1.5rem; }
}
@media (max-width: 991.98px) {
    .hk-footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 1.75rem 1.5rem; }
    .hk-footer-brand { grid-column: 1 / -1; max-width: 100%; margin-bottom: .25rem; }
}
@media (max-width: 575.98px) {
    .hk-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
    .footer-col-title { margin-bottom: .7rem !important; }
}

/* Payment-method pills in footer bottom bar */
.hk-pay-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .7rem;
    background: rgba(248,250,252,.05);
    border: 1px solid rgba(248,250,252,.10);
    border-radius: 999px;
    font-size: .78rem;
    color: var(--sb-on-dark-2);
    transition: background .15s ease, border-color .15s ease;
}
.hk-pay-pill:hover {
    background: rgba(248,250,252,.08);
    border-color: rgba(248,250,252,.18);
}
.hk-pay-pill i { color: var(--sb-accent); font-size: .88rem; }

/* ── Top Bar ─────────────────────────────────────────────── */
.topbar {
    background: var(--primary-dark);
    color: var(--sb-on-dark);
    font-size: 0.82rem;
}
.topbar a { color: rgba(248,250,252,.85); }
.topbar a:hover { color: var(--sb-on-dark); }

/* ── Navbar ──────────────────────────────────────────────── */
.navbar { border-bottom: 1px solid var(--border); }
.navbar-brand img { transition: opacity .2s; }
.navbar-brand:hover img { opacity: .85; }
.nav-link { font-weight: 500; color: var(--text) !important; font-size: .92rem; }
.nav-link:hover, .nav-link.active { color: var(--sb-primary-text) !important; }

/* ── Buttons: colours come from the Bootstrap bridge at the end of this file ── */

/* ── Hero Section ────────────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, var(--sb-ink) 0%, var(--sb-indigo) 72%);
    color: var(--sb-on-dark);
    padding: 90px 0 80px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -80px;
    width: 450px; height: 450px;
    background: rgba(248,250,252,.06);
    border-radius: 50%;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -60px;
    width: 350px; height: 350px;
    background: rgba(248,250,252,.04);
    border-radius: 50%;
}
.hero h1 { font-size: 2.8rem; font-weight: 800; line-height: 1.2; }
.hero p { font-size: 1.15rem; opacity: .9; }

/* ── Domain Search ───────────────────────────────────────── */
.domain-search-card {
    background: var(--sb-surface);
    color: var(--sb-text);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(15,23,42,.15);
}
.domain-search-card .input-group { border-radius: 10px; overflow: hidden; }
.domain-search-card input {
    border: 2px solid var(--border);
    border-right: none;
    font-size: 1rem;
    padding: .75rem 1rem;
}
.domain-search-card input:focus {
    border-color: var(--sb-primary-border);
    box-shadow: none;
}
.domain-search-card .btn { padding: .75rem 1.5rem; font-weight: 600; }
.tld-badge {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: 20px;
    background: var(--primary-light);
    color: var(--sb-primary-text);
    font-size: .8rem;
    font-weight: 600;
    margin: .2rem;
}

/* ── Section Headings ────────────────────────────────────── */
.section-heading { font-size: 2rem; font-weight: 800; }
.section-sub { color: var(--muted); font-size: 1.05rem; }

/* ── Feature Cards ───────────────────────────────────────── */
.feature-card {
    background: var(--bg-light);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    border: 1px solid transparent;
    transition: border-color .25s, box-shadow .25s, transform .25s;
    height: 100%;
}
.feature-card:hover {
    border-color: var(--sb-primary-border);
    box-shadow: 0 8px 30px rgba(30,42,120,.1);
    transform: translateY(-4px);
}
.feature-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--primary);
    color: var(--sb-on-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* ── Pricing Cards ───────────────────────────────────────── */
.pricing-card {
    border-radius: 16px;
    border: 2px solid var(--border);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s, transform .25s;
    height: 100%;
}
.pricing-card:hover, .pricing-card.popular {
    border-color: var(--sb-primary-border);
    box-shadow: 0 12px 40px rgba(30,42,120,.15);
    transform: translateY(-6px);
}
.pricing-card .card-header {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem;
}
.pricing-card.popular .card-header {
    background: var(--primary);
    color: var(--sb-on-dark);
    border-bottom: none;
}
.pricing-card .price { font-size: 2.2rem; font-weight: 800; }
.pricing-card .price sup { font-size: 1rem; font-weight: 600; vertical-align: top; margin-top: .4rem; }
.pricing-card .price .period { font-size: .9rem; font-weight: 400; color: var(--muted); }
.pricing-card.popular .price .period { color: rgba(248,250,252,.8); }
.pricing-card ul li { padding: .35rem 0; font-size: .92rem; }

/* ── Stats Bar ───────────────────────────────────────────── */
.stats-bar {
    background: var(--primary);
    color: var(--sb-on-dark);
    padding: 3rem 0;
}
.stat-item h3 { font-size: 2.4rem; font-weight: 800; }

/* ── Payment Badges ──────────────────────────────────────── */
.payment-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .5rem 1rem;
    font-size: .85rem;
    font-weight: 500;
}
.payment-badge i { color: var(--sb-primary-text); font-size: 1.1rem; }

/* ── Client Dashboard ────────────────────────────────────── */
nav.sidebar {
    /* Hidden on mobile — shown only on desktop via media query below */
    display: none;
    width: 260px;
    background: var(--sb-indigo);
    padding: 1.5rem 0;
    flex-shrink: 0;
    flex-direction: column;

    /* Pin to viewport — only the content-area scrolls */
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(248,250,252,.15) transparent;
}
nav.sidebar::-webkit-scrollbar { width: 6px; }
nav.sidebar::-webkit-scrollbar-track { background: transparent; }
nav.sidebar::-webkit-scrollbar-thumb { background: rgba(248,250,252,.15); border-radius: 3px; }
nav.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(248,250,252,.25); }

/* Force the inner nav list to stay in ONE column and scroll vertically.
   Bootstrap's `.nav` ships with `flex-wrap: wrap`, which — combined with
   `.flex-column` inside a fixed-height sidebar — makes overflow items wrap
   into a phantom second column to the right. Pin nowrap + a styled scrollbar. */
.sidebar .nav.flex-column {
    flex-wrap: nowrap;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(248,250,252,.18) transparent;
}
.sidebar .nav.flex-column::-webkit-scrollbar         { width: 6px; }
.sidebar .nav.flex-column::-webkit-scrollbar-track   { background: transparent; }
.sidebar .nav.flex-column::-webkit-scrollbar-thumb   { background: rgba(248,250,252,.18); border-radius: 3px; }
.sidebar .nav.flex-column::-webkit-scrollbar-thumb:hover { background: rgba(248,250,252,.30); }

.sidebar .nav-link {
    color: rgba(248,250,252,.8) !important;
    padding: .65rem 1.5rem;
    border-radius: 0;
    font-size: .9rem;
}
.sidebar .nav-link:hover, .sidebar .nav-link.active {
    color: var(--sb-on-dark) !important;
    background: rgba(248,250,252,.12);
    border-left: 3px solid var(--accent);
}
.sidebar .nav-link i { width: 22px; }

.content-area {
    flex: 1;
    background: var(--bg-light);
    min-height: 100vh;
    padding: 2rem;
    min-width: 0; /* prevent overflow */
}

.stat-card {
    background: var(--sb-surface);
    border-radius: 14px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    transition: box-shadow .2s;
}
.stat-card:hover { box-shadow: 0 4px 20px rgba(15,23,42,.08); }
.stat-card .icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}

/* ── Tables ──────────────────────────────────────────────── */
.table-card {
    background: var(--sb-surface);
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
}
.table-card .table { margin-bottom: 0; }
.table-card .table th { background: var(--bg-light); font-size: .85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── Status Badges ───────────────────────────────────────── */
.badge-active   { background: var(--sb-success-soft); color: var(--sb-success); }
.badge-pending  { background: var(--sb-warning-soft); color: var(--sb-warning-text); }
.badge-suspended{ background: var(--sb-danger-soft); color: var(--sb-danger); }
.badge-paid     { background: var(--sb-success-soft); color: var(--sb-success); }
.badge-unpaid   { background: var(--sb-danger-soft); color: var(--sb-danger); }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
    background: var(--sb-band);
    color: var(--sb-on-dark);
    position: relative;
    padding-top: 3.5rem !important;
    border-top: 1px solid rgba(248,250,252,.05);
}
/* Soft accent line at the very top of the footer */
.footer::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(245,158,11,.55) 25%,
                rgba(245,158,11,.55) 75%,
                transparent 100%);
    pointer-events: none;
}
.footer h6 { color: var(--sb-on-dark); }
.footer p,
.footer small,
.footer .text-muted { color: var(--sb-on-dark-2) !important; }
.footer a.text-muted { color: var(--sb-on-dark-2) !important; transition: color .15s ease; }
.footer a.text-muted:hover { color: var(--sb-on-dark) !important; }
.footer hr {
    border-color: rgba(248,250,252,.08);
    opacity: 1;
    margin-block: 1.75rem;
}

/* ── Utilities ───────────────────────────────────────────── */
.text-primary { color: var(--sb-primary-text) !important; }
.bg-primary-soft { background: var(--primary-light); color: var(--sb-primary-text); }
.rounded-xl { border-radius: 16px; }
.shadow-soft { box-shadow: 0 4px 24px rgba(15,23,42,.07); }

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .5s ease both; }

/* ── Pricing Page (pricing.php) ──────────────────────────── */
.pricing-card.featured {
    border-color: var(--sb-primary-border);
    box-shadow: 0 16px 48px rgba(30,42,120,.2);
    transform: translateY(-8px);
    position: relative;
}
.badge-popular {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--sb-on-dark);
    font-size: .75rem;
    font-weight: 700;
    padding: .35rem 1rem;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.pricing-card {
    padding: 2rem;
    position: relative;
}
.plan-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .5rem;
}
.price-amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--sb-primary-text);
    line-height: 1.1;
}
.price-period {
    font-size: .88rem;
    color: var(--muted);
}
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.feature-list li {
    padding: .45rem 0;
    font-size: .9rem;
    border-bottom: 1px solid var(--border);
}
.feature-list li:last-child { border-bottom: none; }
.btn-white {
    background: var(--sb-paper);
    color: var(--sb-indigo);
    border: 2px solid var(--sb-on-dark-line);
    font-weight: 600;
}
.btn-white:hover {
    background: rgba(248,250,252,.9);
    color: var(--primary-dark);
    border-color: rgba(248,250,252,.9);
}

/* ── Pricing Cards (shared across index + pricing page) ─────── */
.pricing-card-new {
    background: var(--sb-surface);
    border-radius: 18px;
    border: 1.5px solid var(--border);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s, border-color .25s;
    padding: 0;
    position: relative;
}
.pricing-card-new:hover {
    box-shadow: 0 12px 40px rgba(30,42,120,.12);
    border-color: var(--sb-primary-border);
    transform: translateY(-4px);
}
.pricing-card-new .plan-header {
    background: var(--bg-light);
    padding: 1.75rem 1.75rem 1.5rem;
    border-bottom: 1.5px solid var(--border);
}
.pricing-card-new.featured-plan {
    border-color: var(--sb-primary-border);
    box-shadow: 0 16px 48px rgba(30,42,120,.18);
    transform: translateY(-8px);
}
.pricing-card-new.featured-plan:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 60px rgba(30,42,120,.22);
}
.pricing-card-new.featured-plan .plan-header {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--sb-primary) 100%);
    border-bottom: none;
}
.popular-badge {
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #0F172A;
    font-size: .72rem;
    font-weight: 700;
    padding: .3rem 1.1rem;
    border-radius: 0 0 10px 10px;
    white-space: nowrap;
    letter-spacing: .06em;
    text-transform: uppercase;
    z-index: 2;
}
.plan-name-new {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: .5rem;
}
.pricing-card-new.featured-plan .plan-name-new { color: rgba(248,250,252,.75) !important; }
.price-row {
    display: flex;
    align-items: baseline;
    gap: .2rem;
    line-height: 1;
    margin-bottom: .4rem;
}
.price-currency {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sb-primary-text);
}
.price-val {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--sb-primary-text);
    line-height: 1;
    letter-spacing: -.02em;
}
.price-per {
    font-size: .9rem;
    font-weight: 500;
    color: var(--muted);
}
.price-sub {
    font-size: .75rem;
    color: var(--muted);
    margin-top: .2rem;
}
.pricing-card-new.featured-plan .price-currency,
.pricing-card-new.featured-plan .price-val { color: var(--sb-on-dark) !important; }
.pricing-card-new.featured-plan .price-per,
.pricing-card-new.featured-plan .price-sub { color: rgba(248,250,252,.7) !important; }
.plan-features {
    list-style: none;
    padding: 1.25rem 1.75rem .75rem;
    margin: 0;
}
.plan-features li {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem 0;
    font-size: .9rem;
    border-bottom: 1px solid var(--bg-light);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features li i {
    color: var(--sb-primary-text);
    font-size: .95rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.pricing-card-new .btn {
    border-radius: 0 0 16px 16px;
    margin: 0 1.75rem 1.75rem;
    width: calc(100% - 3.5rem) !important;
}
.pricing-card-new.featured-plan .btn-white {
    background: var(--sb-paper);
    color: var(--sb-indigo);
    border: none;
    font-weight: 700;
}
.pricing-card-new.featured-plan .btn-white:hover {
    background: rgba(248,250,252,.92);
}
.btn-white {
    background: var(--sb-paper);
    color: var(--sb-indigo);
    border: 2px solid var(--sb-on-dark-line);
    font-weight: 600;
}
.btn-white:hover {
    background: rgba(248,250,252,.9);
    color: var(--primary-dark);
}

/* ── Badge variants ──────────────────────────────────────── */
.badge-cancelled { background: var(--sb-surface-2); color: var(--sb-text); }
.badge-terminated { background: var(--sb-danger-soft); color: var(--sb-danger); }
.badge-expired { background: var(--sb-danger-soft); color: var(--sb-danger); }

/* ── Invoice print ───────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .navbar, footer, .btn, .alert, .no-print { display: none !important; }
    .content-area { padding: 0 !important; background: var(--sb-surface) !important; }
    body { background: var(--sb-surface) !important; }
}

/* ── Admin Mobile Top Navbar ─────────────────────────────── */
.admin-topnav {
    display: none; /* shown only on mobile via .admin-wrapper below */
    width: 100%;
    z-index: 1030;
    box-shadow: 0 2px 10px rgba(15,23,42,.3);
}
.admin-topnav .navbar-toggler:focus { box-shadow: none; }

/* Nav links inside the admin collapse (mirror of .client-nav-link) */
.admin-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    border-radius: 8px;
    color: rgba(248,250,252,.8);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.admin-nav-link:hover {
    background: rgba(248,250,252,.1);
    color: var(--sb-on-dark);
}
.admin-nav-link.active {
    background: rgba(248,250,252,.15);
    color: var(--sb-on-dark);
    border-left: 3px solid var(--accent);
    padding-left: calc(.75rem - 3px);
}

/* ── Admin layout: desktop (sidebar left, content right) ── */
@media (min-width: 992px) {
    .admin-wrapper { flex-direction: row !important; }
    nav.sidebar    { display: flex !important; }
    .admin-topnav  { display: none !important; }
}

/* ── Admin layout: mobile (topnav above, content below) ─── */
@media (max-width: 991.98px) {
    .admin-wrapper {
        flex-direction: column !important;
        min-height: 100vh;
    }
    .admin-topnav {
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 1030;
        width: 100%;
    }
    nav.sidebar { display: none !important; }   /* desktop sidebar only — must NOT match the mobile offcanvas (.offcanvas.sidebar), which Bootstrap shows via visibility/transform */
    .content-area {
        padding: 1.25rem !important;
        width: 100% !important;
        min-height: auto;
    }
}

/* ── Client Mobile Top Navbar ────────────────────────────── */
.client-topnav {
    display: none; /* shown only on mobile via .client-wrapper below */
    width: 100%;
    z-index: 1030;
    box-shadow: 0 2px 10px rgba(15,23,42,.3);
}
.client-topnav .navbar-toggler:focus { box-shadow: none; }

/* Nav links inside the collapse */
.client-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    border-radius: 8px;
    color: rgba(248,250,252,.8);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.client-nav-link:hover {
    background: rgba(248,250,252,.1);
    color: var(--sb-on-dark);
}
.client-nav-link.active {
    background: rgba(248,250,252,.15);
    color: var(--sb-on-dark);
    border-left: 3px solid var(--accent);
    padding-left: calc(.75rem - 3px);
}
.client-nav-link.text-danger-soft {
    color: rgba(220,38,38,.85);
}
.client-nav-link.text-danger-soft:hover {
    background: rgba(220,38,38,.15);
    color: var(--sb-danger-on-dark);
}

/* ── Responsive ──────────────────────────────────────────── */
/* ── Client layout: desktop (sidebar left, content right) ── */
@media (min-width: 992px) {
    .client-wrapper { flex-direction: row !important; }
    nav.sidebar    { display: flex !important; }
    .client-topnav  { display: none !important; }
}

/* ── Client layout: mobile (topnav above, content below) ─── */
@media (max-width: 991.98px) {
    .client-wrapper {
        flex-direction: column !important;
        min-height: 100vh;
    }
    .client-topnav {
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 1030;
        width: 100%;
    }
    nav.sidebar { display: none !important; }   /* desktop sidebar only — must NOT match the mobile offcanvas (.offcanvas.sidebar), which Bootstrap shows via visibility/transform */
    .content-area {
        padding: 1.25rem !important;
        width: 100% !important;
        min-height: auto;
    }
}

@media (max-width: 1199px) {
    /* Tighten content area on mid-screens */
    .content-area { padding: 1.5rem; }
}

@media (max-width: 991px) {
    /* Hero */
    .hero { padding: 60px 0 50px; }
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 1rem; }

    /* Tables scroll horizontally */
    .table-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-card .table {
        min-width: 540px;
    }

    /* Remove hover transforms on pricing cards for mobile */
    .pricing-card-new.featured-plan {
        transform: none;
        margin-top: .5rem;
    }
    .pricing-card-new.featured-plan:hover {
        transform: translateY(-4px);
    }
    .pricing-card.featured {
        transform: none;
    }

    /* Section headings */
    .section-heading { font-size: 1.75rem; }
    .section-sub { font-size: 1rem; }
}

@media (max-width: 767px) {
    /* Hero */
    .hero { padding: 50px 0 40px; }
    .hero h1 { font-size: 1.7rem; }
    .hero p { font-size: .95rem; }

    /* Section headings */
    .section-heading { font-size: 1.5rem; }
    .section-sub { font-size: .95rem; }

    /* Domain search card */
    .domain-search-card {
        padding: 1.25rem;
        border-radius: 12px;
    }
    .domain-search-card .btn { padding: .65rem 1rem; font-size: .9rem; }

    /* Stats bar */
    .stats-bar { padding: 2rem 0; }
    .stat-item h3 { font-size: 1.8rem; }
    .stat-item p { font-size: .85rem; }

    /* Feature cards */
    .feature-card { padding: 1.5rem 1.25rem; }
    .feature-icon { width: 46px; height: 46px; font-size: 1.25rem; }

    /* Pricing cards */
    .pricing-card-new { margin-bottom: .5rem; }
    .pricing-card-new.featured-plan { transform: none; margin-top: 0; }
    .price-val { font-size: 2.2rem; }
    .plan-features { padding: 1rem 1.25rem .5rem; }
    .pricing-card-new .btn {
        margin: 0 1.25rem 1.25rem;
        width: calc(100% - 2.5rem) !important;
    }
    .pricing-card-new .plan-header { padding: 1.25rem; }

    /* Content area */
    .content-area { padding: 1rem; }

    /* Stat cards */
    .stat-card { padding: 1rem; }
    .stat-card .icon { width: 42px; height: 42px; font-size: 1.1rem; }

    /* Navbar: reduce font sizes */
    .nav-link { font-size: .88rem; }

    /* Payment badges wrap */
    .payment-badge { font-size: .8rem; padding: .4rem .75rem; }

    /* Buttons */
    .btn { font-size: .88rem; }

    /* Offcanvas table no min-width override on very small tables */
    .table-card .table { min-width: 480px; }

    /* Footer columns stack */
    .footer .row > [class*="col-"] { margin-bottom: 1.5rem; }
}

@media (max-width: 480px) {
    /* Extra small devices */
    .hero h1 { font-size: 1.45rem; }
    .hero p { font-size: .88rem; }
    .section-heading { font-size: 1.3rem; }
    .stat-item h3 { font-size: 1.5rem; }
    .price-val { font-size: 1.9rem; }

    /* Domain search stacks on very small screens */
    .domain-search-card .input-group { flex-wrap: wrap; }
    .domain-search-card .input-group input {
        border-right: 2px solid var(--border);
        border-bottom: none;
        border-radius: 8px 8px 0 0 !important;
        width: 100%;
    }
    .domain-search-card .input-group .btn {
        border-radius: 0 0 8px 8px !important;
        width: 100%;
    }

    /* Full-width buttons in client area */
    .content-area .btn-primary { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGES (login / register / forgot-password) — refined cards
   These sit outside .content-area (public header), so they need their
   own polish layer to feel cohesive with the dashboard.
   ═══════════════════════════════════════════════════════════════════ */
.hk-auth-wrap { min-height: 70vh; }
.hk-auth-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    box-shadow:
        inset 0 1px 0 rgba(248,250,252,.6),
        0 1px 2px rgba(15,23,42,.04),
        0 12px 32px -10px rgba(15,23,42,.08);
}
.hk-auth-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--sb-text);
    margin: 0 0 .35rem;
}
.hk-auth-sub {
    font-size: .82rem;
    color: var(--sb-text-2);
    margin: 0;
}
.hk-auth-sub a {
    color: var(--sb-link);
    font-weight: 600;
    text-decoration: none;
}
.hk-auth-sub a:hover { text-decoration: underline; }
.hk-auth-help {
    font-size: .78rem;
    color: var(--sb-muted);
}
.hk-auth-help a {
    color: var(--sb-link);
    text-decoration: none;
    font-weight: 600;
}
.hk-auth-btn {
    width: 100%;
    background: var(--sb-primary);
    color: var(--sb-on-primary);
    border: 1px solid var(--sb-primary);
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    padding: .65rem 1rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(248,250,252,.25),
        0 2px 6px rgba(30,42,120,.25);
    transition: background .15s, box-shadow .15s;
}
.hk-auth-btn:hover {
    background: var(--sb-primary-hover);
    color: var(--sb-on-primary-hover);
    box-shadow:
        inset 0 1px 0 rgba(248,250,252,.2),
        0 4px 12px rgba(30,42,120,.35);
}
.hk-auth-card .form-control {
    border: 1px solid var(--sb-border);
    border-radius: 7px;
    font-size: .9rem;
    padding: .55rem .75rem;
}
.hk-auth-card .form-control:focus {
    border-color: var(--sb-primary-border);
    box-shadow: 0 0 0 3px rgba(30,42,120,.12);
}
.hk-auth-card .form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--sb-text);
    margin-bottom: .35rem;
}

/* Dark mode tuning for auth pages */
[data-theme="dark"] .hk-auth-card {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow:
        inset 0 1px 0 rgba(248,250,252,.05),
        0 1px 2px rgba(15,23,42,.3),
        0 12px 32px -10px rgba(15,23,42,.5);
}
[data-theme="dark"] .hk-auth-title { color: #f8fafc; }
[data-theme="dark"] .hk-auth-sub { color: var(--sb-muted); }
[data-theme="dark"] .hk-auth-help { color: var(--sb-muted); }
[data-theme="dark"] .hk-auth-card .form-label { color: var(--sb-text-2); }
[data-theme="dark"] .hk-auth-card .form-control {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text);
}

/* ═══════════════════════════════════════════════════════════════════
   ENTERPRISE DESIGN SYSTEM (.ent-*) — single source of truth
   Used by every client/admin page. Refined, restrained, single accent.
   Pair with the LIQUID GLASS layer below for the iPadOS depth.
   ═══════════════════════════════════════════════════════════════════ */

/* Typography */
.ent-h1 { font-size:1.35rem; font-weight:700; letter-spacing:-.01em; color:var(--sb-text); margin:0; }
.ent-sub { font-size:.78rem; color:var(--sb-muted); }
.ent-num { font-variant-numeric: tabular-nums; }
.ent-link { font-size:.72rem; font-weight:600; color:var(--sb-primary-text); text-decoration:none; }
.ent-link:hover { text-decoration:underline; }
.ent-section-head { font-size:.72rem; font-weight:600; color:var(--sb-text-2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.75rem; }

/* Breadcrumb */
.ent-crumb { display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--sb-faint); margin-bottom:.5rem; }
.ent-crumb a { color:var(--sb-muted); text-decoration:none; }
.ent-crumb a:hover { color:var(--sb-primary-text); }
.ent-crumb .sep { opacity:.5; }
.ent-crumb .here { color:var(--sb-text); font-weight:600; }

/* Buttons */
.ent-btn { font-size:.78rem; font-weight:600; padding:.42rem .85rem; border-radius:7px; line-height:1.2; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
.ent-btn.ent-btn-primary { background:#1E2A78; color:var(--sb-on-dark); border:1px solid #1E2A78; }
.ent-btn.ent-btn-primary:hover { background:var(--sb-primary-hover); border-color:var(--sb-primary-hover); color:var(--sb-on-primary-hover); }
.ent-btn.ent-btn-ghost { background:var(--sb-surface); color:var(--sb-text); border:1px solid var(--sb-border); }
.ent-btn.ent-btn-ghost:hover { background:var(--sb-surface-3); }
.ent-btn.ent-btn-warning { background:var(--sb-warning-soft); color:var(--sb-warning-text); border:1px solid var(--sb-warning-line); }
.ent-btn.ent-btn-warning:hover { background:var(--sb-warning-soft); }
.ent-btn.ent-btn-danger { background:var(--sb-danger-soft); color:var(--sb-danger); border:1px solid var(--sb-danger-line); }
.ent-btn.ent-btn-danger:hover { background:var(--sb-danger-soft); }
.ent-icon-btn { display:inline-flex; align-items:center; gap:.3rem; padding:.32rem .55rem; font-size:.7rem; font-weight:600; border-radius:6px; text-decoration:none; line-height:1; border:1px solid var(--sb-border); background:var(--sb-surface); color:var(--sb-text); transition:border-color .12s, background .12s; }
.ent-icon-btn:hover { border-color:var(--sb-border); background:var(--sb-surface); color:var(--sb-text); }
.ent-icon-btn.primary { background:#1E2A78; color:var(--sb-on-dark); border-color:#1E2A78; }
.ent-icon-btn.primary:hover { background:var(--sb-primary-hover); border-color:var(--sb-primary-hover); color:var(--sb-on-primary-hover); }

/* Cards */
.ent-card { background:var(--sb-surface); border:1px solid var(--sb-border); border-radius:10px; }
.ent-card-head { padding:.75rem 1rem; border-bottom:1px solid var(--sb-border); display:flex; align-items:center; justify-content:space-between; }
.ent-card-head h6 { font-size:.78rem; font-weight:600; color:var(--sb-text-2); margin:0; text-transform:uppercase; letter-spacing:.04em; }
.ent-card-head h6 i { color:var(--sb-muted); font-size:.85rem; margin-right:.4rem; }
.ent-card-body { padding:1rem; }

/* KPI tiles */
.ent-kpi { background:var(--sb-surface); border:1px solid var(--sb-border); border-radius:10px; padding:.9rem 1rem; display:block; text-decoration:none; transition:border-color .12s, box-shadow .12s; }
.ent-kpi:hover { border-color:var(--sb-border); box-shadow:0 1px 3px rgba(15,23,42,.04); }
.ent-kpi .label { font-size:.7rem; font-weight:600; color:var(--sb-muted); text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:.4rem; }
.ent-kpi .label .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ent-kpi .value { font-size:1.6rem; font-weight:700; color:var(--sb-text); line-height:1.1; margin-top:.35rem; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.ent-kpi .delta { font-size:.7rem; color:var(--sb-faint); margin-top:.15rem; display:flex; align-items:center; gap:.4rem; }
.ent-kpi .value.warn { color:var(--sb-warning-text); }
.ent-kpi .spark-row { display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem; margin-top:.2rem; }
.hk-spark { flex-shrink:0; opacity:.95; }

/* Trend chip (delta % indicator inside KPI tiles) */
.ent-trend { display:inline-flex; align-items:center; gap:.2rem; font-size:.66rem; font-weight:600; padding:.14rem .4rem; border-radius:999px; line-height:1; }
.ent-trend.up   { background:rgba(30,42,120,.14); color:var(--sb-success); }
.ent-trend.down { background:rgba(220,38,38,.14); color:var(--sb-danger); }
.ent-trend.flat { background:var(--sb-surface-2); color:var(--sb-text-2); }

/* Sticky right rail */
.ent-rail { display:flex; flex-direction:column; gap:1rem; position:sticky; top:1rem; }
@media (max-width: 1199.98px) { .ent-rail { position:static; } }

/* Quick action tile */
.ent-qa { display:block; text-decoration:none; padding:.85rem; border:1px solid var(--sb-border); border-radius:10px; background:var(--sb-surface); transition:border-color .12s, transform .08s; }
.ent-qa:hover { border-color:var(--sb-border); transform:translateY(-1px); }
.ent-qa .qa-ic { width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:var(--sb-surface-2); color:var(--sb-primary-text); font-size:.95rem; margin-bottom:.55rem; }
.ent-qa .qa-title { font-size:.82rem; font-weight:600; color:var(--sb-text); }
.ent-qa .qa-meta { font-size:.7rem; color:var(--sb-muted); margin-top:1px; }

/* Service row (dashboard preview list) */
.svc-list .svc-row { padding:.4rem .85rem; border-bottom:1px solid var(--sb-border); cursor:pointer; transition:background .12s; }
.svc-list .svc-row:last-child { border-bottom:0; }
.svc-list .svc-row:hover { background:var(--sb-surface); }
.svc-list .svc-row.svc-suspended { background:var(--sb-surface); }
.svc-list .svc-row.svc-cancelled .domain,
.svc-list .svc-row.svc-terminated .domain { color:var(--sb-faint); }
.svc-row .domain { font-size:.86rem; font-weight:600; color:var(--sb-text); }
.svc-row .meta { font-size:.72rem; color:var(--sb-muted); margin-top:1px; }

/* Activity timeline */
.activity-item { display:flex; gap:.7rem; padding:.55rem 0; border-bottom:1px solid var(--sb-border); }
.activity-item:last-child { border-bottom:0; }
.activity-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.78rem; background:var(--sb-surface-2); color:var(--sb-text-2); }
.activity-text { flex:1; min-width:0; font-size:.8rem; line-height:1.35; color:var(--sb-text); }
.activity-text .meta { color:var(--sb-faint); font-size:.68rem; margin-top:1px; }

/* Status pills — colored dot + uppercase label */
.ent-pill { display:inline-flex; align-items:center; gap:.3rem; font-size:.65rem; font-weight:600; padding:.18rem .5rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; line-height:1; }
.ent-pill::before { content:''; width:6px; height:6px; border-radius:50%; }
.ent-pill.active     { background:var(--sb-success-soft); color:var(--sb-success); } .ent-pill.active::before     { background:var(--sb-primary); }
.ent-pill.paid       { background:var(--sb-success-soft); color:var(--sb-success); } .ent-pill.paid::before       { background:var(--sb-primary); }
.ent-pill.on         { background:var(--sb-success-soft); color:var(--sb-success); } .ent-pill.on::before         { background:var(--sb-primary); }
.ent-pill.suspended  { background:var(--sb-danger-soft); color:var(--sb-danger); } .ent-pill.suspended::before  { background:var(--sb-danger-solid); }
.ent-pill.unpaid     { background:var(--sb-danger-soft); color:var(--sb-danger); } .ent-pill.unpaid::before     { background:var(--sb-danger-solid); }
.ent-pill.expired    { background:var(--sb-danger-soft); color:var(--sb-danger); } .ent-pill.expired::before    { background:var(--sb-danger-solid); }
.ent-pill.pending    { background:var(--sb-warning-soft); color:var(--sb-warning-text); } .ent-pill.pending::before    { background:#f59e0b; }
.ent-pill.warn       { background:var(--sb-warning-soft); color:var(--sb-warning-text); } .ent-pill.warn::before       { background:var(--sb-accent); }
.ent-pill.cancelled,
.ent-pill.terminated { background:var(--sb-surface-2); color:var(--sb-text-2); } .ent-pill.cancelled::before,
.ent-pill.terminated::before { background:var(--sb-neutral); }
.ent-pill.off        { background:var(--sb-surface-2); color:var(--sb-muted); padding-left:.55rem; }
.ent-pill.off::before { display:none; }

/* Dark mode tuning for the enterprise palette */
[data-theme="dark"] .ent-h1 { color:var(--sb-text); }
[data-theme="dark"] .ent-sub { color:var(--sb-muted); }
[data-theme="dark"] .ent-crumb a { color:var(--sb-muted); }
[data-theme="dark"] .ent-crumb .here { color:var(--sb-text); }
[data-theme="dark"] .ent-card,
[data-theme="dark"] .ent-kpi,
[data-theme="dark"] .ent-qa { background:var(--sb-surface); border-color:var(--sb-border); }
[data-theme="dark"] .ent-kpi:hover,
[data-theme="dark"] .ent-qa:hover { border-color:var(--sb-border); }
[data-theme="dark"] .ent-card-head { border-bottom-color:var(--sb-border); }
[data-theme="dark"] .ent-card-head h6 { color:var(--sb-muted); }
[data-theme="dark"] .ent-kpi .label { color:var(--sb-muted); }
[data-theme="dark"] .ent-kpi .value { color:var(--sb-text); }
[data-theme="dark"] .ent-kpi .value.warn { color:var(--sb-accent); }
[data-theme="dark"] .svc-row .domain { color:var(--sb-text); }
[data-theme="dark"] .svc-row .meta { color:var(--sb-muted); }
[data-theme="dark"] .svc-list .svc-row { border-bottom-color:var(--sb-border); }
[data-theme="dark"] .svc-list .svc-row:hover { background:var(--sb-surface-3); }
[data-theme="dark"] .ent-icon-btn { background:var(--sb-surface); color:var(--sb-text-2); border-color:var(--sb-border); }
[data-theme="dark"] .ent-icon-btn:hover { background:var(--sb-surface-3); color:var(--sb-text); }
[data-theme="dark"] .ent-icon-btn.primary { background:var(--sb-primary); color:var(--sb-text); border-color:var(--sb-primary-line); }
[data-theme="dark"] .ent-btn.ent-btn-primary { background:var(--sb-primary); border-color:var(--sb-primary-line); }
[data-theme="dark"] .ent-btn.ent-btn-ghost { background:var(--sb-surface); border-color:var(--sb-border); color:var(--sb-text); }
[data-theme="dark"] .ent-btn.ent-btn-ghost:hover { background:var(--sb-surface-3); }
[data-theme="dark"] .activity-item { border-bottom-color:var(--sb-border); }
[data-theme="dark"] .activity-icon { background:var(--sb-surface); color:var(--sb-muted); }
[data-theme="dark"] .activity-text { color:var(--sb-text); }
[data-theme="dark"] .ent-qa .qa-ic { background:var(--sb-surface); color:var(--sb-link); }
[data-theme="dark"] .ent-qa .qa-title { color:var(--sb-text); }
[data-theme="dark"] .ent-qa .qa-meta { color:var(--sb-muted); }
[data-theme="dark"] .ent-link { color:var(--sb-link); }
[data-theme="dark"] .ent-section-head { color:var(--sb-muted); }

/* ═══════════════════════════════════════════════════════════════════
   LIQUID GLASS — applied site-wide to ALL client/admin content areas
   Covers .ent-* (new design system) + legacy .card / .table-card so
   every page (Dashboard, Services, Domains, Invoices, Support,
   Profile, admin/*) gets the same iPadOS depth without per-page edits.
   ═══════════════════════════════════════════════════════════════════ */

/* Ambient bg — single fixed gradient (cheaper than 3 radials painted on scroll) */
.content-area {
    background:
        linear-gradient(180deg, var(--sb-surface-2) 0%, var(--sb-surface-2) 100%) !important;
    background-attachment: fixed;
    position: relative;
}

/* Floating surfaces — SOLID white (no backdrop-filter, snappy on every device).
   We keep the rounded corners, subtle shadow, and brand-blue hover halo
   — that's where the "iPadOS" feel comes from. Blur is overkill for these. */
.content-area .ent-card,
.content-area .ent-kpi,
.content-area .ent-qa,
.content-area .card,
.content-area .table-card,
.content-area .stat-card {
    background: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: 14px !important;
    box-shadow:
        0 1px 2px rgba(15,23,42,.03),
        0 8px 20px -8px rgba(15,23,42,.08) !important;
    transition: transform .12s ease, box-shadow .15s ease, border-color .12s !important;
}
.content-area .ent-kpi:hover,
.content-area .ent-qa:hover,
.content-area .stat-card:hover {
    transform: translateY(-1px);
    border-color: rgba(30,42,120,.25) !important;
    box-shadow:
        0 2px 4px rgba(15,23,42,.04),
        0 12px 28px -10px rgba(30,42,120,.18) !important;
}

/* Card heads — frosted top edge */
.content-area .ent-card-head,
.content-area .card-header {
    border-bottom: 1px solid rgba(var(--sb-fg-rgb),.06) !important;
    background: linear-gradient(180deg, rgba(var(--sb-surface-rgb),.5), transparent) !important;
}
.content-area .ent-card-head h6,
.content-area .card-header { color: var(--sb-text) !important; font-weight: 700; }

/* Bumped text contrast across content area */
.content-area .ent-h1   { color: var(--sb-text) !important; letter-spacing: -.015em; }
.content-area .ent-sub  { color: var(--sb-text-2) !important; }
.content-area .ent-kpi .label { color: var(--sb-text-2) !important; font-weight: 700; }
.content-area .ent-kpi .value { color: var(--sb-text) !important; }
.content-area .ent-kpi .delta { color: var(--sb-muted) !important; font-weight: 500; }
.content-area .svc-row .domain { color: var(--sb-text) !important; }
.content-area .svc-row .meta { color: var(--sb-text-2) !important; }
.content-area .activity-text { color: var(--sb-text) !important; }
.content-area .activity-text .meta { color: var(--sb-muted) !important; }
.content-area .ent-qa .qa-title { color: var(--sb-text) !important; }
.content-area .ent-qa .qa-meta  { color: var(--sb-text-2) !important; }

/* Brand-tinted icon chips — uniform across new + legacy */
.content-area .activity-icon,
.content-area .ent-qa .qa-ic,
.content-area .qa-item .qa-ic,
.content-area .feature-icon,
.content-area .stat-card .icon {
    background: linear-gradient(135deg, rgba(30,42,120,.08), rgba(245,158,11,.06)) !important;
    border: 1px solid rgba(30,42,120,.12) !important;
    color: var(--sb-primary-text) !important;
    border-radius: 10px !important;
}

/* Service row hover — soft brand tint */
.content-area .svc-list .svc-row:hover { background: rgba(30,42,120,.05) !important; }

/* Sparklines pop on glass */
.content-area .hk-spark { opacity: 1; filter: drop-shadow(0 1px 2px rgba(15,23,42,.06)); }
.content-area .hk-spark polyline { stroke-width: 2; }

/* Primary buttons — solid indigo; slate on hover (amber in dark) */
.content-area .ent-btn.ent-btn-primary,
.content-area .btn-primary {
    background: var(--sb-primary) !important;
    border: 1px solid var(--sb-primary) !important;
    color: var(--sb-on-primary) !important;
    box-shadow: 0 2px 6px rgba(30,42,120,.25) !important;
}
.content-area .ent-btn.ent-btn-primary:hover,
.content-area .btn-primary:hover {
    background: var(--sb-primary-hover) !important;
    border-color: var(--sb-primary-hover) !important;
    color: var(--sb-on-primary-hover) !important;
    box-shadow: 0 4px 12px rgba(30,42,120,.35) !important;
}
.content-area .ent-btn.ent-btn-ghost,
.content-area .btn-outline-primary,
.content-area .btn-light {
    background: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text) !important;
}
.content-area .ent-btn.ent-btn-ghost:hover,
.content-area .btn-outline-primary:hover,
.content-area .btn-light:hover {
    background: var(--sb-surface-3) !important;
    color: var(--sb-text) !important;
}

/* Status pills — stronger fill with halo on the dot */
.content-area .ent-pill.active,
.content-area .ent-pill.paid,
.content-area .ent-pill.on {
    background: rgba(30,42,120,.14) !important; color:var(--sb-success) !important;
}
.content-area .ent-pill.active::before,
.content-area .ent-pill.paid::before,
.content-area .ent-pill.on::before {
    background:var(--sb-primary) !important; box-shadow:0 0 0 2px rgba(30,42,120,.18) !important;
}
.content-area .ent-pill.suspended,
.content-area .ent-pill.unpaid,
.content-area .ent-pill.expired {
    background: rgba(220,38,38,.14) !important; color:var(--sb-danger) !important;
}
.content-area .ent-pill.suspended::before,
.content-area .ent-pill.unpaid::before,
.content-area .ent-pill.expired::before {
    background:var(--sb-danger-solid) !important; box-shadow:0 0 0 2px rgba(220,38,38,.18) !important;
}
.content-area .ent-pill.pending,
.content-area .ent-pill.warn {
    background: rgba(245,158,11,.14) !important; color:var(--sb-warning-text) !important;
}
.content-area .ent-pill.pending::before,
.content-area .ent-pill.warn::before {
    background:#f59e0b !important; box-shadow:0 0 0 2px rgba(245,158,11,.18) !important;
}

/* KPI dot — outer halo */
.content-area .ent-kpi .label .dot { box-shadow: 0 0 0 3px rgba(30,42,120,.08); }

/* Sidebar gets a soft shadow against the lively ambient bg */
.sidebar { box-shadow: 1px 0 0 rgba(15,23,42,.04), 4px 0 24px rgba(15,23,42,.04); }

/* Inputs — frosted */
.content-area .form-control,
.content-area .form-select,
.content-area input[type="text"],
.content-area input[type="email"],
.content-area input[type="password"],
.content-area input[type="search"] {
    background: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
}
.content-area .form-control:focus,
.content-area .form-select:focus {
    background: rgba(var(--sb-surface-rgb),.95) !important;
    border-color: var(--sb-primary-border) !important;
    box-shadow: 0 0 0 3px rgba(30,42,120,.12) !important;
}

/* Tables inside legacy table-card — keep rows readable on glass */
.content-area .table-card .table { background: transparent !important; }
.content-area .table-card .table tbody tr:hover > * { background: rgba(30,42,120,.04) !important; }

/* ─── Dark mode — solid surfaces ─── */
[data-theme="dark"] .content-area {
    background: var(--sb-bg) !important;
    background-attachment: fixed;
}
[data-theme="dark"] .content-area .ent-card,
[data-theme="dark"] .content-area .ent-kpi,
[data-theme="dark"] .content-area .ent-qa,
[data-theme="dark"] .content-area .card,
[data-theme="dark"] .content-area .table-card,
[data-theme="dark"] .content-area .stat-card {
    background: var(--sb-surface) !important;
    border: 1px solid var(--sb-border) !important;
    box-shadow:
        0 1px 2px rgba(15,23,42,.25),
        0 8px 20px -8px rgba(15,23,42,.4) !important;
}
[data-theme="dark"] .content-area .ent-card-head,
[data-theme="dark"] .content-area .card-header {
    background: linear-gradient(180deg, rgba(248,250,252,.03), transparent) !important;
    border-bottom-color: rgba(248,250,252,.06) !important;
}
[data-theme="dark"] .content-area .ent-card-head h6,
[data-theme="dark"] .content-area .card-header { color: var(--sb-text) !important; }
[data-theme="dark"] .content-area .ent-h1   { color: #f8fafc !important; }
[data-theme="dark"] .content-area .ent-sub  { color: var(--sb-muted) !important; }
[data-theme="dark"] .content-area .ent-kpi .label { color: var(--sb-text-2) !important; }
[data-theme="dark"] .content-area .ent-kpi .value { color: var(--sb-text) !important; }
[data-theme="dark"] .content-area .ent-kpi .delta { color: var(--sb-muted) !important; }
[data-theme="dark"] .content-area .svc-row .domain { color: var(--sb-text) !important; }
[data-theme="dark"] .content-area .svc-row .meta { color: var(--sb-text-2) !important; }
[data-theme="dark"] .content-area .activity-text { color: var(--sb-text) !important; }
[data-theme="dark"] .content-area .activity-text .meta { color: var(--sb-muted) !important; }
[data-theme="dark"] .content-area .ent-qa .qa-title { color: var(--sb-text) !important; }
[data-theme="dark"] .content-area .ent-qa .qa-meta { color: var(--sb-muted) !important; }
[data-theme="dark"] .content-area .activity-icon,
[data-theme="dark"] .content-area .ent-qa .qa-ic,
[data-theme="dark"] .content-area .qa-item .qa-ic,
[data-theme="dark"] .content-area .feature-icon,
[data-theme="dark"] .content-area .stat-card .icon {
    background: linear-gradient(135deg, rgba(30,42,120,.22), rgba(245,158,11,.14)) !important;
    border-color: rgba(30,42,120,.30) !important;
    color: var(--sb-link) !important;
}
[data-theme="dark"] .content-area .svc-list .svc-row:hover { background: rgba(30,42,120,.12) !important; }
[data-theme="dark"] .content-area .ent-btn.ent-btn-primary,
[data-theme="dark"] .content-area .btn-primary {
    border-color: rgba(248,250,252,.28) !important;
    box-shadow: 0 2px 6px rgba(15,23,42,.35) !important;
}
[data-theme="dark"] .content-area .ent-btn.ent-btn-ghost,
[data-theme="dark"] .content-area .btn-outline-primary,
[data-theme="dark"] .content-area .btn-light {
    background: rgba(15,23,42,.5) !important;
    border-color: rgba(248,250,252,.08) !important;
    color: var(--sb-text) !important;
}
[data-theme="dark"] .content-area .form-control,
[data-theme="dark"] .content-area .form-select,
[data-theme="dark"] .content-area input[type="text"],
[data-theme="dark"] .content-area input[type="email"],
[data-theme="dark"] .content-area input[type="password"],
[data-theme="dark"] .content-area input[type="search"],
[data-theme="dark"] .content-area input[type="number"],
[data-theme="dark"] .content-area input[type="tel"],
[data-theme="dark"] .content-area input[type="url"],
[data-theme="dark"] .content-area input[type="date"],
[data-theme="dark"] .content-area textarea {
    background: rgba(15,23,42,.6) !important;
    border-color: rgba(248,250,252,.08) !important;
    color: var(--sb-text) !important;
}
/* Bare inputs (no .form-control class — e.g. the .svc-rd search box) were caught by
   the light `.content-area input[type=…]{background:#fff!important}` rule but had no
   dark counterpart, so they stayed white in dark. Above selector list closes that gap. */
[data-theme="dark"] .content-area input::placeholder,
[data-theme="dark"] .content-area textarea::placeholder { color: var(--sb-muted) !important; opacity: 1; }
[data-theme="dark"] .content-area .form-control:focus,
[data-theme="dark"] .content-area .form-select:focus,
[data-theme="dark"] .content-area input[type="text"]:focus,
[data-theme="dark"] .content-area input[type="email"]:focus,
[data-theme="dark"] .content-area input[type="password"]:focus,
[data-theme="dark"] .content-area input[type="search"]:focus,
[data-theme="dark"] .content-area input[type="number"]:focus,
[data-theme="dark"] .content-area input[type="tel"]:focus,
[data-theme="dark"] .content-area textarea:focus {
    background: rgba(15,23,42,.85) !important;
    border-color: var(--sb-accent) !important;
    box-shadow: 0 0 0 3px rgba(30,42,120,.20) !important;
}

/* ═════════════════════════════════════════════════════════════════════
   Dark-mode visibility patches — added when dark became the default theme.
   These cover hardcoded light surfaces and inline white backgrounds that
   didn't previously have dark overrides.
   ═════════════════════════════════════════════════════════════════════ */

/* Domain search hero card — was solid white with a strong drop shadow.
   In dark mode that became a glowing white slab; re-tint to slate surface. */
[data-theme="dark"] .domain-search-card {
    background: var(--sb-surface);
    box-shadow: 0 20px 60px rgba(15,23,42,.45), 0 1px 0 rgba(248,250,252,.04) inset;
}
[data-theme="dark"] .domain-search-card input {
    background: #0f172a;
    border-color: var(--sb-border);
    color: var(--sb-text);
}
[data-theme="dark"] .domain-search-card input::placeholder { color: var(--sb-faint); }
[data-theme="dark"] .domain-search-card input:focus {
    background: #0f172a;
    border-color: var(--sb-primary-border);
    box-shadow: 0 0 0 3px rgba(30,42,120,.25);
    color: var(--sb-text);
}
[data-theme="dark"] .domain-search-card .tld-list { color: var(--sb-text-2); }
[data-theme="dark"] .tld-badge {
    background: rgba(30,42,120,.18);
    color: var(--sb-link);
}

/* `.btn-white` on dark hero stays bright (it's meant to pop as the primary
   CTA on a dark hero), but soften the hover so it doesn't fade-out invisibly */
[data-theme="dark"] .btn-white:hover {
    background: var(--sb-on-dark-line);
    border-color: var(--sb-on-dark-line);
    color: var(--primary-dark);
}

/* Status pills — the light pastel backgrounds are readable on dark but
   visually loud. Re-tint to dark slate with a brighter accent text so
   they read more like badges and less like ads. */
[data-theme="dark"] .ent-pill.active,
[data-theme="dark"] .ent-pill.paid,
[data-theme="dark"] .ent-pill.on        { background: rgba(30,42,120,.14); color: var(--sb-success); }
[data-theme="dark"] .ent-pill.suspended,
[data-theme="dark"] .ent-pill.unpaid,
[data-theme="dark"] .ent-pill.expired   { background: rgba(220,38,38,.16);  color: var(--sb-danger); }
[data-theme="dark"] .ent-pill.pending,
[data-theme="dark"] .ent-pill.warn      { background: rgba(245,158,11,.16); color: var(--sb-accent); }
[data-theme="dark"] .ent-pill.cancelled,
[data-theme="dark"] .ent-pill.terminated,
[data-theme="dark"] .ent-pill.off       { background: rgba(248,250,252,.16); color: var(--sb-text-2); }

/* Safety net for inline LIGHT/PASTEL section backgrounds — covers patterns like:
     <section style="background:#f8fafc;border-bottom:1px solid #e2e8f0">
     <section style="background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)">
     <div style="background:#f3e8ff">  (pastel purple callout)
     <div style="background:#fef3c7">  (pastel yellow note)
     <div style="background:#fce7f3">  (pastel pink CTA)
   These were originally meant for light theme; in dark mode they become loud
   bright slabs. We re-tint them to dark slate while preserving their semantic
   "this is a callout / different section" feel via a subtle border-top.
   Small pill/badge backgrounds (eg. `background:#d1fae5` for a status pill)
   still render their original color — these only trip when used at section/card
   scope where the inline style is the primary surface. */
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background: var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background-color:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background-color: var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background: var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="background:var(--sb-primary-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"],
[data-theme="dark"] [style*="background:var(--sb-primary-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"],
[data-theme="dark"] [style*="background:var(--sb-success-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="background:linear-gradient(180deg,var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background: linear-gradient(180deg,var(--sb-surface, #F8FAFC)"] {
    background: #0f172a !important;
    border-color: var(--sb-border-strong) !important;
    color: var(--sb-on-dark);
}
/* Children with hardcoded dark text colors (like .text-dark, .text-body, or
   inline color:#0f172a) become unreadable on our new dark slate parent.
   Bump their lightness. Inline colors on inner elements still win via
   inline-style priority, so colored status pills/badges stay correct. */
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"]      :is(.text-dark, .text-body, .text-black),
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"]   :is(.text-dark, .text-body, .text-black),
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"]   :is(.text-dark, .text-body, .text-black),
[data-theme="dark"] [style*="background:var(--sb-primary-soft, rgba(30,42,120,.08))"]   :is(.text-dark, .text-body, .text-black),
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"]   :is(.text-dark, .text-body, .text-black),
[data-theme="dark"] [style*="background:var(--sb-primary-soft, rgba(30,42,120,.08))"]   :is(.text-dark, .text-body, .text-black),
[data-theme="dark"] [style*="linear-gradient(180deg,var(--sb-surface, #F8FAFC)"] :is(.text-dark, .text-body, .text-black) {
    color: var(--sb-on-dark-2) !important;
}

/* Bootstrap modals + dropdowns — Bootstrap defaults to white. */
[data-theme="dark"] .modal-content { background: var(--sb-surface); color: var(--sb-text); border-color: var(--sb-border); }
[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--sb-border); }
[data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(2); }
[data-theme="dark"] .dropdown-menu { background: var(--sb-surface); border-color: var(--sb-border); }
[data-theme="dark"] .dropdown-item { color: var(--sb-text); }
[data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--sb-surface-3); color: var(--sb-text); }
[data-theme="dark"] .dropdown-divider { border-color: var(--sb-border); }

/* Alert components — keep colored alerts visible but adjust contrast */
[data-theme="dark"] .alert-info    { background: rgba(30,42,120,.12); color: var(--sb-link); border-color: rgba(30,42,120,.30); }
[data-theme="dark"] .alert-success { background: rgba(30,42,120,.12); color: var(--sb-success); border-color: rgba(30,42,120,.30); }
[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.12); color: var(--sb-accent); border-color: rgba(245,158,11,.30); }
[data-theme="dark"] .alert-danger  { background: rgba(220,38,38,.14);  color: var(--sb-danger); border-color: rgba(220,38,38,.30);  }

/* Bootstrap list-group cards on dark backgrounds */
[data-theme="dark"] .list-group-item { background: var(--sb-surface); color: var(--sb-text); border-color: var(--sb-border); }
[data-theme="dark"] .list-group-item.active { background: var(--sb-primary); border-color: var(--sb-primary-line); color: var(--sb-text); }

/* Generic .badge backgrounds that default to light */
[data-theme="dark"] .badge.text-bg-light,
[data-theme="dark"] .badge.bg-light { background-color: var(--sb-surface-3) !important; color: var(--sb-text) !important; }
[data-theme="dark"] .badge.text-bg-secondary { background-color: var(--sb-surface-3) !important; color: var(--sb-text) !important; }

/* ════════════════════════════════════════════════════════════════════════
   THEME POLISH (2026-06-13) — explicit, bulletproof dark/light rules.
   Appended LAST so source order wins over the earlier defensive catch-alls.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Support-ticket message bubbles ──────────────────────────────────────
   Self-contained classes so the bubbles never depend on the Bootstrap
   utility cascade (the old bg-white / bg-primary text-white combo could go
   white-on-white once dark-mode .card rules forced a light text colour). */
.tkt-bubble                  { border-radius: 12px; padding: .8rem 1rem; border: 1px solid transparent; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.tkt-bubble .tkt-meta        { font-size: .78rem; }
.tkt-bubble--client          { background: var(--sb-surface); color: var(--sb-text); border-color: var(--sb-border); }
.tkt-bubble--client .tkt-meta{ color: var(--sb-muted); }
.tkt-bubble--staff           { background: var(--primary); color: var(--sb-on-dark); }
.tkt-bubble--staff .tkt-meta { color: rgba(248,250,252,.82); }
.tkt-bubble--staff a         { color: var(--sb-on-dark); text-decoration: underline; }
[data-theme="dark"] .tkt-bubble--client           { background: var(--sb-surface); color: var(--sb-text); border-color: var(--sb-border); }
[data-theme="dark"] .tkt-bubble--client .tkt-meta { color: var(--sb-muted); }
[data-theme="dark"] .tkt-bubble--staff            { background: var(--sb-primary); color: var(--sb-on-dark); }
[data-theme="dark"] .tkt-bubble--staff .tkt-meta  { color: rgba(248,250,252,.85); }

/* ── Custom status badges — add the dark variants that were missing ── */
[data-theme="dark"] .badge-active    { background: rgba(30,42,120,.18); color: var(--sb-success); }
[data-theme="dark"] .badge-pending   { background: rgba(245,158,11,.18); color: var(--sb-accent); }
[data-theme="dark"] .badge-suspended,
[data-theme="dark"] .badge-terminated,
[data-theme="dark"] .badge-expired   { background: rgba(220,38,38,.18);  color: var(--sb-danger); }
[data-theme="dark"] .badge-cancelled { background: rgba(248,250,252,.20); color: var(--sb-text-2); }

/* ── Tinted inline callouts keep their semantic colour in dark mode ──
   (these come after the #fff catch-all above, so they win and re-tint
   warning/success/info callouts instead of flattening them to slate). ── */
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"],
[data-theme="dark"] [style*="background: var(--sb-warning-soft, rgba(245,158,11,.16))"],
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"]  { background: var(--sb-warning-soft) !important; border-color: var(--sb-warning-line) !important; color: var(--sb-accent) !important; }
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"],
[data-theme="dark"] [style*="background: var(--sb-warning-soft, rgba(245,158,11,.16))"],
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"]  { background: var(--sb-warning-soft) !important; border-color: var(--sb-warning-line) !important; color: var(--sb-accent) !important; }
[data-theme="dark"] [style*="background:var(--sb-success-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="background:var(--sb-success-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="background:var(--sb-success-soft, rgba(30,42,120,.08))"]  { background: var(--sb-primary-soft) !important; border-color: var(--sb-primary-line) !important; color: var(--sb-success) !important; }
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="background:var(--sb-surface-3, rgba(30,42,120,.08))"]  { background: var(--sb-surface) !important; border-color: var(--sb-primary-line) !important; color: var(--sb-text-2) !important; }

/* ════════════════════════════════════════════════════════════════════════
   INVISIBLE-TEXT FIXES — Bootstrap components, var(--text) consumers, and a
   few inline dark colours that rendered dark-on-dark in dark mode. !important
   is required because `.nav-link { color: var(--text) !important }` otherwise
   defeats every dark nav override.
   ════════════════════════════════════════════════════════════════════════ */

/* Nav pills (activity scope tabs) + nav-tabs (e.g. pricing #planTabs) */
.nav-pills .nav-link.active                        { background-color: var(--primary) !important; color: var(--sb-on-dark) !important; }
[data-theme="dark"] .nav-pills .nav-link           { color: var(--sb-text-2) !important; }
[data-theme="dark"] .nav-pills .nav-link:hover     { color: var(--sb-text) !important; background-color: var(--sb-surface-3); }
[data-theme="dark"] .nav-tabs .nav-link            { color: var(--sb-muted) !important; }
[data-theme="dark"] .nav-tabs .nav-link.active     { color: var(--sb-text) !important; }
[data-theme="dark"] #planTabs .nav-link            { color: var(--sb-text-2) !important; }
[data-theme="dark"] #planTabs .nav-link.active     { color: var(--sb-text) !important; }

/* Pricing plan name (uses var(--text) on a now-dark card) */
[data-theme="dark"] .plan-name                     { color: var(--sb-text); }

/* Pagination — page numbers were invisible on the dark page */
[data-theme="dark"] .pagination .page-link                     { background-color: #0f172a; border-color: var(--sb-border); color: var(--sb-text-2); }
[data-theme="dark"] .pagination .page-link:hover               { background-color: var(--sb-surface-3); color: var(--sb-text); }
[data-theme="dark"] .pagination .page-item.disabled .page-link { background-color: var(--sb-bg); color: var(--sb-faint); }
[data-theme="dark"] .pagination .page-item.active .page-link   { background-color: var(--primary); border-color: var(--sb-primary-border); color: var(--sb-text); }

/* Breadcrumbs — items, active item, links and divider */
[data-theme="dark"] .breadcrumb                                 { --bs-breadcrumb-divider-color: var(--sb-border-strong); }
[data-theme="dark"] .breadcrumb-item                            { color: var(--sb-text-2); }
[data-theme="dark"] .breadcrumb-item.active                     { color: var(--sb-text); }
[data-theme="dark"] .breadcrumb-item a                          { color: var(--sb-link); text-decoration: none; }
[data-theme="dark"] .breadcrumb-item a:hover                    { color: var(--sb-link); }
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--sb-faint); }

/* Text-button muted/success variants */
[data-theme="dark"] .btn-link.text-muted                       { color: var(--sb-muted) !important; }
[data-theme="dark"] .btn-link.text-success                     { color: var(--sb-success) !important; }

/* <code> in tables, help articles, and inline dark text colours that didn't adapt */
[data-theme="dark"] .table code                                { color: var(--sb-text) !important; }
[data-theme="dark"] .kb-article                                { color: var(--sb-text-2); }
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color: var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-text-2, rgba(15,23,42,.82))"]                      { color: var(--sb-text-2) !important; }
/* Near-black headings / figures (e.g. dashboard spend total, alert titles) → bright */
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color: var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"]                   { color: var(--sb-text) !important; }
/* Muted greys that go too dim on the dark page → lift to the dark-theme muted tone */
[data-theme="dark"] [style*="color:var(--sb-muted, rgba(15,23,42,.66))"],
[data-theme="dark"] [style*="color: var(--sb-muted, rgba(15,23,42,.66))"],
[data-theme="dark"] [style*="color:var(--sb-muted, rgba(15,23,42,.66))"],
[data-theme="dark"] [style*="color:var(--sb-muted, rgba(15,23,42,.66))"]                   { color: var(--sb-muted) !important; }
[data-theme="dark"] [style*="color:var(--sb-text-2, rgba(15,23,42,.82))"],
[data-theme="dark"] [style*="color: var(--sb-text-2, rgba(15,23,42,.82))"]                  { color: var(--sb-text-2) !important; }

/* ── Native colour-scheme: pin to the VISUAL theme so the OS preference can't
   leak dark form controls / autofill onto a light page (the login-input bug). ── */
html                  { color-scheme: light; }
[data-theme="dark"]   { color-scheme: dark; }

/* ── Chrome/Safari autofill — force a readable background + text in both themes.
   Autofilled login fields previously rendered as a grey box with faint text. ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--sb-text);
    -webkit-box-shadow: 0 0 0 1000px var(--sb-surface-3) inset;
    caret-color: var(--sb-text);
    transition: background-color 9999s ease-in-out 0s;
}
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--sb-text);
    -webkit-box-shadow: 0 0 0 1000px #0f172a inset;
    caret-color: var(--sb-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK-MODE AUDIT REMEDIATION — Phase 1 (catch-all)
   Fixes the systemic gaps in the attribute-patch approach: inline color:
   text that never flipped (invisible text), gradient + non-allow-list
   backgrounds, token redefinition, utility chips, and palette contrast.
   100% scoped to [data-theme="dark"] — LIGHT mode is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* (The old-token dark redefinitions lived here. Every old token is now an alias of an
   --sb-* role in the sb:tokens block at the top, and those flip with the theme.) */

/* Inline color: dark text that stayed dark on dark surfaces (no-space + spaced) */
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],[data-theme="dark"] [style*="color: var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],[data-theme="dark"] [style*="color: var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],[data-theme="dark"] [style*="color: var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],[data-theme="dark"] [style*="color: var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],[data-theme="dark"] [style*="color: var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],[data-theme="dark"] [style*="color: var(--sb-text, #0F172A)"]
{ color:var(--sb-text) !important; }

[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],[data-theme="dark"] [style*="color: var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-text-2, rgba(15,23,42,.82))"],[data-theme="dark"] [style*="color: var(--sb-text-2, rgba(15,23,42,.82))"],
[data-theme="dark"] [style*="color:var(--sb-text, #0F172A)"],[data-theme="dark"] [style*="color: var(--sb-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-text-2, rgba(15,23,42,.82))"],[data-theme="dark"] [style*="color: var(--sb-text-2, rgba(15,23,42,.82))"],
[data-theme="dark"] [style*="color:var(--sb-muted, rgba(15,23,42,.66))"],[data-theme="dark"] [style*="color: var(--sb-muted, rgba(15,23,42,.66))"],
[data-theme="dark"] [style*="color:var(--sb-muted, rgba(15,23,42,.66))"],[data-theme="dark"] [style*="color: var(--sb-muted, rgba(15,23,42,.66))"],
[data-theme="dark"] [style*="color:var(--sb-muted, rgba(15,23,42,.66))"],[data-theme="dark"] [style*="color: var(--sb-muted, rgba(15,23,42,.66))"]
{ color:var(--sb-muted) !important; }

[data-theme="dark"] [style*="color:var(--sb-link, #1E2A78)"],[data-theme="dark"] [style*="color: var(--sb-link, #1E2A78)"],
[data-theme="dark"] [style*="color:var(--sb-link, #1E2A78)"],[data-theme="dark"] [style*="color: var(--sb-link, #1E2A78)"],
[data-theme="dark"] [style*="color:var(--sb-link, #1E2A78)"],[data-theme="dark"] [style*="color: var(--sb-link, #1E2A78)"],
[data-theme="dark"] [style*="color:var(--sb-primary-text, #1E2A78)"],[data-theme="dark"] [style*="color: var(--sb-primary-text, #1E2A78)"]
{ color:var(--sb-link) !important; }

[data-theme="dark"] [style*="color:var(--sb-success, #1E2A78)"],[data-theme="dark"] [style*="color: var(--sb-success, #1E2A78)"],
[data-theme="dark"] [style*="color:var(--sb-success, #1E2A78)"],[data-theme="dark"] [style*="color: var(--sb-success, #1E2A78)"],
[data-theme="dark"] [style*="color:var(--sb-success, #1E2A78)"],[data-theme="dark"] [style*="color: var(--sb-success, #1E2A78)"],
[data-theme="dark"] [style*="color:var(--sb-success, #1E2A78)"],[data-theme="dark"] [style*="color: var(--sb-success, #1E2A78)"]
{ color:var(--sb-success) !important; }

[data-theme="dark"] [style*="color:var(--sb-warning-text, #0F172A)"],[data-theme="dark"] [style*="color: var(--sb-warning-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-warning-text, #0F172A)"],[data-theme="dark"] [style*="color: var(--sb-warning-text, #0F172A)"],
[data-theme="dark"] [style*="color:var(--sb-warning-text, #0F172A)"],[data-theme="dark"] [style*="color: var(--sb-warning-text, #0F172A)"]
{ color:var(--sb-accent) !important; }

[data-theme="dark"] [style*="color:var(--sb-danger, #DC2626)"],[data-theme="dark"] [style*="color: var(--sb-danger, #DC2626)"],
[data-theme="dark"] [style*="color:var(--sb-danger, #DC2626)"],[data-theme="dark"] [style*="color: var(--sb-danger, #DC2626)"],
[data-theme="dark"] [style*="color:var(--sb-danger, #DC2626)"],[data-theme="dark"] [style*="color: var(--sb-danger, #DC2626)"],
[data-theme="dark"] [style*="color:var(--sb-danger, #DC2626)"],[data-theme="dark"] [style*="color: var(--sb-danger, #DC2626)"]
{ color:var(--sb-danger) !important; }

/* Flat near-white backgrounds not in the original allow-list */
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"]{ background:var(--sb-primary-soft) !important; }
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"]{ background:var(--sb-surface) !important; }
[data-theme="dark"] [style*="background:var(--sb-primary-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="background:var(--sb-surface-3, rgba(30,42,120,.08))"]{ background:var(--sb-surface) !important; }
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="background:var(--sb-surface-2, rgba(30,42,120,.04))"]{ background:var(--sb-primary-soft) !important; }
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"],
[data-theme="dark"] [style*="background:var(--sb-warning-soft, rgba(245,158,11,.16))"]{ background:var(--sb-warning-soft) !important; }

/* Spaced / uppercase variants the no-space substring patches miss */
[data-theme="dark"] [style*="background: var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"]{ background:var(--sb-surface) !important; }
[data-theme="dark"] [style*="background: var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background: var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background: var(--sb-surface-2, rgba(30,42,120,.04))"]{ background:var(--sb-surface) !important; }

/* 135deg gradient cards (only the 180deg #fff form was patched before) */
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-surface-3, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="linear-gradient(135deg, var(--sb-surface-3, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-surface-2, rgba(30,42,120,.04))"]{ background:var(--sb-band) !important; border-color:var(--sb-primary-border) !important; }
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-success-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-success-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-success-soft, rgba(30,42,120,.08))"]{ background:var(--sb-primary-soft) !important; border-color:var(--sb-primary-line) !important; }
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-warning-soft, rgba(245,158,11,.16))"],
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-warning-soft, rgba(245,158,11,.16))"]{ background:var(--sb-warning-soft) !important; border-color:var(--sb-warning-line) !important; }
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-surface-2, rgba(30,42,120,.04))"],
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-primary-soft, rgba(30,42,120,.08))"],
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-primary-soft, rgba(30,42,120,.08))"]{ background:var(--sb-band) !important; }
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-danger-soft, rgba(220,38,38,.09))"],
[data-theme="dark"] [style*="linear-gradient(135deg,var(--sb-danger-soft, rgba(220,38,38,.09))"]{ background:var(--sb-danger-soft) !important; border-color:var(--sb-danger-line) !important; }

/* Borders that were light (extend allow-list) */
[data-theme="dark"] [style*="border:1px solid var(--sb-border, rgba(15,23,42,.12))"],
[data-theme="dark"] [style*="border:1px solid var(--sb-primary-line, rgba(30,42,120,.28))"],
[data-theme="dark"] [style*="border:1px solid var(--sb-primary-line, rgba(30,42,120,.28))"],
[data-theme="dark"] [style*="border:1px solid var(--sb-border, rgba(15,23,42,.12))"],
[data-theme="dark"] [style*="border:1px solid var(--sb-primary-line, rgba(30,42,120,.28))"]{ border-color:var(--sb-border) !important; }

/* Bootstrap *-subtle chips + text-black */
[data-theme="dark"] .bg-primary-subtle,
[data-theme="dark"] .bg-secondary-subtle,
[data-theme="dark"] .bg-success-subtle,
[data-theme="dark"] .bg-info-subtle,
[data-theme="dark"] .bg-warning-subtle,
[data-theme="dark"] .bg-danger-subtle,
[data-theme="dark"] .bg-light-subtle{ background-color:var(--sb-surface) !important; color:var(--sb-text-2) !important; }
[data-theme="dark"] .text-black{ color:var(--sb-text) !important; }

/* Palette / contrast refinements */
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder{ color:var(--sb-muted) !important; }
[data-theme="dark"] .card{ border-color:var(--sb-border); }
[data-theme="dark"] .stat-card .value{ color:var(--sb-text) !important; }
[data-theme="dark"] .stat-card .label{ color:var(--sb-muted) !important; }

/* Logo per theme: the gradient logo on light surfaces, the white (reversed) logo on dark
   ones. Both images are in the markup and only one shows. */
.sb-logo-dark{ display:none !important; }
[data-theme="dark"] .sb-logo-light{ display:none !important; }
[data-theme="dark"] .sb-logo-dark{ display:inline-block !important; }

/* Table FOOTER rows (subtotal / VAT / total) — the dark striping only targets
   `tbody tr:nth-of-type`, so `tfoot` cells stayed light-mode white. Fixes every
   invoice/summary table (caught in dark-mode visual QA). */
[data-theme="dark"] .table > tfoot > tr > td,
[data-theme="dark"] .table > tfoot > tr > th{ background-color:var(--sb-surface) !important; color:var(--sb-text); border-color:var(--sb-border); }
[data-theme="dark"] .table .table-active > *{ background-color:#0f172a !important; color:var(--sb-text) !important; }

/* ==========================================================================
   CLIENT AREA, DARK MODE - colour corrections (2026-09-06)
   Measured on the real dashboard rather than eyeballed. Contrast figures below
   are computed with alpha properly composited down to the painted surface: an
   earlier pass that ignored alpha reported the amber verify banner as an
   unreadable 1.49 when it is in fact a perfectly fine dark amber at .12 opacity.
   ========================================================================== */

/* 1. THE SIDEBAR -----------------------------------------------------------
   nav.sidebar has always painted --primary-dark (#161F5A), the brand navy, in
   BOTH themes; there was no dark override for it anywhere. Against the dark app
   background (#0b1220) and the cards (#111827) that navy is about seven times
   brighter and sits in a different hue family, so it read as a slab left over
   from the light theme rather than part of the page.
   Put it on the same surface ladder as everything else:
       #0b1220 page  ->  #0f172a sidebar  ->  #15213a card  ->  #1e293b raised   (card = analytics navy since 2026-09-12)
   Every nav-link state is an rgba-white overlay, so they all still work; the
   hover/active wash is eased back slightly because it no longer needs to fight
   a bright base. */
[data-theme="dark"] nav.sidebar {
    background: #0f172a;
    border-right: 1px solid var(--sb-on-dark-line);
}
[data-theme="dark"] .sidebar .nav-link:hover,
[data-theme="dark"] .sidebar .nav-link.active { background: rgba(248,250,252,.07); }

/* Sidebar footer links ("Back to site") measured 2.87:1 on the old navy and
   would only get worse on the calmer panel. */
[data-theme="dark"] .sidebar a.text-decoration-none { color: var(--sb-on-dark-2) !important; }

/* 2. STATUS PILLS ----------------------------------------------------------
   `.content-area .ent-pill.active { background:rgba(16,185,129,.14) !important;
   color:#065f46 !important }` carries no theme condition. Over white that tint
   is a pale mint and the dark green reads fine. Over #111827 it composites to a
   dark teal and the same dark green collapses:
       active 1.51:1   paid 1.86:1   unpaid 1.87:1     (4.5 is the bar)
   which is why the badges beside a service looked like smudges. There IS a
   correct dark rule further down the file, but it loses to the !important above,
   so the fix has to match that weight. Only the TEXT is wrong: the tint and the
   dot halo work in both themes, so they are left alone. */
[data-theme="dark"] .content-area .ent-pill.active,
[data-theme="dark"] .content-area .ent-pill.paid,
[data-theme="dark"] .content-area .ent-pill.on         { color: var(--sb-success) !important; }
[data-theme="dark"] .content-area .ent-pill.suspended,
[data-theme="dark"] .content-area .ent-pill.unpaid,
[data-theme="dark"] .content-area .ent-pill.expired    { color: var(--sb-danger) !important; }
[data-theme="dark"] .content-area .ent-pill.pending,
[data-theme="dark"] .content-area .ent-pill.warn       { color: var(--sb-accent) !important; }
[data-theme="dark"] .content-area .ent-pill.cancelled,
[data-theme="dark"] .content-area .ent-pill.terminated,
[data-theme="dark"] .content-area .ent-pill.off        { color: var(--sb-text-2) !important; }

/* 3. SOLID PRIMARY CHIPS ---------------------------------------------------
   The "Open" chip is white on #1E2A78 at 11px: 3.68:1. Lift the fill so small
   labels clear the 4.5 bar. */
[data-theme="dark"] .content-area .ent-icon-btn.primary {
    background: var(--sb-primary); border-color: var(--sb-primary-line); color: var(--sb-text);
}
[data-theme="dark"] .content-area .ent-icon-btn.primary:hover {
    background: var(--sb-primary-hover); border-color: var(--sb-primary-hover); color: var(--sb-on-primary-hover);
}

/* 4. STRAY BOOTSTRAP LINK BLUE --------------------------------------------
   .ent-kpi is an <a>, so it inherits #3140b4 (3.94:1 on the card). Its children
   set their own colours, so this only removes the odd blue flash on the tile
   itself. */
[data-theme="dark"] .content-area .ent-kpi { color: var(--sb-text-2); }

/* NOTE: the chat widget's own colours are NOT set here. includes/chat-widget.php
   emits an inline <style> block, which comes after this file in the document and
   therefore wins at equal specificity. Its dark-mode footer contrast was fixed at
   source there rather than by escalating to !important from this side. */

/* ==========================================================================
   ADMIN AREA, DARK MODE - colour corrections (2026-09-07)
   Same measured pass as the client dashboard. The admin already inherited the
   sidebar and surface-ladder fixes, so only two colour families were still
   wrong, and both are the "light-mode ink reused on a dark tint" pattern.
   ========================================================================== */

/* 1. TREND CHIPS -----------------------------------------------------------
   `.ent-trend.up/.down` set a translucent tint with LIGHT-MODE ink and no theme
   condition, exactly like the status pills did. On a dark card the tint goes
   dark and the ink stays dark: the "-79%" chip measured **1.87:1**. Matched to
   the pill colours so a chip and a badge read as the same language. */
[data-theme="dark"] .ent-trend.up   { color: var(--sb-success); }
[data-theme="dark"] .ent-trend.down { color: var(--sb-danger); }
[data-theme="dark"] .ent-trend.flat { background: rgba(248,250,252,.16); color: var(--sb-text-2); }

/* 2. BOOTSTRAP MONEY COLOURS ----------------------------------------------
   Bootstrap's .text-success (#198754) is tuned for white. On the admin cards it
   is **3.23:1**, which is where every revenue figure on the dashboard lives -
   "Top Clients by Revenue", "Recent Payments", today's takings. #34d399 reads as
   money rather than mint and lands at 9.23:1 on a card, 7.61:1 on a raised panel.
   Bootstrap sets these with !important, so this has to match that weight.
   .text-warning is deliberately untouched: it already measures 8.97:1. */
[data-theme="dark"] .text-success { color: var(--sb-success) !important; }
[data-theme="dark"] .text-danger  { color: var(--sb-danger) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ONE CARD SURFACE FOR THE WHOLE DASHBOARD — 2026-09-12
   Bethwel: the analytics page's card background is the look for every card in
   the admin and client areas. That colour comes from hk-list.css (.svc-stat /
   .an-card): #15213a on #27375a borders, table heads #0e1830, zebra #192744.
   Everything below sits LAST in the cascade so it beats the older per-page
   rules at the weights they used (the .content-area block above is !important).
   Light mode is already white on every page and is deliberately left alone.
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .ent-card,
[data-theme="dark"] .ent-kpi,
[data-theme="dark"] .ent-qa,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .pricing-card-new,
[data-theme="dark"] .hk-auth-card,
[data-theme="dark"] .domain-search-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .hk-faq-item,
[data-theme="dark"] .svc-list .svc-row,
[data-theme="dark"] .tkt-bubble--client,
[data-theme="dark"] .content-area .card,
[data-theme="dark"] .content-area .table-card,
[data-theme="dark"] .content-area .stat-card,
[data-theme="dark"] .content-area .ent-card,
[data-theme="dark"] .content-area .ent-kpi,
[data-theme="dark"] .content-area .ent-qa {
    background: var(--sb-surface) !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text);
}
[data-theme="dark"] .content-area .card,
[data-theme="dark"] .content-area .table-card,
[data-theme="dark"] .content-area .stat-card,
[data-theme="dark"] .content-area .ent-card,
[data-theme="dark"] .content-area .ent-kpi,
[data-theme="dark"] .content-area .ent-qa,
[data-theme="dark"] .content-area .dash-card {
    box-shadow: 0 2px 12px rgba(15,23,42,.4) !important;
}
/* Raised strips inside a card: table heads, generic card headers, list-card notes */
[data-theme="dark"] .card-header,
[data-theme="dark"] .dash-card-head,
[data-theme="dark"] .table-light,
[data-theme="dark"] .table thead th {
    background: var(--sb-surface-2) !important;
    color: var(--sb-muted);
    border-color: var(--sb-border) !important;
}
[data-theme="dark"] .card-header, [data-theme="dark"] .dash-card-head { color: var(--sb-text); }
/* Table bodies inside the navy card: analytics zebra + hover */
[data-theme="dark"] .table { border-color: var(--sb-border); }
[data-theme="dark"] .table tbody tr:nth-of-type(odd)  > * { background-color: var(--sb-surface); color: var(--sb-text); }
[data-theme="dark"] .table tbody tr:nth-of-type(even) > * { background-color: var(--sb-surface-2); color: var(--sb-text); }
[data-theme="dark"] .table.table-hover tbody tr:hover > * { background-color: rgba(30,42,120,.22) !important; }
/* Surfaces that used to be painted slate to match the old cards */
[data-theme="dark"] .dropdown-menu { background: var(--sb-surface); border-color: var(--sb-border); }
[data-theme="dark"] .bg-white,
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"],
[data-theme="dark"] [style*="background:var(--sb-surface, #F8FAFC)"] { background: var(--sb-surface) !important; }
[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--sb-surface); border-color: var(--sb-border) var(--sb-border) var(--sb-border); }
[data-theme="dark"] .bg-light-subtle { background-color: var(--sb-surface) !important; }
[data-theme="dark"] nav.sidebar { border-right-color: var(--sb-on-dark-line); }

/* sb:tokens:start ─────────────────────────────────────────────────────────
   BOOTSTRAP ON THE PALETTE. Bootstrap ships its own blues, greens and greys;
   this points every Bootstrap colour at the SiteBoma roles, in both themes.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --bs-body-color-rgb: var(--sb-ink-rgb);      --bs-emphasis-color-rgb: var(--sb-ink-rgb);
    --bs-link-color-rgb: var(--sb-indigo-rgb);   --bs-link-hover-color-rgb: var(--sb-ink-rgb);
    --bs-primary-rgb: var(--sb-indigo-rgb);      --bs-secondary-rgb: var(--sb-ink-rgb);
    --bs-success-rgb: var(--sb-indigo-rgb);      --bs-info-rgb: var(--sb-indigo-rgb);
    --bs-danger-rgb: 185, 28, 28;                /* .text-danger & co: the deeper text red (fills keep --sb-red) */
}
[data-theme="dark"] {
    --bs-body-color-rgb: var(--sb-paper-rgb);    --bs-emphasis-color-rgb: var(--sb-paper-rgb);
    --bs-link-color-rgb: var(--sb-amber-rgb);    --bs-link-hover-color-rgb: var(--sb-paper-rgb);
    --bs-secondary-rgb: var(--sb-indigo-rgb);    --bs-danger-rgb: 248, 113, 113;
}
:root, [data-theme="dark"] {
    --bs-primary: var(--sb-primary);   --bs-secondary: var(--sb-muted);   --bs-success: var(--sb-primary);
    --bs-info: var(--sb-primary);      --bs-warning: var(--sb-amber);     --bs-warning-rgb: var(--sb-amber-rgb);
    --bs-danger: var(--sb-danger);     --bs-light: var(--sb-paper);       --bs-light-rgb: var(--sb-paper-rgb);
    --bs-dark: var(--sb-ink);          --bs-dark-rgb: var(--sb-ink-rgb);
    --bs-white-rgb: var(--sb-paper-rgb);   --bs-black-rgb: var(--sb-ink-rgb);
    --bs-body-color: var(--sb-text);   --bs-body-bg: var(--sb-bg);        --bs-emphasis-color: var(--sb-text);
    --bs-secondary-color: var(--sb-muted);   --bs-tertiary-color: var(--sb-faint);
    --bs-secondary-bg: var(--sb-surface-3);  --bs-tertiary-bg: var(--sb-surface-2);
    --bs-heading-color: inherit;
    --bs-link-color: var(--sb-link);   --bs-link-hover-color: var(--sb-text);
    --bs-border-color: var(--sb-border);   --bs-border-color-translucent: var(--sb-border);
    --bs-code-color: var(--sb-primary-text);
    --bs-highlight-color: var(--sb-ink);   --bs-highlight-bg: rgba(245, 158, 11, .30);
    --bs-focus-ring-color: rgba(245, 158, 11, .45);
    --bs-form-valid-color: var(--sb-success);   --bs-form-valid-border-color: var(--sb-primary-line);
    --bs-form-invalid-color: var(--sb-danger);  --bs-form-invalid-border-color: var(--sb-danger);
    --bs-primary-text-emphasis: var(--sb-primary-text);  --bs-primary-bg-subtle: var(--sb-primary-soft);  --bs-primary-border-subtle: var(--sb-primary-line);
    --bs-secondary-text-emphasis: var(--sb-text-2);      --bs-secondary-bg-subtle: var(--sb-surface-3);   --bs-secondary-border-subtle: var(--sb-border);
    --bs-success-text-emphasis: var(--sb-success);       --bs-success-bg-subtle: var(--sb-success-soft);  --bs-success-border-subtle: var(--sb-primary-line);
    --bs-info-text-emphasis: var(--sb-primary-text);     --bs-info-bg-subtle: var(--sb-primary-soft);     --bs-info-border-subtle: var(--sb-primary-line);
    --bs-warning-text-emphasis: var(--sb-warning-text);  --bs-warning-bg-subtle: var(--sb-warning-soft);  --bs-warning-border-subtle: var(--sb-warning-line);
    --bs-danger-text-emphasis: var(--sb-danger);         --bs-danger-bg-subtle: var(--sb-danger-soft);    --bs-danger-border-subtle: var(--sb-danger-line);
    --bs-light-text-emphasis: var(--sb-text-2);          --bs-light-bg-subtle: var(--sb-surface-2);       --bs-light-border-subtle: var(--sb-border);
    --bs-dark-text-emphasis: var(--sb-text);             --bs-dark-bg-subtle: var(--sb-surface-3);        --bs-dark-border-subtle: var(--sb-border-strong);
    --bs-box-shadow: 0 .5rem 1rem rgba(var(--sb-ink-rgb), .15);
    --bs-box-shadow-sm: 0 .125rem .25rem rgba(var(--sb-ink-rgb), .075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(var(--sb-ink-rgb), .175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(var(--sb-ink-rgb), .075);
}

/* Buttons */
.btn-primary, .btn-success, .btn-info {
    --bs-btn-color: var(--sb-on-primary);  --bs-btn-bg: var(--sb-primary);  --bs-btn-border-color: var(--sb-primary);
    --bs-btn-hover-color: var(--sb-on-primary-hover);  --bs-btn-hover-bg: var(--sb-primary-hover);  --bs-btn-hover-border-color: var(--sb-primary-hover);
    --bs-btn-active-color: var(--sb-on-primary-hover); --bs-btn-active-bg: var(--sb-primary-hover); --bs-btn-active-border-color: var(--sb-primary-hover);
    --bs-btn-disabled-color: var(--sb-on-primary); --bs-btn-disabled-bg: var(--sb-primary); --bs-btn-disabled-border-color: var(--sb-primary);
    --bs-btn-focus-shadow-rgb: var(--sb-amber-rgb);
}
[data-theme="dark"] :is(.btn-primary, .btn-success, .btn-info) { --bs-btn-border-color: rgba(248, 250, 252, .28); }
.btn-warning {
    --bs-btn-color: var(--sb-ink);  --bs-btn-bg: var(--sb-amber);  --bs-btn-border-color: var(--sb-amber);
    --bs-btn-hover-color: var(--sb-paper);  --bs-btn-hover-bg: var(--sb-ink);  --bs-btn-hover-border-color: var(--sb-ink);
    --bs-btn-active-color: var(--sb-paper); --bs-btn-active-bg: var(--sb-ink); --bs-btn-active-border-color: var(--sb-ink);
    --bs-btn-disabled-color: var(--sb-ink); --bs-btn-disabled-bg: var(--sb-amber); --bs-btn-disabled-border-color: var(--sb-amber);
    --bs-btn-focus-shadow-rgb: var(--sb-amber-rgb);
}
[data-theme="dark"] .btn-warning { --bs-btn-hover-color: var(--sb-ink); --bs-btn-hover-bg: var(--sb-paper); --bs-btn-hover-border-color: var(--sb-paper);
    --bs-btn-active-color: var(--sb-ink); --bs-btn-active-bg: var(--sb-paper); --bs-btn-active-border-color: var(--sb-paper); }
.btn-danger {
    --bs-btn-color: var(--sb-paper);  --bs-btn-bg: var(--sb-red);  --bs-btn-border-color: var(--sb-red);
    --bs-btn-hover-color: var(--sb-paper);  --bs-btn-hover-bg: var(--sb-ink);  --bs-btn-hover-border-color: var(--sb-ink);
    --bs-btn-active-color: var(--sb-paper); --bs-btn-active-bg: var(--sb-ink); --bs-btn-active-border-color: var(--sb-ink);
    --bs-btn-disabled-color: var(--sb-paper); --bs-btn-disabled-bg: var(--sb-red); --bs-btn-disabled-border-color: var(--sb-red);
    --bs-btn-focus-shadow-rgb: var(--sb-red-rgb);
}
.btn-secondary, .btn-dark {
    --bs-btn-color: var(--sb-paper);  --bs-btn-bg: var(--sb-ink);  --bs-btn-border-color: var(--sb-ink);
    --bs-btn-hover-color: var(--sb-paper);  --bs-btn-hover-bg: var(--sb-indigo);  --bs-btn-hover-border-color: var(--sb-indigo);
    --bs-btn-active-color: var(--sb-paper); --bs-btn-active-bg: var(--sb-indigo); --bs-btn-active-border-color: var(--sb-indigo);
    --bs-btn-disabled-color: var(--sb-paper); --bs-btn-disabled-bg: var(--sb-ink); --bs-btn-disabled-border-color: var(--sb-ink);
    --bs-btn-focus-shadow-rgb: var(--sb-amber-rgb);
}
[data-theme="dark"] :is(.btn-secondary, .btn-dark) { --bs-btn-bg: var(--sb-indigo); --bs-btn-border-color: rgba(248, 250, 252, .28);
    --bs-btn-hover-color: var(--sb-ink); --bs-btn-hover-bg: var(--sb-amber); --bs-btn-hover-border-color: var(--sb-amber); }
.btn-light {
    --bs-btn-color: var(--sb-ink);  --bs-btn-bg: var(--sb-paper);  --bs-btn-border-color: var(--sb-border);
    --bs-btn-hover-color: var(--sb-ink);  --bs-btn-hover-bg: var(--sb-surface-3);  --bs-btn-hover-border-color: var(--sb-border-strong);
    --bs-btn-active-color: var(--sb-ink); --bs-btn-active-bg: var(--sb-surface-3); --bs-btn-active-border-color: var(--sb-border-strong);
    --bs-btn-disabled-color: var(--sb-faint); --bs-btn-disabled-bg: var(--sb-paper); --bs-btn-disabled-border-color: var(--sb-border);
    --bs-btn-focus-shadow-rgb: var(--sb-amber-rgb);
}
.btn-outline-primary, .btn-outline-success, .btn-outline-info {
    --bs-btn-color: var(--sb-primary-text);  --bs-btn-border-color: var(--sb-primary-border);
    --bs-btn-hover-color: var(--sb-on-primary);  --bs-btn-hover-bg: var(--sb-primary);  --bs-btn-hover-border-color: var(--sb-primary);
    --bs-btn-active-color: var(--sb-on-primary); --bs-btn-active-bg: var(--sb-primary); --bs-btn-active-border-color: var(--sb-primary);
    --bs-btn-disabled-color: var(--sb-faint); --bs-btn-disabled-border-color: var(--sb-border);
    --bs-btn-focus-shadow-rgb: var(--sb-amber-rgb);
}
.btn-outline-secondary, .btn-outline-dark {
    --bs-btn-color: var(--sb-text);  --bs-btn-border-color: var(--sb-border-strong);
    --bs-btn-hover-color: var(--sb-bg);  --bs-btn-hover-bg: var(--sb-text);  --bs-btn-hover-border-color: var(--sb-text);
    --bs-btn-active-color: var(--sb-bg); --bs-btn-active-bg: var(--sb-text); --bs-btn-active-border-color: var(--sb-text);
    --bs-btn-disabled-color: var(--sb-faint); --bs-btn-disabled-border-color: var(--sb-border);
    --bs-btn-focus-shadow-rgb: var(--sb-amber-rgb);
}
.btn-outline-warning {
    --bs-btn-color: var(--sb-warning-text);  --bs-btn-border-color: var(--sb-amber);
    --bs-btn-hover-color: var(--sb-ink);  --bs-btn-hover-bg: var(--sb-amber);  --bs-btn-hover-border-color: var(--sb-amber);
    --bs-btn-active-color: var(--sb-ink); --bs-btn-active-bg: var(--sb-amber); --bs-btn-active-border-color: var(--sb-amber);
    --bs-btn-disabled-color: var(--sb-faint); --bs-btn-disabled-border-color: var(--sb-border);
    --bs-btn-focus-shadow-rgb: var(--sb-amber-rgb);
}
.btn-outline-danger {
    --bs-btn-color: var(--sb-danger);  --bs-btn-border-color: var(--sb-danger);
    --bs-btn-hover-color: var(--sb-paper);  --bs-btn-hover-bg: var(--sb-red);  --bs-btn-hover-border-color: var(--sb-red);
    --bs-btn-active-color: var(--sb-paper); --bs-btn-active-bg: var(--sb-red); --bs-btn-active-border-color: var(--sb-red);
    --bs-btn-disabled-color: var(--sb-faint); --bs-btn-disabled-border-color: var(--sb-border);
    --bs-btn-focus-shadow-rgb: var(--sb-red-rgb);
}
.btn-outline-light {
    --bs-btn-color: var(--sb-paper);  --bs-btn-border-color: rgba(248, 250, 252, .55);
    --bs-btn-hover-color: var(--sb-ink);  --bs-btn-hover-bg: var(--sb-paper);  --bs-btn-hover-border-color: var(--sb-paper);
    --bs-btn-active-color: var(--sb-ink); --bs-btn-active-bg: var(--sb-paper); --bs-btn-active-border-color: var(--sb-paper);
    --bs-btn-focus-shadow-rgb: var(--sb-amber-rgb);
}
.btn-link { --bs-btn-color: var(--sb-link); --bs-btn-hover-color: var(--sb-text); --bs-btn-active-color: var(--sb-text); --bs-btn-disabled-color: var(--sb-faint); }
.text-bg-primary, .text-bg-secondary, .text-bg-success, .text-bg-info, .text-bg-danger, .text-bg-dark { color: var(--sb-paper) !important; }
.text-bg-warning, .text-bg-light { color: var(--sb-ink) !important; }
.badge { --bs-badge-color: var(--sb-paper); }
.bg-light { background-color: var(--sb-surface-2) !important; }

/* Forms */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--sb-primary-border);
    box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .35);
}
.form-control::placeholder { color: var(--sb-faint); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--sb-indigo); border-color: var(--sb-indigo); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23F59E0B'/%3e%3c/svg%3e"); }
.form-range::-webkit-slider-thumb { background-color: var(--sb-indigo); }
.form-range::-moz-range-thumb { background-color: var(--sb-indigo); }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230F172A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F8FAFC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }

/* Components */
.nav-pills { --bs-nav-pills-link-active-bg: var(--sb-primary); --bs-nav-pills-link-active-color: var(--sb-on-primary); }
.pagination {
    --bs-pagination-color: var(--sb-link); --bs-pagination-bg: var(--sb-surface); --bs-pagination-border-color: var(--sb-border);
    --bs-pagination-hover-color: var(--sb-text); --bs-pagination-hover-bg: var(--sb-surface-3); --bs-pagination-hover-border-color: var(--sb-border);
    --bs-pagination-focus-color: var(--sb-text); --bs-pagination-focus-bg: var(--sb-surface-3); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(245, 158, 11, .35);
    --bs-pagination-active-color: var(--sb-on-primary); --bs-pagination-active-bg: var(--sb-primary); --bs-pagination-active-border-color: var(--sb-primary);
    --bs-pagination-disabled-color: var(--sb-faint); --bs-pagination-disabled-bg: var(--sb-surface); --bs-pagination-disabled-border-color: var(--sb-border);
}
.progress, .progress-stacked { --bs-progress-bg: var(--sb-surface-3); --bs-progress-bar-bg: var(--sb-primary); --bs-progress-bar-color: var(--sb-on-primary); }
.dropdown-menu {
    --bs-dropdown-bg: var(--sb-surface); --bs-dropdown-color: var(--sb-text); --bs-dropdown-border-color: var(--sb-border);
    --bs-dropdown-link-color: var(--sb-text); --bs-dropdown-link-hover-color: var(--sb-text); --bs-dropdown-link-hover-bg: var(--sb-surface-3);
    --bs-dropdown-link-active-color: var(--sb-on-primary); --bs-dropdown-link-active-bg: var(--sb-primary);
    --bs-dropdown-link-disabled-color: var(--sb-faint); --bs-dropdown-header-color: var(--sb-muted); --bs-dropdown-divider-bg: var(--sb-border);
}
.list-group {
    --bs-list-group-color: var(--sb-text); --bs-list-group-bg: var(--sb-surface); --bs-list-group-border-color: var(--sb-border);
    --bs-list-group-action-color: var(--sb-text-2); --bs-list-group-action-hover-color: var(--sb-text); --bs-list-group-action-hover-bg: var(--sb-surface-3);
    --bs-list-group-active-color: var(--sb-on-primary); --bs-list-group-active-bg: var(--sb-primary); --bs-list-group-active-border-color: var(--sb-primary);
    --bs-list-group-disabled-color: var(--sb-faint);
}
.accordion {
    --bs-accordion-color: var(--sb-text); --bs-accordion-bg: var(--sb-surface); --bs-accordion-border-color: var(--sb-border);
    --bs-accordion-btn-color: var(--sb-text); --bs-accordion-btn-bg: var(--sb-surface);
    --bs-accordion-active-color: var(--sb-primary-text); --bs-accordion-active-bg: var(--sb-primary-soft);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(245, 158, 11, .35);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230F172A' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231E2A78' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
.modal { --bs-modal-bg: var(--sb-surface); --bs-modal-color: var(--sb-text); --bs-modal-border-color: var(--sb-border); --bs-modal-header-border-color: var(--sb-border); --bs-modal-footer-border-color: var(--sb-border); }
.offcanvas { --bs-offcanvas-bg: var(--sb-surface); --bs-offcanvas-color: var(--sb-text); }
.tooltip { --bs-tooltip-bg: var(--sb-ink); --bs-tooltip-color: var(--sb-paper); }
.popover { --bs-popover-bg: var(--sb-surface); --bs-popover-border-color: var(--sb-border); --bs-popover-header-bg: var(--sb-surface-2); --bs-popover-body-color: var(--sb-text); }
.toast { --bs-toast-bg: var(--sb-surface); --bs-toast-color: var(--sb-text); --bs-toast-border-color: var(--sb-border); --bs-toast-header-bg: var(--sb-surface-2); --bs-toast-header-color: var(--sb-muted); }
.card { --bs-card-bg: var(--sb-surface); --bs-card-color: var(--sb-text); --bs-card-border-color: var(--sb-border); --bs-card-cap-bg: var(--sb-surface-2); }
.table { --bs-table-color: var(--sb-text); --bs-table-border-color: var(--sb-border); --bs-table-striped-bg: var(--sb-surface-2); --bs-table-active-bg: var(--sb-surface-3); --bs-table-hover-bg: var(--sb-surface-3); }
.table-light { --bs-table-color: var(--sb-text); --bs-table-bg: var(--sb-surface-2); --bs-table-border-color: var(--sb-border); }
.table-dark { --bs-table-color: var(--sb-paper); --bs-table-bg: var(--sb-ink); }
.table-primary, .table-success, .table-info { --bs-table-color: var(--sb-text); --bs-table-bg: var(--sb-primary-soft); }
.table-warning { --bs-table-color: var(--sb-text); --bs-table-bg: var(--sb-warning-soft); }
.table-danger  { --bs-table-color: var(--sb-text); --bs-table-bg: var(--sb-danger-soft); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--sb-faint); --bs-breadcrumb-item-active-color: var(--sb-muted); }
.navbar {
    --bs-navbar-color: var(--sb-text-2); --bs-navbar-hover-color: var(--sb-text); --bs-navbar-active-color: var(--sb-primary-text);
    --bs-navbar-brand-color: var(--sb-text); --bs-navbar-toggler-border-color: var(--sb-border);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815, 23, 42, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.btn-close { --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230F172A'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); }
/* sb:tokens:end */

/* ══════════════════════════════════════════════════════════════════════════
   HOSTIKO → SITEBOMA. The one-time welcome in the client area, the banner for
   visitors arriving from hostiko.co.ke, and the /hostiko page. Palette only.
   The amber ring is the "boma", the enclosure the name comes from.
   ══════════════════════════════════════════════════════════════════════════ */
.sb-welcome { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1rem; }
.sb-welcome__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sb-welcome__panel {
    position: relative; width: min(940px, 100%); max-height: calc(100vh - 2rem); overflow: auto;
    background: var(--sb-surface); color: var(--sb-text);
    border: 1px solid var(--sb-border); border-radius: 22px;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .5);
    animation: sbWelcomeIn .5s cubic-bezier(.2, .8, .2, 1) both;
}
.sb-welcome__hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--sb-ink) 0%, var(--sb-indigo) 80%);
    color: var(--sb-paper); padding: 2rem 2.4rem 1.9rem;
}
.sb-ring, .sb-welcome__ring {
    position: absolute; border-radius: 50%; pointer-events: none;
    border: 28px solid var(--sb-amber); opacity: .92;
}
.sb-welcome__ring { width: 250px; height: 250px; right: -80px; top: -95px; }
.sb-welcome__hero > *:not(.sb-welcome__ring) { position: relative; }
.sb-welcome__hero > img { display: block; }
.sb-welcome__eyebrow, .sb-move-names {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.3rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.sb-welcome__eyebrow s, .sb-move-names s { color: rgba(248, 250, 252, .55); text-decoration-thickness: 2px; }
.sb-welcome__eyebrow span, .sb-move-names b { color: var(--sb-amber); }
.sb-welcome__hero h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 800; letter-spacing: -.025em; margin: .4rem 0 .55rem; color: var(--sb-paper); }
.sb-welcome__hero p { max-width: 580px; margin: 0; color: rgba(248, 250, 252, .84); font-size: 1rem; line-height: 1.6; }
.sb-welcome__body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.9rem; padding: 1.8rem 2.4rem; }
.sb-welcome h3 { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-muted); margin: 0 0 .9rem; }
.sb-welcome__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sb-welcome__checks li {
    display: flex; align-items: center; gap: .7rem; font-size: .95rem; line-height: 1.35;
    opacity: 0; animation: sbWelcomeItem .45s ease forwards; animation-delay: calc(.4s + var(--i, 0) * .13s);
}
.sb-welcome__checks li i {
    flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--sb-primary); color: var(--sb-on-primary); font-size: 1rem;
}
[data-theme="dark"] .sb-welcome__checks li i { background: var(--sb-amber); color: var(--sb-ink); }
.sb-welcome__checks strong { font-variant-numeric: tabular-nums; }
.sb-welcome__note {
    margin: 1.1rem 0 0; padding: .7rem .9rem; border-radius: 12px; font-size: .86rem;
    background: var(--sb-surface-2); border: 1px solid var(--sb-border); color: var(--sb-text-2);
}
.sb-welcome__new { display: grid; gap: .7rem; }
.sb-welcome__new > div {
    display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .9rem;
    border-radius: 14px; border: 1px solid var(--sb-border); background: var(--sb-surface-2);
}
.sb-welcome__new i, .sb-move-ic {
    flex: 0 0 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
    background: var(--sb-primary-soft); color: var(--sb-primary-text); font-size: 1.1rem;
}
.sb-welcome__new strong { display: block; font-size: .93rem; }
.sb-welcome__new span { display: block; font-size: .83rem; color: var(--sb-muted); margin-top: .12rem; line-height: 1.45; }
.sb-welcome__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
    padding: 1.05rem 2.4rem 1.5rem; border-top: 1px solid var(--sb-border);
}
.sb-welcome__foot a { color: var(--sb-link); font-weight: 600; text-decoration: none; font-size: .92rem; }
.sb-welcome__foot a:hover { text-decoration: underline; }
.sb-welcome__foot .btn { padding: .7rem 1.35rem; font-weight: 700; border-radius: 11px; }
body.sb-welcome-open { overflow: hidden; }
@keyframes sbWelcomeIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sbWelcomeItem { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 767.98px) {
    .sb-welcome__body { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.3rem; }
    .sb-welcome__hero { padding: 1.5rem 1.3rem; }
    .sb-welcome__foot { padding: 1rem 1.3rem 1.3rem; }
    .sb-welcome__ring { width: 170px; height: 170px; border-width: 20px; right: -70px; top: -70px; }
}
@media (prefers-reduced-motion: reduce) {
    .sb-welcome__panel, .sb-welcome__checks li { animation: none; opacity: 1; }
}

/* Visitors arriving from hostiko.co.ke (?from=hostiko) */
.sb-rebrand-bar { background: var(--sb-amber); color: var(--sb-ink); font-size: .9rem; padding: .55rem 0; position: relative; z-index: 1031; }
.sb-rebrand-bar a { color: var(--sb-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sb-rebrand-bar__x { background: none; border: 0; color: var(--sb-ink); font-size: 1.3rem; line-height: 1; padding: 0 .3rem; margin-left: .35rem; cursor: pointer; }

/* The /hostiko page */
.sb-move-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--sb-ink) 0%, var(--sb-indigo) 78%); color: var(--sb-paper); padding: 84px 0 76px; }
.sb-move-hero::before, .sb-move-hero::after { display: none; }
.sb-move-hero .sb-ring { width: 420px; height: 420px; border-width: 44px; right: -120px; top: -150px; }
.sb-move-hero .container { position: relative; }
.sb-move-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: .9rem 0 1rem; color: var(--sb-paper); }
.sb-move-hero .lead { color: rgba(248, 250, 252, .86); max-width: 640px; font-size: 1.15rem; line-height: 1.6; }
.sb-move-section { padding: 72px 0; }
.sb-move-section + .sb-move-section { border-top: 1px solid var(--sb-border); }
.sb-move-kicker { font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sb-link); }
.sb-move-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; margin: .4rem 0 .6rem; }
.sb-move-sub { color: var(--sb-muted); max-width: 640px; }
.sb-move-card { height: 100%; padding: 1.5rem; border-radius: 18px; background: var(--sb-surface); border: 1px solid var(--sb-border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.sb-move-card .sb-move-ic { width: 46px; height: 46px; flex-basis: 46px; font-size: 1.3rem; border-radius: 13px; margin-bottom: 1rem; }
.sb-move-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: .4rem; }
.sb-move-card p { color: var(--sb-muted); margin: 0; font-size: .94rem; line-height: 1.55; }
.sb-move-card--check .sb-move-ic { background: var(--sb-primary); color: var(--sb-on-primary); }
[data-theme="dark"] .sb-move-card--check .sb-move-ic { background: var(--sb-amber); color: var(--sb-ink); }
.sb-move-changes { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.sb-move-changes li { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 14px; background: var(--sb-surface-2); border: 1px solid var(--sb-border); }
.sb-move-changes li i { color: var(--sb-accent); font-size: 1.2rem; line-height: 1.2; }
.sb-move-changes li strong { display: block; }
.sb-move-changes li span { color: var(--sb-muted); font-size: .93rem; }
.sb-move-cta { background: var(--sb-band); color: var(--sb-paper); border-radius: 22px; padding: 2.2rem; position: relative; overflow: hidden; }
.sb-move-cta .sb-ring { width: 220px; height: 220px; border-width: 26px; right: -60px; bottom: -110px; }
.sb-move-cta > *:not(.sb-ring) { position: relative; }
.sb-move-cta p { color: rgba(248, 250, 252, .8); }

/* ── Site health card (client dashboard) ─────────────────────────────────────
   ok = indigo (amber in dark), warn = amber, bad = red (a real problem), wait = faint. */
.sb-health__note { font-size: .7rem; color: var(--sb-faint); }
.sb-health__sum { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem .9rem; }
.sb-health__sum > i { font-size: 2rem; line-height: 1; }
.sb-health__sum strong { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.sb-health__sum span { display: block; font-size: .8rem; color: var(--sb-muted); margin-top: .1rem; }
.sb-health__list { padding: 0 1.1rem .7rem; }
.sb-health__row { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-top: 1px solid var(--sb-border); }
.sb-health__dot { font-size: 1rem; flex-shrink: 0; }
.sb-health__site { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-health__site a { font-size: .86rem; font-weight: 600; color: var(--sb-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-health__site a:hover { color: var(--sb-link); text-decoration: underline; }
.sb-health__site span { font-size: .74rem; color: var(--sb-muted); }
.sb-health__chips { display: flex; gap: .35rem; flex-shrink: 0; }
.sb-health__chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 600; font-variant-numeric: tabular-nums;
    padding: .18rem .45rem; border-radius: 999px; background: var(--sb-surface-2); border: 1px solid var(--sb-border); color: var(--sb-text-2); }
.sb-health__more summary { cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--sb-link); padding: .45rem 0 .1rem; list-style: none; }
.sb-health__more summary::-webkit-details-marker { display: none; }
.sb-health--ok > i, .sb-health--ok .sb-health__dot { color: var(--sb-primary-text); }
[data-theme="dark"] .sb-health--ok > i, [data-theme="dark"] .sb-health--ok .sb-health__dot { color: var(--sb-amber); }
.sb-health--warn > i, .sb-health--warn .sb-health__dot { color: var(--sb-amber); }
.sb-health--bad > i, .sb-health--bad .sb-health__dot { color: var(--sb-danger); }
.sb-health--bad .sb-health__site span { color: var(--sb-danger); }
.sb-health--wait > i, .sb-health--wait .sb-health__dot { color: var(--sb-faint); }

/* ── Fills that keep their own text colour, in both themes ──────────────────
   Amber always takes slate text (Bootstrap's badges default to white). Red fills stay the solid
   error red: the lightened red is for text on dark only. Bootstrap's half-white text is under
   4.5:1 on indigo, so it becomes the palette's off-white at 78%. */
.badge.bg-warning, .bg-warning.text-dark, .text-bg-warning,
[data-theme="dark"] .badge.bg-warning, [data-theme="dark"] .bg-warning.text-dark,
[data-theme="dark"] .badge.bg-warning.text-dark { color: var(--sb-on-accent) !important; }
:root .bg-danger, :root .text-bg-danger { background-color: rgba(var(--sb-red-rgb), var(--bs-bg-opacity, 1)) !important; }
:root .text-bg-danger { color: var(--sb-on-dark) !important; }
:root .text-white-50 { color: var(--sb-on-dark-2) !important; }

/* ── Logo ────────────────────────────────────────────────────────────────────
   The mark reads at a glance: 54px tall in the header (44px on phones), 48px in the footer.
   On dark, a soft amber glow lifts it off the slate; the logo's own colours are untouched. */
.navbar-brand img, .navbar-brand .sb-lg { height: 54px; width: auto; }
.hk-footer-brand img { height: 48px; width: auto; }
@media (max-width: 575.98px) { .navbar-brand img, .navbar-brand .sb-lg { height: 44px; } }
[data-theme="dark"] .navbar-brand .sb-logo-dark,
[data-theme="dark"] .navbar-brand .sb-lg,
.hk-footer-brand img { filter: drop-shadow(0 0 16px rgba(245, 158, 11, .30)); }
/* The header and footer logos are inline SVG (includes/logo.php): their colours are the --logo-*
   variables set there, light or dark by data-theme, so they switch with the toggle. */
/* Dark text classes on the indigo/slate Bootstrap fills: off-white, in both themes */
:root :is(.bg-primary, .bg-info, .bg-success, .bg-secondary, .bg-dark).text-dark { color: var(--sb-on-primary) !important; }
/* Amber text is 2:1 on off-white. In the client area and admin, text marked .text-warning (due
   soon, pending, expiring) uses the warning text colour: the deeper amber in the light theme,
   amber in the dark one. Icons keep their amber. */
.content-area .text-warning:not(.bi) { color: var(--sb-warning-text) !important; }