/* ============================================================================
   Closyss CMS Theme Layer: Closyss Ember Palette
   From the Closyss Palette Study:
   "The coral of 'CLOS' leads, sky blue answers it — the logo read left to right.
    Warm, confident, unmistakably Closyss."

   Loaded after Tailwind and shell inline styles to remap utility classes
   and component styles to the Closyss Ember palette across the entire app.
   Light = <html class="theme-light">
   Dark  = anything else: midnight violet ink surfaces, ember coral accents.
   ========================================================================== */

:root {
    /* ── Closyss Ember Palette Tokens ── */
    --cx-brand: #F9532F;              /* Closyss emblem coral */
    --cx-coral: #E8654A;              /* Primary coral */
    --cx-coral-dark: #FF6A48;         /* Primary coral for dark ground */
    --cx-coral-text: #C4351A;         /* Primary coral with WCAG AA on white */
    --cx-coral-soft: #FEF1EC;         /* Light coral tint */
    --cx-coral-soft-dark: #3A1E1C;    /* Dark ember glow */

    --cx-sky: #3BA3E3;                /* Logo sky blue */
    --cx-sky-accent: #1774B3;         /* Sky blue for links & buttons on light */
    --cx-sky-accent-dark: #5DB9F0;    /* Sky blue for dark mode */
    --cx-sky-soft: #E6F3FB;
    --cx-sky-soft-dark: #13283A;

    --cx-ink: #1B1830;                /* Deep violet-ink body text */
    --cx-muted: #625C72;              /* Muted heather violet */
    --cx-line: #EDE4DF;               /* Warm sand hairline border */
    --cx-ground: #FAF7F5;             /* Warm porcelain ground */
    --cx-surface: #FFFFFF;            /* Pure white surface card */
    --cx-surface-2: #F6F1ED;          /* Subtle tinted surface */
    --cx-raised: #FFFFFF;

    /* Dark Mode Palette */
    --cx-d-bg: #100F1A;               /* Midnight violet ground */
    --cx-d-surface: #171624;          /* Surface card */
    --cx-d-surface-2: #1F1E30;        /* Elevated header / dropdown */
    --cx-d-surface-3: #26243A;        /* Higher elevated surface */
    --cx-d-line: #2C2A40;             /* Boundary line */
    --cx-d-line-strong: #3D3A55;
    --cx-d-text: #F4EFF0;             /* Crisp readable white */
    --cx-d-muted: #A6A0B6;            /* Secondary violet-slate */
    --cx-d-hover: rgba(255, 106, 72, .08);
    --cx-d-hover-2: #242236;

    /* Gradients and interaction rings */
    --cx-btn-grad: linear-gradient(135deg, #FF6A48 0%, #E8654A 55%, #C4351A 100%);
    --cx-btn-grad-hover: linear-gradient(135deg, #FF7B5C 0%, #EF7158 55%, #B32E15 100%);
    --cx-ring: rgba(232, 101, 74, .32);
}

/* ── 1. Page Surfaces ────────────────────────────────────────────────────── */

html.theme-light body {
    background-color: var(--cx-ground) !important;
    color: var(--cx-ink) !important;
}

html.theme-light:root body[data-shell="portal"] main {
    background: var(--cx-ground) !important;
}

body[data-shell] main > [class*="bg-slate-100"],
body[data-shell] main > [class*="bg-gray-100"],
body[data-shell] main > div > [class*="bg-slate-100"]:first-child {
    background: transparent !important;
}

html.theme-light .bg-slate-100,
html.theme-light .bg-gray-100 {
    background-color: var(--cx-ground) !important;
}

html.theme-light body[data-shell="portal"] aside,
html.theme-light body[data-shell="portal"] header {
    background-color: var(--cx-surface) !important;
    border-color: var(--cx-line) !important;
}

html:not(.theme-light) body {
    background-color: var(--cx-d-bg) !important;
    color: var(--cx-d-text) !important;
}

/* ── 2. Primary Buttons: Clean Brand Coral ───────────────────────────────── */

button.bg-slate-900, a.bg-slate-900,
button.bg-black, a.bg-black,
.bg-indigo-700, .bg-indigo-600, .bg-indigo-500,
.lp-btn-primary, .hm-btn-primary, .ap-btn-primary, .sg-btn-primary,
#submitBtn, .tf-btn, .plan.is-selected .plan-cta, .btn-primary {
    background: var(--cx-coral-text) !important;
    background-color: var(--cx-coral-text) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 1px 3px rgba(196, 53, 26, .2), 0 2px 6px rgba(196, 53, 26, .12) !important;
    transition: all .15s ease !important;
}

button.bg-slate-900:hover, a.bg-slate-900:hover,
button.bg-black:hover, a.bg-black:hover,
.hover\:bg-black:hover,
.hover\:bg-indigo-700:hover, .hover\:bg-indigo-800:hover,
.bg-indigo-700:hover, .bg-indigo-600:hover,
.lp-btn-primary:hover, .hm-btn-primary:hover, .ap-btn-primary:hover, .sg-btn-primary:hover,
#submitBtn:hover:not(:disabled), .tf-btn:hover:not(:disabled) {
    background: #B32E15 !important;
    background-color: #B32E15 !important;
    box-shadow: 0 4px 14px rgba(196, 53, 26, .35) !important;
}

html:not(.theme-light) button.bg-slate-900,
html:not(.theme-light) a.bg-slate-900,
html:not(.theme-light) button.bg-black,
html:not(.theme-light) a.bg-black {
    background: var(--cx-coral-dark) !important;
    background-color: var(--cx-coral-dark) !important;
    color: #1A0B06 !important;
    box-shadow: 0 2px 8px rgba(255, 106, 72, .3) !important;
}

html:not(.theme-light) button.bg-slate-900:hover,
html:not(.theme-light) a.bg-slate-900:hover,
html:not(.theme-light) button.bg-black:hover,
html:not(.theme-light) a.bg-black:hover {
    background: #FF7D5E !important;
    background-color: #FF7D5E !important;
    box-shadow: 0 4px 16px rgba(255, 106, 72, .45) !important;
}

