/* ============================================================================
 * Photo Background — Premium Glassmorphism Layer
 *
 * Activates ONLY when .ts-app-bg renders (photo background enabled).
 * Solid-bg mode (no photo) is unaffected.
 *
 * Respects: data-perf-tier="saver", prefers-reduced-motion, data-bs-theme="light".
 * ============================================================================ */

/* ─── 1. Body + scene foundation ─────────────────────────── */
body:has(.ts-app-bg) { background: transparent !important; }
body:has(.ts-app-bg)::before { display: none !important; }

body:has(.ts-app-bg) .ts-app-bg {
    z-index: 0 !important;
    background-color: #04070f !important;
    pointer-events: none;
    position: fixed !important;
    inset: 0 !important;
}
body:has(.ts-app-bg) .ts-app-bg__image { z-index: 1 !important; position: absolute !important; inset: 0 !important; }
body:has(.ts-app-bg) .ts-app-bg__dim {
    z-index: 2 !important; position: absolute !important; inset: 0 !important;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(2,6,23,0.25) 65%, rgba(2,6,23,0.55) 100%) !important;
}

/* ─── 2. Main wrappers transparent ──────────────────────── */
body:has(.ts-app-bg) .ts-main,
body:has(.ts-app-bg) .d-flex.flex-column.min-vh-100,
body:has(.ts-app-bg) main {
    position: relative; z-index: 1; background: transparent !important;
}

/* ─── 3. Sidebar ─────────────────────────────────────────── */
body:has(.ts-app-bg) .ts-sidebar,
body:has(.ts-app-bg) .glass-sidebar {
    background: rgba(8, 12, 22, 0.92) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4);
    position: relative; z-index: 10;
}
/* v2.8.221 — Mobile safety net (per Never-Again Playbook U8).
   iOS Safari drops backdrop-filter on the slide-in drawer when GPU layers
   are recycled; combined with photo background underneath at 92% opacity,
   the menu text becomes near-illegible. On <768px viewports force the
   sidebar to fully opaque + kill backdrop-filter altogether so the menu
   is rock-solid regardless of compositor behaviour. */
