/* Closyss Ember — the app's colour theme.

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

   Tailwind v4 paints every utility from a variable (.bg-slate-900 is
   background-color: var(--color-slate-900)), so redefining the variables here
   recolours every page without touching a template. Loaded after tailwind.css;
   unlayered, so it wins over Tailwind's own @layer theme definitions.

   Which family means what:
     slate, gray, zinc  -> Ember neutrals: warm porcelain to violet ink
     indigo             -> Closyss coral. 500 is the brand coral #E8654A; 600-700
                           are deeper so the white labels on buttons stay readable
     blue, sky, cyan    -> Closyss sky, the logo's second colour. Blue also marks
                           LOW priority and info, so it must stay a blue
     red, rose, orange, amber, yellow, emerald, green
                        -> untouched: alarm, warning and OK keep their meaning

   One ramp serves both themes: light pages use its pale end, dark pages its
   ink end. Contrast is checked for both (tests/test_theme.py). */

/* ── 1. Canonical Closyss Ember tokens from the Palette Study ─────────────── */

html.theme-light {
  --cx-bg: #FAF7F5;
  --cx-surface: #FFFFFF;
  --cx-raised: #FFFFFF;
  --cx-line: #EDE4DF;
  --cx-text: #1B1830;
  --cx-muted: #625C72;
  --cx-primary: #C4351A;
  --cx-on-primary: #FFFFFF;
  --cx-primary-soft: #FEF1EC;
  --cx-accent: #1774B3;
  --cx-accent-soft: #E6F3FB;
  --cx-brand: #F9532F;
  --cx-sev-critical: #D92D3A;
  --cx-sev-high: #C2410C;
  --cx-sev-medium: #8F6300;
  --cx-sev-low: #4C6A8A;
  --cx-ok: #0B7A54;
}

html:not(.theme-light) {
  --cx-bg: #100F1A;
  --cx-surface: #171624;
  --cx-raised: #1F1E30;
  --cx-line: #2C2A40;
  --cx-text: #F4EFF0;
  --cx-muted: #A6A0B6;
  --cx-primary: #FF6A48;
  --cx-on-primary: #1A0B06;
  --cx-primary-soft: #3A1E1C;
  --cx-accent: #5DB9F0;
  --cx-accent-soft: #13283A;
  --cx-brand: #F9532F;
  --cx-sev-critical: #FF5C66;
  --cx-sev-high: #FF8A4C;
  --cx-sev-medium: #F2C14E;
  --cx-sev-low: #8FA9C7;
  --cx-ok: #3DD68C;
}

:root {
  /* named brand colours for non-Tailwind markup */
  --cx-coral: #E8654A;        /* Closyss Ember primary (light) */
  --cx-coral-dark: #EF7158;   /* its partner on dark ground */
  --cx-coral-text: #C8462C;   /* coral that reads as text on white */
  --cx-sky: #3BA3E3;
  --cx-ink: #1A1828;
  --cx-ground: #FAF7F5;
  --cx-ground-dark: #100F1A;

  /* Tailwind CSS neutral ramps: warm porcelain to violet ink */
  --color-slate-50: #FAF7F5;
  --color-slate-100: #F3EEEB;
  --color-slate-200: #E7E0DC;
  --color-slate-300: #D2C9C5;
  --color-slate-400: #A6A0B6;
  --color-slate-500: #7A7389;
  --color-slate-600: #5E586D;
  --color-slate-700: #454055;
  --color-slate-800: #2C2A40;
  --color-slate-900: #1A1828;
  --color-slate-950: #100F1A;

  --color-gray-50: #FAF7F5;
  --color-gray-100: #F3EEEB;
  --color-gray-200: #E7E0DC;
  --color-gray-300: #D2C9C5;
  --color-gray-400: #A6A0B6;
  --color-gray-500: #7A7389;
  --color-gray-600: #5E586D;
  --color-gray-700: #454055;
  --color-gray-800: #2C2A40;
  --color-gray-900: #1A1828;
  --color-gray-950: #100F1A;

  --color-zinc-50: #FAF7F5;
  --color-zinc-100: #F3EEEB;
  --color-zinc-200: #E7E0DC;
  --color-zinc-300: #D2C9C5;
  --color-zinc-400: #A6A0B6;
  --color-zinc-500: #7A7389;
  --color-zinc-600: #5E586D;
  --color-zinc-700: #454055;
  --color-zinc-800: #2C2A40;
  --color-zinc-900: #1A1828;
  --color-zinc-950: #100F1A;

  /* Tailwind indigo mapped to Closyss brand coral */
  --color-indigo-50: #FDF4F1;
  --color-indigo-100: #FCE6DF;
  --color-indigo-200: #F8CBBE;
  --color-indigo-300: #F3A590;
  --color-indigo-400: #EF7158;
  --color-indigo-500: #E8654A;
  --color-indigo-600: #C8462C;
  --color-indigo-700: #A63722;
  --color-indigo-800: #842E1F;
  --color-indigo-900: #6B291D;
  --color-indigo-950: #3A120B;

  /* Tailwind blue / sky / cyan mapped to Closyss brand sky */
  --color-blue-50: #F0F8FE;
  --color-blue-100: #DDEFFC;
  --color-blue-200: #BCE0F8;
  --color-blue-300: #8ACAF2;
  --color-blue-400: #5DB9F0;
  --color-blue-500: #3BA3E3;
  --color-blue-600: #1774B3;
  --color-blue-700: #145F93;
  --color-blue-800: #164F78;
  --color-blue-900: #174264;
  --color-blue-950: #0F2A42;

  --color-sky-50: #F0F8FE;
  --color-sky-100: #DDEFFC;
  --color-sky-200: #BCE0F8;
  --color-sky-300: #8ACAF2;
  --color-sky-400: #5DB9F0;
  --color-sky-500: #3BA3E3;
  --color-sky-600: #1774B3;
  --color-sky-700: #145F93;
  --color-sky-800: #164F78;
  --color-sky-900: #174264;
  --color-sky-950: #0F2A42;

  --color-cyan-50: #F0F8FE;
  --color-cyan-100: #DDEFFC;
  --color-cyan-200: #BCE0F8;
  --color-cyan-300: #8ACAF2;
  --color-cyan-400: #5DB9F0;
  --color-cyan-500: #3BA3E3;
  --color-cyan-600: #1774B3;
  --color-cyan-700: #145F93;
  --color-cyan-800: #164F78;
  --color-cyan-900: #174264;
  --color-cyan-950: #0F2A42;
}