/* Bulletproof text and icon contrast on all solid, primary, danger, success & sky buttons */
:is(button, a, [role="button"], input[type="submit"], input[type="button"]):is(
  .bg-slate-900, .bg-slate-950, .bg-black,
  .bg-indigo-600, .bg-indigo-700, .bg-indigo-800,
  .bg-blue-600, .bg-blue-700, .bg-sky-600,
  .bg-rose-600, .bg-rose-700, .bg-red-600,
  .bg-emerald-600, .bg-emerald-700,
  .btn-primary, .btn-gradient, .lp-btn-primary, .hm-btn-primary, .ap-btn-primary, .sg-btn-primary,
  #submitBtn, .tf-btn,
  [class*="bg-[#F9532F]"], [class*="bg-[#C4351A]"], [class*="bg-[#E04320]"]
):not(#manual-export-btn):not(#manual-export-zip-btn):not(.pb-btn-neutral),
html:not(.theme-light) :is(.text-white, [class*="text-white"]),
button.btn-primary .text-white,
a.btn .text-white,
button .text-white,
[class*="bg-rose"] .text-white,
[class*="bg-emerald"] .text-white,
[class*="bg-blue-6"] .text-white,
[class*="bg-indigo-6"] .text-white,
[class*="bg-red-"] .text-white {
  color: #FFFFFF !important;
}

:is(button, a, [role="button"]):is(
  .btn-primary, .btn-gradient, .lp-btn-primary, .hm-btn-primary, .ap-btn-primary, .sg-btn-primary,
  #submitBtn, .tf-btn,
  [class*="bg-[#F9532F]"], [class*="bg-[#C4351A]"], [class*="bg-[#E04320]"],
  .bg-indigo-600, .bg-indigo-700,
  .bg-blue-600, .bg-blue-700,
  .bg-emerald-600, .bg-emerald-700,
  .bg-rose-600, .bg-rose-700, .bg-red-600
):not(#manual-export-btn):not(#manual-export-zip-btn):not(.pb-btn-neutral) :is(span, svg, path, div, p, b, strong, i) {
  color: #FFFFFF !important;
}

:is(button, a, [role="button"]):is(
  .bg-slate-900, .bg-slate-950, .bg-black,
  .bg-indigo-600, .bg-indigo-700, .bg-indigo-800,
  .bg-blue-600, .bg-blue-700, .bg-sky-600,
  .bg-rose-600, .bg-rose-700, .bg-red-600,
  .bg-emerald-600, .bg-emerald-700,
  .btn-primary, .btn-gradient, .lp-btn-primary, .hm-btn-primary, .ap-btn-primary, .sg-btn-primary,
  #submitBtn, .tf-btn,
  [class*="bg-[#F9532F]"], [class*="bg-[#C4351A]"], [class*="bg-[#E04320]"]
):not([class*="bg-emerald-50"]):not([class*="bg-rose-50"]):not([class*="bg-blue-50"]):not([class*="bg-slate-50"]):not([class*="bg-slate-100"]):not(.text-emerald-600):not(.text-blue-600):not(.text-rose-600):not(.text-slate-600) svg {
  stroke: currentColor !important;
  color: #FFFFFF !important;
}

:is(button, a, [role="button"]):is(
  .bg-slate-900, .bg-slate-950, .bg-black,
  .bg-indigo-600, .bg-indigo-700, .bg-indigo-800,
  .bg-blue-600, .bg-blue-700, .bg-sky-600,
  .bg-rose-600, .bg-rose-700, .bg-red-600,
  .bg-emerald-600, .bg-emerald-700,
  .btn-primary, .btn-gradient, .lp-btn-primary, .hm-btn-primary, .ap-btn-primary, .sg-btn-primary,
  #submitBtn, .tf-btn,
  [class*="bg-[#F9532F]"], [class*="bg-[#C4351A]"], [class*="bg-[#E04320]"]
):not([class*="bg-emerald-50"]):not([class*="bg-rose-50"]):not([class*="bg-blue-50"]):not([class*="bg-slate-50"]):not([class*="bg-slate-100"]):not(.text-emerald-600):not(.text-blue-600):not(.text-rose-600):not(.text-slate-600) svg path {
  stroke: currentColor !important;
}

/* Secondary blue buttons use brand sky */
.bg-blue-600, .bg-blue-700, .bg-sky-600 {
    background-color: var(--cx-sky-accent) !important;
    color: #FFFFFF !important;
}
.hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover, .bg-blue-600:hover {
    background-color: #145F93 !important;
}

/* ── 3. Data Tables: Modern, scan-friendly rows without rigid vertical borders ── */

table:not([data-grid]) {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

/* Eliminate all vertical grid rules between columns */
table:not([data-grid]) :is(th, td) {
    border-left: none !important;
    border-right: none !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
}

/* Table Header Row */
table:not([data-grid]) > thead > tr > th,
html.theme-light table:not([data-grid]) > thead > tr > th,
html.theme-light thead.bg-slate-900,
html.theme-light tr.bg-slate-900,
html.theme-light th.bg-slate-900,
html.theme-light thead[class*="bg-slate-900"],
html.theme-light tr[class*="bg-slate-900"],
html.theme-light th[class*="bg-slate-900"],
html.theme-light thead[class*="bg-slate-800"],
html.theme-light tr[class*="bg-slate-800"],
html.theme-light th[class*="bg-slate-800"] {
    background-color: var(--cx-surface-2) !important;
    color: var(--cx-muted) !important;
    border-bottom: 1px solid var(--cx-line) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

html:not(.theme-light) table:not([data-grid]) > thead > tr > th,
html:not(.theme-light) thead.bg-slate-900,
html:not(.theme-light) tr.bg-slate-900,
html:not(.theme-light) th.bg-slate-900,
html:not(.theme-light) thead[class*="bg-slate-900"],
html:not(.theme-light) tr[class*="bg-slate-900"],
html:not(.theme-light) th[class*="bg-slate-900"],
html:not(.theme-light) thead[class*="bg-slate-800"],
html:not(.theme-light) tr[class*="bg-slate-800"],
html:not(.theme-light) th[class*="bg-slate-800"] {
    background-color: var(--cx-d-surface-2) !important;
    color: var(--cx-d-muted) !important;
    border-bottom: 1px solid var(--cx-d-line) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* Table Cells */
table:not([data-grid]) > tbody > tr > td {
    border-bottom: 1px solid var(--cx-line) !important;
    border-top-width: 0 !important;
    padding: 0.75rem 1rem !important;
    font-size: 13px !important;
    transition: background-color 0.14s ease, box-shadow 0.14s ease !important;
}

html.theme-light table:not([data-grid]) > tbody > tr > td {
    border-bottom-color: var(--cx-line) !important;
    color: var(--cx-ink) !important;
}

html:not(.theme-light) table:not([data-grid]) > tbody > tr > td {
    border-bottom-color: var(--cx-d-line) !important;
    color: var(--cx-d-text) !important;
}

table:not([data-grid]) > tbody > tr:last-child > td {
    border-bottom-width: 0 !important;
}

/* Subtle Row Hover */
html.theme-light table:not([data-grid]) > tbody > tr:hover > td {
    background-color: rgba(232, 101, 74, .04) !important;
}

html:not(.theme-light) table:not([data-grid]) > tbody > tr:hover > td {
    background-color: rgba(255, 106, 72, .065) !important;
}

/* Selected Row Accent */
table:not([data-grid]) > tbody > tr.selected > td,
table:not([data-grid]) > tbody > tr[class*="bg-blue-50"] > td {
    background-color: var(--cx-coral-soft) !important;
}

html:not(.theme-light) table:not([data-grid]) > tbody > tr.selected > td,
html:not(.theme-light) table:not([data-grid]) > tbody > tr[class*="bg-blue-50"] > td {
    background-color: var(--cx-coral-soft-dark) !important;
}

table:not([data-grid]) > tbody > tr.selected > td:first-child,
table:not([data-grid]) > tbody > tr[class*="bg-blue-50"] > td:first-child {
    box-shadow: inset 3px 0 0 var(--cx-brand) !important;
}

/* Table sorting arrow subtlety */
th span.text-slate-500 {
    opacity: 0.45;
    font-size: 11px;
}
th:hover span.text-slate-500 {
    opacity: 0.9;
    color: var(--cx-coral-text);
}

/* ── 4. Table Containers & Cards ─────────────────────────────────────────── */

.glass-card,
div:has(> table:not([data-grid])) {
    background-color: var(--cx-surface) !important;
    border: 1px solid var(--cx-line) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(27, 24, 48, .03), 0 8px 24px -10px rgba(27, 24, 48, .08) !important;
}

html:not(.theme-light) .glass-card,
html:not(.theme-light) div:has(> table:not([data-grid])) {
    background-color: var(--cx-d-surface) !important;
    border-color: var(--cx-d-line) !important;
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, .5) !important;
}

/* ── 5. UI Near Tables: Toolbar, Filters, Metadata & Pagination ───────────── */

/* Record counter (e.g. "Showing 1 - 50 out of 250 records") */
div.text-xs.font-medium.text-slate-500 {
    color: var(--cx-muted) !important;
    font-weight: 500 !important;
}

html:not(.theme-light) div.text-xs.font-medium.text-slate-500 {
    color: var(--cx-d-muted) !important;
}

/* "Per Page" pill selector */
div:has(> select[name="per_page"]) {
    background-color: var(--cx-surface) !important;
    border: 1px solid var(--cx-line) !important;
    border-radius: 0.65rem !important;
    padding: 0.25rem 0.65rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html:not(.theme-light) div:has(> select[name="per_page"]) {
    background-color: var(--cx-d-surface) !important;
    border-color: var(--cx-d-line) !important;
}

select[name="per_page"] {
    color: var(--cx-ink) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

html:not(.theme-light) select[name="per_page"] {
    color: var(--cx-d-text) !important;
}

/* Secondary outline action buttons (Import, Template, Export, Refresh) */
button[class*="rounded-xl"][class*="shadow-sm"]:not([class*="text-white"]):not([class*="bg-slate-900"]):not([class*="bg-black"]):not([class*="bg-indigo-"]):not([class*="bg-blue-"]):not([class*="bg-rose-"]):not([class*="bg-emerald-"]):not([class*="bg-[#"]):not(.btn-primary):not([class*="btn-gradient"]),
a[class*="rounded-xl"][class*="shadow-sm"]:not([class*="text-white"]):not([class*="bg-slate-900"]):not([class*="bg-black"]):not([class*="bg-indigo-"]):not([class*="bg-blue-"]):not([class*="bg-rose-"]):not([class*="bg-emerald-"]):not([class*="bg-[#"]):not(.btn-primary):not([class*="btn-gradient"]) {
    border: 1px solid var(--cx-line) !important;
    background-color: var(--cx-surface) !important;
    color: var(--cx-ink) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    border-radius: 0.75rem !important;
    transition: all 0.15s ease !important;
}

button[class*="rounded-xl"][class*="shadow-sm"]:not([class*="text-white"]):not([class*="bg-slate-900"]):not([class*="bg-black"]):not([class*="bg-indigo-"]):not([class*="bg-blue-"]):not([class*="bg-rose-"]):not([class*="bg-emerald-"]):not([class*="bg-[#"]):not(.btn-primary):not([class*="btn-gradient"]):hover,
a[class*="rounded-xl"][class*="shadow-sm"]:not([class*="text-white"]):not([class*="bg-slate-900"]):not([class*="bg-black"]):not([class*="bg-indigo-"]):not([class*="bg-blue-"]):not([class*="bg-rose-"]):not([class*="bg-emerald-"]):not([class*="bg-[#"]):not(.btn-primary):not([class*="btn-gradient"]):hover {
    border-color: var(--cx-brand) !important;
    color: var(--cx-coral-text) !important;
    box-shadow: 0 2px 10px rgba(249, 83, 47, 0.12) !important;
}

html:not(.theme-light) button[class*="rounded-xl"][class*="shadow-sm"]:not([class*="text-white"]):not([class*="bg-slate-900"]):not([class*="bg-black"]):not([class*="bg-indigo-"]):not([class*="bg-blue-"]):not([class*="bg-rose-"]):not([class*="bg-emerald-"]):not([class*="bg-[#"]):not(.btn-primary):not([class*="btn-gradient"]),
html:not(.theme-light) a[class*="rounded-xl"][class*="shadow-sm"]:not([class*="text-white"]):not([class*="bg-slate-900"]):not([class*="bg-black"]):not([class*="bg-indigo-"]):not([class*="bg-blue-"]):not([class*="bg-rose-"]):not([class*="bg-emerald-"]):not([class*="bg-[#"]):not(.btn-primary):not([class*="btn-gradient"]) {
    background-color: var(--cx-d-surface) !important;
    border-color: var(--cx-d-line) !important;
    color: var(--cx-d-text) !important;
}

html:not(.theme-light) button[class*="rounded-xl"][class*="shadow-sm"]:not([class*="text-white"]):not([class*="bg-slate-900"]):not([class*="bg-black"]):not([class*="bg-indigo-"]):not([class*="bg-blue-"]):not([class*="bg-rose-"]):not([class*="bg-emerald-"]):not([class*="bg-[#"]):not(.btn-primary):not([class*="btn-gradient"]):hover,
html:not(.theme-light) a[class*="rounded-xl"][class*="shadow-sm"]:not([class*="text-white"]):not([class*="bg-slate-900"]):not([class*="bg-black"]):not([class*="bg-indigo-"]):not([class*="bg-blue-"]):not([class*="bg-rose-"]):not([class*="bg-emerald-"]):not([class*="bg-[#"]):not(.btn-primary):not([class*="btn-gradient"]):hover {
    border-color: var(--cx-brand) !important;
    color: var(--cx-coral-dark) !important;
}

/* Search and filter inputs */
input[type="text"][class*="rounded-"],
input[type="search"][class*="rounded-"],
.site-input,
.site-input-style {
    border: 1px solid var(--cx-line) !important;
    background-color: var(--cx-surface) !important;
    color: var(--cx-ink) !important;
    border-radius: 0.75rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input[type="text"][class*="rounded-"]:focus,
input[type="search"][class*="rounded-"]:focus,
.site-input:focus,
.site-input-style:focus {
    border-color: var(--cx-sky-accent) !important;
    box-shadow: 0 0 0 3px var(--cx-sky-soft) !important;
    outline: none !important;
}

html:not(.theme-light) input[type="text"][class*="rounded-"],
html:not(.theme-light) input[type="search"][class*="rounded-"],
html:not(.theme-light) .site-input,
html:not(.theme-light) .site-input-style {
    background-color: var(--cx-d-surface) !important;
    border-color: var(--cx-d-line) !important;
    color: var(--cx-d-text) !important;
}

html:not(.theme-light) input[type="text"][class*="rounded-"]:focus,
html:not(.theme-light) input[type="search"][class*="rounded-"]:focus,
html:not(.theme-light) .site-input:focus,
html:not(.theme-light) .site-input-style:focus {
    border-color: var(--cx-sky-accent-dark) !important;
    box-shadow: 0 0 0 3px var(--cx-sky-soft-dark) !important;
}

/* Pagination bar below tables */
nav:has(a[href*="page="]),
nav:has(button[hx-get*="page="]) {
    background-color: var(--cx-surface) !important;
    border: 1px solid var(--cx-line) !important;
    border-radius: 0.75rem !important;
    padding: 0.25rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html:not(.theme-light) nav:has(a[href*="page="]),
html:not(.theme-light) nav:has(button[hx-get*="page="]) {
    background-color: var(--cx-d-surface) !important;
    border-color: var(--cx-d-line) !important;
}

nav a[href*="page="],
nav button[hx-get*="page="] {
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--cx-muted) !important;
    transition: all 0.14s ease !important;
}

nav a[href*="page="]:hover,
nav button[hx-get*="page="]:hover {
    background-color: var(--cx-coral-soft) !important;
    color: var(--cx-coral-text) !important;
}

/* Active page button */
nav [class*="bg-slate-900"][class*="text-white"],
nav [class*="bg-black"][class*="text-white"],
nav [class*="bg-blue-600"][class*="text-white"],
nav [class*="bg-indigo-600"][class*="text-white"] {
    background: var(--cx-coral-text) !important;
    background-color: var(--cx-coral-text) !important;
    color: #FFFFFF !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 6px rgba(196, 53, 26, 0.28) !important;
}

html:not(.theme-light) nav [class*="bg-slate-900"][class*="text-white"],
html:not(.theme-light) nav [class*="bg-black"][class*="text-white"] {
    background: var(--cx-coral-dark) !important;
    background-color: var(--cx-coral-dark) !important;
    color: #1A0B06 !important;
}

/* ── 6. Accent Text, Links, Soft Badges & Focus ──────────────────────────── */

.text-blue-600, .text-blue-700, .text-indigo-600, .text-indigo-700,
.hover\:text-blue-600:hover, .hover\:text-indigo-600:hover {
    color: var(--cx-coral-text) !important;
}

.text-blue-400, .text-blue-500, .text-indigo-400, .text-indigo-500,
.text-sky-400, .text-sky-500 {
    color: var(--cx-sky-accent) !important;
}

html:not(.theme-light) .text-blue-600,
html:not(.theme-light) .text-indigo-600,
html:not(.theme-light) .text-blue-400,
html:not(.theme-light) .text-indigo-400 {
    color: var(--cx-coral-dark) !important;
}

.bg-blue-50, .bg-indigo-50 {
    background-color: var(--cx-coral-soft) !important;
}

html:not(.theme-light) .bg-blue-50,
html:not(.theme-light) .bg-indigo-50 {
    background-color: var(--cx-coral-soft-dark) !important;
}

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--cx-brand);
}

::selection {
    background: rgba(249, 83, 47, .25);
}

:focus-visible {
    outline-color: var(--cx-brand);
}

/* ── 7. Tile View (Landing Page /landing) ─────────────────────────────────── */

body #home {
    --hm-accent: var(--cx-coral-text);
    --hm-line: var(--cx-line);
    --hm-soft: var(--cx-coral-soft);
    --hm-soft-2: #F5EAE4;
    background: var(--cx-ground) !important;
    color: var(--cx-ink) !important;
}

body #home .hm-bar {
    background: rgba(255, 255, 255, .97) !important;
    border-bottom: 1px solid var(--cx-line) !important;
}

body #home .hm-ib,
body #home .hm-search {
    background: var(--cx-surface) !important;
    border-color: var(--cx-line) !important;
    color: var(--cx-ink) !important;
}

body #home .hm-ib.active {
    color: var(--cx-coral-text) !important;
    background: var(--cx-coral-soft) !important;
    border-color: rgba(232, 101, 74, .35) !important;
}