@media (max-width: 767.98px) {
    body:has(.ts-app-bg) .ts-sidebar,
    body:has(.ts-app-bg) .glass-sidebar,
    body.glass-v2:has(.ts-app-bg) .ts-sidebar {
        background: rgba(8, 12, 22, 0.985) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    [data-bs-theme="light"]:has(.ts-app-bg) .ts-sidebar,
    [data-bs-theme="light"]:has(.ts-app-bg) .glass-sidebar,
    [data-bs-theme="light"] body.glass-v2:has(.ts-app-bg) .ts-sidebar {
        background: rgba(255, 255, 255, 0.985) !important;
    }
    /* Soften the page-content backdrop so it reads as "page behind a sheet"
       not "screen turned off". Existing rule sits at 0.55 in tunersuite.css;
       on photo-bg installs the photo's own midtones already provide depth,
       so the overlay can be lighter without losing focus. */
    body:has(.ts-app-bg) .ts-sidebar-overlay {
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(8px) saturate(110%);
        -webkit-backdrop-filter: blur(8px) saturate(110%);
    }
}

/* ─── 4. Header ──────────────────────────────────────────── */
body:has(.ts-app-bg) .ts-header,
body:has(.ts-app-bg) nav.navbar.sticky-top {
    background: rgba(13, 17, 23, 0.78) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    position: relative; z-index: 10;
}

/* ─── 5. Glass cards ─────────────────────────────────────── */
body:has(.ts-app-bg) .glass-card {
    background: rgba(13, 17, 23, 0.72) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color 200ms ease, transform 200ms ease;
}
body:has(.ts-app-bg) .glass-card:hover { border-color: rgba(255, 255, 255, 0.14) !important; }

/* === v2.8.270: Wizard premium-glass cards through the photo background ===
   The wizard's .premium-glass uses var(--glass-bg) which is opaque-ish, so the
   photo BG was hidden behind the wizard. Drop opacity when the photo is active,
   keep light-mode legibility via backdrop-filter. */
body:has(.ts-app-bg) .premium-glass {
    background: rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: blur(16px) saturate(115%);
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="light"] body:has(.ts-app-bg) .premium-glass,
body:has(.ts-app-bg)[data-bs-theme="light"] .premium-glass {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
}


/* ─── 5b. Dyno Studio (.ds-*) bespoke cards ──────────────────
   Same surface family as .glass-card, but the Dyno Studio page uses its own
   class names so rule 5 skips it entirely → cards rendered muddy/dark over the
   photo. Mirror the .glass-card treatment for both themes + perf-saver. */
body:has(.ts-app-bg) .ds-stat-card,
body:has(.ts-app-bg) .ds-cmd,
body:has(.ts-app-bg) .ds-card,
body:has(.ts-app-bg) .ds-empty {
    background: rgba(13, 17, 23, 0.70) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body:has(.ts-app-bg) .ds-search,
body:has(.ts-app-bg) .ds-thumb {
    background: rgba(13, 17, 23, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ─── 6. KPI cards ───────────────────────────────────────── */
body:has(.ts-app-bg) .ts-md-kpi,
body:has(.ts-app-bg) [class*="ts-md-kpi"] {
    background: rgba(13, 17, 23, 0.68) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ─── 7. Connector cards ─────────────────────────────────── */
body:has(.ts-app-bg) .ts-md-connector {
    background: rgba(13, 17, 23, 0.65) !important;
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* ─── 8. Hero sections ──────────────────────────────────── */
body:has(.ts-app-bg) .master-dashboard .hero,
body:has(.ts-app-bg) .hero,
body:has(.ts-app-bg) [class*="dashboard-hero"] {
    background: rgba(13, 17, 23, 0.55) !important;
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ─── 9. Tables ──────────────────────────────────────────── */
body:has(.ts-app-bg) .ts-table,
body:has(.ts-app-bg) .table { background: transparent !important; }
body:has(.ts-app-bg) .ts-table thead,
body:has(.ts-app-bg) .table thead {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(8px);
}
body:has(.ts-app-bg) .ts-table tbody tr,
body:has(.ts-app-bg) .table tbody tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    transition: background-color 150ms ease;
}
body:has(.ts-app-bg) .ts-table tbody tr:hover,
body:has(.ts-app-bg) .table tbody tr:hover { background: rgba(255, 255, 255, 0.04) !important; }

/* ─── 10. Modals ─────────────────────────────────────────── */
body:has(.ts-app-bg) .ts-modal,
body:has(.ts-app-bg) .modal-content {
    background: rgba(13, 17, 23, 0.94) !important;
    backdrop-filter: blur(32px) saturate(150%);
    -webkit-backdrop-filter: blur(32px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
}
body:has(.ts-app-bg) .modal-backdrop {
    background: rgba(2, 6, 23, 0.7) !important;
    backdrop-filter: blur(4px);
}

/* ─── 11. Pills + badges ─────────────────────────────────── */
body:has(.ts-app-bg) .ts-md-pill,
body:has(.ts-app-bg) .badge {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ─── 12. Buttons ────────────────────────────────────────── */
body:has(.ts-app-bg) .ts-btn-primary { box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25); }
body:has(.ts-app-bg) .ts-btn-primary:hover { box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35); transform: translateY(-1px); }
body:has(.ts-app-bg) .ts-btn-ghost {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px);
}
body:has(.ts-app-bg) .ts-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* ─── 13. Dropdowns + popovers ───────────────────────────── */
body:has(.ts-app-bg) .dropdown-menu,
body:has(.ts-app-bg) .popover,
body:has(.ts-app-bg) .tooltip-inner {
    background: rgba(13, 17, 23, 0.94) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ─── 14. Inputs ─────────────────────────────────────────── */
body:has(.ts-app-bg) .ts-input,
body:has(.ts-app-bg) .ts-select,
body:has(.ts-app-bg) .form-control,
body:has(.ts-app-bg) .form-select {
    background: rgba(13, 17, 23, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px);
}
body:has(.ts-app-bg) .ts-input:focus,
body:has(.ts-app-bg) .ts-select:focus,
body:has(.ts-app-bg) .form-control:focus,
body:has(.ts-app-bg) .form-select:focus {
    background: rgba(13, 17, 23, 0.75) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* ─── 15. Hide noise layers ──────────────────────────────── */
body:has(.ts-app-bg) .ts-bg-gradient,
body:has(.ts-app-bg) .ts-bg-noise,
body:has(.ts-app-bg) .ambient-glow,
body:has(.ts-app-bg) #neural-canvas,
body:has(.ts-app-bg) #horizon-canvas { display: none !important; }

/* ─── 16. Footer (dark-mode default) ─────────────────────── */
body:has(.ts-app-bg) footer,
body:has(.ts-app-bg) .ts-footer {
    background: rgba(8, 12, 22, 0.55) !important;
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}
/* v2.8.176 — footer light-mode parity (was forced dark on light + photo bg).
   Inline `style="background: var(--ts-glass-bg)"` on the footer partial would
   normally swap, but the dark override above wins on photo-bg pages. */
[data-bs-theme="light"]:has(.ts-app-bg) footer,
[data-bs-theme="light"]:has(.ts-app-bg) .ts-footer {
    background: rgba(255, 255, 255, 0.82) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #1e293b;
}
[data-bs-theme="light"]:has(.ts-app-bg) .ts-footer .text-muted,
[data-bs-theme="light"]:has(.ts-app-bg) footer .text-muted { color: #64748b !important; }
[data-bs-theme="light"]:has(.ts-app-bg) footer a:not(.btn) { color: #334155; }
[data-bs-theme="light"]:has(.ts-app-bg) footer a:not(.btn):hover { color: #0f172a; }

/* ═══ LIGHT MODE PARITY ════════════════════════════════════ */
/* v2.8.176 — On a light page, the photo competes with content for attention.
   Push the dim much higher than dark mode so the photo reads as subtle tint,
   not dominant artwork. On work-density pages (FR detail) we push even further
   below to keep the photo as nearly-invisible wallpaper. */
[data-bs-theme="light"]:has(.ts-app-bg) .ts-app-bg__dim {
    background: radial-gradient(ellipse at center, rgba(248,250,252,0.55) 0%, rgba(248,250,252,0.75) 65%, rgba(248,250,252,0.90) 100%) !important;
}
/* Work-density pages — wash photo to ~85-95% white so cards dominate. */
[data-bs-theme="light"]:has(.ts-app-bg):has(.fr-detail) .ts-app-bg__dim,
[data-bs-theme="light"]:has(.ts-app-bg):has(.admin-page-wrap) .ts-app-bg__dim {
    background: radial-gradient(ellipse at center, rgba(248,250,252,0.82) 0%, rgba(248,250,252,0.90) 60%, rgba(248,250,252,0.97) 100%) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .glass-card,
[data-bs-theme="light"]:has(.ts-app-bg) .ts-md-kpi,
[data-bs-theme="light"]:has(.ts-app-bg) .ts-md-connector {
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06), 0 12px 40px rgba(15,23,42,0.10);
}
/* Dyno Studio — work-density page: wash the photo near-white + solid-ish
   cards so the bespoke .ds-* surfaces read on a light page (mirrors the
   .fr-detail / .admin-page-wrap treatment; the dyno page uses neither
   wrapper, so key off its .ds-hero). */
[data-bs-theme="light"]:has(.ts-app-bg):has(.ds-hero) .ts-app-bg__dim {
    background: radial-gradient(ellipse at center, rgba(248,250,252,0.82) 0%, rgba(248,250,252,0.90) 60%, rgba(248,250,252,0.97) 100%) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .ds-stat-card,
[data-bs-theme="light"]:has(.ts-app-bg) .ds-cmd,
[data-bs-theme="light"]:has(.ts-app-bg) .ds-card,
[data-bs-theme="light"]:has(.ts-app-bg) .ds-empty {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06), 0 12px 40px rgba(15,23,42,0.10) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .ds-search,
[data-bs-theme="light"]:has(.ts-app-bg) .ds-thumb {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .ds-stat-value,
[data-bs-theme="light"]:has(.ts-app-bg) .ds-card-title { color: #0f172a !important; }
[data-bs-theme="light"]:has(.ts-app-bg) .ds-stat-label,
[data-bs-theme="light"]:has(.ts-app-bg) .ds-stat-sub,
[data-bs-theme="light"]:has(.ts-app-bg) .ds-card-vehicle,
[data-bs-theme="light"]:has(.ts-app-bg) .ds-card-meta,
[data-bs-theme="light"]:has(.ts-app-bg) .ds-card-foot,
[data-bs-theme="light"]:has(.ts-app-bg) .ds-pill { color: #475569 !important; }

[data-bs-theme="light"]:has(.ts-app-bg) .ts-sidebar,
[data-bs-theme="light"]:has(.ts-app-bg) .glass-sidebar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 4px 0 32px rgba(15, 23, 42, 0.10);
}
[data-bs-theme="light"]:has(.ts-app-bg) .ts-header,
[data-bs-theme="light"]:has(.ts-app-bg) nav.navbar.sticky-top {
    background: rgba(255, 255, 255, 0.82) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .modal-content {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .ts-table tbody tr,
[data-bs-theme="light"]:has(.ts-app-bg) .table tbody tr { border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; }
[data-bs-theme="light"]:has(.ts-app-bg) .ts-table tbody tr:hover,
[data-bs-theme="light"]:has(.ts-app-bg) .table tbody tr:hover { background: rgba(15, 23, 42, 0.04) !important; }
[data-bs-theme="light"]:has(.ts-app-bg) .dropdown-menu,
[data-bs-theme="light"]:has(.ts-app-bg) .popover {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .ts-input,
[data-bs-theme="light"]:has(.ts-app-bg) .form-control {
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
}

/* v2.8.176 — FR detail page light + photo bg parity. Without these the page
   keeps its dark surfaces (var(--fr-surface) at dark token) on a white page. */
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .request-hero,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .glass-card,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .glass-section,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .ts-card,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .ts-info-banner {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06), 0 12px 40px rgba(15,23,42,0.10) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .fr-action-ribbon {
    background: linear-gradient(180deg, rgba(245,158,11,0.14), rgba(245,158,11,0.06)) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .fr-action-ribbon.is-hold {
    background: linear-gradient(180deg, rgba(6,182,212,0.14), rgba(6,182,212,0.06)) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .fr-action-ribbon.is-flag {
    background: linear-gradient(180deg, rgba(239,68,68,0.12), rgba(239,68,68,0.05)) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .fr-action-ribbon__title,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .fr-action-ribbon__quote { color: #0f172a !important; }
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .fr-action-ribbon__title .meta { color: #475569 !important; }
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail h1,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail h2,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail h3,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail h4,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail h5,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .text-body { color: #0f172a !important; }
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .text-secondary,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .text-muted { color: #475569 !important; }

/* Modal layers — header / body / footer separately (not just .modal-content). */
[data-bs-theme="light"]:has(.ts-app-bg) .modal-header,
[data-bs-theme="light"]:has(.ts-app-bg) .modal-body,
[data-bs-theme="light"]:has(.ts-app-bg) .modal-footer {
    background: transparent !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .modal-title { color: #0f172a !important; }

/* Workflow stepper light parity. */
[data-bs-theme="light"]:has(.ts-app-bg) .workflow-stepper-card,
[data-bs-theme="light"]:has(.ts-app-bg) .ts-stepper,
[data-bs-theme="light"]:has(.ts-app-bg) .stepper-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .stepper-step .step-label,
[data-bs-theme="light"]:has(.ts-app-bg) .ts-stepper-step .step-label { color: #1e293b !important; }
[data-bs-theme="light"]:has(.ts-app-bg) .stepper-step .step-meta,
[data-bs-theme="light"]:has(.ts-app-bg) .ts-stepper-step .step-meta { color: #64748b !important; }

/* Chat / conversation bubbles (tuner ↔ customer thread). */
[data-bs-theme="light"]:has(.ts-app-bg) .chat-bubble,
[data-bs-theme="light"]:has(.ts-app-bg) .thread-message,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-chat .message {
    color: #0f172a !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .chat-bubble.is-self,
[data-bs-theme="light"]:has(.ts-app-bg) .thread-message.is-self,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-chat .message.is-self {
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .chat-bubble.is-other,
[data-bs-theme="light"]:has(.ts-app-bg) .thread-message.is-other,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-chat .message.is-other {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* Tables on work pages should be near-opaque so columns are scannable. */
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail table,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .ts-table,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .table {
    background: rgba(255, 255, 255, 0.90) !important;
    color: #0f172a !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail thead { background: rgba(248, 250, 252, 0.96) !important; }
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .badge.bg-secondary { background: rgba(100, 116, 139, 0.15) !important; color: #334155 !important; border: 1px solid rgba(100, 116, 139, 0.30); }

/* File-name + mono code blocks (often hardcoded dark). */
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail code,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail pre,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .ts-mono,
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .filename-display {
    background: rgba(248, 250, 252, 0.95) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* Solid push for any nested .ts-info-banner that ships hardcoded dark inline. */
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail [class*="ts-info-banner"] { color: #0f172a !important; }

/* Defensive — kill text-white on light + photo (B9 in Playbook). */
[data-bs-theme="light"]:has(.ts-app-bg) .fr-detail .text-white { color: #0f172a !important; }

/* v2.8.176 — FR hero CSS moved INLINE into admin/requests/show.blade.php
   (single source of truth, BEM-named `.fr-hero__*` classes). The old
   `.request-hero` compactor hacks were removed when the hero was rebuilt
   from scratch. See show.blade.php @section('content') @push('styles'). */

/* ═══ PERF SAVER ═══════════════════════════════════════════ */
body[data-perf-tier="saver"]:has(.ts-app-bg) .glass-card,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ts-md-kpi,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ts-md-connector,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ts-sidebar,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ts-header,
body[data-perf-tier="saver"]:has(.ts-app-bg) .modal-content,
body[data-perf-tier="saver"]:has(.ts-app-bg) .dropdown-menu,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ts-input,
body[data-perf-tier="saver"]:has(.ts-app-bg) .form-control {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body[data-perf-tier="saver"]:has(.ts-app-bg) .glass-card,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ts-md-kpi,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ts-md-connector { background: rgba(13, 17, 23, 0.92) !important; }

/* Dyno Studio (.ds-*) under perf-saver — kill blur + force opaque surfaces. */
body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-stat-card,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-cmd,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-card,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-empty,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-search,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-thumb {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-stat-card,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-cmd,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-card,
body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-empty { background: rgba(13, 17, 23, 0.92) !important; }
[data-bs-theme="light"] body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-stat-card,
[data-bs-theme="light"] body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-cmd,
[data-bs-theme="light"] body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-card,
[data-bs-theme="light"] body[data-perf-tier="saver"]:has(.ts-app-bg) .ds-empty { background: rgba(255, 255, 255, 0.96) !important; }

/* ═══ REDUCED MOTION ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body:has(.ts-app-bg) .glass-card,
    body:has(.ts-app-bg) .ts-btn-primary,
    body:has(.ts-app-bg) .ts-md-connector { transition: none !important; }
    body:has(.ts-app-bg) .ts-btn-primary:hover { transform: none !important; }
}

/* ═══ FALLBACK NO :has() ═══════════════════════════════════ */
@supports not (selector(:has(*))) {
    .ts-app-bg ~ .ts-bg-gradient,
    .ts-app-bg ~ .ts-bg-noise,
    .ts-app-bg ~ .ambient-glow,
    .ts-app-bg ~ #neural-canvas { display: none !important; }
    .ts-app-bg { z-index: 0 !important; }
}

/* ─── M. Top-up page Bootstrap glass treatment ───────────── */
body:has(.ts-app-bg) .mtu-shell .alert {
    background: rgba(245, 158, 11, 0.10) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    color: var(--ts-text-emphasis) !important;
    border-radius: 14px;
}
body:has(.ts-app-bg) .mtu-shell .btn-outline-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--ts-text-emphasis) !important;
    backdrop-filter: blur(8px);
}
body:has(.ts-app-bg) .mtu-shell .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
body:has(.ts-app-bg) .mtu-shell .input-group .input-group-text {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--ts-text-muted) !important;
}
body:has(.ts-app-bg) .mtu-shell .form-control,
body:has(.ts-app-bg) .mtu-shell .form-select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--ts-text-emphasis) !important;
    backdrop-filter: blur(8px);
}
body:has(.ts-app-bg) .mtu-shell .form-label,
body:has(.ts-app-bg) .mtu-shell .form-text { color: var(--ts-text-muted) !important; }