/* ── 2. Data Tables: Modern, scan-friendly rows without rigid gridlines ─────
   Most legacy tables drew heavy column dividers (border-r on every cell)
   and a pitch-black slab under the header, giving them an outdated 90s
   spreadsheet look.
   In modern consoles, tables are row-oriented:
   - Zero vertical column divider lines.
   - Clean, subtle horizontal hairlines.
   - Distinctive, readable headers that adapt gracefully to light and dark themes.
   - Micro-interaction hover feedback with warm Ember coral tint.
   - Distinct accent bar on selected/active rows. */

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-width: 0 !important;
  border-right-width: 0 !important;
}

/* ── Modern Table Headers ── */
table:not([data-grid]) > thead > tr {
  border-bottom: 1px solid var(--cx-line) !important;
}

html.theme-light table:not([data-grid]) > thead > tr,
html.theme-light table:not([data-grid]) > thead > tr > th {
  background-color: #F6F1ED !important;
  color: var(--cx-muted, #625C72) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--cx-line, #EDE4DF) !important;
  border-top-width: 0 !important;
  padding: 0.85rem 1rem !important;
}

html:not(.theme-light) table:not([data-grid]) > thead > tr,
html:not(.theme-light) table:not([data-grid]) > thead > tr > th {
  background-color: var(--cx-raised, #1F1E30) !important;
  color: var(--cx-muted, #A6A0B6) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--cx-line, #2C2A40) !important;
  border-top-width: 0 !important;
  padding: 0.85rem 1rem !important;
}

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

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

/* ── Subtle row hover with warm Ember tint ── */
html.theme-light table:not([data-grid]) > tbody > tr:hover > td {
  background-color: rgba(232, 101, 74, 0.035) !important;
}

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

/* ── Selected or Checked 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-primary-soft) !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, #F9532F) !important;
}


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

.glass-card,
div:has(> table:not([data-grid])) {
  border: 1px solid var(--cx-line) !important;
  border-radius: 1rem !important;
  background-color: var(--cx-surface) !important;
  overflow: hidden;
}

html.theme-light .glass-card,
html.theme-light div:has(> table:not([data-grid])) {
  background-color: var(--cx-surface, #FFFFFF) !important;
  border-color: var(--cx-line, #EDE4DF) !important;
  box-shadow: 0 1px 3px rgba(27, 24, 48, 0.04), 0 10px 28px -10px rgba(27, 24, 48, 0.07) !important;
}

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


/* ── 4. UI Near Tables: Toolbar, Metadata, Actions & Pagination ───────────── */

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

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

/* "Per Page" pill selector container */
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.04) !important;
  transition: border-color 0.15s ease;
}

div:has(> select[name="per_page"]):focus-within {
  border-color: var(--cx-accent, #5DB9F0) !important;
  box-shadow: 0 0 0 2px var(--cx-accent-soft, rgba(93, 185, 240, 0.2)) !important;
}

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

/* Secondary outline action buttons near tables (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-text) !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, #F9532F) !important;
  color: var(--cx-primary) !important;
  box-shadow: 0 2px 10px rgba(249, 83, 47, 0.12) !important;
}

/* Table search inputs and filter controls */
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-text) !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-accent, #5DB9F0) !important;
  box-shadow: 0 0 0 3px var(--cx-accent-soft, rgba(93, 185, 240, 0.22)) !important;
  outline: none !important;
}

/* ── Pagination bar below tables ── */
div:has(> nav a[href*="page="]),
div:has(> nav button[hx-get*="page="]) {
  border-top-color: var(--cx-line) !important;
}

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;
}

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-primary-soft) !important;
  color: var(--cx-primary) !important;
}

/* Active page button in pagination */
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-color: var(--cx-primary) !important;
  color: var(--cx-on-primary, #FFFFFF) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 2px 6px rgba(232, 101, 74, 0.28) !important;
}

/* Page indicator label (e.g. "PAGE 1 / 10") — scoped strictly to pagination wrapper */
div:has(> nav) > div:not(nav):not(button):not(a),
nav ~ div:not(nav):not(button):not(a) {
  color: var(--cx-muted, #625C72) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

html:not(.theme-light) div:has(> nav) > div:not(nav):not(button):not(a),
html:not(.theme-light) nav ~ div:not(nav):not(button):not(a) {
  color: var(--cx-muted, #A6A0B6) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}


/* ── 5. Primary Buttons & High-Contrast Interactive Controls ──────────────── */

/* Brand coral primary buttons */
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-primary, #C4351A) !important;
  background-color: var(--cx-primary, #C4351A) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 1px 3px rgba(196, 53, 26, 0.2), 0 2px 6px rgba(196, 53, 26, 0.12) !important;
  transition: all 0.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, 0.35) !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-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;
}

/* Ensure child text nodes, spans, icons, and paths in primary solid buttons are pure white */
: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, label, [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, label, [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;
}

/* 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;
}

/* ── 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;
}