body #home .hm-ib:hover {
    color: var(--cx-brand) !important;
    border-color: var(--cx-brand) !important;
}

body #home .hm-tile .box {
    background: #FFFFFF !important;
    border: 1px solid var(--cx-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(27, 24, 48, .04), 0 1px 2px rgba(27, 24, 48, .02) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

body #home .hm-tile > a:hover .box {
    transform: translateY(-3px) !important;
    border-color: var(--cx-brand) !important;
    box-shadow: 0 12px 24px -6px rgba(249, 83, 47, .22), 0 0 0 1px var(--cx-brand) !important;
}

body #home .hm-tile .txt {
    color: var(--cx-ink) !important;
    font-weight: 600 !important;
}

body #home .hm-tile > a:hover .txt {
    color: var(--cx-coral-text) !important;
}

/* Dark mode for Landing Page */
html:not(.theme-light) body #home {
    --hm-bg: var(--cx-d-bg);
    --hm-surface: var(--cx-d-surface);
    --hm-line: var(--cx-d-line);
    --hm-soft: var(--cx-d-surface-2);
    --hm-soft-2: #252336;
    --hm-text: var(--cx-d-text);
    --hm-muted: var(--cx-d-muted);
    --hm-accent: var(--cx-coral-dark);
    background: var(--cx-d-bg) !important;
    color: var(--cx-d-text) !important;
}

