/* ═══════════════════════════════════════════════════════════════════════════
   KANJO OPS — "OVAL OFFICE" EXECUTIVE VIP THEME  (super_admin only)
   ---------------------------------------------------------------------------
   EVERY rule in this file is scoped under `body.theme-executive-vip`, a class
   that is ONLY ever added for a `super_admin` session (see uam.js →
   kanjoApplyExecutiveTheme). It is therefore 100% inert for every other role:
   reps, auditors, admins and founders keep the standard purple/light UI.

   Palette: Obsidian / Midnight (`#050505` → `#111827`) + Metallic Gold
   (`#d4af37` / `#c5a059`). Materials: dark glassmorphism. Motion: slow,
   luxurious fades and soft gold-lift hovers.
   ═══════════════════════════════════════════════════════════════════════════ */

body.theme-executive-vip {
    --vip-obsidian: #050505;
    --vip-midnight: #0a0a0a;
    --vip-slate: #111827;
    --vip-panel: rgba(17, 24, 39, 0.62);
    --vip-panel-solid: #0d1117;
    --vip-gold: #d4af37;
    --vip-gold-2: #c5a059;
    --vip-gold-bright: #f5d97a;
    --vip-gold-soft: rgba(212, 175, 55, 0.16);
    --vip-gold-line: rgba(212, 175, 55, 0.38);
    --vip-text: #eceff4;
    --vip-muted: #9aa4b2;
    --vip-radius: 18px;

    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(76, 29, 149, 0.30) 0%, transparent 55%),
        radial-gradient(1000px 520px at 100% 0%, rgba(212, 175, 55, 0.10) 0%, transparent 50%),
        linear-gradient(160deg, #0a0a0a 0%, #060608 45%, #020203 100%) !important;
    background-attachment: fixed !important;
    color: var(--vip-text) !important;
    min-height: 100vh;
}

/* Subtle film-grain / vignette overlay for depth. */
body.theme-executive-vip::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(1400px 900px at 50% -20%, rgba(255, 255, 255, 0.03), transparent 60%),
        radial-gradient(1000px 700px at 50% 120%, rgba(212, 175, 55, 0.05), transparent 60%);
}
body.theme-executive-vip > * { position: relative; z-index: 1; }

/* ── Typography: heavier, more "letterhead" presence ──────────────────── */
body.theme-executive-vip h1,
body.theme-executive-vip h2,
body.theme-executive-vip h3,
body.theme-executive-vip h4 { letter-spacing: -0.01em; }

body.theme-executive-vip .text-kanjo-dark,
body.theme-executive-vip .kws-hub-title,
body.theme-executive-vip .kws-fin-card h3 { color: var(--vip-text) !important; }

body.theme-executive-vip .text-kanjo-primary,
body.theme-executive-vip .kws-hub-sub { color: var(--vip-gold) !important; }

/* ── Header (legacy pill bar, non-shell pages & mobile) ───────────────── */
body.theme-executive-vip > header {
    background: rgba(6, 6, 8, 0.72) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--vip-gold-line) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}
body.theme-executive-vip #userInfo {
    background: rgba(212, 175, 55, 0.10) !important;
    border: 1px solid var(--vip-gold-line);
}
body.theme-executive-vip #userNameDisplay {
    color: var(--vip-gold-bright) !important;
    border-color: var(--vip-gold-line) !important;
}