html:not(.theme-light) body #home .hm-bar {
    background: rgba(23, 22, 36, .97) !important;
    border-bottom-color: var(--cx-d-line) !important;
}

html:not(.theme-light) body #home .hm-ib,
html:not(.theme-light) body #home .hm-search {
    background: var(--cx-d-surface-2) !important;
    border-color: var(--cx-d-line) !important;
    color: var(--cx-d-text) !important;
}

html:not(.theme-light) body #home .hm-ib.active {
    background: var(--cx-coral-soft-dark) !important;
    color: var(--cx-coral-dark) !important;
    border-color: rgba(255, 106, 72, .35) !important;
}

html:not(.theme-light) body #home .hm-tile .box {
    background: var(--cx-d-surface) !important;
    border-color: var(--cx-d-line) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4) !important;
}

html:not(.theme-light) body #home .hm-tile > a:hover .box {
    border-color: var(--cx-brand) !important;
    box-shadow: 0 12px 28px -6px rgba(255, 106, 72, .3) !important;
}

html:not(.theme-light) body #home .hm-tile .txt {
    color: var(--cx-d-text) !important;
}

/* ── 8. Navigation (Quick Nav & Subnav) ───────────────────────────────────── */

[data-menu-tree], .qn-home {
    --nv-accent: var(--cx-sky-accent, #1774B3);
    --nv-active-bg: var(--cx-sky-soft, #E6F3FB);
    --nv-hover: rgba(23, 116, 179, .06);
    --nv-line: var(--cx-line);
    --nv-text: var(--cx-ink);
    --nv-muted: var(--cx-muted);
    --nv-chev: var(--cx-muted);
}

#app-subnav {
    --sn-accent: var(--cx-sky-accent, #1774B3);
    --sn-soft: var(--cx-sky-soft, #E6F3FB);
    --sn-hover: rgba(23, 116, 179, .06);
    --sn-line: var(--cx-line);
    --sn-bg: var(--cx-surface);
    --sn-text: var(--cx-ink);
    --sn-muted: var(--cx-muted);
}

html:not(.theme-light) [data-menu-tree],
html:not(.theme-light) .qn-home {
    --nv-text: var(--cx-d-text);
    --nv-muted: var(--cx-d-muted);
    --nv-hover: var(--cx-d-hover);
    --nv-active-bg: var(--cx-sky-soft-dark, #13283A);
    --nv-accent: var(--cx-sky-accent-dark, #5DB9F0);
    --nv-line: var(--cx-d-line);
    --nv-chev: var(--cx-d-muted);
}

html:not(.theme-light) #app-subnav {
    --sn-bg: var(--cx-d-surface);
    --sn-line: var(--cx-d-line);
    --sn-text: var(--cx-d-text);
    --sn-muted: var(--cx-d-muted);
    --sn-accent: var(--cx-sky-accent-dark, #5DB9F0);
    --sn-soft: var(--cx-sky-soft-dark, #13283A);
    --sn-hover: var(--cx-d-hover);
    --sn-pop: var(--cx-d-surface-2);
}

/* Ensure Quick Nav expand chevrons are always pure transparent icons with zero box-shadow or border */
.qn-tg, button.qn-tg {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}

/* Quick Search Palette */
#qn-input { border-color: var(--cx-brand) !important; }
#qn-head svg { color: var(--cx-coral-text) !important; }
#qn-list li.active { background: var(--cx-coral-soft) !important; color: var(--cx-coral-text) !important; }
#qn-list li.active .pr { color: var(--cx-coral-text) !important; }

/* ── 9. Top-Bar Controls (top_bar.js): Customer Filter & User Avatar ─────── */

.tb-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.tb-cust, .tb-acct {
    position: relative; display: inline-flex; align-items: center; flex: none;
    --tb-h: 36px; --tb-r: 999px; --tb-line: var(--cx-line); --tb-soft: var(--cx-surface);
    --tb-surface: #fff; --tb-text: var(--cx-ink); --tb-muted: var(--cx-muted);
    --tb-accent: var(--cx-coral-text); --tb-sel: var(--cx-coral-soft); --tb-hover: rgba(232, 101, 74, .06);
}

html:not(.theme-light) .tb-cust,
html:not(.theme-light) .tb-acct {
    --tb-line: var(--cx-d-line); --tb-soft: var(--cx-d-surface-2); --tb-surface: var(--cx-d-surface);
    --tb-text: var(--cx-d-text); --tb-muted: var(--cx-d-muted); --tb-accent: var(--cx-coral-dark);
    --tb-sel: var(--cx-coral-soft-dark); --tb-hover: var(--cx-d-surface-2);
}

#home .tb-cust, #home .tb-acct { --tb-h: 42px; --tb-r: 12px; }

.tb-cust-btn {
    display: inline-flex; align-items: center; gap: 7px; height: var(--tb-h); padding: 0 10px 0 12px;
    border-radius: var(--tb-r); border: 1px solid var(--tb-line); background: var(--tb-soft);
    color: var(--tb-text); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; max-width: 200px;
}
.tb-cust-btn svg { width: 15px; height: 15px; flex: none; color: var(--tb-muted); }
.tb-cust-btn svg.cv { width: 13px; height: 13px; }
.tb-cust-btn:hover, .tb-cust.on .tb-cust-btn { color: var(--tb-accent); }
.tb-cust.on .tb-cust-btn { background: var(--tb-sel); border-color: rgba(232, 101, 74, .35); }
.tb-cust-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tb-cust-menu, .tb-menu {
    position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none;
    background: var(--tb-surface); border: 1px solid var(--tb-line); border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18); z-index: 90; text-align: left;
}
.tb-cust-menu { min-width: 200px; max-width: 320px; max-height: min(60vh, 380px); overflow: auto; }
.tb-cust-menu[hidden], .tb-menu[hidden] { display: none; }
.tb-cust-menu li { padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--tb-text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-cust-menu li:hover { background: var(--tb-hover); color: var(--tb-accent); }
.tb-cust-menu li[aria-selected="true"] { background: var(--tb-sel); color: var(--tb-accent); }
.tb-cust-menu li.empty { color: var(--tb-muted); cursor: default; font-weight: 500; }

.tb-avatar {
    width: var(--tb-h); height: var(--tb-h); padding: 0; border-radius: 999px; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-family: inherit;
    font-size: 14px; font-weight: 800; text-transform: uppercase;
    border: 2px solid var(--tb-surface); box-shadow: 0 0 0 1px var(--tb-line); flex: none; cursor: pointer; line-height: 1;
    background: var(--cx-btn-grad) !important;
}
.tb-acct.on .tb-avatar { box-shadow: 0 0 0 3px var(--cx-ring); }

.tb-menu { min-width: 210px; }
.tb-menu-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--tb-line); line-height: 1.2; }
.tb-menu-who b { font-size: 13px; font-weight: 700; color: var(--tb-text); }
.tb-menu-who small { font-size: 11px; color: var(--tb-muted); }
.tb-menu a, .tb-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--tb-text); font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: 0; line-height: 1.2; }
.tb-menu a:hover, .tb-menu button:hover { background: var(--tb-hover); color: var(--tb-accent); }
.tb-menu a.danger:hover { background: #fdecec; color: #b42318; }
.tb-menu svg { width: 17px; height: 17px; flex: none; color: var(--tb-muted); }
.tb-menu a:hover svg, .tb-menu button:hover svg { color: inherit; }
.tb-menu hr { border: 0; border-top: 1px solid var(--tb-line); margin: 4px 0; }
.tb-menu .i-sun, .tb-menu .t-light { display: none; }
html:not(.theme-light) .tb-menu .i-sun, html:not(.theme-light) .tb-menu .t-light { display: inline-block; }
html:not(.theme-light) .tb-menu .i-moon, html:not(.theme-light) .tb-menu .t-dark { display: none; }
@media (max-width: 767px) { .tb-cust { display: none; } }

/* ── 10. Language Switcher (lang_switch.js) ───────────────────────────────── */

.lg-switch { position: relative; display: inline-flex; flex: none; --lg-bg: var(--cx-surface); --lg-line: var(--cx-line); --lg-fg: var(--cx-muted); --lg-accent: var(--cx-coral-text); --lg-menu: #fff; --lg-hover: rgba(232, 101, 74, .06); --lg-sel: var(--cx-coral-soft); }
html:not(.theme-light) .lg-switch { --lg-bg: var(--cx-d-surface-2); --lg-line: var(--cx-d-line); --lg-fg: var(--cx-d-muted); --lg-accent: var(--cx-coral-dark); --lg-menu: var(--cx-d-surface); --lg-hover: var(--cx-d-surface-2); --lg-sel: var(--cx-coral-soft-dark); }
.lg-btn { display: inline-flex; align-items: center; gap: 3px; height: 36px; padding: 0 7px 0 10px; border-radius: 999px; border: 1px solid var(--lg-line); background: var(--lg-bg); color: var(--lg-fg); cursor: pointer; transition: color .15s, border-color .15s; }
.lg-btn:hover { color: var(--lg-accent); }
.lg-code { display: inline-block; min-width: 24px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; flex: none; }
.lg-menu .lg-code { min-width: 30px; padding: 3px 5px; border-radius: 6px; background: var(--lg-hover); font-size: 10.5px; text-align: center; }
.lg-menu li[aria-selected="true"] .lg-code { background: rgba(0, 0, 0, .06); }
.lg-chev { width: 13px; height: 13px; }
.lg-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; margin: 0; padding: 6px; list-style: none; background: var(--lg-menu); border: 1px solid var(--lg-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); z-index: 90; max-height: min(60vh, 420px); overflow: auto; text-align: left; }
.lg-menu[hidden] { display: none; }
.lg-menu li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--lg-fg); cursor: pointer; white-space: nowrap; }
.lg-menu li:hover { background: var(--lg-hover); color: var(--lg-accent); }
.lg-menu li[aria-selected="true"] { background: var(--lg-sel); color: var(--lg-accent); }
#home .lg-btn { height: 42px; border-radius: 12px; }
.lg-gte, .goog-te-banner-frame, body > .skiptranslate, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ── 11. Fields with an Icon Padding Reservers ───────────────────────────── */
input.pl-8, select.pl-8, textarea.pl-8 { padding-left: calc(var(--spacing, .25rem) * 8) !important; }
input.pl-9, select.pl-9, textarea.pl-9 { padding-left: calc(var(--spacing, .25rem) * 9) !important; }
input.pl-10, select.pl-10, textarea.pl-10 { padding-left: calc(var(--spacing, .25rem) * 10) !important; }
input.pl-11, select.pl-11, textarea.pl-11 { padding-left: calc(var(--spacing, .25rem) * 11) !important; }
input.pl-12, select.pl-12, textarea.pl-12 { padding-left: calc(var(--spacing, .25rem) * 12) !important; }
input.pl-14, select.pl-14, textarea.pl-14 { padding-left: calc(var(--spacing, .25rem) * 14) !important; }
input.pr-7, select.pr-7, textarea.pr-7 { padding-right: calc(var(--spacing, .25rem) * 7) !important; }
input.pr-8, select.pr-8, textarea.pr-8 { padding-right: calc(var(--spacing, .25rem) * 8) !important; }
input.pr-9, select.pr-9, textarea.pr-9 { padding-right: calc(var(--spacing, .25rem) * 9) !important; }
input.pr-10, select.pr-10, textarea.pr-10 { padding-right: calc(var(--spacing, .25rem) * 10) !important; }
input.pr-11, select.pr-11, textarea.pr-11 { padding-right: calc(var(--spacing, .25rem) * 11) !important; }
input.pr-12, select.pr-12, textarea.pr-12 { padding-right: calc(var(--spacing, .25rem) * 12) !important; }

/* ── 12. Footer: Logo + Copyright (identical across shells) ───────────────── */

.g1-foot, .portal-powered-by, .sidebar-footer-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

/* Guard against footer displaying when sidebar is collapsed or when hidden by Alpine / CSS */
[x-cloak],
[style*="display: none"],
[style*="display:none"],
aside.w-16 .portal-powered-by,
aside.w-16 .g1-foot,
aside:not(.w-64) .portal-powered-by,
aside:not(.w-64) .g1-foot,
#side-nav.sidebar-collapsed .sidebar-footer-wrap,
#side-nav.sidebar-collapsed .sidebar-footer-text,
#side-nav.sidebar-collapsed .g1-foot {
    display: none !important;
}