/* ── Boot splash ──────────────────────────────────────────────────────── */
body.theme-executive-vip .boot-splash { background: radial-gradient(circle at 50% 40%, #12100a, #050505 70%) !important; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
body.theme-executive-vip .kanjo-sidebar {
    background: linear-gradient(180deg, rgba(10, 10, 12, 0.92), rgba(6, 6, 8, 0.96)) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border-left: 1px solid var(--vip-gold-line) !important;
    box-shadow: -18px 0 60px rgba(0, 0, 0, 0.65) !important;
}
body.theme-executive-vip .ksb-brand { border-bottom: 1px solid var(--vip-gold-line); }
body.theme-executive-vip .ksb-brand-title { color: var(--vip-text); }
body.theme-executive-vip .ksb-brand-title span { color: var(--vip-gold); }
body.theme-executive-vip .ksb-brand-sub { color: var(--vip-gold-2); letter-spacing: 4px; }
body.theme-executive-vip .ksb-logo {
    background: #0b0b0d;
    border: 1px solid var(--vip-gold-line);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(212, 175, 55, 0.18);
}
body.theme-executive-vip .ksb-footer { border-top: 1px solid var(--vip-gold-line); }

/* Sidebar nav tabs */
body.theme-executive-vip .kanjo-sidebar .kws-tab {
    color: #cfd3db;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
body.theme-executive-vip .kanjo-sidebar .kws-tab:hover {
    background: var(--vip-gold-soft);
    color: var(--vip-gold-bright);
    transform: translateX(-3px);
}
body.theme-executive-vip .kanjo-sidebar .kws-tab.is-active,
body.theme-executive-vip .kws-tab.is-active {
    background: linear-gradient(90deg, var(--vip-gold-2), var(--vip-gold) 45%, var(--vip-gold-bright)) !important;
    color: #0a0a0a !important;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
body.theme-executive-vip .kanjo-sidebar .kws-tab.is-active .kws-badge { background: #0a0a0a !important; color: var(--vip-gold) !important; }
body.theme-executive-vip .kws-badge { background: var(--vip-gold) !important; color: #0a0a0a !important; }

/* Sidebar user footer */
body.theme-executive-vip .ksb-user-name { color: var(--vip-text); font-weight: 900; }
body.theme-executive-vip .ksb-user-role { color: var(--vip-gold-2); }
body.theme-executive-vip .ksb-avatar img { border-color: var(--vip-gold); box-shadow: 0 0 16px rgba(212, 175, 55, 0.45); }
body.theme-executive-vip .ksb-icon-btn { color: var(--vip-gold-2); background: rgba(212, 175, 55, 0.08); }
body.theme-executive-vip .ksb-icon-btn:hover { background: rgba(212, 175, 55, 0.22); color: var(--vip-gold-bright); }
body.theme-executive-vip .ksb-quick button { color: #cfd3db; background: rgba(212, 175, 55, 0.06); }
body.theme-executive-vip .ksb-quick button:hover { background: rgba(212, 175, 55, 0.18); color: var(--vip-gold-bright); }
body.theme-executive-vip .ksb-quick button i { color: var(--vip-gold); }

/* ── The prestigious role badge ───────────────────────────────────────── */
.ksb-user-role-vip {
    color: var(--vip-gold-bright) !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.65);
    animation: vipGoldPulse 3.2s ease-in-out infinite;
}
@keyframes vipGoldPulse {
    0%, 100% { text-shadow: 0 0 10px rgba(212, 175, 55, 0.45); }
    50% { text-shadow: 0 0 22px rgba(245, 217, 122, 0.9); }
}

/* ── Panels, cards & bento surfaces ───────────────────────────────────── */
body.theme-executive-vip #dashboardSection,
body.theme-executive-vip main { background: transparent !important; }

body.theme-executive-vip #dashboardSection > div,
body.theme-executive-vip #dashboardSection > .kws-card,
body.theme-executive-vip .kws-hub-card,
body.theme-executive-vip .kws-fin-card,
body.theme-executive-vip .kws-datestrip-wrap,
body.theme-executive-vip .kanjo-workspace-pane:not(.hidden) {
    background: var(--vip-panel) !important;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(212, 175, 55, 0.20) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    border-radius: var(--vip-radius) !important;
    transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.30s ease, border-color 0.30s ease !important;
}
body.theme-executive-vip #dashboardSection > div:hover,
body.theme-executive-vip .kws-card:hover,
body.theme-executive-vip .kws-hub-card:hover,
body.theme-executive-vip .kws-fin-card:hover {
    transform: translateY(-5px);
    border-color: var(--vip-gold-line) !important;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.6), 0 0 40px rgba(212, 175, 55, 0.14) !important;
}

/* ── Neutral Tailwind surfaces → dark glass ───────────────────────────── */
/* NOTE: `:not(img)` is critical. Merchant logos are `<img class="bg-white …">`;
   applying `backdrop-filter` to a replaced element blanks the image in
   Chromium/Safari (the "merchant logos disappeared" regression). */
body.theme-executive-vip .bg-white:not(img) { background: var(--vip-panel) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.theme-executive-vip img.bg-white { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.theme-executive-vip .bg-slate-50,
body.theme-executive-vip .bg-gray-50,
body.theme-executive-vip .bg-kanjo-light,
body.theme-executive-vip .bg-kanjo-bg { background: rgba(255, 255, 255, 0.035) !important; }
body.theme-executive-vip .bg-slate-100,
body.theme-executive-vip .bg-gray-100,
body.theme-executive-vip .bg-purple-100 { background: rgba(212, 175, 55, 0.10) !important; }

body.theme-executive-vip .text-slate-300,
body.theme-executive-vip .text-slate-400,
body.theme-executive-vip .text-slate-500,
body.theme-executive-vip .text-gray-400,
body.theme-executive-vip .text-gray-500,
body.theme-executive-vip .text-slate-600 { color: var(--vip-muted) !important; }
body.theme-executive-vip .text-slate-700,
body.theme-executive-vip .text-slate-800,
body.theme-executive-vip .text-slate-900,
body.theme-executive-vip .text-gray-600,
body.theme-executive-vip .text-gray-700,
body.theme-executive-vip .text-gray-800,
body.theme-executive-vip .text-gray-900 { color: var(--vip-text) !important; }
body.theme-executive-vip .text-purple-500,
body.theme-executive-vip .text-purple-600 { color: var(--vip-gold-2) !important; }

/* Arbitrary dark-hex text utilities (the DOM uses `text-[#230535]` ~90 times,
   plus a few `text-[#4B0082]` / `text-[#6D28D9]`). On the obsidian surface they
   are unreadable, so lift them to the light VIP text colour — EXCEPT when the
   same element also paints a gold/orange background, where the original dark
   ink is required for contrast. */
body.theme-executive-vip [class*="text-[#230535]"]:not([class*="bg-[#FFD700]"]):not([class*="bg-[#E57723]"]):not([class*="bg-[#facc15]"]):not([class*="bg-yellow"]),
body.theme-executive-vip [class*="text-[#4B0082]"]:not([class*="bg-[#FFD700]"]):not([class*="bg-[#E57723]"]) {
    color: var(--vip-text) !important;
}
body.theme-executive-vip [class*="text-[#6D28D9]"] { color: var(--vip-gold-2) !important; }

body.theme-executive-vip .border-slate-100,
body.theme-executive-vip .border-slate-200,
body.theme-executive-vip .border-gray-100,
body.theme-executive-vip .border-purple-100,
body.theme-executive-vip .border-purple-200 { border-color: rgba(212, 175, 55, 0.20) !important; }
body.theme-executive-vip .divide-slate-100 > * + *,
body.theme-executive-vip .divide-y > * + * { border-color: rgba(212, 175, 55, 0.14) !important; }

/* ── Buttons & accents → metallic gold ────────────────────────────────── */
body.theme-executive-vip .bg-kanjo-primary,
body.theme-executive-vip .bg-kanjo-dark,
body.theme-executive-vip button[class*="bg-[#230535]"],
body.theme-executive-vip a[class*="bg-[#230535]"],
body.theme-executive-vip button[class*="bg-purple-"],
body.theme-executive-vip a[class*="bg-purple-"] {
    background: linear-gradient(135deg, var(--vip-gold-2), var(--vip-gold) 55%, var(--vip-gold-bright)) !important;
    color: #0a0a0a !important;
    border-color: transparent !important;
    box-shadow: 0 10px 26px rgba(212, 175, 55, 0.28) !important;
}
body.theme-executive-vip button[class*="bg-[#E57723]"],
body.theme-executive-vip button[class*="bg-orange-"] {
    background: linear-gradient(135deg, #b8860b, var(--vip-gold)) !important;
    color: #0a0a0a !important;
}
body.theme-executive-vip .text-white { color: #0a0a0a; }

/* Ghost / outline pills */
body.theme-executive-vip .kws-pill {
    background: rgba(212, 175, 55, 0.08) !important;
    border-color: var(--vip-gold-line) !important;
    color: var(--vip-gold-2) !important;
}
body.theme-executive-vip .kws-pill:hover { background: rgba(212, 175, 55, 0.20) !important; color: var(--vip-gold-bright) !important; }
body.theme-executive-vip .kws-pill.is-active {
    background: linear-gradient(90deg, var(--vip-gold-2), var(--vip-gold)) !important;
    color: #0a0a0a !important;
}
body.theme-executive-vip .kws-pill-ghost { background: transparent !important; color: var(--vip-muted) !important; }

/* ── Inputs / selects / textareas ─────────────────────────────────────── */
body.theme-executive-vip input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.theme-executive-vip select,
body.theme-executive-vip textarea {
    background: rgba(0, 0, 0, 0.45) !important;
    color: var(--vip-text) !important;
    border-color: rgba(212, 175, 55, 0.28) !important;
}
body.theme-executive-vip input::placeholder,
body.theme-executive-vip textarea::placeholder { color: #6b7280 !important; }
body.theme-executive-vip input:focus,
body.theme-executive-vip select:focus,
body.theme-executive-vip textarea:focus {
    outline: none !important;
    border-color: var(--vip-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18) !important;
}
body.theme-executive-vip option { background: #0d1117; color: var(--vip-text); }
body.theme-executive-vip .accent-kanjo-primary { accent-color: var(--vip-gold) !important; }

/* ── Modals & overlays ────────────────────────────────────────────────── */
body.theme-executive-vip .fixed > .bg-white,
body.theme-executive-vip [id$="Modal"] > div,
body.theme-executive-vip [id*="Modal"] .bg-white {
    background: rgba(13, 17, 23, 0.94) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--vip-gold-line) !important;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75) !important;
}
body.theme-executive-vip #notificationsDropdown {
    background: rgba(13, 17, 23, 0.96) !important;
    border: 1px solid var(--vip-gold-line) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7) !important;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
body.theme-executive-vip table thead { background: rgba(212, 175, 55, 0.08) !important; color: var(--vip-gold-2) !important; }
body.theme-executive-vip table tbody td { color: var(--vip-text) !important; }
body.theme-executive-vip table tbody tr { border-color: rgba(212, 175, 55, 0.12) !important; }
body.theme-executive-vip table tbody tr:hover { background: rgba(212, 175, 55, 0.06) !important; }

/* ── The UAM (User Access Management) matrix inside the theme ─────────── */
body.theme-executive-vip #kanjoUamWidget { border-color: var(--vip-gold-line) !important; }
body.theme-executive-vip #kanjoUamWidget > div:first-child { background: linear-gradient(120deg, #0a0a0a, #1a1408) !important; }
body.theme-executive-vip .uam-toggle { accent-color: var(--vip-gold) !important; }

/* ── Scrollbars ───────────────────────────────────────────────────────── */
body.theme-executive-vip ::-webkit-scrollbar { width: 10px; height: 10px; }
body.theme-executive-vip ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
body.theme-executive-vip ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--vip-gold-2), #8a6d1f); border-radius: 9999px; }

/* ── Luxurious micro-interactions ─────────────────────────────────────── */
@keyframes vipFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
body.theme-executive-vip #dashboardSection > *,
body.theme-executive-vip .kws-hub-pane > * {
    animation: vipFadeIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.theme-executive-vip .kws-nav-inner { animation: vipFadeIn 0.45s ease both; }

@media (prefers-reduced-motion: reduce) {
    body.theme-executive-vip #dashboardSection > *,
    body.theme-executive-vip .kws-hub-pane > *,
    body.theme-executive-vip .kws-nav-inner,
    .ksb-user-role-vip { animation: none !important; }
    body.theme-executive-vip .kws-card:hover,
    body.theme-executive-vip #dashboardSection > div:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRICT HIGH-CONTRAST ENFORCEMENT  (hotfix)
   ---------------------------------------------------------------------------
   The base theme above inverted the Tailwind *surfaces* but missed two large
   families of text, which the founder reported as unreadable on production:

     1. Component classes DEFINED in style.css with a literal `color: #230535`
        (e.g. .kws-datestrip-title, .kws-fin-amount, .kpi-stat-value, .kds-num).
        A Tailwind-only override cannot reach these — they carry the colour in
        the stylesheet, not in the class name.
     2. Light tinted card surfaces (`bg-*-50/*`, e.g. the KPI metrics cards
        `bg-purple-50/70`, `bg-emerald-50/70`) that stayed light while their
        labels were lightened → light-on-light washout.

   Rule of engagement: on the obsidian VIP canvas ALL dark ink is lifted to a
   legible light tone (or gold for figures/headings); light tinted surfaces are
   collapsed to dark glass so every card is dark-with-light-text. The few chips
   that intentionally paint their OWN gold background keep dark ink (re-asserted
   last). Light DOCUMENTS (the authorization letter, the contract template) are
   deliberately excluded — they are meant to print on white.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Collapse light tinted utility surfaces to dark glass ───────────────
   `~=` matches the EXACT token (`bg-purple-50`) so it never catches a solid
   `bg-purple-500`; `*=.../`' catches the opacity variants (`bg-purple-50/70`). */
body.theme-executive-vip [class~="bg-slate-50"], body.theme-executive-vip [class*="bg-slate-50/"],
body.theme-executive-vip [class~="bg-gray-50"], body.theme-executive-vip [class*="bg-gray-50/"],
body.theme-executive-vip [class~="bg-emerald-50"], body.theme-executive-vip [class*="bg-emerald-50/"],
body.theme-executive-vip [class~="bg-blue-50"], body.theme-executive-vip [class*="bg-blue-50/"],
body.theme-executive-vip [class~="bg-red-50"], body.theme-executive-vip [class*="bg-red-50/"],
body.theme-executive-vip [class~="bg-amber-50"], body.theme-executive-vip [class*="bg-amber-50/"],
body.theme-executive-vip [class~="bg-green-50"], body.theme-executive-vip [class*="bg-green-50/"],
body.theme-executive-vip [class~="bg-orange-50"], body.theme-executive-vip [class*="bg-orange-50/"],
body.theme-executive-vip [class~="bg-yellow-50"], body.theme-executive-vip [class*="bg-yellow-50/"],
body.theme-executive-vip [class~="bg-indigo-50"], body.theme-executive-vip [class*="bg-indigo-50/"],
body.theme-executive-vip [class~="bg-pink-50"], body.theme-executive-vip [class*="bg-pink-50/"],
body.theme-executive-vip [class~="bg-teal-50"], body.theme-executive-vip [class*="bg-teal-50/"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(212, 175, 55, 0.18) !important;
}
/* KPI metric tiles keep a faint brand tint so the colour-coding survives, but
   always on a dark, high-contrast base. Declared after the generic block so the
   tint wins for these five hues. */
body.theme-executive-vip [class~="bg-purple-50"], body.theme-executive-vip [class*="bg-purple-50/"] { background: rgba(139, 92, 246, 0.14) !important; }
body.theme-executive-vip [class~="bg-emerald-50"], body.theme-executive-vip [class*="bg-emerald-50/"] { background: rgba(16, 185, 129, 0.14) !important; }
body.theme-executive-vip [class~="bg-blue-50"], body.theme-executive-vip [class*="bg-blue-50/"] { background: rgba(59, 130, 246, 0.14) !important; }
body.theme-executive-vip [class~="bg-amber-50"], body.theme-executive-vip [class*="bg-amber-50/"] { background: rgba(245, 158, 11, 0.14) !important; }
body.theme-executive-vip [class~="bg-red-50"], body.theme-executive-vip [class*="bg-red-50/"] { background: rgba(239, 68, 68, 0.14) !important; }

/* ── 2) style.css components with a LIGHT background but dark ink ─────────
   These are self-contained light surfaces (not utility classes) so they must be
   re-skinned to dark glass, otherwise lifting only their text washes out. */
body.theme-executive-vip .kds-day:not(.is-active) {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(212, 175, 55, 0.16) !important;
    color: var(--vip-text) !important;
}
body.theme-executive-vip .kds-day:not(.is-active):hover { background: rgba(212, 175, 55, 0.14) !important; border-color: var(--vip-gold-line) !important; }
body.theme-executive-vip .kds-nav:not(.kds-nav-today) { background: rgba(212, 175, 55, 0.08) !important; color: var(--vip-text) !important; }
body.theme-executive-vip .kds-nav:not(.kds-nav-today):hover { background: rgba(212, 175, 55, 0.18) !important; }
body.theme-executive-vip .kpi-chip:not(.kpi-chip-gold):not(.kpi-chip-dark):not(.kpi-chip-red) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--vip-text) !important;
}
body.theme-executive-vip .kpi-chip-red { background: rgba(239, 68, 68, 0.16) !important; color: #fca5a5 !important; }
body.theme-executive-vip .kpi-rank-pill-x { background: rgba(255, 255, 255, 0.06) !important; color: var(--vip-muted) !important; }
body.theme-executive-vip .kws-ctabs { background: rgba(255, 255, 255, 0.05) !important; }
body.theme-executive-vip .kws-ctabs button:not(.is-active) { color: var(--vip-muted) !important; }
body.theme-executive-vip .kws-ctabs button:not(.is-active):hover { background: rgba(212, 175, 55, 0.12) !important; color: var(--vip-text) !important; }
body.theme-executive-vip .kws-fin-badge {
    background: rgba(212, 175, 55, 0.16) !important;
    border-color: var(--vip-gold-line) !important;
    color: var(--vip-gold-bright) !important;
}
/* Catalog status filter chips: white pill → dark glass, gold icon; the active
   state keeps its intentional Kanjo-purple fill with white label + gold count. */
body.theme-executive-vip .catalog-status-chip {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(212, 175, 55, 0.22) !important;
    color: var(--vip-text) !important;
    box-shadow: none !important;
}
body.theme-executive-vip .catalog-status-chip i { color: var(--vip-gold-2) !important; }
body.theme-executive-vip .catalog-status-chip:hover { background: rgba(212, 175, 55, 0.14) !important; border-color: var(--vip-gold) !important; }
body.theme-executive-vip .catalog-status-chip.is-active { background: #230535 !important; border-color: var(--vip-gold-line) !important; color: #ffffff !important; }
body.theme-executive-vip .catalog-status-chip.is-active i { color: var(--vip-gold) !important; }
body.theme-executive-vip .catalog-status-chip.is-active .catalog-status-chip-count { color: var(--vip-gold) !important; opacity: 1 !important; }

/* ── 3) style.css components with dark ink on a (themed) dark surface ─────
   Lift the ink to light; these sit on cards whose background the base theme
   already darkened. */
body.theme-executive-vip .kws-datestrip-title,
body.theme-executive-vip .kws-advanced > summary,
body.theme-executive-vip .kws-catalog-actions-title,
body.theme-executive-vip .kws-hub-body h3,
body.theme-executive-vip .kws-hub-search input,
body.theme-executive-vip .kws-export-searchwrap input,
body.theme-executive-vip .kpi-chart-title,
body.theme-executive-vip .kpi-mini-value,
body.theme-executive-vip .kpi-fin-val,
body.theme-executive-vip .kpi-score-total,
body.theme-executive-vip .kpi-score-crit-name,
body.theme-executive-vip .kpi-score-crit-val,
body.theme-executive-vip .kpi-score-info-row > span:last-child,
body.theme-executive-vip .kpi-benchmark-title,
body.theme-executive-vip .kpi-benchmark-side-value,
body.theme-executive-vip .kpi-detail-section-title,
body.theme-executive-vip .kpi-detail-meta-value,
body.theme-executive-vip .kpi-tips-head,
body.theme-executive-vip .kpi-personal-card-value,
body.theme-executive-vip .kpi-fix-name-btn,
body.theme-executive-vip .kpi-fix-details-btn,
body.theme-executive-vip .mp-dash-change-item,
body.theme-executive-vip .audit-row-desc,
body.theme-executive-vip .audit-row-user,
body.theme-executive-vip .audit-diff-field {
    color: var(--vip-text) !important;
}
body.theme-executive-vip .kpi-fix-name-btn i,
body.theme-executive-vip .kpi-fix-details-btn i { color: var(--vip-gold-2) !important; }

/* Large financial figures & headings → metallic gold (contrast + on-brand). */
body.theme-executive-vip .kws-fin-amount,
body.theme-executive-vip .kpi-stat-value,
body.theme-executive-vip .kds-num,
body.theme-executive-vip .kpi-rep-score {
    color: var(--vip-gold-bright) !important;
}
body.theme-executive-vip .kws-datestrip-title i { color: var(--vip-gold) !important; }

/* ── 4) Coloured Tailwind text scales used for money / percentages ────────
   The -600/-700/-800 shades are near-invisible on obsidian; lift each to a
   luminous equivalent of the same hue. */
body.theme-executive-vip [class~="text-emerald-600"], body.theme-executive-vip [class~="text-emerald-700"], body.theme-executive-vip [class~="text-emerald-800"] { color: #34d399 !important; }
body.theme-executive-vip [class~="text-green-600"], body.theme-executive-vip [class~="text-green-700"], body.theme-executive-vip [class~="text-green-800"] { color: #4ade80 !important; }
body.theme-executive-vip [class~="text-blue-600"], body.theme-executive-vip [class~="text-blue-700"], body.theme-executive-vip [class~="text-blue-800"] { color: #93c5fd !important; }
body.theme-executive-vip [class~="text-purple-700"], body.theme-executive-vip [class~="text-purple-800"], body.theme-executive-vip [class~="text-purple-900"] { color: #c4b5fd !important; }
body.theme-executive-vip [class~="text-amber-600"], body.theme-executive-vip [class~="text-amber-700"], body.theme-executive-vip [class~="text-amber-800"] { color: #fcd34d !important; }
body.theme-executive-vip [class~="text-red-600"], body.theme-executive-vip [class~="text-red-700"], body.theme-executive-vip [class~="text-red-800"] { color: #fca5a5 !important; }
body.theme-executive-vip [class~="text-indigo-600"], body.theme-executive-vip [class~="text-indigo-700"] { color: #a5b4fc !important; }
body.theme-executive-vip [class~="text-slate-900"], body.theme-executive-vip [class~="text-slate-800"] { color: #ffffff !important; }

/* ── 5) Re-assert dark ink on chips that paint their OWN gold background ──
   Declared LAST so these win over every lift above; otherwise they'd become
   light-on-gold and unreadable. */
body.theme-executive-vip .kpi-chip-gold,
body.theme-executive-vip .kpi-warn-cta,
body.theme-executive-vip .kpi-rank-pill-1,
body.theme-executive-vip .kws-hub-ic-gold,
body.theme-executive-vip .kpi-personal-card-gold .kpi-personal-card-icon {
    color: #230535 !important;
}
/* Dark-bg / gold-ink chips must keep their gold ink. */
body.theme-executive-vip .kpi-warn-icon-gold,
body.theme-executive-vip .kpi-chip-dark,
body.theme-executive-vip .kws-ctabs button.is-active,
body.theme-executive-vip .kds-nav-today { color: var(--vip-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   EXECUTIVE MERCHANT CARDS  (catalog folder view)
   ---------------------------------------------------------------------------
   The catalog "folder" cards (`.catalog-merchant-card`) are defined in
   style.css with a SOLID WHITE background and harsh emerald/amber status
   borders. On the obsidian VIP canvas they read as primitive light-mode tiles
   rudely pasted onto a premium dashboard: the card stayed white while the
   merchant name (`text-[#230535]`) was inverted to light grey — white-on-white,
   completely unreadable — and the emerald/amber sync skins added cheap teal /
   green edges that clash with the Oval Office vibe.
   This block re-skins ONLY the merchant cards, strictly under
   `.theme-executive-vip`, to dark glassmorphism with metallic-gold borders and
   a soft gold-lift hover. Coloured sync state is demoted to the badge dot.
   ═══════════════════════════════════════════════════════════════════════════ */

body.theme-executive-vip .catalog-merchant-card {
    background: rgba(17, 24, 39, 0.6) !important;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s ease, border-color 0.28s ease !important;
}
body.theme-executive-vip .catalog-merchant-card:hover {
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15), 0 16px 40px rgba(0, 0, 0, 0.55) !important;
    transform: translateY(-3px);
}

/* Demote the primitive emerald/amber dashboard-sync skins to the same refined
   dark glass + gold ring (state survives on the badge dot only). */
body.theme-executive-vip .catalog-merchant-card--dashboard-uploaded,
body.theme-executive-vip .catalog-merchant-card--dashboard-pending {
    background: rgba(17, 24, 39, 0.6) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}
body.theme-executive-vip .catalog-merchant-card--dashboard-uploaded:hover,
body.theme-executive-vip .catalog-merchant-card--dashboard-pending:hover {
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15), 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}

/* Merchant name: pure white, extra-bold, softly glowing — always legible.
   Mirrors the earlier lift rule's `:not()` chain so it wins on specificity. */
body.theme-executive-vip .catalog-merchant-card [class*="text-[#230535]"]:not([class*="bg-[#FFD700]"]):not([class*="bg-[#E57723]"]):not([class*="bg-[#facc15]"]):not([class*="bg-yellow"]) {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* Logo frame → gold ring on deep glass.
   IMPORTANT: the base theme styles `img[class*="bg-white"]` with a
   `backdrop-filter` glass effect. Applied to a *replaced element* (the logo
   <img>) that blanks the image in Chromium/Safari — the "logos vanished"
   regression. We keep the frame but explicitly neutralise the filter and
   force the image to paint. */
body.theme-executive-vip .catalog-merchant-card img,
body.theme-executive-vip .catalog-merchant-card img.bg-white,
body.theme-executive-vip [data-catalog-merchant] img.bg-white {
    display: block !important;
    object-fit: cover !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Logo placeholder tile (only the grid-centering icon box, never the count chip). */
body.theme-executive-vip .catalog-merchant-card [class*="bg-[#230535]"][class*="place-items-center"] {
    background: linear-gradient(135deg, #1a1408, #0a0a0a) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    color: var(--vip-gold-bright) !important;
}

/* Sync badge → gold-tinted glass; the coloured state lives in the dot glow. */
body.theme-executive-vip .catalog-dash-badge {
    background: rgba(212, 175, 55, 0.12) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: var(--vip-gold-bright) !important;
}
body.theme-executive-vip .catalog-dash-badge__dot { box-shadow: 0 0 10px currentColor; }

/* The merchant accordion (expanded folder header + body) gets the same
   treatment so the two merchant surfaces match. */
body.theme-executive-vip [data-catalog-merchant] {
    background: rgba(17, 24, 39, 0.5) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.theme-executive-vip [data-catalog-merchant] > * { border-color: rgba(212, 175, 55, 0.16) !important; }
body.theme-executive-vip [data-catalog-merchant-body] { background: rgba(0, 0, 0, 0.25) !important; }

@media (prefers-reduced-motion: reduce) {
    body.theme-executive-vip .catalog-merchant-card,
    body.theme-executive-vip .catalog-merchant-card:hover { transform: none !important; }
}