.g1-foot img, .portal-powered-by img, .sidebar-footer-text img {
    height: 22px !important;
    width: auto !important;
    max-width: 130px !important;
    object-fit: contain !important;
    opacity: 0.95 !important;
    display: block !important;
    margin: 0 auto 2px !important;
}

.g1-foot span, .portal-powered-by span, .sidebar-footer-text span {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    text-align: center !important;
    color: var(--cx-muted, #64748b) !important;
    display: block !important;
    max-width: 210px !important;
    margin: 0 auto !important;
}

html.theme-light .g1-foot span,
html.theme-light .portal-powered-by span,
html.theme-light .sidebar-footer-text span {
    color: #64748b !important;
}

html:not(.theme-light) .g1-foot span,
html:not(.theme-light) .portal-powered-by span,
html:not(.theme-light) .sidebar-footer-text span {
    color: var(--cx-d-muted, #94a3b8) !important;
}

html:not(.theme-light) .g1-foot img,
html:not(.theme-light) .portal-powered-by img,
html:not(.theme-light) .sidebar-footer-text img {
    opacity: 0.8 !important;
}

.card-footer.g1-foot {
    flex-direction: row !important;
    gap: 10px !important;
}

.card-footer.g1-foot span {
    max-width: none !important;
}

/* ── 13. Closyss Ember Normalization for Forms, Stat Cards & Tables ─────────── */

/* 13.1 Headings and subtitles in light mode */
html.theme-light :is(h1, h2, h3, h4, h5, h6):is(.text-white, [class*="text-white"]),
html.theme-light .pb-shell h3,
html.theme-light .cl-shell h3,
html.theme-light :is(.panel, .glass-panel, main) h1.text-white,
html.theme-light :is(.panel, .glass-panel, main) h3.text-white,
html.theme-light :is(.panel, .glass-panel, main) h4.text-white {
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light :is(p, span, div).text-slate-400:not(button *):not(a.btn *):not(.badge *) {
    color: var(--cx-muted, #64748B) !important;
}

/* 13.2 Form Inputs, Selects and Textareas in light mode */
html.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):is([class*="bg-slate-"], [class*="bg-black"], .bg-slate-900, .bg-slate-950, .bg-slate-800),
html.theme-light select:is([class*="bg-slate-"], [class*="bg-black"], .bg-slate-900, .bg-slate-950, .bg-slate-800),
html.theme-light textarea:is([class*="bg-slate-"], [class*="bg-black"], .bg-slate-900, .bg-slate-950, .bg-slate-800),
html.theme-light #cl-search,
html.theme-light #cl-page-size,
html.theme-light #manual-search,
html.theme-light #manual-customer,
html.theme-light #manual-bank,
html.theme-light #manual-run-folder,
html.theme-light #manual-status-filter,
html.theme-light #manual-per-page,
html.theme-light #subscriptionToEmail,
html.theme-light #subscriptionTimeframe,
html.theme-light #subsPerPageSelect,
html.theme-light input[name="q"],
html.theme-light select[name="page_size"] {
    background-color: #FFFFFF !important;
    color: var(--cx-ink, #1B1830) !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    border-radius: 0.65rem !important;
    box-shadow: 0 1px 2px rgba(27, 24, 48, 0.03) !important;
}

html.theme-light input:not([type="checkbox"]):not([type="radio"]):focus,
html.theme-light select:focus,
html.theme-light textarea:focus {
    border-color: var(--cx-coral, #E8654A) !important;
    box-shadow: 0 0 0 3px var(--cx-coral-soft, rgba(232, 101, 74, 0.12)) !important;
    outline: none !important;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
    color: #94A3B8 !important;
}

/* 13.3 Stat Cards (Call Log & Email Downloads) */
html.theme-light .cl-shell .cl-stat-card,
html.theme-light #call-log-shell .cl-stat-card,
html.theme-light #call-log-shell [id^="cl-stat-card-"],
html.theme-light .pb-shell .grid > div[class*="rounded-"][class*="border"] {
    background: #FFFFFF !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(27, 24, 48, 0.04), 0 4px 12px -2px rgba(27, 24, 48, 0.05) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

html.theme-light .cl-shell .cl-stat-card:hover,
html.theme-light #call-log-shell .cl-stat-card:hover,
html.theme-light #call-log-shell [id^="cl-stat-card-"]:hover,
html.theme-light .pb-shell .grid > div[class*="rounded-"][class*="border"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px -2px rgba(232, 101, 74, 0.12) !important;
    border-color: var(--cx-coral, #E8654A) !important;
}

/* Stat card numbers */
html.theme-light .cl-shell .cl-stat-card .mono,
html.theme-light #call-log-shell .cl-stat-card .mono,
html.theme-light .pb-shell .grid > div[class*="rounded-"] .mono,
html.theme-light .pb-shell .grid > div[class*="rounded-"] .text-xl {
    font-weight: 800 !important;
}

/* Stat card labels */
html.theme-light .cl-shell .cl-stat-card > div:first-child,
html.theme-light #call-log-shell .cl-stat-card > div:first-child,
html.theme-light .pb-shell .grid > div[class*="rounded-"] > div:first-child {
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* Stat card vibrant accents on light ground */
html.theme-light .text-sky-400, html.theme-light .text-sky-300 { color: #0284c7 !important; }
html.theme-light .text-indigo-400, html.theme-light .text-indigo-300 { color: #4f46e5 !important; }
html.theme-light .text-emerald-400, html.theme-light .text-emerald-300 { color: #059669 !important; }
html.theme-light .text-rose-400, html.theme-light .text-rose-300 { color: #e11d48 !important; }
html.theme-light .text-pink-300, html.theme-light .text-pink-200 { color: #db2777 !important; }
html.theme-light .text-amber-400, html.theme-light .text-amber-300 { color: #d97706 !important; }
html.theme-light .text-violet-400, html.theme-light .text-violet-300 { color: #7c3aed !important; }
html.theme-light .text-orange-300, html.theme-light .text-orange-200 { color: #ea580c !important; }
html.theme-light .text-cyan-400, html.theme-light .text-cyan-300 { color: #0891b2 !important; }
html.theme-light .text-blue-400, html.theme-light .text-blue-300 { color: #2563eb !important; }

/* 13.4 Panels and Table Wrappers */
html.theme-light .cl-shell .panel,
html.theme-light .cl-shell .tbl-wrap,
html.theme-light .pb-shell .panel,
html.theme-light .pb-shell .tbl-wrap,
html.theme-light .pb-shell .hero,
html.theme-light .glass-panel,
html.theme-light div:has(> table:not([data-grid])) {
    background-color: var(--cx-surface, #FFFFFF) !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 1px 3px rgba(27, 24, 48, 0.03), 0 6px 18px -4px rgba(27, 24, 48, 0.05) !important;
}

/* Eliminate dark gray bottom summary / pagination bars */
html.theme-light .pb-shell .tbl-wrap + div,
html.theme-light #recordsPagination,
html.theme-light .pb-shell div[class*="bg-slate-700"],
html.theme-light .pb-shell div[class*="bg-slate-800"],
html.theme-light .pb-shell div[class*="bg-slate-950"] {
    background: var(--cx-surface, #FFFFFF) !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light #recordsPagination :is(span, div) {
    color: var(--cx-ink, #1B1830) !important;
}

/* 13.5 Table Headers, Cells & Links (High contrast for all tables including API Footage Requests) */
html.theme-light table thead,
html.theme-light table thead th,
html.theme-light table thead tr,
html.theme-light .cl-shell #cl-main-table thead th,
html.theme-light .pb-shell .tbl-wrap thead th,
html.theme-light table thead[class*="bg-slate-"],
html.theme-light thead tr[class*="bg-slate-"] {
    background-color: var(--cx-surface-2, #F6F1ED) !important;
    color: var(--cx-ink, #1B1830) !important;
    border-bottom: 1px solid var(--cx-line, #EDE4DF) !important;
}

html.theme-light table thead th,
html.theme-light table thead th a,
html.theme-light table thead th span,
html.theme-light table thead th div,
html.theme-light table thead th :is(a, button, span, div) {
    color: var(--cx-ink, #1B1830) !important;
    font-weight: 700 !important;
}

html.theme-light table thead th a:hover,
html.theme-light table thead th :is(a:hover, button:hover) {
    color: var(--cx-coral-text, #C4351A) !important;
}

html.theme-light table thead th .sort-indicator,
html.theme-light table thead th span[class*="text-slate-500"] {
    color: var(--cx-muted, #64748B) !important;
}

/* High-contrast table body rows across all tables */
html.theme-light table tbody tr td {
    color: var(--cx-ink, #1B1830) !important;
    border-bottom: 1px solid var(--cx-line, #EDE4DF) !important;
}

html.theme-light table tbody tr td:not([class*="text-emerald"]):not([class*="text-rose"]):not([class*="text-amber"]):not([class*="text-blue"]):not([class*="text-violet"]):not([class*="text-red"]) :is(span:not([class*="badge"]):not([class*="rounded"]), a:not(.text-blue-400), div, p) {
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light table tbody tr:hover {
    background-color: var(--cx-coral-soft, rgba(232, 101, 74, 0.08)) !important;
}

html.theme-light table tbody td.text-slate-500,
html.theme-light table tbody td[class*="text-center"] {
    color: var(--cx-muted, #64748B) !important;
    font-weight: 500 !important;
}

/* API Footage Requests column toggle button & pagination */
html.theme-light table thead th button:has(i.bi-toggles),
html.theme-light button:has(i.bi-toggles) {
    background-color: var(--cx-surface, #FFFFFF) !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light table thead th button:has(i.bi-toggles) i,
html.theme-light button:has(i.bi-toggles) i {
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light .glass-panel .border-t {
    border-color: var(--cx-line, #EDE4DF) !important;
}

html.theme-light .glass-panel .border-t :is(div, span) {
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light .glass-panel .border-t a {
    background-color: var(--cx-surface, #FFFFFF) !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light .glass-panel .border-t a:hover {
    border-color: var(--cx-coral, #E8654A) !important;
    color: var(--cx-coral-text, #C4351A) !important;
}

/* 13.6 Auto Reports Metrics Chips & Form Controls */
html.theme-light #metricsContainer label,
html.theme-light label[for^="metricOption_"] {
    background-color: #FFFFFF !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    border-radius: 0.65rem !important;
    color: var(--cx-ink, #1B1830) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(27, 24, 48, 0.03) !important;
    transition: all 0.15s ease !important;
}

html.theme-light #metricsContainer label :is(span, div, p, b, strong),
html.theme-light label[for^="metricOption_"] :is(span, div, p, b, strong) {
    color: var(--cx-ink, #1B1830) !important;
    font-weight: 600 !important;
}

html.theme-light #metricsContainer label:hover,
html.theme-light label[for^="metricOption_"]:hover {
    border-color: var(--cx-coral, #E8654A) !important;
    background-color: var(--cx-coral-soft, rgba(232, 101, 74, 0.08)) !important;
}

html.theme-light #metricsContainer label:hover :is(span, div, p, b, strong),
html.theme-light label[for^="metricOption_"]:hover :is(span, div, p, b, strong) {
    color: var(--cx-coral-text, #C4351A) !important;
}

html.theme-light #metricsContainer label:has(input:checked),
html.theme-light label[for^="metricOption_"]:has(input:checked) {
    background-color: var(--cx-coral-soft, rgba(232, 101, 74, 0.08)) !important;
    border-color: var(--cx-coral, #E8654A) !important;
}

html.theme-light #metricsContainer label:has(input:checked) :is(span, div, p, b, strong),
html.theme-light label[for^="metricOption_"]:has(input:checked) :is(span, div, p, b, strong) {
    color: var(--cx-coral-text, #C4351A) !important;
    font-weight: 700 !important;
}

html.theme-light .metric-checkbox {
    accent-color: var(--cx-coral-text, #C4351A) !important;
}

html.theme-light .metric-checkbox:checked {
    background-color: var(--cx-coral-text, #C4351A) !important;
    border-color: var(--cx-coral-text, #C4351A) !important;
}

/* Primary actions: Closyss Ember Coral gradient */
html.theme-light #subscriptionForm button[type="submit"],
html.theme-light #subscribeButton,
html.theme-light form button[type="submit"].bg-blue-600 {
    background: var(--cx-btn-grad, linear-gradient(135deg, #F9532F 0%, #E8654A 100%)) !important;
    color: #FFFFFF !important;
    border-radius: 0.65rem !important;
    border-color: transparent !important;
    box-shadow: 0 2px 6px rgba(196, 53, 26, 0.25) !important;
}

html.theme-light #subscriptionForm button[type="submit"]:hover,
html.theme-light #subscribeButton:hover,
html.theme-light form button[type="submit"].bg-blue-600:hover {
    background: var(--cx-btn-grad-hover, linear-gradient(135deg, #E8654A 0%, #C4351A 100%)) !important;
}

/* Secondary toolbar & filter buttons */
html.theme-light #addCcButton,
html.theme-light button[onclick*="FilterWizard"],
html.theme-light button:has(i.bi-funnel),
html.theme-light .pb-shell .pb-btn-neutral {
    background: var(--cx-surface, #FFFFFF) !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    color: var(--cx-ink, #1B1830) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px rgba(27, 24, 48, 0.04) !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}

html.theme-light #addCcButton:hover,
html.theme-light button[onclick*="FilterWizard"]:hover,
html.theme-light button:has(i.bi-funnel):hover,
html.theme-light .pb-shell .pb-btn-neutral:hover {
    border-color: var(--cx-coral, #E8654A) !important;
    color: var(--cx-coral-text, #C4351A) !important;
}

/* 13.7 Manual Housekeeping Controls (Start, Excel, Zip, DB) */
html.theme-light #manual-export-btn,
html.theme-light #manual-export-zip-btn {
    background-color: var(--cx-surface, #FFFFFF) !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    color: var(--cx-ink, #1B1830) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px rgba(27, 24, 48, 0.04) !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}

html.theme-light #manual-export-btn :is(span, svg, path),
html.theme-light #manual-export-zip-btn :is(span, svg, path) {
    color: var(--cx-ink, #1B1830) !important;
    stroke: var(--cx-ink, #1B1830) !important;
    fill: none !important;
}

html.theme-light #manual-export-btn:hover,
html.theme-light #manual-export-zip-btn:hover {
    border-color: var(--cx-coral, #E8654A) !important;
    color: var(--cx-coral-text, #C4351A) !important;
}

html.theme-light #manual-export-btn:hover :is(span, svg, path),
html.theme-light #manual-export-zip-btn:hover :is(span, svg, path) {
    color: var(--cx-coral-text, #C4351A) !important;
    stroke: var(--cx-coral-text, #C4351A) !important;
}

html.theme-light div:has(> #manual-update-db) {
    background: #FFFFFF !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    border-radius: 0.65rem !important;
}

html.theme-light #manual-update-db + label {
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light #manual-start-btn {
    background: #059669 !important;
    color: #FFFFFF !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25) !important;
}

html.theme-light #manual-start-btn :is(span, svg, path) {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* 13.8 Call Log Toolbar Buttons */
html.theme-light .cl-shell .cl-toolbar-btn {
    background: var(--cx-surface, #FFFFFF) !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    color: var(--cx-ink, #1B1830) !important;
    border-radius: 0.65rem !important;
    box-shadow: 0 1px 2px rgba(27, 24, 48, 0.04) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

html.theme-light .cl-shell .cl-toolbar-btn:hover {
    border-color: var(--cx-coral, #E8654A) !important;
    color: var(--cx-coral-text, #C4351A) !important;
    box-shadow: 0 2px 8px rgba(232, 101, 74, 0.15) !important;
}

/* 13.9 Table Action Buttons in Light Mode (Portal > Masters and all data tables) */
html.theme-light table td :is(a, button):not(:hover) svg {
    stroke: currentColor !important;
}

html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-emerald-50, [class*="bg-emerald-50"], .text-emerald-600, [class*="text-emerald-600"]) {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
    color: #059669 !important;
}
html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-emerald-50, [class*="bg-emerald-50"], .text-emerald-600, [class*="text-emerald-600"]) svg,
html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-emerald-50, [class*="bg-emerald-50"], .text-emerald-600, [class*="text-emerald-600"]) svg path {
    color: #059669 !important;
    stroke: #059669 !important;
}

html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-blue-50, [class*="bg-blue-50"], .text-blue-600, [class*="text-blue-600"]) {
    background-color: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: #2563EB !important;
}
html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-blue-50, [class*="bg-blue-50"], .text-blue-600, [class*="text-blue-600"]) svg,
html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-blue-50, [class*="bg-blue-50"], .text-blue-600, [class*="text-blue-600"]) svg path {
    color: #2563EB !important;
    stroke: #2563EB !important;
}

html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-slate-100, .bg-slate-50, [class*="bg-slate-100"], [class*="bg-slate-50"], .text-slate-600, .text-slate-500, .text-slate-400) {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}
html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-slate-100, .bg-slate-50, [class*="bg-slate-100"], [class*="bg-slate-50"], .text-slate-600, .text-slate-500, .text-slate-400) svg,
html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-slate-100, .bg-slate-50, [class*="bg-slate-100"], [class*="bg-slate-50"], .text-slate-600, .text-slate-500, .text-slate-400) svg path {
    color: #334155 !important;
    stroke: #334155 !important;
}

html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-rose-50, [class*="bg-rose-50"], .text-rose-600, [class*="text-rose-600"]) {
    background-color: #FFF1F2 !important;
    border-color: #FECDD3 !important;
    color: #E11D48 !important;
}
html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-rose-50, [class*="bg-rose-50"], .text-rose-600, [class*="text-rose-600"]) svg,
html.theme-light :is(table td, .table-action-group) :is(a, button, form button):not(:hover):is(.bg-rose-50, [class*="bg-rose-50"], .text-rose-600, [class*="text-rose-600"]) svg path {
    color: #E11D48 !important;
    stroke: #E11D48 !important;
}

/* On hover, table action buttons transition smoothly to their solid hover states */
html.theme-light table td :is(a, button, form button):hover:is([class*="hover:text-white"]) svg,
html.theme-light table td :is(a, button, form button):hover:is([class*="hover:text-white"]) svg path {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* 13.10 AI 2-Way Audio Reports Light Mode Normalization */
html.theme-light #ai-2-way-page-container {
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light #ai-2-way-page-container .grid.grid-cols-1.sm\:grid-cols-3 > div {
    background: var(--cx-surface, #FFFFFF) !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    box-shadow: 0 1px 3px rgba(27, 24, 48, 0.05) !important;
}

html.theme-light #ai-2-way-page-container .grid.grid-cols-1.sm\:grid-cols-3 > div p {
    color: var(--cx-muted, #716D85) !important;
    font-weight: 700 !important;
}

html.theme-light #ai-2-way-page-container .grid.grid-cols-1.sm\:grid-cols-3 > div:nth-child(1) h3 {
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light #ai-2-way-page-container .grid.grid-cols-1.sm\:grid-cols-3 > div:nth-child(2) h3 {
    color: #059669 !important;
}

html.theme-light #ai-2-way-page-container .grid.grid-cols-1.sm\:grid-cols-3 > div:nth-child(3) h3 {
    color: #D97706 !important;
}

/* AI 2-Way Search Toolbar & Pagination Strip */
html.theme-light #ai-2-way-page-container :is([class*="bg-slate-50"], [class*="bg-slate-800\/50"]) {
    background: #FAFAFB !important;
    background-color: #FAFAFB !important;
    border-color: var(--cx-line, #EDE4DF) !important;
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light #ai-2-way-page-container .rounded-2xl.border:not([x-show]) {
    background: var(--cx-surface, #FFFFFF) !important;
    background-color: #FFFFFF !important;
    border-color: var(--cx-line, #EDE4DF) !important;
    box-shadow: 0 4px 20px rgba(27, 24, 48, 0.06) !important;
}

html.theme-light #ai-2-way-page-container input[type="text"],
html.theme-light #ai-2-way-page-container input[type="datetime-local"],
html.theme-light #ai-2-way-page-container select {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light #ai-2-way-page-container [x-show="filterOpen"] {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    box-shadow: 0 10px 25px -5px rgba(27, 24, 48, 0.1) !important;
}

html.theme-light #ai-2-way-page-container button:not([class*="bg-blue-600"]):not([class*="bg-rose-"]):not([class*="bg-emerald-"]) {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--cx-line, #EDE4DF) !important;
    color: var(--cx-ink, #1B1830) !important;
}

html.theme-light #ai-2-way-page-container table thead tr {
    background: #F8F9FA !important;
    background-color: #F8F9FA !important;
    border-bottom: 1px solid var(--cx-line, #EDE4DF) !important;
}

html.theme-light #ai-2-way-page-container table thead th {
    color: var(--cx-ink, #1B1830) !important;
    border-color: var(--cx-line, #EDE4DF) !important;
}

html.theme-light #ai-2-way-page-container table tbody tr {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border-color: var(--cx-line, #EDE4DF) !important;
}

html.theme-light #ai-2-way-page-container table tbody tr:hover {
    background: #F8F9FA !important;
    background-color: #F8F9FA !important;
}

html.theme-light #ai-2-way-page-container table tbody td {
    color: var(--cx-ink, #1B1830) !important;
    border-color: var(--cx-line, #EDE4DF) !important;
}