/* Sanctuary backdrop — #05070A base + premium CSS motion + Three.js WebGL */
        #sanctuary-backdrop {
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            overflow: hidden;
            --bg-mx: 50%;
            --bg-my: 38%;
        }
        @keyframes sanctuary-breathe {
            0%, 100% { opacity: 1; filter: brightness(1); }
            50% { opacity: 1; filter: brightness(1.028); }
        }
        @keyframes sanctuary-liquid {
            0%, 100% {
                transform: translate(0, 0) scale(1);
                background-position: 0% 42%, 100% 58%;
            }
            50% {
                transform: translate(-2.5%, 1.5%) scale(1.025);
                background-position: 100% 52%, 0% 48%;
            }
        }
        @keyframes sanctuary-orb-pulse {
            0%, 100% { opacity: 0.38; }
            50% { opacity: 0.52; }
        }
        @keyframes sanctuary-aurora-spin {
            from { transform: rotate(0deg) scale(1.08); }
            to { transform: rotate(360deg) scale(1.08); }
        }
        @keyframes sanctuary-beam-pulse {
            0%, 100% { opacity: 0.35; transform: scale(1); }
            50% { opacity: 0.55; transform: scale(1.03); }
        }
        @keyframes sanctuary-sheen-sweep {
            0%, 100% { background-position: 125% 50%; }
            50% { background-position: -25% 50%; }
        }
        @keyframes sanctuary-cursor-halo {
            0%, 100% { opacity: 0.88; filter: blur(0px); }
            50% { opacity: 1; filter: blur(0.5px); }
        }
        @keyframes sanctuary-grid-shimmer {
            0%, 100% { opacity: 0.48; }
            50% { opacity: 0.62; }
        }
        @keyframes sanctuary-grain-shift {
            0%, 100% { opacity: 0.035; transform: translate(0, 0); }
            33% { opacity: 0.042; transform: translate(0.15%, 0.1%); }
            66% { opacity: 0.038; transform: translate(-0.1%, 0.12%); }
        }
        @keyframes sanctuary-grain-shift-light {
            0%, 100% { opacity: 0.025; transform: translate(0, 0); }
            50% { opacity: 0.034; transform: translate(0.12%, 0.09%); }
        }
        @keyframes hero-ambient-glow {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.92; transform: scale(1.02); }
        }
        .sanctuary-backdrop__aurora {
            position: absolute;
            inset: -25%;
            z-index: 2;
            pointer-events: none;
            background:
                conic-gradient(from 210deg at 50% 45%,
                    transparent 0deg,
                    rgba(125, 211, 252, 0.045) 55deg,
                    transparent 110deg,
                    rgba(167, 139, 250, 0.05) 175deg,
                    transparent 240deg,
                    rgba(186, 230, 253, 0.03) 300deg,
                    transparent 360deg),
                radial-gradient(ellipse 90% 70% at 65% 75%, rgba(0, 200, 255, 0.06) 0%, transparent 55%);
            animation: sanctuary-aurora-spin 56s linear infinite;
            opacity: 0.5;
            mix-blend-mode: screen;
        }
        html:not(.dark) .sanctuary-backdrop__aurora {
            opacity: 0.32;
            mix-blend-mode: multiply;
            background:
                conic-gradient(from 210deg at 50% 45%,
                    transparent 0deg,
                    rgba(167, 139, 250, 0.04) 55deg,
                    transparent 110deg,
                    rgba(14, 165, 233, 0.05) 175deg,
                    transparent 360deg),
                radial-gradient(ellipse 90% 70% at 65% 75%, rgba(14, 165, 233, 0.04) 0%, transparent 55%);
        }
        .sanctuary-backdrop__beams {
            position: absolute;
            inset: 0;
            z-index: 5;
            pointer-events: none;
            background: repeating-conic-gradient(
                from 0deg at 50% 35%,
                transparent 0deg 11deg,
                rgba(125, 211, 252, 0.022) 11deg 11.35deg
            );
            mask-image: radial-gradient(ellipse 95% 85% at 50% 32%, #000 8%, transparent 68%);
            -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 32%, #000 8%, transparent 68%);
            animation: sanctuary-beam-pulse 14s ease-in-out infinite;
            opacity: 0.85;
        }
        html:not(.dark) .sanctuary-backdrop__beams {
            background: repeating-conic-gradient(
                from 0deg at 50% 35%,
                transparent 0deg 11deg,
                rgba(100, 116, 139, 0.04) 11deg 11.35deg
            );
            opacity: 0.65;
        }
        .sanctuary-backdrop__sheen {
            position: absolute;
            inset: 0;
            z-index: 7;
            pointer-events: none;
            background: linear-gradient(
                102deg,
                transparent 0%,
                transparent 38%,
                rgba(255, 255, 255, 0.02) 48%,
                rgba(167, 139, 250, 0.045) 50%,
                rgba(0, 230, 255, 0.03) 51%,
                rgba(255, 255, 255, 0.015) 54%,
                transparent 65%,
                transparent 100%
            );
            background-size: 220% 100%;
            animation: sanctuary-sheen-sweep 26s ease-in-out infinite;
            mix-blend-mode: soft-light;
            opacity: 0.65;
        }
        html:not(.dark) .sanctuary-backdrop__sheen {
            opacity: 0.4;
            mix-blend-mode: overlay;
        }
        #sanctuary-backdrop #vortex-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 6;
        }
        .sanctuary-backdrop__base {
            position: absolute;
            inset: 0;
            z-index: 0;
            animation: sanctuary-breathe 14s ease-in-out infinite;
        }
        html.dark .sanctuary-backdrop__base {
            background:
                radial-gradient(ellipse 100% 80% at 50% 18%, rgba(167, 139, 250, 0.05) 0%, transparent 52%),
                radial-gradient(ellipse 90% 70% at 70% 85%, rgba(0, 200, 255, 0.035) 0%, transparent 50%),
                linear-gradient(168deg, #05070A 0%, #060b14 32%, #080f1a 68%, #05070A 100%);
        }
        .sanctuary-backdrop__gradient-flow {
            position: absolute;
            inset: -15%;
            z-index: 1;
            pointer-events: none;
            background:
                radial-gradient(ellipse 75% 55% at 22% 28%, rgba(167, 139, 250, 0.09) 0%, transparent 52%),
                radial-gradient(ellipse 65% 50% at 78% 72%, rgba(125, 211, 252, 0.07) 0%, transparent 55%);
            background-size: 120% 120%, 125% 125%;
            background-repeat: no-repeat;
            animation: sanctuary-liquid 32s ease-in-out infinite;
            opacity: 0.58;
            mix-blend-mode: screen;
        }
        html:not(.dark) .sanctuary-backdrop__gradient-flow {
            opacity: 0.45;
            mix-blend-mode: multiply;
            background:
                radial-gradient(ellipse 75% 55% at 22% 28%, rgba(167, 139, 250, 0.07) 0%, transparent 52%),
                radial-gradient(ellipse 65% 50% at 78% 72%, rgba(14, 165, 233, 0.05) 0%, transparent 55%);
        }
        .sanctuary-backdrop__cursor-glow {
            position: absolute;
            inset: 0;
            z-index: 8;
            pointer-events: none;
            background: radial-gradient(
                circle min(420px, 55vw) at var(--bg-mx) var(--bg-my),
                rgba(125, 211, 252, 0.085) 0%,
                rgba(167, 139, 250, 0.05) 38%,
                transparent 58%
            );
            opacity: 0.9;
            animation: sanctuary-cursor-halo 9s ease-in-out infinite;
        }
        html:not(.dark) .sanctuary-backdrop__cursor-glow {
            opacity: 0.55;
            background: radial-gradient(
                circle min(380px, 50vw) at var(--bg-mx) var(--bg-my),
                rgba(125, 211, 252, 0.06) 0%,
                rgba(14, 165, 233, 0.04) 40%,
                transparent 60%
            );
        }
        html:not(.dark) .sanctuary-backdrop__base {
            background: linear-gradient(168deg, #f5f7fa 0%, #eef1f7 40%, #e8f0f9 100%);
        }
        .sanctuary-backdrop__orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            will-change: transform;
            z-index: 3;
        }
        @keyframes sanctuary-float-a {
            0%, 100% { transform: translate(-6%, -8%) scale(1); }
            50% { transform: translate(5%, 6%) scale(1.06); }
        }
        @keyframes sanctuary-float-b {
            0%, 100% { transform: translate(8%, 18%) scale(1.04); }
            50% { transform: translate(-10%, -6%) scale(1); }
        }
        @keyframes sanctuary-float-c {
            0%, 100% { transform: translate(-12%, 28%) scale(1); }
            50% { transform: translate(6%, -10%) scale(1.1); }
        }
        html.dark .sanctuary-backdrop__orb--gold {
            width: min(90vw, 760px);
            height: min(90vw, 760px);
            top: -22%;
            left: 50%;
            transform: translateX(-50%);
            background: radial-gradient(circle, rgba(167, 139, 250, 0.22) 0%, transparent 65%);
            opacity: 0.42;
            animation: sanctuary-float-a 26s ease-in-out infinite, sanctuary-orb-pulse 22s ease-in-out infinite;
        }
        html.dark .sanctuary-backdrop__orb--cyan {
            width: min(70vw, 520px);
            height: min(70vw, 520px);
            bottom: -15%;
            right: -8%;
            background: radial-gradient(circle, rgba(0, 219, 231, 0.12) 0%, transparent 62%);
            opacity: 0.38;
            animation: sanctuary-float-b 32s ease-in-out infinite, sanctuary-orb-pulse 26s ease-in-out 2.5s infinite;
        }
        html.dark .sanctuary-backdrop__orb--navy {
            width: min(100vw, 900px);
            height: min(80vh, 640px);
            top: 35%;
            left: -25%;
            background: radial-gradient(circle, rgba(0, 29, 61, 0.45) 0%, transparent 70%);
            opacity: 0.52;
            animation: sanctuary-float-c 38s ease-in-out infinite, sanctuary-orb-pulse 30s ease-in-out 5s infinite;
        }
        html:not(.dark) .sanctuary-backdrop__orb--gold {
            width: min(85vw, 640px);
            height: min(85vw, 640px);
            top: -18%;
            left: 50%;
            transform: translateX(-50%);
            background: radial-gradient(circle, rgba(167, 139, 250, 0.10) 0%, transparent 68%);
            opacity: 0.45;
            animation: sanctuary-float-a 26s ease-in-out infinite, sanctuary-orb-pulse 22s ease-in-out infinite;
        }
        html:not(.dark) .sanctuary-backdrop__orb--cyan {
            width: min(65vw, 480px);
            height: min(65vw, 480px);
            bottom: -12%;
            right: -5%;
            background: radial-gradient(circle, rgba(99, 155, 210, 0.09) 0%, transparent 65%);
            opacity: 0.45;
            animation: sanctuary-float-b 32s ease-in-out infinite, sanctuary-orb-pulse 26s ease-in-out 2.5s infinite;
        }
        html:not(.dark) .sanctuary-backdrop__orb--navy {
            width: min(90vw, 720px);
            height: min(70vh, 520px);
            top: 40%;
            left: -20%;
            background: radial-gradient(circle, rgba(180, 195, 215, 0.18) 0%, transparent 72%);
            opacity: 0.4;
            animation: sanctuary-float-c 38s ease-in-out infinite, sanctuary-orb-pulse 30s ease-in-out 5s infinite;
        }
        .sanctuary-backdrop__grid {
            position: absolute;
            inset: 0;
            z-index: 4;
            background-size: 48px 48px;
            background-image:
                linear-gradient(rgba(125, 211, 252, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(125, 211, 252, 0.04) 1px, transparent 1px);
            mask-image: radial-gradient(ellipse 85% 70% at 50% 32%, #000 15%, transparent 72%);
            -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 32%, #000 15%, transparent 72%);
            opacity: 0.5;
            animation: sanctuary-grid-shimmer 12s ease-in-out infinite;
        }
        html:not(.dark) .sanctuary-backdrop__grid {
            background-image:
                linear-gradient(rgba(100, 116, 139, 0.07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(100, 116, 139, 0.055) 1px, transparent 1px);
            opacity: 0.4;
        }
        .sanctuary-backdrop__grain {
            position: absolute;
            inset: 0;
            z-index: 9;
            opacity: 0.035;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            pointer-events: none;
            animation: sanctuary-grain-shift 18s ease-in-out infinite;
        }
        html:not(.dark) .sanctuary-backdrop__grain {
            opacity: 0.025;
            animation-name: sanctuary-grain-shift-light;
        }
        @media (prefers-reduced-motion: reduce) {
            .sanctuary-backdrop__orb {
                animation: none !important;
            }
            .sanctuary-backdrop__gradient-flow {
                animation: none !important;
            }
            .sanctuary-backdrop__base {
                animation: none !important;
            }
            .sanctuary-backdrop__aurora,
            .sanctuary-backdrop__beams,
            .sanctuary-backdrop__sheen {
                animation: none !important;
            }
            .sanctuary-backdrop__grid {
                animation: none !important;
            }
            .sanctuary-backdrop__grain {
                animation: none !important;
            }
            .sanctuary-backdrop__cursor-glow {
                animation: none !important;
            }
            .hero-landing-ambient::before {
                animation: none !important;
            }
        }
        @media (max-width: 767px) {
            .sanctuary-backdrop__gradient-flow {
                animation: none;
                opacity: 0.5;
            }
            .sanctuary-backdrop__cursor-glow {
                opacity: 0 !important;
            }
            .sanctuary-backdrop__aurora {
                animation: none;
                opacity: 0.36;
            }
            .sanctuary-backdrop__beams {
                opacity: 0.5;
                animation: none;
            }
            .sanctuary-backdrop__sheen {
                animation: none;
                opacity: 0.35;
            }
            .sanctuary-backdrop__grid {
                animation: none;
            }
        }

        /* Hero landing — LOCALIZED BLACK BG (full viewport width, extends up to nav) with upward flying stars */
        #hero.hero-landing-ambient {
            position: relative;
            isolation: isolate;
            /* Premium Light Purple + Light Yellow — clean 2-tone gradient */
            background: linear-gradient(135deg, #FFF59D 0%, #FFE082 35%, #D1C4E9 65%, #B39DDB 100%) !important;
            /* Break out of parent's max-w-[1440px] container to span full viewport */
            margin-left: calc(50% - 50vw) !important;
            margin-right: calc(50% - 50vw) !important;
            /* Pull hero UP so the black band reaches right below the nav menu (closes the white gap).
               main has pt-48 (12rem); pulling up 10rem puts hero top at ~2rem (just below ticker/under nav).
               !important guards against Tailwind utilities overriding. */
            margin-top: -10rem !important;
            width: 100vw !important;
            max-width: 100vw !important;
            border-radius: 0 !important;
            overflow: hidden;
            min-height: 100vh !important;
            /* Padding-top compensates the negative margin so content stays vertically centered */
            padding-top: 16rem !important;
            padding-bottom: 6rem !important;
            /* Keep inner content aligned with rest of page (1440px container @ 1.5rem padding) */
            padding-left: max(1.5rem, calc((100vw - 1440px) / 2 + 1.5rem)) !important;
            padding-right: max(1.5rem, calc((100vw - 1440px) / 2 + 1.5rem)) !important;
            box-shadow: 0 30px 80px rgba(149, 117, 205, 0.22), inset 0 0 80px rgba(255, 224, 130, 0.12);
        }
        #hero.hero-landing-ambient::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: -240px;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(ellipse 60% 65% at 14% 28%, rgba(255, 224, 130, 0.48) 0%, transparent 62%),
                radial-gradient(ellipse 58% 60% at 88% 52%, rgba(179, 157, 219, 0.52) 0%, transparent 62%);
            animation: hero-ambient-glow 20s ease-in-out infinite;
        }
        html:not(.dark) #hero.hero-landing-ambient::before {
            background:
                radial-gradient(ellipse 60% 65% at 14% 28%, rgba(255, 224, 130, 0.55) 0%, transparent 62%),
                radial-gradient(ellipse 58% 60% at 88% 52%, rgba(179, 157, 219, 0.58) 0%, transparent 62%);
        }
        /* Flying stars layer — moves upward continuously */
        #hero.hero-landing-ambient::after {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: -240px;
            z-index: 0;
            pointer-events: none;
            background-image:
                radial-gradient(1.5px 1.5px at 12% 18%, #ffffff, transparent 60%),
                radial-gradient(1px 1px at 28% 65%, rgba(255, 255, 255, 0.85), transparent 60%),
                radial-gradient(1.5px 1.5px at 45% 25%, #FFD700, transparent 60%),
                radial-gradient(1px 1px at 62% 80%, #7DD3FC, transparent 60%),
                radial-gradient(2px 2px at 78% 35%, #ffffff, transparent 60%),
                radial-gradient(1px 1px at 88% 70%, rgba(255, 255, 255, 0.7), transparent 60%),
                radial-gradient(1.5px 1.5px at 8% 88%, #FFD700, transparent 60%),
                radial-gradient(1px 1px at 22% 42%, rgba(125, 211, 252, 0.85), transparent 60%),
                radial-gradient(1px 1px at 55% 12%, #ffffff, transparent 60%),
                radial-gradient(1.5px 1.5px at 70% 55%, rgba(255, 215, 0, 0.85), transparent 60%),
                radial-gradient(1px 1px at 35% 90%, #ffffff, transparent 60%),
                radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.6), transparent 60%),
                radial-gradient(1.5px 1.5px at 92% 18%, #7DD3FC, transparent 60%),
                radial-gradient(1px 1px at 5% 60%, rgba(255, 255, 255, 0.85), transparent 60%),
                radial-gradient(2px 2px at 38% 8%, rgba(255, 215, 0, 0.7), transparent 60%),
                radial-gradient(1px 1px at 82% 92%, #7DD3FC, transparent 60%);
            background-size: 100% 200%;
            background-repeat: repeat-y;
            animation: hero-stars-fly 14s linear infinite;
            opacity: 0.85;
        }
        @keyframes hero-stars-fly {
            from { background-position: 0% 100%; }
            to   { background-position: 0% -100%; }
        }
        @media (prefers-reduced-motion: reduce) {
            #hero.hero-landing-ambient::after { animation: none; }
        }
        #hero.hero-landing-ambient > * {
            position: relative;
            z-index: 1;
        }
        /* Text inside hero: light colors so they show on black background regardless of theme */
        #hero.hero-landing-ambient .hero-headline-fines {
            color: #7DD3FC !important;
            text-shadow: 0 0 30px rgba(125, 211, 252, 0.3);
        }
        #hero.hero-landing-ambient .text-slate-800 {
            color: #c8d2e0 !important;
        }
        #hero.hero-landing-ambient .hero-cta-secondary {
            background: rgba(255, 255, 255, 0.06) !important;
            border: 1px solid rgba(125, 211, 252, 0.35) !important;
            color: #FFD700 !important;
        }

        .glass-panel {
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(17, 20, 24, 0.45);
        }

        .holo-tag {
            background: linear-gradient(135deg, rgba(255,215,0,0.2) 0%, rgba(255,255,255,0.05) 100%);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 215, 0, 0.3);
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
        }

        /* 3D Theme Toggle Ritual */
        .theme-ritual-btn {
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .theme-ritual-btn.rotating { transform: rotateY(180deg); }
        /* Dashboard theme toggle — same rotating animation as landing page */
        #dash-theme-toggle.rotating {
            transform: rotateY(180deg);
            transition: transform 0.3s ease;
        }
        #dash-theme-toggle {
            transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
        }

        @keyframes ticker-scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .ticker-item-scroll {
            display: flex;
            width: max-content;
            animation: ticker-scroll 40s linear infinite;
        }

        .fine-ticker-scroll {
            display: flex;
            width: max-content;
            animation: ticker-scroll 15s linear infinite;
        }

        /* Squash & Stretch Interactions */
        .squishy-btn {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .squishy-btn:hover {
            transform: scale(1.05) translateY(-5px);
            box-shadow: 0 20px 40px rgba(255, 215, 0, 0.3);
        }
        .squishy-btn:active {
            transform: scale(0.92) translateY(2px);
        }

        .reveal-text-container { overflow: hidden; display: block; }
        .reveal-text-item {
            display: inline-block;
            opacity: 0;
            transform: translateY(110%);
            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-visible .reveal-text-item { opacity: 1; transform: translateY(0); }

        .vinyl-texture::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-radial-gradient(circle at center, transparent 0, transparent 2px, rgba(255,255,255,0.02) 3px, transparent 4px);
            pointer-events: none;
            border-radius: inherit;
        }

        .void-glow {
            text-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.3);
        }

        /* Card Reveal Ritual — fan on container hover */
        .ritual-container {
            perspective: 2000px;
        }
        /* Nudge the hero's right-side card stack up a little (desktop/tablet).
           margin-top is used (not transform) so the existing translate
           utilities on #hero-vortex-focal are preserved. */
        @media (min-width: 768px) {
            #hero-vortex-focal { margin-top: -9rem; }
        }
        .reveal-card {
            transition:
                transform 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.5s ease,
                z-index 0s linear 0s;
            pointer-events: none;
            z-index: 5;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        .ritual-container:hover .mulkiya-reveal {
            transform: translate(-20%, -40%) rotate(-12deg) scale(0.95);
            opacity: 1;
            pointer-events: auto;
            z-index: 2;
        }
        .ritual-container:hover .residency-reveal {
            transform: translate(40%, 40%) rotate(10deg) scale(0.95);
            opacity: 1;
            pointer-events: auto;
        }
        .main-card {
            position: relative;
            z-index: 10;
            transition:
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.45s ease,
                filter 0.45s ease;
        }
        .ritual-container:hover .main-card {
            transform: scale(1.02);
        }
        @media (prefers-reduced-motion: reduce) {
            .reveal-card,
            .main-card {
                transition-duration: 0.01ms !important;
            }
        }

        /* ════════════════════════════════════════════════════════════════
           HERO CARDS — AUTO FAN-OUT ON LANDING + HOVER-TO-FRONT
           ────────────────────────────────────────────────────────────────
           1) On page load, the side cards (Mulkiya + Residency) animate
              SLOW-MO from their stacked position to their fanned-out
              positions automatically — no hover required.
           2) Once fanned, the cards remain in place. Hovering an
              individual card brings it FRONT (higher z-index + slight
              scale-up + de-rotate) without affecting the others.
           ════════════════════════════════════════════════════════════════ */
        @keyframes tapxHeroMulkiyaFanIn {
            0%   { transform: translate(0, 0) rotate(0deg) scale(0.85); opacity: 0; }
            100% { transform: translate(-20%, -40%) rotate(-12deg) scale(0.95); opacity: 1; }
        }
        @keyframes tapxHeroResidencyFanIn {
            0%   { transform: translate(0, 0) rotate(0deg) scale(0.85); opacity: 0; }
            100% { transform: translate(40%, 40%) rotate(10deg) scale(0.95); opacity: 1; }
        }
        /* Triggered by JS adding .hero-fan-out class once on page load */
        .ritual-container.hero-fan-out .mulkiya-reveal {
            animation: tapxHeroMulkiyaFanIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
            pointer-events: auto !important;
        }
        .ritual-container.hero-fan-out .residency-reveal {
            animation: tapxHeroResidencyFanIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
            pointer-events: auto !important;
        }
        /* Persisted final positions (so the cards stay fanned after the
           keyframe animation completes — the `forwards` fill-mode handles
           it, but these explicit rules guarantee correctness against any
           later transform overrides). */
        .ritual-container.hero-fan-out .mulkiya-reveal:not(:hover) {
            transform: translate(-20%, -40%) rotate(-12deg) scale(0.95);
            opacity: 1;
        }
        .ritual-container.hero-fan-out .residency-reveal:not(:hover) {
            transform: translate(40%, 40%) rotate(10deg) scale(0.95);
            opacity: 1;
        }
        /* HOVER-TO-FRONT — whichever card the cursor enters is lifted
           to the top of the stack. Position (translate + rotate) is
           preserved exactly — card stays in its fanned location, only
           z-index raises and a subtle scale-up signals focus. */
        .ritual-container.hero-fan-out .reveal-card,
        .ritual-container.hero-fan-out .main-card {
            transition:
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s ease,
                box-shadow 0.4s ease;
        }
        .ritual-container.hero-fan-out .mulkiya-reveal:hover {
            transform: translate(-20%, -40%) rotate(-12deg) scale(1.02) !important;
            z-index: 200 !important;
            box-shadow: 0 60px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 215, 0, 0.18) !important;
            pointer-events: auto !important;
        }
        .ritual-container.hero-fan-out .residency-reveal:hover {
            transform: translate(40%, 40%) rotate(10deg) scale(1.02) !important;
            z-index: 200 !important;
            box-shadow: 0 60px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 215, 0, 0.18) !important;
            pointer-events: auto !important;
        }
        /* Golden Visa (main-card) — main-focus card: slightly larger (scale 1.0
           vs the other two at 0.95) with a very slight -2deg tilt, per reference. */
        .ritual-container.hero-fan-out .main-card:not(:hover) {
            transform: rotate(-2deg) scale(1.0);
        }
        .ritual-container.hero-fan-out .main-card:hover {
            transform: scale(1.04) !important;
            z-index: 200 !important;
            box-shadow: 0 60px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 215, 0, 0.18) !important;
            pointer-events: auto !important;
        }
        /* Disable the legacy container-hover rules so they don't fight
           the new hover-to-front behavior once fan-out is active. */
        .ritual-container.hero-fan-out:hover .mulkiya-reveal:not(:hover) {
            transform: translate(-20%, -40%) rotate(-12deg) scale(0.95);
        }
        .ritual-container.hero-fan-out:hover .residency-reveal:not(:hover) {
            transform: translate(40%, 40%) rotate(10deg) scale(0.95);
        }
        .ritual-container.hero-fan-out:hover .main-card:not(:hover) {
            transform: scale(1);
        }
        @media (prefers-reduced-motion: reduce) {
            .ritual-container.hero-fan-out .mulkiya-reveal,
            .ritual-container.hero-fan-out .residency-reveal {
                animation: none !important;
                transform: translate(-20%, -40%) rotate(-12deg) scale(0.95);
                opacity: 1;
            }
            .ritual-container.hero-fan-out .residency-reveal {
                transform: translate(40%, 40%) rotate(10deg) scale(0.95);
            }
        }

        /* Hero right-stack cards: solid white in dark mode */
        html.dark #hero-vortex-focal .residency-reveal {
            background-color: #ffffff !important;
            background-image: none !important;
        }
        html.dark #hero-vortex-focal .reveal-card,
        html.dark #hero-vortex-focal .main-card {
            background-color: #ffffff !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            color: #0f172a;
            box-shadow: 0 22px 55px rgba(0, 0, 0, 0.12) !important;
        }
        html.dark #hero-vortex-focal .vinyl-texture::before {
            opacity: 0.45;
        }
        html.dark #hero-vortex-focal .navy-depth-3d {
            color: #001d3d !important;
            text-shadow: none !important;
        }
        html.dark #hero-vortex-focal .text-primary {
            color: #ffd700 !important;
        }
        html.dark #hero-vortex-focal .text-on-surface {
            color: #475569 !important;
        }
        html.dark #hero-vortex-focal .material-symbols-outlined.text-on-surface {
            color: #334155 !important;
        }
        html.dark #hero-vortex-focal .main-card > div.absolute.inset-0 {
            background: linear-gradient(to bottom right, rgba(255, 215, 0, 0.1), transparent, rgba(255, 215, 0, 0.05)) !important;
            opacity: 1 !important;
        }
        html.dark #hero-vortex-focal .rounded-full.border.border-white\/10,
        html.dark #hero-vortex-focal .rounded-full.border-white\/10 {
            border-color: rgba(15, 23, 42, 0.12) !important;
        }
        /* Only small circles — NOT the reveal cards (they also used bg-white/5) */
        html.dark #hero-vortex-focal .rounded-full.bg-white\/5 {
            background-color: rgba(15, 23, 42, 0.06) !important;
        }
        html.dark #hero-vortex-focal .main-card .bg-surface-container {
            background-color: #c8d2e0 !important;
        }
        /* Cursor-follow white sheen on tilted hero cards (dark mode) */
        #hero-vortex-focal {
            --hero-sheen-x: 76%;
            --hero-sheen-y: 26%;
        }
        html.dark #hero-vortex-focal .reveal-card {
            overflow: hidden;
        }
        html.dark #hero-vortex-focal .reveal-card::after,
        html.dark #hero-vortex-focal .main-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            z-index: 11;
            background: radial-gradient(
                ellipse 90% 70% at var(--hero-sheen-x) var(--hero-sheen-y),
                rgba(255, 255, 255, 0.88) 0%,
                rgba(255, 255, 255, 0.35) 22%,
                rgba(255, 255, 255, 0.08) 42%,
                transparent 62%
            );
            mix-blend-mode: soft-light;
        }
        html.dark #hero-vortex-focal .main-card > .flex.relative.z-10,
        html.dark #hero-vortex-focal .main-card > div.flex.items-end.relative.z-10 {
            position: relative;
            z-index: 12;
        }
        html.dark #hero-vortex-focal .reveal-card > div {
            position: relative;
            z-index: 12;
        }

        /* Light mode: hero ID cards — dark blue surfaces; gold/pale text → blue/white for contrast */
        html:not(.dark) #hero-vortex-focal .main-card,
        html:not(.dark) #hero-vortex-focal .reveal-card {
            background: linear-gradient(155deg, #071a30 0%, #0c2744 48%, #051525 100%) !important;
            background-color: #0a2540 !important;
            border-color: rgba(59, 130, 246, 0.42) !important;
            backdrop-filter: blur(24px) saturate(150%);
            -webkit-backdrop-filter: blur(24px) saturate(150%);
            box-shadow:
                0 36px 72px rgba(2, 12, 32, 0.5),
                0 0 0 1px rgba(37, 99, 235, 0.12) !important;
            color: #c8d2e0;
        }
        html:not(.dark) #hero-vortex-focal .mulkiya-reveal {
            background: linear-gradient(150deg, #061b2e 0%, #082642 100%) !important;
            border-color: rgba(96, 165, 250, 0.38) !important;
        }
        html:not(.dark) #hero-vortex-focal .residency-reveal {
            background: linear-gradient(150deg, #051528 0%, #071f36 100%) !important;
            border-color: rgba(59, 130, 246, 0.32) !important;
        }
        html:not(.dark) #hero-vortex-focal .main-card > div.absolute.inset-0 {
            background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.18), transparent, rgba(30, 64, 175, 0.1)) !important;
            opacity: 1 !important;
        }
        /* Was gold / bright — now deep blue on dark blue cards */
        html:not(.dark) #hero-vortex-focal .text-primary {
            color: #1d4ed8 !important;
        }
        html:not(.dark) #hero-vortex-focal .main-card .font-headline.text-primary {
            color: #2563eb !important;
        }
        /* Main titles stay high-contrast on navy (not same as body “light” yellow) */
        html:not(.dark) #hero-vortex-focal .navy-depth-3d {
            color: #f8fafc !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
        }
        html:not(.dark) #hero-vortex-focal .text-on-surface {
            color: #1e40af !important;
        }
        html:not(.dark) #hero-vortex-focal .material-symbols-outlined.text-on-surface {
            color: #1d4ed8 !important;
        }
        /* Pale / low-contrast labels → blue family */
        html:not(.dark) #hero-vortex-focal p.text-\[8px\].uppercase.opacity-40,
        html:not(.dark) #hero-vortex-focal p.text-\[9px\].uppercase.opacity-40 {
            color: #1e3a8a !important;
            opacity: 0.92 !important;
        }
        html:not(.dark) #hero-vortex-focal p.text-\[9px\].uppercase.opacity-60 {
            color: #172554 !important;
            opacity: 0.9 !important;
        }
        html:not(.dark) #hero-vortex-focal .font-bold.text-xs {
            color: #c8d2e0 !important;
        }
        html:not(.dark) #hero-vortex-focal .font-bold.text-base {
            color: #dbeafe !important;
        }
        html:not(.dark) #hero-vortex-focal .rounded-full.border.border-white\/10,
        html:not(.dark) #hero-vortex-focal .rounded-full.border-white\/10 {
            border-color: rgba(30, 64, 175, 0.35) !important;
        }
        html:not(.dark) #hero-vortex-focal .rounded-full.bg-white\/5 {
            background-color: rgba(30, 58, 138, 0.12) !important;
        }
        html:not(.dark) #hero-vortex-focal .main-card .bg-surface-container {
            background-color: #dbeafe !important;
        }
        html:not(.dark) #hero-vortex-focal .main-card .border-white\/10 {
            border-color: rgba(37, 99, 235, 0.28) !important;
        }
        html:not(.dark) #hero-vortex-focal .holo-tag {
            background: linear-gradient(135deg, rgba(23, 37, 84, 0.92) 0%, rgba(15, 23, 42, 0.88) 100%);
            border: 1px solid rgba(59, 130, 246, 0.45);
            box-shadow: 0 8px 28px rgba(15, 23, 42, 0.35);
            color: #c8d2e0 !important;
        }
        html:not(.dark) #hero-vortex-focal .holo-tag.text-primary,
        html:not(.dark) #hero-vortex-focal .holo-tag .material-symbols-outlined {
            color: #9fc0e8 !important;
        }

        /* ═══ HERO CARDS — professional sky/violet palette (was yellow) ═══ */
        #hero-mulkiya-card,
        #hero-residency-card,
        #hero-golden-access-card {
            background: linear-gradient(135deg, #7DD3FC 0%, #BAE6FD 28%, #E0F2FE 52%, #DDD6FE 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
            box-shadow: 0 30px 80px rgba(30, 64, 175, 0.22), 0 0 50px rgba(125, 211, 252, 0.28) !important;
        }
        #hero-golden-access-card {
            background: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 22%, #BAE6FD 65%, #7DD3FC 100%) !important;
            box-shadow: 0 50px 100px rgba(30, 58, 138, 0.3), 0 0 60px rgba(167, 139, 250, 0.32) !important;
        }
        #hero-residency-card {
            background: linear-gradient(135deg, #BAE6FD 0%, #E0F2FE 40%, #DDD6FE 75%, #A78BFA 100%) !important;
        }
        /* Inner overlay on Golden Access main card */
        #hero-golden-access-card > .absolute.inset-0 {
            background: linear-gradient(135deg, rgba(167, 139, 250, 0.18) 0%, transparent 50%, rgba(186, 230, 253, 0.18) 100%) !important;
        }
        /* Text contrast — headlines white, labels dark navy, status light blue */
        #hero-mulkiya-card .navy-depth-3d,
        #hero-residency-card .navy-depth-3d,
        #hero-golden-access-card .navy-depth-3d {
            color: #FFFFFF !important;
            text-shadow: 0 2px 6px rgba(0, 29, 61, 0.55), 0 1px 2px rgba(0, 0, 0, 0.35) !important;
        }
        #hero-mulkiya-card p,
        #hero-residency-card p,
        #hero-golden-access-card p {
            color: #001D3D !important;
        }
        /* Status line "VERIFIED · ICP SYNC" → light blue / cyan */
        #hero-golden-access-card .font-bold.text-sm,
        #hero-golden-access-card .font-bold.text-base,
        #hero-mulkiya-card .font-bold.text-sm,
        #hero-residency-card .font-bold.text-sm {
            color: #0EA5E9 !important;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) !important;
        }
        #hero-mulkiya-card .text-primary,
        #hero-residency-card .text-primary,
        #hero-golden-access-card .text-primary {
            color: #002366 !important;
        }
        #hero-mulkiya-card span.material-symbols-outlined.text-primary,
        #hero-residency-card span.material-symbols-outlined.text-primary,
        #hero-golden-access-card span.material-symbols-outlined.text-primary {
            color: #002366 !important;
        }
        #hero-mulkiya-card .opacity-40,
        #hero-mulkiya-card .opacity-60,
        #hero-residency-card .opacity-40,
        #hero-residency-card .opacity-60,
        #hero-golden-access-card .opacity-40,
        #hero-golden-access-card .opacity-60 {
            color: rgba(0, 29, 61, 0.78) !important;
            opacity: 1 !important;
        }
        /* Small circle/photo borders */
        #hero-mulkiya-card .bg-white\/5,
        #hero-residency-card .bg-white\/5,
        #hero-golden-access-card .bg-white\/5 {
            background-color: rgba(255, 255, 255, 0.45) !important;
        }
        #hero-mulkiya-card .border-white\/10,
        #hero-residency-card .border-white\/10,
        #hero-golden-access-card .border-white\/10 {
            border-color: rgba(0, 29, 61, 0.25) !important;
        }
        /* Holo tags — dark navy bg, LIGHT BLUE text (matches image 1) */
        #hero-vortex-focal .holo-tag {
            background: linear-gradient(135deg, #001D3D 0%, #002366 100%) !important;
            border: 1px solid rgba(125, 211, 252, 0.55) !important;
            color: #7DD3FC !important;
            box-shadow: 0 8px 24px rgba(0, 29, 61, 0.45), 0 0 18px rgba(56, 189, 248, 0.18) !important;
        }
        #hero-vortex-focal .holo-tag .material-symbols-outlined,
        #hero-vortex-focal .holo-tag.text-primary {
            color: #7DD3FC !important;
        }

        input:focus, textarea:focus {
            outline: none;
            border-color: #FFD700 !important;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
        }

        /* 3D Dropdown Physics */
        .dropdown-trigger {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            perspective: 1000px;
        }
        .dropdown-menu {
            transform-origin: top center;
            transform: scaleY(0) translateY(-20px);
            opacity: 0;
            pointer-events: none;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
        }
        .dropdown-active .dropdown-menu {
            transform: scaleY(1) translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        .dropdown-item {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .dropdown-item:hover {
            transform: translateX(10px) translateZ(20px);
            background: rgba(255, 215, 0, 0.1);
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
        }
        .dropdown-item::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .dropdown-item:hover::after {
            opacity: 1;
        }

        /* Quick Action form: no pointer tilt — stable card (also covered by .fine-check-form-card) */
        #form-vortex-focal {
            transform: none !important;
            perspective: none;
        }
        /* Check Fines card width — kept here (in index.html) so it never depends
           on a separate stylesheet upload. Left-anchored; reduces from the right. */
        @media (min-width: 1024px) {
            #quick-action-hub #form-vortex-focal {
                max-width: 36rem !important;
                width: 100% !important;
                margin-right: auto !important;
                margin-left: 0 !important;
            }
        }
        /* Vehicle tab: Mobile and Email are their own cells, paired side-by-side
           (2-per-row). Force both to a clean single column so they sit together. */
        #fines-free-vehicle-panel > #ff-veh-w-name,
        #fines-free-vehicle-panel > #ff-veh-w-lookup,
        #fines-free-vehicle-panel > #ff-veh-w-note {
            grid-column: 1 / -1 !important;
        }
        #fines-free-vehicle-panel > #ff-veh-w-mobile,
        #fines-free-vehicle-panel > #ff-veh-w-email {
            grid-column: auto / span 1 !important;
            width: 100% !important;
            max-width: 100% !important;
            align-self: start !important;
            box-sizing: border-box !important;
        }
        #fines-free-vehicle-panel > #ff-veh-w-mobile input,
        #fines-free-vehicle-panel > #ff-veh-w-mobile .fine-phone-combo-row,
        #fines-free-vehicle-panel > #ff-veh-w-mobile #ph-mount-ff-veh,
        #fines-free-vehicle-panel > #ff-veh-w-email input[type="email"] {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        /* Dropdown inside white cards: drop parent perspective so rows stay visually level */
        .fine-check-form-card .dropdown-trigger {
            perspective: none;
        }
        .fine-check-form-card .dropdown-item:hover {
            transform: none;
        }

        /* Quick Action hero copy — also used in #fine-check-hub left column after swap */
        html.dark .quick-action-hub .compliance-pill,
        html.dark #fine-check-hub .compliance-pill {
            background: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, rgba(14, 165, 233, 0.08) 100%);
            border: 1px solid rgba(125, 211, 252, 0.35);
            box-shadow: 0 0 24px rgba(56, 189, 248, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }
        html.dark .quick-action-hub .immortality-gradient,
        html.dark #fine-check-hub .immortality-gradient {
            background-image: linear-gradient(105deg, #FFD700 0%, #E8C547 35%, #B8860B 65%, #6B4E1E 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        html.dark .quick-action-hub .quick-action-body,
        html.dark #fine-check-hub .quick-action-body {
            color: rgba(203, 213, 225, 0.92);
        }
        html.dark .quick-action-hub .one-click-line,
        html.dark #fine-check-hub .one-click-line {
            color: rgba(248, 250, 252, 0.98);
        }
        html:not(.dark) .quick-action-hub .immortality-gradient,
        html:not(.dark) #fine-check-hub .immortality-gradient {
            background-image: linear-gradient(105deg, #FFD700 0%, #C9A227 45%, #6B4E1E 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        html:not(.dark) .quick-action-hub .one-click-line,
        html:not(.dark) #fine-check-hub .one-click-line {
            color: #001D3D;
        }
        html:not(.dark) .quick-action-hub .quick-action-body,
        html:not(.dark) #fine-check-hub .quick-action-body {
            color: #334155;
        }

        /* ── Hide the LEFT column (hero copy) of the Quick Action + Fine Check
           Free cards; center the remaining form column. ── */
        #fine-check-hub .lg\:grid-cols-12 > .order-1,
        #quick-action-hub .lg\:grid-cols-12 > .order-1 { display: none !important; }
        @media (min-width: 1024px) {
            #fine-check-hub .lg\:grid-cols-12 > .order-2,
            #quick-action-hub .lg\:grid-cols-12 > .order-2 {
                grid-column: 1 / -1 !important;
                max-width: 880px;
                margin-left: auto !important;
                margin-right: 0 !important;
                padding-left: 0 !important;
            }
            /* Fines Check Free: place the form card on the LEFT */
            #quick-action-hub .lg\:grid-cols-12 > .order-2 {
                margin-left: 0 !important;
                margin-right: auto !important;
            }
        }

        /* Fines Check Free — left column hook + service flip */
        #quick-action-hub .ff-hub-flip__hook {
            margin-bottom: 0.4rem;
        }
        #quick-action-hub .ff-hub-hook-line {
            display: block;
            font-size: clamp(1.875rem, 4.5vw, 2.75rem);
            font-weight: 900;
            letter-spacing: -0.04em;
            line-height: 1;
            font-family: var(--font-headline, ui-sans-serif, system-ui);
        }
        #quick-action-hub .ff-hub-hook-sub {
            font-size: 0.8125rem;
            font-weight: 700;
            line-height: 1.45;
            color: #64748b;
            max-width: 26rem;
        }
        html.dark #quick-action-hub .ff-hub-hook-sub {
            color: rgba(148, 163, 184, 0.95);
        }
        #quick-action-hub .ff-hub-flip-gap {
            min-height: 2.75rem;
            flex-shrink: 0;
        }
        @media (min-width: 640px) {
            #quick-action-hub .ff-hub-flip-gap {
                min-height: 3.5rem;
            }
        }
        @media (min-width: 1024px) {
            #quick-action-hub .ff-hub-flip-gap {
                min-height: 4.75rem;
            }
        }
        @media (min-width: 1280px) {
            #quick-action-hub .ff-hub-flip-gap {
                min-height: 5.75rem;
            }
        }
        #quick-action-hub .ff-hub-flip {
            width: 100%;
            max-width: 26rem;
        }
        @media (min-width: 1024px) {
            #quick-action-hub .ff-hub-flip {
                max-width: none;
            }
        }
        #quick-action-hub .ff-hub-flip__viewport {
            position: relative;
            width: 100%;
            min-height: 20rem;
            perspective: 1280px;
        }
        @media (min-width: 640px) {
            #quick-action-hub .ff-hub-flip__viewport {
                min-height: 21.5rem;
            }
        }
        #quick-action-hub .ff-hub-flip__stack {
            position: relative;
            width: 100%;
            min-height: inherit;
            transform-style: preserve-3d;
        }
        #quick-action-hub .ff-hub-flip__panel {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            text-align: left;
            padding: 1.25rem 1.35rem 1.45rem;
            border-radius: 1.75rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: linear-gradient(160deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.82) 45%, rgba(25, 22, 12, 0.9) 100%);
            box-shadow:
                0 22px 50px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 215, 0, 0.1) inset,
                0 0 36px rgba(255, 215, 0, 0.05);
            opacity: 0;
            transform: rotateY(-22deg) translateZ(-32px) scale(0.95);
            transform-origin: 50% 50%;
            transition:
                opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.72s ease;
            pointer-events: none;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        html:not(.dark) #quick-action-hub .ff-hub-flip__panel {
            background: linear-gradient(168deg, #ffffff 0%, #f8fafc 50%, #f5f7fa 100%);
            border-color: rgba(15, 23, 42, 0.08);
            box-shadow:
                0 18px 44px rgba(15, 23, 42, 0.07),
                0 0 0 1px rgba(15, 23, 42, 0.06) inset;
        }
        #quick-action-hub .ff-hub-flip__panel.is-active {
            opacity: 1;
            transform: rotateY(0) translateZ(0) scale(1);
            pointer-events: auto;
            z-index: 4;
            box-shadow:
                0 26px 54px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(255, 215, 0, 0.2) inset,
                0 0 40px rgba(255, 215, 0, 0.09);
        }
        html:not(.dark) #quick-action-hub .ff-hub-flip__panel.is-active {
            box-shadow:
                0 22px 48px rgba(15, 23, 42, 0.1),
                0 0 0 1px rgba(15, 23, 42, 0.07) inset;
        }
        #quick-action-hub .ff-hub-flip__eyebrow {
            font-size: 0.5625rem;
            font-weight: 900;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: rgba(255, 215, 0, 0.92);
            margin-bottom: 0.45rem;
        }
        html:not(.dark) #quick-action-hub .ff-hub-flip__eyebrow {
            color: #b45309;
        }
        #quick-action-hub .ff-hub-flip__title {
            font-size: 1.125rem;
            font-weight: 900;
            font-family: var(--font-headline, ui-sans-serif, system-ui);
            letter-spacing: -0.02em;
            line-height: 1.18;
            color: #f8fafc;
            margin-bottom: 0.45rem;
        }
        html:not(.dark) #quick-action-hub .ff-hub-flip__title {
            color: #0f172a;
        }
        #quick-action-hub .ff-hub-flip__lead {
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.5;
            color: rgba(203, 213, 225, 0.9);
            margin-bottom: 0.65rem;
        }
        html:not(.dark) #quick-action-hub .ff-hub-flip__lead {
            color: #475569;
        }
        #quick-action-hub .ff-hub-flip__list {
            list-style: none;
            margin: 0 0 0.85rem;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }
        #quick-action-hub .ff-hub-flip__list li {
            display: flex;
            align-items: flex-start;
            gap: 0.4rem;
            font-size: 0.625rem;
            font-weight: 700;
            color: rgba(226, 232, 240, 0.94);
            line-height: 1.38;
        }
        html:not(.dark) #quick-action-hub .ff-hub-flip__list li {
            color: #334155;
        }
        #quick-action-hub .ff-hub-flip__list li .material-symbols-outlined {
            font-size: 0.9375rem;
            color: #ffd700;
            margin-top: 0.04rem;
            flex-shrink: 0;
        }
        html:not(.dark) #quick-action-hub .ff-hub-flip__list li .material-symbols-outlined {
            color: #ca8a04;
        }
        #quick-action-hub .ff-hub-flip__cta {
            margin-top: auto;
            width: 100%;
            border-radius: 9999px;
            padding: 0.6rem 0.95rem;
            font-size: 0.5625rem;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            background: linear-gradient(135deg, #ffd700 0%, #eab308 52%, #ca8a04 100%);
            color: #0a0a0a;
            box-shadow: 0 8px 24px rgba(255, 215, 0, 0.32);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        #quick-action-hub .ff-hub-flip__cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(255, 215, 0, 0.42);
        }
        #quick-action-hub .ff-hub-flip__nav {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.4rem;
            margin-top: 1.15rem;
            flex-wrap: wrap;
        }
        #quick-action-hub .ff-hub-flip__dot {
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 9999px;
            border: none;
            padding: 0;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.18);
            transition: transform 0.25s ease, background 0.25s ease, width 0.25s ease;
        }
        html:not(.dark) #quick-action-hub .ff-hub-flip__dot {
            background: rgba(15, 23, 42, 0.18);
        }
        #quick-action-hub .ff-hub-flip__dot.is-active {
            background: #ffd700;
            width: 1.2rem;
            transform: scaleY(1.08);
        }
        #quick-action-hub .ff-hub-flip__dot:focus-visible {
            outline: 2px solid rgba(255, 215, 0, 0.65);
            outline-offset: 3px;
        }
        #quick-action-hub .ff-hub-flip__icon-wrap {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.875rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.55rem;
            background: rgba(255, 215, 0, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.26);
        }
        #quick-action-hub .ff-hub-flip__icon-wrap .material-symbols-outlined {
            font-size: 1.35rem;
            color: #ffd700;
        }
        html:not(.dark) #quick-action-hub .ff-hub-flip__icon-wrap {
            background: rgba(255, 215, 0, 0.14);
            border-color: rgba(202, 138, 4, 0.32);
        }
        html:not(.dark) #quick-action-hub .ff-hub-flip__icon-wrap .material-symbols-outlined {
            color: #b45309;
        }
        @media (prefers-reduced-motion: reduce) {
            #quick-action-hub .ff-hub-flip__panel {
                position: relative;
                opacity: 1 !important;
                transform: none !important;
                pointer-events: auto !important;
                margin-bottom: 1rem;
            }
            #quick-action-hub .ff-hub-flip__stack {
                position: static;
                display: flex;
                flex-direction: column;
                gap: 0;
                min-height: 0 !important;
            }
            #quick-action-hub .ff-hub-flip__viewport {
                min-height: 0 !important;
            }
            #quick-action-hub .ff-hub-flip__nav {
                display: none;
            }
        }

        /* Service flip — hook headline (ONE TAP / SANCTUARY style) */
        #fine-check-hub .qa-service-flip__hook {
            margin-bottom: 0.35rem;
        }
        #fine-check-hub .qa-service-flip__hook .qa-hook-line {
            display: block;
            font-size: clamp(2.125rem, 5.5vw, 3rem);
            font-weight: 900;
            letter-spacing: -0.04em;
            line-height: 0.98;
        }
        @keyframes qa-flip-icon-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }
        @keyframes qa-flip-icon-pop {
            0% { transform: scale(0.88) rotate(-8deg); opacity: 0.65; }
            70% { transform: scale(1.05) rotate(2deg); opacity: 1; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }
        @keyframes qa-flip-li-in {
            from {
                opacity: 0;
                transform: translateX(-14px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        #fine-check-hub .qa-service-flip__panel.is-active .qa-service-flip__icon-wrap {
            animation: qa-flip-icon-float 3.2s ease-in-out infinite;
        }
        #fine-check-hub .qa-service-flip__panel.is-active .qa-service-flip__icon-wrap.qa-icon-anim-pop {
            animation: qa-flip-icon-pop 0.75s cubic-bezier(0.34, 1.45, 0.64, 1) both, qa-flip-icon-float 3.2s ease-in-out 0.75s infinite;
        }
        #fine-check-hub .qa-service-flip__panel.is-active .qa-service-flip__list li.qa-li-anim {
            animation: qa-flip-li-in 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        #fine-check-hub .qa-service-flip__panel.is-active .qa-service-flip__list li.qa-li-anim:nth-child(1) {
            animation-delay: 0.12s;
        }
        #fine-check-hub .qa-service-flip__panel.is-active .qa-service-flip__list li.qa-li-anim:nth-child(2) {
            animation-delay: 0.22s;
        }
        #fine-check-hub .qa-service-flip__panel.is-active .qa-service-flip__list li.qa-li-anim:nth-child(3) {
            animation-delay: 0.32s;
        }
        #fine-check-hub .qa-service-flip__dot:focus-visible {
            outline: 2px solid rgba(255, 215, 0, 0.65);
            outline-offset: 3px;
        }
        #fine-check-hub .qa-service-flip__dot:focus:not(:focus-visible) {
            outline: none;
        }

        /* Quick Action — auto-rotating service flip (left of main card) */
        #fine-check-hub .qa-service-flip {
            width: 100%;
            max-width: 28rem;
        }
        @media (min-width: 1024px) {
            #fine-check-hub .qa-service-flip {
                max-width: none;
            }
        }
        #fine-check-hub .qa-service-flip__viewport {
            position: relative;
            width: 100%;
            min-height: 19rem;
            perspective: 1200px;
        }
        @media (min-width: 640px) {
            #fine-check-hub .qa-service-flip__viewport {
                min-height: 20.5rem;
            }
        }
        #fine-check-hub .qa-service-flip__stack {
            position: relative;
            width: 100%;
            min-height: inherit;
            transform-style: preserve-3d;
        }
        #fine-check-hub .qa-service-flip__panel {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            text-align: left;
            padding: 1.35rem 1.35rem 1.5rem;
            border-radius: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: linear-gradient(155deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.78) 50%, rgba(30, 27, 15, 0.85) 100%);
            box-shadow:
                0 24px 48px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(255, 215, 0, 0.12) inset,
                0 0 40px rgba(255, 215, 0, 0.06);
            opacity: 0;
            transform: rotateY(-28deg) translateZ(-40px) scale(0.94);
            transform-origin: 50% 50%;
            transition:
                opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.75s ease;
            pointer-events: none;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        html:not(.dark) #fine-check-hub .qa-service-flip__panel {
            background: linear-gradient(165deg, #ffffff 0%, #f8fafc 45%, #f5f7fa 100%);
            border-color: rgba(15, 23, 42, 0.1);
            box-shadow:
                0 20px 40px rgba(15, 23, 42, 0.08),
                0 0 0 1px rgba(15, 23, 42, 0.06) inset;
        }
        #fine-check-hub .qa-service-flip__panel.is-active {
            opacity: 1;
            transform: rotateY(0) translateZ(0) scale(1);
            pointer-events: auto;
            z-index: 4;
            box-shadow:
                0 28px 56px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 215, 0, 0.22) inset,
                0 0 48px rgba(255, 215, 0, 0.1);
        }
        html:not(.dark) #fine-check-hub .qa-service-flip__panel.is-active {
            box-shadow:
                0 24px 48px rgba(15, 23, 42, 0.12),
                0 0 0 1px rgba(15, 23, 42, 0.07) inset;
        }
        #fine-check-hub .qa-service-flip__eyebrow {
            font-size: 0.625rem;
            font-weight: 900;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255, 215, 0, 0.95);
            margin-bottom: 0.5rem;
        }
        html:not(.dark) #fine-check-hub .qa-service-flip__eyebrow {
            color: #b45309;
        }
        #fine-check-hub .qa-service-flip__title {
            font-size: 1.25rem;
            font-weight: 900;
            font-family: var(--font-headline, ui-sans-serif, system-ui);
            letter-spacing: -0.02em;
            line-height: 1.15;
            color: #f8fafc;
            margin-bottom: 0.5rem;
        }
        html:not(.dark) #fine-check-hub .qa-service-flip__title {
            color: #0f172a;
        }
        #fine-check-hub .qa-service-flip__lead {
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.5;
            color: rgba(203, 213, 225, 0.9);
            margin-bottom: 0.75rem;
        }
        html:not(.dark) #fine-check-hub .qa-service-flip__lead {
            color: #475569;
        }
        #fine-check-hub .qa-service-flip__list {
            list-style: none;
            margin: 0 0 1rem;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }
        #fine-check-hub .qa-service-flip__list li {
            display: flex;
            align-items: flex-start;
            gap: 0.45rem;
            font-size: 0.6875rem;
            font-weight: 700;
            color: rgba(226, 232, 240, 0.95);
            line-height: 1.4;
        }
        html:not(.dark) #fine-check-hub .qa-service-flip__list li {
            color: #334155;
        }
        #fine-check-hub .qa-service-flip__list li .material-symbols-outlined {
            font-size: 1rem;
            color: #ffd700;
            margin-top: 0.05rem;
            flex-shrink: 0;
        }
        html:not(.dark) #fine-check-hub .qa-service-flip__list li .material-symbols-outlined {
            color: #ca8a04;
        }
        #fine-check-hub .qa-service-flip__cta {
            margin-top: auto;
            width: 100%;
            border-radius: 9999px;
            padding: 0.65rem 1rem;
            font-size: 0.625rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            background: linear-gradient(135deg, #ffd700 0%, #eab308 50%, #ca8a04 100%);
            color: #0a0a0a;
            box-shadow: 0 10px 28px rgba(255, 215, 0, 0.35);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        #fine-check-hub .qa-service-flip__cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 36px rgba(255, 215, 0, 0.45);
        }
        #fine-check-hub .qa-service-flip__nav {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.45rem;
            margin-top: 1.25rem;
        }
        #fine-check-hub .qa-service-flip__dot {
            width: 0.45rem;
            height: 0.45rem;
            border-radius: 9999px;
            border: none;
            padding: 0;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.2);
            transition: transform 0.25s ease, background 0.25s ease, width 0.25s ease;
        }
        html:not(.dark) #fine-check-hub .qa-service-flip__dot {
            background: rgba(15, 23, 42, 0.2);
        }
        #fine-check-hub .qa-service-flip__dot.is-active {
            background: #ffd700;
            width: 1.35rem;
            transform: scaleY(1.1);
        }
        #fine-check-hub .qa-service-flip__icon-wrap {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.65rem;
            background: rgba(255, 215, 0, 0.12);
            border: 1px solid rgba(255, 215, 0, 0.28);
        }
        #fine-check-hub .qa-service-flip__icon-wrap .material-symbols-outlined {
            font-size: 1.5rem;
            color: #ffd700;
        }
        html:not(.dark) #fine-check-hub .qa-service-flip__icon-wrap {
            background: rgba(255, 215, 0, 0.15);
            border-color: rgba(202, 138, 4, 0.35);
        }
        html:not(.dark) #fine-check-hub .qa-service-flip__icon-wrap .material-symbols-outlined {
            color: #b45309;
        }
        @media (prefers-reduced-motion: reduce) {
            #fine-check-hub .qa-service-flip__panel {
                position: relative;
                opacity: 1 !important;
                transform: none !important;
                pointer-events: auto !important;
                margin-bottom: 1rem;
            }
            #fine-check-hub .qa-service-flip__panel:not(:first-child) {
                margin-top: 0;
            }
            #fine-check-hub .qa-service-flip__stack {
                position: static;
                display: flex;
                flex-direction: column;
                gap: 0;
                min-height: 0 !important;
            }
            #fine-check-hub .qa-service-flip__viewport {
                min-height: 0 !important;
            }
            #fine-check-hub .qa-service-flip__nav {
                display: none;
            }
            #fine-check-hub .qa-service-flip__panel.is-active .qa-service-flip__icon-wrap,
            #fine-check-hub .qa-service-flip__panel.is-active .qa-service-flip__icon-wrap.qa-icon-anim-pop {
                animation: none !important;
            }
            #fine-check-hub .qa-service-flip__panel.is-active .qa-service-flip__list li.qa-li-anim {
                animation: none !important;
            }
        }

        /* Fine Check Form (below Quick Action) */
        /* Whole block flat — no inherited 3D / filter skew on the white card */
        .fine-check-section {
            transform: none !important;
            filter: none !important;
            perspective: none !important;
            transform-style: flat !important;
        }
        .fine-check-shell {
            background: transparent;
            border-radius: 3rem;
            border: 1px solid rgba(255, 255, 255, 0.06);
            box-shadow: none;
            transform: none !important;
            filter: none !important;
            perspective: none !important;
        }
        .fine-check-shell > .grid {
            min-width: 0;
            width: 100%;
        }
        .fine-check-shell > .grid > * {
            min-width: 0;
        }
        @media (min-width: 1024px) {
            .fine-check-shell { border-radius: 3.5rem; }
        }
        /* ─── Fines Check result box animation ─── */
        @keyframes tapxFadeInUp {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        #fines-check-results { animation: tapxFadeInUp .4s ease-out; }
        .fine-check-form-card {
            background-color: #ffffff !important;
            background-image: none !important;
            border: 1px solid rgba(15, 23, 42, 0.08);
            border-radius: 2.75rem;
            /* Symmetric shadow — heavy one-side shadow can read as “tilt” */
            box-shadow:
                0 4px 6px -1px rgba(0, 0, 0, 0.06),
                0 14px 36px -6px rgba(0, 0, 0, 0.1);
            color-scheme: light;
            transform: none !important;
            transform-style: flat !important;
            perspective: none !important;
            filter: none !important;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        .fine-check-form-card input,
        .fine-check-form-card select,
        .fine-check-form-card textarea,
        .fine-check-form-card .fine-check-tab-track,
        .fine-check-form-card .grid {
            transform: none !important;
        }
        .fine-check-form-card::before,
        .fine-check-form-card::after {
            content: none !important;
            display: none !important;
        }
        .fine-check-form-card form {
            background: transparent !important;
            background-image: none !important;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            margin: 0;
        }
        .fine-check-form-card .fine-check-label {
            margin-left: 0 !important;
        }
        @media (min-width: 640px) {
            .fine-check-form-card { border-radius: 3rem; }
        }
        /* Dropdowns only: dark navy — pill / oval fields */
        .fine-check-input-dark,
        .fine-check-form-card select.fine-check-input-dark {
            background: #0F172A;
            color: #c8d2e0;
            border: 1px solid rgba(15, 23, 42, 0.85);
            border-radius: 9999px;
            min-height: 3rem;
        }
        .fine-check-input-dark:focus {
            outline: none;
            border-color: #FFD700;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.22);
        }
        .fine-check-input-dark::placeholder {
            color: rgba(148, 163, 184, 0.85);
        }
        .fine-check-form-card select.fine-check-input-dark {
            appearance: none;
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.85rem center;
            background-size: 1.125rem;
            padding-right: 2.75rem;
        }
        /* Text / phone: light fields — full pill (override Tailwind forms defaults) */
        .fine-check-form-card input.fine-check-field-light,
        .fine-check-form-card input[type="text"].fine-check-field-light,
        .fine-check-form-card input[type="tel"].fine-check-field-light,
        .fine-check-form-card input[type="email"].fine-check-field-light,
        .fine-check-form-card input[type="date"].fine-check-field-light {
            background: #ffffff !important;
            color: #000000 !important;
            border: 1px solid rgba(15, 23, 42, 0.2) !important;
            border-radius: 9999px !important;
            min-height: 3rem;
            -webkit-appearance: none;
            appearance: none;
        }
        .fine-check-form-card input.fine-check-field-light::placeholder,
        .fine-check-form-card textarea.fine-check-field-light::placeholder {
            color: #94a3b8 !important;
            -webkit-text-fill-color: #94a3b8 !important;
            opacity: 1;
        }
        /* Category (datalist) fields — match typed text / caret to other light pills (WebKit can differ on list inputs) */
        .fine-check-form-card input.fine-check-field-light[list] {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
            caret-color: #000000;
        }
        .fine-check-form-card input.fine-check-field-light[list]::placeholder {
            color: #94a3b8 !important;
            -webkit-text-fill-color: #94a3b8 !important;
        }
        .fine-check-form-card input.fine-check-field-light:focus {
            outline: none !important;
            border-color: #FFD700 !important;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18) !important;
            border-radius: 9999px !important;
        }
        .fine-check-form-card input[type='date'].fine-check-field-light:invalid::-webkit-datetime-edit,
        .fine-check-form-card input[type='date'].fine-check-field-light:invalid::-webkit-datetime-edit-fields-wrapper,
        .fine-check-form-card input[type='date'].fine-check-field-light:invalid::-webkit-datetime-edit-text,
        .fine-check-form-card input[type='date'].fine-check-field-light:invalid::-webkit-datetime-edit-month-field,
        .fine-check-form-card input[type='date'].fine-check-field-light:invalid::-webkit-datetime-edit-day-field,
        .fine-check-form-card input[type='date'].fine-check-field-light:invalid::-webkit-datetime-edit-year-field {
            color: #94a3b8;
        }
        .fine-check-form-card input[type='date'].fine-check-field-light:valid::-webkit-datetime-edit,
        .fine-check-form-card input[type='date'].fine-check-field-light:valid::-webkit-datetime-edit-fields-wrapper,
        .fine-check-form-card input[type='date'].fine-check-field-light:valid::-webkit-datetime-edit-text,
        .fine-check-form-card input[type='date'].fine-check-field-light:valid::-webkit-datetime-edit-month-field,
        .fine-check-form-card input[type='date'].fine-check-field-light:valid::-webkit-datetime-edit-day-field,
        .fine-check-form-card input[type='date'].fine-check-field-light:valid::-webkit-datetime-edit-year-field {
            color: #000000;
        }
        .fine-check-form-card textarea.fine-check-field-light {
            background: #ffffff !important;
            color: #000000 !important;
            border: 1px solid rgba(15, 23, 42, 0.2) !important;
            border-radius: 2.5rem !important;
            min-height: 6.25rem;
            resize: none;
            -webkit-appearance: none;
            appearance: none;
        }
        .fine-check-form-card textarea.fine-check-field-light:focus {
            outline: none !important;
            border-color: #FFD700 !important;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18) !important;
        }
        .fine-check-label {
            color: #64748b;
            letter-spacing: 0.18em;
            line-height: 1.25;
        }
        /* Two-column rows: equal-height cells; label band + controls bottom-aligned = one straight input line */
        .fine-check-form-card form .grid {
            align-items: stretch;
        }
        .fine-check-form-card form .grid > *:not(.grid) {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: stretch;
            min-width: 0;
            min-height: 0;
            width: 100%;
        }
        .fine-check-form-card form .grid .fine-check-label {
            min-height: 2.625rem;
            display: flex;
            align-items: flex-end;
            margin-bottom: 0.35rem;
            margin-left: 0 !important;
            padding-left: 0;
            line-height: 1.2;
        }
        .fine-check-form-card form .grid .space-y-1 > input,
        .fine-check-form-card form .grid .space-y-1 > select,
        .fine-check-form-card form .grid .space-y-2 > input,
        .fine-check-form-card form .grid .space-y-2 > select {
            width: 100%;
            margin-top: 0;
        }
        /* Match select + text input height & box model (stops right column looking “low”) */
        .fine-check-form-card select.fine-check-input-dark {
            height: 3rem;
            min-height: 3rem;
            max-height: 3rem;
            box-sizing: border-box;
            line-height: 1.35;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            vertical-align: middle;
        }
        .fine-check-form-card input.fine-check-field-light,
        .fine-check-form-card input[type="text"].fine-check-field-light,
        .fine-check-form-card input[type="tel"].fine-check-field-light,
        .fine-check-form-card input[type="email"].fine-check-field-light,
        .fine-check-form-card input[type="date"].fine-check-field-light {
            height: 3rem !important;
            max-height: 3rem !important;
            box-sizing: border-box !important;
            line-height: 1.35 !important;
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
        }
        .fine-check-form-card .fine-check-submit {
            transform: none !important;
            width: 100%;
            box-sizing: border-box;
        }
        .fine-check-form-card .fine-check-submit:hover,
        .fine-check-form-card .fine-check-submit:active {
            transform: none !important;
        }
        .fine-check-tab-track {
            background: #0F172A;
            border-radius: 9999px;
            padding: 5px;
        }
        .fine-check-tab {
            flex: 1;
            text-align: center;
            padding: 0.7rem 1rem;
            border-radius: 9999px;
            font-size: 0.6875rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            transition: background 0.2s ease, color 0.2s ease;
            cursor: pointer;
            border: none;
            font-family: inherit;
        }
        .fine-check-tab.active {
            background: #FFD700;
            color: #0a0a0a;
        }
        .fine-check-tab:not(.active) {
            background: transparent;
            color: #cbd5e1;
        }
        .fine-check-submit {
            border-radius: 9999px;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(255, 215, 0, 0.15);
        }
        .fine-check-submit:hover {
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(255, 215, 0, 0.25);
        }
        .fine-check-status-card {
            background: transparent;
            border: none;
            border-radius: 2.5rem;
        }

        .vortex-showcase-pipeline {
            position: relative;
        }
        .vortex-showcase-pipeline::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(255, 255, 255, 0.06), rgba(0, 219, 231, 0.22));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        .vortex-pipe-icon-ring {
            background: rgba(255, 215, 0, 0.15);
            border: 1px solid rgba(255, 215, 0, 0.35);
        }
        .vortex-pipe-step {
            transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease, background 0.35s ease;
        }
        .vortex-pipe-step:hover {
            border-color: rgba(255, 215, 0, 0.38) !important;
            box-shadow: 0 0 36px rgba(255, 215, 0, 0.12);
            transform: translateY(-2px);
            background: rgba(255, 215, 0, 0.06) !important;
        }
        .vortex-bento-cell {
            transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
        }
        .vortex-bento-cell:hover {
            border-color: rgba(255, 215, 0, 0.42) !important;
            box-shadow: 0 18px 52px rgba(255, 215, 0, 0.14);
            transform: translateY(-3px);
        }
        @keyframes vortex-pulse-line {
            0%,
            100% {
                opacity: 0.35;
            }
            50% {
                opacity: 0.9;
            }
        }
        .vortex-pipe-join {
            animation: vortex-pulse-line 3.2s ease-in-out infinite;
        }
        .vortex-pipe-join--delayed {
            animation-delay: 0.55s;
        }
        .vortex-pipe-join-v {
            animation: vortex-pulse-line 3.2s ease-in-out infinite;
        }
        .vortex-pipe-join-v--delayed {
            animation-delay: 0.55s;
        }

        /* Light mode: Sanctuary tier cards — keep ORIGINAL background.
           Only fix the text inside that was white/light → make it readable
           (black/slate-900) in light mode. Gold price + amber/yellow accents
           preserved as gold. */
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier],
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] p,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] span,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] li,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] h1,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] h2,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] h3,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] h4,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] div,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] label,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] small,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] strong {
            color: #0f172a !important;   /* slate-900 — dark readable text */
        }
        /* Specifically target Tailwind "text-white" / "text-on-*" utility classes
           that were producing white/light text on a light background */
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] .text-white,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] .text-slate-100,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] .text-slate-200,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] .text-slate-300,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] .text-on-surface,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] .text-on-surface-variant,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] [class*="text-on-surface"] {
            color: #0f172a !important;
        }
        /* Preserve the gold/primary accent on prices + highlights */
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] .text-primary,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] .text-primary *:not(svg):not(path),
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] [class*="text-amber"],
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] [class*="text-yellow"] {
            color: #FFD700 !important;
        }
        /* Dirham glyph SVG fills stay gold */
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] .text-primary svg,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] .text-primary svg path {
            fill: #FFD700 !important;
        }
        /* Tier buttons — primary CTA gold, others dark text */
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] button {
            color: #0f172a !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] button.text-primary,
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] button[data-tier-quote-open],
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] button .text-primary {
            color: #FFD700 !important;
        }
        /* Client tier CTAs — keep each button its own metal colour with
           readable text (overrides the gold-text rule above). */
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] button[data-tier-quote-open="startup"],
        #sanctuary-tiers .glass-panel button[data-tier-quote-open="startup"] {
            background: linear-gradient(135deg,#cd7f32 0%,#8b4513 100%) !important;
            color: #000 !important;   /* Choose Bronze — black text */
        }
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] button[data-tier-quote-open="growth"],
        #sanctuary-tiers .glass-panel button[data-tier-quote-open="growth"] {
            background: linear-gradient(135deg,#e8e8e8 0%,#8a8a8a 100%) !important;
            color: #1e293b !important;   /* Choose Silver — silver button, dark text */
        }
        html:not(.dark) #sanctuary-tiers .glass-panel[data-sanctuary-tier] button[data-tier-quote-open="scale"],
        #sanctuary-tiers .glass-panel button[data-tier-quote-open="scale"] {
            background: linear-gradient(135deg,#FFD700 0%,#b8860b 100%) !important;
            color: #000 !important;   /* Choose Gold — gold button, black text */
        }
        /* Old broken selector block removed — never matched the actual DOM
           because of the extra #tapx-user-tiers wrapper. The new
           data-attribute-based rules above handle this correctly. */
        #sanctuary-tiers .sanctuary-per-head-track {
            position: relative;
            display: inline-flex;
            width: 2.75rem;
            height: 1.375rem;
            flex-shrink: 0;
            align-items: center;
            border-radius: 9999px;
            border: 1px solid rgba(148, 163, 184, 0.45);
            background: rgba(15, 23, 42, 0.35);
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        html:not(.dark) #sanctuary-tiers .sanctuary-per-head-track {
            background: rgba(226, 232, 240, 0.95);
            border-color: rgba(59, 130, 246, 0.35);
        }
        #sanctuary-tiers .sanctuary-per-head-switch.is-active .sanctuary-per-head-track {
            background: rgba(74, 222, 128, 0.22) !important;
            border-color: rgba(74, 222, 128, 0.65) !important;
            box-shadow: 0 0 14px rgba(74, 222, 128, 0.35) !important;
        }
        html:not(.dark) #sanctuary-tiers .sanctuary-per-head-switch.is-active .sanctuary-per-head-track {
            background: rgba(74, 222, 128, 0.25) !important;
            border-color: rgba(34, 197, 94, 0.6) !important;
            box-shadow: 0 0 14px rgba(34, 197, 94, 0.32) !important;
        }
        #sanctuary-tiers .sanctuary-per-head-knob {
            position: absolute;
            top: 2px;
            left: 3px;
            width: 0.9375rem;
            height: 0.9375rem;
            border-radius: 50%;
            background: #c8d2e0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
            transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
        }
        #sanctuary-tiers .sanctuary-per-head-switch.is-active .sanctuary-per-head-knob {
            transform: translateX(1.125rem);
            background: #4ade80 !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 0 8px rgba(74, 222, 128, 0.55) !important;
        }
        html:not(.dark) #sanctuary-tiers .sanctuary-per-head-switch.is-active .sanctuary-per-head-knob {
            background: linear-gradient(145deg, #86efac, #22c55e) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 0 8px rgba(34, 197, 94, 0.5) !important;
        }
        html:not(.dark) #sanctuary-tiers h3.navy-depth-3d:not(.text-primary) {
            color: #f8fafc !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
        }
        html:not(.dark) #sanctuary-tiers h3.text-primary.navy-depth-3d {
            color: #9fc0e8 !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
        html:not(.dark) #sanctuary-tiers .glass-panel > p.text-slate-600 {
            color: #cbd5e1 !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel .bg-primary\/5 {
            background-color: rgba(255, 255, 255, 0.06) !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel .border-primary\/20 {
            border-color: rgba(96, 165, 250, 0.35) !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel .border-primary\/30 {
            border-color: rgba(129, 140, 248, 0.45) !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel .text-primary:not(button) {
            color: #7dd3fc !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel div.w-28.h-28.bg-primary {
            background: linear-gradient(145deg, #3b82f6, #1d4ed8) !important;
            box-shadow: 0 18px 48px rgba(29, 78, 216, 0.45) !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel div.w-28.h-28.bg-primary .text-background-dark {
            color: #ffffff !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel > .absolute.bg-primary {
            background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
            color: #ffffff !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel .bg-primary\/10 {
            background: rgba(30, 58, 138, 0.45) !important;
            border-color: rgba(96, 165, 250, 0.4) !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel .bg-primary\/10 .text-on-surface {
            color: #c8d2e0 !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel .bg-primary\/10 .text-primary {
            color: #9fc0e8 !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel button.border-primary\/30.text-primary {
            color: #c8d2e0 !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel button.border-primary\/30.text-primary:hover {
            background: #2563eb !important;
            color: #ffffff !important;
            border-color: #2563eb !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel button.bg-primary.text-background-dark {
            background: linear-gradient(145deg, #3b82f6, #1d4ed8) !important;
            color: #ffffff !important;
            box-shadow: 0 14px 36px rgba(29, 78, 216, 0.4) !important;
        }
        html:not(.dark) #sanctuary-tiers .sanctuary-tier-price .text-slate-500,
        html:not(.dark) #sanctuary-tiers .sanctuary-tier-price .text-slate-600 {
            color: #94a3b8 !important;
        }
        /* Light mode: force all tier-card text to white (cards use dark navy bg in light mode) */
        html:not(.dark) #sanctuary-tiers .glass-panel,
        html:not(.dark) #sanctuary-tiers .glass-panel p,
        html:not(.dark) #sanctuary-tiers .glass-panel li,
        html:not(.dark) #sanctuary-tiers .glass-panel span,
        html:not(.dark) #sanctuary-tiers .glass-panel h3,
        html:not(.dark) #sanctuary-tiers .glass-panel h4 {
            color: #ffffff !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel .text-slate-500,
        html:not(.dark) #sanctuary-tiers .glass-panel .text-slate-600,
        html:not(.dark) #sanctuary-tiers .glass-panel .text-slate-700,
        html:not(.dark) #sanctuary-tiers .glass-panel .text-slate-800,
        html:not(.dark) #sanctuary-tiers .glass-panel .text-slate-900 {
            color: #ffffff !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel ul li span {
            color: #ffffff !important;
        }
        html:not(.dark) #sanctuary-tiers .sanctuary-tier-billing-toggle,
        html:not(.dark) #sanctuary-tiers .sanctuary-tier-billing-toggle span {
            color: #c8d2e0 !important;
        }
        html:not(.dark) #sanctuary-tiers .sanctuary-tier-billing-toggle:hover {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.08) !important;
        }
        html:not(.dark) #sanctuary-tiers .sanctuary-per-head-switch span {
            color: #ffffff !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel > p.text-slate-600 {
            color: #c8d2e0 !important;
        }
        /* Keep gold/primary tier labels visible */
        html:not(.dark) #sanctuary-tiers h3.text-primary.navy-depth-3d {
            color: #bcd3f0 !important;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel .text-primary:not(button):not(h3) {
            color: #bcd3f0 !important;
        }
        #sanctuary-tiers .sanctuary-tier-billing-toggle {
            display: block;
            width: 100%;
            margin: 0;
            padding: 0.2rem 0.25rem;
            border: 0;
            border-radius: 0.5rem;
            background: transparent;
            font: inherit;
            line-height: inherit;
            text-align: center;
            cursor: pointer;
            transition: color 0.15s ease, background-color 0.15s ease;
        }
        #sanctuary-tiers .sanctuary-tier-billing-toggle:hover {
            color: rgb(51 65 85);
            background: rgba(255, 255, 255, 0.04);
        }
        .dark #sanctuary-tiers .sanctuary-tier-billing-toggle:hover {
            color: rgb(226 232 240);
            background: rgba(255, 255, 255, 0.06);
        }
        #sanctuary-tiers .sanctuary-tier-billing-toggle:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.45);
        }
        /* Annual billing: per-employee block + employee/vehicle cap lines switch to yearly wording */
        #sanctuary-tiers [data-sanctuary-tier].sanctuary-tier--annual .sanctuary-per-employee-period--monthly {
            display: none !important;
        }
        #sanctuary-tiers [data-sanctuary-tier].sanctuary-tier--annual .sanctuary-per-employee-period--annual {
            display: block !important;
        }
        /* FAQs */
        .faq-item {
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 1.5rem;
            background: rgba(255, 255, 255, 0.03);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .faq-item[open] {
            border-color: rgba(255, 215, 0, 0.25);
            box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.08);
        }
        .faq-item summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.35rem 1.5rem;
            font-weight: 800;
            font-size: 1.0625rem;
            line-height: 1.5;
            color: #f8fafc;
        }
        @media (min-width: 640px) {
            .faq-item summary { font-size: 1.125rem; padding: 1.5rem 1.65rem; }
        }
        @media (min-width: 1024px) {
            .faq-item summary { font-size: 1.1875rem; }
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::marker { content: ''; }
        .faq-item .faq-chevron {
            flex-shrink: 0;
            color: #FFD700;
            font-size: 1.5rem;
            transition: transform 0.25s ease;
            margin-top: 0.1rem;
        }
        @media (min-width: 640px) {
            .faq-item .faq-chevron { font-size: 1.75rem; }
        }
        .faq-item[open] .faq-chevron { transform: rotate(180deg); }
        .faq-item .faq-answer {
            padding: 0 1.5rem 1.5rem;
            margin-top: -0.25rem;
            font-size: 1.0625rem;
            line-height: 1.75;
            color: #cbd5e1;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            padding-top: 1.1rem;
        }
        @media (min-width: 640px) {
            .faq-item .faq-answer { font-size: 1.125rem; padding-left: 1.65rem; padding-right: 1.65rem; padding-bottom: 1.65rem; }
        }
        html:not(.dark) .faq-item {
            background: rgba(15, 23, 42, 0.04);
            border-color: rgba(15, 23, 42, 0.1);
        }
        html:not(.dark) .faq-item summary { color: #0f172a; }
        html:not(.dark) .faq-item .faq-answer { color: #475569; }
        html:not(.dark) .faq-item[open] { border-color: rgba(234, 179, 8, 0.45); }

        /* Fines Check Free card — compact padding + tighter field gaps */
        #form-vortex-focal.fine-check-form-card {
            padding-top: 0.75rem !important;
            padding-bottom: 0.75rem !important;
            padding-left: 0.9rem !important;
            padding-right: 0.9rem !important;
        }
        @media (min-width: 640px) {
            #form-vortex-focal.fine-check-form-card {
                padding-top: 0.9rem !important;
                padding-bottom: 0.9rem !important;
                padding-left: 1.05rem !important;
                padding-right: 1.05rem !important;
            }
        }
        @media (min-width: 1024px) {
            #form-vortex-focal.fine-check-form-card {
                padding-top: 1rem !important;
                padding-bottom: 1rem !important;
                padding-left: 1.15rem !important;
                padding-right: 1.15rem !important;
            }
        }
        #form-vortex-focal.fine-check-form-card #fines-check-free-form .grid,
        #form-vortex-focal.fine-check-form-card #fines-check-free-form .ff-veh-panel-grid {
            align-items: stretch;
            row-gap: 0.2rem !important;
            column-gap: 0.35rem !important;
        }
        @media (min-width: 768px) {
            #form-vortex-focal.fine-check-form-card #fines-check-free-form .grid,
            #form-vortex-focal.fine-check-form-card #fines-check-free-form .ff-veh-panel-grid {
                row-gap: 0.24rem !important;
                column-gap: 0.42rem !important;
            }
        }
        #form-vortex-focal.fine-check-form-card #fines-check-free-form #fines-free-visa-panel.grid,
        #form-vortex-focal.fine-check-form-card #fines-check-free-form #fines-free-trade-panel.grid,
        #form-vortex-focal.fine-check-form-card #fines-check-free-form #ff-veh-w-contact {
            gap: 0.2rem 0.35rem !important;
        }
        /* ── EMAIL WIDTH: per user request, make the Email field wider than
           Mobile in the Vehicle tab. Override the default 50/50 grid with
           a 1fr / 2fr ratio — Mobile keeps a compact width sufficient for
           the country-code combo, Email gets twice the width for full
           addresses. Applies on all viewports (selectors with high
           specificity needed to beat the Tailwind grid-cols-2 utility). */
        #fines-check-free-form #ff-veh-w-contact,
        #form-vortex-focal.fine-check-form-card #fines-check-free-form #ff-veh-w-contact {
            grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
        }
        @media (min-width: 640px) {
            #form-vortex-focal.fine-check-form-card #fines-check-free-form #fines-free-visa-panel.grid,
            #form-vortex-focal.fine-check-form-card #fines-check-free-form #fines-free-trade-panel.grid,
            #form-vortex-focal.fine-check-form-card #fines-check-free-form #ff-veh-w-contact {
                gap: 0.24rem 0.42rem !important;
            }
        }
        @media (min-width: 768px) {
            #form-vortex-focal.fine-check-form-card #fines-check-free-form #fines-free-visa-panel.grid,
            #form-vortex-focal.fine-check-form-card #fines-check-free-form #fines-free-trade-panel.grid,
            #form-vortex-focal.fine-check-form-card #fines-check-free-form #ff-veh-w-contact {
                gap: 0.28rem 0.48rem !important;
            }
        }
        #form-vortex-focal.fine-check-form-card #fines-check-free-form .col-span-2.grid.grid-cols-2 {
            gap: 0.2rem 0.35rem !important;
        }
        @media (min-width: 640px) {
            #form-vortex-focal.fine-check-form-card #fines-check-free-form .col-span-2.grid.grid-cols-2 {
                gap: 0.24rem 0.42rem !important;
            }
        }
        @media (min-width: 768px) {
            #form-vortex-focal.fine-check-form-card #fines-check-free-form .col-span-2.grid.grid-cols-2 {
                gap: 0.28rem 0.48rem !important;
            }
        }
        /* ═══ USER REQUEST ═══
           Force the contact block (Mobile + Email row) to ALWAYS span the
           full width of its parent grid, and to use two equal-width
           columns inside — matching the layout of Emirate + Type fields.
           This overrides any inline gridColumn the layouts script may set
           (the legacy 'span 2 / span 2' syntax is ambiguous and was
           collapsing into a single column in some placements).
           Targets all 3 tabs:
             • Vehicle: #ff-veh-w-contact
             • Visa:    .col-span-2.grid.grid-cols-2 inside #fines-free-visa-panel
             • Trade:   any .col-span-2 children inside #fines-free-trade-panel */
        #fines-check-free-form #ff-veh-w-contact,
        #fines-check-free-form #fines-free-visa-panel  > .col-span-2.grid.grid-cols-2,
        #fines-check-free-form #fines-free-trade-panel > .col-span-2.grid.grid-cols-2 {
            grid-column: 1 / -1 !important;
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        #fines-check-free-form #ff-veh-w-contact > *,
        #fines-check-free-form #fines-free-visa-panel  > .col-span-2.grid.grid-cols-2 > *,
        #fines-check-free-form #fines-free-trade-panel > .col-span-2.grid.grid-cols-2 > * {
            min-width: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        /* Make the phone combo row and email input stretch to fill their column */
        #fines-check-free-form #ff-veh-w-contact .fine-phone-combo-row,
        #fines-check-free-form #ff-veh-w-contact input[type="email"],
        #fines-check-free-form #fines-free-visa-panel  .fine-phone-combo-row,
        #fines-check-free-form #fines-free-visa-panel  input[type="email"],
        #fines-check-free-form #fines-free-trade-panel .fine-phone-combo-row,
        #fines-check-free-form #fines-free-trade-panel input[type="email"] {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        /* Phone mount points should also fill their column */
        #fines-check-free-form #ph-mount-ff-veh,
        #fines-check-free-form #ph-mount-ff-visa,
        #fines-check-free-form #ph-mount-ff-trade,
        #fines-check-free-form #fines-free-phone-wrap {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }
        #form-vortex-focal.fine-check-form-card form#fines-check-free-form .grid .fine-check-label,
        #form-vortex-focal.fine-check-form-card #fines-check-free-form .ff-veh-panel-grid .fine-check-label {
            min-height: 1.45rem !important;
            margin-bottom: 0.06rem !important;
        }
        #form-vortex-focal.fine-check-form-card #fines-check-free-form > * + * {
            margin-top: 0.22rem !important;
        }
        @media (min-width: 640px) {
            #form-vortex-focal.fine-check-form-card #fines-check-free-form > * + * {
                margin-top: 0.28rem !important;
            }
        }
        #form-vortex-focal.fine-check-form-card #fines-check-free-form .space-y-1 > * + * {
            margin-top: 0.08rem !important;
        }
        #form-vortex-focal.fine-check-form-card #fines-check-free-form .ff-veh-panel-grid > .ff-veh-block:not(.grid) {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            min-width: 0;
        }
        #form-vortex-focal.fine-check-form-card .fine-phone-combo-row {
            height: 2.125rem !important;
            min-height: 2.125rem !important;
            max-height: 2.125rem !important;
            box-sizing: border-box !important;
            align-items: stretch !important;
        }
        #fine-check-main-card.fine-check-form-card .fine-phone-combo-row {
            height: 2.15rem !important;
            min-height: 2.15rem !important;
            max-height: 2.15rem !important;
            box-sizing: border-box !important;
            align-items: stretch !important;
        }
        #form-vortex-focal.fine-check-form-card .fine-check-tab-track {
            padding: 2px !important;
            margin-bottom: 0.18rem !important;
        }
        #form-vortex-focal.fine-check-form-card .fine-check-tab {
            padding: 0.4rem 0.6rem !important;
            font-size: 0.6875rem !important;
        }
        #form-vortex-focal.fine-check-form-card input.fine-check-field-light,
        #form-vortex-focal.fine-check-form-card input[type="text"].fine-check-field-light,
        #form-vortex-focal.fine-check-form-card input[type="tel"].fine-check-field-light,
        #form-vortex-focal.fine-check-form-card input[type="email"].fine-check-field-light,
        #form-vortex-focal.fine-check-form-card input[type="date"].fine-check-field-light {
            min-height: 2.125rem !important;
            height: 2.125rem !important;
            max-height: 2.125rem !important;
            padding-top: 0.22rem !important;
            padding-bottom: 0.22rem !important;
            padding-left: 0.85rem !important;
            padding-right: 0.85rem !important;
            font-size: 0.8125rem !important;
        }
        #form-vortex-focal.fine-check-form-card select.fine-check-input-dark {
            min-height: 2.125rem !important;
            height: 2.125rem !important;
            max-height: 2.125rem !important;
            padding-top: 0.22rem !important;
            padding-bottom: 0.22rem !important;
            padding-left: 0.85rem !important;
            padding-right: 2rem !important;
            font-size: 0.8125rem !important;
            line-height: 1.3;
            background-size: 1rem;
            background-position: right 0.6rem center;
        }
        /* Fines Check Free (light): same white pill look as text fields */
        html:not(.dark) #form-vortex-focal.fine-check-form-card #fines-check-free-form select.fine-check-input-dark {
            background-color: #ffffff !important;
            color: #000000 !important;
            border: 1px solid rgba(15, 23, 42, 0.2) !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: right 0.6rem center !important;
            background-size: 1rem !important;
        }
        html:not(.dark) #form-vortex-focal.fine-check-form-card #fines-check-free-form select.fine-check-input-dark:focus {
            border-color: #ffd700 !important;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18) !important;
            outline: none !important;
        }
        /* Quick Action (main card): light theme — white fields + black text (matches Fines Check Free selects) */
        html:not(.dark) #fine-check-main-card.fine-check-form-card select.fine-check-input-dark {
            background-color: #ffffff !important;
            color: #000000 !important;
            border: 1px solid rgba(15, 23, 42, 0.2) !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: right 0.65rem center !important;
            background-size: 1rem !important;
        }
        html:not(.dark) #fine-check-main-card.fine-check-form-card select.fine-check-input-dark:focus {
            border-color: #ffd700 !important;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18) !important;
            outline: none !important;
        }
        html:not(.dark) #fine-check-main-card.fine-check-form-card .searchable-select-trigger.fine-check-input-dark {
            background-color: #ffffff !important;
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
            caret-color: #000000 !important;
            border-color: rgba(15, 23, 42, 0.2) !important;
        }
        html:not(.dark) #fine-check-main-card.fine-check-form-card .searchable-select-trigger.fine-check-input-dark:focus,
        html:not(.dark) #fine-check-main-card.fine-check-form-card .searchable-select-trigger.fine-check-input-dark:focus-visible {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }
        html:not(.dark) #fine-check-main-card.fine-check-form-card .searchable-select-trigger.fine-check-input-dark::placeholder {
            color: #94a3b8 !important;
            -webkit-text-fill-color: #94a3b8 !important;
            opacity: 1;
        }
        /* Feedback card priority searchable-select: visible white value on the dark field + dropdown list on top */
        #cs-feedback-card .searchable-select-trigger { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff !important; }
        #cs-feedback-card .searchable-select-trigger::placeholder { color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; opacity: 1; }
        #cs-feedback-card .searchable-select-chev,
        #cs-feedback-card .searchable-select-chev .material-symbols-outlined { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
        #cs-feedback-card .searchable-select-wrap { overflow: visible !important; }
        /* Open the priority list UPWARD (the field sits at the card bottom) and force it above everything */
        #cs-feedback-card .searchable-select-panel { z-index: 100000 !important; top: auto !important; bottom: calc(100% + 6px) !important; box-shadow: 0 -14px 40px rgba(0,0,0,0.28) !important; }
            color: #000000 !important;
        }
        html:not(.dark) .fine-check-form-card .fine-phone-combo-row input[type='tel'][id$='phone-digits']::placeholder {
            color: #94a3b8 !important;
            -webkit-text-fill-color: #94a3b8 !important;
            opacity: 1;
        }
        html:not(.dark) .fine-check-form-card .fine-phone-combo-row .fine-phone-cc-trigger {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }
        html:not(.dark) #form-vortex-focal.fine-check-form-card .searchable-select-trigger.fine-check-input-dark {
            background-color: #ffffff !important;
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
            caret-color: #000000 !important;
            border-color: rgba(15, 23, 42, 0.2) !important;
        }
        html:not(.dark) #form-vortex-focal.fine-check-form-card .searchable-select-trigger.fine-check-input-dark:focus,
        html:not(.dark) #form-vortex-focal.fine-check-form-card .searchable-select-trigger.fine-check-input-dark:focus-visible {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }
        html:not(.dark) #form-vortex-focal.fine-check-form-card .searchable-select-trigger.fine-check-input-dark::placeholder {
            color: #94a3b8 !important;
            -webkit-text-fill-color: #94a3b8 !important;
            opacity: 1;
        }
        /* Dark theme: searchable combobox — black field, cyan outline, light text (matches dashboard) */
        html.dark #fine-check-main-card.fine-check-form-card .searchable-select-trigger.fine-check-input-dark,
        html.dark #form-vortex-focal.fine-check-form-card .searchable-select-trigger.fine-check-input-dark {
            background-color: #181818 !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #f8fafc !important;
            -webkit-text-fill-color: #f8fafc !important;
            caret-color: #f8fafc !important;
        }
        html.dark #fine-check-main-card.fine-check-form-card .searchable-select-trigger.fine-check-input-dark::placeholder,
        html.dark #form-vortex-focal.fine-check-form-card .searchable-select-trigger.fine-check-input-dark::placeholder {
            color: rgba(148, 163, 184, 0.92) !important;
            -webkit-text-fill-color: rgba(148, 163, 184, 0.92) !important;
            opacity: 1 !important;
        }
        html.dark #fine-check-main-card.fine-check-form-card .searchable-select-trigger.fine-check-input-dark:focus,
        html.dark #fine-check-main-card.fine-check-form-card .searchable-select-trigger.fine-check-input-dark:focus-visible,
        html.dark #form-vortex-focal.fine-check-form-card .searchable-select-trigger.fine-check-input-dark:focus,
        html.dark #form-vortex-focal.fine-check-form-card .searchable-select-trigger.fine-check-input-dark:focus-visible {
            color: #f8fafc !important;
            -webkit-text-fill-color: #f8fafc !important;
            border-color: rgba(255, 255, 255, 0.22) !important;
            box-shadow: none !important;
        }
        /* Fines Check Free: hide (optional) / (required) / hint text after labels */
        #fines-check-free-form label .ff-free-label-paren,
        #fines-check-free-form label #ff-veh-emirate-hint,
        #fines-check-free-form label #ff-veh-plate-opt,
        #fines-check-free-form label #ff-veh-plate-code-opt,
        #fines-check-free-form label #ff-veh-tc-label-opt,
        #fines-check-free-form label #ff-veh-eid-opt {
            display: none !important;
        }
        #form-vortex-focal.fine-check-form-card textarea.fine-check-field-light {
            min-height: 2.4rem !important;
            max-height: 3.5rem;
            padding-top: 0.3rem !important;
            padding-bottom: 0.3rem !important;
            font-size: 0.8125rem !important;
            line-height: 1.35 !important;
        }
        #form-vortex-focal.fine-check-form-card .fine-check-submit {
            padding-top: 0.55rem !important;
            padding-bottom: 0.55rem !important;
            font-size: 0.75rem !important;
        }
        @media (min-width: 640px) {
            #form-vortex-focal.fine-check-form-card .fine-check-submit {
                font-size: 0.875rem !important;
            }
        }
        #form-vortex-focal.fine-check-form-card .fine-check-submit .material-symbols-outlined {
            font-size: 1.125rem !important;
        }
        #form-vortex-focal.fine-check-form-card #fines-free-phone-wrap .fine-phone-combo-row span,
        #form-vortex-focal.fine-check-form-card #fines-free-phone-wrap .fine-phone-combo-row input,
        #form-vortex-focal.fine-check-form-card #fines-free-phone-wrap .fine-phone-combo-row .fine-phone-cc-slot,
        #form-vortex-focal.fine-check-form-card #fines-free-phone-wrap .fine-phone-combo-row .fine-phone-cc-trigger,
        #fine-check-main-card.fine-check-form-card #fine-phone-wrap .fine-phone-combo-row input[type='tel'][id$='phone-digits'],
        #fine-check-main-card.fine-check-form-card #fine-phone-wrap .fine-phone-combo-row .fine-phone-cc-slot,
        #fine-check-main-card.fine-check-form-card #fine-phone-wrap .fine-phone-combo-row .fine-phone-cc-trigger {
            padding-top: 0.28rem !important;
            padding-bottom: 0.28rem !important;
            font-size: 0.8125rem !important;
        }
        .fine-check-form-card .fine-phone-combo-row {
            overflow: visible;
        }
        .fine-phone-cc-slot {
            display: flex;
            align-items: center;
        }
        .fine-check-form-card .fine-phone-cc-slot:has(.fine-phone-cc-menu:not(.hidden)) {
            z-index: 50;
        }
        .fine-phone-cc-trigger {
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.35rem center;
            background-size: 0.65rem;
            border-radius: 9999px;
            transition: background-color 0.15s ease;
        }
        .fine-phone-cc-trigger:hover {
            background-color: rgba(15, 23, 42, 0.06);
        }
        html.dark .fine-phone-cc-trigger:hover {
            background-color: rgba(255, 255, 255, 0.08);
        }
        html.dark .fine-phone-cc-trigger {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        }
        .fine-phone-cc-menu {
            position: absolute;
            left: 0;
            top: calc(100% + 4px);
            right: auto;
            z-index: 100000;
            display: none;
            flex-direction: column;
            min-width: max(12.5rem, 100%);
            width: max(12.5rem, 100%);
            max-width: min(18rem, calc(100vw - 1.5rem));
            max-height: min(18rem, 70vh);
            overflow: hidden;
            border-radius: 0.75rem;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: #ffffff;
            box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
            padding: 0;
        }
        .fine-phone-cc-menu:not(.hidden) { display: flex; }
        .fine-phone-cc-menu-search {
            width: 100%;
            box-sizing: border-box;
            margin: 0;
            padding: 0.5rem 0.75rem;
            font-size: 0.8125rem;
            font-weight: 600;
            border: 0;
            border-bottom: 1px solid rgba(148, 163, 184, 0.35);
            border-radius: 0.75rem 0.75rem 0 0;
            background: #f1f5f9;
            color: #0f172a;
            outline: none;
        }
        .fine-phone-cc-menu-search::placeholder {
            color: #64748b;
            font-weight: 500;
        }
        .fine-phone-cc-menu-search:focus {
            box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.35);
        }
        html.dark .fine-phone-cc-menu-search {
            background: #1a1f26;
            color: #c8d2e0;
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }
        html.dark .fine-phone-cc-menu-search::placeholder {
            color: #94a3b8;
        }
        .fine-phone-cc-menu-list {
            flex: 1;
            min-height: 0;
            max-height: 13rem;
            overflow-y: auto;
            padding: 0.2rem 0;
        }
        html.dark .fine-phone-cc-menu {
            border-color: rgba(255, 255, 255, 0.12);
            background: #0f1419;
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
        }
        .fine-phone-cc-menu-item {
            display: block;
            width: 100%;
            text-align: left;
            padding: 0.45rem 0.75rem;
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.35;
            color: #0f172a;
            background: transparent;
            border: 0;
            cursor: pointer;
        }
        html.dark .fine-phone-cc-menu-item {
            color: #c8d2e0;
        }
        .fine-phone-cc-menu-item:hover,
        .fine-phone-cc-menu-item:focus-visible {
            background: rgba(14, 165, 233, 0.12);
            outline: none;
        }
        html.dark .fine-phone-cc-menu-item:hover,
        html.dark .fine-phone-cc-menu-item:focus-visible {
            background: rgba(14, 165, 233, 0.18);
        }
        #fines-free-vehicle-panel.ff-veh-panel-grid {
            display: grid;
        }
        /* Must beat #…ff-veh-panel-grid and Tailwind .grid — otherwise panels stay visible when another tab is active */
        #fines-free-vehicle-panel.ff-veh-panel-grid.hidden {
            display: none;
        }
        #fines-free-visa-panel.hidden,
        #fines-free-trade-panel.hidden {
            display: none;
        }
        #form-vortex-focal.fine-check-form-card #fines-free-veh-check-type:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
        #form-vortex-focal.fine-check-form-card .ff-veh-field-hint {
            font-size: 0.6rem;
            font-weight: 600;
            line-height: 1.35;
            color: #64748b;
            margin: 0.1rem 0 0;
        }
        html.dark #form-vortex-focal.fine-check-form-card .ff-veh-field-hint {
            color: rgba(148, 163, 184, 0.85);
        }
        /*
         * Searchable hub dropdowns: trigger is an <input class="fine-check-input-dark">.
         * Base .fine-check-input-dark sets slate text (#c8d2e0) — on white/light fields the typed search query must be black.
         */
        html:not(.dark) .fine-check-form-card input.searchable-select-trigger.fine-check-input-dark,
        html:not(.dark) .fine-check-form-card input.searchable-select-trigger.fine-check-input-dark:focus,
        html:not(.dark) .fine-check-form-card input.searchable-select-trigger.fine-check-input-dark:focus-visible,
        html:not(.dark) .fine-check-form-card input.searchable-select-trigger.fine-check-input-dark:active {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
            caret-color: #000000 !important;
        }
        html:not(.dark) .fine-check-form-card input.searchable-select-trigger.fine-check-input-dark:-webkit-autofill,
        html:not(.dark) .fine-check-form-card input.searchable-select-trigger.fine-check-input-dark:-webkit-autofill:hover,
        html:not(.dark) .fine-check-form-card input.searchable-select-trigger.fine-check-input-dark:-webkit-autofill:focus {
            -webkit-text-fill-color: #000000 !important;
            caret-color: #000000 !important;
        }
        /* Text selection (drag highlight): gold/yellow bar must show black text, not white on yellow */
        html:not(.dark) .fine-check-form-card input.searchable-select-trigger.fine-check-input-dark::selection {
            background-color: rgba(255, 215, 0, 0.5);
            color: #000000 !important;
        }
        html:not(.dark) .fine-check-form-card input.searchable-select-trigger.fine-check-input-dark::-moz-selection {
            background-color: rgba(255, 215, 0, 0.5);
            color: #000000 !important;
        }
        html.dark .fine-check-form-card input.searchable-select-trigger.fine-check-input-dark::selection {
            background-color: rgba(255, 215, 0, 0.45);
            color: #000000 !important;
        }
        html.dark .fine-check-form-card input.searchable-select-trigger.fine-check-input-dark::-moz-selection {
            background-color: rgba(255, 215, 0, 0.45);
            color: #000000 !important;
        }
        /* Hub + Quick Action: one wrapper width token (Tailwind max-w mirrors this) */
        .fine-check-twin-form-wrap {
            box-sizing: border-box;
        }

        /* Searchable dropdown (native <select> kept for forms; UI combobox) */
        .fine-check-form-card .searchable-select-wrap {
            position: relative;
            width: 100%;
        }
        .fine-check-form-card .searchable-select-native {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .fine-check-form-card .searchable-select-row {
            position: relative;
            width: 100%;
        }
        .fine-check-form-card .searchable-select-trigger.fine-check-input-dark {
            cursor: pointer;
            background-image: none;
            width: 100%;
            padding-right: 2.25rem;
            border-radius: 9999px !important;
        }
        .fine-check-form-card .searchable-select-chev {
            position: absolute;
            right: 0.25rem;
            top: 50%;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            padding: 0;
            border: 0;
            border-radius: 0.375rem;
            background: transparent;
            color: inherit;
            cursor: pointer;
            opacity: 0.7;
        }
        .fine-check-form-card .searchable-select-chev:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }
        .fine-check-form-card .searchable-select-chev .material-symbols-outlined {
            font-size: 1.125rem;
            line-height: 1;
        }
        .fine-check-form-card .searchable-select-trigger:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
        .fine-check-form-card .searchable-select-panel {
            border-radius: 0.75rem !important;
            box-shadow:
                0 18px 40px rgba(15, 23, 42, 0.12),
                0 0 0 1px rgba(15, 23, 42, 0.06);
        }
        html.dark .fine-check-form-card .searchable-select-panel {
            box-shadow:
                0 20px 48px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.1);
        }
        .fine-check-form-card .searchable-select-panel.searchable-select-panel--above {
            top: auto !important;
            bottom: calc(100% + 4px) !important;
            box-shadow:
                0 -18px 40px rgba(15, 23, 42, 0.12),
                0 0 0 1px rgba(15, 23, 42, 0.06);
        }
        html.dark .fine-check-form-card .searchable-select-panel.searchable-select-panel--above {
            box-shadow:
                0 -20px 48px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.1);
        }
        /* ─── Selected state — cream-yellow gradient with amber accent bar ─── */
        .fine-check-form-card .searchable-select-option[aria-selected='true'] {
            background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
            color: #92400e !important;
            border-left: 3px solid #fbbf24 !important;
            padding-left: 13px !important;
            font-weight: 700 !important;
        }
        /* ─── Hover state — same cream-yellow gradient ─── */
        .fine-check-form-card .searchable-select-option:hover,
        .fine-check-form-card .searchable-select-option:focus-visible {
            background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
            color: #92400e !important;
            border-left: 3px solid #fbbf24 !important;
            padding-left: 13px !important;
            font-weight: 700 !important;
            box-shadow: none !important;
            transition: background 0.15s ease, color 0.15s ease, font-weight 0.15s ease !important;
        }
        html.dark .fine-check-form-card .searchable-select-option[aria-selected='true'] {
            background: transparent;
        }
        html.dark .fine-check-form-card .searchable-select-option:hover,
        html.dark .fine-check-form-card .searchable-select-option:focus-visible {
            background: rgba(255, 255, 255, 0.06) !important;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
        }
        .fine-check-form-card .searchable-select-empty {
            padding: 0.5rem 0.75rem;
            font-size: 0.75rem;
            color: rgba(100, 116, 139, 0.95);
        }
        html.dark .fine-check-form-card .searchable-select-empty {
            color: rgba(148, 163, 184, 0.9);
        }
        #fine-check-main-card.fine-check-form-card .searchable-select-trigger.fine-check-input-dark {
            min-height: 2.15rem !important;
            height: 2.15rem !important;
            max-height: 2.15rem !important;
            padding-top: 0.26rem !important;
            padding-bottom: 0.26rem !important;
            font-size: 0.8125rem !important;
            line-height: 1.3 !important;
        }
        #form-vortex-focal.fine-check-form-card .searchable-select-trigger.fine-check-input-dark {
            min-height: 2.125rem !important;
            height: 2.125rem !important;
            max-height: 2.125rem !important;
            padding-top: 0.22rem !important;
            padding-bottom: 0.22rem !important;
            font-size: 0.8125rem !important;
            line-height: 1.3 !important;
        }
        #fine-check-main-card.fine-check-form-card .searchable-select-chev,
        #form-vortex-focal.fine-check-form-card .searchable-select-chev {
            min-height: 2rem;
            max-height: 2rem;
        }

        /* Quick Action — bundle toggle (same switch + label styling as Urgent) */
        #fine-check-main-card .qa-bundle-switch {
            flex-shrink: 0;
        }
        #fine-check-main-card .qa-bundle-switch.qa-bundle-switch--inline {
            align-self: center;
        }
        #fine-check-main-card .qa-service-select-row .searchable-select-wrap {
            width: 100%;
            min-width: 0;
        }

        /* Scroll-driven section reveals */
        .scroll-reveal {
            opacity: 0;
            transform: translate3d(0, 28px, 0);
            transition:
                opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
            transition-delay: var(--sr-delay, 0s);
            will-change: opacity, transform;
        }
        .scroll-reveal.scroll-reveal--inview {
            opacity: 1;
            transform: translate3d(0, 0, 0);
            will-change: auto;
        }
        @media (prefers-reduced-motion: reduce) {
            .scroll-reveal {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
            }
        }

        /* Main Fine Check / Quick Action card — denser layout, same width */
        #fine-check-main-card.fine-check-form-card input.fine-check-field-light,
        #fine-check-main-card.fine-check-form-card input[type="text"].fine-check-field-light,
        #fine-check-main-card.fine-check-form-card input[type="tel"].fine-check-field-light,
        #fine-check-main-card.fine-check-form-card input[type="email"].fine-check-field-light,
        #fine-check-main-card.fine-check-form-card input[type="date"].fine-check-field-light {
            min-height: 2.15rem !important;
            height: 2.15rem !important;
            max-height: 2.15rem !important;
            padding-top: 0.22rem !important;
            padding-bottom: 0.22rem !important;
            font-size: 0.8125rem !important;
        }
        #fine-check-main-card.fine-check-form-card select.fine-check-input-dark {
            min-height: 2.15rem !important;
            height: 2.15rem !important;
            max-height: 2.15rem !important;
            padding-top: 0.26rem !important;
            padding-bottom: 0.26rem !important;
            font-size: 0.8125rem !important;
            line-height: 1.3 !important;
            background-position: right 0.65rem center;
            background-size: 1rem;
            padding-right: 2.25rem !important;
        }
        #fine-check-main-card.fine-check-form-card textarea.fine-check-field-light {
            min-height: 2.35rem !important;
            max-height: 3.25rem;
            padding-top: 0.3rem !important;
            padding-bottom: 0.3rem !important;
            font-size: 0.8125rem !important;
            line-height: 1.35 !important;
        }
        #fine-check-main-card.fine-check-form-card .fine-check-submit {
            padding-top: 0.65rem !important;
            padding-bottom: 0.65rem !important;
        }
        #fine-check-main-card .fine-check-tab-track {
            padding: 4px;
        }
        #fine-check-main-card .fine-check-tab {
            padding: 0.45rem 0.55rem;
            font-size: 0.5625rem;
            letter-spacing: 0.1em;
        }
        @media (min-width: 640px) {
            #fine-check-main-card .fine-check-tab {
                padding: 0.5rem 0.75rem;
                font-size: 0.625rem;
            }
        }
        #fine-check-main-card.fine-check-form-card form .grid .space-y-1 > input,
        #fine-check-main-card.fine-check-form-card form .grid .space-y-1 > select,
        #fine-check-main-card.fine-check-form-card form .grid .space-y-1 > textarea {
            width: 100%;
            margin-top: 0;
        }
        #fine-check-main-card.fine-check-form-card form .grid .fine-check-label {
            min-height: 1.45rem !important;
            margin-bottom: 0.06rem !important;
            display: flex;
            align-items: flex-end;
            margin-left: 0 !important;
        }
        #fine-check-main-card.fine-check-form-card form > * + * {
            margin-top: 0.22rem !important;
        }
        @media (min-width: 640px) {
            #fine-check-main-card.fine-check-form-card form > * + * {
                margin-top: 0.28rem !important;
            }
        }
        #fine-check-main-card.fine-check-form-card [id^="fine-check-"][id$="-panel"] > * + * {
            margin-top: 0.22rem !important;
        }
        @media (min-width: 640px) {
            #fine-check-main-card.fine-check-form-card [id^="fine-check-"][id$="-panel"] > * + * {
                margin-top: 0.28rem !important;
            }
        }
        #fine-check-main-card.fine-check-form-card .space-y-1 > * + * {
            margin-top: 0.08rem !important;
        }
        #fine-check-main-card.fine-check-form-card [class~="space-y-1.5"] > * + * {
            margin-top: 0.14rem !important;
        }
        #fine-check-main-card.fine-check-form-card form .grid {
            row-gap: 0.2rem !important;
            column-gap: 0.35rem !important;
        }
        @media (min-width: 640px) {
            #fine-check-main-card.fine-check-form-card form .grid {
                row-gap: 0.24rem !important;
                column-gap: 0.42rem !important;
            }
        }

        /* 40-circle testimonial orbit simulation */
        .orbit-container {
            position: relative;
            width: 100%;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .orbit-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 1px solid rgba(255, 215, 0, 0.05);
            animation: spin 60s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Tiers — partners animate along SVG arc (SMIL + wide foreignObject = no clip) */
        .tier-partner-arc {
            margin-top: clamp(2.5rem, 5vw, 3.75rem);
            padding: 0 0 0.75rem;
            width: 100%;
            max-width: 100rem;
            margin-left: auto;
            margin-right: auto;
        }
        .tier-partner-arc__title {
            text-align: center;
            font-size: 0.625rem;
            font-weight: 900;
            letter-spacing: 0.32em;
            text-transform: uppercase;
            color: rgba(255, 215, 0, 0.88);
            margin-bottom: 1rem;
        }
        html:not(.dark) .tier-partner-arc__title {
            color: rgba(180, 130, 0, 0.95);
        }
        .tier-partner-arc__stage {
            position: relative;
            width: 100%;
            padding: 0 0.25rem;
            min-height: clamp(10rem, 28vw, 14.5rem);
        }
        .tier-partner-arc__svg {
            display: block;
            width: 100%;
            height: clamp(9.5rem, 27vw, 14rem);
            overflow: visible;
        }
        .tier-partner-arc__line-base {
            fill: none;
            stroke: rgba(255, 215, 0, 0.14);
            stroke-width: 3;
            stroke-linecap: round;
        }
        .tier-partner-arc__line-flow {
            fill: none;
            stroke: #e8c547;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 12 36;
            animation: none;
            filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.32));
        }
        @keyframes tier-partner-arc-dash {
            to { stroke-dashoffset: -96; }
        }
        .tier-partner-card {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 0.8rem;
            padding: 0.5rem 1.15rem 0.5rem 0.55rem;
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(17, 20, 24, 0.82);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
        }
        html:not(.dark) .tier-partner-card {
            background: rgba(255, 255, 255, 0.92);
            border-color: rgba(15, 23, 42, 0.1);
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
        }
        .tier-partner-card__mark {
            width: 2.5rem;
            height: 2.5rem;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .tier-partner-card__mark img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
        }
        .tier-partner-card__label {
            font-size: clamp(0.65rem, 1.4vw, 0.8125rem);
            font-weight: 900;
            letter-spacing: 0.055em;
            text-transform: uppercase;
            white-space: nowrap;
            color: #c8d2e0;
        }
        html:not(.dark) .tier-partner-card__label {
            color: #0f172a;
        }
        /* foreignObject: rem/vw alone often renders tiny — drive size with vmin + px */
        .tier-partner-chip-fo {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
            font-size: clamp(18px, 5vmin, 33px);
        }
        .tier-partner-card--svgfo {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
            justify-content: flex-start;
            padding: 0.55em 0.75em 0.55em 0.5em;
            gap: 0.5em;
            border-width: 2px;
            border-color: rgba(255, 255, 255, 0.35);
            background: rgba(36, 40, 48, 0.98);
            box-shadow:
                0 10px 40px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 215, 0, 0.22);
        }
        html:not(.dark) .tier-partner-card--svgfo {
            border-color: rgba(15, 23, 42, 0.2);
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
        }
        .tier-partner-card--svgfo .tier-partner-card__mark {
            width: 2.95em;
            height: 2.95em;
            min-width: 58px;
            min-height: 58px;
        }
        .tier-partner-card--svgfo .tier-partner-card__mark img {
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            object-fit: contain;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
        }
        .tier-partner-card--svgfo .tier-partner-card__label {
            flex: 1;
            min-width: 0;
            text-align: center;
            font-size: 1.14em;
            line-height: 1.22;
            letter-spacing: 0.052em;
            font-weight: 900;
            color: #f8fafc;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 0, 0, 0.35);
        }
        html:not(.dark) .tier-partner-card--svgfo .tier-partner-card__label {
            color: #0f172a;
            text-shadow: none;
        }
        @media (prefers-reduced-motion: reduce) {
            .tier-partner-arc__line-flow {
                animation: none !important;
                stroke-dasharray: none;
                opacity: 0.55;
            }
        }

        .navy-depth-3d {
            color: #001D3D;
            text-shadow: 1px 1px 0px rgba(0, 29, 61, 0.2), 2px 2px 0px rgba(0, 29, 61, 0.1);
        }
        .dark .navy-depth-3d {
            color: #FFD700;
            text-shadow: none;
        }

/* Dark mode: all navy-depth-3d headings → Yellow */
html.dark .navy-depth-3d,
html.dark h1.navy-depth-3d,
html.dark h2.navy-depth-3d,
html.dark h3.navy-depth-3d {
    color: #FFD700 !important;
    text-shadow: none !important;
}

        /* Dashboard preview — sharp image (no 3D on raster) + motion + click-zoom */
        .dashboard-preview-section .dashboard-dp-eyebrow {
            animation: none;
        }
        @keyframes dashboard-dp-eyebrow {
            0%, 100% { opacity: 0.82; letter-spacing: 0.32em; }
            50% { opacity: 1; letter-spacing: 0.38em; }
        }
        .dashboard-preview-section .dashboard-dp-title {
            animation: none;
        }
        @keyframes dashboard-dp-titlebob {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
        .dashboard-preview-section .dashboard-dp-sub {
            animation: none;
        }
        @keyframes dashboard-dp-subfade {
            0%, 100% { opacity: 0.72; }
            50% { opacity: 1; }
        }
        .dashboard-preview-stage {
            will-change: transform;
            animation: none;
        }
        @keyframes dashboard-stage-drift {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        .dashboard-preview-parallax {
            will-change: transform;
        }
        @keyframes dashboard-frame-breathe {
            0%, 100% {
                box-shadow:
                    0 28px 72px rgba(0, 0, 0, 0.38),
                    0 0 0 1px rgba(255, 215, 0, 0.07),
                    inset 0 1px 0 rgba(255, 255, 255, 0.07);
            }
            50% {
                box-shadow:
                    0 34px 88px rgba(0, 0, 0, 0.42),
                    0 0 32px rgba(255, 215, 0, 0.14),
                    0 0 1px rgba(0, 196, 159, 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
            }
        }
        .dashboard-preview-mock {
            position: relative;
            line-height: 0;
            overflow: hidden;
            border-radius: inherit;
        }
        .dashboard-preview-zoom-layer {
            position: relative;
            transform-origin: 12% 22%;
            transition: transform 0.55s cubic-bezier(0.22, 1, 0.32, 1);
            will-change: transform;
            backface-visibility: hidden;
        }
        .dashboard-preview-zoom-layer.is-zoomed {
            transform: scale(1.17);
        }
        .dashboard-preview-img-el {
            display: block;
            width: 100%;
            height: auto;
            vertical-align: middle;
            image-rendering: auto;
            -webkit-backface-visibility: hidden;
        }
        .dashboard-preview-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 36;
        }
        .dashboard-preview-hotspot {
            position: absolute;
            border-radius: 0.5rem;
            transform-origin: center center;
            transition: box-shadow 0.2s ease, background-color 0.2s ease;
        }
        .dashboard-preview-hotspot.is-hit {
            box-shadow:
                inset 0 0 0 2px rgba(255, 215, 0, 0.9),
                0 0 32px rgba(34, 197, 94, 0.65),
                0 0 56px rgba(255, 215, 0, 0.35),
                0 0 80px rgba(0, 196, 159, 0.2);
            background: rgba(34, 197, 94, 0.18);
            animation: dashboard-hotspot-pulse 0.6s ease-out;
        }
        @keyframes dashboard-hotspot-pulse {
            0% { transform: scale(1); }
            35% { transform: scale(1.045); }
            100% { transform: scale(1); }
        }
        .dashboard-preview-mock.dashboard-mock-flash::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 14;
            pointer-events: none;
            border-radius: inherit;
            background: radial-gradient(
                circle 75% at var(--dash-flash-x, 50%) var(--dash-flash-y, 40%),
                rgba(255, 215, 0, 0.45) 0%,
                rgba(0, 196, 159, 0.28) 35%,
                transparent 62%
            );
            animation: dashboard-mock-flash-anim 0.55s ease-out forwards;
        }
        @keyframes dashboard-mock-flash-anim {
            0% {
                opacity: 0;
                transform: scale(0.94);
            }
            32% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(1.03);
            }
        }
        .dashboard-preview-cursor {
            position: absolute;
            left: 0;
            top: 0;
            width: 1.125rem;
            height: 1.125rem;
            margin-left: -2px;
            margin-top: -2px;
            z-index: 20;
            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
            transition:
                left 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                top 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.08s ease;
            animation: none;
        }
        @keyframes dashboard-cursor-alive {
            0%, 100% {
                filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
            }
            50% {
                filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.25));
            }
        }
        .dashboard-preview-cursor.is-click {
            animation: none;
            transform: scale(0.82);
        }
        .dashboard-preview-burst {
            position: absolute;
            left: 0;
            top: 0;
            width: 0.375rem;
            height: 0.375rem;
            margin: -0.1875rem 0 0 -0.1875rem;
            border-radius: 50%;
            pointer-events: none;
            z-index: 12;
            opacity: 0;
        }
        .dashboard-preview-burst.is-on {
            animation: dashboard-burst-ring 0.82s ease-out forwards;
        }
        .dashboard-preview-burst2 {
            position: absolute;
            left: 0;
            top: 0;
            width: 0.375rem;
            height: 0.375rem;
            margin: -0.1875rem 0 0 -0.1875rem;
            border-radius: 50%;
            pointer-events: none;
            z-index: 11;
            opacity: 0;
        }
        .dashboard-preview-burst2.is-on {
            animation: dashboard-burst-ring-delayed 0.95s ease-out 0.06s forwards;
        }
        @keyframes dashboard-burst-ring {
            0% {
                opacity: 1;
                box-shadow:
                    0 0 0 0 rgba(255, 215, 0, 0.75),
                    0 0 0 0 rgba(34, 197, 94, 0.55),
                    0 0 0 0 rgba(255, 255, 255, 0.3);
            }
            55% {
                opacity: 0.85;
            }
            100% {
                opacity: 0;
                box-shadow:
                    0 0 0 2.75rem rgba(255, 215, 0, 0),
                    0 0 0 2rem rgba(34, 197, 94, 0),
                    0 0 0 3.25rem rgba(255, 255, 255, 0);
            }
        }
        @keyframes dashboard-burst-ring-delayed {
            0% {
                opacity: 0.9;
                box-shadow: 0 0 0 0 rgba(0, 196, 159, 0.5);
            }
            100% {
                opacity: 0;
                box-shadow: 0 0 0 2.5rem rgba(0, 196, 159, 0);
            }
        }
        /* Live HTML dashboard mock — vector text, sharp at any size */
        .dp-live {
            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            background: #000;
            color: #e5e7eb;
            min-height: min(32rem, 78vw);
            display: flex;
            width: 100%;
            font-size: clamp(0.6875rem, 0.9vw + 0.55rem, 0.8125rem);
            line-height: 1.45;
        }
        .dp-live-side {
            width: 26%;
            min-width: 11.5rem;
            max-width: 15.5rem;
            background: #0a0a0a;
            border-right: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }
        .dp-live-brand {
            padding: 0.85rem 0.75rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .dp-live-brand-mark {
            width: 2rem;
            height: 2rem;
            border-radius: 9999px;
            background: linear-gradient(135deg, #00a3ff, #0891b2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 900;
            font-size: 0.75rem;
            box-shadow: 0 0 18px rgba(0, 163, 255, 0.35);
        }
        .dp-live-brand h3 {
            font-weight: 900;
            color: #fff;
            font-size: 0.8125rem;
            letter-spacing: -0.02em;
            margin: 0;
            line-height: 1.2;
        }
        .dp-live-brand span {
            font-size: 0.5625rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #6b7280;
        }
        .dp-live-nav {
            padding: 0.5rem;
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
        }
        .dp-nav-item {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.45rem 0.5rem;
            border-radius: 0.65rem;
            color: #9ca3af;
            font-weight: 600;
            font-size: 0.75rem;
            transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        }
        .dp-nav-item .material-symbols-outlined {
            font-size: 1.125rem;
            width: 1.25rem;
            text-align: center;
        }
        .dp-nav-item.is-active {
            color: #fff;
            background: rgba(0, 163, 255, 0.12);
            box-shadow: 0 0 0 1px rgba(0, 163, 255, 0.45), 0 0 16px rgba(0, 163, 255, 0.12);
        }
        .dp-nav-item.is-active .material-symbols-outlined {
            color: #00a3ff;
        }
        .dp-live-main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            background: #000;
        }
        .dp-live-top {
            padding: 0.6rem 0.85rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            background: rgba(0, 0, 0, 0.88);
            backdrop-filter: blur(8px);
        }
        .dp-live-search {
            flex: 1;
            min-width: 8rem;
            border-radius: 0.65rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: #1a1a1a;
            padding: 0.45rem 0.65rem;
            color: #fff;
            font-size: 0.75rem;
        }
        .dp-live-top-pill {
            font-size: 0.5625rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 0.35rem 0.6rem;
            border-radius: 0.5rem;
            background: #ff4d00;
            color: #fff;
            white-space: nowrap;
        }
        .dp-live-views {
            flex: 1;
            position: relative;
            overflow: auto;
            padding: 0.65rem 0.85rem 0.85rem;
            min-height: 16rem;
        }
        .dp-view {
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        .dp-view.is-dp-hidden {
            opacity: 0;
            transform: translateY(6px);
            pointer-events: none;
            position: absolute;
            left: 0;
            right: 0;
            top: 0.65rem;
            width: calc(100% - 1.7rem);
            margin: 0 0.85rem;
        }
        .dp-view:not(.is-dp-hidden) {
            position: relative;
            opacity: 1;
            transform: none;
        }
        .dp-card {
            background: #1a1a1a;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 0.75rem;
            padding: 0.65rem 0.75rem;
            margin-bottom: 0.5rem;
        }
        .dp-card h4 {
            margin: 0 0 0.35rem;
            font-size: 0.8125rem;
            font-weight: 800;
            color: #fff;
        }
        .dp-savings-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 1rem;
            font-size: 0.75rem;
        }
        .dp-savings-row strong {
            color: #fff;
            font-weight: 800;
        }
        .dp-audit {
            font-family: ui-monospace, monospace;
            font-size: 0.5625rem;
            color: rgba(52, 211, 153, 0.92);
            line-height: 1.5;
            max-height: 4.5rem;
            overflow: hidden;
            position: relative;
        }
        .dp-audit-inner {
            animation: none;
        }
        @keyframes dp-audit-scroll {
            0% { transform: translateY(0); }
            100% { transform: translateY(-50%); }
        }
        .dp-emp-head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .dp-emp-head h2 {
            margin: 0;
            font-size: 0.6875rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: #00a3ff;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        .dp-btn-add {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.45rem 0.75rem;
            border-radius: 0.65rem;
            background: #ffcc00;
            color: #000;
            font-weight: 900;
            font-size: 0.625rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            border: none;
            cursor: default;
            box-shadow: 0 0 18px rgba(255, 204, 0, 0.35);
            transition: transform 0.15s, filter 0.15s;
        }
        .dp-btn-add.is-dp-pulse {
            animation: dp-btn-glow 0.55s ease-out;
        }
        @keyframes dp-btn-glow {
            0%, 100% { filter: brightness(1); transform: scale(1); }
            40% { filter: brightness(1.12); transform: scale(1.04); }
        }
        .dp-emp-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 0.35rem;
        }
        .dp-btn-bulk {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.45rem 0.65rem;
            border-radius: 0.65rem;
            border: 1px solid rgba(0, 163, 255, 0.5);
            background: transparent;
            color: #00a3ff;
            font-weight: 900;
            font-size: 0.625rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            cursor: default;
            pointer-events: none;
        }
        .dp-table-wrap {
            overflow-x: auto;
            border-radius: 0.65rem;
            border: 1px solid rgba(255, 255, 255, 0.06);
        }
        .dp-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.6875rem;
            min-width: 22rem;
        }
        .dp-table th {
            text-align: left;
            padding: 0.4rem 0.5rem;
            font-size: 0.5625rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #6b7280;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(0, 0, 0, 0.35);
        }
        .dp-table td {
            padding: 0.45rem 0.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            color: #d1d5db;
        }
        .dp-tag {
            font-size: 0.5625rem;
            font-weight: 800;
            padding: 0.15rem 0.35rem;
            border-radius: 0.25rem;
            background: rgba(34, 197, 94, 0.15);
            color: #4ade80;
        }
        .dp-demo-modal {
            position: absolute;
            inset: 0;
            z-index: 26;
            background: rgba(0, 0, 0, 0.72);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.35s ease, visibility 0.35s;
        }
        /* Success toast that appears after the cursor clicks Save in the
           demo — slides down from top, auto-hides. */
        .dp-success-toast {
            position: absolute;
            top: 1rem;
            left: 50%;
            transform: translate(-50%, -150%);
            z-index: 28;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border-radius: 10px;
            background: #ecfdf5;
            border: 1px solid rgba(16, 185, 129, 0.4);
            color: #064e3b;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
            box-shadow: 0 10px 28px rgba(16, 185, 129, 0.18);
            opacity: 0;
            visibility: hidden;
            transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                        opacity 0.32s ease,
                        visibility 0.32s;
            pointer-events: none;
        }
        .dp-success-toast.is-visible {
            transform: translate(-50%, 0);
            opacity: 1;
            visibility: visible;
        }
        .dp-demo-modal.is-open {
            opacity: 1;
            visibility: visible;
        }
        .dp-demo-modal-panel {
            width: 100%;
            max-width: 22rem;
            background: #141414;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 1rem;
            padding: 1rem 1.1rem;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
            transform: scale(0.94) translateY(8px);
            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .dp-demo-modal.is-open .dp-demo-modal-panel {
            transform: scale(1) translateY(0);
        }
        .dp-demo-modal-panel h3 {
            margin: 0 0 0.75rem;
            font-size: 0.6875rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #00a3ff;
        }
        .dp-modal-field {
            margin-bottom: 0.55rem;
            opacity: 0;
            transform: translateX(8px);
            transition: opacity 0.35s ease, transform 0.35s ease;
        }
        .dp-demo-modal.is-open .dp-modal-field {
            opacity: 1;
            transform: translateX(0);
        }
        .dp-demo-modal.is-open .dp-modal-field:nth-child(2) { transition-delay: 0.06s; }
        .dp-demo-modal.is-open .dp-modal-field:nth-child(3) { transition-delay: 0.12s; }
        .dp-demo-modal.is-open .dp-modal-field:nth-child(4) { transition-delay: 0.18s; }
        .dp-demo-modal.is-open .dp-modal-field:nth-child(5) { transition-delay: 0.24s; }
        .dp-demo-modal.is-open .dp-modal-field:nth-child(6) { transition-delay: 0.3s; }
        .dp-demo-modal.is-open .dp-modal-field:nth-child(7) { transition-delay: 0.36s; }
        .dp-modal-field label {
            display: block;
            font-size: 0.5625rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #6b7280;
            margin-bottom: 0.2rem;
        }
        .dp-modal-field input {
            width: 100%;
            border-radius: 0.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.45);
            padding: 0.45rem 0.55rem;
            color: #fff;
            font-size: 0.75rem;
        }
        .dp-modal-field.is-dp-focus input {
            border-color: rgba(0, 163, 255, 0.55);
            box-shadow: 0 0 0 2px rgba(0, 163, 255, 0.2);
        }
        .dp-click-ghost {
            position: absolute;
            width: 2.75rem;
            height: 2.75rem;
            margin: -1.375rem 0 0 -1.375rem;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.95);
            box-shadow:
                0 0 0 4px rgba(255, 215, 0, 0.45),
                0 0 40px rgba(0, 196, 159, 0.35);
            pointer-events: none;
            z-index: 19;
            opacity: 0;
        }
        .dp-click-ghost.is-pop {
            animation: dp-click-ghost-pop 0.7s ease-out forwards;
        }
        @keyframes dp-click-ghost-pop {
            0% {
                transform: scale(0.3);
                opacity: 0;
            }
            20% {
                opacity: 1;
            }
            100% {
                transform: scale(2.15);
                opacity: 0;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .dp-audit-inner {
                animation: none !important;
            }
            .dp-view {
                transition: none !important;
            }
            .dp-demo-modal,
            .dp-demo-modal-panel,
            .dp-modal-field {
                transition: none !important;
            }
            .dashboard-preview-section .dashboard-dp-eyebrow,
            .dashboard-preview-section .dashboard-dp-title,
            .dashboard-preview-section .dashboard-dp-sub,
            .dashboard-preview-stage,
            .dashboard-preview-parallax {
                animation: none !important;
            }
            .dashboard-preview-section .dashboard-dp-sub {
                opacity: 0.85;
            }
            .dashboard-preview-parallax {
                will-change: auto;
            }
            .dashboard-preview-zoom-layer {
                transition: none !important;
                transform: none !important;
            }
            .dashboard-preview-zoom-layer.is-zoomed {
                transform: none !important;
            }
            .dashboard-preview-overlay {
                display: none;
            }
            .dashboard-preview-cursor {
                animation: none !important;
            }
        }

        .hero-headline-fines {
            color: #0c1929;
        }
        .dark .hero-headline-fines {
            color: #ffffff;
        }
        .hero-cta-secondary {
            background: rgba(224, 242, 254, 0.65);
            border: 1px solid rgba(125, 211, 252, 0.45);
        }
        .dark .hero-cta-secondary {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 215, 0, 0.25);
        }

        /* Fixed bottom — glass “liquid” global search (stays on screen while scrolling) */
        body {
            /* Bottom padding only needs to respect the device safe-area now
               that the fixed global search dock has been removed. */
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        .global-search-dock {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 65;
            padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
            pointer-events: none;
        }
        .global-search-dock * {
            pointer-events: auto;
        }
        .global-search-dock__stack {
            max-width: 42rem;
            margin: 0 auto;
            position: relative;
        }
        .global-search-results {
            position: absolute;
            left: 0;
            right: 0;
            bottom: calc(100% + 0.5rem);
            max-height: min(50vh, 22rem);
            overflow-y: auto;
            border-radius: 1.25rem;
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
            display: none;
        }
        .global-search-results.is-open {
            display: block;
        }
        html.dark .global-search-results {
            background: rgba(12, 14, 18, 0.82);
        }
        html:not(.dark) .global-search-results {
            background: rgba(255, 255, 255, 0.88);
            border-color: rgba(15, 23, 42, 0.1);
            box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.12);
        }
        .global-search-result-btn {
            width: 100%;
            text-align: left;
            padding: 0.75rem 1rem;
            border: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            background: transparent;
            cursor: pointer;
            transition: background 0.15s ease;
        }
        html:not(.dark) .global-search-result-btn {
            border-bottom-color: rgba(15, 23, 42, 0.06);
        }
        .global-search-result-btn:hover,
        .global-search-result-btn:focus-visible {
            background: rgba(255, 215, 0, 0.12);
            outline: none;
        }
        .global-search-result-title {
            font-size: 0.8125rem;
            font-weight: 800;
            color: #f8fafc;
            line-height: 1.35;
        }
        html:not(.dark) .global-search-result-title {
            color: #0f172a;
        }
        .global-search-result-meta {
            font-size: 0.625rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255, 215, 0, 0.85);
            margin-top: 0.2rem;
        }
        html:not(.dark) .global-search-result-meta {
            color: #b45309;
        }
        .global-search-bar-shell {
            position: relative;
            border-radius: 9999px;
            padding: 2px;
            overflow: hidden;
            background: linear-gradient(
                120deg,
                rgba(255, 215, 0, 0.45),
                rgba(255, 255, 255, 0.25) 40%,
                rgba(56, 189, 248, 0.35) 70%,
                rgba(255, 215, 0, 0.4)
            );
            background-size: 200% 100%;
            animation: none;
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
        }
        html:not(.dark) .global-search-bar-shell {
            box-shadow:
                0 6px 28px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
        }
        @keyframes global-search-liquid-shift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        @media (prefers-reduced-motion: reduce) {
            .global-search-bar-shell {
                animation: none;
                background-position: 50% 50%;
            }
        }

        /* Floating WhatsApp — fixed bottom-right corner (above safe area) */
        .whatsapp-float {
            position: fixed !important;
            isolation: isolate;
            right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
            bottom: max(1.25rem, calc(1.25rem + env(safe-area-inset-bottom, 0px))) !important;
            left: auto !important;
            top: auto !important;
            z-index: 9999 !important;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 9999px;
            background: #25d366;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                0 4px 18px rgba(37, 211, 102, 0.45),
                0 0 0 1px rgba(255, 255, 255, 0.12) inset;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        @media (min-width: 640px) {
            .whatsapp-float {
                width: 3.75rem;
                height: 3.75rem;
                right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
                bottom: max(1.5rem, calc(1.5rem + env(safe-area-inset-bottom, 0px))) !important;
            }
        }
        .whatsapp-float:hover {
            transform: scale(1.07);
            box-shadow:
                0 8px 28px rgba(37, 211, 102, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.18) inset;
        }
        .whatsapp-float:focus-visible {
            outline: 2px solid #ffd700;
            outline-offset: 3px;
        }
        .whatsapp-float svg {
            width: 1.85rem;
            height: 1.85rem;
            display: block;
        }
        @media (min-width: 640px) {
            .whatsapp-float svg {
                width: 2rem;
                height: 2rem;
            }
        }
        .whatsapp-float__ring {
            position: absolute;
            inset: -4px;
            border-radius: inherit;
            border: 2px solid rgba(37, 211, 102, 0.45);
            animation: none;
            pointer-events: none;
        }
        @keyframes whatsapp-float-ping {
            0% { transform: scale(1); opacity: 0.6; }
            100% { transform: scale(1.35); opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .whatsapp-float__ring { animation: none; opacity: 0; }
        }

        .global-search-bar-inner {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            border-radius: 9999px;
            padding: 0.55rem 1rem 0.55rem 1.1rem;
            backdrop-filter: blur(22px) saturate(185%);
            -webkit-backdrop-filter: blur(22px) saturate(185%);
        }
        html.dark .global-search-bar-inner {
            background: rgba(8, 10, 14, 0.55);
        }
        html:not(.dark) .global-search-bar-inner {
            background: rgba(255, 255, 255, 0.72);
        }
        .global-search-icon {
            font-size: 1.35rem;
            color: #ffd700;
            flex-shrink: 0;
        }
        html:not(.dark) .global-search-icon {
            color: #ca8a04;
        }
        .global-search-input {
            flex: 1;
            min-width: 0;
            border: none !important;
            border-radius: 0;
            background: transparent !important;
            background-color: transparent !important;
            font-size: 0.9375rem;
            font-weight: 600;
            outline: none !important;
            box-shadow: none !important;
            color: #f8fafc;
            -webkit-appearance: none;
            appearance: none;
        }
        html.dark .global-search-input {
            background: transparent !important;
            background-color: transparent !important;
            color: #f1f5f9;
            box-shadow: none !important;
        }
        html:not(.dark) .global-search-input {
            color: #0f172a;
            background: transparent !important;
            background-color: transparent !important;
        }
        .global-search-input:focus,
        .global-search-input:focus-visible {
            outline: none !important;
            box-shadow: none !important;
            border: none !important;
        }
        .global-search-input::-webkit-search-decoration,
        .global-search-input::-webkit-search-cancel-button,
        .global-search-input::-webkit-search-results-button,
        .global-search-input::-webkit-search-results-decoration {
            -webkit-appearance: none;
            appearance: none;
            display: none;
        }
        .global-search-input::placeholder {
            color: rgba(148, 163, 184, 0.95);
            font-weight: 500;
        }
        html:not(.dark) .global-search-input::placeholder {
            color: rgba(71, 85, 105, 0.85);
        }
        .global-search-kbd {
            flex-shrink: 0;
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            padding: 0.25rem 0.45rem;
            border-radius: 0.35rem;
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: rgba(226, 232, 240, 0.8);
        }
        html:not(.dark) .global-search-kbd {
            border-color: rgba(15, 23, 42, 0.15);
            color: #64748b;
        }
        .global-search-empty {
            padding: 1rem 1.25rem;
            font-size: 0.8125rem;
            font-weight: 600;
            color: rgba(148, 163, 184, 0.95);
        }
        html:not(.dark) .global-search-empty {
            color: #64748b;
        }
        /* UAE dirham mark — PNG as mask; currentColor = glyph, no box */
        .sym-dirham-inline {
            display: inline-block;
            vertical-align: -0.14em;
            height: 1.28em;
            width: calc(1.28em * 638 / 576);
            flex-shrink: 0;
            box-sizing: border-box;
            background-color: currentColor;
            color: inherit;
            -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDg3MCI+PHBhdGggZD0ibTg4LjMgMWMwLjQgMC42IDIuNiAzLjMgNC43IDUuOSAxNS4zIDE4LjIgMjYuOCA0Ny44IDMzIDg1LjEgNC4xIDI0LjUgNC4zIDMyLjIgNC4zIDEyNS42djg3aC00MS44Yy0zOC4yIDAtNDIuNi0wLjItNTAuMS0xLjctMTEuOC0yLjUtMjQtOS4yLTMyLjItMTcuOC02LjUtNi45LTYuMy03LjMtNS45IDEzLjYgMC41IDE3LjMgMC43IDE5LjIgMy4yIDI4LjYgNCAxNC45IDkuNSAyNiAxNy44IDM1LjkgMTEuMyAxMy42IDIyLjggMjEuMiAzOS4yIDI2LjMgMy41IDEgMTAuOSAxLjQgMzcuMSAxLjZsMzIuNyAwLjV2NDMuMyA0My40bC00Ni4xLTAuMy00Ni4zLTAuMy04LTMuMmMtOS41LTMuOC0xMy44LTYuNi0yMy4xLTE0LjlsLTYuOC02LjEgMC40IDE5LjFjMC41IDE3LjcgMC42IDE5LjcgMy4xIDI4LjcgOC43IDMxLjggMjkuNyA1NC41IDU3LjQgNjEuOSA2LjkgMS45IDkuNiAyIDM4LjUgMi40bDMwLjkgMC40djg5LjZjMCA1NC4xLTAuMyA5NC0wLjggMTAwLjgtMC41IDYuMi0yLjEgMTcuOC0zLjUgMjUuOS02LjUgMzcuMy0xOC4yIDY1LjQtMzUgODMuNmwtMy40IDMuN2gxNjkuMWMxMDEuMSAwIDE3Ni43LTAuNCAxODcuOC0wLjkgMTkuNS0xIDYzLTUuMyA3Mi44LTcuNCAzLjEtMC42IDguOS0xLjUgMTIuNy0yLjEgOC4xLTEuMiAyMS41LTQgNDAuOC04LjkgMjcuMi02LjggNTItMTUuMyA3Ni4zLTI2LjEgNy42LTMuNCAyOS40LTE0LjUgMzUuMi0xOCAzLjEtMS44IDYuOC00IDguMi00LjcgMy45LTIuMSAxMC40LTYuMyAxOS45LTEzLjEgNC43LTMuNCA5LjQtNi43IDEwLjQtNy40IDQuMi0yLjggMTguNy0xNC45IDI1LjMtMjEgMjUuMS0yMy4xIDQ2LjEtNDguOCA2Mi40LTc2LjMgMi4zLTQgNS4zLTkgNi42LTExLjEgMy4zLTUuNiAxNi45LTMzLjYgMTguMi0zNy44IDAuNi0xLjkgMS40LTMuOSAxLjgtNC4zIDIuNi0zLjQgMTcuNi01MC42IDE5LjQtNjAuOSAwLjYtMy4zIDAuOS0zLjggMy40LTQuMyAxLjYtMC4zIDI0LjktMC4zIDUxLjgtMC4xIDUzLjggMC40IDUzLjggMC40IDY1LjcgNS45IDYuNyAzLjEgOC43IDQuNSAxNi4xIDExLjIgOS43IDguNyA4LjggMTAuMSA4LjItMTEuNy0wLjQtMTIuOC0wLjktMjAuNy0xLjgtMjMuOS0zLjQtMTIuMy00LjItMTQuOS03LjItMjEuMS05LjgtMjEuNC0yNi4yLTM2LjctNDcuMi00NGwtOC4yLTMtMzMuNC0wLjQtMzMuMy0wLjUgMC40LTExLjdjMC40LTE1LjQgMC40LTQ1LjktMC4xLTYxLjZsLTAuNC0xMi42IDQ0LjYtMC4yYzM4LjItMC4yIDQ1LjMgMCA0OS41IDEuMSAxMi42IDMuNSAyMS4xIDguMyAzMS41IDE3LjhsNS44IDUuNHYtMTQuOGMwLTE3LjYtMC45LTI1LjQtNC41LTM3LTcuMS0yMy41LTIxLjEtNDEtNDEuMS01MS44LTEzLTctMTMuOC03LjItNTguNS03LjUtMjYuMi0wLjItMzkuOS0wLjYtNDAuNi0xLjItMC42LTAuNi0xLjEtMS42LTEuMS0yLjQgMC0wLjgtMS41LTcuMS0zLjUtMTMuOS0yMy40LTgyLjctNjcuMS0xNDguNC0xMzEtMTk3LjEtOC43LTYuNy0zMC0yMC44LTM4LjYtMjUuNi0zLjMtMS45LTYuOS0zLjktNy44LTQuNS00LjItMi4zLTI4LjMtMTQuMS0zNC4zLTE2LjYtMy42LTEuNi04LjMtMy42LTEwLjQtNC40LTM1LjMtMTUuMy05NC41LTI5LjgtMTM5LjctMzQuMy03LjQtMC43LTE3LjItMS44LTIxLjctMi4yLTIwLjQtMi4zLTQ4LjctMi42LTIwOS40LTIuNi0xMzUuOCAwLTE2OS45IDAuMy0xNjkuNCAxem0zMzAuNyA0My4zYzMzLjggMiA1NC42IDQuNiA3OC45IDEwLjUgNzQuMiAxNy42IDEyNi40IDU0LjggMTY0LjMgMTE3IDMuNSA1LjggMTguMyAzNiAyMC41IDQyLjEgMTAuNSAyOC4zIDE1LjYgNDUuMSAyMC4xIDY3LjMgMS4xIDUuNCAyLjYgMTIuNiAzLjMgMTYgMC43IDMuMyAxIDYuNCAwLjcgNi43LTAuNSAwLjQtMTAwLjkgMC42LTIyMy4zIDAuNWwtMjIyLjUtMC4yLTAuMy0xMjguNWMtMC4xLTcwLjYgMC0xMjkuMyAwLjMtMTMwLjRsMC40LTEuOWg3MS4xYzM5IDAgNzggMC40IDg2LjUgMC45em0yOTcuNSAzNTAuM2MwLjcgNC4zIDAuNyA3Ny4zIDAgODAuOWwtMC42IDIuNy0yMjcuNS0wLjItMjI3LjQtMC4zLTAuMi00Mi40Yy0wLjItMjMuMyAwLTQyLjcgMC4yLTQzLjEgMC4zLTAuNSA5Ny4yLTAuOCAyMjcuNy0wLjhoMjI3LjJ6bS0xMC4yIDE3MS43YzAuNSAxLjUtMS45IDEzLjgtNi44IDMzLjgtNS42IDIyLjUtMTMuMiA0NS4yLTIwLjkgNjItMy44IDguNi0xMy4zIDI3LjItMTUuNiAzMC43LTEuMSAxLjYtNC4zIDYuNy03LjEgMTEuMi0xOCAyOC4yLTQzLjcgNTMuOS03MyA3Mi45LTEwLjcgNi44LTMyLjcgMTguNC0zOC42IDIwLjItMS4yIDAuMy0yLjUgMC45LTMgMS4zLTAuNyAwLjYtOS44IDQtMjAuNCA3LjgtMTkuNSA2LjktNTYuNiAxNC40LTg2LjQgMTcuNS0xOS4zIDEuOS0yMi40IDItOTYuNyAyaC03Ni45di0xMjkuNy0xMjkuOGwyMjAuOS0wLjRjMTIxLjUtMC4yIDIyMS42LTAuNSAyMjIuNC0wLjcgMC45LTAuMSAxLjggMC41IDIuMSAxLjJ6IiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
            mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDg3MCI+PHBhdGggZD0ibTg4LjMgMWMwLjQgMC42IDIuNiAzLjMgNC43IDUuOSAxNS4zIDE4LjIgMjYuOCA0Ny44IDMzIDg1LjEgNC4xIDI0LjUgNC4zIDMyLjIgNC4zIDEyNS42djg3aC00MS44Yy0zOC4yIDAtNDIuNi0wLjItNTAuMS0xLjctMTEuOC0yLjUtMjQtOS4yLTMyLjItMTcuOC02LjUtNi45LTYuMy03LjMtNS45IDEzLjYgMC41IDE3LjMgMC43IDE5LjIgMy4yIDI4LjYgNCAxNC45IDkuNSAyNiAxNy44IDM1LjkgMTEuMyAxMy42IDIyLjggMjEuMiAzOS4yIDI2LjMgMy41IDEgMTAuOSAxLjQgMzcuMSAxLjZsMzIuNyAwLjV2NDMuMyA0My40bC00Ni4xLTAuMy00Ni4zLTAuMy04LTMuMmMtOS41LTMuOC0xMy44LTYuNi0yMy4xLTE0LjlsLTYuOC02LjEgMC40IDE5LjFjMC41IDE3LjcgMC42IDE5LjcgMy4xIDI4LjcgOC43IDMxLjggMjkuNyA1NC41IDU3LjQgNjEuOSA2LjkgMS45IDkuNiAyIDM4LjUgMi40bDMwLjkgMC40djg5LjZjMCA1NC4xLTAuMyA5NC0wLjggMTAwLjgtMC41IDYuMi0yLjEgMTcuOC0zLjUgMjUuOS02LjUgMzcuMy0xOC4yIDY1LjQtMzUgODMuNmwtMy40IDMuN2gxNjkuMWMxMDEuMSAwIDE3Ni43LTAuNCAxODcuOC0wLjkgMTkuNS0xIDYzLTUuMyA3Mi44LTcuNCAzLjEtMC42IDguOS0xLjUgMTIuNy0yLjEgOC4xLTEuMiAyMS41LTQgNDAuOC04LjkgMjcuMi02LjggNTItMTUuMyA3Ni4zLTI2LjEgNy42LTMuNCAyOS40LTE0LjUgMzUuMi0xOCAzLjEtMS44IDYuOC00IDguMi00LjcgMy45LTIuMSAxMC40LTYuMyAxOS45LTEzLjEgNC43LTMuNCA5LjQtNi43IDEwLjQtNy40IDQuMi0yLjggMTguNy0xNC45IDI1LjMtMjEgMjUuMS0yMy4xIDQ2LjEtNDguOCA2Mi40LTc2LjMgMi4zLTQgNS4zLTkgNi42LTExLjEgMy4zLTUuNiAxNi45LTMzLjYgMTguMi0zNy44IDAuNi0xLjkgMS40LTMuOSAxLjgtNC4zIDIuNi0zLjQgMTcuNi01MC42IDE5LjQtNjAuOSAwLjYtMy4zIDAuOS0zLjggMy40LTQuMyAxLjYtMC4zIDI0LjktMC4zIDUxLjgtMC4xIDUzLjggMC40IDUzLjggMC40IDY1LjcgNS45IDYuNyAzLjEgOC43IDQuNSAxNi4xIDExLjIgOS43IDguNyA4LjggMTAuMSA4LjItMTEuNy0wLjQtMTIuOC0wLjktMjAuNy0xLjgtMjMuOS0zLjQtMTIuMy00LjItMTQuOS03LjItMjEuMS05LjgtMjEuNC0yNi4yLTM2LjctNDcuMi00NGwtOC4yLTMtMzMuNC0wLjQtMzMuMy0wLjUgMC40LTExLjdjMC40LTE1LjQgMC40LTQ1LjktMC4xLTYxLjZsLTAuNC0xMi42IDQ0LjYtMC4yYzM4LjItMC4yIDQ1LjMgMCA0OS41IDEuMSAxMi42IDMuNSAyMS4xIDguMyAzMS41IDE3LjhsNS44IDUuNHYtMTQuOGMwLTE3LjYtMC45LTI1LjQtNC41LTM3LTcuMS0yMy41LTIxLjEtNDEtNDEuMS01MS44LTEzLTctMTMuOC03LjItNTguNS03LjUtMjYuMi0wLjItMzkuOS0wLjYtNDAuNi0xLjItMC42LTAuNi0xLjEtMS42LTEuMS0yLjQgMC0wLjgtMS41LTcuMS0zLjUtMTMuOS0yMy40LTgyLjctNjcuMS0xNDguNC0xMzEtMTk3LjEtOC43LTYuNy0zMC0yMC44LTM4LjYtMjUuNi0zLjMtMS45LTYuOS0zLjktNy44LTQuNS00LjItMi4zLTI4LjMtMTQuMS0zNC4zLTE2LjYtMy42LTEuNi04LjMtMy42LTEwLjQtNC40LTM1LjMtMTUuMy05NC41LTI5LjgtMTM5LjctMzQuMy03LjQtMC43LTE3LjItMS44LTIxLjctMi4yLTIwLjQtMi4zLTQ4LjctMi42LTIwOS40LTIuNi0xMzUuOCAwLTE2OS45IDAuMy0xNjkuNCAxem0zMzAuNyA0My4zYzMzLjggMiA1NC42IDQuNiA3OC45IDEwLjUgNzQuMiAxNy42IDEyNi40IDU0LjggMTY0LjMgMTE3IDMuNSA1LjggMTguMyAzNiAyMC41IDQyLjEgMTAuNSAyOC4zIDE1LjYgNDUuMSAyMC4xIDY3LjMgMS4xIDUuNCAyLjYgMTIuNiAzLjMgMTYgMC43IDMuMyAxIDYuNCAwLjcgNi43LTAuNSAwLjQtMTAwLjkgMC42LTIyMy4zIDAuNWwtMjIyLjUtMC4yLTAuMy0xMjguNWMtMC4xLTcwLjYgMC0xMjkuMyAwLjMtMTMwLjRsMC40LTEuOWg3MS4xYzM5IDAgNzggMC40IDg2LjUgMC45em0yOTcuNSAzNTAuM2MwLjcgNC4zIDAuNyA3Ny4zIDAgODAuOWwtMC42IDIuNy0yMjcuNS0wLjItMjI3LjQtMC4zLTAuMi00Mi40Yy0wLjItMjMuMyAwLTQyLjcgMC4yLTQzLjEgMC4zLTAuNSA5Ny4yLTAuOCAyMjcuNy0wLjhoMjI3LjJ6bS0xMC4yIDE3MS43YzAuNSAxLjUtMS45IDEzLjgtNi44IDMzLjgtNS42IDIyLjUtMTMuMiA0NS4yLTIwLjkgNjItMy44IDguNi0xMy4zIDI3LjItMTUuNiAzMC43LTEuMSAxLjYtNC4zIDYuNy03LjEgMTEuMi0xOCAyOC4yLTQzLjcgNTMuOS03MyA3Mi45LTEwLjcgNi44LTMyLjcgMTguNC0zOC42IDIwLjItMS4yIDAuMy0yLjUgMC45LTMgMS4zLTAuNyAwLjYtOS44IDQtMjAuNCA3LjgtMTkuNSA2LjktNTYuNiAxNC40LTg2LjQgMTcuNS0xOS4zIDEuOS0yMi40IDItOTYuNyAyaC03Ni45di0xMjkuNy0xMjkuOGwyMjAuOS0wLjRjMTIxLjUtMC4yIDIyMS42LTAuNSAyMjIuNC0wLjcgMC45LTAuMSAxLjggMC41IDIuMSAxLjJ6IiBmaWxsPSJibGFjayIvPjwvc3ZnPg==");
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            /* Black glyph on transparent (or flat) raster: alpha uses PNG transparency */
            -webkit-mask-source-type: alpha;
            mask-source-type: alpha;
            isolation: isolate;
            transform: translateZ(0);
        }
        .sym-dirham-inline--hero {
            height: 1.08em;
            width: calc(1.08em * 638 / 576);
            vertical-align: -0.12em;
        }
        /* Tier cards: backdrop-filter can break masks; explicit fill matches headline gold */
        .dark #sanctuary-tiers .sanctuary-tier-price p.text-primary .sym-dirham-inline,
        .dark #sanctuary-tiers .sanctuary-tier-billing-toggle .text-primary .sym-dirham-inline {
            background-color: #ffd700;
        }
        html:not(.dark) #sanctuary-tiers .glass-panel .sanctuary-tier-price p.text-primary .sym-dirham-inline,
        html:not(.dark) #sanctuary-tiers .glass-panel .sanctuary-tier-billing-toggle .text-primary .sym-dirham-inline {
            background-color: #7dd3fc !important;
        }
        /* Slightly larger mark in tier headline prices */
        #sanctuary-tiers .sanctuary-tier-price > .sanctuary-tier-price-mode--plan p.text-primary .sym-dirham-inline {
            height: 1.12em;
            width: calc(1.12em * 638 / 576);
            vertical-align: -0.11em;
        }
        /* Tier cards: real PNG (CSS mask often fails inside backdrop-filter / glass) */
        #sanctuary-tiers .sym-dirham-tierpng {
            display: inline-block;
            height: 1.12em;
            width: calc(1.12em * 638 / 576);
            max-width: none;
            object-fit: contain;
            vertical-align: -0.12em;
            flex-shrink: 0;
            user-select: none;
            pointer-events: none;
        }
        /* Black-on-white PNG: invert swaps fg/bg, then tint — never use brightness(0) (makes a solid square) */
        .dark #sanctuary-tiers .sym-dirham-tierpng {
            filter: invert(1) sepia(1) saturate(3.2) hue-rotate(3deg) brightness(1.12) contrast(1.08);
        }
        html:not(.dark) #sanctuary-tiers .glass-panel .sym-dirham-tierpng {
            filter: invert(1) sepia(1) saturate(2.4) hue-rotate(168deg) brightness(1.05) contrast(1.05);
        }
        .dark #sanctuary-tiers p.text-slate-600 .sym-dirham-tierpng,
        .dark #sanctuary-tiers p.text-slate-500 .sym-dirham-tierpng {
            filter: invert(1) sepia(0.35) saturate(1.8) hue-rotate(195deg) brightness(0.92) contrast(0.95);
        }
        html:not(.dark) #sanctuary-tiers .glass-panel p.text-slate-600 .sym-dirham-tierpng,
        html:not(.dark) #sanctuary-tiers .glass-panel p.text-slate-500 .sym-dirham-tierpng {
            filter: invert(1) sepia(0.45) saturate(2) hue-rotate(185deg) brightness(0.88) contrast(0.98);
        }
        .dark #sanctuary-tiers li.text-slate-600 .sym-dirham-tierpng {
            filter: invert(1) sepia(0.35) saturate(1.8) hue-rotate(195deg) brightness(0.92) contrast(0.95);
        }
        html:not(.dark) #sanctuary-tiers .glass-panel li.text-slate-600 .sym-dirham-tierpng {
            filter: invert(1) sepia(0.45) saturate(2) hue-rotate(185deg) brightness(0.88) contrast(0.98);
        }
        #sanctuary-per-employee-hint .sym-dirham-tierpng {
            height: 0.95em;
            width: calc(0.95em * 638 / 576);
            vertical-align: -0.1em;
        }
        .dark #sanctuary-per-employee-hint .sym-dirham-tierpng {
            filter: invert(1) sepia(1) saturate(3.2) hue-rotate(3deg) brightness(1.12) contrast(1.08);
        }
        html:not(.dark) #sanctuary-per-employee-hint .sym-dirham-tierpng {
            filter: invert(1) sepia(1) saturate(2.4) hue-rotate(168deg) brightness(1.05) contrast(1.05);
        }

/* —— Landing: mobile nav drawer (functional on small screens) —— */
.landing-nav-drawer {
    background: rgba(5, 7, 10, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    max-height: min(70vh, 420px);
    overflow-y: auto;
}
html:not(.dark) .landing-nav-drawer {
    background: rgba(255, 253, 250, 0.96);
    border-bottom-color: rgba(15, 23, 42, 0.1);
}
.landing-nav-drawer__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0.75rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.landing-nav-drawer a {
    display: block;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    font-family: Lexend, system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.85);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}
html:not(.dark) .landing-nav-drawer a {
    color: rgba(51, 65, 85, 0.95);
}
.landing-nav-drawer a:hover,
.landing-nav-drawer a:focus-visible {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
    outline: none;
}
#landing-nav-menu-btn[aria-expanded='true'] {
    border-color: rgba(255, 215, 0, 0.45);
    background: rgba(255, 215, 0, 0.08);
}

/* ── tapx step2 ──────────────────────── */
.tapx-sec-label{font-size:7.5px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,215,0,.7);margin:0 0 10px;padding:0 0 6px 2px;border-bottom:1px solid rgba(255,215,0,.1);display:flex;align-items:center;gap:6px;}
.tapx-field-wrap{display:flex;flex-direction:column;gap:4px;}
.tapx-lbl{
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:rgba(255,215,0,.6);
  padding-left:12px;
}
.tapx-inp{
  width:100%;
  background:#0a0a0f !important;
  border:1px solid rgba(255,215,0,.15);
  border-radius:9999px !important;
  padding:.5rem 1rem;
  font-size:.75rem;
  font-weight:500;
  color:#fff !important;
  outline:none;
  font-family:inherit;
  box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance:none;
  letter-spacing:.01em;
}
.tapx-inp:focus{
  background:#000 !important;
  border-color:rgba(255,215,0,.55);
  box-shadow:0 0 0 3px rgba(255,215,0,.09);
}
.tapx-inp:hover:not(:focus){
  border-color:rgba(255,215,0,.28);
  background:#050508 !important;
}
.tapx-inp::placeholder{color:rgba(100,116,139,.55);font-weight:400;}
.tapx-sel{
  appearance:none !important;
  -webkit-appearance:none !important;
  cursor:pointer;
  border-radius:9999px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,215,0,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:2.2rem !important;
}
.tapx-sel option{background:#111;color:#fff;}
.tapx-pay-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:.875rem;border:1.5px solid rgba(255,215,0,.15);background:#000;cursor:pointer;transition:border-color .22s,background .22s,transform .18s;user-select:none;}
.tapx-pay-opt:hover{border-color:rgba(255,215,0,.35);transform:translateY(-1px);}
.tapx-pay-opt.tapx-selected{border-color:#FFD700!important;background:rgba(255,215,0,.08);box-shadow:0 0 0 1px rgba(255,215,0,.28);}

/* nav scroll ──────────────────────────── */
nav.nav-scrolled{
  background:#ffffff !important;
  border-bottom-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.10) !important;
}
nav.nav-scrolled a { color: #111 !important; }
nav.nav-scrolled a:hover { color: #000 !important; }
nav.nav-scrolled .text-primary { color: #000 !important; }
nav.nav-scrolled .text-slate-400 { color: #444 !important; }
nav.nav-scrolled .border-primary { border-color: #000 !important; }
nav.nav-scrolled .text-sky-400 { color: #0ea5e9 !important; }
nav.nav-scrolled .bg-white\/5 { background: rgba(0,0,0,0.06) !important; }
nav.nav-scrolled .border-white\/10 { border-color: rgba(0,0,0,0.12) !important; }

/* ─── NAV BAR — TEXT VISIBILITY OVER DARK CHARCOAL HERO ───
   Default (unscrolled) state — text needs to be clearly readable against
   the new gray+black gradient hero background. Brighten the muted slate
   links so they pop, keep gold primary as accent. */
nav.fixed:not(.nav-scrolled) .text-slate-400 {
    color: #c8d2e0 !important;   /* slate-200 — clearly visible on dark bg */
}
nav.fixed:not(.nav-scrolled) .text-slate-400:hover {
    color: #FFD700 !important;   /* gold on hover */
}
nav.fixed:not(.nav-scrolled) a {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);  /* slight shadow for crispness */
}
/* tier card hover ─────────────────────── */
.sanctuary-tier-card{transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease!important;}
.sanctuary-tier-card:hover{transform:translateY(-5px)!important;box-shadow:0 20px 56px rgba(0,0,0,.28),0 0 0 1px rgba(255,215,0,.2)!important;}
/* button lift ─────────────────────────── */
.squishy-btn{transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease!important;}
.squishy-btn:hover{transform:translateY(-2px) scale(1.022);}
.squishy-btn:active{transform:scale(.975);}
/* partner CSS → see full block below */
/* tier growth shimmer */
@keyframes tier-shimmer-gold{0%,100%{box-shadow:0 0 0 1px rgba(255,215,0,.22),0 24px 60px rgba(0,0,0,.4)}50%{box-shadow:0 0 0 1.5px rgba(255,215,0,.5),0 32px 80px rgba(0,0,0,.5),0 0 40px rgba(255,215,0,.08)}}
.sanctuary-tier-card[data-sanctuary-tier="growth"]{animation:tier-shimmer-gold 4s ease-in-out infinite;}
/* next button ─────────────────────────── */
#tapx-next-btn{background:#FFD700;color:#000;font-weight:900;letter-spacing:.12em;transition:filter .2s,transform .18s;}
#tapx-next-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}

/* ── Dirham symbol WHITE on all tiers ── */
/* Target path inside SVG (overrides inline fill:currentColor) */
#sanctuary-tiers .sym-dirham-tierpng path,
#sanctuary-per-employee-hint .sym-dirham-tierpng path {
    fill: #ffffff !important;
}
/* SVG element itself */
#sanctuary-tiers .sym-dirham-tierpng,
#sanctuary-per-employee-hint .sym-dirham-tierpng {
    color: #ffffff !important;
    filter: none !important;
}
/* Override ALL dark/light filter rules */
.dark #sanctuary-tiers .sym-dirham-tierpng,
html:not(.dark) #sanctuary-tiers .glass-panel .sym-dirham-tierpng,
.dark #sanctuary-tiers p.text-slate-600 .sym-dirham-tierpng,
.dark #sanctuary-tiers p.text-slate-500 .sym-dirham-tierpng,
html:not(.dark) #sanctuary-tiers .glass-panel p.text-slate-600 .sym-dirham-tierpng,
html:not(.dark) #sanctuary-tiers .glass-panel p.text-slate-500 .sym-dirham-tierpng,
.dark #sanctuary-tiers li.text-slate-600 .sym-dirham-tierpng,
html:not(.dark) #sanctuary-tiers .glass-panel li.text-slate-600 .sym-dirham-tierpng,
.dark #sanctuary-per-employee-hint .sym-dirham-tierpng,
html:not(.dark) #sanctuary-per-employee-hint .sym-dirham-tierpng {
    filter: none !important;
}
/* sym-dirham-inline (CSS mask) — white in tiers */
#sanctuary-tiers .sym-dirham-inline,
#sanctuary-tiers .sanctuary-tier-price .sym-dirham-inline,
#sanctuary-tiers .sanctuary-tier-billing-toggle .sym-dirham-inline,
#sanctuary-per-employee-hint .sym-dirham-inline {
    background-color: #ffffff !important;
}

/* ── Visa Arc (below tiers) ─────────────────────────────── */
.visa-arc-wrap {
    position: relative;
    width: 100%;
    margin: -2rem 0 3rem;
    padding: 0;
    overflow: hidden;
}
.visa-arc-title {
    text-align: center;
    font-size: 0.575rem;
    font-weight: 900;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,215,0,0.6);
    margin-bottom: 0.75rem;
}
/* SVG curved path background */
.visa-arc-svg {
    display: block;
    width: 100%;
    height: clamp(7rem, 18vw, 11rem);
    overflow: visible;
    position: relative;
    z-index: 0;
}
/* Cards scroll on top of the arc line */
.visa-arc-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: -0.5rem;
}
.visa-arc-track { overflow: hidden; padding: 1rem 0 1.25rem; }
.visa-arc-row {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: visa-scroll 35s linear infinite;
    align-items: center;
}
.visa-arc-row:hover { animation-play-state: paused; }
@keyframes visa-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.visa-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 10px 14px 9px;
    border-radius: 0.875rem;
    background: rgba(255,255,255,0.97);
    border: 1.5px solid rgba(200,210,220,0.45);
    box-shadow: 0 3px 14px rgba(0,0,0,0.12), inset 0 1px 0 #fff;
    min-width: 88px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.visa-chip:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 10px 28px rgba(0,0,0,0.16), 0 0 0 1.5px rgba(255,215,0,0.4);
}
.visa-chip-logo {
    height: 28px;
    width: auto;
    max-width: 72px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}
.visa-chip-name {
    font-family: 'Lexend', sans-serif;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1e293b;
    text-align: center;
    white-space: nowrap;
}
/* arc line path */
.visa-arc-line-base { fill:none; stroke:rgba(255,215,0,0.12); stroke-width:2; stroke-linecap:round; }
.visa-arc-line-flow {
    fill: none; stroke: rgba(255,215,0,0.5); stroke-width: 2;
    stroke-linecap: round; stroke-dasharray: 10 30;
    animation: visa-arc-dash 3s linear infinite;
    filter: drop-shadow(0 0 5px rgba(255,215,0,0.3));
}
@keyframes visa-arc-dash { to { stroke-dashoffset: -80; } }
.visa-arc-fade-l {
    position:absolute;top:0;bottom:0;left:0;width:90px;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,#010204 0%,transparent 100%);
}
.visa-arc-fade-r {
    position:absolute;top:0;bottom:0;right:0;width:90px;z-index:2;pointer-events:none;
    background:linear-gradient(270deg,#010204 0%,transparent 100%);
}
html:not(.dark) .visa-arc-fade-l { background:linear-gradient(90deg,#fefdfa 0%,transparent 100%); }
html:not(.dark) .visa-arc-fade-r { background:linear-gradient(270deg,#fefdfa 0%,transparent 100%); }
@media (prefers-reduced-motion:reduce) { .visa-arc-row { animation:none; } }

/* ═══ Partner Marquee — full CSS ══════════════════════════ */
.ppm-section{margin:clamp(2rem,5vw,3.5rem) auto;max-width:100%;overflow:hidden;}

html:not(.dark) 
.ppm-stage{position:relative;overflow:hidden;padding:0.25rem 0;}
.ppm-track{overflow:hidden;padding:1rem 0 1.25rem;}
.ppm-row{
  display:flex;
  gap:1rem;
  width:max-content;
  animation:ppm-scroll 38s linear infinite;
}
.ppm-row:hover{animation-play-state:paused;}
@keyframes ppm-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ppm-card{
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  width:116px;height:106px;flex-shrink:0;
  border-radius:.875rem;
  background:#ffffff;
  border:1.5px solid rgba(200,210,220,0.5);
  box-shadow:0 2px 12px rgba(0,0,0,.10),0 6px 28px rgba(0,0,0,.06),inset 0 1px 0 #fff;
  padding:.7rem .5rem .65rem;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,border-color .25s ease;
  cursor:default;position:relative;overflow:hidden;
}
.ppm-card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.55) 0%,transparent 55%);pointer-events:none;}
.ppm-card:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 10px 32px rgba(0,0,0,.14),0 0 0 2px rgba(255,215,0,.45),inset 0 1px 0 #fff;border-color:rgba(255,215,0,.5);}
.ppm-logo-wrap{width:60px;height:50px;display:flex;align-items:center;justify-content:center;}
.ppm-logo-img{max-width:56px;max-height:46px;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.12));}
.ppm-fallback{display:none;width:44px;height:44px;border-radius:10px;background:rgba(0,35,70,.08);align-items:center;justify-content:center;font-family:'Lexend',sans-serif;font-size:.85rem;font-weight:900;color:#002366;letter-spacing:.04em;}
.ppm-name{font-family:'Lexend',sans-serif;font-size:.52rem;font-weight:800;letter-spacing:.065em;text-transform:uppercase;text-align:center;color:#0f172a;line-height:1.3;white-space:nowrap;margin-top:.35rem;}
.ppm-fade{position:absolute;top:0;bottom:0;pointer-events:none;z-index:2;}
.ppm-fade--l{left:0;width:90px;background:linear-gradient(90deg,#010204 0%,transparent 100%);}
.ppm-fade--r{right:0;width:90px;background:linear-gradient(270deg,#010204 0%,transparent 100%);}
html:not(.dark) .ppm-fade--l{background:linear-gradient(90deg,#fefdfa 0%,transparent 100%);}
html:not(.dark) .ppm-fade--r{background:linear-gradient(270deg,#fefdfa 0%,transparent 100%);}
@media (prefers-reduced-motion:reduce){.ppm-row{animation:none;}}

/* ═══════════════════════════════════════════════════════════
   DARK MODE: Specific text elements → Yellow (#FFD700)
   (Only these 5 elements from user screenshots)
   ═══════════════════════════════════════════════════════════ */

/* CTA buttons: default styling restored */

/* 4. "1TapX" brand logo text — yellow in dark mode */
html.dark a[aria-label="1TapX — home"] {
    color: #FFD700 !important;
}

/* 5. "SANCTUARY" nav active link — yellow in dark mode */
html.dark nav a.border-b-2.border-primary,
html.dark header a.border-b-2.border-primary {
    color: #FFD700 !important;
    border-color: #FFD700 !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  BRAND THEME                                                  ║
   ║  LIGHT MODE → Dark Blue (#001D3D) + Yellow (#FFD700)          ║
   ║  DARK  MODE → Black    (#000000) + Yellow (#FFD700)           ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────
   DARK MODE: Black + Yellow
───────────────────────────────────────────── */

/* Background → pure black */
html.dark body { background-color: #000000 !important; }
html.dark .bg-background-dark { background-color: #000000 !important; }
html.dark .sanctuary-backdrop__base { background: #000000 !important; }

/* ALL headings → Yellow */
html.dark h1:not(.hero-headline-fines),
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5 { color: #FFD700 !important; }

/* hero headline → LIGHT BLUE (matches image 1 screenshot) */
html.dark .hero-headline-fines {
    color: #7DD3FC !important;
    text-shadow: 0 0 30px rgba(125, 211, 252, 0.22);
}

/* navy-depth-3d → Yellow */
html.dark .navy-depth-3d { color: #FFD700 !important; text-shadow: none !important; }

/* Logo "1TapX" → LIGHT BLUE (was yellow) */
html.dark a[aria-label="1TapX — home"] { color: #7DD3FC !important; }
/* Landing page nav → LIGHT BLUE (NOT dashboard) */
html.dark nav a:not(#tapx-dash-overlay *),
html.dark header nav a:not(#tapx-dash-overlay *) { color: #7DD3FC !important; }
/* Active "HOME" link underline also light blue */
html.dark nav a.border-b-2.border-primary { border-color: #7DD3FC !important; }
/* Dashboard nav → light gray */
#tapx-dash-overlay #dash-nav .nav-link { color: #9ca3af !important; }
#tapx-dash-overlay #dash-nav .nav-link.active { color: #ffffff !important; }
#tapx-dash-overlay #dash-nav .nav-link:hover { color: #ffffff !important; }
html.dark nav a.border-b-2,
html.dark nav a[class*="border-b"] { border-color: #FFD700 !important; }

/* Secondary nav links slight dimming */
html.dark nav a.text-slate-400 { color: rgba(255,215,0,0.65) !important; }

/* text-primary → Yellow (enforced) */
html.dark .text-primary { color: #FFD700 !important; }

/* Section/card labels (eyebrows) */
html.dark .text-on-surface { color: #e1e2eb; }
html.dark p.text-on-surface { color: #e1e2eb; }

/* Ticker/marquee text */
html.dark .ticker-item,
html.dark [class*="ticker"] span { color: #FFD700 !important; }

/* SANCTUARY nav active underline */
html.dark .border-primary { border-color: #FFD700 !important; }

/* Secondary CTA button (PULSE LOG) — outlined style for both themes */
html.dark .hero-cta-secondary { 
    background-color: #0a0a0a !important; 
    color: #FFD700 !important; 
    border-color: #FFD700 !important;
}
.hero-cta-secondary:hover { 
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,23,42,0.15) !important;
}
html.dark .hero-cta-secondary:hover {
    box-shadow: 0 8px 20px rgba(255,215,0,0.25) !important;
}

/* Cards subtle overlay on black */
html.dark .glass-panel,
html.dark .dash-card,
html.dark .vinyl-texture {
    background-color: rgba(10,10,10,0.85) !important;
    border-color: rgba(255,215,0,0.12) !important;
}

/* FAQ section headings */
html.dark .faq-question,
html.dark details summary span { color: #FFD700; }

/* ─────────────────────────────────────────────
   LIGHT MODE: Dark Blue + Yellow
───────────────────────────────────────────── */

/* Background → light blue-white */
html:not(.dark) body { background-color: #f0f7ff !important; color: #001D3D !important; }

/* ALL headings → Dark Blue */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) h5 { color: #001D3D !important; }

/* navy-depth-3d → Dark Blue */
html:not(.dark) .navy-depth-3d { color: #001D3D !important; }

/* Logo → Dark Blue */
html:not(.dark) a[aria-label="1TapX — home"] { color: #001D3D !important; }

/* Nav links → Dark Blue */
html:not(.dark) nav a { color: #001D3D !important; }
html:not(.dark) nav a.text-slate-400 { color: #334155 !important; }
html:not(.dark) nav a.border-b-2,
html:not(.dark) nav a[class*="border-b"] {
    color: #001D3D !important;
    border-color: #FFD700 !important;
}

/* text-primary → Yellow (accent) */
html:not(.dark) .text-primary { color: #FFD700 !important; }

/* Body paragraph text → Dark Blue */
html:not(.dark) p { color: #1e293b; }
html:not(.dark) .text-slate-400,
html:not(.dark) .text-slate-500,
html:not(.dark) .text-slate-600 { color: #334155 !important; }
html:not(.dark) .text-slate-300 { color: #475569 !important; }

/* hero headline light mode → Dark Blue */
html:not(.dark) .hero-headline-fines { color: #001D3D !important; }

/* Border accent → Yellow */
html:not(.dark) .border-primary { border-color: #FFD700 !important; }
html:not(.dark) .text-on-surface { color: #001D3D !important; }

/* ── Dark mode: Sanctuary tier badge + icon + buttons → Yellow ── */
html.dark .absolute.-top-3 .text-background-dark,
html.dark div[class*="absolute"][class*="-top-3"] { color: #FFD700 !important; }

html.dark span.material-symbols-outlined.text-background-dark {
    color: #FFD700 !important;
}

html.dark button[data-tier-quote-open].text-background-dark,
html.dark button[data-tier-quote-open] {
    color: #FFD700 !important;
}

/* "Recommended" pill + tier icon + Upgrade/Get buttons */
html.dark #sanctuary-tiers .text-background-dark { color: #FFD700 !important; }
html.dark #sanctuary-tiers button.bg-primary { color: #FFD700 !important; }
html.dark #sanctuary-tiers .bg-primary { color: #FFD700 !important; }

/* Sanctuary Tiers — feature list items */
html:not(.dark) #sanctuary-tiers ul li { color: #000000 !important; }
html.dark #sanctuary-tiers ul li,
html.dark #sanctuary-tiers ul li.flex { color: #ffffff !important; }




*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#FFD700;
  --gold-dim:rgba(255,215,0,.12);
  --bg:#010204;
  --surface:#0d1017;
  --surface2:#141820;
  --border:rgba(255,255,255,.07);
  --text:#e1e2eb;
  --muted:#64748b;
  --radius:1rem;
}
#tapx-login-overlay{height:100%;font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}

/* ── Background ── */
.bg-wrap{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35}
.bg-orb--a{width:600px;height:600px;top:-15%;left:-10%;background:radial-gradient(circle,rgba(255,215,0,.18) 0%,transparent 65%);animation:floatA 22s ease-in-out infinite}
.bg-orb--b{width:500px;height:500px;bottom:-10%;right:-8%;background:radial-gradient(circle,rgba(0,200,255,.12) 0%,transparent 65%);animation:floatB 28s ease-in-out infinite}
.bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,215,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,215,0,.03) 1px,transparent 1px);background-size:52px 52px}
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(4%,5%)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-4%,-4%)}}

/* ── Layout ── */
.page{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}

/* ── Left Panel ── */
.left{display:none}

/* ── Right Panel ── */
.right{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}
.card{width:100%;max-width:480px;background:#0f1623;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:44px 40px}

/* Card Header */
.card-header{text-align:center;margin-bottom:32px}
.card-logo{font-family:'Lexend',sans-serif;font-weight:900;font-size:34px;color:var(--gold);letter-spacing:-.02em;margin-bottom:6px}
.card-sub{font-size:14px;color:var(--muted);font-weight:500}

/* Mobile brand */
.mobile-brand{display:none}

/* Tabs */
.tabs{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:32px}
.tab{flex:1;padding:10px;border:2px solid transparent;background:transparent;border-radius:9px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;transition:all .25s}
.tab.active{background:var(--gold);color:#000;border-color:#3b82f6;font-weight:800}

/* Form */
.form-title{font-family:'Lexend',sans-serif;font-weight:900;font-size:24px;color:#fff;margin-bottom:6px;letter-spacing:-.02em}
.form-sub{font-size:13px;color:var(--muted);margin-bottom:28px;line-height:1.5}
.field{margin-bottom:16px}
.field label{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.field input{width:100%;padding:13px 16px;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:500;outline:none;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:rgba(100,116,139,.5)}
.field input:focus{border-color:rgba(255,215,0,.4);box-shadow:0 0 0 3px rgba(255,215,0,.08)}
.field input.error{border-color:#ef4444}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Divider */
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;font-size:11px;color:var(--muted)}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* Submit btn */
.submit-btn{width:100%;padding:14px;background:var(--gold);border:none;border-radius:10px;font-family:'Lexend',sans-serif;font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#000;cursor:pointer;transition:filter .2s,transform .1s;margin-top:4px}
.submit-btn:hover{filter:brightness(1.08)}
.submit-btn:active{transform:scale(.98)}
.submit-btn:disabled{opacity:.6;cursor:not-allowed}

/* Forgot */
.forgot{text-align:right;margin-bottom:16px}
.forgot a{font-size:12px;color:var(--gold);text-decoration:none;font-weight:600}
.forgot a:hover{text-decoration:underline}

/* Terms */
.terms{font-size:11px;color:var(--muted);line-height:1.6;margin-top:16px;text-align:center}
.terms a{color:var(--gold);text-decoration:none}

/* Error msg */
.err-msg{font-size:11px;color:#ef4444;margin-top:4px;display:none}

/* Success */
.success-screen{display:none;text-align:center;padding:20px 0}
.success-icon{width:64px;height:64px;background:rgba(255,215,0,.1);border:2px solid rgba(255,215,0,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 20px}
.success-title{font-family:'Lexend',sans-serif;font-weight:900;font-size:22px;color:#fff;margin-bottom:8px}
.success-sub{font-size:13px;color:var(--muted);line-height:1.7}

/* Google btn */
.google-btn{width:100%;padding:13px;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,border-color .2s}
.google-btn:hover{background:var(--surface2);border-color:rgba(255,255,255,.12)}
.google-icon{width:18px;height:18px}

/* Toast */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:#1e293b;border:1px solid var(--border);color:#fff;padding:12px 24px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;transition:all .3s;pointer-events:none;z-index:999;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}




:root {
            --accent-blue: #00A3FF;
            --accent-orange: #FF4D00;
            --accent-teal: #00C49F;
            --tapx-cyan: #00e5ff;
            --tapx-premium-ease: cubic-bezier(0.16, 1, 0.3, 1);
            --tapx-premium-decel: cubic-bezier(0.22, 1, 0.36, 1);
            --tapx-spring: cubic-bezier(0.34, 1.22, 0.64, 1);
            --tapx-gold: #e8c84a;
            --tapx-gold-soft: rgba(255, 204, 0, 0.42);
            --tapx-cta-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 163, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14);
            --tapx-icon-border: rgba(148, 163, 184, 0.22);
        }
        /* ══════════════════════════════════════════
           1TAPX THEME SYSTEM — CSS Variables
           Dark (default) + Light mode
           ══════════════════════════════════════════ */

        /* Dark theme (default) */
        #tapx-dash-overlay {
            --t-bg:        #040608;
            --t-bg2:       #0a0e1a;
            --t-sidebar:   #07090f;
            --t-card:      rgba(255,255,255,0.04);
            --t-card-bg:   #111318;
            --t-border:    rgba(255,255,255,0.07);
            --t-text:      #c8d2e0;
            --t-text-sub:  #94a3b8;
            --t-text-muted:#64748b;
            --t-nav-text:  #9ca3af;
            --t-nav-hover: rgba(255,255,255,0.06);
            --t-nav-active:rgba(0,163,255,0.12);
            --t-nav-active-text:#ffffff;
            --t-input-bg:  rgba(255,255,255,0.05);
            --t-input-border:rgba(255,255,255,0.1);
            --t-input-text:#c8d2e0;
            --t-header-bg: rgba(4,6,8,0.95);
            --t-shadow:    0 4px 24px rgba(0,0,0,0.4);
            --tapx-switch-track:#1e293b;
            --tw-dash-bg:  #040608;
            --tw-dash-card:#111318;
            --tw-dash-line:rgba(255,255,255,0.07);
            --dash-bg:     #040608;
            --dash-card:   #111318;
            transition:
                background 0.35s ease,
                color 0.35s ease,
                border-color 0.35s ease;
        }

        /* Light theme — soft sky-blue palette (easy on the eyes) */
        #tapx-dash-overlay.light {
            --t-bg:        #f0f8ff;       /* alice blue — very light sky */
            --t-bg2:       #e6f3fb;       /* slightly deeper sky tint */
            --t-sidebar:   #f7fcff;       /* near-white with blue cast */
            --t-card:      #ffffff;       /* pure white cards for crisp contrast */
            --t-card-bg:   #ffffff;       /* pure white cards */
            --t-border:    #cfe7f5;       /* soft sky-blue border */
            --t-text:      #000000;       /* black text (per user request) */
            --t-text-sub:  #000000;       /* black sub text */
            --t-text-muted:#1a1a1a;       /* near-black for muted */
            --t-nav-text:  #000000;       /* black for nav text (main + mini sidebars) */
            --t-nav-hover: rgba(56, 189, 248, 0.10);
            --t-nav-active:rgba(56, 189, 248, 0.22);  /* sky blue active state */
            --t-nav-active-text:#000000;  /* black even when active */
            --t-input-bg:  #ffffff;       /* white input bg */
            --t-input-border:#bdddf0;     /* soft sky border */
            --t-input-text:#000000;       /* black text in inputs */
            --t-header-bg: rgba(240, 248, 255, 0.96);
            --t-shadow:    0 4px 24px rgba(30, 80, 180, 0.08);
            --tapx-switch-track:#38bdf8;  /* sky-400 switch */
            --tw-dash-bg:  #f0f8ff;
            --tw-dash-card:#ffffff;
            --tw-dash-line:#cfe7f5;
            --dash-bg:     #f0f8ff;
            --dash-card:   #ffffff;
        }

        /* ── Apply variables to all elements ── */
        #tapx-dash-overlay,
        #tapx-dash-overlay * {
            transition:
                background-color 0.35s ease,
                border-color 0.35s ease,
                color 0.35s ease,
                box-shadow 0.35s ease !important;
        }

        /* Background layers */
        #tapx-dash-overlay { background: var(--t-bg) !important; color: var(--t-text) !important; }
        #tapx-dash-overlay .dash-shell,
        #tapx-dash-overlay main#dash-main { background: var(--t-bg) !important; }
        #tapx-dash-overlay .dash-sidebar  { background: var(--t-sidebar) !important; border-right-color: var(--t-border) !important; }

/* ─── Mini Sidebar (card-style secondary nav between main sidebar & content) ─── */
/* Mini sidebar — only exists in DOM when WPS module is active (conditional render) */
.tapx-mini-sidebar {
    width: 280px;
    background: transparent;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 18px 14px;
    overflow-y: auto;
    border-right: 1px solid rgba(255, 215, 0, 0.06);
    display: flex;
    flex-direction: column;
}
.tapx-mini-card {
    background: linear-gradient(180deg, rgba(20, 25, 35, 0.85) 0%, rgba(15, 20, 28, 0.85) 100%);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: 16px;
    padding: 14px 12px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    backdrop-filter: blur(6px);
}
.tapx-mini-card-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #94a3b8;
    padding: 4px 8px 12px;
}
.tapx-mini-card-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tapx-mini-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 11px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.18s, color 0.18s, transform 0.18s;
    border: 1px solid transparent;
    cursor: pointer;
}
.tapx-mini-item-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.18s;
}
.tapx-mini-item-icon .material-symbols-outlined {
    font-size: 22px;
}
.tapx-mini-item-name {
    flex: 1;
    line-height: 1.2;
}
.tapx-mini-item-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    min-width: 26px;
    text-align: center;
    transition: background 0.18s, color 0.18s;
}
.tapx-mini-item:hover {
    background: rgba(255, 215, 0, 0.06);
    color: #FFD700;
}
.tapx-mini-item:hover .tapx-mini-item-icon {
    color: #FFD700;
}
.tapx-mini-item.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(217, 119, 6, 0.08));
    color: #FFD700;
    border-color: rgba(255, 215, 0, 0.25);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.10) inset;
}
.tapx-mini-item.active .tapx-mini-item-icon {
    color: #FFD700;
}
.tapx-mini-item.active .tapx-mini-item-badge {
    background: rgba(255, 215, 0, 0.20);
    color: #FFD700;
}

/* Light mode — warm cream card matching reference design */
#tapx-dash-overlay:not(.dark) .tapx-mini-sidebar {
    border-right: 1px solid rgba(15, 23, 42, 0.06);
}
#tapx-dash-overlay:not(.dark) .tapx-mini-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    backdrop-filter: none;
}
#tapx-dash-overlay:not(.dark) .tapx-mini-card-label {
    color: #94a3b8;
}
#tapx-dash-overlay:not(.dark) .tapx-mini-item {
    color: #475569;
}
#tapx-dash-overlay:not(.dark) .tapx-mini-item-icon {
    color: #94a3b8;
}
#tapx-dash-overlay:not(.dark) .tapx-mini-item-badge {
    background: #f1f5f9;
    color: #64748b;
}
#tapx-dash-overlay:not(.dark) .tapx-mini-item:hover {
    background: rgba(245, 158, 11, 0.05);
    color: #b45309;
}
#tapx-dash-overlay:not(.dark) .tapx-mini-item:hover .tapx-mini-item-icon {
    color: #d97706;
}
#tapx-dash-overlay:not(.dark) .tapx-mini-item.active {
    background: linear-gradient(135deg, rgba(252, 211, 77, 0.20), rgba(252, 184, 76, 0.12));
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.22);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.05) inset;
}
#tapx-dash-overlay:not(.dark) .tapx-mini-item.active .tapx-mini-item-icon {
    color: #d97706;
}
#tapx-dash-overlay:not(.dark) .tapx-mini-item.active .tapx-mini-item-badge {
    background: rgba(217, 119, 6, 0.15);
    color: #b45309;
}

/* ─── Mini sidebar dropdown styles ─── */
.tapx-mini-group {
    display: flex;
    flex-direction: column;
}
.tapx-mini-parent {
    position: relative;
}
.tapx-mini-chevron {
    font-size: 18px !important;
    margin-left: 4px;
    transition: transform 0.2s ease;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}
.tapx-mini-chevron:hover {
    background: rgba(255, 215, 0, 0.10);
    opacity: 1;
}
.tapx-mini-group.tapx-mini-expanded .tapx-mini-chevron {
    transform: rotate(180deg);
}
.tapx-mini-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    margin-left: 14px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 215, 0, 0.12);
}
.tapx-mini-group.tapx-mini-expanded .tapx-mini-children {
    max-height: 300px;
    margin-top: 4px;
    margin-bottom: 4px;
}
.tapx-mini-child {
    padding: 9px 10px !important;
    font-size: 12.5px !important;
}
.tapx-mini-child .tapx-mini-item-icon {
    width: 24px;
    height: 24px;
}
.tapx-mini-child .material-symbols-outlined {
    font-size: 18px !important;
}
/* Light mode chevron/border */
#tapx-dash-overlay:not(.dark) .tapx-mini-chevron:hover {
    background: rgba(180, 83, 9, 0.08);
}
#tapx-dash-overlay:not(.dark) .tapx-mini-children {
    border-left: 1px solid rgba(180, 83, 9, 0.15);
}

/* ─── WPS table: theme-aware Contract Salary number color ─── */
.tapx-wps-contract-num {
    color: #0f172a;  /* black in light mode (default) */
    font-weight: 700;
}
#tapx-dash-overlay.dark .tapx-wps-contract-num {
    color: #ffffff;  /* white in dark mode */
}

/* Hide mini sidebar on small screens */
@media (max-width: 1024px) {
    .tapx-mini-sidebar { display: none !important; }
}

        #tapx-dash-overlay header          { background: var(--t-header-bg) !important; border-bottom-color: var(--t-border) !important; }

        /* Cards */
        #tapx-dash-overlay .dash-card   { background: var(--t-card-bg) !important; border-color: var(--t-border) !important; }
        #tapx-dash-overlay .dash-stat-tile { background: var(--t-card-bg) !important; border-color: var(--t-border) !important; }
        /* Light mode override: keep stat tile borders strong and visible — warm tone */
        #tapx-dash-overlay:not(.dark) .dash-stat-tile,
        #tapx-dash-overlay:not(.dark) .emp-stat-card {
            border-color: rgba(120, 100, 70, 0.40) !important;
        }

        /* Text */
        #tapx-dash-overlay .text-white   { color: var(--t-text) !important; }
        #tapx-dash-overlay .text-gray-200,
        #tapx-dash-overlay .text-gray-300 { color: var(--t-text-sub) !important; }
        #tapx-dash-overlay .text-gray-400,
        #tapx-dash-overlay .text-gray-500 { color: var(--t-text-muted) !important; }
        #tapx-dash-overlay h1, #tapx-dash-overlay h2,
        #tapx-dash-overlay h3, #tapx-dash-overlay h4 { color: var(--t-text) !important; }
        #tapx-dash-overlay td:not([style*="color"]), #tapx-dash-overlay th:not([style*="color"]) { color: var(--t-text) !important; }
        #tapx-dash-overlay label:not([style*="color"]) { color: var(--t-text-sub) !important; }

        /* Navigation */
        #tapx-dash-overlay .nav-link        { color: var(--t-nav-text) !important; }
        #tapx-dash-overlay .nav-link:hover  { color: var(--t-nav-active-text) !important; background: var(--t-nav-hover) !important; }
        #tapx-dash-overlay .nav-link.active { color: var(--t-nav-active-text) !important; background: var(--t-nav-active) !important; }

        /* Inputs */
        #tapx-dash-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        #tapx-dash-overlay select,
        #tapx-dash-overlay textarea {
            background: var(--t-input-bg) !important;
            border-color: var(--t-input-border) !important;
            color: var(--t-input-text) !important;
        }

        /* Tables */
        #tapx-dash-overlay table     { background: var(--t-card-bg) !important; }
        #tapx-dash-overlay tbody tr  { border-color: var(--t-border) !important; }
        #tapx-dash-overlay .border-white\/5,
        #tapx-dash-overlay .border-white\/8 { border-color: var(--t-border) !important; }

        /* Keep accent colors always */
        #tapx-dash-overlay .text-accent-blue,
        #tapx-dash-overlay [class*="text-accent"] { color: inherit; }
        #tapx-dash-overlay [style*="color:#FFD700"],
        #tapx-dash-overlay [style*="color: #FFD700"] { color: #FFD700 !important; }
        #tapx-dash-overlay [style*="color:#00e5ff"],
        #tapx-dash-overlay [style*="color:#4ade80"],
        #tapx-dash-overlay [style*="color:#f87171"],
        #tapx-dash-overlay [style*="color:#fb923c"] { color: inherit; }

        /* Legacy compat */
        #tapx-dash-overlay.dark  { --tw-dash-bg:#040608; --dash-bg:#040608; }
        #tapx-dash-overlay.light { --tw-dash-bg:#f1f5f9; --dash-bg:#f1f5f9; }
        #tapx-dash-overlay {
            scroll-behavior: smooth;
        }
        #tapx-dash-overlay {
            font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            background: var(--dash-bg);
            color: #e5e7eb;
            letter-spacing: 0.01em;
        }
        .dash-shell {
            --parallax-x: 0px;
            --parallax-y: 0px;
            background: var(--t-bg);
            position: relative;
            overflow: hidden;
        }

        /* ══ DARK MODE — Deep space 3D effect ══ */
        #tapx-dash-overlay.dark .dash-shell,
        #tapx-dash-overlay:not(.light) .dash-shell {
            background: #040608;
            background-image:
                radial-gradient(ellipse 80% 60% at 15% 10%, rgba(0,229,255,0.07) 0%, transparent 55%),
                radial-gradient(ellipse 60% 50% at 85% 85%, rgba(0,196,159,0.07) 0%, transparent 50%),
                radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0,163,255,0.04) 0%, transparent 60%),
                radial-gradient(ellipse 40% 30% at 80% 15%, rgba(255,215,0,0.04) 0%, transparent 45%);
        }
        /* Dark mode pseudo 3D floating orbs */
        #tapx-dash-overlay.dark .dash-shell::before,
        #tapx-dash-overlay:not(.light) .dash-shell::before {
            content: '';
            position: fixed;
            top: -200px; left: -200px;
            width: 600px; height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0,229,255,0.06) 0%, transparent 70%);
            animation: tapxOrb1 18s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }
        #tapx-dash-overlay.dark .dash-shell::after,
        #tapx-dash-overlay:not(.light) .dash-shell::after {
            content: '';
            position: fixed;
            bottom: -150px; right: -150px;
            width: 500px; height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,215,0,0.05) 0%, transparent 70%);
            animation: tapxOrb2 22s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }
        @keyframes tapxOrb1 {
            0%,100% { transform: translate(0,0) scale(1); }
            33%      { transform: translate(80px,60px) scale(1.1); }
            66%      { transform: translate(-40px,100px) scale(0.9); }
        }
        @keyframes tapxOrb2 {
            0%,100% { transform: translate(0,0) scale(1); }
            33%      { transform: translate(-60px,-80px) scale(1.15); }
            66%      { transform: translate(40px,-40px) scale(0.85); }
        }

        /* ══ LIGHT MODE — Clean airy 3D depth effect ══ */
        #tapx-dash-overlay.light .dash-shell {
            background: linear-gradient(145deg, #f0f4f8 0%, #e8eef5 50%, #f0f4f8 100%);
            background-image:
                radial-gradient(ellipse 70% 50% at 10% 5%, rgba(99,102,241,0.08) 0%, transparent 55%),
                radial-gradient(ellipse 60% 45% at 90% 90%, rgba(6,182,212,0.07) 0%, transparent 50%),
                radial-gradient(ellipse 40% 35% at 70% 20%, rgba(16,185,129,0.05) 0%, transparent 45%),
                radial-gradient(ellipse 50% 40% at 30% 80%, rgba(245,158,11,0.05) 0%, transparent 45%);
        }
        #tapx-dash-overlay.light .dash-shell::before {
            content: '';
            position: fixed;
            top: -100px; left: -100px;
            width: 500px; height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(99,102,241,0.07) 0%, transparent 70%);
            animation: tapxLightOrb1 20s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }
        #tapx-dash-overlay.light .dash-shell::after {
            content: '';
            position: fixed;
            bottom: -100px; right: -100px;
            width: 450px; height: 450px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 70%);
            animation: tapxLightOrb2 25s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }
        @keyframes tapxLightOrb1 {
            0%,100% { transform: translate(0,0) scale(1); }
            50%      { transform: translate(60px,80px) scale(1.12); }
        }
        @keyframes tapxLightOrb2 {
            0%,100% { transform: translate(0,0) scale(1); }
            50%      { transform: translate(-50px,-60px) scale(1.08); }
        }

        /* Make sure content sits above pseudo elements */
        #tapx-dash-overlay .dash-sidebar,
        #tapx-dash-overlay header,
        #tapx-dash-overlay main#dash-main { position: relative; z-index: 1; }
        .dash-sidebar {
            background: #0a0a0a;
            border-right: 1px solid rgba(255,255,255,0.06);
            transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
            animation: none;
        }
        #tapx-dash-overlay:not(.dark) .dash-sidebar {
            background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
            box-shadow: 4px 0 24px rgba(15, 23, 42, 0.06);
        }
        .nav-link {
            display: flex; align-items: center; gap: 0.65rem;
            padding: 0.65rem 0.85rem; border-radius: 0.75rem;
            font-size: 0.8125rem; font-weight: 600; color: #9ca3af;
            transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .2s ease;
        }
        .nav-link:hover { color: #fff; background: rgba(255,255,255,0.05); transform: translateX(2px); }
        .nav-link.active {
            color: #fff;
            background: rgba(0, 163, 255, 0.1);
            box-shadow:
                0 0 0 1px rgba(0, 163, 255, 0.35),
                0 0 24px rgba(0, 163, 255, 0.12),
                0 0 40px rgba(255, 215, 0, 0.06);
        }
        #tapx-dash-overlay:not(.dark) .nav-link:hover { transform: translateX(3px); }
        #dash-nav {
            perspective: 1280px;
            perspective-origin: 0% 42%;
        }
        /* ═══ USER DASHBOARD SIDEBAR — admin-style gold glow animation ═══
           Matches the admin dashboard sidebar:
           · radial gold glow (::before) that blooms on hover
           · bottom gold underline (::after) that sweeps out from center
           · gold text + subtle gradient background on hover */
        #tapx-dash-overlay #dash-nav .nav-link {
            position: relative;
            overflow: hidden;
            transition: color 0.25s ease, background-color 0.25s ease;
        }
        #tapx-dash-overlay #dash-nav .nav-link::before {
            content: '';
            position: absolute;
            right: 18%;
            top: 50%;
            width: 120px;
            height: 120px;
            background: radial-gradient(circle,
                rgba(255, 178, 74, 0.5) 0%,
                rgba(232, 176, 79, 0.15) 40%,
                transparent 75%);
            transform: translate(50%, -50%) scale(0);
            border-radius: 50%;
            filter: blur(12px);
            opacity: 0;
            transition: transform 0.4s ease, opacity 0.3s ease;
            pointer-events: none;
            z-index: 0;
        }
        #tapx-dash-overlay #dash-nav .nav-link::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(232, 176, 79, 0.3) 10%,
                rgba(255, 191, 105, 0.95) 50%,
                rgba(232, 176, 79, 0.3) 90%,
                transparent 100%);
            transform: translateX(-50%);
            box-shadow: 0 0 12px rgba(232, 176, 79, 0.55);
            transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
            opacity: 0;
            pointer-events: none;
        }
        #tapx-dash-overlay #dash-nav .nav-link:hover::before {
            transform: translate(50%, -50%) scale(1);
            opacity: 1;
        }
        #tapx-dash-overlay #dash-nav .nav-link:hover::after {
            width: 92%;
            opacity: 1;
        }
        #tapx-dash-overlay #dash-nav .nav-link:hover {
            color: #E8B04F !important;
            background: linear-gradient(90deg,
                rgba(232, 176, 79, 0.10) 0%,
                rgba(232, 176, 79, 0.03) 100%) !important;
        }
        #tapx-dash-overlay #dash-nav .nav-link > * {
            position: relative;
            z-index: 1;
        }
        @media (prefers-reduced-motion: reduce) {
            #tapx-dash-overlay #dash-nav .nav-link::before,
            #tapx-dash-overlay #dash-nav .nav-link::after {
                transition: none !important;
            }
        }
        main a[data-nav]:not(.nav-link):not(.dash-stat-tile) {
            transform-style: preserve-3d;
            transition: color 0.22s ease, transform 0.28s var(--tapx-spring), text-shadow 0.25s ease;
        }
        main a[data-nav]:not(.nav-link):not(.dash-stat-tile):active {
            transform: scale(0.97) translateZ(4px);
        }
        .dash-card {
            background: var(--dash-card);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 1rem;
            transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }
        #tapx-dash-overlay.dark .dash-card:hover {
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 163, 255, 0.06);
        }
        #tapx-dash-overlay:not(.dark) .dash-card:hover {
            box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(0, 163, 255, 0.12);
            transform: translateY(-2px);
        }
        @media (min-width: 1024px) { .dash-card { border-radius: 1.125rem; } }
        /* Main content 3D stage — modules tilt into view from depth */
        #dash-main.dash-main-3d {
            perspective: 2100px;
            perspective-origin: 50% 4%;
        }
        @keyframes dashPaneReveal3d {
            0%   { opacity: 0.6; transform: translateY(8px); }
            100% { opacity: 1;   transform: translateY(0);   }
        }
        /* tapxPaneFoldRibbon keyframes removed */
        .dash-pane-animate {
            position: relative;
            animation: dashCardFadeIn 0.2s ease-out both; /* blink-kill */
            transform-origin: 50% 0;
        }
        /* sliding ribbon line removed */
        /* Linked-doc detail — carpet unfold: grid reveal + roll edge + depth (Material-style decel easing) */
        .dash-carpet-expand {
            display: grid;
            grid-template-rows: 0fr;
            position: relative;
            transition: grid-template-rows 0.58s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .dash-carpet-expand.dash-carpet-expand--open {
            grid-template-rows: 1fr;
        }
        /* “Roll line” — draws across as the panel opens */
        .dash-carpet-expand::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(0, 163, 255, 0.2) 22%,
                rgba(0, 163, 255, 0.75) 48%,
                rgba(0, 196, 159, 0.55) 68%,
                transparent 100%
            );
            transform: scaleX(0);
            transform-origin: center;
            opacity: 0;
            transition:
                transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s ease;
            z-index: 2;
            pointer-events: none;
        }
        .dash-carpet-expand.dash-carpet-expand--open::before {
            transform: scaleX(1);
            opacity: 1;
        }
        .dash-carpet-expand__inner {
            position: relative;
            min-height: 0;
            overflow: hidden;
            transform-origin: top center;
            border-radius: 0 0 0.75rem 0.75rem;
            transition:
                opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0.03s,
                transform 0.6s cubic-bezier(0.22, 1.08, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: inset 0 0 0 rgba(255, 255, 255, 0);
        }
        .dash-carpet-expand:not(.dash-carpet-expand--open) .dash-carpet-expand__inner {
            opacity: 0;
            transform: perspective(1200px) rotateX(-10deg) translateY(-14px) scale(0.965);
            pointer-events: none;
        }
        .dash-carpet-expand.dash-carpet-expand--open .dash-carpet-expand__inner {
            opacity: 1;
            transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 28px 64px -32px rgba(0, 0, 0, 0.75),
                0 14px 44px -20px rgba(0, 163, 255, 0.16);
        }
        
/* ═══════════ FINE DETAIL ROW — THEME-AWARE COLORS ═══════════ */

/* DARK MODE — keep current dark look */
#tapx-dash-overlay.dark .fine-demo-detail-row,
#tapx-dash-overlay.dark .fine-demo-detail-row td {
    background: rgba(0,0,0,0.25) !important;
}
#tapx-dash-overlay.dark .fine-demo-detail-row .rounded-xl[class*="bg-black"] {
    background: rgba(0,0,0,0.45) !important;
    border-color: rgba(255,255,255,0.10) !important;
}
#tapx-dash-overlay.dark .fine-demo-detail-row dt {
    color: #94a3b8 !important;
}
#tapx-dash-overlay.dark .fine-demo-detail-row dd,
#tapx-dash-overlay.dark .fine-demo-detail-row dd * {
    color: #f1f5f9 !important;
}

/* LIGHT MODE — clean light card with dark text */
#tapx-dash-overlay:not(.dark) .fine-demo-detail-row,
#tapx-dash-overlay:not(.dark) .fine-demo-detail-row td {
    background: #f8fafc !important;
}
#tapx-dash-overlay:not(.dark) .fine-demo-detail-row .rounded-xl[class*="bg-black"] {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.10) !important;
    box-shadow: 0 2px 12px rgba(15,23,42,0.04) !important;
}
#tapx-dash-overlay:not(.dark) .fine-demo-detail-row dt {
    color: #64748b !important;
}
#tapx-dash-overlay:not(.dark) .fine-demo-detail-row dd {
    color: #0f172a !important;
}
#tapx-dash-overlay:not(.dark) .fine-demo-detail-row dd span[style*="color:#fff"],
#tapx-dash-overlay:not(.dark) .fine-demo-detail-row p[class*="text-accent-blue"] {
    color: #0369a1 !important;
}
#tapx-dash-overlay:not(.dark) .fine-demo-detail-row .border-white\/8,
#tapx-dash-overlay:not(.dark) .fine-demo-detail-row .border-white\/10 {
    border-color: rgba(15,23,42,0.08) !important;
}
/* Section labels — keep their accent colors but improve contrast */
#tapx-dash-overlay:not(.dark) .fine-demo-detail-row .text-gray-500 {
    color: #64748b !important;
}
/* Section headers (Identification, Violation, Financials, Status & Penalty) */
#tapx-dash-overlay:not(.dark) .fine-demo-detail-row .text-gray-500.font-bold {
    color: #475569 !important;
}

        
/* ═══════════ FINE DETAIL ROW — DIRECT TOGGLE (override carpet quirks) ═══════════ */
/* Closed state — invisible & zero height */
.fine-demo-detail-row {
    display: none;
}
/* Open state — show as table row */
.fine-demo-detail-row.tapx-fine-detail-open {
    display: table-row !important;
    animation: tapxFineDetailIn 0.35s ease-out;
}
@keyframes tapxFineDetailIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Hide the carpet inner classes inside this row that may add height:0 */
.fine-demo-detail-row .dash-carpet-expand {
    display: block !important;
    grid-template-rows: none !important;
}
.fine-demo-detail-row .dash-carpet-expand__inner {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
    box-shadow: none !important;
}

        /* Fines table detail — fit content; avoid 1fr stretching the table cell vertically */
        .dash-carpet-expand--fine-detail.dash-carpet-expand--open {
            grid-template-rows: minmax(0, max-content);
        }
        #bulk-selection-action-carpet.dash-carpet-expand .dash-carpet-expand__inner {
            border-radius: 0.75rem;
        }
        /* Particle assemble / shatter — linked-doc row panels */
        .dash-carpet-expand--shard .dash-carpet-expand__inner {
            opacity: 0 !important;
            transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1) !important;
            transition:
                opacity 0.04s ease,
                transform 0.04s ease !important;
            pointer-events: none;
            overflow: visible !important;
        }
        .dash-carpet-shatter-layer {
            position: absolute;
            inset: 0;
            z-index: 6;
            pointer-events: none;
            overflow: visible;
            border-radius: inherit;
            display: grid;
            gap: 0;
            isolation: isolate;
        }
        .dash-carpet-shard {
            position: relative;
            box-sizing: border-box;
            min-width: 0;
            min-height: 0;
            border: none;
            border-radius: 1px;
            box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
            will-change: transform, opacity, filter;
            backface-visibility: hidden;
            transform: translateZ(0);
        }
        @keyframes dashShardAssemble {
            0% {
                opacity: 0;
                transform: translate3d(var(--tx), var(--ty), 0) rotate(calc(var(--r0) * 1deg)) scale(0.06);
                filter: blur(2px) brightness(1.15);
            }
            42% {
                opacity: 1;
                filter: blur(0) brightness(1);
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
                filter: blur(0) brightness(1);
            }
        }
        @keyframes dashShardExplode {
            0% {
                opacity: 1;
                transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
                filter: blur(0) brightness(1);
            }
            100% {
                opacity: 0;
                transform: translate3d(var(--tx), var(--ty), 0) rotate(calc(var(--r0) * -1.65 * 1deg)) scale(0.05);
                filter: blur(3px) brightness(0.92);
            }
        }
        .dash-carpet-shard--assemble {
            animation: none;
        }
        .dash-carpet-shard--explode {
            animation: none;
        }
        /* Incoming requests — carpet unfurl + 6 tiles (CSS only, smooth / light) */
        .dash-carpet-expand[data-incoming-sixfold] {
            perspective: 1400px;
            transition: grid-template-rows 0.72s cubic-bezier(0.14, 0.88, 0.2, 1);
        }
        .dash-carpet-expand[data-incoming-sixfold]::before {
            transition:
                transform 0.88s cubic-bezier(0.14, 0.88, 0.2, 1),
                opacity 0.45s ease;
        }
        .dash-carpet-expand[data-incoming-sixfold] .dash-carpet-expand__inner {
            overflow: visible;
            transform-origin: top center;
            transition:
                opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.04s,
                transform 0.88s cubic-bezier(0.1, 0.82, 0.18, 1),
                box-shadow 0.65s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .dash-carpet-expand[data-incoming-sixfold]:not(.dash-carpet-expand--open) .dash-carpet-expand__inner {
            transform: perspective(1100px) rotateX(-72deg) translateY(-18px) scale(0.98);
            opacity: 0;
        }
        .dash-carpet-expand[data-incoming-sixfold].dash-carpet-expand--open .dash-carpet-expand__inner {
            transform: perspective(1100px) rotateX(0deg) translateY(0) scale(1);
            opacity: 1;
        }
        .incoming-req-sixfold {
            position: relative;
            min-height: clamp(10rem, 36vw, 22rem);
            overflow: visible;
            transform-style: preserve-3d;
        }
        .incoming-req-sixfold-shards {
            --wave-max: 5;
            position: absolute;
            inset: 0;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-template-rows: repeat(2, minmax(0, 1fr));
            gap: 1px;
            pointer-events: none;
            border-radius: 0 0 0.65rem 0.65rem;
            overflow: hidden;
            perspective: 720px;
            transform-style: preserve-3d;
            background: rgba(186, 224, 246, 0.55);
        }
        .incoming-req-sixfold-shard {
            min-width: 0;
            min-height: 0;
            border-radius: 2px;
            transform-origin: top center;
            transform: translateZ(0);
            box-shadow:
                inset 0 0 0 0.5px rgba(0, 163, 255, 0.22),
                inset 0 -1px 0 rgba(0, 163, 255, 0.12);
            background: linear-gradient(
                168deg,
                rgba(232, 246, 255, 0.98) 0%,
                rgba(210, 235, 252, 0.96) 42%,
                rgba(198, 228, 250, 0.98) 100%
            );
        }
        .incoming-req-sixfold-shard-inner {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            padding: 0.35rem 0.45rem;
            height: 100%;
            min-height: 0;
            box-sizing: border-box;
            text-align: left;
            overflow: hidden auto;
        }
        .incoming-req-sixfold-shard-heading {
            flex-shrink: 0;
            font-size: 7px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #000;
            margin-bottom: 0.2rem;
            line-height: 1.15;
        }
        .incoming-req-sixfold-shard-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        .incoming-req-sixfold-shard-table th {
            width: 40%;
            padding: 0.1rem 0.25rem 0.1rem 0;
            vertical-align: top;
            text-align: left;
            font-size: 7px;
            line-height: 1.2;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: #000;
        }
        .incoming-req-sixfold-shard-table td {
            padding: 0.1rem 0 0.1rem 0.2rem;
            vertical-align: top;
            font-size: 8px;
            line-height: 1.25;
            color: #000;
            word-break: break-word;
        }
        /* Employee linked-docs fly-in: mini document cards (match main panel) */
        .incoming-req-sixfold-shard-inner.emp-doc-shard-inner {
            gap: 0.2rem;
        }
        .emp-doc-shard-card {
            margin-top: 0.1rem;
            border-radius: 0.4rem;
            border: 1px solid rgba(14, 116, 144, 0.4);
            background: rgba(255, 255, 255, 0.72);
            padding: 0.3rem 0.4rem;
            display: flex;
            flex-direction: column;
            min-height: 0;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }
        .emp-doc-shard-card-title {
            font-size: 8px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #FFD700;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .emp-doc-shard-card-no {
            font-size: 7px;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            color: #FFD700;
            margin-top: 0.12rem;
            line-height: 1.25;
            word-break: break-all;
        }
        .emp-doc-shard-card-dates {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.15rem 0.35rem;
            margin-top: 0.2rem;
            font-size: 6.5px;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            color: #FFD700;
            line-height: 1.2;
        }
        @keyframes incomingSixAssemble {
            0% {
                opacity: 0;
                transform: translate3d(0, -28px, 0) rotateX(-48deg) rotate(var(--rz)) scale(0.94);
            }
            55% {
                opacity: 1;
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0) rotateX(0deg) rotate(0deg) scale(1);
            }
        }
        @keyframes incomingSixShardsFade {
            to {
                opacity: 0;
                visibility: hidden;
            }
        }
        @keyframes incomingSixContentIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .dash-carpet-expand--open .incoming-req-sixfold-shard {
            animation: none;
            animation-delay: calc(var(--wave) * 0.07s);
        }
        .dash-carpet-expand--open .incoming-req-sixfold-shards {
            animation: none;
        }
        .incoming-req-sixfold-content {
            opacity: 0;
            transform-origin: top center;
        }
        .dash-carpet-expand--open .incoming-req-sixfold-content {
            animation: none;
        }
        .dash-carpet-expand:not(.dash-carpet-expand--open) .incoming-req-sixfold-shards {
            animation: none !important;
            opacity: 1;
            visibility: visible;
        }
        .dash-carpet-expand:not(.dash-carpet-expand--open) .incoming-req-sixfold-content {
            animation: none !important;
            opacity: 0;
        }
        /* Linked documents row (Employees / Vehicles chevron) — instant show/hide, no carpet or shard animation */
        .dash-carpet-expand[data-carpet-instant],
        .dash-carpet-expand[data-carpet-instant]::before,
        .dash-carpet-expand[data-carpet-instant] .dash-carpet-expand__inner {
            transition-duration: 0.01ms !important;
            transition-delay: 0s !important;
        }
        .dash-carpet-expand[data-carpet-instant]:not(.dash-carpet-expand--open) .dash-carpet-expand__inner,
        .dash-carpet-expand[data-carpet-instant].dash-carpet-expand--open .dash-carpet-expand__inner {
            transform: none !important;
        }
        .dash-carpet-expand[data-carpet-instant]:not(.dash-carpet-expand--open) .dash-carpet-expand__inner {
            opacity: 0;
            pointer-events: none;
        }
        .dash-carpet-expand[data-carpet-instant].dash-carpet-expand--open .dash-carpet-expand__inner {
            opacity: 1;
            box-shadow: none;
        }
        .dash-carpet-expand[data-carpet-instant]::before,
        .dash-carpet-expand[data-carpet-instant].dash-carpet-expand--open::before {
            opacity: 0 !important;
            transform: scaleX(0) !important;
        }

        /* ── FIX: Remove extra blank space below rows when carpet is closed ── */
        .emp-doc-detail-row td,
        .veh-doc-detail-row td,
        .comm-emp-doc-detail-row td,
        .doc-doc-detail-row td {
            padding: 0 !important;
            line-height: 0 !important;
        }
        /* When carpet is open — restore normal td */
        .emp-doc-detail-row td .dash-carpet-expand--open,
        .veh-doc-detail-row td .dash-carpet-expand--open,
        .comm-emp-doc-detail-row td .dash-carpet-expand--open,
        .doc-doc-detail-row td .dash-carpet-expand--open {
            line-height: normal !important;
        }
        /* Hide entire detail row until expanded */
        tr.emp-doc-detail-row:not(.tapx-detail-open),
        tr.veh-doc-detail-row:not(.tapx-detail-open),
        tr.comm-emp-doc-detail-row:not(.tapx-detail-open),
        tr.doc-doc-detail-row:not(.tapx-detail-open) {
            display: none;
        }
        tr.fine-demo-detail-row:not(.tapx-detail-open) {
            display: none;
        }
        .dash-carpet-expand[data-carpet-instant] .incoming-req-sixfold {
            min-height: 0;
        }
        .dash-carpet-expand[data-carpet-instant].dash-carpet-expand--open .incoming-req-sixfold-shard {
            animation: none !important;
        }
        .dash-carpet-expand[data-carpet-instant].dash-carpet-expand--open .incoming-req-sixfold-shards {
            animation: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
        }
        .dash-carpet-expand[data-carpet-instant].dash-carpet-expand--open .incoming-req-sixfold-content {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }
        @media (prefers-reduced-motion: reduce) {
            .dash-carpet-expand--open .incoming-req-sixfold-shard {
                animation: none !important;
                opacity: 0 !important;
            }
            .dash-carpet-expand--open .incoming-req-sixfold-shards {
                animation: none !important;
                opacity: 0 !important;
                visibility: hidden !important;
            }
            .dash-carpet-expand--open .incoming-req-sixfold-content {
                animation: none !important;
                opacity: 1 !important;
                transform: none !important;
            }
            .dash-carpet-expand[data-incoming-sixfold] .dash-carpet-expand__inner {
                transition-duration: 0.01ms !important;
            }
            .dash-carpet-expand[data-incoming-sixfold]:not(.dash-carpet-expand--open) .dash-carpet-expand__inner,
            .dash-carpet-expand[data-incoming-sixfold].dash-carpet-expand--open .dash-carpet-expand__inner {
                transform: none !important;
            }
            .dash-pane-animate { animation: none; }
            /* dash-pane-animate::before removed */
            #dash-main.dash-main-3d {
                perspective: none !important;
            }
            #dash-nav .nav-link,
            #dash-nav .nav-link:hover,
            #dash-nav .nav-link.active,
            #dash-nav .nav-link:active {
                transform: none !important;
                box-shadow: none !important;
            }
            #dash-nav .nav-link.active {
                box-shadow:
                    0 0 0 1px rgba(0, 163, 255, 0.45),
                    0 0 18px rgba(0, 163, 255, 0.15) !important;
            }
            .dash-pane-animate .dash-card,
            .dash-pane-animate a.dash-stat-tile,
            .dash-pane-animate button.dash-stat-tile,
            .dash-pane-animate .emp-stat-card {
                animation: none !important;
                filter: none !important;
            }
            .nav-link:hover, #tapx-dash-overlay:not(.dark) .dash-card:hover { transform: none; }
            #tapx-dash-overlay:not(.dark) .dash-card:hover { box-shadow: none; }
            .module-stat-drawer-panel { animation: none !important; }
            .dash-carpet-expand,
            .dash-carpet-expand__inner,
            .dash-carpet-expand::before {
                transition-duration: 0.01ms !important;
            }
            .dash-carpet-expand:not(.dash-carpet-expand--open) .dash-carpet-expand__inner {
                transform: none;
            }
            .dash-carpet-expand.dash-carpet-expand--open .dash-carpet-expand__inner {
                box-shadow: none;
            }
            :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet,
            :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet__inner,
            :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet::before {
                transition-duration: 0.01ms !important;
            }
            :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet:not(.dash-modal-drop-carpet--open) .dash-modal-drop-carpet__inner,
            :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet.dash-modal-drop-carpet--open .dash-modal-drop-carpet__inner {
                transform: none !important;
            }
            :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet.dash-modal-drop-carpet--open .dash-modal-drop-carpet__inner {
                box-shadow: none;
            }
            .dash-carpet-shatter-layer {
                display: none !important;
            }
            .dash-carpet-expand--shard .dash-carpet-expand__inner {
                opacity: inherit !important;
                pointer-events: auto;
            }
        }
        @keyframes moduleDrawerIn {
            from {
                opacity: 0;
                transform: perspective(800px) rotateX(6deg) translateY(28px) translateZ(-20px);
            }
            to {
                opacity: 1;
                transform: perspective(800px) rotateX(0deg) translateY(0) translateZ(0);
            }
        }
        @media (min-width: 640px) {
            @keyframes moduleDrawerIn {
                from {
                    opacity: 0;
                    transform: perspective(900px) rotateY(-8deg) translateX(36px) translateZ(-40px);
                    filter: brightness(0.92);
                }
                to {
                    opacity: 1;
                    transform: perspective(900px) rotateY(0deg) translateX(0) translateZ(0);
                    filter: brightness(1);
                }
            }
        }
        .module-stat-drawer-panel {
            transform-style: preserve-3d;
            backface-visibility: hidden;
            animation: dashCardFadeIn 0.2s ease-out both; /* blink-kill */
        }
        .dash-stat-tile {
            display: block;
            text-align: left;
            border-radius: 0.875rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(10, 14, 22, 0.48);
            backdrop-filter: blur(20px) saturate(1.15);
            -webkit-backdrop-filter: blur(20px) saturate(1.15);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 8px 28px rgba(0, 0, 0, 0.22);
            padding: 0.85rem 1rem;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transition:
                border-color 0.26s ease,
                background 0.28s ease,
                transform 0.35s var(--tapx-spring),
                box-shadow 0.35s var(--tapx-premium-decel);
            text-decoration: none;
            color: inherit;
        }
        .dash-stat-tile:hover {
            border-color: rgba(255, 255, 255, 0.14);
            background: rgba(12, 18, 30, 0.62);
            transform: translateY(-8px) translateZ(16px) rotateX(3deg) scale(1.02);
            box-shadow:
                0 0 0 1px rgba(255, 215, 0, 0.08) inset,
                0 22px 50px rgba(0, 0, 0, 0.38),
                0 0 48px rgba(0, 229, 255, 0.12),
                0 0 0 1px rgba(0, 229, 255, 0.16);
        }
        .dash-stat-tile:active {
            transform: translateY(-1px) translateZ(6px) scale(0.985) rotateX(2deg);
            transition-duration: 0.12s;
        }
        #tapx-dash-overlay:not(.dark) .dash-stat-tile {
            background: rgba(253, 252, 247, 0.96);
            backdrop-filter: blur(16px) saturate(1.05);
            -webkit-backdrop-filter: blur(16px) saturate(1.05);
            border: 2px solid rgba(120, 100, 70, 0.40) !important;
            border-radius: 1.15rem;
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            perspective: 1200px;
            will-change: transform, box-shadow;
        }
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:hover {
            animation-play-state: paused !important;
        }
        @media (prefers-reduced-motion: reduce) {
            .dash-stat-tile:hover { transform: none; }
        }
        .audit-scroll {
            animation: none; /* blink-kill */
        }
        @keyframes auditMarquee {
            0% { transform: translateY(0); }
            100% { transform: translateY(-50%); }
        }
        @media (prefers-reduced-motion: reduce) {
            .audit-scroll { animation: none; }
        }
        .bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 0.5rem 0; }
        .bar-chart span {
            flex: 1; min-width: 0; border-radius: 6px 6px 2px 2px;
            background: linear-gradient(180deg, #00f2ff 0%, #0088aa 100%);
            border: 1px solid rgba(255, 215, 0, 0.15);
            opacity: 0.85;
        }
        .bar-chart span:nth-child(4) { box-shadow: 0 0 0 1px #ffd700; opacity: 1; }
        /* Native select chrome (esp. WebKit) adds a blue inner frame — flatten to match dashboard */
        select.doc-link-select,
        .entity-docs-select {
            -webkit-appearance: none;
            appearance: none;
            background-color: rgba(0, 0, 0, 0.45);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.65rem center;
            background-size: 1rem 1rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 0.75rem;
            color: #f8fafc;
            padding-right: 2.35rem;
            box-shadow: none;
        }
        select.doc-link-select::-ms-expand,
        .entity-docs-select::-ms-expand {
            display: none;
        }
        select.doc-link-select:focus,
        select.doc-link-select:focus-visible,
        .entity-docs-select:focus,
        .entity-docs-select:focus-visible {
            outline: none;
            box-shadow: none;
            border-color: rgba(255, 255, 255, 0.18);
        }
        .emp-stat-card {
            text-align: left;
            border-radius: 0.875rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(10, 14, 22, 0.48);
            backdrop-filter: blur(20px) saturate(1.15);
            -webkit-backdrop-filter: blur(20px) saturate(1.15);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 8px 28px rgba(0, 0, 0, 0.22);
            padding: 0.75rem 1rem;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transition:
                border-color 0.22s ease,
                background 0.24s ease,
                transform 0.32s var(--tapx-spring),
                box-shadow 0.3s ease;
        }
        .emp-stat-card:hover {
            border-color: rgba(255, 255, 255, 0.14);
            background: rgba(12, 18, 30, 0.62);
            transform: translateY(-8px) translateZ(14px) rotateX(4deg) scale(1.02);
            box-shadow:
                0 0 0 1px rgba(255, 215, 0, 0.07) inset,
                0 18px 44px rgba(0, 0, 0, 0.36),
                0 0 40px rgba(0, 229, 255, 0.11),
                0 0 0 1px rgba(0, 229, 255, 0.18);
        }
        .emp-stat-card:active {
            transform: translateY(0) translateZ(4px) scale(0.95) rotateX(2deg);
            transition-duration: 0.12s;
        }
        .emp-stat-card:focus-visible {
            outline: 2px solid rgba(0, 163, 255, 0.65);
            outline-offset: 2px;
        }
        #tapx-dash-overlay:not(.dark) .emp-stat-card {
            background: rgba(253, 252, 247, 0.96);
            backdrop-filter: blur(16px) saturate(1.05);
            -webkit-backdrop-filter: blur(16px) saturate(1.05);
            border: 2px solid rgba(120, 100, 70, 0.40) !important;
            border-radius: 1.1rem;
            box-shadow:
                0 1px 0 rgba(255, 251, 240, 1) inset,
                0 8px 25px rgba(80, 60, 30, 0.12),
                0 2px 6px rgba(80, 60, 30, 0.08),
                0 0 0 1px rgba(120, 100, 70, 0.08);
            transform-style: preserve-3d;
            perspective: 1200px;
            will-change: transform, box-shadow;
        }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:hover {
            border-color: rgba(79, 70, 229, 0.45) !important;
            background: rgba(255, 255, 255, 0.98);
            transform: translateY(-8px) translateZ(20px) rotateX(4deg) rotateY(-2deg) scale(1.02);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 1) inset,
                0 24px 48px rgba(15, 23, 42, 0.15),
                0 8px 16px rgba(15, 23, 42, 0.08),
                0 0 0 1.5px rgba(79, 70, 229, 0.35),
                0 0 40px rgba(6, 182, 212, 0.18);
            animation-play-state: paused;
        }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:focus-visible {
            outline-color: rgba(79, 70, 229, 0.55);
        }
        /* === LIGHT MODE ONLY: Stat tile 3D animation — force visible === */
        @keyframes tapxStat3DBounce {
            0%, 100% {
                transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1) !important;
            }
            20% {
                transform: translate3d(0, -12px, 0) rotateX(8deg) rotateY(-5deg) scale(1.03) !important;
            }
            40% {
                transform: translate3d(0, -8px, 0) rotateX(0deg) rotateY(0deg) scale(1.02) !important;
            }
            60% {
                transform: translate3d(0, -14px, 0) rotateX(-5deg) rotateY(5deg) scale(1.03) !important;
            }
            80% {
                transform: translate3d(0, -6px, 0) rotateX(0deg) rotateY(0deg) scale(1.01) !important;
            }
        }
        @keyframes tapxStatBorderRGB {
            0%, 100% {
                border-color: rgba(120, 100, 70, 0.50) !important;
                box-shadow:
                    0 8px 28px rgba(80, 60, 30, 0.15),
                    0 0 0 1px rgba(120, 100, 70, 0.08) !important;
            }
            33% {
                border-color: rgba(184, 153, 104, 0.75) !important;
                box-shadow:
                    0 16px 40px rgba(184, 153, 104, 0.28),
                    0 0 0 2px rgba(184, 153, 104, 0.22),
                    0 0 30px rgba(184, 153, 104, 0.18) !important;
            }
            66% {
                border-color: rgba(166, 124, 82, 0.75) !important;
                box-shadow:
                    0 16px 40px rgba(166, 124, 82, 0.28),
                    0 0 0 2px rgba(166, 124, 82, 0.22),
                    0 0 30px rgba(166, 124, 82, 0.18) !important;
            }
        }
        @keyframes tapxStatShineSweep {
            0%   { left: -75%; opacity: 0; }
            10%  { opacity: 1; }
            90%  { opacity: 1; }
            100% { left: 175%; opacity: 0; }
        }
        /* Apply to BOTH stat-tile classes — force animation, override global transition */
        html:not(.dark) #tapx-dash-overlay .emp-stat-card,
        html:not(.dark) #tapx-dash-overlay .dash-stat-tile,
        #tapx-dash-overlay:not(.dark) .emp-stat-card,
        #tapx-dash-overlay:not(.dark) .dash-stat-tile {
            transition: none !important;
            animation:
                tapxStat3DBounce 5s ease-in-out infinite,
                tapxStatBorderRGB 6s ease-in-out infinite !important;
            transform-style: preserve-3d !important;
            position: relative !important;
            overflow: hidden !important;
            perspective: 1000px !important;
        }
        /* Shine sweep overlay */
        html:not(.dark) #tapx-dash-overlay .emp-stat-card::before,
        html:not(.dark) #tapx-dash-overlay .dash-stat-tile::before,
        #tapx-dash-overlay:not(.dark) .emp-stat-card::before,
        #tapx-dash-overlay:not(.dark) .dash-stat-tile::before {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(110deg,
                transparent 0%,
                rgba(255, 251, 240, 0) 25%,
                rgba(212, 175, 110, 0.45) 50%,
                rgba(255, 251, 240, 0) 75%,
                transparent 100%);
            transform: skewX(-20deg);
            pointer-events: none;
            z-index: 1;
            animation: tapxStatShineSweep 4s ease-in-out infinite !important;
        }
        /* Keep card content above the shine layer */
        html:not(.dark) #tapx-dash-overlay .emp-stat-card > *,
        html:not(.dark) #tapx-dash-overlay .dash-stat-tile > *,
        #tapx-dash-overlay:not(.dark) .emp-stat-card > *,
        #tapx-dash-overlay:not(.dark) .dash-stat-tile > * {
            position: relative;
            z-index: 2;
        }
        /* Stagger animation start across cards for organic wave */
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(2),
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(2) { animation-delay: -0.5s, -0.8s !important; }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(3),
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(3) { animation-delay: -1s, -1.6s !important; }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(4),
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(4) { animation-delay: -1.5s, -2.4s !important; }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(5),
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(5) { animation-delay: -2s, -3.2s !important; }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(6),
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(6) { animation-delay: -2.5s, -4s !important; }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(7),
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(7) { animation-delay: -3s, -4.8s !important; }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(2)::before,
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(2)::before { animation-delay: -0.6s !important; }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(3)::before,
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(3)::before { animation-delay: -1.2s !important; }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(4)::before,
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(4)::before { animation-delay: -1.8s !important; }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(5)::before,
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(5)::before { animation-delay: -2.4s !important; }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(6)::before,
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(6)::before { animation-delay: -3s !important; }
        #tapx-dash-overlay:not(.dark) .emp-stat-card:nth-child(7)::before,
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:nth-child(7)::before { animation-delay: -3.6s !important; }
        @media (prefers-reduced-motion: reduce) {
            #tapx-dash-overlay:not(.dark) .emp-stat-card,
            #tapx-dash-overlay:not(.dark) .dash-stat-tile,
            #tapx-dash-overlay:not(.dark) .emp-stat-card::before,
            #tapx-dash-overlay:not(.dark) .dash-stat-tile::before {
                animation: none !important;
            }
        }
        .emp-icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 0.625rem;
            border: 1px solid var(--tapx-icon-border);
            background: linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
            color: #cbd5e1;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            transform-style: preserve-3d;
            transition:
                color 0.22s ease,
                border-color 0.22s ease,
                background 0.22s ease,
                transform 0.32s ease-in-out,
                box-shadow 0.32s ease-in-out,
                filter 0.32s ease-in-out;
        }
        .emp-icon-btn:hover {
            color: #e0f2fe;
            border-color: rgba(0, 229, 255, 0.45);
            background: linear-gradient(165deg, rgba(0, 229, 255, 0.14) 0%, rgba(0, 163, 255, 0.08) 100%);
            transform: translateY(-2px) translateZ(6px) scale(1.05);
            filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.25));
            box-shadow:
                0 10px 26px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 0 0 1px rgba(0, 229, 255, 0.15);
        }
        .emp-icon-btn:active {
            transform: translateY(0) scale(0.95);
            transition-duration: 0.12s;
        }
        .emp-icon-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 163, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .emp-icon-btn--danger:hover {
            color: #fecaca;
            border-color: rgba(248, 113, 113, 0.55);
            background: linear-gradient(165deg, rgba(248, 113, 113, 0.2) 0%, rgba(248, 113, 113, 0.06) 100%);
            box-shadow: 0 8px 22px rgba(248, 113, 113, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }
        #tapx-dash-overlay:not(.dark) .emp-icon-btn {
            background: linear-gradient(165deg, #ffffff 0%, #f1f5f9 100%);
            border-color: rgba(15, 23, 42, 0.1);
            color: #475569;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(15, 23, 42, 0.05);
        }
        #tapx-dash-overlay:not(.dark) .emp-icon-btn:hover {
            color: #FFD700;
            border-color: rgba(37, 99, 235, 0.35);
            background: linear-gradient(165deg, #eff6ff 0%, #dbeafe 100%);
            box-shadow:
                0 8px 24px rgba(37, 99, 235, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }
        #tapx-dash-overlay:not(.dark) .emp-icon-btn--danger:hover {
            color: #b91c1c;
            border-color: rgba(220, 38, 38, 0.35);
            background: linear-gradient(165deg, #fef2f2 0%, #fee2e2 100%);
        }
        .dash-profile-menu-item {
            display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
            width: 100%; text-align: left;
            padding: 0.65rem 1rem; font-size: 0.6875rem; font-weight: 800;
            letter-spacing: 0.08em; text-transform: uppercase;
            color: #e5e7eb; transition: background 0.15s ease;
        }
        .dash-profile-menu-item:hover { background: rgba(255,255,255,0.06); }
        .dash-profile-menu-item:focus-visible { outline: none; background: rgba(0, 163, 255, 0.12); }
        /* Emirates combobox — dark field, neutral edge (no blue outer ring) */
        .doc-modal-combo-input {
            border-radius: 0.5rem !important;
            background: #181818 !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
        }
        .doc-modal-combo-input::placeholder {
            color: rgba(148, 163, 184, 0.95) !important;
        }
        .doc-modal-combo-input:focus,
        .doc-modal-combo-input:focus-visible {
            outline: none !important;
            border-color: rgba(255, 255, 255, 0.22) !important;
            box-shadow: none !important;
        }
        #entity-modal select:not(:disabled),
        #bulk-doc-link-modal select:not(:disabled),
        #bulk-selection-action-modal select:not(:disabled),
        #emp-service-request-modal select:not(:disabled),
        #veh-service-request-modal select:not(:disabled) {
            cursor: pointer;
        }
        .emirate-combo-trigger { cursor: pointer; }
        .emirate-combo-trigger[aria-expanded="true"] {
            border-color: rgba(255, 255, 255, 0.22) !important;
            box-shadow: none !important;
        }
        .emirate-combo-trigger .emirate-chevron { transition: transform 0.2s ease; }
        .emirate-combo-trigger[aria-expanded="true"] .emirate-chevron { transform: rotate(180deg); }
        /* Invisible hit target over the chevron so cursor is pointer (input alone shows I-beam). */
        .emirate-combo-chev-hit {
            position: absolute;
            right: 0.1rem;
            top: 50%;
            transform: translateY(-50%);
            width: 2.25rem;
            height: 2.25rem;
            padding: 0;
            margin: 0;
            border: 0;
            border-radius: 0.375rem;
            background: transparent;
            cursor: pointer;
            z-index: 2;
        }
        .emirate-combo-chev-hit:focus-visible {
            outline: 2px solid rgba(255, 255, 255, 0.35);
            outline-offset: 1px;
        }
        .emirate-combo-popover ul { list-style: none; margin: 0; padding: 0; }
        .emirate-combo-option {
            display: block; box-sizing: border-box; width: calc(100% - 0.5rem); margin: 0 0.25rem;
            text-align: left; padding: 0.55rem 0.75rem; font-size: 0.875rem; font-weight: 500;
            color: #e5e7eb; background: transparent; border: none; cursor: pointer;
            border-radius: 0.375rem;
        }
        .emirate-combo-option:hover, .emirate-combo-option:focus-visible {
            background: rgba(255, 215, 0, 0.14);
            box-shadow: none;
            outline: none;
        }
        [data-emirate-popover].dash-modal-drop-carpet {
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            background: #181818 !important;
        }
        /* Add Employee / Add Docs emirates: overlay list — no layout shift, tight gap under input. */
        #entity-modal #emirates-combo-popover,
        #entity-modal #doc-emirate-combo-popover {
            position: absolute !important;
            left: 0 !important;
            right: 0 !important;
            top: calc(100% + 2px) !important;
            bottom: auto !important;
            margin: 0 !important;
            width: 100% !important;
            z-index: 400 !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
        }
        #entity-modal #emirates-combo-root,
        #entity-modal #doc-emirate-combo-root {
            z-index: 9999 !important;
            position: relative !important;
        }
        /* Add vehicle — emirate list below input with extra gap; stack above grid neighbors (searchable selects). */
        #entity-modal #vehicle-plate-emirate-root {
            z-index: 9999 !important;
            position: relative !important;
            isolation: isolate !important;
        }
        #entity-modal #vehicle-plate-emirate-popover {
            position: fixed !important;
            z-index: 2147483647 !important;
            width: 320px !important;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85) !important;
            margin: 0 !important;
        }
        /* Override any stacking context that clips the popover */
        #entity-modal {
            transform: none !important;
        }
        /* Searchable <select> carpet panels — same overlay stack as Emirates combobox */
        :is(#entity-modal, #bulk-doc-link-modal, #bulk-selection-action-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal)
            .dash-searchable-wrap
            .dash-searchable-panel.dash-modal-drop-carpet {
            position: absolute !important;
            left: 0 !important;
            right: 0 !important;
            top: calc(100% + 2px) !important;
            bottom: auto !important;
            margin: 0 !important;
            width: 100% !important;
            z-index: 400 !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
        }
        .dash-searchable-trigger.dash-searchable-trigger--modal-carpet {
            min-height: auto;
            padding: 0.625rem 2.5rem 0.625rem 0.75rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            line-height: 1.25rem;
        }
        .doc-modal-combo-option.dash-combo-kb-active {
            background: rgba(255, 215, 0, 0.18) !important;
            box-shadow: none !important;
        }
        #tapx-dash-overlay:not(.dark) .doc-modal-combo-option.dash-combo-kb-active {
            background: #fff7da !important;
            box-shadow: none !important;
        }
        .doc-modal-combo-option:hover,
        .doc-modal-combo-option:focus-visible {
            background: rgba(255, 215, 0, 0.14) !important;
            box-shadow: none;
            outline: none;
        }
        .emirate-combo-option[aria-selected="true"] {
            background: transparent;
            color: #fff;
        }
        .emirate-combo-option.hidden { display: none; }
        /* Keyboard / hover highlight only — no default "first row selected" on open */
        #emirates-combo-options .emirate-dropdown-active,
        #doc-emirate-combo-options .emirate-dropdown-active,
        #vehicle-plate-emirate-options .emirate-dropdown-active,
        #emp-filter-emirate-options .emirate-dropdown-active {
            background: rgba(255, 215, 0, 0.18) !important;
            box-shadow: none !important;
        }
        /* Searchable select — default: dark field + white text (tables, modals, filters; all themes) */
        .dash-searchable-wrap { position: relative; width: 100%; }
        .dash-searchable-native {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        .dash-searchable-row {
            position: relative;
            width: 100%;
        }
        .dash-searchable-trigger {
            position: relative;
            z-index: 0;
            box-sizing: border-box;
            width: 100%;
            display: block;
            text-align: left;
            border-radius: 0.5rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: #181818;
            color: #f8fafc;
            min-height: 2.625rem;
            padding: 0.6rem 2.25rem 0.6rem 0.75rem;
            font-size: 0.875rem;
            line-height: 1.35;
            outline: none;
        }
        .dash-searchable-trigger::placeholder {
            color: rgba(148, 163, 184, 0.92);
        }
        .dash-searchable-trigger:focus-visible {
            border-color: rgba(255, 255, 255, 0.22);
            box-shadow: none;
        }
        .dash-searchable-chev {
            position: absolute;
            right: 0.2rem;
            top: 50%;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            padding: 0;
            border: 0;
            border-radius: 0.375rem;
            background: transparent;
            color: rgba(248, 250, 252, 0.85);
            cursor: pointer;
            z-index: 2;
        }
        .dash-searchable-chev:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }
        .dash-searchable-chev .material-symbols-outlined {
            font-size: 1.15rem;
            line-height: 1;
            transition: transform 0.24s ease;
            transform: rotate(0deg);
        }
        .dash-searchable-row .dash-searchable-trigger[aria-expanded='true'] + .dash-searchable-chev .material-symbols-outlined {
            transform: rotate(180deg);
        }
        .dash-searchable-wrap--sm-chev .dash-searchable-trigger {
            padding-right: 1.85rem;
        }
        .dash-searchable-wrap--sm-chev .dash-searchable-chev {
            width: 1.4rem;
            height: 1.4rem;
            right: 0.12rem;
        }
        .dash-searchable-wrap--sm-chev .dash-searchable-chev .material-symbols-outlined {
            font-size: 0.9rem;
            line-height: 1;
        }
        .doc-modal-combo-input + .material-symbols-outlined {
            transition: transform 0.24s ease;
            transform: translateY(-50%) rotate(0deg);
        }
        .doc-modal-combo-input[aria-expanded='true'] + .material-symbols-outlined {
            transform: translateY(-50%) rotate(180deg);
        }
        .dash-searchable-panel {
            position: absolute;
            left: 0;
            right: 0;
            top: calc(100% + 2px);
            z-index: 280;
            border-radius: 0.5rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: #181818;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }
        .dash-searchable-panel.hidden { display: none; }
        .dash-searchable-panel.dash-searchable-panel--above {
            top: auto;
            bottom: calc(100% + 2px);
            box-shadow: 0 -20px 45px rgba(0, 0, 0, 0.5);
        }
        .dash-searchable-list { max-height: 220px; overflow-y: auto; padding: 0.25rem 0; margin: 0; list-style: none; }
        .dash-searchable-option {
            display: block;
            border: 0;
            background: transparent;
            color: #f3f4f6;
            text-align: left;
            font-size: 0.8rem;
            padding: 0.5rem 0.75rem;
            cursor: pointer;
            border-radius: 0.375rem;
            margin: 0 0.25rem;
            width: calc(100% - 0.5rem);
            box-sizing: border-box;
        }
        .dash-searchable-option:hover,
        .dash-searchable-option:focus-visible {
            background: rgba(255, 215, 0, 0.18);
            /* No inset border-shadow — single clean highlight only (per user request) */
            box-shadow: none;
            outline: none;
        }
        /* Current value is not pre-highlighted when the list opens */
        .dash-searchable-option[aria-selected='true'] {
            background: transparent;
            box-shadow: none;
        }
        .dash-searchable-option[aria-selected='true']:hover,
        .dash-searchable-option[aria-selected='true']:focus-visible {
            background: rgba(255, 215, 0, 0.18);
            box-shadow: none;
        }
        .dash-searchable-empty { padding: 0.5rem 0.75rem; font-size: 0.75rem; color: #94a3b8; }

        /* Entity + bulk-actions + fine form — carpet unfold for searchable selects (matches .dash-carpet-expand) */
        :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.58s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
            overflow: hidden;
        }
        :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet:not(.dash-modal-drop-carpet--open) {
            visibility: hidden;
        }
        :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet.dash-modal-drop-carpet--open {
            grid-template-rows: 1fr;
            pointer-events: auto;
            visibility: visible;
        }
        :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(0, 163, 255, 0.2) 22%,
                rgba(0, 163, 255, 0.75) 48%,
                rgba(0, 196, 159, 0.55) 68%,
                transparent 100%
            );
            transform: scaleX(0);
            transform-origin: center;
            opacity: 0;
            transition:
                transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s ease;
            z-index: 2;
            pointer-events: none;
        }
        :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet.dash-modal-drop-carpet--open::before {
            transform: scaleX(1);
            opacity: 1;
        }
        :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet__inner {
            position: relative;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            max-height: min(320px, 56vh);
            transform-origin: top center;
            border-radius: 0 0 0.75rem 0.75rem;
            transition:
                opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0.03s,
                transform 0.6s cubic-bezier(0.22, 1.08, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: inset 0 0 0 rgba(255, 255, 255, 0);
        }
        :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet:not(.dash-modal-drop-carpet--open) .dash-modal-drop-carpet__inner {
            opacity: 0;
            transform: perspective(1200px) rotateX(-10deg) translateY(-14px) scale(0.965);
            pointer-events: none;
        }
        :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet.dash-modal-drop-carpet--open .dash-modal-drop-carpet__inner {
            opacity: 1;
            transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 28px 64px -32px rgba(0, 0, 0, 0.75),
                0 14px 44px -20px rgba(0, 163, 255, 0.16);
        }
        :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet.dash-modal-drop-carpet--anchor-above .dash-modal-drop-carpet__inner {
            transform-origin: bottom center;
            border-radius: 0.75rem 0.75rem 0 0;
        }
        :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet.dash-modal-drop-carpet--anchor-above:not(.dash-modal-drop-carpet--open) .dash-modal-drop-carpet__inner {
            transform: perspective(1200px) rotateX(10deg) translateY(14px) scale(0.965);
        }
        :is(#entity-modal, #bulk-selection-action-modal, #bulk-doc-link-modal, #emp-service-request-modal, #veh-service-request-modal, #fine-form-modal) .dash-modal-drop-carpet__inner .dash-searchable-list {
            max-height: none;
            overflow-y: visible;
        }

        /* Employees table — vertical column dividers REMOVED */
        /* Add / edit employee — stacked fields + optional 2-col row */
        .form-employee-stack {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .form-employee-stack .form-employee-row2 {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 1rem;
            position: relative;
            z-index: 5;
        }
        /* Add Employee: Emirates+phone row must paint above the Nationality searchable field so the emirates list isn’t covered */
        #entity-modal #form-employee .form-employee-stack > .form-employee-row2 {
            z-index: 200;
            isolation: isolate;
        }
        /* Fields after the 2-col row (e.g. Nationality) must stack below the row so Emirates overlay isn’t covered */
        #entity-modal #form-employee .form-employee-row2 + .min-w-0 {
            position: relative;
            z-index: 0;
        }
        #entity-modal #form-employee .form-employee-row2 + .min-w-0 .dash-searchable-wrap {
            z-index: 0;
        }
        /* Add document: emirate + doc number row above issue/expiry row */
        #entity-modal #form-document .grid:has(#doc-emirate-combo-root) {
            position: relative;
            z-index: 9990;
            overflow: visible !important;
        }
        #entity-modal #form-document .grid:has(#doc-emirate-combo-root) + .grid {
            position: relative;
            z-index: 0;
        }
        @media (min-width: 640px) {
            .form-employee-stack .form-employee-row2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        /* No blank gap: the Emirate+field rows (Add Employee: Emirate+Mob No;
           Add Document: Emirate+Frequency) use flex so that if the Emirate
           cell is hidden, the paired field fills the whole row instead of
           leaving an empty half. When both are visible they stay 50/50. */
        @media (min-width: 640px) {
            #entity-modal #form-document .grid:has(#doc-emirate-combo-root),
            #entity-modal #form-employee .form-employee-row2:has(#emirates-combo-root) {
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
            }
            #entity-modal #form-document .grid:has(#doc-emirate-combo-root) > *,
            #entity-modal #form-employee .form-employee-row2:has(#emirates-combo-root) > * {
                flex: 1 1 calc(50% - 0.5rem);
                min-width: 0;
            }
        }
        /* Add / edit vehicle — grid fields */
        .form-vehicle-cols {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
        }
        .form-vehicle-cols > * + * {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        /* Add / edit vehicle modal: compact vertical rhythm, keep same width */
        #form-vehicle {
            gap: 0.625rem;
        }
        #form-vehicle .grid.grid-cols-1.sm\:grid-cols-2 > div {
            padding: 0.625rem;
        }
        #form-vehicle label {
            margin-bottom: 0.125rem;
        }
        #form-vehicle input:not([type="hidden"]),
        #form-vehicle select {
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
        }
        #form-vehicle #vehicle-mob-digits,
        #form-vehicle #vehicle-mob-hidden + div > span {
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
        }
        #form-vehicle .flex.flex-wrap.gap-3.pt-1 {
            padding-top: 0.125rem;
        }
        #entity-modal #form-vehicle .grid.grid-cols-1.sm\:grid-cols-2 > div {
            position: relative;
            z-index: 0;
        }
        /* Old emirate root (kept for legacy) */
        #entity-modal #form-vehicle .grid.grid-cols-1.sm\:grid-cols-2 > div:has(#vehicle-plate-emirate-root) {
            z-index: 220;
            isolation: isolate;
        }
        /* New emirate select cell - higher z than category so panel renders on top */
        #entity-modal #form-vehicle .grid.grid-cols-1.sm\:grid-cols-2 > div:has(#vehicle-emirate-select) {
            position: relative;
            z-index: 250;
            isolation: isolate;
            overflow: visible !important;
        }
        /* Category */
        #entity-modal #form-vehicle .grid.grid-cols-1.sm\:grid-cols-2 > div:has(#vehicle-category-select) {
            position: relative;
            z-index: 230;
            isolation: isolate;
        }
        /* Status list opens downward over the phone row — keep this cell above the next row (same idea as Employee emirates vs Nationality). */
        #entity-modal #form-vehicle .grid.grid-cols-1.sm\:grid-cols-2 > div:has(#vehicle-status-select) {
            position: relative;
            z-index: 240;
            isolation: isolate;
        }
        #entity-modal #form-vehicle .grid.grid-cols-1.sm\:grid-cols-2 > div:has(#vehicle-mob-digits) {
            position: relative;
            z-index: 0;
        }
        @media (min-width: 1024px) {
            .form-vehicle-cols {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .form-vehicle-cols > * + * {
                border-top: none;
                border-left: 1px solid rgba(255, 255, 255, 0.08);
            }
        }
        #tapx-dash-overlay:not(.dark) .form-vehicle-cols > * + * { border-top-color: rgba(148, 163, 184, 0.35); }
        @media (min-width: 1024px) {
            #tapx-dash-overlay:not(.dark) .form-vehicle-cols > * + * {
                border-left-color: rgba(148, 163, 184, 0.4);
                border-top: none;
            }
        }

        /* Floating WhatsApp — bottom-right (below modals z-[200]) */
        .whatsapp-float {
            position: fixed !important;
            isolation: isolate;
            right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
            bottom: max(1.25rem, calc(1.25rem + env(safe-area-inset-bottom, 0px))) !important;
            left: auto !important;
            top: auto !important;
            z-index: 9999 !important;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 9999px;
            background: #25d366;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                0 4px 18px rgba(37, 211, 102, 0.45),
                0 0 0 1px rgba(255, 255, 255, 0.12) inset;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        @media (min-width: 640px) {
            .whatsapp-float {
                width: 3.75rem;
                height: 3.75rem;
                right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
                bottom: max(1.5rem, calc(1.5rem + env(safe-area-inset-bottom, 0px))) !important;
            }
        }
        .whatsapp-float:hover {
            transform: scale(1.07);
            box-shadow:
                0 8px 28px rgba(37, 211, 102, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.18) inset;
        }
        .whatsapp-float:focus-visible {
            outline: 2px solid #00A3FF;
            outline-offset: 3px;
        }
        .whatsapp-float svg {
            width: 1.85rem;
            height: 1.85rem;
            display: block;
        }
        @media (min-width: 640px) {
            .whatsapp-float svg {
                width: 2rem;
                height: 2rem;
            }
        }
        .whatsapp-float__ring {
            position: absolute;
            inset: -4px;
            border-radius: inherit;
            border: 2px solid rgba(37, 211, 102, 0.45);
            animation: none; /* blink-kill */
            pointer-events: none;
        }
        @keyframes dash-whatsapp-float-ping {
            0% { transform: scale(1); opacity: 0.6; }
            100% { transform: scale(1.35); opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .whatsapp-float__ring { animation: none; opacity: 0; }
        }

        /* Document summary ISS/EXP — white in dark (main .text-white is remapped to blue in light theme) */
        main .dash-doc-iss-exp-text {
            color: #ffffff !important;
        }
        #tapx-dash-overlay:not(.dark) main .dash-doc-iss-exp-text {
            color: var(--dash-text-blue-mid) !important;
        }

        /* Light theme — eye-comfortable warm cream palette */
        #tapx-dash-overlay:not(.dark) {
            --dash-text-blue: #2c2a26;
            --dash-text-blue-mid: #4a443c;
            --dash-text-blue-soft: #5c574e;
            --dash-text-blue-muted: #8a8378;
        }
        #tapx-dash-overlay:not(.dark) { color: #2c2a26 !important; }
        /* Light mode: warm dark text for visibility — easy on eyes */
        #tapx-dash-overlay:not(.dark) main .text-gray-200,
        #tapx-dash-overlay:not(.dark) main .text-gray-300 { color: #2c2a26 !important; }
        #tapx-dash-overlay:not(.dark) main .text-gray-400 { color: #4a443c !important; }
        #tapx-dash-overlay:not(.dark) main .text-gray-500 { color: #5c574e !important; }
        #tapx-dash-overlay:not(.dark) main .text-gray-600 { color: #2c2a26 !important; }
        /* CRITICAL: Force input/textarea/select values to be warm dark and visible in light mode */
        #tapx-dash-overlay:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        #tapx-dash-overlay:not(.dark) textarea,
        #tapx-dash-overlay:not(.dark) select {
            color: #2c2a26 !important;
            -webkit-text-fill-color: #2c2a26 !important;
        }
        #tapx-dash-overlay:not(.dark) input::placeholder,
        #tapx-dash-overlay:not(.dark) textarea::placeholder {
            color: #8a8378 !important;
            opacity: 1 !important;
        }
        #tapx-dash-overlay:not(.dark) input[readonly],
        #tapx-dash-overlay:not(.dark) input[disabled],
        #tapx-dash-overlay:not(.dark) textarea[readonly],
        #tapx-dash-overlay:not(.dark) textarea[disabled] {
            color: #2c2a26 !important;
            -webkit-text-fill-color: #2c2a26 !important;
            opacity: 1 !important;
        }
        /* Table cells, divs and spans displaying values */
        #tapx-dash-overlay:not(.dark) td,
        #tapx-dash-overlay:not(.dark) th,
        #tapx-dash-overlay:not(.dark) .dash-card td,
        #tapx-dash-overlay:not(.dark) .dash-card span:not([style*="color"]) {
            color: inherit !important;
        }
        #tapx-dash-overlay:not(.dark) aside.dash-sidebar .text-gray-400,
        #tapx-dash-overlay:not(.dark) aside.dash-sidebar .text-gray-500 { color: var(--dash-text-blue-muted) !important; }
        #tapx-dash-overlay:not(.dark) header .text-gray-500,
        #tapx-dash-overlay:not(.dark) header .text-gray-400 { color: var(--dash-text-blue-muted) !important; }
        #tapx-dash-overlay:not(.dark) header input[type="search"]::placeholder { color: var(--dash-text-blue-muted); opacity: 1; }
        #tapx-dash-overlay:not(.dark) #entity-modal .text-gray-200,
        #tapx-dash-overlay:not(.dark) #entity-modal .text-gray-300 { color: var(--dash-text-blue-mid) !important; }
        #tapx-dash-overlay:not(.dark) #entity-modal .text-gray-500,
        #tapx-dash-overlay:not(.dark) #entity-modal .text-gray-400,
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal .text-gray-500,
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal .text-gray-400 { color: var(--dash-text-blue-muted) !important; }
        #tapx-dash-overlay:not(.dark) .dash-sidebar {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 250, 252, 0.88) 100%);
            backdrop-filter: blur(20px) saturate(1.08);
            -webkit-backdrop-filter: blur(20px) saturate(1.08);
            border-right-color: rgba(15, 23, 42, 0.06);
            box-shadow: 4px 0 32px rgba(15, 23, 42, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.95);
        }
        #tapx-dash-overlay:not(.dark) #entity-modal input:not(.dash-searchable-trigger)::placeholder {
            color: var(--dash-text-blue-muted);
            opacity: 1;
        }
        #tapx-dash-overlay:not(.dark) .dash-sidebar .border-white\/5,
        #tapx-dash-overlay:not(.dark) .dash-sidebar .border-b.border-white\/5 { border-color: rgba(15, 23, 42, 0.08) !important; }
        #tapx-dash-overlay:not(.dark) .nav-link { color: #9ca3af !important; }
        #tapx-dash-overlay:not(.dark) .nav-link:hover { color: #ffffff !important; background: rgba(255,255,255,0.05); }
        #tapx-dash-overlay:not(.dark) .nav-link.active {
            color: #ffffff !important;
            background: rgba(0, 163, 255, 0.1);
            box-shadow: 0 0 0 1px rgba(0, 163, 255, 0.35), 0 0 24px rgba(0, 163, 255, 0.12);
            animation: none; /* blink-kill */
        }
        #tapx-dash-overlay:not(.dark) .nav-link::before {
            background: linear-gradient(180deg, #4f46e5 0%, #6366f1 45%, #06b6d4 100%);
            box-shadow: 0 0 14px rgba(79, 70, 229, 0.35);
        }
        #tapx-dash-overlay:not(.dark) #dash-nav .nav-link:hover {
            background: rgba(79, 70, 229, 0.06);
            box-shadow: -4px 10px 24px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(79, 70, 229, 0.12), 0 0 20px rgba(6, 182, 212, 0.08);
        }
        #tapx-dash-overlay:not(.dark) #dash-nav .nav-link .material-symbols-outlined {
            color: #1a1a1a !important;
        }
        #tapx-dash-overlay:not(.dark) #dash-nav .nav-link:hover .material-symbols-outlined {
            color: #000000 !important;
            filter: none;
        }
        #tapx-dash-overlay:not(.dark) #dash-nav .nav-link.active .material-symbols-outlined {
            color: #000000 !important;
            filter: none;
        }
        #tapx-dash-overlay:not(.dark) .dash-card {
            border-color: rgba(0, 0, 0, 0.04);
        }
        #tapx-dash-overlay:not(.dark) header.sticky {
            background: rgba(255, 255, 255, 0.78) !important;
            backdrop-filter: blur(18px) saturate(1.05);
            -webkit-backdrop-filter: blur(18px) saturate(1.05);
            border-bottom-color: rgba(15, 23, 42, 0.06) !important;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 8px 28px rgba(15, 23, 42, 0.06) !important;
        }
        #tapx-dash-overlay:not(.dark) #dash-header-profile-btn { --tw-ring-offset-color: #f6f8fb; }
        #dash-header-profile-menu {
            z-index: 9999 !important;
        }
        #dash-header-profile-menu.profile-menu-open {
            position: fixed !important;
            z-index: 2147483647 !important;
            display: block !important;
        }
        #dash-header-profile-wrap {
            z-index: 9999 !important;
        }
        #dash-header-profile-menu.dash-header-profile-menu--above {
            top: auto !important;
            bottom: calc(100% + 0.5rem) !important;
            margin-top: 0 !important;
            margin-bottom: 0.5rem !important;
            box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.75);
        }
        #tapx-dash-overlay:not(.dark) #dash-header-profile-menu {
            background: #ffffff !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12) !important;
        }
        #tapx-dash-overlay:not(.dark) #dash-header-profile-menu.dash-header-profile-menu--above {
            box-shadow: 0 -20px 50px rgba(15, 23, 42, 0.12) !important;
        }
        #tapx-dash-overlay:not(.dark) .dash-profile-menu-item { color: var(--dash-text-blue-mid); }
        #tapx-dash-overlay:not(.dark) .dash-profile-menu-item:hover { background: rgba(6, 42, 71, 0.06); }
        #tapx-dash-overlay:not(.dark) .dash-profile-menu-item.border-b { border-color: rgba(15, 23, 42, 0.08) !important; }
        #tapx-dash-overlay:not(.dark) select.doc-link-select,
        #tapx-dash-overlay:not(.dark) .entity-docs-select {
            background-color: #f8fafc;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
            border-color: rgba(15, 23, 42, 0.12);
            color: var(--dash-text-blue);
        }
        #tapx-dash-overlay:not(.dark) select.doc-link-select:focus,
        #tapx-dash-overlay:not(.dark) select.doc-link-select:focus-visible,
        #tapx-dash-overlay:not(.dark) .entity-docs-select:focus,
        #tapx-dash-overlay:not(.dark) .entity-docs-select:focus-visible {
            border-color: rgba(15, 23, 42, 0.22);
            box-shadow: none;
        }
        /* Modals — native doc-link selects (before / beside combobox) match dark inputs */
        #entity-modal select.doc-link-select,
        #bulk-doc-link-modal select.doc-link-select,
        #emp-service-request-modal select.doc-link-select,
        #veh-service-request-modal select.doc-link-select,
        #fine-form-modal select.doc-link-select {
b b             background-color: rgba(0, 0, 0, 0.45);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
            border-color: rgba(255, 255, 255, 0.12);
            color: #f8fafc;
        }
        #entity-modal select.doc-link-select:focus,
        #entity-modal select.doc-link-select:focus-visible,
        #bulk-doc-link-modal select.doc-link-select:focus,
        #bulk-doc-link-modal select.doc-link-select:focus-visible,
        #emp-service-request-modal select.doc-link-select:focus,
        #emp-service-request-modal select.doc-link-select:focus-visible,
        #veh-service-request-modal select.doc-link-select:focus,
        #veh-service-request-modal select.doc-link-select:focus-visible,
        #fine-form-modal select.doc-link-select:focus,
        #fine-form-modal select.doc-link-select:focus-visible {
            border-color: rgba(255, 255, 255, 0.22);
            box-shadow: none;
        }
        #entity-modal #employee-nationality-select {
            background-color: rgba(0, 0, 0, 0.45);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
            border-color: rgba(255, 255, 255, 0.12);
            color: #f8fafc;
        }
        #entity-modal #employee-nationality-select:focus,
        #entity-modal #employee-nationality-select:focus-visible {
            border-color: rgba(255, 255, 255, 0.22);
            box-shadow: none;
        }
        /* Vehicles table — linked docs stay native select; dark field + white text (override light-theme select chrome) */
        #tbody-vehicles select.entity-docs-select.veh-docs-select {
            background-color: rgba(0, 0, 0, 0.45);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
            border-color: rgba(255, 255, 255, 0.12);
            color: #f8fafc;
        }
        #tbody-vehicles select.entity-docs-select.veh-docs-select:focus,
        #tbody-vehicles select.entity-docs-select.veh-docs-select:focus-visible {
            border-color: rgba(255, 255, 255, 0.22);
            box-shadow: none;
        }
        #tapx-dash-overlay:not(.dark) .emirate-combo-option { color: var(--dash-text-blue-mid); }
        #tapx-dash-overlay:not(.dark) .emirate-combo-option:hover,
        #tapx-dash-overlay:not(.dark) .emirate-combo-option:focus-visible { background: rgba(6, 42, 71, 0.06); }
        #tapx-dash-overlay:not(.dark) .emirate-combo-option[aria-selected="true"] { color: var(--dash-text-blue); }
        #tapx-dash-overlay:not(.dark) aside.dash-sidebar .text-white { color: var(--dash-text-blue) !important; }
        #tapx-dash-overlay:not(.dark) aside.dash-sidebar .bg-gradient-to-br.text-white { color: #fff !important; }
        #tapx-dash-overlay:not(.dark) header .text-white { color: var(--dash-text-blue) !important; }
        #tapx-dash-overlay:not(.dark) header .bg-accent-orange.text-white { color: #fff !important; }
        #tapx-dash-overlay:not(.dark) header input[type="search"] {
            background: #ffffff !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
            color: var(--dash-text-blue) !important;
        }
        #tapx-dash-overlay:not(.dark) header .border-white\/10 { border-color: rgba(15, 23, 42, 0.12) !important; }
        #tapx-dash-overlay:not(.dark) main .text-white { color: var(--dash-text-blue) !important; }
        #tapx-dash-overlay:not(.dark) main .bg-green-600.text-white,
        #tapx-dash-overlay:not(.dark) main .bg-green-500.text-white { color: #fff !important; }
        #tapx-dash-overlay:not(.dark) main button.bg-white\/10 {
            background: rgba(6, 42, 71, 0.06) !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
            color: var(--dash-text-blue) !important;
        }
        #tapx-dash-overlay:not(.dark) main .border-white\/5 { border-color: rgba(15, 23, 42, 0.08) !important; }
        #tapx-dash-overlay:not(.dark) main .border-white\/8 { border-color: rgba(15, 23, 42, 0.1) !important; }
        #tapx-dash-overlay:not(.dark) main .border-white\/10 { border-color: rgba(15, 23, 42, 0.1) !important; }
        #tapx-dash-overlay:not(.dark) main .bg-black\/40 { background: rgba(241, 245, 249, 0.95) !important; }
        #tapx-dash-overlay:not(.dark) main .bg-black\/60 { background: #c8d2e0 !important; }
        #tapx-dash-overlay:not(.dark) main .bg-black\/30 { background: rgba(241, 245, 249, 0.9) !important; }
        #tapx-dash-overlay:not(.dark) main .bg-black\/50 { background: rgba(226, 232, 240, 0.9) !important; }
        #tapx-dash-overlay:not(.dark) main .font-mono.text-emerald-400\/90 { color: rgb(5 150 105 / 0.95) !important; }
        #tapx-dash-overlay:not(.dark) #entity-modal,
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal {
            background: rgba(15, 23, 42, 0.45) !important;
        }
        #tapx-dash-overlay:not(.dark) #entity-modal-panel,
        #tapx-dash-overlay:not(.dark) #entity-modal-panel .sticky,
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal > div.rounded-2xl {
            background: #ffffff !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
            box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12) !important;
        }
        #tapx-dash-overlay:not(.dark) #emirates-combo-popover,
        #tapx-dash-overlay:not(.dark) #doc-emirate-combo-popover,
        #tapx-dash-overlay:not(.dark) #vehicle-plate-emirate-popover,
        #tapx-dash-overlay:not(.dark) #emp-filter-emirate-popover {
            background: #ffffff !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
        }
        #tapx-dash-overlay:not(.dark) .doc-modal-combo-option {
            color: var(--dash-text-blue-mid) !important;
        }
        #tapx-dash-overlay:not(.dark) .doc-modal-combo-option:hover {
            background: #fff7da !important;
            color: #0f172a !important;
        }
        #tapx-dash-overlay:not(.dark) #entity-modal .text-white { color: var(--dash-text-blue) !important; }
        #tapx-dash-overlay:not(.dark) #entity-modal input:not([type="checkbox"]):not(.dash-searchable-trigger),
        #tapx-dash-overlay:not(.dark) #entity-modal #emirates-combo-input,
        #tapx-dash-overlay:not(.dark) #entity-modal .doc-modal-combo-input,
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal input:not(.dash-searchable-trigger) {
            background: #f8fafc !important;
            border-color: rgba(15, 23, 42, 0.12) !important;
            color: var(--dash-text-blue) !important;        }
        /* Searchable combobox triggers — dark like other modal fields (wins over light-theme input !important) */
        #entity-modal .dash-searchable-trigger,
        #bulk-doc-link-modal .dash-searchable-trigger,
        #bulk-selection-action-modal .dash-searchable-trigger,
        #emp-service-request-modal .dash-searchable-trigger,
        #veh-service-request-modal .dash-searchable-trigger,
        #fine-form-modal .dash-searchable-trigger {
            background: #181818 !important;
            color: #f8fafc !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            -webkit-text-fill-color: #f8fafc !important;
            border-radius: 0.75rem !important;
        }
        #entity-modal .dash-searchable-trigger::placeholder,
        #bulk-doc-link-modal .dash-searchable-trigger::placeholder,
        #bulk-selection-action-modal .dash-searchable-trigger::placeholder,
        #emp-service-request-modal .dash-searchable-trigger::placeholder,
        #veh-service-request-modal .dash-searchable-trigger::placeholder,
        #fine-form-modal .dash-searchable-trigger::placeholder {
            color: rgba(148, 163, 184, 0.92) !important;
            -webkit-text-fill-color: rgba(148, 163, 184, 0.92) !important;
            opacity: 1 !important;
        }
        #entity-modal .dash-searchable-trigger:focus-visible,
        #bulk-doc-link-modal .dash-searchable-trigger:focus-visible,
        #bulk-selection-action-modal .dash-searchable-trigger:focus-visible,
        #emp-service-request-modal .dash-searchable-trigger:focus-visible,
        #veh-service-request-modal .dash-searchable-trigger:focus-visible,
        #fine-form-modal .dash-searchable-trigger:focus-visible {
            border-color: rgba(255, 255, 255, 0.22) !important;
            box-shadow: none !important;
        }
        #tapx-dash-overlay:not(.dark) #entity-modal .dash-searchable-trigger,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal .dash-searchable-trigger,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-trigger,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal .dash-searchable-trigger,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal .dash-searchable-trigger,
        #tapx-dash-overlay:not(.dark) #fine-form-modal .dash-searchable-trigger {
            background: #f8fafc !important;
            border-color: rgba(15, 23, 42, 0.18) !important;
            color: var(--dash-text-blue) !important;
            -webkit-text-fill-color: var(--dash-text-blue) !important;
        }
        #tapx-dash-overlay:not(.dark) #entity-modal .dash-searchable-trigger:focus-visible,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal .dash-searchable-trigger:focus-visible,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-trigger:focus-visible,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal .dash-searchable-trigger:focus-visible,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal .dash-searchable-trigger:focus-visible,
        #tapx-dash-overlay:not(.dark) #fine-form-modal .dash-searchable-trigger:focus-visible {
            border-color: rgba(37, 99, 235, 0.45) !important;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12) !important;
        }
        #entity-modal .dash-searchable-chev,
        #bulk-doc-link-modal .dash-searchable-chev,
        #bulk-selection-action-modal .dash-searchable-chev,
        #emp-service-request-modal .dash-searchable-chev,
        #veh-service-request-modal .dash-searchable-chev {
            color: rgba(248, 250, 252, 0.85) !important;
        }
        #tapx-dash-overlay:not(.dark) #entity-modal .border-white\/10 { border-color: rgba(15, 23, 42, 0.12) !important; }
        #tapx-dash-overlay:not(.dark) #entity-modal .modal-cancel,
        #tapx-dash-overlay:not(.dark) #entity-modal #modal-entity-close {
            color: var(--dash-text-blue-soft) !important;
        }
        #tapx-dash-overlay:not(.dark) #entity-modal #modal-entity-close:hover { color: var(--dash-text-blue) !important; background: rgba(6, 42, 71, 0.06) !important; }
        #tapx-dash-overlay:not(.dark) #entity-modal .bg-black\/50 { background: #f8fafc !important; }
        #tapx-dash-overlay:not(.dark) #entity-modal .bg-black\/45 { background: #f8fafc !important; }
        #tapx-dash-overlay:not(.dark) #entity-modal input.bg-transparent { color: var(--dash-text-blue) !important; }
        #tapx-dash-overlay:not(.dark) .bg-accent-orange.text-white { color: #fff !important; }
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal input[readonly] {
            background: #f1f5f9 !important;
            color: var(--dash-text-blue-muted) !important;
        }
        #tapx-dash-overlay:not(.dark) main strong.text-gray-400 { color: var(--dash-text-blue-soft) !important; }
        #tapx-dash-overlay:not(.dark) main table .text-gray-500 { color: var(--dash-text-blue-muted) !important; }
        #tapx-dash-overlay:not(.dark) main .text-amber-200,
        #tapx-dash-overlay:not(.dark) main .text-amber-200\/90 { color: var(--dash-text-blue-mid) !important; }

        /* Design enhancement layer — professional dark/light polish + UX motion */
        :root {
            --ui-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
            --ui-shadow-dark-sm: 0 10px 30px rgba(0, 0, 0, 0.28);
            --ui-shadow-dark-lg: 0 20px 55px rgba(0, 0, 0, 0.42);
            --ui-shadow-light-sm: 0 8px 25px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
            --ui-shadow-light-lg: 0 20px 50px rgba(15, 23, 42, 0.09), 0 6px 16px rgba(15, 23, 42, 0.05);
            --ui-ring-blue: 0 0 0 3px rgba(0, 163, 255, 0.16);
            --ui-ring-indigo: 0 0 0 3px rgba(79, 70, 229, 0.18);
            --ui-grad-main-dark: radial-gradient(130% 95% at 6% -6%, rgba(0, 229, 255, 0.1), transparent 46%),
                radial-gradient(120% 90% at 100% 8%, rgba(255, 215, 0, 0.055), transparent 42%),
                radial-gradient(140% 100% at 92% 102%, rgba(0, 196, 159, 0.09), transparent 52%),
                linear-gradient(168deg, #040608 0%, #0b0f19 50%, #05070a 100%);
            --ui-grad-main-light: linear-gradient(135deg, #f6f8fb 0%, #eef2f7 48%, #f8fafc 100%),
                radial-gradient(120% 90% at 6% -6%, rgba(79, 70, 229, 0.08), transparent 48%),
                radial-gradient(100% 80% at 100% 100%, rgba(6, 182, 212, 0.07), transparent 52%);
        }
        #tapx-dash-overlay.dark {
            background: var(--ui-grad-main-dark);
            background-attachment: fixed;
        }
        #tapx-dash-overlay:not(.dark) {
            background: var(--ui-grad-main-light);
            background-attachment: fixed;
        }
        .dash-shell {
            position: relative;
            isolation: isolate;
        }
        .dash-shell::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0.65;
            background: repeating-linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.02) 0,
                rgba(255, 255, 255, 0.02) 1px,
                transparent 1px,
                transparent 44px
            );
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 70%);
        }
        #tapx-dash-overlay:not(.dark) .dash-shell::before {
            opacity: 0.45;
            background: repeating-linear-gradient(
                90deg,
                rgba(15, 23, 42, 0.04) 0,
                rgba(15, 23, 42, 0.04) 1px,
                transparent 1px,
                transparent 48px
            );
        }
        .dash-shell > *:not(.tapx-float-particles) {
            position: relative;
            z-index: 1;
        }
        .tapx-float-particles {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0.35;
            background-image:
                radial-gradient(circle at 12% 22%, rgba(0, 229, 255, 0.07) 0 1.5px, transparent 2.5px),
                radial-gradient(circle at 78% 64%, rgba(255, 215, 0, 0.06) 0 1px, transparent 2px),
                radial-gradient(circle at 44% 88%, rgba(0, 163, 255, 0.05) 0 1px, transparent 2px),
                radial-gradient(circle at 92% 18%, rgba(0, 229, 255, 0.04) 0 1px, transparent 2px);
            background-size: 220px 220px, 280px 260px, 320px 300px, 240px 240px;
            background-position: 0% 0%, 20% 40%, 60% 10%, 80% 70%;
            animation: none; /* blink-kill */
        }
        #tapx-dash-overlay:not(.dark) .tapx-float-particles {
            opacity: 0.28;
            background-image:
                radial-gradient(circle at 15% 25%, rgba(79, 70, 229, 0.07) 0 1.5px, transparent 2.5px),
                radial-gradient(circle at 82% 58%, rgba(6, 182, 212, 0.06) 0 1px, transparent 2px),
                radial-gradient(circle at 48% 90%, rgba(99, 102, 241, 0.05) 0 1px, transparent 2px);
            animation-duration: 96s;
        }
        @keyframes tapxParticlesDrift {
            0% {
                background-position: 0% 0%, 20% 40%, 60% 10%, 80% 70%;
            }
            100% {
                background-position: 100% 80%, 80% 20%, 30% 90%, 10% 30%;
            }
        }
        @keyframes tapxSidebarSettle {
            from {
                opacity: 0.94;
                transform: translateX(-10px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .dash-shell::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E"),
                radial-gradient(ellipse 95% 72% at 16% 14%, rgba(0, 229, 255, 0.1), transparent 54%),
                radial-gradient(ellipse 78% 58% at 90% 76%, rgba(255, 215, 0, 0.05), transparent 50%),
                radial-gradient(ellipse 70% 48% at 52% 100%, rgba(0, 196, 159, 0.045), transparent 46%);
            background-size: 180px 180px, 135% 135%, 125% 125%, 120% 120%;
            background-position: 0% 0%, 0% 0%, 100% 0%, 50% 100%;
            background-blend-mode: soft-light, normal, normal, normal;
            opacity: 0.55;
            animation: none; /* blink fix */
        }
        #tapx-dash-overlay:not(.dark) .dash-shell::after {
            opacity: 0.42;
            transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
            will-change: transform;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E"),
                radial-gradient(ellipse 100% 75% at 10% 12%, rgba(79, 70, 229, 0.09), transparent 54%),
                radial-gradient(ellipse 85% 65% at 92% 78%, rgba(6, 182, 212, 0.07), transparent 52%);
            background-blend-mode: multiply, normal, normal;
        }
        @keyframes saasOrbDrift {
            0% {
                opacity: 0.48;
                filter: saturate(1);
                background-position: 0% 0%, 0% 0%, 100% 0%, 50% 100%;
            }
            100% {
                opacity: 0.62;
                filter: saturate(1.06);
                background-position: 0% 0%, 100% 60%, 0% 80%, 50% 0%;
            }
        }
        .dash-sidebar {
            backdrop-filter: blur(22px) saturate(1.15);
            -webkit-backdrop-filter: blur(22px) saturate(1.15);
            box-shadow: 8px 0 36px rgba(0, 0, 0, 0.28), inset -1px 0 0 rgba(255, 255, 255, 0.04);
        }
        #tapx-dash-overlay.dark .dash-sidebar {
            background: linear-gradient(180deg, rgba(6, 9, 16, 0.82) 0%, rgba(4, 7, 12, 0.88) 100%);
            border-right-color: rgba(148, 163, 184, 0.1);
            box-shadow:
                8px 0 40px rgba(0, 0, 0, 0.35),
                inset -1px 0 0 rgba(0, 163, 255, 0.06),
                0 0 60px rgba(0, 163, 255, 0.03);
        }
        #tapx-dash-overlay:not(.dark) .dash-sidebar {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 250, 252, 0.9) 100%);
            border-right-color: rgba(15, 23, 42, 0.06);
            box-shadow: 8px 0 36px rgba(15, 23, 42, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 1);
        }
        header.sticky {
            backdrop-filter: blur(22px) saturate(1.12);
            -webkit-backdrop-filter: blur(22px) saturate(1.12);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
        }
        #tapx-dash-overlay:not(.dark) header.sticky {
            box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
        }
        .dash-card {
            --tilt-x: 0;
            --tilt-y: 0;
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            box-shadow: var(--ui-shadow-dark-sm);
            transition:
                transform 0.35s ease-in-out,
                box-shadow 0.35s ease-in-out,
                border-color 0.3s ease-in-out,
                background 0.3s ease-in-out,
                filter 0.35s ease-in-out;
        }
        .dash-card::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            background: linear-gradient(120deg, transparent 15%, rgba(255, 255, 255, 0.08) 50%, transparent 85%);
            transform: translateX(-110%);
            transition: transform 0.7s var(--ui-ease-smooth), opacity 0.35s ease;
        }
        .dash-card:hover::after {
            opacity: 0.55;
            transform: translateX(110%);
        }
        #tapx-dash-overlay.dark .dash-card {
            background: rgba(12, 16, 26, 0.52);
            backdrop-filter: blur(26px) saturate(1.2);
            -webkit-backdrop-filter: blur(26px) saturate(1.2);
            border: 1px solid rgba(255, 255, 255, 0.07);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.03) inset,
                0 10px 40px rgba(0, 0, 0, 0.35),
                0 0 80px rgba(0, 163, 255, 0.04);
        }
        #tapx-dash-overlay.dark .dash-card:hover {
            transform: perspective(1200px) rotateX(calc(-1deg + var(--tilt-y) * -2.5deg)) rotateY(calc(var(--tilt-x) * 2.5deg)) translateY(-4px) translateZ(6px) scale(1.008);
            box-shadow:
                0 0 0 1px rgba(255, 215, 0, 0.12) inset,
                0 28px 64px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(0, 229, 255, 0.22),
                0 0 56px rgba(0, 229, 255, 0.12),
                0 0 80px rgba(255, 215, 0, 0.06);
            border-color: rgba(255, 255, 255, 0.14);
        }
        #tapx-dash-overlay:not(.dark) .dash-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(16px) saturate(1.06);
            -webkit-backdrop-filter: blur(16px) saturate(1.06);
            border: 1px solid rgba(0, 0, 0, 0.04);
            border-radius: 1.25rem;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.98) inset,
                0 8px 25px rgba(0, 0, 0, 0.06),
                0 2px 6px rgba(0, 0, 0, 0.04);
            transition:
                transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #tapx-dash-overlay:not(.dark) .dash-card:hover {
            transform: perspective(1200px) rotateX(calc(-0.35deg + var(--tilt-y) * -1.25deg)) rotateY(calc(var(--tilt-x) * 1.25deg)) translateY(-3px) translateZ(4px) scale(1.004);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 1) inset,
                0 20px 48px rgba(15, 23, 42, 0.1),
                0 6px 16px rgba(15, 23, 42, 0.05),
                0 0 0 1px rgba(79, 70, 229, 0.1),
                0 0 40px rgba(6, 182, 212, 0.07);
            border-color: rgba(79, 70, 229, 0.12);
        }
        .nav-link {
            position: relative;
        }
        .nav-link::before {
            content: '';
            position: absolute;
            left: 0.1rem;
            top: 0.34rem;
            bottom: 0.34rem;
            width: 3px;
            border-radius: 999px;
            background: linear-gradient(180deg, #00a3ff 0%, #38bdf8 45%, #ffd700 100%);
            box-shadow: 0 0 12px rgba(0, 163, 255, 0.35);
            opacity: 0;
            transform: scaleY(0.4);
            transition: opacity 0.22s ease, transform 0.22s ease;
        }
        #dash-nav .nav-link .material-symbols-outlined {
            font-size: 1.35rem;
            transition: filter 0.28s ease, text-shadow 0.28s ease, transform 0.24s var(--ui-ease-smooth);
        }
        #dash-nav .nav-link:hover .material-symbols-outlined {
            filter: drop-shadow(0 0 6px rgba(0, 163, 255, 0.45));
            transform: translateZ(2px);
        }
        #dash-nav .nav-link.active .material-symbols-outlined {
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.25));
        }
        .nav-link.active::before {
            opacity: 1;
            transform: scaleY(1);
        }
        .emp-icon-btn,
        .dash-stat-tile,
        .emp-stat-card {
            transition: transform 0.24s var(--ui-ease-smooth), box-shadow 0.24s var(--ui-ease-smooth), border-color 0.2s ease, background 0.22s ease, color 0.2s ease;
        }
        #dash-main button:not([type='checkbox']):not([type='radio']):not(:disabled):not(.emp-row-check):not(.doc-row-check):not(.veh-row-check):not(.recycle-row-check):not(.vault-row-check):not(.emp-stat-card):not(.emp-icon-btn):not(.veh-toolbar-icon-btn):not(.dash-module-toolbar__add):not(.vault-password-toggle) {
            transform-style: preserve-3d;
            position: relative;
            overflow: hidden;
            transition:
                transform 0.32s ease-in-out,
                box-shadow 0.32s ease-in-out,
                filter 0.28s ease-in-out;
        }
        #dash-main button:not([type='checkbox']):not([type='radio']):not(:disabled):not(.emp-row-check):not(.doc-row-check):not(.veh-row-check):not(.recycle-row-check):not(.vault-row-check):not(.emp-stat-card):not(.emp-icon-btn):not(.veh-toolbar-icon-btn):not(.dash-module-toolbar__add):not(.vault-password-toggle)::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(circle at var(--tapx-rip-x, 50%) var(--tapx-rip-y, 50%), rgba(0, 229, 255, 0.22) 0%, transparent 55%);
            transform: scale(0);
            opacity: 0;
        }
        #dash-main button:not([type='checkbox']):not([type='radio']):not(:disabled):not(.emp-row-check):not(.doc-row-check):not(.veh-row-check):not(.recycle-row-check):not(.vault-row-check):not(.emp-stat-card):not(.emp-icon-btn):not(.veh-toolbar-icon-btn):not(.dash-module-toolbar__add):not(.vault-password-toggle):active::after {
            animation: tapxRipple 0.55s ease-out forwards;
        }
        #dash-main button:not([type='checkbox']):not([type='radio']):not(:disabled):not(.emp-row-check):not(.doc-row-check):not(.veh-row-check):not(.recycle-row-check):not(.vault-row-check):not(.emp-stat-card):not(.emp-icon-btn):not(.veh-toolbar-icon-btn):not(.dash-module-toolbar__add):not(.vault-password-toggle):hover {
            transform: translateY(-2px) translateZ(4px) scale(1.05);
            filter: brightness(1.04) drop-shadow(0 0 14px rgba(0, 229, 255, 0.18));
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 24px rgba(0, 229, 255, 0.08);
        }
        #tapx-dash-overlay:not(.dark) #dash-main button:not([type='checkbox']):not([type='radio']):not(:disabled):not(.emp-row-check):not(.doc-row-check):not(.veh-row-check):not(.recycle-row-check):not(.vault-row-check):not(.emp-stat-card):not(.emp-icon-btn):not(.veh-toolbar-icon-btn):not(.dash-module-toolbar__add):not(.vault-password-toggle)::after {
            background: radial-gradient(circle at var(--tapx-rip-x, 50%) var(--tapx-rip-y, 50%), rgba(79, 70, 229, 0.2) 0%, rgba(6, 182, 212, 0.12) 35%, transparent 55%);
        }
        #tapx-dash-overlay:not(.dark) #dash-main button:not([type='checkbox']):not([type='radio']):not(:disabled):not(.emp-row-check):not(.doc-row-check):not(.veh-row-check):not(.recycle-row-check):not(.vault-row-check):not(.emp-stat-card):not(.emp-icon-btn):not(.veh-toolbar-icon-btn):not(.dash-module-toolbar__add):not(.vault-password-toggle):hover {
            filter: brightness(1.02) drop-shadow(0 0 16px rgba(79, 70, 229, 0.2));
            box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08), 0 0 28px rgba(6, 182, 212, 0.1);
        }
        #dash-main button:not([type='checkbox']):not([type='radio']):not(:disabled):not(.emp-row-check):not(.doc-row-check):not(.veh-row-check):not(.recycle-row-check):not(.vault-row-check):not(.emp-stat-card):not(.emp-icon-btn):not(.veh-toolbar-icon-btn):not(.dash-module-toolbar__add):not(.vault-password-toggle):active {
            transform: translateY(0) scale(0.95);
            transition-duration: 0.12s;
        }
        @keyframes tapxRipple {
            0% {
                transform: scale(0);
                opacity: 0.5;
            }
            100% {
                transform: scale(2.6);
                opacity: 0;
            }
        }
        header.sticky button:not([disabled]):not([type='checkbox']):not([type='radio']) {
            position: relative;
            overflow: hidden;
            transition: transform 0.32s ease-in-out, box-shadow 0.32s ease-in-out, filter 0.28s ease-in-out;
        }
        header.sticky button:not([disabled]):not([type='checkbox']):not([type='radio'])::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.2) 0%, transparent 55%);
            transform: scale(0);
            opacity: 0;
        }
        header.sticky button:not([disabled]):not([type='checkbox']):not([type='radio']):active::after {
            animation: tapxRipple 0.55s ease-out forwards;
        }
        header.sticky button:not([disabled]):not([type='checkbox']):not([type='radio']):not(#dash-header-profile-btn):hover {
            transform: scale(1.05);
            filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.2));
        }
        #dash-header-profile-btn:hover { transform: none !important; filter: none !important; }
        #tapx-dash-overlay:not(.dark) header.sticky button:not([disabled]):not([type='checkbox']):not([type='radio'])::after {
            background: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.18) 0%, transparent 55%);
        }
        #tapx-dash-overlay:not(.dark) header.sticky button:not([disabled]):not([type='checkbox']):not([type='radio']):hover {
            filter: drop-shadow(0 0 12px rgba(79, 70, 229, 0.22));
        }
        header.sticky button:not([disabled]):not([type='checkbox']):not([type='radio']):active {
            transform: scale(0.95);
            transition-duration: 0.12s;
        }
        #dash-main .emp-stat-card {
            position: relative;
            overflow: hidden;
        }
        #dash-main .emp-stat-card::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.18) 0%, transparent 55%);
            transform: scale(0);
            opacity: 0;
        }
        #dash-main .emp-stat-card:active::after {
            animation: tapxRipple 0.55s ease-out forwards;
        }
        main .material-symbols-outlined {
            transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
        }
        #dash-main button:hover .material-symbols-outlined,
        #dash-main a.dash-stat-tile:hover .material-symbols-outlined {
            transform: scale(1.08);
        }
        #dash-overview {
            animation: none;
        }
        @keyframes tapxMainFade {
            from {
                opacity: 0;
                transform: translateY(24px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .tapx-doc-filter-tab {
            transform-style: preserve-3d;
            padding: 0.4rem 0.85rem;
            border-radius: 0.75rem;
            font-weight: 800;
            font-size: 0.6875rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            cursor: pointer;
            border: 1px solid var(--tapx-icon-border);
            background: linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
            color: #94a3b8;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            transition:
                transform 0.26s var(--tapx-premium-decel),
                border-color 0.22s ease,
                background 0.22s ease,
                color 0.2s ease,
                box-shadow 0.26s ease;
        }
        #tapx-dash-overlay:not(.dark) .tapx-doc-filter-tab {
            background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
            color: #64748b;
            border-color: rgba(15, 23, 42, 0.1);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(15, 23, 42, 0.04);
        }
        .tapx-doc-filter-tab:hover {
            transform: translateY(-1px);
            border-color: rgba(0, 163, 255, 0.45);
            color: #c8d2e0;
            box-shadow: 0 6px 20px rgba(0, 163, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        #tapx-dash-overlay:not(.dark) .tapx-doc-filter-tab:hover {
            color: #FFD700;
            border-color: rgba(37, 99, 235, 0.3);
        }
        .tapx-doc-filter-tab:active {
            transform: translateY(0) scale(0.98);
            transition-duration: 0.1s;
        }
        /* .tapx-doc-filter-tab--active rules are now defined in the
           unified "FILTER PILL TABS — SOLID GOLD GRADIENT" section
           above (section 16). Old white/navy overrides removed per
           user request — button stays GOLD on click, only text turns
           white. */
        .tapx-doc-filter-tab:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        main input:not([type="checkbox"]):not([type="radio"]),
        main select,
        main textarea,
        #entity-modal input:not([type="checkbox"]):not([type="radio"]),
        #entity-modal select,
        #entity-modal textarea,
        #dash-profile-edit-modal input:not([type="checkbox"]):not([type="radio"]),
        #dash-profile-edit-modal select,
        #dash-profile-edit-modal textarea {
            transition: border-color 0.2s ease, box-shadow 0.22s ease, background-color 0.2s ease, transform 0.18s ease;
        }
        main input:not([type="checkbox"]):not([type="radio"]):focus,
        main select:focus,
        main textarea:focus,
        #entity-modal input:not([type="checkbox"]):not([type="radio"]):focus,
        #entity-modal select:focus,
        #entity-modal textarea:focus,
        #dash-profile-edit-modal input:not([type="checkbox"]):not([type="radio"]):focus,
        #dash-profile-edit-modal select:focus,
        #dash-profile-edit-modal textarea:focus {
            box-shadow: var(--ui-ring-blue) !important;
            border-color: rgba(0, 163, 255, 0.58) !important;
            outline: none;
        }
        #tapx-dash-overlay:not(.dark) main input:not([type="checkbox"]):not([type="radio"]),
        #tapx-dash-overlay:not(.dark) main select,
        #tapx-dash-overlay:not(.dark) main textarea {
            border-color: rgba(148, 163, 184, 0.42) !important;
        }
        #tapx-dash-overlay:not(.dark) main input:not([type="checkbox"]):not([type="radio"]):focus,
        #tapx-dash-overlay:not(.dark) main select:focus,
        #tapx-dash-overlay:not(.dark) main textarea:focus {
            box-shadow: var(--ui-ring-indigo) !important;
            border-color: rgba(79, 70, 229, 0.45) !important;
        }
        .emp-table tbody tr,
        #tbody-vehicles tr,
        #tbody-documents tr,
        #table-documents tr,
        #tbody-recycle tr,
        #tbody-vault tr,
        #tbody-fines tr {
            transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .emp-table tbody tr:hover,
        #tbody-vehicles tr:hover,
        #tbody-documents tr:hover,
        #table-documents tr:hover,
        #tbody-recycle tr:hover,
        #tbody-vault tr:hover,
        #tbody-fines tr:hover {
            transform: translateX(2px) scale(1.004);
            background-color: rgba(0, 229, 255, 0.04) !important;
            box-shadow: inset 3px 0 0 rgba(0, 229, 255, 0.5), 0 0 24px rgba(0, 229, 255, 0.04);
        }
        #tapx-dash-overlay:not(.dark) .emp-table tbody tr:hover,
        #tapx-dash-overlay:not(.dark) #tbody-vehicles tr:hover,
        #tapx-dash-overlay:not(.dark) #tbody-documents tr:hover,
        #tapx-dash-overlay:not(.dark) #table-documents tr:hover,
        #tapx-dash-overlay:not(.dark) #tbody-recycle tr:hover,
        #tapx-dash-overlay:not(.dark) #tbody-vault tr:hover,
        #tapx-dash-overlay:not(.dark) #tbody-fines tr:hover {
            transform: translateX(2px) scale(1.005);
            background-color: rgba(79, 70, 229, 0.045) !important;
            box-shadow: inset 3px 0 0 rgba(79, 70, 229, 0.4), 0 0 22px rgba(6, 182, 212, 0.06);
            transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        main .overflow-x-auto.rounded-xl.border {
            border-radius: 1rem;
            border-color: rgba(255, 255, 255, 0.06) !important;
            background: rgba(6, 10, 18, 0.35);
            backdrop-filter: blur(14px) saturate(1.1);
            -webkit-backdrop-filter: blur(14px) saturate(1.1);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 12px 40px rgba(0, 0, 0, 0.2);
        }
        #tapx-dash-overlay:not(.dark) main .overflow-x-auto.rounded-xl.border {
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(12px) saturate(1.04);
            -webkit-backdrop-filter: blur(12px) saturate(1.04);
            border-color: rgba(0, 0, 0, 0.04) !important;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 8px 28px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.03);
        }
        main table thead th {
            border-bottom-color: rgba(255, 255, 255, 0.06) !important;
        }
        #tapx-dash-overlay:not(.dark) main table thead th {
            border-bottom-color: rgba(15, 23, 42, 0.08) !important;
        }
        /* Employee table thead — no separator */
        .emp-table thead th {
            border-bottom-color: transparent !important;
        }
        main table tbody tr {
            border-color: rgba(255, 255, 255, 0.04) !important;
        }
        #tapx-dash-overlay:not(.dark) main table tbody tr {
            border-color: rgba(15, 23, 42, 0.06) !important;
        }
        /* Employee table — no row separator lines */
        .emp-table tbody tr {
            border-bottom: none !important;
            border-color: transparent !important;
        }
        #tapx-dash-overlay.dark main table tbody td.text-red-400,
        #tapx-dash-overlay.dark main table tbody td .text-red-400 {
            animation: none; /* blink fix */
        }
        @keyframes saasUrgentPulse {
            0%,
            100% {
                opacity: 1;
                text-shadow: 0 0 0 transparent;
            }
            50% {
                opacity: 0.94;
                text-shadow: 0 0 14px rgba(248, 113, 113, 0.35);
            }
        }
        /* UAE emirate wordmarks — same assets as your reference photos (assets/emirate-wordmarks/*.png) */
        .vehicle-plate-badge {
            width: 9.5rem;
            min-width: 9.5rem;
            height: 2.85rem;
        }
        .vehicle-plate-badge .veh-em-wordmark-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 1.45rem;
            max-height: 1.45rem;
            padding-inline: 0.1rem;
            padding-top: 0.18rem;
            border-radius: 0.2rem;
            overflow: hidden;
            background: transparent;
        }
        .vehicle-plate-badge .veh-em-wordmark-img {
            display: block;
            max-height: 1.15rem;
            width: auto;
            max-width: 100%;
            height: auto;
            object-fit: contain;
            object-position: center center;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transform: translateY(2px);
        }
        /* Reference PNG is white wordmark on black — invert so badge shows black lettering on white */
        .vehicle-plate-badge .veh-em-wordmark-img--sharjah {
            filter: none;
            transform: translateY(2px);
        }
        .vehicle-plate-badge .veh-em-lbl--default {
            font-family: 'Inter', system-ui, sans-serif;
            font-weight: 900;
            font-size: 12px;
            letter-spacing: 0.06em;
            color: #FFD700;
        }
        #tapx-dash-overlay.dark .vehicle-plate-badge .veh-em-lbl--default {
            color: #FFD700;
        }
        /* Light mode: main .text-white remap must not affect plate strips (was dark-on-dark). */
        #tapx-dash-overlay:not(.dark) main .vehicle-plate-badge .text-white {
            color: #ffffff !important;
        }
        #tapx-dash-overlay:not(.dark) main .vehicle-plate-badge .text-black {
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) .vehicle-plate-badge .veh-em-lbl--default {
            color: #475569 !important;
        }
        #tapx-dash-overlay:not(.dark) .vehicle-plate-badge .veh-em-wordmark-wrap {
            background: #f8fafc;
            border-radius: 0.15rem;
        }
        #tapx-dash-overlay:not(.dark) .vehicle-plate-badge .veh-em-wordmark-img {
            filter: contrast(1.12) saturate(1.08);
        }
        #tapx-dash-overlay:not(.dark) .vehicle-plate-badge .veh-em-wordmark-img--sharjah {
            filter: none;
        }
        /* Slightly lift strip luminance in light UI so white numerals read clearly */
        #tapx-dash-overlay:not(.dark) .vehicle-plate-badge .bg-amber-950 {
            background-color: #92400e !important;
        }
        #tapx-dash-overlay:not(.dark) .vehicle-plate-badge .bg-slate-600 {
            background-color: #475569 !important;
        }
        #tapx-dash-overlay:not(.dark) .vehicle-plate-badge .bg-black {
            background-color: #FFD700 !important;
        }
        /* Vehicles toolbar — icon-only (premium chrome, matches row actions) */
        .veh-toolbar-icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.75rem;
            border: 1px solid rgba(15, 23, 42, 0.08);
            background: linear-gradient(165deg, #ffffff 0%, #f1f5f9 100%);
            color: #FFD700;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 8px rgba(15, 23, 42, 0.06);
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transition:
                border-color 0.22s ease,
                background 0.22s ease,
                color 0.2s ease,
                transform 0.32s ease-in-out,
                box-shadow 0.32s ease-in-out,
                filter 0.32s ease-in-out;
        }
        .veh-toolbar-icon-btn:hover {
            border-color: rgba(37, 99, 235, 0.28);
            background: linear-gradient(165deg, #f8fafc 0%, #c8d2e0 100%);
            color: #FFD700;
            transform: translateY(-2px) translateZ(8px) scale(1.05);
            filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.15));
            box-shadow:
                0 10px 28px rgba(15, 23, 42, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.9),
                0 0 0 1px rgba(0, 163, 255, 0.1);
        }
        .veh-toolbar-icon-btn:active {
            transform: translateY(0) scale(0.95);
            transition-duration: 0.12s;
        }
        .veh-toolbar-icon-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }
        #tapx-dash-overlay.dark .veh-toolbar-icon-btn {
            border-color: var(--tapx-icon-border);
            background: linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
            color: #c8d2e0;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 12px rgba(0, 0, 0, 0.25);
        }
        #tapx-dash-overlay.dark .veh-toolbar-icon-btn:hover {
            border-color: rgba(0, 229, 255, 0.42);
            background: linear-gradient(165deg, rgba(0, 229, 255, 0.12) 0%, rgba(0, 163, 255, 0.08) 100%);
            color: #f0f9ff;
            transform: translateY(-2px) translateZ(8px) scale(1.05);
            filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.22));
            box-shadow:
                0 12px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(0, 229, 255, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        /* Sidebar modules — unified toolbar (search + emirate + date range + Add + icon actions) */
        .dash-module-toolbar__bar {
            border-radius: 1rem;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: #fff;
            padding: 0.5rem;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
        }
        #tapx-dash-overlay.dark .dash-module-toolbar__bar {
            border-color: rgba(255, 255, 255, 0.1);
            background: #0f0f0f;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }
        .dash-module-toolbar__search {
            display: flex;
            min-height: 2.5rem;
            flex: 1 1 12rem;
            align-items: center;
            gap: 0.5rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(148, 163, 184, 0.4);
            background: #f8fafc;
            padding: 0.25rem 0.75rem;
        }
        #tapx-dash-overlay.dark .dash-module-toolbar__search {
            border-color: rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.45);
        }
        .dash-module-toolbar__field {
            display: flex;
            min-height: 2.5rem;
            flex-shrink: 0;
            align-items: center;
            gap: 0.5rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: #f1f5f9;
            padding: 0.25rem 0.65rem;
        }
        #tapx-dash-overlay.dark .dash-module-toolbar__field {
            border-color: rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.06);
        }
        .dash-module-toolbar__field input[type='date'] {
            min-width: 9.5rem;
            border: 0;
            background: transparent;
            padding: 0.15rem 0;
            font-size: 0.875rem;
            line-height: 1.25rem;
            color: inherit;
        }
        #tapx-dash-overlay.dark .dash-module-toolbar__field input[type='date'] {
            color-scheme: dark;
        }
        .dash-module-toolbar__select {
            min-height: 2.25rem;
            min-width: 6.5rem;
            max-width: 10rem;
            border-radius: 0.375rem;
            border: 0;
            background: transparent;
            padding: 0.15rem 1.5rem 0.15rem 0.25rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: #FFD700;
        }
        #tapx-dash-overlay.dark .dash-module-toolbar__select {
            color: #c8d2e0;
        }
        .dash-module-toolbar__add {
            display: inline-flex;
            min-height: 2.5rem;
            min-width: 5.25rem;
            align-items: center;
            justify-content: center;
            border-radius: 0.75rem;
            padding: 0 1.35rem;
            font-size: 0.6875rem;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #fafafa;
            border: 1px solid var(--tapx-gold-soft);
            background: linear-gradient(155deg, #121c30 0%, #0a1020 42%, #060a12 100%);
            box-shadow: var(--tapx-cta-shadow);
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transition:
                transform 0.3s var(--tapx-premium-decel),
                box-shadow 0.3s ease,
                border-color 0.25s ease,
                filter 0.25s ease;
        }
        #tapx-dash-overlay.dark .dash-module-toolbar__add {
            color: #fafafa;
            background: linear-gradient(155deg, #141e33 0%, #0c1426 45%, #070b14 100%);
            border-color: var(--tapx-gold-soft);
        }
        .dash-module-toolbar__add:hover {
            filter: brightness(1.06) drop-shadow(0 0 14px rgba(0, 229, 255, 0.2));
            border-color: rgba(255, 215, 100, 0.65);
            transform: translateY(-2px) translateZ(10px) scale(1.05);
            box-shadow:
                0 14px 44px rgba(0, 0, 0, 0.48),
                0 0 0 1px rgba(0, 229, 255, 0.18),
                0 0 36px rgba(255, 215, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.16);
        }
        .dash-module-toolbar__add:active {
            transform: translateY(0) scale(0.95);
            transition-duration: 0.12s;
        }
        .dash-module-toolbar__add:focus-visible {
            outline: none;
            box-shadow:
                0 0 0 2px rgba(0, 163, 255, 0.5),
                var(--tapx-cta-shadow);
        }
        #tapx-dash-overlay:not(.dark) .dash-module-toolbar__add {
            color: #FFD700;
            border-color: rgba(15, 23, 42, 0.12);
            background: linear-gradient(165deg, #ffffff 0%, #f1f5f9 55%, #e8eef5 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.98),
                0 2px 8px rgba(15, 23, 42, 0.06),
                0 0 0 1px rgba(0, 163, 255, 0.08),
                inset 0 -2px 0 rgba(255, 204, 0, 0.35);
        }
        #tapx-dash-overlay:not(.dark) .dash-module-toolbar__add:hover {
            border-color: rgba(37, 99, 235, 0.25);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 1),
                0 14px 36px rgba(15, 23, 42, 0.1),
                0 0 0 1px rgba(0, 163, 255, 0.15),
                inset 0 -2px 0 rgba(255, 204, 0, 0.55);
        }
        .dash-module-toolbar__add[disabled],
        .veh-toolbar-icon-btn[disabled] {
            opacity: 0.35;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* Fines Add button — uses default dash-module-toolbar__add style */
        
        
        
        
        #entity-modal-panel,
        #dash-profile-edit-modal > div.rounded-2xl {
            transform-style: preserve-3d;
            backface-visibility: hidden;
            animation: modalPopIn 0.48s var(--tapx-premium-ease) both;
        }
        #bulk-selection-action-panel,
        #bulk-doc-link-panel,
        #emp-service-request-panel,
        #veh-service-request-panel,
        #fine-form-panel {
            transition: max-height 0.26s ease;
        }
        #bulk-selection-action-panel.dash-dropdown-room-open,
        #bulk-doc-link-panel.dash-dropdown-room-open,
        #emp-service-request-panel.dash-dropdown-room-open,
        #veh-service-request-panel.dash-dropdown-room-open,
        #fine-form-panel.dash-dropdown-room-open {
            max-height: min(96vh, 700px) !important;
        }
        /* Fine entry form (compact + dashboard dark style) */
        #fine-form-modal .fine-form-panel {
            background: #141414;
            color: #e5e7eb;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        #fine-form-modal .fine-form-label {
            display: block;
            margin-bottom: 0.28rem;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #9ca3af;
        }
        #fine-form-modal .fine-form-input,
        #fine-form-modal .fine-form-select {
            width: 100%;
            min-height: 2.35rem;
            border-radius: 0.65rem;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            background: rgba(255, 255, 255, 0.06) !important;
            color: #f8fafc !important;
            padding: 0.52rem 0.75rem;
            font-size: 0.84rem;
            outline: none;
            color-scheme: dark;
            -webkit-appearance: none;
            appearance: none;
        }
        #fine-form-modal .fine-form-input::placeholder {
            color: rgba(148, 163, 184, 0.7);
        }
        #fine-form-modal input[type='date'].fine-form-input {
            color: #f8fafc;
            background: rgba(255, 255, 255, 0.06);
        }
        #fine-form-modal input[type='date'].fine-form-input::-webkit-calendar-picker-indicator {
            filter: invert(0.85);
            opacity: 0.9;
        }
        #fine-form-modal .fine-form-input:focus,
        #fine-form-modal .fine-form-select:focus {
            border-color: rgba(255, 255, 255, 0.24) !important;
            box-shadow: none;
        }
        #fine-form-modal .fine-form-select option {
            background: #111111 !important;
            color: #f8fafc !important;
        }
        #fine-form-modal .fine-form-select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: right 0.7rem center !important;
            background-size: 1rem !important;
            padding-right: 2.2rem !important;
        }
        /* Fine form searchable dropdown chevron: keep arrow inside right side */
        #fine-form-modal .dash-searchable-row {
            position: relative !important;
        }
        #fine-form-modal .dash-searchable-trigger {
            padding-right: 2.2rem !important;
        }
        #fine-form-modal .dash-searchable-chev {
            position: absolute !important;
            inset: auto 0.35rem auto auto !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 1.75rem !important;
            height: 1.75rem !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            color: rgba(248, 250, 252, 0.85) !important;
            z-index: 3 !important;
        }
        #fine-form-modal .dash-searchable-chev .material-symbols-outlined {
            font-size: 1rem !important;
            line-height: 1 !important;
        }
        #fine-form-modal .fine-form-discount {
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.75rem;
            padding: 0.7rem;
            background: rgba(0, 0, 0, 0.3);
        }
        @keyframes modalPopIn {
            from {
                opacity: 0;
                transform: perspective(900px) rotateX(8deg) translateY(24px) translateZ(-40px) scale(0.94);
                filter: brightness(0.9);
            }
            to {
                opacity: 1;
                transform: perspective(900px) rotateX(0deg) translateY(0) translateZ(0) scale(1);
                filter: brightness(1);
            }
        }
        .dash-pane-animate .dash-card {
            animation: dashCardFadeIn 0.2s ease-out both; /* blink-kill */
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }
        .dash-pane-animate .dash-card:nth-child(1) { animation-delay: 0ms; }
        .dash-pane-animate .dash-card:nth-child(2) { animation-delay: 45ms; }
        .dash-pane-animate .dash-card:nth-child(3) { animation-delay: 90ms; }
        .dash-pane-animate .dash-card:nth-child(4) { animation-delay: 135ms; }
        .dash-pane-animate .dash-card:nth-child(5) { animation-delay: 180ms; }
        .dash-pane-animate .dash-card:nth-child(6) { animation-delay: 225ms; }
        .dash-pane-animate .dash-card:nth-child(7) { animation-delay: 270ms; }
        .dash-pane-animate .dash-card:nth-child(8) { animation-delay: 315ms; }
        /* Overview / grids: stat tiles + module toolbar cards */
        .dash-pane-animate a.dash-stat-tile,
        .dash-pane-animate button.dash-stat-tile {
            animation: dashCardFadeIn 0.2s ease-out both; /* blink-kill */
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }
        .dash-pane-animate .grid a.dash-stat-tile:nth-child(1),
        .dash-pane-animate .grid button.dash-stat-tile:nth-child(1) { animation-delay: 0.12s; }
        .dash-pane-animate .grid a.dash-stat-tile:nth-child(2),
        .dash-pane-animate .grid button.dash-stat-tile:nth-child(2) { animation-delay: 0.18s; }
        .dash-pane-animate .grid a.dash-stat-tile:nth-child(3),
        .dash-pane-animate .grid button.dash-stat-tile:nth-child(3) { animation-delay: 0.24s; }
        .dash-pane-animate .grid a.dash-stat-tile:nth-child(4),
        .dash-pane-animate .grid button.dash-stat-tile:nth-child(4) { animation-delay: 0.3s; }
        .dash-pane-animate .emp-stat-card {
            animation: dashCardFadeIn 0.2s ease-out both; /* blink-kill */
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }
        .dash-pane-animate .emp-stat-card .tabular-nums {
            display: inline-block;
            animation: none; /* blink fix */
        }
        @keyframes tapxNumberPop {
            0% {
                opacity: 0;
                transform: scale(0.88) translateY(6px);
            }
            70% {
                opacity: 1;
                transform: scale(1.04) translateY(0);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        .dash-pane-animate #employee-stats-grid .emp-stat-card:nth-child(1),
        .dash-pane-animate #vehicle-stats-grid .emp-stat-card:nth-child(1),
        .dash-pane-animate #commercial-employee-stats-grid .emp-stat-card:nth-child(1),
        .dash-pane-animate #document-stats-grid .emp-stat-card:nth-child(1),
        .dash-pane-animate #recycle-stats-grid .emp-stat-card:nth-child(1) { animation-delay: 0.08s; }
        .dash-pane-animate #employee-stats-grid .emp-stat-card:nth-child(2),
        .dash-pane-animate #vehicle-stats-grid .emp-stat-card:nth-child(2),
        .dash-pane-animate #commercial-employee-stats-grid .emp-stat-card:nth-child(2),
        .dash-pane-animate #document-stats-grid .emp-stat-card:nth-child(2),
        .dash-pane-animate #recycle-stats-grid .emp-stat-card:nth-child(2) { animation-delay: 0.1s; }
        .dash-pane-animate #employee-stats-grid .emp-stat-card:nth-child(3),
        .dash-pane-animate #vehicle-stats-grid .emp-stat-card:nth-child(3),
        .dash-pane-animate #commercial-employee-stats-grid .emp-stat-card:nth-child(3),
        .dash-pane-animate #document-stats-grid .emp-stat-card:nth-child(3),
        .dash-pane-animate #recycle-stats-grid .emp-stat-card:nth-child(3) { animation-delay: 0.12s; }
        .dash-pane-animate #employee-stats-grid .emp-stat-card:nth-child(4),
        .dash-pane-animate #vehicle-stats-grid .emp-stat-card:nth-child(4),
        .dash-pane-animate #commercial-employee-stats-grid .emp-stat-card:nth-child(4),
        .dash-pane-animate #document-stats-grid .emp-stat-card:nth-child(4),
        .dash-pane-animate #recycle-stats-grid .emp-stat-card:nth-child(4) { animation-delay: 0.14s; }
        .dash-pane-animate #employee-stats-grid .emp-stat-card:nth-child(5),
        .dash-pane-animate #vehicle-stats-grid .emp-stat-card:nth-child(5),
        .dash-pane-animate #commercial-employee-stats-grid .emp-stat-card:nth-child(5),
        .dash-pane-animate #document-stats-grid .emp-stat-card:nth-child(5),
        .dash-pane-animate #recycle-stats-grid .emp-stat-card:nth-child(5) { animation-delay: 0.16s; }
        .dash-pane-animate #employee-stats-grid .emp-stat-card:nth-child(6),
        .dash-pane-animate #vehicle-stats-grid .emp-stat-card:nth-child(6),
        .dash-pane-animate #commercial-employee-stats-grid .emp-stat-card:nth-child(6),
        .dash-pane-animate #document-stats-grid .emp-stat-card:nth-child(6),
        .dash-pane-animate #recycle-stats-grid .emp-stat-card:nth-child(6) { animation-delay: 0.18s; }
        .dash-pane-animate #employee-stats-grid .emp-stat-card:nth-child(7),
        .dash-pane-animate #vehicle-stats-grid .emp-stat-card:nth-child(7),
        .dash-pane-animate #commercial-employee-stats-grid .emp-stat-card:nth-child(7),
        .dash-pane-animate #document-stats-grid .emp-stat-card:nth-child(7) { animation-delay: 0.2s; }
        @keyframes panelCardReveal3d {
            from {
                opacity: 0;
                transform: perspective(900px) rotateX(5deg) translateY(40px) translateZ(-18px) scale(0.98);
                filter: brightness(0.94);
            }
            to {
                opacity: 1;
                transform: perspective(900px) rotateX(0deg) translateY(0) translateZ(0) scale(1);
                filter: brightness(1);
            }
        }
        @keyframes panelTileReveal3d {
            from {
                opacity: 0;
                transform: perspective(800px) rotateX(6deg) translateY(40px) translateZ(-14px) scale(0.97);
            }
            to {
                opacity: 1;
                transform: perspective(800px) rotateX(0deg) translateY(0) translateZ(0) scale(1);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            /* dash-pane-animate::before removed */
            .dash-card,
            .dash-stat-tile,
            .emp-stat-card,
            .emp-table tbody tr,
            #tbody-vehicles tr,
            #tbody-documents tr,
            #table-documents tr,
            #tbody-recycle tr,
            #tbody-vault tr,
            #tbody-fines tr,
            button,
            .emp-icon-btn,
            main a[data-nav]:not(.nav-link):not(.dash-stat-tile),
            .tapx-doc-filter-tab,
            main input:not([type="checkbox"]):not([type="radio"]),
            main select,
            main textarea,
            #entity-modal input:not([type="checkbox"]):not([type="radio"]),
            #entity-modal select,
            #entity-modal textarea {
                transition: none !important;
                animation: none !important;
                transform: none !important;
            }
            .dash-card::after,
            .dash-shell::before,
            .dash-shell::after {
                display: none !important;
                animation: none !important;
            }
            #tapx-dash-overlay.dark main table tbody td.text-red-400,
            #tapx-dash-overlay.dark main table tbody td .text-red-400 {
                animation: none !important;
                text-shadow: none !important;
            }
            .tapx-float-particles {
                animation: none !important;
                opacity: 0.2 !important;
            }
            .dash-sidebar {
                animation: none !important;
            }
            #dash-overview {
                animation: none !important;
            }
            .dash-pane-animate .emp-stat-card .tabular-nums {
                animation: none !important;
            }
            #dash-main button::after,
            #dash-main .emp-stat-card::after,
            header.sticky button::after {
                animation: none !important;
                display: none !important;
            }
            #tapx-cursor-aura {
                display: none !important;
                opacity: 0 !important;
            }
            #tapx-dash-overlay.tapx-aura-on #tapx-cursor-aura {
                display: none !important;
            }
            #dash-main.tapx-pane-transition {
                animation: none !important;
                filter: none !important;
            }
            main .tabular-nums[id]:not(.tapx-val-update),
            main [id^='overview-stat-']:not(.tapx-val-update),
            main #overview-stat-doc-attention:not(.tapx-val-update) {
                animation: none !important;
            }
            main span.text-amber-400.tabular-nums,
            main span.text-red-400.tabular-nums {
                animation: none !important;
            }
            .dash-card:hover .material-symbols-outlined {
                animation: none !important;
            }
            .nav-link.active {
                animation: none !important;
            }
            .tapx-skel,
            .tapx-skel-cell {
                animation: none !important;
            }
        }

        /* Diversity quota — full-width red alert (above modals) */
        #diversity-quota-alert {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            z-index: 250;
            padding: 0.85rem 1.25rem;
            background: linear-gradient(90deg, rgba(127, 29, 29, 0.98), rgba(185, 28, 28, 0.97), rgba(127, 29, 29, 0.98));
            border-bottom: 2px solid rgba(248, 113, 113, 0.85);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 32px rgba(239, 68, 68, 0.35);
            color: #fef2f2;
            font-size: 0.8125rem;
            font-weight: 800;
            line-height: 1.45;
            text-align: center;
            letter-spacing: 0.02em;
        }
        #diversity-quota-alert.diversity-alert-pulse {
            animation: none; /* blink fix */
        }
        @keyframes diversityQuotaFlash {
            0%, 100% { filter: brightness(1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 32px rgba(239, 68, 68, 0.35); }
            50% { filter: brightness(1.25); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 48px rgba(254, 202, 202, 0.45); }
        }
        @media (prefers-reduced-motion: reduce) {
            #diversity-quota-alert.diversity-alert-pulse { animation: none; }
        }
        /* Cursor-follow glow disabled (no JS); keep rule so any stray node stays hidden */
        #tapx-cursor-aura {
            display: none !important;
            pointer-events: none;
        }
        #dash-main.tapx-pane-transition {
            animation: none; /* blink fix */
        }
        #tapx-dash-overlay:not(.dark) #dash-main.tapx-pane-transition {
            animation-name: none; /* blink fix */
        }
        @keyframes tapxPaneStage {
            0% {
                filter: blur(10px);
                opacity: 0.88;
                transform: translateY(10px);
            }
            100% {
                filter: blur(0);
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes tapxPaneStageLight {
            0% {
                filter: blur(6px);
                opacity: 0.94;
                transform: translateY(8px);
            }
            100% {
                filter: blur(0);
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes tapxValFlicker {
            0% {
                filter: brightness(1);
                transform: scale(1);
            }
            35% {
                filter: brightness(1.2);
                transform: scale(1.06);
            }
            100% {
                filter: brightness(1);
                transform: scale(1);
            }
        }
        .tabular-nums.tapx-val-update {
            animation: none; /* blink fix */
        }
        @keyframes tapxNumBreath {
            0%,
            100% {
                opacity: 1;
            }
            50% {
                opacity: 0.9;
            }
        }
        main .tabular-nums[id]:not(.tapx-val-update) {
            animation: none; /* blink fix */
        }
        main [id^='overview-stat-']:not(#overview-stat-doc-attention):not(.tapx-val-update) {
            animation: none; /* blink fix */
        }
        main #overview-stat-doc-attention:not(.tapx-val-update) {
            animation: none; /* blink fix */
        }
        @keyframes tapxIconDrift {
            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-3px) rotate(2.5deg);
            }
        }
        .dash-card:hover .material-symbols-outlined {
            animation: none; /* blink-kill */
        }
        .dash-card button .material-symbols-outlined,
        #dash-main button .material-symbols-outlined {
            animation: none !important;
        }
        @keyframes tapxWarnPulse {
            0%,
            100% {
                opacity: 1;
                filter: brightness(1);
            }
            50% {
                opacity: 0.88;
                filter: brightness(1.12);
            }
        }
        @keyframes tapxUrgentBadge {
            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.35);
            }
            50% {
                box-shadow: 0 0 0 6px rgba(248, 113, 113, 0);
            }
        }
        main span.text-amber-400.tabular-nums {
            animation: none; /* blink fix */
        }
        main span.text-red-400.tabular-nums {
            animation: none; /* blink fix */
        }
        @keyframes tapxShimmer {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }
        .tapx-skel,
        .tapx-skel-cell {
            background: linear-gradient(
                100deg,
                rgba(255, 255, 255, 0.04) 0%,
                rgba(255, 255, 255, 0.1) 42%,
                rgba(255, 255, 255, 0.04) 84%
            );
            background-size: 220% 100%;
            animation: none; /* blink fix */
            border-radius: 0.4rem;
        }
        #tapx-dash-overlay:not(.dark) .tapx-skel,
        #tapx-dash-overlay:not(.dark) .tapx-skel-cell {
            background: linear-gradient(
                100deg,
                rgba(15, 23, 42, 0.06) 0%,
                rgba(15, 23, 42, 0.12) 45%,
                rgba(15, 23, 42, 0.06) 90%
            );
            background-size: 220% 100%;
        }
        .nav-link.active {
            animation: none; /* blink fix */
        }
        @keyframes tapxNavAlive {
            0%,
            100% {
                box-shadow:
                    0 0 0 1px rgba(0, 163, 255, 0.35),
                    0 0 24px rgba(0, 163, 255, 0.12),
                    0 0 40px rgba(255, 215, 0, 0.06);
            }
            50% {
                box-shadow:
                    0 0 0 1px rgba(0, 229, 255, 0.45),
                    0 0 32px rgba(0, 229, 255, 0.16),
                    0 0 48px rgba(255, 215, 0, 0.09);
            }
        }
        @keyframes tapxNavAliveLight {
            0%,
            100% {
                box-shadow:
                    0 0 0 1px rgba(79, 70, 229, 0.2),
                    0 0 22px rgba(79, 70, 229, 0.1),
                    0 6px 18px rgba(6, 182, 212, 0.05);
            }
            50% {
                box-shadow:
                    0 0 0 1px rgba(6, 182, 212, 0.28),
                    0 0 30px rgba(79, 70, 229, 0.12),
                    0 0 36px rgba(6, 182, 212, 0.08);
            }
        }
        header .bg-accent-orange,
        #dash-main .bg-accent-orange {
            position: relative;
            z-index: 0;
        }
        header .bg-accent-orange::before,
        #dash-main .bg-accent-orange::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: inherit;
            z-index: -1;
            background: radial-gradient(ellipse at 50% 50%, rgba(255, 77, 0, 0.45) 0%, transparent 68%);
            opacity: 0.55;
            filter: blur(12px);
            pointer-events: none;
            transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
        }
        header .bg-accent-orange:hover::before,
        #dash-main .bg-accent-orange:hover::before {
            opacity: 0.95;
            transform: scale(1.08);
        }
        #dash-main button.rounded-full.bg-accent-gold,
        #dash-main a.rounded-full.bg-accent-gold {
            position: relative;
            z-index: 0;
        }
        #dash-main button.rounded-full.bg-accent-gold::before,
        #dash-main a.rounded-full.bg-accent-gold::before {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: inherit;
            z-index: -1;
            background: radial-gradient(ellipse at 50% 40%, rgba(255, 215, 0, 0.5) 0%, transparent 70%);
            opacity: 0.5;
            filter: blur(14px);
            pointer-events: none;
            transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
        }
        #dash-main button.rounded-full.bg-accent-gold:hover::before,
        #dash-main a.rounded-full.bg-accent-gold:hover::before {
            opacity: 0.95;
            transform: scale(1.12);
        }
        .emp-table tbody tr,
        #tbody-vehicles tr,
        #tbody-documents tr,
        #table-documents tr,
        #tbody-recycle tr,
        #tbody-vault tr,
        #tbody-fines tr {
            transform-origin: left center;
        }
        @media (max-width: 1023px) {
            #tapx-dash-overlay.dark .dash-card:hover {
                transform: perspective(1200px) rotateX(-1deg) translateY(-4px) translateZ(4px) scale(1.012);
            }
            #tapx-dash-overlay:not(.dark) .dash-card:hover {
                transform: perspective(1200px) rotateX(-0.5deg) translateY(-4px) translateZ(4px) scale(1.012);
            }
            .dash-stat-tile:hover {
                transform: translateY(-4px) translateZ(10px) rotateX(2deg) scale(1.015);
            }
            .emp-stat-card:hover {
                transform: translateY(-4px) translateZ(10px) rotateX(2deg) scale(1.015);
            }
            #dash-main button:not([type='checkbox']):not([type='radio']):not(:disabled):not(.emp-row-check):not(.doc-row-check):not(.veh-row-check):not(.recycle-row-check):not(.vault-row-check):not(.emp-stat-card):not(.emp-icon-btn):not(.veh-toolbar-icon-btn):not(.dash-module-toolbar__add):not(.vault-password-toggle):hover {
                transform: translateY(-1px) scale(1.03);
            }
            .tapx-float-particles {
                opacity: 0.22;
            }
            #tapx-dash-overlay.dark .tapx-float-particles {
                opacity: 0.28;
            }
        }
        /* UAE dirham — PNG img (same as landing tiers; mask breaks on blur/glass) */
        img.sym-dirham-dashpng {
            display: inline-block;
            height: 1.12em;
            width: calc(1.12em * 638 / 576);
            max-width: none;
            object-fit: contain;
            vertical-align: -0.12em;
            flex-shrink: 0;
            user-select: none;
            pointer-events: none;
        }
        /* ALL dirham symbols in dashboard — ALWAYS WHITE */
        #tapx-dash-overlay img.sym-dirham-dashpng,
        #tapx-dash-overlay * img.sym-dirham-dashpng,
        img.sym-dirham-dashpng {
            filter: invert(1) brightness(1.5) contrast(1) !important;
        }
        /* Color variants for specific contexts */
        #tapx-dash-overlay .text-emerald-300 img.sym-dirham-dashpng,
        #tapx-dash-overlay .text-emerald-400 img.sym-dirham-dashpng {
            filter: invert(1) sepia(1) saturate(2.2) hue-rotate(85deg) brightness(1.08) contrast(1.05) !important;
        }
        #tapx-dash-overlay .text-amber-200 img.sym-dirham-dashpng,
        #tapx-dash-overlay .text-amber-300 img.sym-dirham-dashpng {
            filter: invert(1) sepia(1) saturate(2.8) hue-rotate(5deg) brightness(1.08) contrast(1.06) !important;
        }
        #tapx-dash-overlay .text-red-300 img.sym-dirham-dashpng,
        #tapx-dash-overlay .text-red-400 img.sym-dirham-dashpng {
            filter: invert(1) sepia(1) saturate(2.5) hue-rotate(320deg) brightness(1.05) contrast(1.08) !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           Filter dropdowns — Toll Gate / Entry & Exit / WPS / Fines
           ═══════════════════════════════════════════════════════════════
           These <select>s are automatically enhanced by tapxEnhanceDashSelect()
           which wraps each select with a visible .dash-searchable-trigger
           input and a .dash-searchable-chev button, while the native <select>
           is visually clipped to 1x1px via .dash-searchable-native. We do NOT
           style the native <select> here — that would un-clip it and cause a
           duplicate chevron to appear below the field. We only add light-mode
           styling for the trigger so it matches the modal combobox look. */

        /* Light mode: panel triggers get cream bg + subtle border + dark text */
        #tapx-dash-overlay:not(.dark) #dash-main .dash-searchable-trigger {
            background: #f8fafc !important;
            border-color: rgba(15, 23, 42, 0.18) !important;
            color: var(--dash-text-blue, #0f172a) !important;
            -webkit-text-fill-color: var(--dash-text-blue, #0f172a) !important;
        }
        #tapx-dash-overlay:not(.dark) #dash-main .dash-searchable-trigger::placeholder {
            color: rgba(100, 116, 139, 0.75) !important;
            -webkit-text-fill-color: rgba(100, 116, 139, 0.75) !important;
        }
        #tapx-dash-overlay:not(.dark) #dash-main .dash-searchable-trigger:focus-visible,
        #tapx-dash-overlay:not(.dark) #dash-main .dash-searchable-trigger[aria-expanded="true"] {
            border-color: rgba(37, 99, 235, 0.45) !important;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12) !important;
        }
        #tapx-dash-overlay:not(.dark) #dash-main .dash-searchable-chev {
            color: rgba(15, 23, 42, 0.55) !important;
        }
        #tapx-dash-overlay:not(.dark) #dash-main .dash-searchable-chev:hover {
            color: rgba(15, 23, 42, 0.8) !important;
            background: rgba(15, 23, 42, 0.04) !important;
        }

        /* Legacy cleanup: neutralise any chevron/wrapper spans from previous
           attempts so they can never render as an extra arrow. */
        #tapx-dash-overlay .tapx-filter-chev,
        .tapx-filter-chev {
            display: none !important;
            visibility: hidden !important;
            width: 0 !important;
            height: 0 !important;
        }
        .tapx-filter-wrap {
            position: static !important;
            display: contents !important;
        }

        /* ═══ Filter-panel chevron: flex layout matches the reference combobox
           (cream field with a small rounded-square chevron button inside on
           the right). We use flexbox on the row so the trigger input and the
           chev button sit as natural flex siblings — the button can't escape
           the field, regardless of absolute-positioning quirks. */
        #tapx-dash-overlay #dash-main .dash-searchable-wrap {
            position: relative !important;
            display: block !important;
            width: 100% !important;
        }
        #tapx-dash-overlay #dash-main .dash-searchable-row {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            flex-wrap: nowrap !important;
            width: 100% !important;
        }
        #tapx-dash-overlay #dash-main .dash-searchable-trigger {
            position: relative !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            width: auto !important;
            padding-right: 2.75rem !important;
            /* reset the background-image we added earlier so chev isn't drawn twice */
            background-image: none !important;
        }
        /* Extra-rounded borders specifically for Toll Gate / Entry & Exit /
           WPS / Fines filter dropdowns so they match the polished, pill-like
           look of the other dashboard combos. */
        #tapx-dash-overlay #panel-tollgate .dash-searchable-trigger,
        #tapx-dash-overlay #panel-entryexit .dash-searchable-trigger,
        #tapx-dash-overlay #panel-wps .dash-searchable-trigger,
        #tapx-dash-overlay #panel-fines .dash-searchable-trigger,
        #tapx-dash-overlay #panel-tollgate .dash-searchable-wrap,
        #tapx-dash-overlay #panel-entryexit .dash-searchable-wrap,
        #tapx-dash-overlay #panel-wps .dash-searchable-wrap,
        #tapx-dash-overlay #panel-fines .dash-searchable-wrap {
            border-radius: 0.85rem !important;
        }
        #tapx-dash-overlay #panel-tollgate .dash-searchable-panel,
        #tapx-dash-overlay #panel-entryexit .dash-searchable-panel,
        #tapx-dash-overlay #panel-wps .dash-searchable-panel,
        #tapx-dash-overlay #panel-fines .dash-searchable-panel {
            border-radius: 0.85rem !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           Requests module — "Full Request Details" expanded panel
           ───────────────────────────────────────────────────────────────
           The expanded row should blend with the light cream page — no
           dark navy strip (which was leaking through as a stripe even
           when collapsed). Transparent bg + dark text on the employee
           chips keeps everything legible on the cream background. */
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail td,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-content {
            background: transparent !important;
            background-color: transparent !important;
        }
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-content,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-content *:not(.material-symbols-outlined):not(svg):not(path),
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail p,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail span,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail label,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="rounded-full"],
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="rounded-xl"] {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }
        /* Section headings ("Full Request Details", "Selected Employees (n)")
           become solid white to pop against the cream page. */
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .text-gold-lo,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-amber"],
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-yellow"],
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .text-accent-teal,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-sky"],
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-blue"] {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }
        /* Employee-name chips: subtle dark bg + WHITE text for readability */
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="rounded-full"],
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="rounded-xl"] {
            background: rgba(15, 23, 42, 0.82) !important;
            border-color: rgba(15, 23, 42, 0.88) !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="rounded-full"] *,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="rounded-xl"] * {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }
        /* Kill the top border/divider that draws a dark line across the
           expanded row. */
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-content {
            border-top: 0 !important;
        }
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold::before,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold::after,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .dash-carpet-expand::before,
        #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .dash-carpet-expand::after {
            display: none !important;
            background: transparent !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           USER REQUEST — Fix invisible/gold text inside the action panels
           (Fine & Penalty, WPS, Invoice & Billing, Entry & Exit, Linked
           Document). The earlier rule above forced ALL text inside the
           sixfold-content to white, which made the panels unreadable on
           the light green/red/sky/purple backgrounds.
           These rules restore proper DARK readable colors inside each
           panel while preserving their accent color theme. */
        html:not(.dark) .incoming-req-sixfold-content .emp-fp-panel,
        html:not(.dark) .incoming-req-sixfold-content .emp-wps-panel,
        html:not(.dark) .incoming-req-sixfold-content .emp-inv-panel,
        html:not(.dark) .incoming-req-sixfold-content .emp-ee-panel,
        html:not(.dark) .incoming-req-sixfold-content .emp-docs-panel,
        html:not(.dark) .incoming-req-sixfold-content .veh-toll-panel,
        html:not(.dark) .incoming-req-sixfold-content .veh-docs-panel,
        html:not(.dark) .incoming-req-sixfold-content .veh-fp-panel,
        html:not(.dark) .incoming-req-sixfold-content .veh-inv-panel,
        html:not(.dark) .incoming-req-sixfold-content .emp-fp-panel *,
        html:not(.dark) .incoming-req-sixfold-content .emp-wps-panel *,
        html:not(.dark) .incoming-req-sixfold-content .emp-inv-panel *,
        html:not(.dark) .incoming-req-sixfold-content .emp-ee-panel *,
        html:not(.dark) .incoming-req-sixfold-content .emp-docs-panel *,
        html:not(.dark) .incoming-req-sixfold-content .veh-toll-panel *,
        html:not(.dark) .incoming-req-sixfold-content .veh-docs-panel *,
        html:not(.dark) .incoming-req-sixfold-content .veh-fp-panel *,
        html:not(.dark) .incoming-req-sixfold-content .veh-inv-panel * {
            color: #0f172a !important;
            -webkit-text-fill-color: #0f172a !important;
        }
        /* Re-allow each panel's accent color on its header strip / status pills */
        html:not(.dark) .incoming-req-sixfold-content .emp-fp-panel th,
        html:not(.dark) .incoming-req-sixfold-content .veh-fp-panel th {
            color: #991b1b !important;
            -webkit-text-fill-color: #991b1b !important;
        }
        html:not(.dark) .incoming-req-sixfold-content .emp-wps-panel th {
            color: #075985 !important;
            -webkit-text-fill-color: #075985 !important;
        }
        html:not(.dark) .incoming-req-sixfold-content .emp-inv-panel th,
        html:not(.dark) .incoming-req-sixfold-content .veh-inv-panel th {
            color: #5b21b6 !important;
            -webkit-text-fill-color: #5b21b6 !important;
        }
        html:not(.dark) .incoming-req-sixfold-content .emp-ee-panel th {
            color: #065f46 !important;
            -webkit-text-fill-color: #065f46 !important;
        }
        html:not(.dark) .incoming-req-sixfold-content .emp-docs-panel th,
        html:not(.dark) .incoming-req-sixfold-content .veh-docs-panel th {
            color: #166534 !important;
            -webkit-text-fill-color: #166534 !important;
        }
        html:not(.dark) .incoming-req-sixfold-content .veh-toll-panel th {
            color: #92400e !important;
            -webkit-text-fill-color: #92400e !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           Requests table — remove the gray gap between request rows.
           The request rows have `border-b border-white/10` which in light
           mode shows up as a visible gray band beneath each row. Collapse
           it to a thin hairline so rows sit flush with each other. */
        #tapx-dash-overlay:not(.dark) #dash-main tr[data-req-id] {
            border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
        }
        #tapx-dash-overlay:not(.dark) #dash-main tr[data-req-id] td {
            border-bottom: 0 !important;
            background: transparent !important;
        }
        #tapx-dash-overlay:not(.dark) #dash-main tr[data-req-id]:hover td {
            background: rgba(15, 23, 42, 0.03) !important;
        }
        /* Kill any extra gap/padding spacer row between consecutive request rows */
        #tapx-dash-overlay:not(.dark) #dash-main tr[data-req-id] + tr:not(.incoming-req-detail):not([data-req-id]) {
            display: none !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           User dashboard — Add Employee / Vehicle / Service Request /
           Fine / Document / Bulk-link / Bulk-action modals.
           In LIGHT mode the modal panel background is #ffffff (white),
           so ALL form text inside these modals must be solid black for
           readability: the form heading, field labels, dropdown option
           text, helper hints — everything. This overrides the default
           dark-theme modal styling which uses white/light-gray text. */
        #tapx-dash-overlay:not(.dark) #entity-modal h1,
        #tapx-dash-overlay:not(.dark) #entity-modal h2,
        #tapx-dash-overlay:not(.dark) #entity-modal h3,
        #tapx-dash-overlay:not(.dark) #entity-modal h4,
        #tapx-dash-overlay:not(.dark) #entity-modal label,
        #tapx-dash-overlay:not(.dark) #entity-modal p,
        #tapx-dash-overlay:not(.dark) #entity-modal span:not(.material-symbols-outlined):not(.pill):not([class*="pill"]):not([class*="bg-"]),
        #tapx-dash-overlay:not(.dark) #entity-modal .text-accent-blue,
        #tapx-dash-overlay:not(.dark) #entity-modal [class*="text-gray-"],
        #tapx-dash-overlay:not(.dark) #entity-modal [class*="text-white"],
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal h1,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal h2,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal h3,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal label,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal p,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal span:not(.material-symbols-outlined):not(.pill):not([class*="pill"]):not([class*="bg-"]),
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal [class*="text-gray-"],
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal [class*="text-white"],
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal h1,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal h2,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal h3,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal label,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal p,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal span:not(.material-symbols-outlined):not(.pill):not([class*="pill"]):not([class*="bg-"]),
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal [class*="text-gray-"],
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal [class*="text-white"],
        #tapx-dash-overlay:not(.dark) #fine-form-modal h1,
        #tapx-dash-overlay:not(.dark) #fine-form-modal h2,
        #tapx-dash-overlay:not(.dark) #fine-form-modal h3,
        #tapx-dash-overlay:not(.dark) #fine-form-modal label,
        #tapx-dash-overlay:not(.dark) #fine-form-modal p,
        #tapx-dash-overlay:not(.dark) #fine-form-modal span:not(.material-symbols-outlined):not(.pill):not([class*="pill"]):not([class*="bg-"]),
        #tapx-dash-overlay:not(.dark) #fine-form-modal [class*="text-gray-"],
        #tapx-dash-overlay:not(.dark) #fine-form-modal [class*="text-white"],
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal h1,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal h2,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal h3,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal label,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal p,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal span:not(.material-symbols-outlined):not(.pill):not([class*="pill"]):not([class*="bg-"]),
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal [class*="text-gray-"],
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal [class*="text-white"],
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal h1,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal h2,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal h3,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal label,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal p,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal span:not(.material-symbols-outlined):not(.pill):not([class*="pill"]):not([class*="bg-"]),
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal [class*="text-gray-"],
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal [class*="text-white"] {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }
        /* Dropdown option lists inside user-dashboard modals (the panel
           that drops down when a searchable select is clicked) — options
           must be black for readability on the white list bg. */
        #tapx-dash-overlay:not(.dark) #entity-modal .dash-searchable-list li,
        #tapx-dash-overlay:not(.dark) #entity-modal .doc-modal-combo-option,
        #tapx-dash-overlay:not(.dark) #entity-modal .emirate-combo-option,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal .dash-searchable-list li,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal .dash-searchable-list li,
        #tapx-dash-overlay:not(.dark) #fine-form-modal .dash-searchable-list li,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal .dash-searchable-list li,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-list li {
            color: #000000 !important;
        }
        /* Input values & placeholders inside user-dashboard modals */
        #tapx-dash-overlay:not(.dark) #entity-modal input:not([type="checkbox"]):not([type="radio"]),
        #tapx-dash-overlay:not(.dark) #entity-modal textarea,
        #tapx-dash-overlay:not(.dark) #entity-modal .dash-searchable-trigger,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal input:not([type="checkbox"]):not([type="radio"]),
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal textarea,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal .dash-searchable-trigger,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal input:not([type="checkbox"]):not([type="radio"]),
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal textarea,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal .dash-searchable-trigger,
        #tapx-dash-overlay:not(.dark) #fine-form-modal input:not([type="checkbox"]):not([type="radio"]),
        #tapx-dash-overlay:not(.dark) #fine-form-modal textarea,
        #tapx-dash-overlay:not(.dark) #fine-form-modal .dash-searchable-trigger,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal input:not([type="checkbox"]):not([type="radio"]),
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal .dash-searchable-trigger,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal input:not([type="checkbox"]):not([type="radio"]),
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-trigger {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           Bulk-action modal special-case: its panel background is
           hard-coded `bg-[#141414]` (dark) regardless of theme — so in
           LIGHT mode the panel is still dark and text must stay WHITE,
           NOT black. This rule overrides the generic black-text rule
           above for everything inside the bulk-action modal.
        ═══════════════════════════════════════════════════════════════ */
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal h1,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal h2,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal h3,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal label,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal p,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal span:not(.material-symbols-outlined):not(.pill):not([class*="pill"]):not([class*="bg-"]),
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal [class*="text-gray-"],
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal [class*="text-white"],
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal textarea,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal input:not([type="checkbox"]):not([type="radio"]),
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-trigger,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal select {
            color: #f8fafc !important;
            -webkit-text-fill-color: #f8fafc !important;
        }
        /* Title (sky-300) keeps its accent color */
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal #bulk-selection-action-title {
            color: #7dd3fc !important;
            -webkit-text-fill-color: #7dd3fc !important;
        }
        /* Apply button uses gold bg + black text — keep that contrast */
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal #bulk-selection-action-confirm {
            color: #000 !important;
            -webkit-text-fill-color: #000 !important;
        }
        /* Field bg should look dark like the rest of the panel */
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal input:not([type="checkbox"]):not([type="radio"]),
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal select,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-trigger {
            background: rgba(0, 0, 0, 0.4) !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
        }
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal input::placeholder {
            color: rgba(255, 255, 255, 0.4) !important;
            -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           Bulk modal — Notes textarea: the user requested that the
           textarea have BLACK background so the placeholder reads as
           black on black (effectively showing no placeholder, clean
           look), and whatever the user TYPES should appear WHITE. */
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal #bulk-selection-action-notes,
        #tapx-dash-overlay #bulk-selection-action-modal #bulk-selection-action-notes {
            background: #000000 !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            caret-color: #ffffff !important;
        }
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal #bulk-selection-action-notes::placeholder,
        #tapx-dash-overlay #bulk-selection-action-modal #bulk-selection-action-notes::placeholder {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
            opacity: 1 !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           Bulk modal — Dropdown option list: dark panel + WHITE text.
           The global rule above forces all dropdown panels to white in
           light mode, but the bulk-action modal's own background is dark
           (bg-[#141414]) — a white panel pops out awkwardly. Override
           it back to dark with white option text for a consistent look. */
        #tapx-dash-overlay #bulk-selection-action-modal .dash-searchable-panel,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-panel,
        #tapx-dash-overlay #bulk-selection-action-modal .dash-searchable-list,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-list {
            background: #141414 !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
        }
        #tapx-dash-overlay #bulk-selection-action-modal .dash-searchable-list li,
        #tapx-dash-overlay #bulk-selection-action-modal .dash-searchable-list li *,
        #tapx-dash-overlay #bulk-selection-action-modal .dash-searchable-panel li,
        #tapx-dash-overlay #bulk-selection-action-modal .dash-searchable-option,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-list li,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-list li *,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-panel li,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-option {
            background: transparent !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }
        #tapx-dash-overlay #bulk-selection-action-modal .dash-searchable-option:hover,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-option:hover,
        #tapx-dash-overlay #bulk-selection-action-modal .dash-searchable-option[aria-selected="true"],
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-option[aria-selected="true"] {
            background: rgba(255, 255, 255, 0.08) !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }
        #tapx-dash-overlay #bulk-selection-action-modal .dash-searchable-empty,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-empty {
            color: rgba(255, 255, 255, 0.5) !important;
        }
        /* The chev button — always visible, inside the field on the right,
           styled as a subtle rounded square (like the reference image). */
        #tapx-dash-overlay #dash-main .dash-searchable-chev {
            position: absolute !important;
            right: 0.3rem !important;
            top: 50% !important;
            left: auto !important;
            bottom: auto !important;
            transform: translateY(-50%) !important;
            width: 2rem !important;
            height: 2rem !important;
            min-width: 2rem !important;
            min-height: 2rem !important;
            flex: 0 0 auto !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            border-radius: 0.375rem !important;
            background: transparent !important;
            cursor: pointer !important;
            z-index: 5 !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        #tapx-dash-overlay #dash-main .dash-searchable-chev .material-symbols-outlined {
            font-size: 1.15rem !important;
            line-height: 1 !important;
        }
        /* Dark mode: light chevron icon */
        #tapx-dash-overlay.dark #dash-main .dash-searchable-chev {
            color: rgba(248, 250, 252, 0.85) !important;
        }
        #tapx-dash-overlay.dark #dash-main .dash-searchable-chev:hover {
            background: rgba(255, 255, 255, 0.06) !important;
        }
        /* Light mode: dark chevron + subtle gray square background on hover
           (matches the look of the reference emirates combobox button) */
        #tapx-dash-overlay:not(.dark) #dash-main .dash-searchable-chev {
            color: rgba(15, 23, 42, 0.55) !important;
            background: rgba(15, 23, 42, 0.04) !important;
        }
        #tapx-dash-overlay:not(.dark) #dash-main .dash-searchable-chev:hover {
            color: rgba(15, 23, 42, 0.85) !important;
            background: rgba(15, 23, 42, 0.08) !important;
        }

        /* Bulletproof hide the native <select> so it can never render a
           duplicate chevron below the field on any browser */
        #tapx-dash-overlay .dash-searchable-native,
        .dash-searchable-native {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 1px !important;
            height: 1px !important;
            min-width: 0 !important;
            min-height: 0 !important;
            max-width: 1px !important;
            max-height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            border: 0 !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            clip-path: inset(100%) !important;
            background: transparent !important;
            background-image: none !important;
            -webkit-appearance: none !important;
            appearance: none !important;
        }

        /* ===== HIDE ALL SCROLLBARS - NO VISIBLE SCROLL LINES ===== */
        #tapx-dash-overlay, #tapx-dash-overlay, * {
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }
        ::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }
        ::-webkit-scrollbar-track {
            display: none !important;
            background: transparent !important;
        }
        ::-webkit-scrollbar-thumb {
            display: none !important;
            background: transparent !important;
        }
        ::-webkit-scrollbar-corner {
            display: none !important;
            background: transparent !important;
        }

        /* Employee table: remove the outer border that shows as a line */
        #panel-employees .overflow-x-auto,
        #panel-vehicles .overflow-x-auto,
        #panel-commercial .overflow-x-auto,
        #panel-documents .overflow-x-auto,
        #panel-recycle .overflow-x-auto,
        #panel-password .overflow-x-auto,
        #panel-requests .overflow-x-auto,
        #panel-fines .overflow-x-auto {
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

        /* ===== 1TapX LOGO FLOAT + POP ===== */
        @keyframes tapxLogoFloat {
            0%   { transform: translateY(0px) rotate(0deg); }
            25%  { transform: translateY(-5px) rotate(1.5deg); }
            50%  { transform: translateY(0px) rotate(0deg); }
            75%  { transform: translateY(5px) rotate(-1.5deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
            20%  { transform: scale(1.5) rotate(10deg); }
            50%  { transform: scale(0.85) rotate(-5deg); }
            75%  { transform: scale(1.25) rotate(3deg); }
            100% { transform: scale(1) rotate(0deg); }
        }
        @keyframes tapxLogoGlow {
            0%, 100% { filter: drop-shadow(0 0 6px rgba(0,229,255,0.6)); }
            50%       { filter: drop-shadow(0 0 18px rgba(0,229,255,0.95)) drop-shadow(0 0 30px rgba(0,163,255,0.5)); }
        }
        @keyframes tapxLogoHexSpin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        @keyframes tapxLogoRingSpin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(-360deg); }
        }
        @keyframes tapxLogoOrbit {
            from { transform: rotate(0deg) translateX(15px) rotate(0deg); }
            to   { transform: rotate(360deg) translateX(15px) rotate(-360deg); }
        }
        .tapx-logo-wrap {
            animation: none !important; /* blink-kill */
            display: inline-block !important;
            cursor: pointer !important;
        }
        .tapx-logo-svg {
            overflow: visible !important;
            animation: none !important; /* blink-kill */
        }
        .tapx-logo-hex {
            transform-origin: 20px 20px;
            animation: none !important; /* blink-kill */
        }
        .tapx-logo-ring {
            transform-origin: 20px 20px;
            animation: none !important; /* blink-kill */
        }
        .tapx-logo-dot {
            transform-origin: 20px 20px;
            animation: none !important; /* blink-kill */
        }

        /* ===== LIGHT MODE - ALL DROPDOWN PANELS WHITE ===== */
        #tapx-dash-overlay:not(.dark) .dash-searchable-panel {
            background: #ffffff !important;
            border: 1px solid rgba(0,0,0,0.12) !important;
            box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important;
        }
        #tapx-dash-overlay:not(.dark) .dash-searchable-list {
            background: #ffffff !important;
        }
        #tapx-dash-overlay:not(.dark) .dash-searchable-option {
            background: #ffffff !important;
            color: #111111 !important;
        }
        /* Hover rule for .dash-searchable-option is unified in
           tapx-unified-dropdown-hover-light section below (cream/gold).
           Old grey-tint rule removed to avoid conflicts. */
        #tapx-dash-overlay:not(.dark) .dash-searchable-empty {
            color: #6b7280 !important;
        }
        #tapx-dash-overlay:not(.dark) .dash-modal-drop-carpet__inner {
            background: #ffffff !important;
        }
        #tapx-dash-overlay:not(.dark) .em-field-wrap .dash-searchable-panel {
            background: #ffffff !important;
        }
        #tapx-dash-overlay:not(.dark) .em-field-wrap .dash-searchable-option {
            background: #ffffff !important;
            color: #111111 !important;
        }
        /* em-field-wrap hover removed — unified hover rule applies. */

        /* Doc emirate popover - fixed position to escape clipping */
        #entity-modal #doc-emirate-combo-root .dash-modal-drop-carpet,
        #entity-modal #doc-emirate-combo-popover {
            position: absolute !important;
            z-index: 99999 !important;
            background: #1a1a1a !important;
            box-shadow: 0 20px 60px rgba(0,0,0,0.9) !important;
        }
        #tapx-dash-overlay:not(.dark) #entity-modal #doc-emirate-combo-root .dash-modal-drop-carpet,
        #tapx-dash-overlay:not(.dark) #entity-modal #doc-emirate-combo-popover {
            background: #ffffff !important;
            border: 1px solid rgba(0,0,0,0.12) !important;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
        }
        #tapx-dash-overlay:not(.dark) #entity-modal #doc-emirate-combo-root .emirate-combo-option {
            color: #111111 !important;
        }
        #tapx-dash-overlay:not(.dark) #entity-modal #doc-emirate-combo-root .emirate-combo-option:hover {
            background: #fff7da !important;
            color: #0f172a !important;
        }
        #entity-modal #doc-emirate-combo-root .dash-modal-drop-carpet.dash-modal-drop-carpet--open {
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* ===== LIGHT MODE - CHEVRON ARROW VISIBLE ===== */
        #tapx-dash-overlay:not(.dark) .dash-searchable-chev {
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) .dash-searchable-chev:hover {
            color: #FFD700 !important;
            background: rgba(0,0,0,0.05) !important;
        }
        #tapx-dash-overlay:not(.dark) #entity-modal .dash-searchable-chev,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal .dash-searchable-chev,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal .dash-searchable-chev,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal .dash-searchable-chev,
        #tapx-dash-overlay:not(.dark) #fine-form-modal .dash-searchable-chev {
            color: #64748b !important;
        }
        #tapx-dash-overlay:not(.dark) .dash-searchable-chev {
            color: #64748b !important;
        }

        /* ===== BULK ACTION SELECT - ARROW + CLICK TO OPEN ===== */
        #bulk-selection-action-modal .dash-searchable-chev {
            display: inline-flex !important;
            opacity: 1 !important;
            color: rgba(248, 250, 252, 0.9) !important;
            right: 0.4rem !important;
            z-index: 5 !important;
        }
        #bulk-selection-action-modal .dash-searchable-chev .material-symbols-outlined {
            font-size: 1.3rem !important;
        }
        #bulk-selection-action-modal .dash-searchable-trigger {
            padding-right: 2.8rem !important;
        }
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-chev {
            color: #64748b !important;
        }

        /* ===== CHECKBOXES - VISIBLE TICK IN LIGHT MODE ===== */

        /* Light mode unchecked */
        #tapx-dash-overlay:not(.dark) input[type="checkbox"] {
            background-color: #ffffff !important;
            border-color: #94a3b8 !important;
            color: #00A3FF !important;
            width: 1rem !important;
            height: 1rem !important;
            cursor: pointer !important;
        }
        /* Light mode checked - blue bg + white tick */
        #tapx-dash-overlay:not(.dark) input[type="checkbox"]:checked {
            background-color: #00A3FF !important;
            border-color: #00A3FF !important;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") !important;
        }
        /* Light mode indeterminate - blue bg + white dash */
        #tapx-dash-overlay:not(.dark) input[type="checkbox"]:indeterminate {
            background-color: #00A3FF !important;
            border-color: #00A3FF !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E") !important;
        }
        /* Dark mode unchecked */
        #tapx-dash-overlay.dark input[type="checkbox"] {
            cursor: pointer !important;
        }
        /* Dark mode checked - cyan */
        #tapx-dash-overlay.dark input[type="checkbox"]:checked {
            background-color: #00E5FF !important;
            border-color: #00E5FF !important;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") !important;
        }
        #tapx-dash-overlay.dark input[type="checkbox"]:indeterminate {
            background-color: #00E5FF !important;
            border-color: #00E5FF !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E") !important;
        }

        /* Water fill keyframe — rises and falls */
        @keyframes tapxWaterRise {
            0%   { transform: translateY(100%); }
            50%  { transform: translateY(55%); }
            100% { transform: translateY(100%); }
        }

        /* Wave surface wobble */
        @keyframes tapxWaveSurface {
            0%   { d: path("M0,8 C30,0 70,16 100,8 L100,30 L0,30 Z"); }
            50%  { d: path("M0,14 C25,4 75,22 100,14 L100,30 L0,30 Z"); }
            100% { d: path("M0,8 C30,0 70,16 100,8 L100,30 L0,30 Z"); }
        }

        /* Shimmer sweep on water surface */
        @keyframes tapxWaterShimmer {
            0%   { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        /* All stat boxes: relative + overflow:hidden to contain water */
        .dash-stat-tile,
        .emp-stat-card {
            position: relative !important;
            overflow: hidden !important;
        }

        /* Water layer inside each stat box */
        .dash-stat-tile::after,
        .emp-stat-card::after {
            content: '' !important;
            position: absolute !important;
            left: -10% !important;
            right: -10% !important;
            bottom: 0 !important;
            height: 120% !important;
            background: linear-gradient(
                180deg,
                rgba(0, 229, 255, 0.18) 0%,
                rgba(0, 163, 255, 0.28) 40%,
                rgba(0, 163, 255, 0.12) 100%
            ) !important;
            border-radius: 60% 60% 0 0 / 20px 20px 0 0 !important;
            animation: none /* tapxWaterRise disabled */ !important;
            transform-origin: bottom center !important;
            pointer-events: none !important;
            z-index: 0 !important;
        }

        /* Wave shimmer overlay */
        .dash-stat-tile::before,
        .emp-stat-card::before {
            content: '' !important;
            position: absolute !important;
            left: -10% !important;
            right: -10% !important;
            bottom: 0 !important;
            height: 120% !important;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.08) 40%,
                transparent 60%,
                rgba(0, 229, 255, 0.06) 80%,
                transparent 100%
            ) !important;
            background-size: 200% 100% !important;
            animation: none; /* blink-kill */
            border-radius: 60% 60% 0 0 / 20px 20px 0 0 !important;
            pointer-events: none !important;
            z-index: 0 !important;
        }

        /* Keep stat content above water */
        .dash-stat-tile > *,
        .emp-stat-card > * {
            position: relative !important;
            z-index: 1 !important;
        }

        /* Stagger water animation per card position */
        .dash-stat-tile:nth-child(2)::after,
        .emp-stat-card:nth-child(2)::after {
            animation-delay: 0.4s !important;
        }
        .dash-stat-tile:nth-child(3)::after,
        .emp-stat-card:nth-child(3)::after {
            animation-delay: 0.8s !important;
        }
        .dash-stat-tile:nth-child(4)::after,
        .emp-stat-card:nth-child(4)::after {
            animation-delay: 1.2s !important;
        }
        .dash-stat-tile:nth-child(5)::after,
        .emp-stat-card:nth-child(5)::after {
            animation-delay: 1.6s !important;
        }

        /* Light mode: slightly darker water */
        #tapx-dash-overlay:not(.dark) .dash-stat-tile::after,
        #tapx-dash-overlay:not(.dark) .emp-stat-card::after {
            background: linear-gradient(
                180deg,
                rgba(0, 163, 255, 0.12) 0%,
                rgba(0, 163, 255, 0.22) 40%,
                rgba(0, 163, 255, 0.08) 100%
            ) !important;
        }

        /* ===== DASH-STAT-TILE = EMP-STAT-CARD SAME STYLE ===== */
        .dash-stat-tile {
            text-align: left !important;
            border-radius: 0.875rem !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            background: rgba(10, 14, 22, 0.48) !important;
            backdrop-filter: blur(20px) saturate(1.15) !important;
            -webkit-backdrop-filter: blur(20px) saturate(1.15) !important;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 8px 28px rgba(0, 0, 0, 0.22) !important;
            padding: 0.75rem 1rem !important;
        }
        .dash-stat-tile:hover {
            border-color: rgba(255, 255, 255, 0.14) !important;
            background: rgba(12, 18, 30, 0.62) !important;
            transform: translateY(-8px) translateZ(14px) rotateX(4deg) scale(1.02) !important;
            box-shadow:
                0 0 0 1px rgba(255, 215, 0, 0.07) inset,
                0 18px 44px rgba(0, 0, 0, 0.36),
                0 0 40px rgba(0, 229, 255, 0.11),
                0 0 0 1px rgba(0, 229, 255, 0.18) !important;
        }
        #tapx-dash-overlay:not(.dark) .dash-stat-tile {
            background: rgba(255, 255, 255, 0.8) !important;
            backdrop-filter: blur(16px) saturate(1.05) !important;
            -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
            border-color: rgba(0, 0, 0, 0.04) !important;
            border-radius: 1.1rem !important;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 8px 25px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        }
        #tapx-dash-overlay:not(.dark) .dash-stat-tile:hover {
            border-color: rgba(79, 70, 229, 0.18) !important;
            background: rgba(255, 255, 255, 0.92) !important;
            transform: translateY(-6px) translateZ(12px) rotateX(2.5deg) scale(1.01) !important;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 1) inset,
                0 16px 40px rgba(15, 23, 42, 0.08),
                0 0 0 1px rgba(79, 70, 229, 0.1),
                0 0 28px rgba(6, 182, 212, 0.08) !important;
        }

        /* ===== VEHICLE EMIRATE FILTER BUTTONS ===== */
        .veh-em-filter-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 0.4rem 0.9rem;
            border-radius: 2rem;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.03em;
            border: 1.5px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
            white-space: nowrap;
            text-transform: uppercase;
        }
        .veh-em-filter-btn:hover {
            background: rgba(0,163,255,0.15);
            border-color: rgba(0,163,255,0.5);
            color: #00E5FF;
            transform: translateY(-2px) scale(1.04);
        }
        .veh-em-filter-btn.active {
            background: linear-gradient(135deg, rgba(0,163,255,0.25), rgba(0,229,255,0.15));
            border-color: #00A3FF;
            color: #00E5FF;
            box-shadow: 0 0 16px rgba(0,163,255,0.35), 0 2px 8px rgba(0,0,0,0.2);
        }
        #tapx-dash-overlay:not(.dark) .veh-em-filter-btn {
            border-color: rgba(0,0,0,0.12);
            background: rgba(255,255,255,0.7);
            color: #475569;
        }
        #tapx-dash-overlay:not(.dark) .veh-em-filter-btn:hover {
            background: rgba(0,163,255,0.08);
            border-color: #00A3FF;
            color: #0073cc;
        }
        #tapx-dash-overlay:not(.dark) .veh-em-filter-btn.active {
            background: linear-gradient(135deg,rgba(0,163,255,0.12),rgba(0,229,255,0.06));
            border-color: #00A3FF;
            color: #0073cc;
            box-shadow: 0 2px 12px rgba(0,163,255,0.2);
        }

        /* Dubai & Fujairah wordmarks - shift down slightly */
        .vehicle-plate-badge .veh-em-wordmark-wrap[title="Dubai"] .veh-em-wordmark-img,
        .vehicle-plate-badge .veh-em-wordmark-wrap[title="dubai"] .veh-em-wordmark-img {
            transform: translateY(3px) !important;
        }
        .vehicle-plate-badge .veh-em-wordmark-wrap[title="Fujairah"] .veh-em-wordmark-img,
        .vehicle-plate-badge .veh-em-wordmark-wrap[title="fujairah"] .veh-em-wordmark-img {
            transform: translateY(3px) !important;
        }
        .vehicle-plate-badge .veh-em-wordmark-wrap[title="Umm Al Quwain"] .veh-em-wordmark-img,
        .vehicle-plate-badge .veh-em-wordmark-wrap[title="umm al quwain"] .veh-em-wordmark-img {
            transform: translateY(3px) !important;
        }

        /* ===== PAY NOW BUTTON POP ANIMATION ===== */
        @keyframes tapxPayNowPop {
            0%   { transform: scale(1); }
            25%  { transform: scale(1.4) rotate(3deg); }
            50%  { transform: scale(0.88) rotate(-2deg); }
            75%  { transform: scale(1.18) rotate(1deg); }
            100% { transform: scale(1) rotate(0deg); }
        }
        .tapx-pay-now-popping {
            animation: tapxPayNowPop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards !important;
            filter: drop-shadow(0 0 14px rgba(52,211,153,0.9)) !important;
        }

        /* ===== LIGHT MODE - LINKED DOCS PANEL VISIBILITY ===== */
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content {
            background: rgba(248, 250, 252, 0.95) !important;
            border-top: 1px solid rgba(0,0,0,0.08) !important;
        }
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content p.text-gray-500 {
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content .emp-doc-panel-action-btn {
            border-color: rgba(0,0,0,0.15) !important;
            background: #ffffff !important;
            color: #FFD700 !important;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
        }
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content .emp-doc-panel-action-btn:hover {
            background: #f1f5f9 !important;
        }
        /* #3 Employee Documents: hide the per-document "Action" (service request)
           button inside the green Document panel. Document viewing/functionality
           is unaffected; scoped to .emp-docs-panel so other modules are untouched. */
        .emp-docs-panel .emp-doc-panel-action-btn { display: none !important; }
        /* Vehicle Documents: same Action-button removal as Employee, scoped to .veh-docs-panel. */
        .veh-docs-panel .emp-doc-panel-action-btn { display: none !important; }
        /* Settings → Profile: hide the auto-rendered Company Trade Licence
           summary card (per request). The company details remain available in
           the existing profile fields above; nothing else is affected. */
        #tapx-commercial-summary-card { display: none !important; }
        /* Docs module: hide the link-filter tab buttons above the search bar
           (the "Type" dropdown now drives this filter). The tabs stay in the DOM
           so the dropdown's existing filter logic keeps working — only the
           visible buttons are removed. */
        #doc-link-filter-tabs { display: none !important; }
        /* No docs message */
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content .text-gray-500 {
            color: #475569 !important;
        }
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content .text-accent-blue,
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content strong {
            color: #0073cc !important;
        }
        /* Doc table rows in light mode */
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content table {
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content td,
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content th {
            color: #FFD700 !important;
            border-color: rgba(0,0,0,0.07) !important;
        }
        /* Also fix emp-doc-detail-row and similar */
        #tapx-dash-overlay:not(.dark) .emp-doc-detail-row,
        #tapx-dash-overlay:not(.dark) .dash-carpet-expand__inner {
            background: rgba(248,250,252,0.98) !important;
        }

        /* ===== LIGHT MODE - BOLD TEXT BLACK IN LINKED DOCS ===== */
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content strong,
        #tapx-dash-overlay:not(.dark) .incoming-req-sixfold-content b,
        #tapx-dash-overlay:not(.dark) .dash-carpet-expand__inner strong,
        #tapx-dash-overlay:not(.dark) .dash-carpet-expand__inner b {
            color: #000000 !important;
            font-weight: 900 !important;
        }

        /* ===== TAPX LOADING OVERLAY ANIMATIONS ===== */
        @keyframes tapxLoadArcSpin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        @keyframes tapxLoadHexSpin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        @keyframes tapxLoadRingSpin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(-360deg); }
        }
        @keyframes tapxLoadLogoFloat {
            0%, 100% { transform: translateY(0px); }
            50%       { transform: translateY(-4px); }
        }
        @keyframes tapxLoadTextPulse {
            0%, 100% { opacity: 0.5; }
            50%       { opacity: 1; }
        }
        @keyframes tapxLoadDot {
            0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
            40%            { transform: scale(1.2); opacity: 1; }
        }
        @keyframes tapxLoadFadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        #tapx-loading-overlay.visible {
            display: flex !important;
            animation: tapxLoadFadeIn 0.15s ease forwards;
        }

        /* ===== LIGHT MODE - FINE FORM DROPDOWNS ===== */
        #tapx-dash-overlay:not(.dark) #fine-form-modal .fine-form-select option {
            background: #ffffff !important;
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .fine-form-input {
            background: #f8fafc !important;
            border-color: rgba(0,0,0,0.12) !important;
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .fine-form-input::placeholder {
            color: #94a3b8 !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .fine-form-label {
            color: #475569 !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .fine-form-select:focus {
            border-color: rgba(0,163,255,0.5) !important;
            box-shadow: 0 0 0 1px rgba(0,163,255,0.3) !important;
        }
        /* Light mode doc-link-select in fine form */
        #tapx-dash-overlay:not(.dark) #fine-form-modal .dash-searchable-trigger {
            background: #f8fafc !important;
            border-color: rgba(0,0,0,0.12) !important;
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .dash-searchable-chev {
            color: #64748b !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .dash-searchable-panel {
            background: #ffffff !important;
            border-color: rgba(0,0,0,0.12) !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .dash-searchable-option {
            background: #ffffff !important;
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .dash-searchable-option:hover {
            background: rgba(0,0,0,0.05) !important;
        }

        /* Fine form modal - light style like doc form */
        #fine-form-modal .fine-form-label {
            color: #475569 !important;
        }
        #fine-form-modal .dash-searchable-trigger {
            background: rgba(255,255,255,0.06) !important;
            border-color: rgba(255,255,255,0.12) !important;
            color: #f8fafc !important;
            border-radius: 0.65rem !important;
        }
        #fine-form-modal .dash-searchable-trigger::placeholder {
            color: rgba(148,163,184,0.92) !important;
        }
        #fine-form-modal .dash-searchable-chev {
            color: rgba(248,250,252,0.85) !important;
        }
        #fine-form-modal .dash-searchable-panel {
            background: #181818 !important;
            border-color: rgba(255,255,255,0.12) !important;
        }
        #fine-form-modal .dash-searchable-option {
            background: #181818 !important;
            color: #f3f4f6 !important;
        }
        #fine-form-modal .dash-searchable-option:hover {
            background: rgba(255,255,255,0.08) !important;
        }

        /* ===== LIGHT MODE - FINE FORM MODAL BACKGROUND ===== */
        #tapx-dash-overlay:not(.dark) #fine-form-modal {
            background: rgba(0, 0, 0, 0.3) !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .fine-form-panel {
            background: #f8fafc !important;
            color: #FFD700 !important;
            border: 1px solid rgba(0, 0, 0, 0.08) !important;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .sticky.top-0 {
            background: rgba(248, 250, 252, 0.97) !important;
            border-bottom-color: rgba(0, 0, 0, 0.08) !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .fine-form-label {
            color: #475569 !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal h3 {
            color: #00A3FF !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal #fine-form-close {
            color: #64748b !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal #fine-form-close:hover {
            color: #FFD700 !important;
            background: rgba(0,0,0,0.06) !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .border-white\/10 {
            border-color: rgba(0,0,0,0.08) !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .bg-black\/20 {
            background: rgba(0,0,0,0.03) !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal label.text-gray-500,
        #tapx-dash-overlay:not(.dark) #fine-form-modal .text-gray-500 {
            color: #475569 !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal .text-gray-400 {
            color: #64748b !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-form-modal input[type='checkbox'] {
            accent-color: #00A3FF !important;
        }
        /* Fine form #tapx-dash-overlay section background */
        #tapx-dash-overlay:not(.dark) #fine-form-modal .bg-black\/30,
        #tapx-dash-overlay:not(.dark) #fine-form-modal [class*="bg-black"] {
            background: rgba(0,0,0,0.03) !important;
        }

        /* ===== LIGHT MODE - ALL MODALS SAME LIGHT STYLE ===== */
        
        /* Overlay backdrop */
        #tapx-dash-overlay:not(.dark) #entity-modal, #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal, #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal, #tapx-dash-overlay:not(.dark) #emp-service-request-modal, #tapx-dash-overlay:not(.dark) #veh-service-request-modal, #tapx-dash-overlay:not(.dark) #employee-detail-modal, #tapx-dash-overlay:not(.dark) #vehicle-detail-modal, #tapx-dash-overlay:not(.dark) #document-detail-modal, #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal, #tapx-dash-overlay:not(.dark) #module-stat-drawer, #tapx-dash-overlay:not(.dark) #bulk-employee-import-modal, #tapx-dash-overlay:not(.dark) #bulk-vehicle-import-modal {
            background: rgba(0, 0, 0, 0.3) !important;
        }
        
        /* Panel inner box */
        #tapx-dash-overlay:not(.dark) #entity-modal > div,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal > div,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal > div,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal > div,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal > div,
        #tapx-dash-overlay:not(.dark) #employee-detail-modal > div,
        #tapx-dash-overlay:not(.dark) #vehicle-detail-modal > div,
        #tapx-dash-overlay:not(.dark) #document-detail-modal > div,
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal > div,
        #tapx-dash-overlay:not(.dark) #bulk-employee-import-modal > div,
        #tapx-dash-overlay:not(.dark) #bulk-vehicle-import-modal > div {
            background: #f8fafc !important;
            color: #FFD700 !important;
            border: 1px solid rgba(0,0,0,0.08) !important;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
        }
        
        /* Sticky headers inside modals */
        #tapx-dash-overlay:not(.dark) #entity-modal .sticky,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .sticky,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal .sticky,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal .sticky,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal .sticky,
        #tapx-dash-overlay:not(.dark) #employee-detail-modal .sticky,
        #tapx-dash-overlay:not(.dark) #vehicle-detail-modal .sticky,
        #tapx-dash-overlay:not(.dark) #document-detail-modal .sticky,
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal .sticky,
        #tapx-dash-overlay:not(.dark) #bulk-employee-import-modal .sticky,
        #tapx-dash-overlay:not(.dark) #bulk-vehicle-import-modal .sticky {
            background: rgba(248,250,252,0.97) !important;
        }
        
        /* All borders inside modals */
        #tapx-dash-overlay:not(.dark) #entity-modal .border-white\/10,
        #tapx-dash-overlay:not(.dark) #entity-modal .border-white\/5,
        #tapx-dash-overlay:not(.dark) #entity-modal .border-white\/8,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .border-white\/10,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal .border-white\/10,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal .border-white\/10,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal .border-white\/10,
        #tapx-dash-overlay:not(.dark) #employee-detail-modal .border-white\/10,
        #tapx-dash-overlay:not(.dark) #vehicle-detail-modal .border-white\/10,
        #tapx-dash-overlay:not(.dark) #document-detail-modal .border-white\/10,
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal .border-white\/10 {
            border-color: rgba(0,0,0,0.08) !important;
        }
        
        /* Modal titles */
        #tapx-dash-overlay:not(.dark) #entity-modal [id*="title"],
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal [id*="title"],
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal [id*="title"],
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal [id*="title"],
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal [id*="title"],
        #tapx-dash-overlay:not(.dark) #employee-detail-modal [id*="title"],
        #tapx-dash-overlay:not(.dark) #vehicle-detail-modal [id*="title"],
        #tapx-dash-overlay:not(.dark) #document-detail-modal [id*="title"],
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal [id*="title"] {
            color: #00A3FF !important;
        }
        
        /* Close buttons */
        #tapx-dash-overlay:not(.dark) #entity-modal button[aria-label="Close"],
        #tapx-dash-overlay:not(.dark) #entity-modal [id*="close"],
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal [id*="close"],
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal [id*="close"],
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal [id*="close"],
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal [id*="close"],
        #tapx-dash-overlay:not(.dark) #employee-detail-modal [id*="close"],
        #tapx-dash-overlay:not(.dark) #vehicle-detail-modal [id*="close"],
        #tapx-dash-overlay:not(.dark) #document-detail-modal [id*="close"],
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal [id*="close"],
        #tapx-dash-overlay:not(.dark) #modal-entity-close {
            color: #64748b !important;
        }
        #tapx-dash-overlay:not(.dark) #modal-entity-close:hover,
        #tapx-dash-overlay:not(.dark) #entity-modal [id*="close"]:hover {
            color: #FFD700 !important;
            background: rgba(0,0,0,0.06) !important;
        }
        
        /* All labels inside modals */
        #tapx-dash-overlay:not(.dark) #entity-modal label,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal label,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal label,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal label,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal label,
        #tapx-dash-overlay:not(.dark) #employee-detail-modal .text-gray-500,
        #tapx-dash-overlay:not(.dark) #vehicle-detail-modal .text-gray-500,
        #tapx-dash-overlay:not(.dark) #document-detail-modal .text-gray-500,
        #tapx-dash-overlay:not(.dark) #dash-profile-edit-modal label {
            color: #475569 !important;
        }

        /* Text colors */
        #tapx-dash-overlay:not(.dark) #entity-modal .text-white,
        #tapx-dash-overlay:not(.dark) #entity-modal .text-gray-200,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal .text-white,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal .text-white,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal .text-white,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .text-white {
            color: #FFD700 !important;
        }

        /* Background sections */
        #tapx-dash-overlay:not(.dark) #entity-modal .bg-black\/40,
        #tapx-dash-overlay:not(.dark) #entity-modal .bg-black\/30,
        #tapx-dash-overlay:not(.dark) #entity-modal .bg-black\/20,
        #tapx-dash-overlay:not(.dark) #bulk-doc-link-modal .bg-black\/40,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .bg-black\/40,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal .bg-black\/40,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal .bg-black\/40 {
            background: rgba(0,0,0,0.03) !important;
        }

        /* Textareas */
        #tapx-dash-overlay:not(.dark) #entity-modal textarea,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal textarea,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal textarea,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal textarea {
            background: #f1f5f9 !important;
            border-color: rgba(0,0,0,0.10) !important;
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) #entity-modal textarea::placeholder,
        #tapx-dash-overlay:not(.dark) #bulk-selection-action-modal textarea::placeholder,
        #tapx-dash-overlay:not(.dark) #emp-service-request-modal textarea::placeholder,
        #tapx-dash-overlay:not(.dark) #veh-service-request-modal textarea::placeholder {
            color: #94a3b8 !important;
        }

        /* Module stat drawer */
        #tapx-dash-overlay:not(.dark) #module-stat-drawer {
            background: rgba(0,0,0,0.3) !important;
        }
        #tapx-dash-overlay:not(.dark) .module-stat-drawer-panel {
            background: #f8fafc !important;
            border-color: rgba(0,0,0,0.08) !important;
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) .module-stat-drawer-panel .text-white,
        #tapx-dash-overlay:not(.dark) .module-stat-drawer-panel .text-gray-300 {
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) .module-stat-drawer-panel .text-gray-500 {
            color: #475569 !important;
        }
        #tapx-dash-overlay:not(.dark) .module-stat-drawer-panel .border-white\/10 {
            border-color: rgba(0,0,0,0.08) !important;
        }

        /* ===== FINE FORM - TYPE TABS ===== */
        .fine-type-tabs {
            display: flex;
            gap: 0;
            background: #0f1520;
            border-radius: 2rem;
            padding: 4px;
            margin: 0 auto 4px;
            width: fit-content;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
        }
        #tapx-dash-overlay:not(.dark) .fine-type-tabs {
            background: #c8d2e0;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
        }
        .fine-type-tab {
            padding: 0.45rem 1.6rem;
            border-radius: 2rem;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border: none;
            background: transparent;
            color: rgba(255,255,255,0.45);
            cursor: pointer;
            transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
            white-space: nowrap;
        }
        #tapx-dash-overlay:not(.dark) .fine-type-tab {
            color: #64748b;
        }
        .fine-type-tab.active {
            background: #FFD700;
            color: #000000;
            box-shadow: 0 2px 12px rgba(255,215,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
            transform: scale(1.03);
        }
        #tapx-dash-overlay:not(.dark) .fine-type-tab.active {
            background: #FFD700;
            color: #000000;
            box-shadow: 0 2px 12px rgba(255,215,0,0.35);
        }

        /* ===== EMIRATE DROPDOWN ===== */
        #tapx-dash-overlay:not(.dark) #veh-emirate-dropdown-menu {
            background: #ffffff !important;
            border-color: rgba(0,0,0,0.10) !important;
        }
        #tapx-dash-overlay:not(.dark) .veh-em-dd-option {
            color: #FFD700 !important;
        }
        #tapx-dash-overlay:not(.dark) .veh-em-dd-option:hover {
            background: rgba(0,0,0,0.05) !important;
        }
        .veh-em-dd-option.selected {
            background: rgba(0,163,255,0.15) !important;
            color: #00A3FF !important;
        }

        /* Fine form - Select vehicle same height as other fields */
        #fine-form-modal .dash-searchable-trigger {
            min-height: 2.35rem !important;
            padding: 0.52rem 2.2rem 0.52rem 0.75rem !important;
            font-size: 0.84rem !important;
            border-radius: 0.65rem !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
        }
        #fine-form-modal .dash-searchable-row {
            height: 2.35rem !important;
        }

        /* ── entity-modal doc-link-target dropdown fix ── */
        #entity-modal .dash-searchable-wrap:has(#doc-link-target-select) {
            position: relative;
            z-index: 220;
        }
        #entity-modal .dash-searchable-panel:has(#doc-link-target-select-ds-list),
        #entity-modal #doc-link-target-select-ds-list {
            z-index: 9999 !important;
        }
        /* Ensure entity-modal doesn't clip the dropdown */
        #entity-modal,
        #entity-modal > div {
            overflow: visible !important;
        }
        #entity-modal .dash-modal-drop-carpet.dash-modal-drop-carpet--open {
            z-index: 9998 !important;
            overflow: visible !important;
        }

        /* Force hide fine-link-target enhanced wrapper */
        #fine-form-modal .dash-searchable-wrap:has(#fine-link-target-select),
        #fine-form-modal .dash-searchable-row:has(#fine-link-target-select) {
            display: none !important;
        }
        /* Also hide the parent container */
        #fine-form-modal #fine-link-target-select,
        #fine-form-modal #fine-link-target-select + .dash-searchable-wrap,
        #fine-form-modal [data-ds-for="fine-link-target-select"] {
            display: none !important;
        }

        /* Fine form entity autocomplete dropdowns */
        #fine-vehicle-dropdown .fv-option,
        #fine-employee-dropdown .fv-option,
        #fine-commercial-dropdown .fv-option {
            padding: 7px 12px;
            font-size: 12px;
            color: #c8d2e0;
            cursor: pointer;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            transition: background 0.12s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        #fine-vehicle-dropdown .fv-option:last-child,
        #fine-employee-dropdown .fv-option:last-child,
        #fine-commercial-dropdown .fv-option:last-child { border-bottom: none; }
        #fine-vehicle-dropdown .fv-option:hover, #fine-vehicle-dropdown .fv-option.active,
        #fine-employee-dropdown .fv-option:hover, #fine-employee-dropdown .fv-option.active,
        #fine-commercial-dropdown .fv-option:hover, #fine-commercial-dropdown .fv-option.active {
            background: rgba(255, 215, 0, 0.14);
            color: #FFD700;
            box-shadow: none;
        }
        #fine-vehicle-dropdown .fv-empty,
        #fine-employee-dropdown .fv-empty,
        #fine-commercial-dropdown .fv-empty {
            padding: 10px 12px;
            font-size: 12px;
            color: #6b7280;
        }
        #fine-employee-dropdown, #fine-commercial-dropdown {
            display: none;
            position: absolute;
            left: 0; right: 0;
            top: 100%;
            margin-top: 2px;
            z-index: 9999;
            background: #181818;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 0.65rem;
            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
            max-height: 180px;
            overflow-y: auto;
        }
        #tapx-dash-overlay:not(.dark) #fine-vehicle-dropdown,
        #tapx-dash-overlay:not(.dark) #fine-employee-dropdown,
        #tapx-dash-overlay:not(.dark) #fine-commercial-dropdown {
            background: #ffffff !important;
            border-color: rgba(0,0,0,0.10) !important;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
        }
        #tapx-dash-overlay:not(.dark) #fine-vehicle-dropdown .fv-option,
        #tapx-dash-overlay:not(.dark) #fine-employee-dropdown .fv-option,
        #tapx-dash-overlay:not(.dark) #fine-commercial-dropdown .fv-option { color: #FFD700 !important; }
        #tapx-dash-overlay:not(.dark) #fine-vehicle-dropdown .fv-option:hover,
        #tapx-dash-overlay:not(.dark) #fine-employee-dropdown .fv-option:hover,
        #tapx-dash-overlay:not(.dark) #fine-commercial-dropdown .fv-option:hover { background: #fff7da !important; color: #0f172a !important; box-shadow: none !important; }
        /* Plate badge in dropdown */
        .fv-plate-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1px 5px;
            border-radius: 3px;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.04em;
            flex-shrink: 0;
            min-width: 36px;
        }

        /* ===== FINE FORM TOGGLE SWITCH ===== */
        .fine-toggle-wrap { display:inline-flex; align-items:center; cursor:pointer; }
        .fine-toggle-input { position:absolute; opacity:0; width:0; height:0; }
        .fine-toggle-track {
            position:relative; display:inline-block;
            width:42px; height:24px; border-radius:12px;
            background:rgba(255,255,255,0.15);
            border:1px solid rgba(255,255,255,0.15);
            transition:background 0.25s, border-color 0.25s;
        }
        .fine-toggle-input:checked + .fine-toggle-track {
            background:#00A3FF;
            border-color:#00A3FF;
        }
        .fine-toggle-thumb {
            position:absolute; top:2px; left:2px;
            width:18px; height:18px; border-radius:50%;
            background:#ffffff;
            box-shadow:0 1px 4px rgba(0,0,0,0.3);
            transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
        }
        .fine-toggle-input:checked + .fine-toggle-track .fine-toggle-thumb {
            transform:translateX(18px);
        }
        #tapx-dash-overlay:not(.dark) .fine-toggle-track {
            background:rgba(0,0,0,0.12);
            border-color:rgba(0,0,0,0.12);
        }

        /* Hide vehicle-only fields in employee/commercial tabs */
        .fine-form-tab-employee .fine-vehicle-only-field,
        .fine-form-tab-commercial .fine-vehicle-only-field {
            display:none !important;
        }

        /* Employee/Commercial tabs — hide vehicle-specific fields */
        .fine-form-tab-employee .fine-location-field,
        .fine-form-tab-employee .fine-blackpoints-field,
        .fine-form-tab-employee .fine-form-discount,
        .fine-form-tab-commercial .fine-location-field,
        .fine-form-tab-commercial .fine-blackpoints-field,
        .fine-form-tab-commercial .fine-form-discount {
            display: none !important;
        }

        /* ===== PAGINATION ===== */
        .tapx-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px 0 4px;
            flex-wrap: wrap;
        }
        .tapx-pg-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            padding: 0 8px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 700;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            transition: all 0.18s ease;
            white-space: nowrap;
        }
        .tapx-pg-btn:hover:not(:disabled) {
            background: rgba(0,163,255,0.15);
            border-color: rgba(0,163,255,0.4);
            color: #00E5FF;
        }
        .tapx-pg-btn.active {
            background: #00A3FF;
            border-color: #00A3FF;
            color: #000;
            font-weight: 900;
        }
        .tapx-pg-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        .tapx-pg-info {
            font-size: 11px;
            color: rgba(255,255,255,0.4);
            margin: 0 4px;
        }
        #tapx-dash-overlay:not(.dark) .tapx-pg-btn {
            border-color: rgba(0,0,0,0.10);
            background: rgba(255,255,255,0.8);
            color: #475569;
        }
        #tapx-dash-overlay:not(.dark) .tapx-pg-btn:hover:not(:disabled) {
            background: rgba(0,163,255,0.08);
            border-color: #00A3FF;
            color: #0073cc;
        }
        #tapx-dash-overlay:not(.dark) .tapx-pg-btn.active {
            background: #00A3FF;
            border-color: #00A3FF;
            color: #fff;
        }
        #tapx-dash-overlay:not(.dark) .tapx-pg-info { color: #94a3b8; }

        /* ===== PAGINATION - NO EXTRA SPACE ===== */
        .tapx-pagination-wrap:empty { display: none; }
        #tapx-pg-emp:empty, #tapx-pg-veh:empty, #tapx-pg-comm:empty,
        #tapx-pg-docs:empty, #tapx-pg-recycle:empty, #tapx-pg-vault:empty,
        #tapx-pg-fines:empty { display: none; }
        
        /* Remove any min-height on tables when paginated */
        #tbody-employees tr:last-child td,
        #tbody-vehicles tr:last-child td,
        #tbody-commercial-employees tr:last-child td,
        #table-documents tr:last-child td,
        #tbody-fines-demo tr:last-child td {
            border-bottom: none !important;
        }
        
        /* Pagination sits flush */
        .tapx-pagination {
            margin: 0 !important;
            padding: 10px 0 4px !important;
        }

        /* ── LAYOUT FIX: zero extra scroll space after last row ── */

        /* Sidebar: sticky = stays in flex flow, no separate margin needed */
        aside.dash-sidebar {
            position: sticky !important;
            top: 0 !important;
            height: 100vh !important;
            align-self: flex-start !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }

        /* Flex columns must have min-height:0 or they can blow past container */
        .flex-1.flex.flex-col {
            min-height: 0;
        }

        /* Main: no bottom padding, no extra scroll space */
        #dash-main {
            padding-bottom: 0 !important;
        }

        /* Every panel: kill all bottom spacing (pb-0 overrides p-6 from HTML) */
        #dash-overview,
        #panel-employees, #panel-vehicles, #panel-commercial,
        #panel-documents, #panel-requests, #panel-fines,
        #panel-password, #panel-recycle,
        #panel-invoices, #panel-settings, #panel-placeholder {
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }

        /* space-y panels: last child has no trailing margin */
        #panel-fines > *:last-child,
        #panel-requests > *:last-child,
        #panel-password > *:last-child,
        #dash-overview > *:last-child,
        #dash-main > *:last-child {
            margin-bottom: 0 !important;
        }

        /* Table wrappers: no trailing margin */
        .overflow-x-auto.rounded-xl {
            margin-bottom: 0 !important;
        }

        /* Pagination bar: no bottom padding */
        .tapx-pagination {
            margin: 0 !important;
            padding: 8px 0 2px !important;
        }
        [id^="tapx-pg-"]:empty { display: none !important; }

        /* Reduce table row and column padding in all modules */
        #dash-main table th {
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
        }
        #dash-main table td {
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
        }

        /* ── STICKY THEAD FIX ──
           overflow-x:auto sets overflow-y:auto implicitly, breaking sticky.
           overflow-y:clip does NOT create a scroll container → sticky works! */
        .overflow-x-auto.rounded-xl {
            overflow-y: clip !important;
        }
        #dash-main table thead th {
            position: sticky !important;
            top: 0 !important;
            z-index: 5 !important;
            background: #0c0f18 !important;
        }
        #tapx-dash-overlay:not(.dark) #dash-main table thead th {
            background: #eef2f7 !important;
        }

        /* ── PAGINATION STYLE ──
           Clean prev/next icon buttons + page info */
        .tapx-pagination {
            display: flex !important;
            align-items: center !important;
            gap: 4px !important;
            padding: 10px 0 2px !important;
            margin: 0 !important;
        }
        .tapx-pg-btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-width: 34px !important;
            height: 34px !important;
            border-radius: 8px !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
            background: rgba(255,255,255,0.04) !important;
            color: #cbd5e1 !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            cursor: pointer !important;
            transition: background 0.2s, border-color 0.2s !important;
        }
        .tapx-pg-btn:hover:not(:disabled) {
            background: rgba(0,163,255,0.15) !important;
            border-color: rgba(0,163,255,0.4) !important;
            color: #fff !important;
        }
        .tapx-pg-btn.active {
            background: #00A3FF !important;
            border-color: #00A3FF !important;
            color: #fff !important;
        }
        .tapx-pg-btn:disabled {
            opacity: 0.3 !important;
            cursor: not-allowed !important;
        }
        .tapx-pg-info {
            font-size: 12px !important;
            color: #64748b !important;
            margin-left: 6px !important;
        }
        #tapx-dash-overlay:not(.dark) .tapx-pg-btn {
            border-color: rgba(15,23,42,0.15) !important;
            background: rgba(15,23,42,0.04) !important;
            color: #475569 !important;
        }
        #tapx-dash-overlay:not(.dark) .tapx-pg-btn.active {
            background: #00A3FF !important;
            color: #fff !important;
        }

        #tapx-pg-req:empty, #tapx-pg-comm:empty { display: none !important; }

        /* Remove blue focus ring from all select/input elements in forms */
        select:focus,
        select:focus-visible,
        input:focus,
        input:focus-visible,
        textarea:focus,
        textarea:focus-visible {
            outline: none !important;
            box-shadow: none !important;
        }
        /* Specifically remove from doc-link-select and entity selects */
        .doc-link-select:focus,
        .doc-link-select:focus-visible,
        .entity-docs-select:focus,
        .entity-docs-select:focus-visible,
        .fine-form-select:focus,
        .fine-form-select:focus-visible,
        .fine-form-input:focus,
        .fine-form-input:focus-visible {
            outline: none !important;
            box-shadow: none !important;
            border-color: rgba(255,255,255,0.2) !important;
        }

/* ══════════════════════════════════════════════════════════
   ANTI-BLINK PATCH — Dashboard Flicker Fixes
   ══════════════════════════════════════════════════════════ */
#tapx-dash-overlay #tapx-loading-overlay { display: none !important; visibility: hidden !important; }
#tapx-dash-overlay .dash-pane-animate { transform-style: flat !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; will-change: auto !important; contain: layout style !important; }
#tapx-dash-overlay .dash-card, #tapx-dash-overlay .emp-stat-card, #tapx-dash-overlay .dash-stat-tile { backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; }
#tapx-dash-overlay .incoming-six-card { animation: none !important; }

        @keyframes dashCardFadeIn {
            0%   { opacity: 0.7; transform: translateY(4px); }
            100% { opacity: 1;   transform: translateY(0); }
        }

        /* Profile btn — no transform/filter on hover to prevent visual bugs */
        #dash-header-profile-btn { transform: none !important; overflow: visible !important; }
        #dash-header-profile-btn::after { display: none !important; }

/* ══════════════════════════════════════════════════════════
   FORM BLINK COMPLETE FIX — All Dashboard Forms & Cards
   ══════════════════════════════════════════════════════════ */

/* 1. Kill all card fade-in replays — dashCardFadeIn re-triggers on every renderAll() */
#tapx-dash-overlay .dash-pane-animate,
#tapx-dash-overlay .dash-pane-animate .dash-card,
#tapx-dash-overlay .dash-pane-animate a.dash-stat-tile,
#tapx-dash-overlay .dash-pane-animate button.dash-stat-tile,
#tapx-dash-overlay .dash-pane-animate .emp-stat-card {
    animation: none !important;
    animation-delay: 0ms !important;
}

/* 2. Kill modal pop-in 3D filter animation — causes flash on every open */
#tapx-dash-overlay #entity-modal-panel,
#tapx-dash-overlay #dash-profile-edit-modal > div.rounded-2xl {
    animation: none !important;
    filter: none !important;
    transform: none !important;
}

/* 3. Kill vortex pipe pulsing — infinite opacity blink on form connector lines */
#tapx-dash-overlay .vortex-pipe-join,
#tapx-dash-overlay .vortex-pipe-join-v {
    animation: none !important;
    opacity: 0.6 !important;
}

/* 4. Kill dashboard card panel open/close flicker */
#tapx-dash-overlay #bulk-selection-action-panel,
#tapx-dash-overlay #bulk-doc-link-panel,
#tapx-dash-overlay #emp-service-request-panel,
#tapx-dash-overlay #veh-service-request-panel,
#tapx-dash-overlay #fine-form-panel {
    transition: none !important;
}

/* 5. Remove box-shadow glow transitions on inputs — no flash on focus */
#tapx-dash-overlay input,
#tapx-dash-overlay textarea,
#tapx-dash-overlay select,
#tapx-dash-overlay .tapx-inp,
#tapx-dash-overlay .fine-check-input-dark,
#tapx-dash-overlay .fine-check-field-light,
#tapx-dash-overlay .doc-modal-combo-input {
    transition: border-color 0.15s ease !important;
    box-shadow: none !important;
}
#tapx-dash-overlay input:focus,
#tapx-dash-overlay textarea:focus,
#tapx-dash-overlay select:focus,
#tapx-dash-overlay .tapx-inp:focus,
#tapx-dash-overlay .fine-check-input-dark:focus,
#tapx-dash-overlay .fine-check-field-light:focus {
    box-shadow: none !important;
    transition: border-color 0.15s ease !important;
}

/* 6. Kill emp-stat-card tabular-nums animation inside forms */
#tapx-dash-overlay .dash-pane-animate .emp-stat-card .tabular-nums {
    animation: none !important;
    opacity: 1 !important;
}

/* 7. Kill all remaining filter animations inside dash overlay */
#tapx-dash-overlay .dash-card,
#tapx-dash-overlay .emp-stat-card,
#tapx-dash-overlay .dash-stat-tile {
    animation: none !important;
    filter: none !important;
}

/* 8. Prevent tapx-val-update class toggle from causing any visual change */
#tapx-dash-overlay .tapx-val-update {
    animation: none !important;
    filter: none !important;
    transform: none !important;
}

/* 9. Kill whatsapp float ping ring animation in dashboard */
#tapx-dash-overlay .whatsapp-float__ring {
    animation: none !important;
    opacity: 0 !important;
}

/* 10. Stat tiles — no animation on any state */
#tapx-dash-overlay a.dash-stat-tile,
#tapx-dash-overlay button.dash-stat-tile {
    animation: none !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}


/* ══════════════════════════════════════════════════════
   GLOBAL BLINK KILL — animations removed, display/opacity untouched
   ══════════════════════════════════════════════════════ */

/* Kill ONLY animation — do NOT touch transitions or opacity */
*, *::before, *::after {
    animation: none !important;
    -webkit-animation: none !important;
    animation-play-state: paused !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
}

/* Kill Tailwind animate-* utilities — restore opacity so nothing hides */
.animate-pulse,
.animate-ping,
.animate-spin,
.animate-bounce,
[class*="animate-"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   1TapX BRAND LOGO — single source of truth, reusable everywhere.
   HD version (512px source) embedded as transparent PNG. Bigger
   default sizes so the logo reads clearly across the site.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --tapx-brand-logo: url("data:image/png;base64,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");
}
.tapx-brand-img {
    display: inline-block;
    background-image: var(--tapx-brand-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    flex-shrink: 0;
    /* Crisp rendering on HiDPI / zoomed displays */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
/* Preset sizes — enlarged per user request for full-HD visibility */
.tapx-brand-img--xs { width: 32px;  height: 32px; }
.tapx-brand-img--sm { width: 44px;  height: 44px; }
.tapx-brand-img--md { width: 56px;  height: 56px; }
.tapx-brand-img--lg { width: 88px;  height: 88px; }
.tapx-brand-img--xl { width: 128px; height: 128px; }
.tapx-brand-img--2xl{ width: 180px; height: 180px; }
.tapx-brand-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
/* Landing page keeps the ORIGINAL brand logo even after a client uploads
   their own logo (which overrides --tapx-brand-logo globally). */
.tapx-brand-img--landing {
    background-image: var(--tapx-brand-logo-orig) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PARTNER-CLIENT MIRROR — neutralize all body.tapx-partner-mode CSS
   modifications on tier cards so partner cards look IDENTICAL to
   client cards. Content is swapped by the PHASE 17 JS template; we
   just need to stop the partner-mode chrome (background overrides,
   "PARTNER" pseudo-badges, " · Partner" h3 suffix, " (Apply)" button
   suffix, etc.) from changing the card visuals. Source order matters:
   this block comes after the modifying rules so the cascade wins.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Kill every ::before / ::after overlay added by partner-mode rules */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier]::before,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier]::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}

/* 2. Kill text suffixes on headings and buttons */
body.tapx-partner-mode #sanctuary-tiers h3::after,
body.tapx-partner-mode #sanctuary-tiers h2::after,
body.tapx-partner-mode #sanctuary-tiers h2:first-of-type::after,
body.tapx-partner-mode #sanctuary-tiers > .text-center h2::after,
body.tapx-partner-mode #sanctuary-tiers button[data-tier-quote-open]::after {
    content: none !important;
    display: none !important;
}

/* 3. Reset glass-panel + tier card background overrides */
body.tapx-partner-mode #sanctuary-tiers .glass-panel,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] {
    background: transparent !important;
    border-color: transparent !important;
}

/* 4. Re-apply each tier's ORIGINAL client background + border
       (extracted directly from the user-tier HTML inline styles) */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="startup"] {
    border: 1px solid rgba(205,127,50,0.30) !important;
    background: linear-gradient(180deg,rgba(205,127,50,0.04) 0%,rgba(0,0,0,0) 60%) !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="scale"] {
    border: 1px solid rgba(192,192,192,0.45) !important;
    background: linear-gradient(180deg,rgba(192,192,192,0.06) 0%,rgba(0,0,0,0) 60%) !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] {
    border: 1px solid rgba(255,215,0,0.55) !important;
    background: linear-gradient(180deg,rgba(255,215,0,0.08) 0%,rgba(0,0,0,0) 60%) !important;
    box-shadow: 0 0 60px rgba(255,215,0,0.15) !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="fortress"] {
    border: 1px solid rgba(229,228,226,0.45) !important;
    background: linear-gradient(180deg,rgba(229,228,226,0.08) 0%,rgba(56,189,248,0.04) 60%) !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="legend"] {
    border: 1px solid rgba(125,211,252,0.55) !important;
    background: linear-gradient(180deg,rgba(125,211,252,0.10) 0%,rgba(56,189,248,0.04) 50%,rgba(0,0,0,0) 100%) !important;
    box-shadow: 0 0 60px rgba(125,211,252,0.18) !important;
}

/* 5. Restore default ul list styling (some partner-mode rules hide ULs
      or apply weird overrides — re-show them with original spacing) */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FINES CHECK FREE — Mobile / Email column placement guarantee
   Mobile MUST sit directly below the Issue field (left column).
   Email MUST sit directly below the Expiry field (right column).
   This rule overrides any inline grid-column the layouts script may
   apply, ensuring the Mobile/Email row always lines up with the row
   above it (Issue/Expiry).
   ═══════════════════════════════════════════════════════════════════ */
#fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-mobile {
    grid-column: 1 / span 1 !important;
}
#fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-email {
    grid-column: auto / span 1 !important;
}
/* Make sure phone combo + email input stretch to fill their column */
#fines-check-free-form #ff-veh-w-mobile,
#fines-check-free-form #ff-veh-w-email,
#fines-check-free-form #ff-veh-w-mobile .fine-phone-combo-row,
#fines-check-free-form #ff-veh-w-mobile #ph-mount-ff-veh,
#fines-check-free-form #ff-veh-w-mobile #fines-free-phone-wrap,
#fines-check-free-form #ff-veh-w-email input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* ═══════════════════════════════════════════════════════════════════
   FINAL HARD-LOCK — Mobile + Email field positioning (Fine Check Free)
   ────────────────────────────────────────────────────────────────────
   The layouts script at ~line 79122 sets inline grid-column on these
   blocks when the user switches between Plate Number / Traffic File /
   Driving License modes. This caused the Mobile + Email row to shift.
   This block forces them to ALWAYS sit side-by-side in a stable
   2-column row regardless of which mode is active. Inline style is
   beaten by !important specificity.
   ═══════════════════════════════════════════════════════════════════ */
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-mobile,
html body #fines-check-free-form #fines-free-vehicle-panel > div#ff-veh-w-mobile {
    grid-column: 1 / span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-self: start !important;
}
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-email,
html body #fines-check-free-form #fines-free-vehicle-panel > div#ff-veh-w-email {
    grid-column: auto / span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-self: start !important;
}
/* Phone combo row + email input — fill exactly their column, never overflow */
html body #fines-check-free-form #ff-veh-w-mobile .fine-phone-combo-row,
html body #fines-check-free-form #ff-veh-w-email input[type="email"],
html body #fines-check-free-form #fines-free-visa-panel  .fine-phone-combo-row,
html body #fines-check-free-form #fines-free-visa-panel  input[type="email"],
html body #fines-check-free-form #fines-free-trade-panel .fine-phone-combo-row,
html body #fines-check-free-form #fines-free-trade-panel input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}
/* Phone digits input — flex-1 so it fills remaining space after CC slot */
html body #fines-check-free-form .fine-phone-combo-row > input[type="tel"] {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    width: auto !important;
}
/* Phone mount points — guarantee they don't burst out of their grid cell */
html body #fines-check-free-form #ph-mount-ff-veh,
html body #fines-check-free-form #ph-mount-ff-visa,
html body #fines-check-free-form #ph-mount-ff-trade,
html body #fines-check-free-form #fines-free-phone-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* Visa & Trade panels — lock their contact row to 2-column never shifting */
html body #fines-check-free-form #fines-free-visa-panel  > .col-span-2.grid.grid-cols-2,
html body #fines-check-free-form #fines-free-trade-panel > .col-span-2.grid.grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.375rem !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
html body #fines-check-free-form #fines-free-visa-panel  > .col-span-2.grid.grid-cols-2 > *,
html body #fines-check-free-form #fines-free-trade-panel > .col-span-2.grid.grid-cols-2 > * {
    grid-column: auto / span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-self: start !important;
}
/* ═══════════════════════════════════════════════════════════════════
   USER REQUEST — Contact row (Mobile + Email) asymmetric layout
   ────────────────────────────────────────────────────────────────────
   • Mobile column: 0.85fr (just enough for country code + digits)
   • Email column:  1.15fr (wider — supports longer email addresses)
   • Applies to Visa + Trade panel contact rows.
   • Vehicle panel stays at the parent 1fr/1fr grid (other rows depend
     on it) but Email INPUT width is maximized within its column.
   • All locks remain so positions don't shift on tab switches.
   ═══════════════════════════════════════════════════════════════════ */
html body #fines-check-free-form .ff-contact-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.375rem !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
html body #fines-check-free-form .ff-contact-row > * {
    grid-column: auto / span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-self: start !important;
    margin-top: 0 !important;
}
/* Vehicle panel — make Email column visually accommodate longer text by
   removing label/input padding eaters, and ensuring 100% width fill */
html body #fines-check-free-form #ff-veh-w-email input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* ═══════════════════════════════════════════════════════════════════
   TAB-SWITCH STABILITY — Vehicle → Visa → Vehicle field positioning
   ────────────────────────────────────────────────────────────────────
   When user switches Vehicle → Visa → back to Vehicle, the JS resets
   inline styles. This CSS layer ensures the layout is deterministic
   regardless of inline-style state: every block goes to its slot.
   ═══════════════════════════════════════════════════════════════════ */
html body #fines-check-free-form #fines-free-vehicle-panel > .ff-veh-block {
    box-sizing: border-box !important;
    min-width: 0 !important;
    align-self: start !important;
}
html body #fines-check-free-form #fines-free-vehicle-panel > .ff-veh-block[id="ff-veh-w-mobile"] {
    grid-column: 1 / span 1 !important;
}
html body #fines-check-free-form #fines-free-vehicle-panel > .ff-veh-block[id="ff-veh-w-email"] {
    grid-column: auto / span 1 !important;
}
/* Phone wrap — regardless of which mount it's in, full width + no overflow */
html body #fines-check-free-form #fines-free-phone-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}
/* ═══════════════════════════════════════════════════════════════════
   NUCLEAR POSITION LOCK — Fine Check Free fields stable layout
   ────────────────────────────────────────────────────────────────────
   The JS layouts script (~line 79122) sets inline `order` and
   `gridColumn` styles on every Vehicle panel block. When user
   switches tabs/modes, these inline styles cause fields to drift.

   This block makes the layout DETERMINISTIC by:
   1. Disabling all `order` properties → fields flow in HTML source
      order (which already matches the desired display order)
   2. Explicitly setting `grid-column` per block via ID selectors
      → JS inline `gridColumn` is beaten by CSS !important
   3. Hidden blocks via display:none are removed from layout — the
      remaining fields auto-fill the grid in correct order
   4. `align-self: start` prevents stretching across rows
   ═══════════════════════════════════════════════════════════════════ */
html body #fines-check-free-form #fines-free-vehicle-panel > .ff-veh-block {
    order: 0 !important;
    align-self: start !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* Full-width (col-span-2) fields */
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-name,
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-lookup,
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-note {
    grid-column: 1 / -1 !important;
}
/* Span-1 fields — flow in source order */
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-license,
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-emirate,
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-type,
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-tc,
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-plate,
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-plate-code,
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-issue,
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-expiry,
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-mobile,
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-email {
    grid-column: auto / span 1 !important;
}
/* Visa panel — lock children to source order */
html body #fines-check-free-form #fines-free-visa-panel > * {
    order: 0 !important;
    align-self: start !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* Trade panel — same lock */
html body #fines-check-free-form #fines-free-trade-panel > * {
    order: 0 !important;
    align-self: start !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* ───── Vehicle Mobile + Email — direct children, locked positions ─────
   Both fields are equal-width siblings of Plate/Code (1fr each in the
   parent grid). They sit between Expiry and Note in DOM source order. */
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-mobile {
    grid-column: 1 / span 1 !important;
    order: 0 !important;
    align-self: start !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}
html body #fines-check-free-form #fines-free-vehicle-panel > #ff-veh-w-email {
    grid-column: auto / span 1 !important;
    order: 0 !important;
    align-self: start !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}


@keyframes tapxModalPop {
    0%   { opacity: 0; transform: scale(0.94) translateY(-10px); }
    100% { opacity: 1; transform: scale(1)    translateY(0);     }
}


/* ════════════════════════════════════════════════════════════════
   UNIVERSAL DROPDOWN HOVER — light gold/cream highlight
   ────────────────────────────────────────────────────────────────
   Covers EVERY dropdown variant in the dashboard:
   • .dash-searchable-option       (custom searchable selects)
   • .emirate-combo-option         (emirate pickers)
   • .doc-modal-combo-option       (document type picker)
   • .searchable-select-option     (fine check forms)
   • .dropdown-item                (generic dropdown items)
   • .veh-em-dd-option             (vehicle emirate dropdown)
   • .fv-option                    (fine vehicle/employee dropdowns)
   • .tapx-dropdown-list li        (generic dropdown lists)
   • [role="option"], etc.         (ARIA-standard options)
   Single clean highlight, no border, no shadow. Same in all modes.
   ──────────────────────────────────────────────────────────────── */

/* ── LIGHT MODE — light cream/gold hover ── */
#tapx-dash-overlay:not(.dark) .dash-searchable-option:hover,
#tapx-dash-overlay:not(.dark) .dash-searchable-option:focus-visible,
#tapx-dash-overlay:not(.dark) .dash-searchable-option[aria-selected="true"]:hover,
#tapx-dash-overlay:not(.dark) .dash-searchable-option[aria-selected="true"]:focus-visible,
#tapx-dash-overlay:not(.dark) .emirate-combo-option:hover,
#tapx-dash-overlay:not(.dark) .emirate-combo-option:focus-visible,
#tapx-dash-overlay:not(.dark) .doc-modal-combo-option:hover,
#tapx-dash-overlay:not(.dark) .doc-modal-combo-option:focus-visible,
#tapx-dash-overlay:not(.dark) .searchable-select-option:hover,
#tapx-dash-overlay:not(.dark) .searchable-select-option:focus-visible,
#tapx-dash-overlay:not(.dark) .dropdown-item:hover,
#tapx-dash-overlay:not(.dark) .dropdown-item:focus-visible,
#tapx-dash-overlay:not(.dark) .veh-em-dd-option:hover,
#tapx-dash-overlay:not(.dark) .fv-option:hover,
#tapx-dash-overlay:not(.dark) .fv-option.active,
#tapx-dash-overlay:not(.dark) .tapx-dropdown-list li:hover,
#tapx-dash-overlay:not(.dark) [role="option"]:hover,
#tapx-dash-overlay:not(.dark) .dropdown-option:hover,
#tapx-dash-overlay:not(.dark) .select-option:hover,
#tapx-dash-overlay:not(.dark) .listbox-option:hover,
#tapx-dash-overlay:not(.dark) .em-field-wrap .dash-searchable-option:hover,
#tapx-dash-overlay:not(.dark) #fine-form-modal .dash-searchable-option:hover,
#tapx-dash-overlay:not(.dark) #bulk-selection-action-modal .dash-searchable-option:hover,
#tapx-dash-overlay:not(.dark) #entity-modal .emirate-combo-option:hover,
#tapx-dash-overlay:not(.dark) #entity-modal .doc-modal-combo-option:hover,
#tapx-dash-overlay:not(.dark) #fine-vehicle-dropdown .fv-option:hover,
#tapx-dash-overlay:not(.dark) #fine-employee-dropdown .fv-option:hover,
#tapx-dash-overlay:not(.dark) #fine-commercial-dropdown .fv-option:hover,
#tapx-dash-overlay:not(.dark) .fine-check-form-card .searchable-select-option:hover,
#tapx-dash-overlay:not(.dark) .fine-check-form-card .dropdown-item:hover {
    background: #fff7da !important;
    color: #0f172a !important;
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

/* ── DARK MODE — soft gold-tinted hover ── */
#tapx-dash-overlay.dark .dash-searchable-option:hover,
#tapx-dash-overlay.dark .dash-searchable-option:focus-visible,
#tapx-dash-overlay.dark .dash-searchable-option[aria-selected="true"]:hover,
#tapx-dash-overlay.dark .dash-searchable-option[aria-selected="true"]:focus-visible,
#tapx-dash-overlay.dark .emirate-combo-option:hover,
#tapx-dash-overlay.dark .emirate-combo-option:focus-visible,
#tapx-dash-overlay.dark .doc-modal-combo-option:hover,
#tapx-dash-overlay.dark .doc-modal-combo-option:focus-visible,
#tapx-dash-overlay.dark .searchable-select-option:hover,
#tapx-dash-overlay.dark .searchable-select-option:focus-visible,
#tapx-dash-overlay.dark .dropdown-item:hover,
#tapx-dash-overlay.dark .dropdown-item:focus-visible,
#tapx-dash-overlay.dark .veh-em-dd-option:hover,
#tapx-dash-overlay.dark .fv-option:hover,
#tapx-dash-overlay.dark .fv-option.active,
#tapx-dash-overlay.dark .tapx-dropdown-list li:hover,
#tapx-dash-overlay.dark [role="option"]:hover,
#tapx-dash-overlay.dark .dropdown-option:hover,
#tapx-dash-overlay.dark .select-option:hover,
#tapx-dash-overlay.dark .listbox-option:hover,
#tapx-dash-overlay.dark .em-field-wrap .dash-searchable-option:hover,
html.dark .fine-check-form-card .searchable-select-option:hover,
html.dark .fine-check-form-card .dropdown-item:hover {
    background: rgba(255, 215, 0, 0.18) !important;
    color: #FFD700 !important;
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

/* ── Cover landing-page dropdowns too (outside #tapx-dash-overlay) ── */
.fine-check-form-card .searchable-select-option:hover,
.fine-check-form-card .dropdown-item:hover {
    background: #fff7da !important;
    color: #0f172a !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Pre-selected aria-selected value should NOT be highlighted on list open */
#tapx-dash-overlay .dash-searchable-option[aria-selected="true"]:not(:hover):not(:focus-visible),
#tapx-dash-overlay .emirate-combo-option[aria-selected="true"]:not(:hover):not(:focus-visible),
#tapx-dash-overlay .doc-modal-combo-option[aria-selected="true"]:not(:hover):not(:focus-visible),
#tapx-dash-overlay .searchable-select-option[aria-selected="true"]:not(:hover):not(:focus-visible) {
    background: transparent !important;
    box-shadow: none !important;
}

/* Keyboard navigation active state — same cream/gold highlight */
#tapx-dash-overlay:not(.dark) .doc-modal-combo-option.dash-combo-kb-active,
#tapx-dash-overlay:not(.dark) .emirate-dropdown-active {
    background: #fff7da !important;
    color: #0f172a !important;
    box-shadow: none !important;
}
#tapx-dash-overlay.dark .doc-modal-combo-option.dash-combo-kb-active,
#tapx-dash-overlay.dark .emirate-dropdown-active {
    background: rgba(255, 215, 0, 0.18) !important;
    color: #FFD700 !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED DROPDOWN STYLE — Salik Gate template
   ════════════════════════════════════════════════════════════════════
   The "Salik Gate" field dropdown in the Add Toll Crossing modal is
   the design template for ALL dropdowns in the user dashboard. This
   block applies the exact same panel container style and hover
   highlight (`#fef3c7`) across every dropdown class. Single clean
   highlight, soft rounded panel, consistent spacing.
   ════════════════════════════════════════════════════════════════════ */

/* ── PANEL CONTAINER (the dropping list) ── Light mode */
#tapx-dash-overlay:not(.dark) .dash-searchable-panel,
#tapx-dash-overlay:not(.dark) #emirates-combo-popover,
#tapx-dash-overlay:not(.dark) #doc-emirate-combo-popover,
#tapx-dash-overlay:not(.dark) [data-emirate-popover],
#tapx-dash-overlay:not(.dark) #fine-vehicle-dropdown,
#tapx-dash-overlay:not(.dark) #fine-employee-dropdown,
#tapx-dash-overlay:not(.dark) #fine-commercial-dropdown,
#tapx-dash-overlay:not(.dark) .tapx-dropdown-list,
#tapx-dash-overlay:not(.dark) .dash-modal-drop-carpet__inner {
    background: #ffffff !important;
    border: 1.5px solid #c8d2e0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15) !important;
    padding: 6px 0 !important;
    overflow: hidden !important;
}

/* ── PANEL CONTAINER ── Dark mode */
#tapx-dash-overlay.dark .dash-searchable-panel,
#tapx-dash-overlay.dark #emirates-combo-popover,
#tapx-dash-overlay.dark #doc-emirate-combo-popover,
#tapx-dash-overlay.dark [data-emirate-popover],
#tapx-dash-overlay.dark #fine-vehicle-dropdown,
#tapx-dash-overlay.dark #fine-employee-dropdown,
#tapx-dash-overlay.dark #fine-commercial-dropdown,
#tapx-dash-overlay.dark .tapx-dropdown-list,
#tapx-dash-overlay.dark .dash-modal-drop-carpet__inner {
    background: #181818 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 6px 0 !important;
}

/* ── LIST WRAPPER ── */
#tapx-dash-overlay .dash-searchable-list {
    max-height: 220px !important;
    overflow-y: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* ── INDIVIDUAL OPTION ── Light mode — base appearance */
#tapx-dash-overlay:not(.dark) .dash-searchable-option,
#tapx-dash-overlay:not(.dark) .dash-searchable-list li,
#tapx-dash-overlay:not(.dark) .dash-searchable-list button,
#tapx-dash-overlay:not(.dark) .emirate-combo-option,
#tapx-dash-overlay:not(.dark) .doc-modal-combo-option,
#tapx-dash-overlay:not(.dark) .searchable-select-option,
#tapx-dash-overlay:not(.dark) .fv-option,
#tapx-dash-overlay:not(.dark) .tapx-dropdown-list li {
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    margin: 2px 6px !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background 0.12s ease !important;
}

/* ── INDIVIDUAL OPTION ── Dark mode — base appearance */
#tapx-dash-overlay.dark .dash-searchable-option,
#tapx-dash-overlay.dark .dash-searchable-list li,
#tapx-dash-overlay.dark .dash-searchable-list button,
#tapx-dash-overlay.dark .emirate-combo-option,
#tapx-dash-overlay.dark .doc-modal-combo-option,
#tapx-dash-overlay.dark .searchable-select-option,
#tapx-dash-overlay.dark .fv-option,
#tapx-dash-overlay.dark .tapx-dropdown-list li {
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #f3f4f6 !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    margin: 2px 6px !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background 0.12s ease !important;
}

/* ── OPTION HOVER ── Light mode (EXACT Salik Gate color #fef3c7) */
#tapx-dash-overlay:not(.dark) .dash-searchable-option:hover,
#tapx-dash-overlay:not(.dark) .dash-searchable-option:focus-visible,
#tapx-dash-overlay:not(.dark) .dash-searchable-option.dash-combo-kb-active,
#tapx-dash-overlay:not(.dark) .dash-searchable-list li:hover,
#tapx-dash-overlay:not(.dark) .dash-searchable-list li:focus-visible,
#tapx-dash-overlay:not(.dark) .dash-searchable-list button:hover,
#tapx-dash-overlay:not(.dark) .emirate-combo-option:hover,
#tapx-dash-overlay:not(.dark) .emirate-combo-option:focus-visible,
#tapx-dash-overlay:not(.dark) .emirate-combo-option.emirate-dropdown-active,
#tapx-dash-overlay:not(.dark) .doc-modal-combo-option:hover,
#tapx-dash-overlay:not(.dark) .doc-modal-combo-option:focus-visible,
#tapx-dash-overlay:not(.dark) .doc-modal-combo-option.dash-combo-kb-active,
#tapx-dash-overlay:not(.dark) .searchable-select-option:hover,
#tapx-dash-overlay:not(.dark) .searchable-select-option:focus-visible,
#tapx-dash-overlay:not(.dark) .fv-option:hover,
#tapx-dash-overlay:not(.dark) .fv-option.active,
#tapx-dash-overlay:not(.dark) .tapx-dropdown-list li:hover,
#tapx-dash-overlay:not(.dark) #emirates-combo-options .emirate-dropdown-active,
#tapx-dash-overlay:not(.dark) #doc-emirate-combo-options .emirate-dropdown-active,
#tapx-dash-overlay:not(.dark) #vehicle-plate-emirate-options .emirate-dropdown-active,
#tapx-dash-overlay:not(.dark) #emp-filter-emirate-options .emirate-dropdown-active,
#tapx-dash-overlay:not(.dark) [data-emirate-popover] li:hover,
#tapx-dash-overlay:not(.dark) [data-emirate-popover] button:hover {
    background: #fef3c7 !important;
    color: #0f172a !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* ── OPTION HOVER ── Dark mode (gold tint matching) */
#tapx-dash-overlay.dark .dash-searchable-option:hover,
#tapx-dash-overlay.dark .dash-searchable-option:focus-visible,
#tapx-dash-overlay.dark .dash-searchable-option.dash-combo-kb-active,
#tapx-dash-overlay.dark .dash-searchable-list li:hover,
#tapx-dash-overlay.dark .dash-searchable-list button:hover,
#tapx-dash-overlay.dark .emirate-combo-option:hover,
#tapx-dash-overlay.dark .emirate-combo-option.emirate-dropdown-active,
#tapx-dash-overlay.dark .doc-modal-combo-option:hover,
#tapx-dash-overlay.dark .doc-modal-combo-option.dash-combo-kb-active,
#tapx-dash-overlay.dark .searchable-select-option:hover,
#tapx-dash-overlay.dark .fv-option:hover,
#tapx-dash-overlay.dark .fv-option.active,
#tapx-dash-overlay.dark .tapx-dropdown-list li:hover,
#tapx-dash-overlay.dark [data-emirate-popover] li:hover,
#tapx-dash-overlay.dark [data-emirate-popover] button:hover {
    background: rgba(254, 243, 199, 0.18) !important;
    color: #fde68a !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* ── SELECTED STATE (aria-selected) ── No pre-highlight on open */
#tapx-dash-overlay .dash-searchable-option[aria-selected="true"]:not(:hover):not(:focus-visible),
#tapx-dash-overlay .dash-searchable-list li[aria-selected="true"]:not(:hover):not(:focus-visible),
#tapx-dash-overlay .emirate-combo-option[aria-selected="true"]:not(:hover):not(:focus-visible),
#tapx-dash-overlay .doc-modal-combo-option[aria-selected="true"]:not(:hover):not(:focus-visible) {
    background: transparent !important;
    box-shadow: none !important;
}

/* When user hovers a selected option, it still gets the cream highlight */
#tapx-dash-overlay:not(.dark) .dash-searchable-option[aria-selected="true"]:hover,
#tapx-dash-overlay:not(.dark) .dash-searchable-list li[aria-selected="true"]:hover {
    background: #fef3c7 !important;
}
#tapx-dash-overlay.dark .dash-searchable-option[aria-selected="true"]:hover,
#tapx-dash-overlay.dark .dash-searchable-list li[aria-selected="true"]:hover {
    background: rgba(254, 243, 199, 0.18) !important;
}

/* ════════════════════════════════════════════════════════════════════
   UAE VEHICLE PLATE BADGE — EXACT design from plate-badges.html
   ════════════════════════════════════════════════════════════════════
   New compact 10.5rem × 2.4rem plate badge with colored emirate
   strip + white card showing emirate wordmark (top) / category
   (bottom) on left, plate number on right.
   ════════════════════════════════════════════════════════════════════ */
.vehicle-plate-badge {
    display: inline-flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
    width: 11.5rem !important;
    min-width: 11.5rem !important;
    height: 3rem !important;
    border-radius: 5px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
.vehicle-plate-badge .vpb-strip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.35rem !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
}
/* Defensive override: lock strip text to white against any theme/parent color inheritance */
#tapx-dash-overlay .vehicle-plate-badge .vpb-strip,
#tapx-dash-overlay.dark .vehicle-plate-badge .vpb-strip,
#tapx-dash-overlay:not(.dark) .vehicle-plate-badge .vpb-strip,
.vehicle-plate-badge[class*="vpb-strip"] .vpb-strip,
body .vehicle-plate-badge .vpb-strip {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
.vehicle-plate-badge .vpb-strip-abu-dhabi,
.vehicle-plate-badge .vpb-strip-al-ain     { background: #dc2626; color: #fff; }
.vehicle-plate-badge .vpb-strip-dubai      { background: #16a34a; color: #fff; }
.vehicle-plate-badge .vpb-strip-sharjah    { background: #92400e; color: #fff; }
.vehicle-plate-badge .vpb-strip-ajman      { background: #2563eb; color: #fff; }
.vehicle-plate-badge .vpb-strip-ras-al-khaimah { background: #0a0a0a; color: #fff; }
.vehicle-plate-badge .vpb-strip-fujairah   { background: #facc15; color: #fff; }
.vehicle-plate-badge .vpb-strip-umm-al-quwain  { background: #f97316; color: #fff; }
.vehicle-plate-badge .vpb-strip-emirates   { background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); color: #fcd34d; }
.vehicle-plate-badge .vpb-strip-default    { background: #475569; color: #fff; }
.vehicle-plate-badge .vpb-card {
    display: flex;
    flex: 1;
    min-width: 0;
    background: #fff;
    color: #0f172a;
    align-items: stretch;
}
.vehicle-plate-badge .vpb-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1.2;
    min-width: 0;
    padding: 3px 4px;
    text-align: center;
    overflow: hidden;
    gap: 2px;
}
.vehicle-plate-badge .vpb-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 3.8rem;
    padding: 2px 6px;
}
.vehicle-plate-badge .vpb-em-wm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 1.65rem;
    overflow: visible;
    gap: 0;
}
.vehicle-plate-badge .vpb-em-wm img {
    display: block;
    max-height: 1.6rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* Smooth rendering for HD logos with cursive/thin strokes (Abu Dhabi etc.) */
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: smooth;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.vehicle-plate-badge .vpb-em-wm--sharjah img {
    transform: scale(1.18) scaleX(1.08);
    transform-origin: center center;
}
.vehicle-plate-badge .vpb-em-wm--rak img {
    max-height: 1.55rem;
    width: auto;
    display: block;
}
.vehicle-plate-badge .vpb-num {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}
.vehicle-plate-badge .vpb-cat {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.15;
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS — added per user request
   ────────────────────────────────────────────────────────────────────
   Focuses on the biggest paint/composite costs:
   1. Heavy CSS blur filters (80px → 35px is ~5x cheaper)
   2. Infinite animations on off-screen sections
   3. Content-visibility for sections far from viewport
   4. CSS containment to isolate paint work
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Reduce expensive blur on sanctuary orbs (was 80px filter) ── */
.sanctuary-backdrop__orb {
    filter: blur(35px) !important;
    will-change: auto !important;
}

/* ── 2. Skip rendering off-screen sections entirely ── */
section[id]:not(#hero):not(#quick-action-hub):not(#fine-check-hub),
[data-section-defer="true"] {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* ── 3. Containment hints for heavy sections ── */
#sanctuary-backdrop {
    contain: strict;
    will-change: auto;
}
#hero.hero-landing-ambient {
    contain: layout style paint;
}
#hero.hero-landing-ambient::before,
#hero.hero-landing-ambient::after {
    will-change: auto;
}

/* ── 4. Respect prefers-reduced-motion globally ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ── 5. Pause backdrop animations when hero is scrolled past ── */
body.tapx-perf-hero-out .sanctuary-backdrop__aurora,
body.tapx-perf-hero-out .sanctuary-backdrop__beams,
body.tapx-perf-hero-out .sanctuary-backdrop__sheen,
body.tapx-perf-hero-out .sanctuary-backdrop__gradient-flow,
body.tapx-perf-hero-out .sanctuary-backdrop__cursor-glow,
body.tapx-perf-hero-out .sanctuary-backdrop__orb,
body.tapx-perf-hero-out #hero.hero-landing-ambient::before,
body.tapx-perf-hero-out #hero.hero-landing-ambient::after {
    animation-play-state: paused !important;
}

/* ── 6. Reduce composite layers on rarely-changing elements ── */
.glass-panel,
.vinyl-texture {
    contain: layout style;
}


/* ═══════════════════════════════════════════════════════════════════
   QA Service Flip — Real Dashboard Screenshots (large)
   Per user request — show actual UAE Ops + Partner Suite screenshots
   ═══════════════════════════════════════════════════════════════════ */

/* Eyebrow + title styling */
/* Clean screenshot display for service flip slides */
.qa-flip-shot .qa-service-flip__eyebrow,
.qa-flip-shot .qa-service-flip__title,
.qa-flip-shot .qa-service-flip__icon-wrap,
.qa-flip-shot .qa-service-flip__list,
.qa-flip-shot .qa-service-flip__lead,
.qa-flip-shot .qa-service-flip__cta {
    display: none !important;
}
.qa-shot-clean {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    /* Force browser's HIGHEST quality image scaling */
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}
html.dark .qa-shot-clean {
    background: #0b1220;
    border-color: rgba(255, 255, 255, 0.12);
}
.qa-shot-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    /* Force browser's HIGHEST quality interpolation */
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}
/* Bigger display size for the slides — use aspect-ratio to size viewport correctly */
#qa-service-flip-root.qa-service-flip {
    width: 100% !important;
    max-width: 100% !important;
}
#fine-check-hub .qa-service-flip__viewport,
#quick-action-hub .qa-service-flip__viewport {
    /* Match image aspect ratio (2400/1585 = 1.514) so viewport sizes properly */
    aspect-ratio: 1882 / 1243;
    min-height: 0 !important;
}
#fine-check-hub .qa-service-flip__stack,
#quick-action-hub .qa-service-flip__stack {
    height: 100%;
    min-height: 100%;
}
#fine-check-hub .qa-service-flip__panel.qa-flip-shot,
#quick-action-hub .qa-service-flip__panel.qa-flip-shot {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: stretch !important;
}
.qa-flip-shot .qa-shot-clean {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
}
.qa-flip-shot .qa-shot-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}
#fine-check-hub .qa-service-flip__panel.qa-flip-shot,
#quick-action-hub .qa-service-flip__panel.qa-flip-shot {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.qa-flip-shot:hover .qa-shot-clean {
    transform: translateY(-3px);
}


.tapx-tri-loader{ width:28px; aspect-ratio:1; border-radius:50%; background:#E3AAD6; transform-origin:top; display:grid; animation:tapx-l3-0 1s infinite linear; }
.tapx-tri-loader::before,.tapx-tri-loader::after{ content:""; grid-area:1/1; background:#F4DD51; border-radius:50%; transform-origin:top; animation:inherit; animation-name:tapx-l3-1; }
.tapx-tri-loader::after{ background:#F10C49; --s:180deg; }
@keyframes tapx-l3-0{ 0%,20%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes tapx-l3-1{ 50%{transform:rotate(var(--s,90deg))} 100%{transform:rotate(0)} }
#tapx-splash.tapx-splash-hide{ opacity:0; visibility:hidden; pointer-events:none; }


@keyframes tapxProfDropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
#tapx-profile-dropdown-menu.is-open{display:block !important;}
.tapx-fly-parent:hover > .tapx-fly-menu,
.tapx-fly-parent:focus-within > .tapx-fly-menu{display:block !important;animation:tapxProfDropIn .16s ease-out;}


    /* Hero CTA row — three actions in a divider-separated row (LIVE | WORK | THRIVE style) */
    .hero-cta-row { margin-top: 0.25rem; }
    .hero-cta-link {
        font-family: var(--font-headline, 'Plus Jakarta Sans', sans-serif);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        font-size: clamp(0.52rem, 2vw, 1.25rem);
        color: #0f172a;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        transition: color .18s ease, transform .18s ease, text-shadow .18s ease;
    }
    html.dark .hero-cta-link { color: #e2e8f0; }
    .hero-cta-link { position: relative; display: inline-block; }
    .hero-cta-link:hover,
    .hero-cta-link:focus-visible {
        color: #b8860b;
        text-shadow: 0 2px 18px rgba(255,215,0,0.45);
        transform: translateY(-2px) scale(1.18);
        outline: none;
    }
    html.dark .hero-cta-link:hover,
    html.dark .hero-cta-link:focus-visible { color: #FFD700; }
    /* Small popup tooltip on hover/focus */
    .hero-cta-link[data-tip]::after {
        content: attr(data-tip);
        position: absolute; left: 50%; bottom: calc(100% + 10px);
        transform: translateX(-50%) translateY(6px) scale(0.96);
        background: #0f172a; color: #fff; font-size: 10.5px; font-weight: 700;
        letter-spacing: 0.02em; text-transform: none; white-space: nowrap;
        padding: 6px 10px; border-radius: 8px; box-shadow: 0 8px 22px rgba(15,23,42,0.30);
        opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 60;
    }
    .hero-cta-link[data-tip]::before {
        content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px);
        transform: translateX(-50%) translateY(6px);
        border: 5px solid transparent; border-top-color: #0f172a;
        opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 60;
    }
    .hero-cta-link[data-tip]:hover::after,
    .hero-cta-link[data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    .hero-cta-link[data-tip]:hover::before,
    .hero-cta-link[data-tip]:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
    html.dark .hero-cta-link[data-tip]::after { background:#1e293b; }
    html.dark .hero-cta-link[data-tip]::before { border-top-color:#1e293b; }
    .hero-cta-sep {
        display: inline-block;
        width: 1.5px;
        height: 1.35em;
        background: rgba(15,23,42,0.28);
        border-radius: 2px;
        margin: 0 0.55rem;
    }
    html.dark .hero-cta-sep { background: rgba(255,255,255,0.28); }
    /* ── Per-CTA brand colors + larger size (user spec) ──
       Choose Plan = green, Become Partner = white, Quick Action = red.
       Bigger than base. White needs a subtle outline/shadow to stay legible
       on the light landing background. Light-mode colors take priority over
       the generic dark rule via these explicit classes. */
    .hero-cta-link { font-size: clamp(1rem, 3.4vw, 2.15rem); font-weight: 900; letter-spacing: 0.06em; }
    .hero-cta-sep { font-size: clamp(0.9rem, 3vw, 1.8rem); }
    .hero-cta-link.cta-choose  { color:#16a34a !important; }
    .hero-cta-link.cta-partner { color:#000000 !important; text-shadow:none; }
    .hero-cta-link.cta-quick   { color:#dc2626 !important; }
    html.dark .hero-cta-link.cta-choose  { color:#22c55e !important; }
    html.dark .hero-cta-link.cta-partner { color:#000000 !important; text-shadow:none; }
    html.dark .hero-cta-link.cta-quick   { color:#f87171 !important; }


@keyframes tapxSlideIn {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}

@media (min-width:1024px){ .qa-char-left{ display:flex !important; } }

@keyframes tapxLivePulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  50%  { transform: scale(2.5); opacity: 0;    }
  100% { transform: scale(2.5); opacity: 0;    }
}
.tapx-live-counter {
  text-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: text-shadow 0.3s ease;
}
.group:hover .tapx-live-counter {
  text-shadow: 0 4px 12px rgba(255,215,0,0.25);
}
.tapx-live-stats-strip {
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease;
}
.tapx-live-stats-strip:hover {
  transform: translateY(-2px);
}


/* Force each partner tier button's colour by its OWN card's tier, with
   !important, so the colour can never be swapped or overridden. Gold card → gold
   button, Silver card → silver button, etc. Additive — no function touched. */
#tapx-partner-tiers [data-partner-tier="bronze"]   button[data-tier-quote-open]{background:linear-gradient(135deg,#cd7f32 0%,#8b4513 100%)!important;color:#000!important;}
#tapx-partner-tiers [data-partner-tier="silver"]   button[data-tier-quote-open]{background:linear-gradient(135deg,#e8e8e8 0%,#8a8a8a 100%)!important;color:#1e293b!important;}
#tapx-partner-tiers [data-partner-tier="gold"]     button[data-tier-quote-open]{background:linear-gradient(135deg,#FFD700 0%,#b8860b 100%)!important;color:#000!important;}
#tapx-partner-tiers [data-partner-tier]{border-color:rgba(148,163,184,0.22)!important;}
#tapx-partner-tiers [data-partner-tier="silver"] h3{color:#000!important;-webkit-text-fill-color:#000!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;text-shadow:none!important;filter:none!important;}
#tapx-partner-tiers [data-partner-tier="platinum"] button[data-tier-quote-open]{background:linear-gradient(135deg,#e5e4e2 0%,#a8b4c0 50%,#5d738f 100%)!important;color:#0f172a!important;}
#tapx-partner-tiers [data-partner-tier="diamond"]  button[data-tapx-diamond-quote]{background:linear-gradient(135deg,#bae6fd 0%,#7dd3fc 50%,#0ea5e9 100%)!important;color:#0f172a!important;}


  #tapx-control-panel-cards .tapx-cp-card:hover{ transform:translateY(-4px); box-shadow:0 22px 50px rgba(0,0,0,.30); }
  html:not(.dark) #tapx-control-panel-cards .tapx-cp-card{ background:#fff !important; border-color:rgba(15,23,42,.08) !important; box-shadow:0 6px 22px rgba(15,23,42,.06); }
  html:not(.dark) #tapx-control-panel-cards .tapx-cp-card p{ color:#64748b; }
  html:not(.dark) #tapx-control-panel-cards .tapx-cp-card h3{ color:#0f172a; }
  #tapx-control-panel-cards .tapx-cp-card h3{ color:#fff; }
  #tapx-control-panel-cards .tapx-cp-card p{ color:#94a3b8; }


/* ── Complaint & Suggestion form styling ── */
.cs-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 0.5rem;
  border-radius: 0.85rem;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(71 85 105);
  background: rgba(255,255,255,0.55);
  border: 1.5px solid rgba(148,163,184,0.30);
  transition: all 0.22s cubic-bezier(.22,1,.36,1);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  line-height: 1.1;
}
.dark .cs-type-pill {
  color: rgb(203 213 225);
  background: rgba(255,255,255,0.04);
  border-color: rgba(148,163,184,0.20);
}
.cs-type-pill:hover {
  border-color: rgba(255,215,0,0.45);
  background: rgba(255,215,0,0.06);
  transform: translateY(-1px);
}
.cs-type-pill.cs-active {
  color: #0f0a00;
  background: linear-gradient(135deg,#FFD700 0%,#b8860b 100%);
  border-color: rgba(255,215,0,0.70);
  box-shadow: 0 8px 22px rgba(255,215,0,0.35), inset 0 1px 0 rgba(255,255,255,0.30);
  transform: translateY(-1px);
}
.cs-type-pill .material-symbols-outlined {
  font-variation-settings: 'wght' 500;
}
#cs-char-count.cs-warn { color: #f59e0b; }
#cs-char-count.cs-danger { color: #ef4444; }
@media (max-width: 380px) {
  .cs-type-pill {
    padding: 0.55rem 0.35rem;
    font-size: 10px;
  }
  .cs-type-pill .material-symbols-outlined { display: none; }
}


@keyframes tapxPopIn{
  from{opacity:0;transform:scale(.85) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes tapxSpin{ to{transform:rotate(360deg)} }


@keyframes tapxGlowPulse{
  0%,100%{box-shadow:0 0 30px rgba(255,215,0,.1)}
  50%{box-shadow:0 0 50px rgba(255,215,0,.22)}
}

/* ── Exempt payment popups from blink-kill ── */
#tapx-popup-1 *,
#tapx-popup-2 * {
    animation-iteration-count: unset !important;
    animation-name: unset !important;
    animation-duration: unset !important;
}

/* ═══════════════════════════════════════════════════
   NUCLEAR BLINK KILL v2 — Remove ALL infinite animations
   inside dashboard overlay completely
   ═══════════════════════════════════════════════════ */
#tapx-dash-overlay *,
#tapx-dash-overlay *::before,
#tapx-dash-overlay *::after {
    animation-iteration-count: 1 !important;
}

/* Specifically kill all known infinite animations */
#tapx-dash-overlay .tapx-logo-pulse,
#tapx-dash-overlay [class*="pulse"]:not(button):not(a),
#tapx-dash-overlay [class*="blink"],
#tapx-dash-overlay [class*="glow"]:not(button),
#tapx-dash-overlay [class*="ping"],
#tapx-dash-overlay [class*="spin"]:not(.tapx-pay-now-popping),
#tapx-dash-overlay [class*="bounce"],
#tapx-dash-overlay [class*="float"] {
    animation: none !important;
}

/* Kill ALL remaining infinite/blinking animations in dashboard */
#tapx-dash-overlay .animate-pulse,
#tapx-dash-overlay .animate-ping,
#tapx-dash-overlay .animate-spin,
#tapx-dash-overlay .animate-bounce {
    animation: none !important;
}

/* Kill cursor blink, whatsapp ping, eyebrow bob, audit scroll, search liquid, orb drift */
#tapx-dash-overlay * {
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
}

/* Re-allow only essential one-shot transitions (not infinite loops) */
#tapx-dash-overlay .tapx-pane-transition,
#tapx-dash-overlay [class*="dashCardFadeIn"] {
    animation-name: dashCardFadeIn !important;
    animation-duration: 0.2s !important;
    animation-iteration-count: 1 !important;
}

/* Kill all filter-based animations */
#tapx-dash-overlay * {
    filter: none !important;
}

/* ── Kill blinking in ALL dashboard modals (outside tapx-dash-overlay) ── */
#entity-modal *,
#entity-modal *::before,
#entity-modal *::after,
#fine-form-modal *,
#fine-form-modal *::before,
#fine-form-modal *::after,
#dash-profile-edit-modal *,
#dash-current-company-modal *,
#dash-add-company-modal *,
#document-detail-modal *,
#bulk-doc-link-modal *,
#bulk-selection-action-modal *,
#module-stat-drawer *,
#employee-detail-modal *,
#vehicle-detail-modal *,
#emp-service-request-modal *,
#veh-service-request-modal *,
#bulk-employee-import-modal * {
    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
}

/* Re-allow safe hover effects */
#tapx-dash-overlay button:hover,
#tapx-dash-overlay a:hover,
#tapx-dash-overlay .dash-card:hover {
    filter: brightness(1.05) !important;
}

/* Ensure dashCardFadeIn @keyframes is available */
@keyframes dashCardFadeIn {
    from { opacity: 0.7; transform: translateY(4px); }
    to   { opacity: 1;   transform: translateY(0); }
}



/* Sidebar nav links — white in dark mode */
#tapx-dash-overlay.dark #dash-nav .nav-link {
    color: #ffffff !important;
}
#tapx-dash-overlay.dark #dash-nav .nav-link:hover {
    color: #ffffff !important;
}

/* Section headings — white in dark mode */
#tapx-dash-overlay.dark #panel-employees h2,
#tapx-dash-overlay.dark #panel-vehicles h2,
#tapx-dash-overlay.dark #panel-commercial h2,
#tapx-dash-overlay.dark #panel-documents h2,
#tapx-dash-overlay.dark #panel-requests h2,
#tapx-dash-overlay.dark #panel-fines h2,
#tapx-dash-overlay.dark #panel-password h2,
#tapx-dash-overlay.dark #panel-fines-title,
#tapx-dash-overlay.dark #panel-password-title,
#tapx-dash-overlay.dark #panel-requests-title {
    color: #ffffff !important;
}

/* Your Savings & Risk Overview */
#tapx-dash-overlay.dark .text-accent-blue {
    color: #ffffff !important;
}

/* Force white on Savings heading in all modes */
#dash-overview .dash-card h2 {
    color: #ffffff !important;
}

/* Analytics Snapshot, 1TapX Advisor, Incoming Requests, Fines & Penalties, Password Vault — all section titles */
#tapx-dash-overlay.dark h2.font-black,
#tapx-dash-overlay.dark h3.font-bold {
    color: #ffffff !important;
}


/* User dashboard: just make the overlay root transparent so the canvas behind it shows through.
   Do not touch z-index / position of anything else — starfield is already z-index:0. */
#tapx-dash-overlay {
  background: transparent !important;
}


.tapx-sf-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 1400px 900px at 50% 0%,  #1e293b 0%, transparent 55%),
    radial-gradient(ellipse 1000px 700px at 10% 100%, #0f172a 0%, transparent 60%),
    radial-gradient(ellipse 1200px 800px at 90% 80%, #0f172a 0%, transparent 60%),
    linear-gradient(180deg, #020617 0%, #0f172a 50%, #020617 100%);
}
/* Vignette */
.tapx-sf-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 45%, rgba(2,6,23,0.65) 100%);
  pointer-events: none;
  z-index: 6;
}

.tapx-sf-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  will-change: transform;
}

/* ═ Fog / cloud layers ═ */
.tapx-sf-fog {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 80vh;
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: screen;
}
.tapx-sf-fog.far {
  top: 40vh;
  background:
    radial-gradient(ellipse 900px 500px at 30% 40%, rgba(99,102,241,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 700px 400px at 70% 60%, rgba(56,189,248,0.06) 0%, transparent 70%);
  filter: blur(60px);
  opacity: 0.7;
  animation: tapxFogFar 90s linear infinite;
  z-index: 1;
}
.tapx-sf-fog.mid {
  top: 70vh;
  background:
    radial-gradient(ellipse 600px 400px at 50% 50%, rgba(139,92,246,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 500px 350px at 20% 70%, rgba(232,176,79,0.06) 0%, transparent 70%);
  filter: blur(45px);
  opacity: 0.8;
  animation: tapxFogMid 65s linear infinite;
  z-index: 3;
}
.tapx-sf-fog.near {
  top: 100vh;
  background:
    radial-gradient(ellipse 500px 300px at 40% 50%, rgba(168,85,247,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 400px 280px at 70% 40%, rgba(59,130,246,0.09) 0%, transparent 70%);
  filter: blur(30px);
  opacity: 0.9;
  animation: tapxFogNear 45s linear infinite;
  z-index: 4;
}
@keyframes tapxFogFar  { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-40px, -180vh, 0); } }
@keyframes tapxFogMid  { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d( 30px, -180vh, 0); } }
@keyframes tapxFogNear { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-20px, -180vh, 0); } }

/* Shooting-star layer */
.tapx-sf-shoot-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.tapx-sf-shoot {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,1), 0 0 14px rgba(232,176,79,0.55);
  opacity: 0;
  will-change: transform, opacity;
}
.tapx-sf-shoot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), transparent);
  transform: translateY(-50%) rotate(28deg);
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .tapx-sf-fog { animation: none; }
}

' +
                          'body{font-family:Arial,sans-serif;margin:24px;color:#0f172a;}' +
                          'h1{margin:0 0 4px;font-size:18px;color:#0f172a;}' +
                          '.meta{font-size:12px;color:#475569;margin-bottom:18px;}' +
                          '.meta span{margin-right:14px;}' +
                          '.meta .paid{color:#059669;font-weight:700;}' +
                          '.meta .unpaid{color:#dc2626;font-weight:700;}' +
                          'table{width:100%;border-collapse:collapse;font-size:11px;}' +
                          'th,td{border:1px solid #cbd5e1;padding:7px 9px;text-align:left;}' +
                          'th{background:#0f172a;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;font-size:10px;}' +
                          'tbody tr:nth-child(even){background:#f8fafc;}' +
                          '.footer{margin-top:20px;font-size:10px;color:#94a3b8;text-align:right;}' +
                          '@media print{button{display:none !important;} body{margin:12mm;}}' +
                        '

/* ─── Bulletproof toggle for Add Document form ───
   Self-contained CSS, does NOT depend on Tailwind peer/sr-only.
   - Native checkbox is fully invisible (opacity:0) AND covers the
     whole switch (cursor target), so no checkbox shows behind.
   - Thumb is positioned with margins so it can NEVER overflow
     the track, even in browsers that override Tailwind.
*/
.tapx-doc-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
}
.tapx-doc-switch input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
}
.tapx-doc-switch__track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3f3f46;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 0;
}
.tapx-doc-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 9999px;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 1;
}
.tapx-doc-switch input[type="checkbox"]:checked ~ .tapx-doc-switch__track {
    background: #10b981;
}
.tapx-doc-switch input[type="checkbox"]:checked ~ .tapx-doc-switch__thumb {
    /* 40 (track) − 3 (left) − 16 (thumb) − 3 (right) = 18px max */
    transform: translateX(18px);
}
.tapx-doc-switch input[type="checkbox"]:focus-visible ~ .tapx-doc-switch__track {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}


/* ─── Entity Modal: scrollable form with sticky header + sticky footer ─── */
#entity-modal {
    align-items: flex-start !important;
    justify-content: center !important;
}
#entity-modal:not(.hidden) {
    display: flex !important;
}
#entity-modal.hidden {
    display: none !important;
}
#entity-modal-panel {
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
    /* Ensure stable scrolling */
    scrollbar-gutter: stable;
}
/* Sticky header — stays at top while scrolling */
#entity-modal-panel > div.sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
}
/* Action row scrolls naturally with form content — appears at the bottom
   after all fields, including the Block & Penalty section when toggled on. */
#entity-modal .entity-modal-actions-row {
    padding-top: 1rem !important;
    margin-top: 0.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
#tapx-dash-overlay:not(.dark) #entity-modal .entity-modal-actions-row {
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}
/* Add bottom padding to form so the last button isn't flush with edge */
#entity-modal-panel .entity-modal-form {
    padding-bottom: 1rem !important;
}
/* Form children — overflow visible so popovers (emirate dropdown) work */
#entity-modal .entity-modal-form {
    overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL FIX — make sure the modal panel scrolls when the form
   grows (e.g. when Block & Penalty toggle expands extra fields).
   The panel itself owns the scrollbar; the inner form is just
   tall. We use a flex column layout so the header is always
   pinned at top, and the p-5 wrapper carries the scrollable
   content area.
═══════════════════════════════════════════════════════════════ */
#entity-modal-panel {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 2rem) !important;
    /* Outer panel does NOT scroll — inner content area does */
    overflow: hidden !important;
}
#entity-modal-panel > div.sticky {
    flex-shrink: 0 !important;
    position: relative !important; /* not sticky any more — it's the flex header */
    top: auto !important;
}
#entity-modal-panel > div.p-5 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable !important;
}


.acd-label { display:block; font-size:11px; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.acd-input { width:100%; padding:10px 12px; border:1.5px solid rgba(15,23,42,0.12); border-radius:10px; background:#ffffff; color:#0f172a; font-size:13px; font-weight:500; line-height:1.4; outline:none; transition:all 0.18s cubic-bezier(0.4,0,0.2,1); font-family:inherit; box-sizing:border-box; }
.acd-input:hover { border-color:rgba(99,102,241,0.4); background:#f8fafc; }
.acd-input:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,0.18); background:#ffffff; }
textarea.acd-input { min-height:60px; resize:vertical; }
select.acd-input { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px 14px; padding-right:38px; cursor:pointer; }
.acd-tab-btn { background:transparent; color:#64748b; transition:all 0.15s ease; }
.acd-tab-btn--active { background:#ffffff !important; color:#0369a1 !important; border:1px solid rgba(14,165,233,0.25); box-shadow:0 1px 2px rgba(15,23,42,0.04); }
.acd-tab-btn:hover:not(.acd-tab-btn--active) { background:rgba(15,23,42,0.04); color:#0f172a; }
.acd-upload-tile { border:2px dashed rgba(15,23,42,0.15); border-radius:12px; padding:14px; background:#f8fafc; transition:all 0.2s ease; cursor:pointer; position:relative; display:block; }
.acd-upload-tile:hover { border-color:#0ea5e9; background:#f0f9ff; }
.acd-upload-tile.has-file { border-color:#10b981; background:#f0fdf4; border-style:solid; }
.acd-upload-tile-label { font-size:11px; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; display:block; }
.acd-upload-tile-meta { font-size:10px; color:#64748b; margin-top:6px; display:block; }
.acd-upload-tile input[type=file] { display:none; }

#bulk-emp-file-input::file-selector-button{background:rgba(14,165,233,0.12);color:#0369a1;}#bulk-emp-file-input::file-selector-button:hover{background:rgba(14,165,233,0.20);}#bulk-emp-file-input::-webkit-file-upload-button{background:rgba(14,165,233,0.12);color:#0369a1;}
#bulk-wps-file-input::file-selector-button{background:rgba(14,165,233,0.12);color:#0369a1;}#bulk-wps-file-input::file-selector-button:hover{background:rgba(14,165,233,0.20);}#bulk-wps-file-input::-webkit-file-upload-button{background:rgba(14,165,233,0.12);color:#0369a1;}
#bulk-veh-file-input::file-selector-button{background:rgba(14,165,233,0.12);color:#0369a1;}#bulk-veh-file-input::file-selector-button:hover{background:rgba(14,165,233,0.20);}#bulk-veh-file-input::-webkit-file-upload-button{background:rgba(14,165,233,0.12);color:#0369a1;}
#bulk-doc-file-input::file-selector-button{background:rgba(14,165,233,0.12);color:#0369a1;}#bulk-doc-file-input::file-selector-button:hover{background:rgba(14,165,233,0.20);}#bulk-doc-file-input::-webkit-file-upload-button{background:rgba(14,165,233,0.12);color:#0369a1;}
#bulk-fine-file::file-selector-button{background:rgba(14,165,233,0.12);color:#0369a1;}#bulk-fine-file::file-selector-button:hover{background:rgba(14,165,233,0.20);}#bulk-fine-file::-webkit-file-upload-button{background:rgba(14,165,233,0.12);color:#0369a1;}

/* When the tab is hidden, freeze every CSS animation + transition.
   Saves significant GPU work for users with multiple tabs open. */
html.tapx-tab-hidden *,
html.tapx-tab-hidden *::before,
html.tapx-tab-hidden *::after {
    animation-play-state: paused !important;
}

/* Off-screen sections (marked by IntersectionObserver below) freeze
   their decorative animations. Content stays visible & functional —
   only the looping background animations stop. */
.tapx-off-screen,
.tapx-off-screen *,
.tapx-off-screen *::before,
.tapx-off-screen *::after {
    animation-play-state: paused !important;
}

/* Low-power devices (≤4 logical cores OR explicit data-saver hint):
   strip the most expensive effects so scroll + interactions stay 60fps. */
html.tapx-low-power [class*="backdrop-blur"],
html.tapx-low-power [style*="backdrop-filter"],
html.tapx-low-power [style*="-webkit-backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.tapx-low-power .tapx-bg-orb,
html.tapx-low-power .sanctuary-orb,
html.tapx-low-power [class*="float-"][class*="anim"],
html.tapx-low-power [class*="ambient-glow"] {
    animation: none !important;
    filter: blur(40px) !important;  /* lighter blur instead of full GPU pass */
}
html.tapx-low-power .tapx-bg-sparkles,
html.tapx-low-power .tapx-bg-grid {
    display: none !important;
}

/* User has set OS-level "Reduce motion" — kill every decorative loop
   but keep functional transitions (button hover etc.) instant. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
        scroll-behavior: auto !important;
    }
}

/* Keep only the essentials promoted to compositor — too many will-change
   layers actually HURT performance because they each get their own GPU
   layer. Strip will-change from anything not currently animating. */
.tapx-idle-cleanup [class*="will-change"]:not(:hover):not(:focus-within) {
    will-change: auto !important;
}


/* Push every entity / service / fine / bulk modal above all floats */
#entity-modal,
#emp-service-request-modal,
#veh-service-request-modal,
#fine-form-modal,
#bulk-doc-link-modal,
#bulk-selection-action-modal {
    z-index: 99999 !important;
}
/* Backdrop overlays inside modals — keep above floats too */
#entity-modal .modal-backdrop,
#emp-service-request-modal .modal-backdrop,
#veh-service-request-modal .modal-backdrop,
#fine-form-modal .modal-backdrop,
#bulk-doc-link-modal .modal-backdrop,
#bulk-selection-action-modal .modal-backdrop {
    z-index: 99998 !important;
}
/* Demote WhatsApp floating button below open modals so it doesn't
   poke through. When a modal is open we add `body.tapx-modal-open`. */
body.tapx-modal-open .floating-whatsapp,
body.tapx-modal-open [data-whatsapp-fab],
body.tapx-modal-open [class*="whatsapp"][class*="float"] {
    z-index: 50 !important;
    pointer-events: none;
}
/* Also lower the cursor trail / sparkles / orbs so they don't sit
   above the modal in any edge case */
body.tapx-modal-open .tapx-cursor-trail,
body.tapx-modal-open .tapx-bg-orbs,
body.tapx-modal-open .tapx-bg-sparkles,
body.tapx-modal-open .tapx-bg-grid {
    z-index: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   USER DASHBOARD — PHASE 1 SURGICAL UPDATES
═══════════════════════════════════════════════════════════════ */

/* ✅ REMOVED — Old rule that was hiding column 4.
   Now column 4 = UID and must be visible. */

/* ✅ FIXED — Hide Add + Export buttons in Commercial module */
#btn-add-commercial-employee,
#btn-bulk-export-commercial-employees {
    display: none !important;
}

/* ✅ FIXED — Invoice & Billing: light-mode color visibility */
#tapx-dash-overlay:not(.dark) #panel-billing,
#tapx-dash-overlay:not(.dark) #panel-invoice,
#tapx-dash-overlay:not(.dark) [id*="billing"],
#tapx-dash-overlay:not(.dark) [id*="invoice"] {
    color: #0B1020 !important;
}
#tapx-dash-overlay:not(.dark) #panel-billing .text-gray-500,
#tapx-dash-overlay:not(.dark) #panel-invoice .text-gray-500,
#tapx-dash-overlay:not(.dark) [id*="billing"] .text-gray-500,
#tapx-dash-overlay:not(.dark) [id*="invoice"] .text-gray-500 {
    color: #475569 !important;
}
#tapx-dash-overlay:not(.dark) #panel-billing .text-gray-400,
#tapx-dash-overlay:not(.dark) #panel-invoice .text-gray-400 {
    color: #334155 !important;
}
#tapx-dash-overlay:not(.dark) #panel-billing .text-white,
#tapx-dash-overlay:not(.dark) #panel-invoice .text-white,
#tapx-dash-overlay:not(.dark) #panel-billing th,
#tapx-dash-overlay:not(.dark) #panel-invoice th {
    color: #0B1020 !important;
}
#tapx-dash-overlay:not(.dark) #panel-billing .bg-black\/30,
#tapx-dash-overlay:not(.dark) #panel-invoice .bg-black\/30 {
    background: rgba(0,0,0,0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════
   END PHASE 1 SURGICAL UPDATES
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   USER DASHBOARD — PHASE 2 SURGICAL UPDATES
═══════════════════════════════════════════════════════════════ */

/* ✅ FINES — Amount/Paid/Balance colors are now driven by explicit
   per-cell classes (.fines-amt-cell, .fines-paid-cell, .fines-balance-cell)
   in PHASE 38; old nth-child color rules removed to avoid conflict. */

/* ✅ FINES — yellow VLN-XXX counter prefix removed per user request */

/* ✅ FINES — Hide paid/unpaid/pending text from cells; let Status pill show it
   We style the Status column (10th nth-child) to be the only visible status */
#tbody-fines-demo tr td:nth-child(11) span:not(.pill):not([class*="bg-"]) {
    /* keep status pills visible, hide bare text indicators */
}

/* ✅ FINES — dynamic target column header label
   When user clicks Vehicles tab, header shows "Vehicle"
   When Employees, "Employee"; when Commercial, "Commercial" */
#fine-category-filter-tabs[data-active="vehicle"] ~ * .tapx-fine-target-col,
.tapx-fine-target-col[data-active="vehicle"] {
    /* Default: Vehicle (set by HTML) */
}

/* ✅ INVOICE & BILLING — strong light-mode visibility (additive) */
#tapx-dash-overlay:not(.dark) #panel-invoices,
#tapx-dash-overlay:not(.dark) #panel-invoices * {
    color: #0B1020 !important;
}
#tapx-dash-overlay:not(.dark) #panel-invoices .text-gray-500,
#tapx-dash-overlay:not(.dark) #panel-invoices .text-gray-400,
#tapx-dash-overlay:not(.dark) #panel-invoices .text-gray-300 {
    color: #475569 !important;
}
#tapx-dash-overlay:not(.dark) #panel-invoices th {
    color: #0B1020 !important;
    font-weight: 700 !important;
}
#tapx-dash-overlay:not(.dark) #panel-invoices .bg-black\/30,
#tapx-dash-overlay:not(.dark) #panel-invoices [class*="bg-black"] {
    background: rgba(241,245,249,1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   END PHASE 2
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PHASE 5 — Landing page polish
═══════════════════════════════════════════════════════════════ */

/* (a) Hide testimonial section "TRUSTED BY THE AVANT-GARDE" */
section#testimonial,
section[aria-labelledby="testimonials-heading"],
section:has(> div > h2:where(.navy-depth-3d):has-text("TRUSTED")),
h2:where([class*="navy-depth-3d"]):where([class*="text-6xl"]) {
    /* fallback selector below */
}
/* Most reliable: hide by content match using sibling rule */
.glass-panel:has(p:where([class*="italic"]):has-text("redefined our operational velocity")) {
    display: none !important;
}

/* (b) Hide landing-page dark/light toggle (keep only on dashboard) */
#theme-toggle {
    display: none !important;
}

/* (c) Toggle thumbs: red when off, green when on (per-employee +
       add-on switches). Override existing track styling. */
.fine-toggle-track,
.sanctuary-per-head-track {
    background: rgba(239,68,68,0.45) !important;
    border-color: rgba(239,68,68,0.7) !important;
    transition: background 0.25s ease, border-color 0.25s ease !important;
}
.fine-toggle-input:checked + .fine-toggle-track,
button[aria-checked="true"] .sanctuary-per-head-track,
button[aria-pressed="true"] .sanctuary-per-head-track,
.sanctuary-per-head-track--on,
.sanctuary-per-head-track[data-on="true"] {
    background: rgba(34,197,94,0.55) !important;
    border-color: rgba(34,197,94,0.8) !important;
}

/* (d) Light-blue + yellow theme combo on sanctuary tiers */
#sanctuary-tiers .glass-panel {
    background: linear-gradient(135deg, rgba(186,230,253,0.10), rgba(254,240,138,0.06)) !important;
    border: 1px solid rgba(56,189,248,0.18) !important;
}
#sanctuary-tiers [data-sanctuary-tier="growth"] {
    background: linear-gradient(135deg, rgba(186,230,253,0.18), rgba(254,240,138,0.12)) !important;
    border-color: rgba(56,189,248,0.35) !important;
    box-shadow: 0 0 60px rgba(56,189,248,0.18), 0 0 100px rgba(254,240,138,0.10) !important;
}
#sanctuary-tiers .text-primary,
#sanctuary-tiers h2,
#sanctuary-tiers h3 {
    color: #38bdf8 !important;  /* sky-400 light blue */
}
#sanctuary-tiers .sanctuary-tier-price-mode--plan p {
    color: #38bdf8 !important;
}

/* (e) UAE arc: lift up + larger title */
.visa-arc-title {
    font-size: 1.25rem !important;       /* bigger */
    font-weight: 800 !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 1.2rem !important;
    color: #38bdf8 !important;
}
[class*="visa-arc"]:has(.visa-arc-title),
.visa-arc-section,
section:has(> p.visa-arc-title) {
    margin-top: -3rem !important;        /* lift upward */
    transform: translateY(-2rem) !important;
}

/* (f) Hide "Installation fees" line in tier modal */
[id*="tier"] strong:where(.text-slate-300):has-text("Installation fees"),
[id*="modal"] strong:where(.text-slate-300):has-text("Installation fees") {
    /* CSS :has-text is non-standard — JS handles this below */
}

/* (g) "Be a Partner" toggle styling above tiers */
#tapx-be-partner-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 auto 2rem;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(254,240,138,0.10), rgba(186,230,253,0.10));
    border: 1.5px solid rgba(254,240,138,0.35);
    border-radius: 999px;
    width: fit-content;
    cursor: pointer;
    transition: all 0.3s ease;
}
#tapx-be-partner-wrap:hover {
    border-color: rgba(254,240,138,0.6);
    box-shadow: 0 0 30px rgba(254,240,138,0.2);
}
#tapx-be-partner-wrap label {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #facc15;  /* yellow */
}
#tapx-be-partner-wrap .tapx-bp-track {
    width: 44px; height: 24px;
    background: rgba(239,68,68,0.45);
    border: 1px solid rgba(239,68,68,0.7);
    border-radius: 999px;
    position: relative;
    transition: all 0.3s ease;
}
#tapx-be-partner-wrap .tapx-bp-knob {
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
}
#tapx-be-partner-wrap.is-on .tapx-bp-track {
    background: rgba(34,197,94,0.55);
    border-color: rgba(34,197,94,0.8);
}
#tapx-be-partner-wrap.is-on .tapx-bp-knob {
    left: 22px;
}

/* When partner mode is on, swap visual cue on tiers */
body.tapx-partner-mode #sanctuary-tiers h2:first-of-type::after {
    content: " · PARTNER";
    color: #facc15;
    font-size: 0.6em;
    margin-left: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 6 — Light-blue + yellow polish, partner toggle position,
   wider tier modal
═══════════════════════════════════════════════════════════════ */

/* Be a Partner — re-style to be a clean pill-toggle above Startup */
#tapx-be-partner-row {
    margin-bottom: 1.4rem;
    padding-bottom: 0.5rem;
}
#tapx-be-partner-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 14px 28px !important;
    background: linear-gradient(135deg, rgba(254,240,138,0.14), rgba(186,230,253,0.14)) !important;
    border: 2px solid rgba(254,240,138,0.45) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(254,240,138,0.15);
}
#tapx-be-partner-wrap:hover {
    border-color: rgba(56,189,248,0.65) !important;
    box-shadow: 0 6px 30px rgba(56,189,248,0.25), 0 6px 30px rgba(254,240,138,0.20) !important;
    transform: translateY(-1px);
}
#tapx-be-partner-wrap label {
    font-family: var(--font-headline, sans-serif) !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #facc15 !important;
    cursor: pointer !important;
    margin: 0 !important;
}
#tapx-be-partner-wrap.is-on label {
    color: #38bdf8 !important;
}
#tapx-be-partner-wrap .tapx-bp-track {
    width: 50px !important; height: 26px !important;
    background: rgba(239,68,68,0.55) !important;
    border: 1.5px solid rgba(239,68,68,0.8) !important;
    border-radius: 999px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}
#tapx-be-partner-wrap .tapx-bp-knob {
    position: absolute !important;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: white !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#tapx-be-partner-wrap.is-on .tapx-bp-track {
    background: rgba(34,197,94,0.65) !important;
    border-color: rgba(34,197,94,0.9) !important;
}
#tapx-be-partner-wrap.is-on .tapx-bp-knob {
    left: 28px !important;
}

/* Tier-quote-modal: light-blue + yellow theme, wider */
#tapx-tier-modal-panel,
.tier-quote-modal .relative.z-10 {
    background: linear-gradient(135deg, #0a1a2e 0%, #0a0c10 60%, #1a1305 100%) !important;
    border: 2px solid rgba(56,189,248,0.30) !important;
}
#tapx-tier-modal-panel #tier-quote-modal-title,
.tier-quote-modal #tier-quote-modal-title {
    color: #38bdf8 !important;            /* light-blue */
    font-size: 14px !important;
    letter-spacing: 0.25em !important;
}
#tapx-tier-modal-panel #tier-quote-intro,
.tier-quote-modal #tier-quote-intro {
    color: rgba(254,240,138,0.85) !important;   /* yellow accent */
    font-size: 12px !important;
}
#tapx-tier-modal-panel input[type="number"],
#tapx-tier-modal-panel input[type="text"] {
    border-color: rgba(56,189,248,0.4) !important;
    background: rgba(10,26,46,0.6) !important;
}
#tapx-tier-modal-panel input[type="number"]:focus,
#tapx-tier-modal-panel input[type="text"]:focus {
    border-color: rgba(254,240,138,0.7) !important;
    box-shadow: 0 0 0 2px rgba(254,240,138,0.25) !important;
}
#tapx-tier-modal-panel button[type="submit"],
#tapx-tier-modal-panel button.bp,
#tapx-tier-modal-panel .tier-quote-submit,
#tapx-tier-modal-panel button[data-tier-quote-submit] {
    background: linear-gradient(135deg, #38bdf8, #facc15) !important;
    border-color: rgba(56,189,248,0.6) !important;
    color: #0a0c10 !important;
    font-weight: 900 !important;
}

/* Tier section base — apply theme more aggressively */
#sanctuary-tiers .glass-panel {
    background: linear-gradient(135deg, rgba(186,230,253,0.08), rgba(254,240,138,0.05)) !important;
    border: 1px solid rgba(56,189,248,0.18) !important;
}
#sanctuary-tiers [data-sanctuary-tier="growth"] {
    background: linear-gradient(135deg, rgba(186,230,253,0.18), rgba(254,240,138,0.12)) !important;
    border: 1px solid rgba(56,189,248,0.40) !important;
    box-shadow: 0 0 60px rgba(56,189,248,0.18), 0 0 100px rgba(254,240,138,0.10) !important;
}
#sanctuary-tiers [data-sanctuary-tier="growth"] .absolute.-top-5 {
    background: linear-gradient(135deg, #facc15, #38bdf8) !important;
    color: #0a0c10 !important;
}
#sanctuary-tiers h3 {
    color: #38bdf8 !important;
}
#sanctuary-tiers [data-sanctuary-tier="growth"] h3 {
    background: linear-gradient(135deg, #38bdf8, #facc15) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
#sanctuary-tiers .sanctuary-tier-price-mode--plan p {
    color: #38bdf8 !important;
}
#sanctuary-tiers [data-sanctuary-tier="growth"] .sanctuary-tier-price-mode--plan p {
    color: #facc15 !important;
}
#sanctuary-tiers button[data-tier-quote-open] {
    border-color: rgba(56,189,248,0.4) !important;
    color: #38bdf8 !important;
}
#sanctuary-tiers button[data-tier-quote-open]:hover {
    background: linear-gradient(135deg, #38bdf8, #facc15) !important;
    color: #0a0c10 !important;
    border-color: transparent !important;
}
#sanctuary-tiers .material-symbols-outlined.text-primary {
    color: #38bdf8 !important;
}

/* Light mode (which is now the default) — adjust contrasts */
html:not(.dark) #sanctuary-tiers .glass-panel {
    background: linear-gradient(135deg, rgba(56,189,248,0.07), rgba(254,240,138,0.05)) !important;
    border-color: rgba(56,189,248,0.22) !important;
}
html:not(.dark) #sanctuary-tiers h3 {
    color: #0284c7 !important;          /* sky-600 for light mode */
}
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier="growth"] h3 {
    background: linear-gradient(135deg, #0284c7, #ca8a04) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
html:not(.dark) #sanctuary-tiers .sanctuary-tier-price-mode--plan p {
    color: #0284c7 !important;
}
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier="growth"] .sanctuary-tier-price-mode--plan p {
    color: #ca8a04 !important;
}
html:not(.dark) #tapx-be-partner-wrap label {
    color: #ca8a04 !important;
}
html:not(.dark) #tapx-be-partner-wrap.is-on label {
    color: #0284c7 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 7 — Final unified theme + toggles + searchable dropdowns
═══════════════════════════════════════════════════════════════ */

/* (1) UNIFIED TOGGLE DESIGN — applies to ALL toggles on landing
   - Same track size, thumb size, colors, animation. */
.fine-toggle-track,
.sanctuary-per-head-track,
#tapx-be-partner-wrap .tapx-bp-track {
    position: relative !important;
    display: inline-block !important;
    width: 50px !important;
    height: 26px !important;
    background: rgba(239,68,68,0.55) !important;
    border: 1.5px solid rgba(239,68,68,0.85) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition:
      background 0.32s cubic-bezier(.22,1,.36,1),
      border-color 0.32s cubic-bezier(.22,1,.36,1),
      box-shadow 0.32s cubic-bezier(.22,1,.36,1) !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}
.fine-toggle-thumb,
.sanctuary-per-head-knob,
#tapx-be-partner-wrap .tapx-bp-knob {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 18px !important;
    height: 18px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    transition: left 0.32s cubic-bezier(.22,1,.36,1),
                transform 0.32s cubic-bezier(.22,1,.36,1),
                box-shadow 0.32s cubic-bezier(.22,1,.36,1) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
}
/* ON state — green for ALL toggles */
.fine-toggle-input:checked + .fine-toggle-track,
.sanctuary-per-head-switch.is-active .sanctuary-per-head-track,
#tapx-be-partner-wrap.is-on .tapx-bp-track {
    background: rgba(34,197,94,0.65) !important;
    border-color: rgba(34,197,94,0.95) !important;
    box-shadow: 0 0 12px rgba(34,197,94,0.35) !important;
}
.fine-toggle-input:checked + .fine-toggle-track .fine-toggle-thumb,
.sanctuary-per-head-switch.is-active .sanctuary-per-head-knob,
#tapx-be-partner-wrap.is-on .tapx-bp-knob {
    left: 28px !important;
}
/* (2) SITE-WIDE light-blue + yellow theme */
:root {
    --tapx-sky: #38bdf8;
    --tapx-sky-deep: #0284c7;
    --tapx-yellow: #facc15;
    --tapx-yellow-deep: #ca8a04;
}

/* Hero & headline — theme accents */
#hero h1, #hero .text-primary,
.font-headline.text-primary {
    color: var(--tapx-sky) !important;
}
.dark #hero h1, .dark #hero .text-primary,
.dark .font-headline.text-primary {
    color: var(--tapx-sky) !important;
}

/* Primary CTA buttons → blue→yellow gradient */
button.bg-primary,
.bg-primary[type="button"],
button[class*="bg-primary"]:not([class*="bg-primary/"]),
.squishy-btn[class*="bg-primary"] {
    background: linear-gradient(135deg, var(--tapx-sky), var(--tapx-yellow)) !important;
    border: none !important;
    color: #0a0c10 !important;
}
button.bg-primary:hover,
.squishy-btn[class*="bg-primary"]:hover {
    background: linear-gradient(135deg, var(--tapx-yellow), var(--tapx-sky)) !important;
    box-shadow: 0 16px 40px rgba(56,189,248,0.30), 0 16px 40px rgba(254,240,138,0.20) !important;
}

/* (3) Tier modal "Configure plan" form — full theme + wider already */
#tapx-tier-modal-panel,
.tier-quote-modal .relative.z-10 {
    max-width: 1100px !important;
    background: linear-gradient(135deg, #0a1a2e 0%, #0a0c10 60%, #1a1305 100%) !important;
    border: 2px solid rgba(56,189,248,0.30) !important;
    box-shadow: 0 32px 96px rgba(56,189,248,0.20), 0 32px 96px rgba(254,240,138,0.15) !important;
}
#tapx-tier-modal-panel #tier-quote-modal-title,
.tier-quote-modal #tier-quote-modal-title {
    color: var(--tapx-sky) !important;
    font-size: 14px !important;
    letter-spacing: 0.25em !important;
}
#tapx-tier-modal-panel #tier-quote-intro,
.tier-quote-modal #tier-quote-intro {
    color: rgba(254,240,138,0.85) !important;
}
.tier-quote-modal label {
    color: var(--tapx-sky) !important;
    font-weight: 700 !important;
}
.tier-quote-modal input,
.tier-quote-modal select {
    background: rgba(10,26,46,0.55) !important;
    border: 1px solid rgba(56,189,248,0.45) !important;
    color: #fff !important;
    border-radius: 12px !important;
}
.tier-quote-modal input:focus,
.tier-quote-modal select:focus {
    border-color: rgba(254,240,138,0.85) !important;
    box-shadow: 0 0 0 2px rgba(254,240,138,0.30) !important;
    outline: none !important;
}

/* (4) Details & Pay modal — same theme */
#tapx-step2-panel,
#tapx-step2 [id="tapx-step2-panel"] {
    border: 2px solid rgba(56,189,248,0.30) !important;
    background: linear-gradient(135deg, #0a1a2e 0%, #0a0c10 60%, #1a1305 100%) !important;
}
#tapx-step2 input,
#tapx-step2 select,
#tapx-step2 textarea {
    background: rgba(10,26,46,0.6) !important;
    border-color: rgba(56,189,248,0.40) !important;
    color: #fff !important;
}
#tapx-step2 input:focus,
#tapx-step2 select:focus,
#tapx-step2 textarea:focus {
    border-color: rgba(254,240,138,0.85) !important;
    box-shadow: 0 0 0 2px rgba(254,240,138,0.30) !important;
    outline: none !important;
}
#tapx-step2 button[type="submit"],
#tapx-step2 .squishy-btn,
#tapx-step2 button.bg-primary {
    background: linear-gradient(135deg, var(--tapx-sky), var(--tapx-yellow)) !important;
    color: #0a0c10 !important;
    border: none !important;
}

/* (5) BE A PARTNER toggle — final size + position */
#tapx-be-partner-row {
    margin: 0 auto 1.6rem auto !important;
}
#tapx-be-partner-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 14px 28px !important;
    background: linear-gradient(135deg, rgba(254,240,138,0.14), rgba(186,230,253,0.14)) !important;
    border: 2px solid rgba(254,240,138,0.45) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.32s cubic-bezier(.22,1,.36,1) !important;
    box-shadow: 0 4px 20px rgba(254,240,138,0.18) !important;
}
#tapx-be-partner-wrap:hover {
    border-color: rgba(56,189,248,0.65) !important;
    box-shadow: 0 6px 30px rgba(56,189,248,0.25), 0 6px 30px rgba(254,240,138,0.22) !important;
    transform: translateY(-1px);
}
#tapx-be-partner-wrap label {
    font-family: var(--font-headline, sans-serif) !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--tapx-yellow) !important;
    cursor: pointer !important;
    margin: 0 !important;
}
#tapx-be-partner-wrap.is-on label {
    color: var(--tapx-sky) !important;
}

/* (6) Partner mode — overlay banner on each tier */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier]::before {
    content: "PARTNER PLAN";
    position: absolute;
    top: 8px; right: 8px;
    z-index: 5;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--tapx-sky), var(--tapx-yellow));
    color: #0a0c10;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    border-radius: 999px;
    pointer-events: none;
}
body.tapx-partner-mode #sanctuary-tiers h3::after {
    content: " · Partner";
    color: var(--tapx-yellow);
    font-size: 0.6em;
    margin-left: 8px;
}
body.tapx-partner-mode #sanctuary-tiers button[data-tier-quote-open]::after {
    content: " (Apply)";
    font-size: 0.85em;
}
body.tapx-partner-mode #sanctuary-tiers .glass-panel {
    background: linear-gradient(135deg, rgba(254,240,138,0.16), rgba(186,230,253,0.16)) !important;
    border-color: rgba(254,240,138,0.35) !important;
}

/* (7) Custom-select dropdown (.csw) — light-blue theme + searchable visual */
.csw,
.dash-searchable-trigger {
    border-color: rgba(56,189,248,0.35) !important;
    background: rgba(10,26,46,0.4) !important;
    border-radius: 12px !important;
}
.csw:focus,
.csw:focus-within,
.dash-searchable-trigger:focus {
    border-color: rgba(254,240,138,0.85) !important;
    box-shadow: 0 0 0 2px rgba(254,240,138,0.30) !important;
}
.dash-searchable-panel {
    border-color: rgba(56,189,248,0.40) !important;
    background: linear-gradient(135deg, #0a1a2e, #0a0c10) !important;
}
.dash-searchable-panel input[type="search"],
.dash-searchable-panel input[type="text"] {
    border-color: rgba(56,189,248,0.40) !important;
    background: rgba(10,26,46,0.55) !important;
    color: #fff !important;
}

/* (8) Light-mode adjustments (since dark is removed by Phase 5) */
html:not(.dark) #tapx-be-partner-wrap label {
    color: var(--tapx-yellow-deep) !important;
}
html:not(.dark) #tapx-be-partner-wrap.is-on label {
    color: var(--tapx-sky-deep) !important;
}
html:not(.dark) .csw,
html:not(.dark) .dash-searchable-trigger {
    background: rgba(186,230,253,0.10) !important;
    border-color: rgba(56,189,248,0.40) !important;
    color: #0a0c10 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 8 — Partner mode content swap + unified toggles + wider modal
═══════════════════════════════════════════════════════════════ */

/* (1) Be a Partner — left-aligned above Startup tier */
#tapx-be-partner-row {
    margin: 0 0 1rem 0 !important;
    padding-left: 4px;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
}

/* (2) PARTNER MODE — content swap + visual identity for each tier */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] {
    border-color: rgba(254,240,138,0.40) !important;
    background: linear-gradient(135deg, rgba(254,240,138,0.10), rgba(186,230,253,0.10)) !important;
    position: relative;
}

/* Tier card top-right "PARTNER" badge */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier]::before {
    content: "PARTNER" !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10 !important;
    padding: 5px 14px !important;
    background: linear-gradient(135deg, var(--tapx-yellow, #facc15), var(--tapx-sky, #38bdf8)) !important;
    color: #0a0c10 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.18em !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    box-shadow: 0 4px 14px rgba(254,240,138,0.30) !important;
}

/* Hide original tier subtitle/description in partner mode + show partner copy */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="startup"] h3 ~ ul,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] h3 ~ ul,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="scale"] h3 ~ ul,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="fortress"] h3 ~ ul {
    /* keep features but add partner overlay below */
}

/* Partner perks overlay — a small block injected via ::after */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier]::after {
    content: "★ Refer · earn 20% recurring  ·  white-label dashboard  ·  Co-branded onboarding";
    display: block;
    position: relative;
    margin-top: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(56,189,248,0.10), rgba(254,240,138,0.10));
    border: 1px dashed rgba(254,240,138,0.40);
    border-radius: 12px;
    color: var(--tapx-yellow-deep, #ca8a04);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
    line-height: 1.5;
    order: 99;       /* push to bottom inside flex column */
    width: 100%;
}

/* Heading suffix in partner mode */
body.tapx-partner-mode #sanctuary-tiers h3 {
    position: relative;
}
body.tapx-partner-mode #sanctuary-tiers h3::after {
    content: " · partner";
    color: var(--tapx-yellow-deep, #ca8a04);
    font-size: 0.5em;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-left: 6px;
    vertical-align: super;
}

/* Action button text rewriting in partner mode */
body.tapx-partner-mode #sanctuary-tiers button[data-tier-quote-open]::after {
    content: " — Apply" !important;
}

/* Optionally rewrite the Sanctuary Tiers main heading itself */
body.tapx-partner-mode #sanctuary-tiers > .text-center h2::after {
    content: " · Partner Program";
    background: linear-gradient(135deg, var(--tapx-yellow, #facc15), var(--tapx-sky, #38bdf8));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-left: 14px;
    font-size: 0.6em;
}

/* (3) UNIFIED TOGGLE — apply to every checkbox-toggle on the page.
   Catches the per-employee, add-on, partner, and any future toggles. */
.fine-toggle-track,
.sanctuary-per-head-track,
#tapx-be-partner-wrap .tapx-bp-track,
input[type="checkbox"][role="switch"] + span:first-of-type,
.peer.sr-only ~ span[aria-hidden="true"]:first-of-type {
    width: 50px !important;
    height: 26px !important;
    background: rgba(239,68,68,0.55) !important;
    border: 1.5px solid rgba(239,68,68,0.85) !important;
    border-radius: 999px !important;
    transition: background 0.32s cubic-bezier(.22,1,.36,1),
                border-color 0.32s cubic-bezier(.22,1,.36,1),
                box-shadow 0.32s cubic-bezier(.22,1,.36,1) !important;
    position: relative !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25) !important;
}
.fine-toggle-thumb,
.sanctuary-per-head-knob,
#tapx-be-partner-wrap .tapx-bp-knob {
    width: 18px !important;
    height: 18px !important;
    top: 2px !important;
    left: 2px !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
    transition: left 0.32s cubic-bezier(.22,1,.36,1) !important;
    position: absolute !important;
}
.fine-toggle-input:checked + .fine-toggle-track,
.sanctuary-per-head-switch.is-active .sanctuary-per-head-track,
#tapx-be-partner-wrap.is-on .tapx-bp-track,
input[type="checkbox"][role="switch"]:checked + span:first-of-type,
.peer.sr-only:checked ~ span[aria-hidden="true"]:first-of-type {
    background: rgba(34,197,94,0.65) !important;
    border-color: rgba(34,197,94,0.95) !important;
    box-shadow: 0 0 12px rgba(34,197,94,0.40), inset 0 1px 2px rgba(0,0,0,0.20) !important;
}
.fine-toggle-input:checked + .fine-toggle-track .fine-toggle-thumb,
.sanctuary-per-head-switch.is-active .sanctuary-per-head-knob,
#tapx-be-partner-wrap.is-on .tapx-bp-knob {
    left: 28px !important;
}

/* (4) Details & Pay modal — already widened to 1100px above.
   Reinforce theme + give inputs more breathing room. */
#tapx-step2-panel,
#tapx-step2 [id="tapx-step2-panel"] {
    max-width: 1100px !important;
}
#tapx-step2-panel #tapx-s2-body {
    max-height: min(82vh, 760px) !important;
    padding: 28px 36px 32px !important;
}

/* (5) Partner toggle pill — refine left-alignment look */
#tapx-be-partner-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 11px 22px !important;
    background: linear-gradient(135deg, rgba(254,240,138,0.14), rgba(186,230,253,0.14)) !important;
    border: 2px solid rgba(56,189,248,0.50) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.32s cubic-bezier(.22,1,.36,1) !important;
    box-shadow: 0 4px 18px rgba(56,189,248,0.18) !important;
}
#tapx-be-partner-wrap:hover {
    border-color: rgba(254,240,138,0.65) !important;
    box-shadow: 0 6px 28px rgba(56,189,248,0.24), 0 6px 28px rgba(254,240,138,0.20) !important;
    transform: translateY(-1px);
}
#tapx-be-partner-wrap label {
    font-family: var(--font-headline, sans-serif) !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--tapx-yellow-deep, #ca8a04) !important;
    cursor: pointer !important;
    margin: 0 !important;
}
#tapx-be-partner-wrap.is-on label {
    color: var(--tapx-sky-deep, #0284c7) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 9 — Final cleanup
═══════════════════════════════════════════════════════════════ */

/* (1) Remove any leftover .tapx-search-mirror inputs visually */
.tapx-search-mirror,
input.tapx-search-mirror,
input[list^="tapx-dl-"] {
    display: none !important;
}

/* (2) Be a Partner toggle pinned top-left of Startup tier */
#tapx-be-partner-row {
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
}
/* On the grid 1st row, toggle should align flush-left with Startup */

/* (3) RESTYLE tier action buttons to match Check My Fine */
#sanctuary-tiers button[data-tier-quote-open] {
    background: #FFD700 !important;
    color: #0a0a0a !important;
    border: none !important;
    border-radius: 9999px !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 0.85rem 1.5rem !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12),
                0 2px 6px rgba(255, 215, 0, 0.15) !important;
    transition: all 0.25s cubic-bezier(.22,1,.36,1) !important;
    width: 100% !important;
}
#sanctuary-tiers button[data-tier-quote-open]:hover {
    background: linear-gradient(135deg, #38bdf8, #facc15) !important;
    color: #0a0a0a !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14),
                0 4px 12px rgba(56,189,248,0.30),
                0 4px 12px rgba(255, 215, 0, 0.30) !important;
    transform: translateY(-1px) !important;
}
/* The Growth tier "Recommended" already has primary; keep gold-blue */
#sanctuary-tiers [data-sanctuary-tier="growth"] button[data-tier-quote-open] {
    background: linear-gradient(135deg, #38bdf8, #facc15) !important;
}

/* (4) Light-blue color combo on ALL FOUR tier cards uniformly */
#sanctuary-tiers [data-sanctuary-tier="startup"],
#sanctuary-tiers [data-sanctuary-tier="growth"],
#sanctuary-tiers [data-sanctuary-tier="scale"],
#sanctuary-tiers [data-sanctuary-tier="fortress"] {
    background: linear-gradient(135deg, rgba(56,189,248,0.12), rgba(186,230,253,0.10)) !important;
    border: 1px solid rgba(56,189,248,0.32) !important;
}
/* Growth gets a stronger glow to stay "recommended" */
#sanctuary-tiers [data-sanctuary-tier="growth"] {
    background: linear-gradient(135deg, rgba(56,189,248,0.18), rgba(186,230,253,0.16)) !important;
    border: 2px solid rgba(56,189,248,0.55) !important;
    box-shadow: 0 0 60px rgba(56,189,248,0.30),
                0 0 100px rgba(56,189,248,0.15) !important;
}
/* All tier headings sky-blue */
#sanctuary-tiers h3,
#sanctuary-tiers [data-sanctuary-tier] h3 {
    color: #0284c7 !important;
}
#sanctuary-tiers [data-sanctuary-tier="growth"] h3 {
    color: #0284c7 !important;          /* uniform now */
    background: none !important;
    -webkit-text-fill-color: #0284c7 !important;
}
/* All tier prices sky-blue */
#sanctuary-tiers .sanctuary-tier-price-mode--plan p,
#sanctuary-tiers [data-sanctuary-tier] .sanctuary-tier-price-mode--plan p {
    color: #0284c7 !important;
}
/* "Recommended" badge on Growth */
#sanctuary-tiers [data-sanctuary-tier="growth"] .absolute.-top-5 {
    background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
    color: #ffffff !important;
}
/* Material icons in tiers */
#sanctuary-tiers .material-symbols-outlined {
    color: #0284c7 !important;
}
/* Light-mode ↑ already covered above (we ARE light mode by default) */

/* (5) PARTNER MODE — proper content swap */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] ul {
    display: none !important;          /* hide original feature list */
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier]::before {
    content: "PARTNER" !important;
    position: absolute !important;
    top: 12px !important; right: 12px !important;
    z-index: 10 !important;
    padding: 5px 14px !important;
    background: linear-gradient(135deg, #facc15, #38bdf8) !important;
    color: #0a0c10 !important;
    font-size: 9px !important; font-weight: 900 !important;
    letter-spacing: 0.18em !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(56,189,248,0.30) !important;
}
/* Inject Partner-specific perks block via ::after */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier]::after {
    content: "★ 20% Recurring Commission   ·   White-label Dashboard   ·   Co-branded Onboarding   ·   Priority Support";
    display: block;
    margin: 12px 0 16px 0;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(56,189,248,0.14), rgba(254,240,138,0.10));
    border: 1.5px dashed rgba(56,189,248,0.50);
    border-radius: 14px;
    color: #0284c7;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.7;
    letter-spacing: 0.04em;
    width: 100%;
    box-sizing: border-box;
    order: 99;
}
body.tapx-partner-mode #sanctuary-tiers h3 {
    position: relative;
}
body.tapx-partner-mode #sanctuary-tiers h3::after {
    content: " · partner";
    color: #ca8a04;
    font-size: 0.5em;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-left: 6px;
    vertical-align: super;
}
body.tapx-partner-mode #sanctuary-tiers button[data-tier-quote-open]::after {
    content: " — Apply" !important;
}
body.tapx-partner-mode #sanctuary-tiers > .text-center h2::after {
    content: " · Partner Program";
    background: linear-gradient(135deg, #facc15, #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-left: 14px;
    font-size: 0.6em;
}

/* (6) Hide the live-walkthrough <p> below "UAE operations dashboard"
   even if some other rule resets it */
.dashboard-dp-sub {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 10 — Final polish: tier buttons + bright light-blue tiers
═══════════════════════════════════════════════════════════════ */

/* (1) ALL FOUR tiers — bright visible light-blue background.
   Override Phase 9's darker overlay. */
#sanctuary-tiers [data-sanctuary-tier="startup"],
#sanctuary-tiers [data-sanctuary-tier="growth"],
#sanctuary-tiers [data-sanctuary-tier="scale"],
#sanctuary-tiers [data-sanctuary-tier="fortress"] {
    background: linear-gradient(135deg,
                rgba(186,230,253,0.55) 0%,    /* sky-200 strong */
                rgba(224,242,254,0.65) 100%) !important;   /* sky-100 strong */
    border: 1.5px solid rgba(56,189,248,0.55) !important;
    color: #0c4a6e !important;
}
/* Growth tier — slightly more saturated to remain "recommended" */
#sanctuary-tiers [data-sanctuary-tier="growth"] {
    background: linear-gradient(135deg,
                rgba(125,211,252,0.65) 0%,    /* sky-300 */
                rgba(186,230,253,0.75) 100%) !important;
    border: 2.5px solid rgba(2,132,199,0.85) !important;     /* sky-600 */
    box-shadow:
        0 0 60px rgba(56,189,248,0.45),
        0 0 100px rgba(56,189,248,0.25) !important;
}

/* Tier text colors — readable on light-blue background */
#sanctuary-tiers [data-sanctuary-tier] h3 {
    color: #0c4a6e !important;          /* sky-900 — strong dark navy-blue */
}
#sanctuary-tiers [data-sanctuary-tier="growth"] h3 {
    color: #0369a1 !important;          /* sky-700 */
}
#sanctuary-tiers [data-sanctuary-tier] .sanctuary-tier-price-mode--plan p {
    color: #0c4a6e !important;
}
#sanctuary-tiers [data-sanctuary-tier="growth"] .sanctuary-tier-price-mode--plan p {
    color: #0369a1 !important;
}
#sanctuary-tiers [data-sanctuary-tier] .material-symbols-outlined {
    color: #0284c7 !important;
}
/* Tier features list text — readable */
#sanctuary-tiers [data-sanctuary-tier] ul,
#sanctuary-tiers [data-sanctuary-tier] li,
#sanctuary-tiers [data-sanctuary-tier] p:not(.sanctuary-tier-price-mode--plan p) {
    color: #1e293b !important;          /* slate-800 */
}
/* Icon-circle background more visible */
#sanctuary-tiers [data-sanctuary-tier] .bg-primary\/5 {
    background: rgba(56,189,248,0.18) !important;
    border-color: rgba(2,132,199,0.50) !important;
}
/* "Recommended" badge → white text on sky-blue gradient */
#sanctuary-tiers [data-sanctuary-tier="growth"] .absolute.-top-5 {
    background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
    color: #ffffff !important;
}
/* Per-employee toggle label readable on light bg */
#sanctuary-tiers .text-slate-700,
#sanctuary-tiers .text-slate-200,
#sanctuary-tiers .sanctuary-per-head-switch span {
    color: #1e293b !important;
}
/* Billing toggle text readable */
#sanctuary-tiers .sanctuary-tier-billing-toggle {
    color: #475569 !important;          /* slate-600 */
}
#sanctuary-tiers .sanctuary-tier-billing-toggle .text-primary {
    color: #0284c7 !important;
}

/* (2) Tier action buttons — already replaced HTML class with
   Check My Fine classes. But the class uses `bg-primary` which
   is gold/yellow — that's perfect (matches Check My Fine).
   Just ensure full-width inside tier card and consistent rendering. */
#sanctuary-tiers button[data-tier-quote-open] {
    width: 100% !important;
    /* Reset any conflicting !important rules from Phase 9 */
    background: #FFD700 !important;
    color: #0a0c10 !important;
    border: none !important;
    border-radius: 9999px !important;
    font-family: inherit;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22em !important;
    font-size: 0.7rem !important;
    padding: 0.65rem 1.5rem !important;
    box-shadow: 0 12px 28px rgba(255,215,0,0.22) !important;
    transition: all 0.3s cubic-bezier(.22,1,.36,1) !important;
    cursor: pointer !important;
    display: inline-block;
}
#sanctuary-tiers button[data-tier-quote-open]:hover {
    background: #FFD700 !important;
    color: #0a0c10 !important;
    box-shadow: 0 18px 36px rgba(255,215,0,0.38) !important;
    transform: translateY(-1px) !important;
}
/* Squishy active press */
#sanctuary-tiers button[data-tier-quote-open]:active {
    transform: scale(0.97) !important;
}

/* Be a Partner toggle pill — adjust text color for light bg */
#tapx-be-partner-wrap label {
    color: #ca8a04 !important;
}
#tapx-be-partner-wrap.is-on label {
    color: #0284c7 !important;
}
#tapx-be-partner-wrap {
    background: linear-gradient(135deg, rgba(254,240,138,0.30), rgba(186,230,253,0.30)) !important;
    border: 2px solid rgba(56,189,248,0.55) !important;
}

/* Partner mode bg-tinting on tier cards */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] {
    background: linear-gradient(135deg,
                rgba(254,240,138,0.40) 0%,
                rgba(186,230,253,0.45) 100%) !important;
    border-color: rgba(202,138,4,0.55) !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] {
    background: linear-gradient(135deg,
                rgba(252,211,77,0.55) 0%,
                rgba(125,211,252,0.55) 100%) !important;
    border: 2.5px solid rgba(202,138,4,0.85) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 11 — User Mode / Partner Mode segmented toggle + tiers
═══════════════════════════════════════════════════════════════ */

/* (1) Segmented mode toggle */
.tapx-mode-toggle-wrap {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 0 auto 2rem auto;
    padding: 6px;
    background: rgba(186,230,253,0.40);
    border: 1.5px solid rgba(56,189,248,0.55);
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(56,189,248,0.18),
                inset 0 1px 2px rgba(0,0,0,0.05);
    gap: 0;
    z-index: 1;
}
/* Center the toggle row above the grid */
#sanctuary-tier-pricing-root {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#sanctuary-tier-pricing-root > .tapx-mode-toggle-wrap {
    align-self: center;
}
#sanctuary-tier-pricing-root > .tapx-tiers-pane {
    width: 100%;
}

.tapx-mode-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-headline, sans-serif);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #475569;             /* slate-600 inactive */
    border-radius: 999px;
    transition: color 0.32s cubic-bezier(.22,1,.36,1);
    white-space: nowrap;
}
.tapx-mode-btn .material-symbols-outlined {
    font-size: 18px;
}
.tapx-mode-btn.is-active {
    color: #0a0c10;             /* dark when active */
}
.tapx-mode-btn:hover:not(.is-active) {
    color: #0284c7;
}
.tapx-mode-btn:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

/* The animated glider pill behind the active button */
.tapx-mode-glider {
    position: absolute;
    z-index: 1;
    top: 6px;
    left: 6px;
    height: calc(100% - 12px);
    width: calc(50% - 6px);
    background: linear-gradient(135deg, #FFD700, #FFC700);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(255,215,0,0.30),
                0 2px 6px rgba(15,23,42,0.10);
    transition: transform 0.32s cubic-bezier(.22,1,.36,1),
                background 0.32s cubic-bezier(.22,1,.36,1);
}
.tapx-mode-toggle-wrap[data-active="partner"] .tapx-mode-glider {
    transform: translateX(100%);
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    box-shadow: 0 4px 14px rgba(56,189,248,0.35),
                0 2px 6px rgba(15,23,42,0.10);
}
.tapx-mode-toggle-wrap[data-active="partner"] #tapx-mode-partner-btn {
    color: #ffffff;
}
.tapx-mode-toggle-wrap[data-active="user"] #tapx-mode-user-btn {
    color: #0a0c10;
}

/* (2) Tier panes — crossfade transition */
.tapx-tiers-pane {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.28s cubic-bezier(.22,1,.36,1),
                transform 0.28s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.tapx-tiers-pane.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.tapx-tiers-pane[hidden] {
    /* override default to allow animation */
    display: block !important;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.tapx-tiers-pane.is-active[hidden] {
    /* never both — but defensive */
    visibility: visible;
    height: auto;
}
.tapx-tiers-pane.is-active {
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}

/* (3) PARTNER CARDS — light-blue clean SaaS theme */
.tapx-partner-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #d6ecff;
    border: 1.5px solid rgba(56,189,248,0.45);
    border-radius: 1.5rem;
    padding: 2rem 1.5rem 1.75rem;
    color: #0c4a6e;
    box-shadow: 0 4px 14px rgba(15,23,42,0.06),
                0 2px 6px rgba(56,189,248,0.10);
    transition: transform 0.28s cubic-bezier(.22,1,.36,1),
                box-shadow 0.28s cubic-bezier(.22,1,.36,1),
                border-color 0.28s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
}
.tapx-partner-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(56,189,248,0.22),
                0 8px 20px rgba(15,23,42,0.10);
    border-color: rgba(56,189,248,0.85);
}
.tapx-partner-card--featured {
    background: linear-gradient(135deg, #c7e4ff 0%, #d6ecff 100%);
    border: 2.5px solid #0284c7;
    box-shadow: 0 12px 32px rgba(56,189,248,0.30),
                0 6px 14px rgba(15,23,42,0.10);
    transform: scale(1.03);
    z-index: 2;
}
.tapx-partner-card--featured:hover {
    transform: scale(1.03) translateY(-6px);
}
.tapx-partner-card__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 18px;
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    color: #ffffff;
    font-family: var(--font-headline, sans-serif);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(56,189,248,0.40);
    white-space: nowrap;
    z-index: 5;
}
.tapx-partner-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.65);
    border: 1.5px solid rgba(56,189,248,0.40);
    border-radius: 1rem;
    margin-bottom: 1rem;
    color: #0284c7;
}
.tapx-partner-card__icon .material-symbols-outlined {
    font-size: 32px;
}
.tapx-partner-card--featured .tapx-partner-card__icon {
    background: rgba(255,255,255,0.85);
    border-color: rgba(2,132,199,0.55);
}
.tapx-partner-card__name {
    font-family: var(--font-headline, sans-serif);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #0c4a6e;
    margin-bottom: 0.4rem;
}
.tapx-partner-card--featured .tapx-partner-card__name {
    font-size: 1.65rem;
    color: #0369a1;
}
.tapx-partner-card__tagline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 1.25rem;
}
.tapx-partner-card__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}
.tapx-partner-card__amount {
    font-family: var(--font-headline, sans-serif);
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0284c7;
    line-height: 1;
}
.tapx-partner-card--featured .tapx-partner-card__amount {
    font-size: 2.85rem;
    color: #0369a1;
}
.tapx-partner-card__unit {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #64748b;
    margin-top: 4px;
}
.tapx-partner-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.tapx-partner-card__features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    text-align: left;
    line-height: 1.4;
}
.tapx-partner-card__features li .material-symbols-outlined {
    font-size: 16px;
    color: #0284c7;
    flex-shrink: 0;
}
.tapx-partner-card__cta {
    width: 100%;
    padding: 0.85rem 1.5rem;
    background: #FFD700;
    color: #0a0c10;
    border: none;
    border-radius: 9999px;
    font-family: var(--font-headline, sans-serif);
    font-weight: 900;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(255,215,0,0.22);
    transition: all 0.3s cubic-bezier(.22,1,.36,1);
    margin-top: auto;
}
.tapx-partner-card__cta:hover {
    background: #FFD700;
    box-shadow: 0 18px 36px rgba(255,215,0,0.38);
    transform: translateY(-1px);
}
.tapx-partner-card__cta:active {
    transform: scale(0.97);
}
.tapx-partner-card__cta--featured {
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(56,189,248,0.35);
}
.tapx-partner-card__cta--featured:hover {
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    box-shadow: 0 18px 36px rgba(56,189,248,0.50);
}

/* (4) Responsive — already handled by Tailwind grid classes
   on the .grid wrapper inside each pane (1/2/4 cols) */

/* Mobile: tighten cards */
@media (max-width: 640px) {
    .tapx-partner-card {
        padding: 1.5rem 1.25rem;
    }
    .tapx-partner-card--featured {
        transform: none;
    }
    .tapx-partner-card--featured:hover {
        transform: translateY(-6px);
    }
    .tapx-partner-card__amount {
        font-size: 2.1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 12 — Toggle clipping fix + partner CTA full-width
═══════════════════════════════════════════════════════════════ */

/* (1) Toggle thumb containment fix
   - Track gets box-sizing:border-box so border doesn't add to width
   - Thumb on-position re-calculated: track 50px - thumb 18px - 4px
     padding (2px each side) = 28px ... but with border-box correction,
     we need 26px. Override Phase 8/10 left:28px to use right:2px when
     active for guaranteed alignment. */

/* Universal toggle tracks */
.fine-toggle-track,
.sanctuary-per-head-track,
#tapx-be-partner-wrap .tapx-bp-track {
    box-sizing: border-box !important;
    overflow: hidden !important;          /* clip thumb inside track */
    width: 50px !important;
    height: 26px !important;
    padding: 0 !important;
}

/* Universal toggle thumbs — use right-anchor when ON for perfect fit */
.fine-toggle-input:checked + .fine-toggle-track .fine-toggle-thumb,
.sanctuary-per-head-switch.is-active .sanctuary-per-head-knob,
#tapx-be-partner-wrap.is-on .tapx-bp-knob {
    left: auto !important;
    right: 2px !important;
}

/* OFF position thumb */
.fine-toggle-track .fine-toggle-thumb,
.sanctuary-per-head-track .sanctuary-per-head-knob,
#tapx-be-partner-wrap .tapx-bp-track .tapx-bp-knob {
    left: 2px !important;
    right: auto !important;
    width: 18px !important;
    height: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* (2) Partner card CTA — keep at bottom of card */
.tapx-partner-card button[data-tier-quote-open] {
    margin-top: auto !important;
    width: 100% !important;
    /* Override any width:100% from Tailwind w-full to be explicit */
}

/* (3) Tier modal-related buttons keep their look — use CSS variable
   so the partner cards CTA matches user tier CTA exactly. The
   `bg-primary` Tailwind class is golden #FFD700; the rest is just
   shadow + size which match. */
.tapx-partner-card button[data-tier-quote-open]:hover {
    background: #FFD700 !important;     /* keep golden on hover too */
    transform: translateY(-1px) !important;
}
.tapx-partner-card--featured button[data-tier-quote-open] {
    /* Featured (Reseller) — keep blue gradient identity */
    background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(56,189,248,0.35) !important;
}
.tapx-partner-card--featured button[data-tier-quote-open]:hover {
    background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
    box-shadow: 0 18px 36px rgba(56,189,248,0.50) !important;
}

/* Defensive: kill any leftover thumb overflow on unknown toggles */
[class*="-track"] [class*="-knob"],
[class*="-track"] [class*="-thumb"] {
    box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 13 — Bulletproof tier-pane visibility
   (overrides earlier conflicting rules)
═══════════════════════════════════════════════════════════════ */

/* Hide inactive panes completely (no height bleed) */
.tapx-tiers-pane {
    display: none !important;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.32s cubic-bezier(.22,1,.36,1),
                transform 0.32s cubic-bezier(.22,1,.36,1);
}
.tapx-tiers-pane.is-active {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Cancel the [hidden] attribute trick from Phase 11 */
.tapx-tiers-pane[hidden] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}
.tapx-tiers-pane.is-active[hidden] {
    display: block !important;     /* defensive */
    visibility: visible !important;
    height: auto !important;
}

/* Ensure partner cards have proper layout when visible */
#tapx-partner-tiers .grid {
    display: grid !important;
}
#tapx-partner-tiers .tapx-partner-card {
    display: flex !important;
    flex-direction: column !important;
}

/* Full-card click interaction */
.tapx-partner-card {
    cursor: default;
}

/* On enter animation play once when pane becomes active */
@keyframes tapxPartnerCardIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
#tapx-partner-tiers.is-active .tapx-partner-card {
    animation: tapxPartnerCardIn 0.45s cubic-bezier(.22,1,.36,1) both;
}
#tapx-partner-tiers.is-active .tapx-partner-card:nth-child(1) { animation-delay: 0.05s; }
#tapx-partner-tiers.is-active .tapx-partner-card:nth-child(2) { animation-delay: 0.10s; }
#tapx-partner-tiers.is-active .tapx-partner-card:nth-child(3) { animation-delay: 0.15s; }
#tapx-partner-tiers.is-active .tapx-partner-card:nth-child(4) { animation-delay: 0.20s; }

/* Featured card retains its scale on render (animation overrides it
   because animation has higher specificity). Override after animation. */
#tapx-partner-tiers.is-active .tapx-partner-card--featured {
    animation: tapxPartnerCardInFeatured 0.45s cubic-bezier(.22,1,.36,1) both;
    animation-delay: 0.10s;
}
@keyframes tapxPartnerCardInFeatured {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1.03);
    }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 16 — Force tier cards visible regardless of scroll-reveal
═══════════════════════════════════════════════════════════════ */

/* Partner tier cards must show immediately when their pane is active */
#tapx-partner-tiers .scroll-reveal,
#tapx-user-tiers .scroll-reveal,
.tapx-tiers-pane .scroll-reveal {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    transition: none !important;
}

/* But keep a nice subtle fade-in animation when their pane becomes active */
#tapx-partner-tiers.is-active [data-partner-tier],
#tapx-user-tiers.is-active [data-sanctuary-tier] {
    animation: tapxTierFadeIn 0.5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes tapxTierFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger the fade-in for each card (sequential reveal) */
#tapx-partner-tiers.is-active [data-partner-tier="starter"],
#tapx-user-tiers.is-active [data-sanctuary-tier="startup"] {
    animation-delay: 0.05s;
}
#tapx-partner-tiers.is-active [data-partner-tier="growth"],
#tapx-user-tiers.is-active [data-sanctuary-tier="growth"] {
    animation-delay: 0.10s;
}
#tapx-partner-tiers.is-active [data-partner-tier="pro"],
#tapx-user-tiers.is-active [data-sanctuary-tier="scale"] {
    animation-delay: 0.15s;
}
#tapx-partner-tiers.is-active [data-partner-tier="elite"],
#tapx-user-tiers.is-active [data-sanctuary-tier="fortress"] {
    animation-delay: 0.20s;
}

/* Featured (Most Popular) growth tier — preserve its scale through animation */
#tapx-partner-tiers.is-active [data-partner-tier="growth"] {
    animation: tapxTierFadeInFeatured 0.5s cubic-bezier(.22,1,.36,1) both;
    animation-delay: 0.10s;
}
@keyframes tapxTierFadeInFeatured {
    from {
        opacity: 0;
        transform: translateY(16px) scale(1);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1.05);
    }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 18 — Reset all body.tapx-partner-mode overlays
   (Phase 17 dynamically swaps content via JS, no CSS overlays needed)
═══════════════════════════════════════════════════════════════ */

/* (1) Kill ALL ::before pseudo-elements on tiers in partner mode
   (the "PARTNER" badge overlay is no longer needed — content is swapped) */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier]::before {
    content: none !important;
    display: none !important;
}

/* (2) Kill ALL ::after pseudo-elements on tiers (perks block overlay) */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier]::after {
    content: none !important;
    display: none !important;
}

/* (3) Re-show feature lists in partner mode (Phase 17 swap uses ul) */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="startup"] h3 ~ ul,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] h3 ~ ul,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="scale"] h3 ~ ul,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="fortress"] h3 ~ ul,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] ul {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* (4) Reset background gradient overlay so content stays readable */
body.tapx-partner-mode #sanctuary-tiers .glass-panel,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] {
    background: var(--glass-bg, rgba(255,255,255,0.04)) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
/* Restore Growth's special recommended border in partner mode */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] {
    border-color: rgba(56,189,248,0.55) !important;
    box-shadow: 0 0 100px rgba(56,189,248,0.30) !important;
}

/* (5) Kill h3 "· partner" suffix from Phase 8/9 overlays */
body.tapx-partner-mode #sanctuary-tiers h3::after {
    content: none !important;
    display: none !important;
}

/* (6) Kill button "— Apply" / "(Apply)" suffix */
body.tapx-partner-mode #sanctuary-tiers button[data-tier-quote-open]::after {
    content: none !important;
    display: none !important;
}

/* (7) Kill the "· Partner Program" suffix on Sanctuary Tiers heading
   (multiple definitions added across phases — kill them all) */
body.tapx-partner-mode #sanctuary-tiers h2::after,
body.tapx-partner-mode #sanctuary-tiers h2:first-of-type::after,
body.tapx-partner-mode #sanctuary-tiers > .text-center h2::after {
    content: none !important;
    display: none !important;
}

/* (8) Re-apply original light-blue background for ALL tiers in partner mode
   (matching Phase 10 spec for clean visible cards) */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="startup"],
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"],
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="scale"],
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="fortress"] {
    background: linear-gradient(135deg,
                rgba(186,230,253,0.50) 0%,
                rgba(224,242,254,0.65) 100%) !important;
    border: 1.5px solid rgba(56,189,248,0.50) !important;
    color: #0c4a6e !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] {
    background: linear-gradient(135deg,
                rgba(125,211,252,0.55) 0%,
                rgba(186,230,253,0.70) 100%) !important;
    border: 2.5px solid rgba(2,132,199,0.85) !important;
    box-shadow: 0 0 60px rgba(56,189,248,0.40),
                0 0 100px rgba(56,189,248,0.20) !important;
}

/* (9) Ensure all swapped content (icon, h3, p, ul, div, button) is visible */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] > * {
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* (10) Make sure the icon circle is visible (not hidden by gradient) */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] > .w-16,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] > div:first-of-type {
    display: flex !important;
    visibility: visible !important;
}

/* (11) Tier text colors readable on light blue */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] h3 {
    color: #0c4a6e !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] h3 {
    color: #0369a1 !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] p,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] li,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] li span {
    color: #1e293b !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] .text-primary,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] .sanctuary-tier-price-mode--plan p {
    color: #0284c7 !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] .material-symbols-outlined {
    color: #0284c7 !important;
}

/* (12) Hide the now-unused `tapx-partner-tiers` separate pane */
#tapx-partner-tiers {
    display: none !important;
}

/* (13) Most Popular badge on Growth tier in partner mode */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] .absolute.-top-5 {
    background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 19 — Toggle visibility fix + Most Popular badge position
═══════════════════════════════════════════════════════════════ */

/* (1) Be a Partner toggle — bulletproof rendering */
#tapx-bp-row {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 0 1.5rem 4px !important;
    padding-left: 4px !important;
}
#tapx-bp-switch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 9px 18px 9px 16px !important;
    background: linear-gradient(135deg, rgba(254,240,138,0.18), rgba(186,230,253,0.18)) !important;
    border: 2px solid rgba(56,189,248,0.55) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.32s cubic-bezier(.22,1,.36,1) !important;
    box-shadow: 0 4px 14px rgba(56,189,248,0.15) !important;
    user-select: none !important;
}
#tapx-bp-switch:hover {
    border-color: rgba(254,240,138,0.65) !important;
    box-shadow: 0 6px 22px rgba(56,189,248,0.22),
                0 6px 22px rgba(254,240,138,0.18) !important;
    transform: translateY(-1px) !important;
}
#tapx-bp-switch .tapx-bp-switch-label {
    font-family: var(--font-headline, sans-serif) !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #ca8a04 !important;
    transition: color 0.32s ease !important;
    white-space: nowrap !important;
}
#tapx-bp-switch.is-on .tapx-bp-switch-label {
    color: #0284c7 !important;
}
#tapx-bp-switch .tapx-bp-switch-track {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 22px !important;
    background: rgba(239,68,68,0.55) !important;
    border: 1.5px solid rgba(239,68,68,0.85) !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: all 0.32s cubic-bezier(.22,1,.36,1) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.20) !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}
#tapx-bp-switch .tapx-bp-switch-knob {
    position: absolute !important;
    top: 50% !important;
    left: 2px !important;
    width: 15px !important;
    height: 15px !important;
    transform: translateY(-50%) !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.30) !important;
    transition: left 0.32s cubic-bezier(.22,1,.36,1),
                right 0.32s cubic-bezier(.22,1,.36,1) !important;
}
#tapx-bp-switch.is-on .tapx-bp-switch-track {
    background: rgba(34,197,94,0.65) !important;
    border-color: rgba(34,197,94,0.95) !important;
    box-shadow: 0 0 10px rgba(34,197,94,0.35),
                inset 0 1px 2px rgba(0,0,0,0.15) !important;
}
#tapx-bp-switch.is-on .tapx-bp-switch-knob {
    left: auto !important;
    right: 2px !important;
}

/* (2) Most Popular badge — appear ABOVE the Growth card (top center)
   Same as user tier "Recommended" badge style (-top-5 absolute) */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] {
    overflow: visible !important;       /* allow badge to overflow card top */
    position: relative !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] .tapx-partner-popular-badge {
    /* Phase 21 — keep badge above card, single pill only */
    z-index: 50 !important;
    top: -1.25rem !important;
}

/* (3) Don't clip Growth tier card so badge can extend above */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"].overflow-hidden {
    overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 20 — Toggle .is-on state (track green + knob right)
═══════════════════════════════════════════════════════════════ */

/* When toggle is ON: green track, knob slides to right */
#tapx-bp-switch.is-on .tapx-bp-switch-track {
    background: #22c55e !important;
    border-color: #16a34a !important;
    box-shadow: 0 0 12px rgba(34,197,94,0.45),
                inset 0 1px 2px rgba(0,0,0,0.20) !important;
}
#tapx-bp-switch.is-on .tapx-bp-switch-knob {
    left: auto !important;
    right: 2px !important;
}

/* Switch label color flips when ON */
#tapx-bp-switch.is-on .tapx-bp-switch-label {
    color: #0284c7 !important;
}

/* Hover effect on the toggle */
#tapx-bp-switch:hover {
    border-color: #facc15 !important;
    box-shadow: 0 6px 22px rgba(56,189,248,0.25),
                0 6px 22px rgba(254,240,138,0.20) !important;
    transform: translateY(-1px) !important;
}
#tapx-bp-switch:focus-visible {
    outline: 2px solid #38bdf8 !important;
    outline-offset: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 21 — Most Popular badge: single pill (no outer layer)
═══════════════════════════════════════════════════════════════ */

/* Override Phase 19's outer-wrapper rule — only target the
   single pill via its dedicated marker class */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] > .absolute.-top-5:not(.tapx-partner-popular-badge) {
    /* If any old badge wrapper survives, hide it */
    display: none !important;
}

/* The new badge — keep Recommended layout, swap colors to blue gradient */
.tapx-partner-popular-badge {
    background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(56,189,248,0.45),
                0 4px 10px rgba(0,0,0,0.18) !important;
}

/* Make sure Growth card doesn't clip the badge */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] {
    overflow: visible !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"].overflow-hidden {
    overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 22 — Badge on-line center + text colors enforcement
═══════════════════════════════════════════════════════════════ */

/* (1) Most Popular badge — DEPRECATED: see Phase 31 */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] .tapx-partner-popular-badge {
    top: -1.25rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* (2) Force readable text colors */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] h3 {
    color: #0c4a6e !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] h3 {
    color: #075985 !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] p,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] li,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] li > span:last-child {
    color: #334155 !important;
}
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] .text-slate-400,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] .text-slate-500,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] .text-slate-600 {
    color: #334155 !important;
}

/* (3) Price (large amount) — sky-blue */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] .text-primary,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] .sanctuary-tier-price-mode--plan p:first-child {
    color: #0284c7 !important;
}

/* (4) Check icons sky-blue */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] li .material-symbols-outlined {
    color: #0284c7 !important;
}

/* (5) Borders */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] [class*="border-white"] {
    border-color: rgba(125,211,252,0.55) !important;
}

/* (6) navy-depth-3d adapt for light bg */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier] h3.navy-depth-3d {
    text-shadow: 0 1px 0 rgba(255,255,255,0.40),
                 0 2px 4px rgba(2,132,199,0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 23 — Most Popular badge: match Recommended look exactly
═══════════════════════════════════════════════════════════════ */

/* Override Phase 22's "on the line" position — move badge back
   fully above the card like the Recommended badge */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] .tapx-partner-popular-badge {
    top: -1.25rem !important;            /* same as Tailwind -top-5 */
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Match the deeper royal blue look from Recommended badge screenshot
   (overrides the lighter sky-blue gradient from Phase 21) */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] .tapx-partner-popular-badge,
.tapx-partner-popular-badge {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(29, 78, 216, 0.45),
                0 4px 12px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Also update the user-tier Recommended badge to the same deeper blue
   for visual consistency (matches image 2 reference) */
#sanctuary-tiers [data-sanctuary-tier="growth"] > .absolute.-top-5:not(.tapx-partner-popular-badge) {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(29, 78, 216, 0.45),
                0 4px 12px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 24 — Badge sits ON the top border line (path)
═══════════════════════════════════════════════════════════════ */

/* DEPRECATED — see Phase 31 */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] .tapx-partner-popular-badge {
    top: -1.25rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Keep solid deep royal blue so overlap stays clean (no see-through).
   Slightly stronger gradient to make sure it stays visible against
   the light-blue card background underneath. */
.tapx-partner-popular-badge,
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] .tapx-partner-popular-badge {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 32px rgba(29, 78, 216, 0.55),
                0 6px 14px rgba(0, 0, 0, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    /* Ensure full opacity */
    opacity: 1 !important;
    backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 25 — Most Popular = Recommended (exact match)
═══════════════════════════════════════════════════════════════ */

/* Match the Recommended badge position exactly: line passes through
   the LOWER portion of the badge (mostly above card, slight overlap) */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] .tapx-partner-popular-badge,
.tapx-partner-popular-badge {
    top: -1.25rem !important;            /* same as Tailwind -top-5 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* Solid royal blue gradient — matches Recommended in image 3 */
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(29, 78, 216, 0.45),
                0 4px 12px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 26 — User-mode tier text readable on light-blue cards
═══════════════════════════════════════════════════════════════ */

/* Force dark text on tier features and meta (overrides slate-400/dark variants) */
#sanctuary-tiers [data-sanctuary-tier] li {
    color: #1e293b !important;          /* slate-800 */
}
#sanctuary-tiers [data-sanctuary-tier] li > span:last-child {
    color: #1e293b !important;
}
#sanctuary-tiers [data-sanctuary-tier] li .material-symbols-outlined,
#sanctuary-tiers [data-sanctuary-tier] li svg {
    /* leave check icons in their existing primary color */
}

/* Tagline / sub-text under heading */
#sanctuary-tiers [data-sanctuary-tier] p.text-slate-400,
#sanctuary-tiers [data-sanctuary-tier] p.text-slate-500,
#sanctuary-tiers [data-sanctuary-tier] p.text-slate-600,
#sanctuary-tiers [data-sanctuary-tier] p[class*="text-slate-"] {
    color: #334155 !important;          /* slate-700 */
}

/* Annually / Monthly toggle buttons */
#sanctuary-tiers .sanctuary-tier-billing-toggle {
    color: #334155 !important;          /* slate-700 */
}

/* Calculation breakdown line we add via JS */
.tapx-annual-calc {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #475569 !important;          /* slate-600 readable */
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    letter-spacing: 0.02em !important;
}
.tapx-annual-calc .tapx-annual-calc-was {
    text-decoration: line-through !important;
    text-decoration-color: rgba(100, 116, 139, 0.65) !important;
    color: #64748b !important;          /* slate-500 */
    margin-right: 4px !important;
}
.tapx-annual-calc .tapx-annual-calc-save {
    color: #16a34a !important;          /* green-600 — savings highlight */
    font-weight: 900 !important;
    margin-left: 6px !important;
    background: rgba(34, 197, 94, 0.15) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 27 — Restyle calc line: just original (struck) + save badge
═══════════════════════════════════════════════════════════════ */

/* Improve spacing & alignment for the new simpler format */
.tapx-annual-calc {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.tapx-annual-calc .tapx-annual-calc-was {
    margin-right: 0 !important;
    font-size: 11px !important;
}
.tapx-annual-calc .tapx-annual-calc-save {
    margin-left: 0 !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 28 — Landing page background: PLAIN WHITE (user request)
   Per latest user request, body background changed from the previous
   yellow+sky-blue blend to a clean #ffffff white. Dark mode preserved.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   3D BACKGROUND ANIMATION — FULLY DISABLED per user request
   The Futuristic3DBackground (particles, wireframes, rings, aurora,
   beams, sheen, swirl) has been turned off both via config and via
   this CSS as a hard safety net. Landing page now shows the clean
   white body background without any animated overlays.
═══════════════════════════════════════════════════════════════ */
#sanctuary-backdrop,
#sanctuary-backdrop *,
#vortex-canvas,
.sanctuary-backdrop__aurora,
.sanctuary-backdrop__beams,
.sanctuary-backdrop__sheen,
.sanctuary-backdrop__base {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Body — soft off-white in light mode (slightly lighter than pure white) */
html:not(.dark) body,
html:not(.dark) body.bg-background-light {
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 35%, #e8f1fc 70%, #ffffff 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* Footer — match the same vibe with subtle gradient */
/* removed: html:not(.dark) footer.bg-background-light */

/* Sections that have `bg-background-light` — let the body show through */
html:not(.dark) section.bg-background-light,
html:not(.dark) main.bg-background-light,
html:not(.dark) div.bg-background-light:not(.glass-panel):not([data-sanctuary-tier]) {
    background: transparent !important;
}

/* Glass panels — slight tint adjustment so they sit nicely on the new bg */
html:not(.dark) .glass-panel:not([data-sanctuary-tier]) {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
}

/* Hero / dark-themed sections — preserve darker look so contrast stays */
html:not(.dark) .bg-background-dark {
    background-color: #0a2540 !important;   /* keep dark hero strip dark */
}

/* Header — translucent so background shows through */
html:not(.dark) header,
html:not(.dark) nav.fixed,
html:not(.dark) [class*="header"][class*="fixed"] {
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

/* Glass panels — slight tint adjustment so they sit nicely on the new bg */
html:not(.dark) .glass-panel:not([data-sanctuary-tier]) {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
}

/* Hero / dark-themed sections — preserve darker look so contrast stays */
html:not(.dark) .bg-background-dark {
    background-color: #0a2540 !important;   /* keep dark hero strip dark */
}

/* Header — translucent so background shows through */
html:not(.dark) header,
html:not(.dark) nav.fixed,
html:not(.dark) [class*="header"][class*="fixed"] {
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 29 — Animated story scene replacing "Why free first" slide
═══════════════════════════════════════════════════════════════ */

.tapx-story-panel {
    padding: 0 !important;
    overflow: hidden;
    position: relative;
}
.tapx-story-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 280px;
    max-height: 360px;
    background: linear-gradient(180deg, #c8d2e0 0%, #fef9c3 65%, #bcd3f0 100%);
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    margin-bottom: 12px;
}
.tapx-story-eyebrow,
.tapx-story-headline {
    padding: 0 22px;
    margin-top: 4px !important;
}
.tapx-story-panel .ff-hub-flip__cta {
    margin: 12px 22px 22px;
}

/* Sky and road */
.tapx-story-sky {
    position: absolute;
    inset: 0 0 35% 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(254,240,138,0.6), transparent 60%);
    pointer-events: none;
}
.tapx-story-road {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.4);
}
.tapx-story-road::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg,
        #bcd3f0 0 24px, transparent 24px 44px);
    transform: translateY(-50%);
    animation: tapxRoadDash 1.4s linear infinite;
}
@keyframes tapxRoadDash {
    0% { background-position: 0 0; }
    100% { background-position: 44px 0; }
}

/* Scene base */
.tapx-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.tapx-scene.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* SCENE 1 — sad man + car + fines */
.tapx-scene-1 .tapx-car {
    position: absolute;
    bottom: 18%;
    right: 8%;
    width: 38%;
    max-width: 200px;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
    animation: tapxCarShake 0.4s ease-in-out infinite alternate;
}
@keyframes tapxCarShake {
    0% { transform: translateX(0) rotate(-0.3deg); }
    100% { transform: translateX(2px) rotate(0.3deg); }
}
.tapx-scene-1 .tapx-man-sad {
    position: absolute;
    bottom: 15%;
    left: 18%;
    width: 22%;
    max-width: 100px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.tapx-tear {
    animation: tapxTearFall 1.2s ease-in infinite;
}
@keyframes tapxTearFall {
    0%, 100% { opacity: 0; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(8px); }
}
.tapx-fine-paper {
    position: absolute;
    background: #fef3c7;
    border: 1.5px solid #dc2626;
    color: #991b1b;
    font-family: var(--font-headline, sans-serif);
    font-weight: 900;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    padding: 5px 8px;
    border-radius: 3px;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    transform: rotate(-8deg);
}
.tapx-fine-paper span {
    color: #dc2626;
    font-size: 10px;
}
.tapx-fine-1 { top: 18%; left: 30%; animation: tapxFineFloat1 3s ease-in-out infinite; }
.tapx-fine-2 { top: 30%; left: 55%; transform: rotate(12deg); animation: tapxFineFloat2 3.4s ease-in-out infinite; }
.tapx-fine-3 { top: 12%; left: 72%; transform: rotate(-5deg); animation: tapxFineFloat3 2.8s ease-in-out infinite; }
@keyframes tapxFineFloat1 {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50% { transform: rotate(-12deg) translateY(-6px); }
}
@keyframes tapxFineFloat2 {
    0%, 100% { transform: rotate(12deg) translateY(0); }
    50% { transform: rotate(8deg) translateY(-8px); }
}
@keyframes tapxFineFloat3 {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    50% { transform: rotate(-1deg) translateY(-5px); }
}

/* SCENE 2 — friend arrives */
.tapx-scene-2 .tapx-man-friend {
    position: absolute;
    bottom: 15%;
    left: 50%;
    width: 22%;
    max-width: 100px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    transform: translateX(-100vw);
}
.tapx-scene-2.is-active .tapx-man-friend {
    animation: tapxFriendEnter 0.9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes tapxFriendEnter {
    from { transform: translateX(-100vw); }
    to { transform: translateX(0); }
}

/* SCENE 3 — phone with 1tapx */
.tapx-phone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36%;
    max-width: 140px;
    aspect-ratio: 9 / 18;
    background: #1f2937;
    border-radius: 18px;
    padding: 14px 8px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35),
                inset 0 0 0 2px rgba(255,255,255,0.08);
}
.tapx-phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f0f9ff, #fef9c3);
    border-radius: 10px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tapx-phone-logo {
    text-align: center;
    font-family: var(--font-headline, sans-serif);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1;
}
.tapx-logo-1 { color: #facc15; }
.tapx-logo-tap { color: #0284c7; }
.tapx-logo-x { color: #facc15; }
.tapx-phone-fines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 4px 0;
}
.tapx-phone-fine-row {
    display: flex;
    justify-content: space-between;
    background: rgba(255,255,255,0.6);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    color: #1e293b;
}
.tapx-phone-fine-row span:last-child {
    color: #dc2626;
    font-weight: 900;
}
.tapx-phone-btn {
    background: linear-gradient(135deg, #facc15, #f59e0b);
    color: #1e293b;
    font-family: var(--font-headline, sans-serif);
    font-weight: 900;
    font-size: 9px;
    letter-spacing: 0.08em;
    padding: 6px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(250,204,21,0.4);
}
.tapx-finger {
    position: absolute;
    bottom: 0;
    right: -10%;
    width: 28%;
    max-width: 50px;
    z-index: 5;
    opacity: 0;
}
.tapx-scene-3.is-active .tapx-finger {
    animation: tapxFingerTap 1.4s ease-in-out 0.5s forwards;
}
@keyframes tapxFingerTap {
    0% { opacity: 0; transform: translate(40px, 30px) rotate(-25deg) scale(0.8); }
    50% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
    65% { transform: translate(0, 6px) rotate(0deg) scale(1.05); }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
.tapx-ripple {
    position: absolute;
    bottom: 18%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #facc15;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.tapx-scene-3.is-active .tapx-ripple {
    animation: tapxRipple 1.2s ease-out 1.5s 2;
}
@keyframes tapxRipple {
    0% { width: 10px; height: 10px; opacity: 1; }
    100% { width: 100px; height: 100px; opacity: 0; }
}

/* SCENE 4 — both happy */
.tapx-scene-4 .tapx-man-happy-1 {
    position: absolute;
    bottom: 15%;
    left: 22%;
    width: 22%;
    max-width: 100px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    animation: tapxJump 0.6s ease-in-out infinite alternate;
}
.tapx-scene-4 .tapx-man-happy-2 {
    position: absolute;
    bottom: 15%;
    right: 22%;
    width: 22%;
    max-width: 100px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    animation: tapxJump 0.6s ease-in-out infinite alternate-reverse;
}
@keyframes tapxJump {
    from { transform: translateY(0); }
    to { transform: translateY(-12px); }
}
.tapx-success-badge {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-family: var(--font-headline, sans-serif);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.15em;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(34,197,94,0.5);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.tapx-success-badge .material-symbols-outlined {
    font-size: 16px;
}
.tapx-scene-4.is-active .tapx-success-badge {
    animation: tapxBadgePop 0.6s cubic-bezier(.34,1.56,.64,1) 0.3s forwards;
}
@keyframes tapxBadgePop {
    to { transform: translate(-50%, -50%) scale(1); }
}
.tapx-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.tapx-confetti span {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 12px;
    background: #facc15;
    opacity: 0;
}
.tapx-confetti span:nth-child(1) { left: 12%; background: #facc15; }
.tapx-confetti span:nth-child(2) { left: 28%; background: #38bdf8; }
.tapx-confetti span:nth-child(3) { left: 42%; background: #22c55e; }
.tapx-confetti span:nth-child(4) { left: 56%; background: #f43f5e; }
.tapx-confetti span:nth-child(5) { left: 70%; background: #facc15; }
.tapx-confetti span:nth-child(6) { left: 84%; background: #a855f7; }
.tapx-confetti span:nth-child(7) { left: 20%; background: #fb923c; }
.tapx-confetti span:nth-child(8) { left: 65%; background: #06b6d4; }
.tapx-scene-4.is-active .tapx-confetti span {
    animation: tapxConfettiFall 2.4s linear 0.4s infinite;
}
.tapx-scene-4.is-active .tapx-confetti span:nth-child(2) { animation-delay: 0.5s; }
.tapx-scene-4.is-active .tapx-confetti span:nth-child(3) { animation-delay: 0.7s; }
.tapx-scene-4.is-active .tapx-confetti span:nth-child(4) { animation-delay: 0.2s; }
.tapx-scene-4.is-active .tapx-confetti span:nth-child(5) { animation-delay: 0.9s; }
.tapx-scene-4.is-active .tapx-confetti span:nth-child(6) { animation-delay: 0.4s; }
.tapx-scene-4.is-active .tapx-confetti span:nth-child(7) { animation-delay: 1.1s; }
.tapx-scene-4.is-active .tapx-confetti span:nth-child(8) { animation-delay: 0.65s; }
@keyframes tapxConfettiFall {
    0% { opacity: 0; transform: translateY(0) rotate(0deg); }
    10% { opacity: 1; }
    100% { opacity: 0; transform: translateY(360px) rotate(540deg); }
}

/* Captions / speech bubbles */
.tapx-caption {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: white;
    padding: 8px 14px;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
    font-family: var(--font-headline, sans-serif);
    font-weight: 800;
    font-size: 11px;
    color: #1e293b;
    white-space: nowrap;
    max-width: 90%;
    text-align: center;
    opacity: 0;
}
.tapx-scene.is-active .tapx-caption {
    animation: tapxCaptionIn 0.5s ease 0.4s forwards;
}
@keyframes tapxCaptionIn {
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.tapx-caption::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 30%;
    border: 6px solid transparent;
    border-top-color: white;
    border-bottom: 0;
}
.tapx-caption-text { display: inline-block; }

/* Replay + mute buttons */
.tapx-story-replay,
.tapx-story-mute {
    position: absolute;
    bottom: 8px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}
.tapx-story-replay { right: 8px; }
.tapx-story-mute { right: 46px; }
.tapx-story-replay:hover,
.tapx-story-mute:hover {
    background: white;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tapx-story-replay .material-symbols-outlined,
.tapx-story-mute .material-symbols-outlined {
    font-size: 18px;
    color: #1e293b;
}

/* Mobile / smaller screens */
@media (max-width: 600px) {
    .tapx-story-stage { aspect-ratio: 4 / 3; min-height: 240px; }
    .tapx-caption { font-size: 10px; padding: 6px 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 30 — User tier dark text + sky-blue prices + badge fix
═══════════════════════════════════════════════════════════════ */

/* (1) USER TIER FEATURES — force dark readable text
   High specificity to beat Tailwind dark:text-* variants and any
   legacy gold/yellow rules from earlier phases */
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] li,
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] li *,
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] li > span:last-child,
#sanctuary-tiers [data-sanctuary-tier] li,
#sanctuary-tiers [data-sanctuary-tier] li > span:not(.material-symbols-outlined) {
    color: #1e293b !important;        /* slate-800 — strong dark */
    text-shadow: none !important;
}

/* Tier name (h3) — strong dark slate */
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] h3 {
    color: #0f172a !important;         /* slate-900 */
    -webkit-text-fill-color: #0f172a !important;
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}
/* Growth special: keep its gradient look but darker for readability */
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier="growth"] h3 {
    color: #0c4a6e !important;
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 60%, #0369a1 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Tagline / sub-text */
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] p:not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]) {
    color: #334155 !important;          /* slate-700 */
}

/* Annually / Monthly toggle buttons */
html:not(.dark) #sanctuary-tiers .sanctuary-tier-billing-toggle,
html:not(.dark) #sanctuary-tiers .sanctuary-tier-billing-toggle * {
    color: #334155 !important;          /* slate-700 */
}

/* Check icons stay sky-blue (matches the partner mode look) */
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] li .material-symbols-outlined,
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] li svg.feather,
#sanctuary-tiers [data-sanctuary-tier] li svg circle,
#sanctuary-tiers [data-sanctuary-tier] li svg path {
    color: #0284c7 !important;          /* sky-600 */
    stroke: #0284c7 !important;
    fill: #0284c7 !important;
}

/* (2) PRICE COLOR — change from yellow/gold (text-primary) to sky-blue */
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] .text-primary,
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] p.text-primary,
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] [class*="text-primary"],
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] .sym-dirham-tierpng,
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] svg.sym-dirham-tierpng {
    color: #0284c7 !important;
    -webkit-text-fill-color: #0284c7 !important;
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    fill: #0284c7 !important;
}

/* The annual price button highlight (e.g. "20,697") */
html:not(.dark) #sanctuary-tiers .sanctuary-tier-billing-toggle .text-primary,
html:not(.dark) #sanctuary-tiers .sanctuary-tier-billing-toggle span.text-primary {
    color: #0284c7 !important;
    -webkit-text-fill-color: #0284c7 !important;
}

/* Special handling for the BIG price (text-3xl/4xl/5xl with text-primary) */
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] p[class*="text-3xl"],
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] p[class*="text-4xl"],
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier] p[class*="text-5xl"] {
    color: #0284c7 !important;
    -webkit-text-fill-color: #0284c7 !important;
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}
/* Growth keeps a slightly more saturated price */
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier="growth"] p[class*="text-4xl"],
html:not(.dark) #sanctuary-tiers [data-sanctuary-tier="growth"] p[class*="text-5xl"] {
    color: #0369a1 !important;
    -webkit-text-fill-color: #0369a1 !important;
}

/* (3) MOST POPULAR badge — sit ON the top line (same as Recommended) */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] .tapx-partner-popular-badge,
.tapx-partner-popular-badge {
    /* Tailwind -top-5 = -1.25rem positions badge with bottom edge
       sitting on the card's top border line (line at 1/4 from bottom
       of badge) — same as Recommended badge */
    top: -1.25rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(29, 78, 216, 0.45),
                0 4px 12px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    z-index: 30 !important;
}

/* Make sure Growth card doesn't clip the badge */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"],
#sanctuary-tiers [data-sanctuary-tier="growth"] {
    overflow: visible !important;
}

/* (4) "PER EMPLOYEE" toggle pill — keep red/white (matches partner toggle) */
html:not(.dark) #sanctuary-tiers .sanctuary-per-head-track {
    background: rgba(239,68,68,0.45) !important;
    border-color: rgba(239,68,68,0.75) !important;
}
html:not(.dark) #sanctuary-tiers .sanctuary-per-head-toggle.is-active .sanctuary-per-head-track {
    background: rgba(34,197,94,0.55) !important;
    border-color: rgba(34,197,94,0.85) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 31 — FINAL Most Popular position lock (matches Recommended)
   This is the LAST rule in the stylesheet, max specificity, wins all
═══════════════════════════════════════════════════════════════ */

/* Apply to BOTH the partner mode and any standalone instance */
html body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] .tapx-partner-popular-badge,
html #sanctuary-tiers [data-sanctuary-tier] .tapx-partner-popular-badge,
html .tapx-partner-popular-badge {
    /* Phase 32: pushed up further so badge sits MOSTLY ABOVE the line */
    top: -1.75rem !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 32 — Badge sits ABOVE line (bottom edge on line)
═══════════════════════════════════════════════════════════════ */

/* Maximum specificity — this WILL win */
html body #sanctuary-tiers [data-sanctuary-tier="growth"] .tapx-partner-popular-badge.tapx-partner-popular-badge,
html body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"] .tapx-partner-popular-badge.tapx-partner-popular-badge {
    top: -1.75rem !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
}

/* Make sure card doesn't clip the badge that now extends further above */
body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"],
#sanctuary-tiers [data-sanctuary-tier="growth"] {
    overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 33 — Force overflow visible on Growth card (badge above)
═══════════════════════════════════════════════════════════════ */

/* Badge needs to extend ABOVE the card, so card MUST allow overflow */
html body #sanctuary-tiers [data-sanctuary-tier="growth"],
html body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"],
html body #sanctuary-tiers [data-sanctuary-tier="growth"].overflow-hidden,
html body.tapx-partner-mode #sanctuary-tiers [data-sanctuary-tier="growth"].overflow-hidden {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Position relative to anchor the badge */
html body #sanctuary-tiers [data-sanctuary-tier="growth"] {
    position: relative !important;
}

/* Also make sure the parent grid container doesn't clip */
html body #sanctuary-tiers,
html body #tapx-user-tiers,
html body #tapx-user-tiers > .grid {
    overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 34 — Partner-mode "Most Popular" badge: center on top line
   Match the user-mode "Recommended" badge exactly (image 2 reference)
═══════════════════════════════════════════════════════════════ */

/* Ensure partner-tiers container + grid allow badge to extend above */
html body #tapx-partner-tiers,
html body #tapx-partner-tiers .grid,
html body #tapx-partner-tiers > .grid {
    overflow: visible !important;
}
html body #tapx-partner-tiers [data-partner-tier],
html body #tapx-partner-tiers [data-partner-tier="growth"] {
    overflow: visible !important;
    position: relative !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 34 — Partner-mode "Most Popular" badge: center on top line
   Match the user-mode "Recommended" badge exactly (image 2 reference)
═══════════════════════════════════════════════════════════════ */

/* Ensure partner-tiers container + grid allow badge to extend above */
html body #tapx-partner-tiers,
html body #tapx-partner-tiers .grid,
html body #tapx-partner-tiers > .grid {
    overflow: visible !important;
}
html body #tapx-partner-tiers [data-partner-tier],
html body #tapx-partner-tiers [data-partner-tier="growth"] {
    overflow: visible !important;
    position: relative !important;
}

/* Hard override on the inline Most Popular badge — uses [data-partner-popular-badge]
   attribute (NOT the .tapx-partner-popular-badge class, to avoid inheriting
   phase-31's -1.75rem top which sits ABOVE the line; we want ON the line). */
html body [data-partner-popular-badge],
html body #tapx-partner-tiers [data-partner-tier="growth"] > [data-partner-popular-badge],
html body.tapx-partner-mode #tapx-partner-tiers [data-partner-tier="growth"] > [data-partner-popular-badge] {
    position: absolute !important;
    top: -1.25rem !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 30 !important;
    /* Royal blue gradient — exact match with Recommended badge */
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(29, 78, 216, 0.45),
                0 4px 12px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 35 — Modal dropdown popovers always on top, never clipped
   Fixes Add Employee / Add Compliance / Add Vehicle search dropdowns
═══════════════════════════════════════════════════════════════ */

/* Searchable select panels INSIDE any modal — fixed positioning + max z
   PLUS GPU layer promotion (translate3d + will-change) so they compete
   against native controls like <input type="date"> which render on
   their own compositor layer and would otherwise show through. */
html body #entity-modal .dash-searchable-panel,
html body #entity-modal #emirates-combo-popover,
html body #entity-modal #doc-emirate-combo-popover,
html body #entity-modal #vehicle-plate-emirate-popover,
html body #entity-modal [data-emirate-popover],
html body #compliance-add-modal .dash-searchable-panel,
html body #emp-service-request-modal .dash-searchable-panel,
html body #veh-service-request-modal .dash-searchable-panel,
html body #fine-form-modal .dash-searchable-panel,
html body #bulk-doc-link-modal .dash-searchable-panel,
html body #bulk-selection-action-modal .dash-searchable-panel {
    z-index: 2147483647 !important;       /* max int32 — wins everything */
    /* GPU layer promotion — beats native date input compositor layer */
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    will-change: transform !important;
    isolation: isolate !important;
    /* Solid opaque background so nothing bleeds through */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85),
                0 8px 20px rgba(0, 0, 0, 0.45) !important;
}

/* Solid backgrounds to prevent any transparency bleed */
html body #entity-modal #emirates-combo-popover,
html body #entity-modal #doc-emirate-combo-popover,
html body #entity-modal [data-emirate-popover],
html body #entity-modal .dash-searchable-panel,
html body #compliance-add-modal .dash-searchable-panel {
    background-color: #1a1a1a !important;
}
#tapx-dash-overlay:not(.dark) #entity-modal #emirates-combo-popover,
#tapx-dash-overlay:not(.dark) #entity-modal #doc-emirate-combo-popover,
#tapx-dash-overlay:not(.dark) #entity-modal [data-emirate-popover],
#tapx-dash-overlay:not(.dark) #entity-modal .dash-searchable-panel,
#tapx-dash-overlay:not(.dark) #compliance-add-modal .dash-searchable-panel {
    background-color: #ffffff !important;
}

/* The wrap/root containing the trigger — always-on high stacking
   (no :focus-within dependency, since clicks on popover items can
   move focus away from the input) */
html body #entity-modal #emirates-combo-root,
html body #entity-modal #doc-emirate-combo-root,
html body #entity-modal #vehicle-plate-emirate-root,
html body #entity-modal .dash-searchable-wrap,
html body #compliance-add-modal .dash-searchable-wrap,
html body #emp-service-request-modal .dash-searchable-wrap,
html body #veh-service-request-modal .dash-searchable-wrap {
    position: relative !important;
    z-index: 999999 !important;            /* always on top of sibling fields */
    isolation: isolate !important;
}

/* Force all date inputs and their parents to LOWER stacking so the
   native date input layer cannot overlap our popovers */
html body #entity-modal input[type="date"],
html body #entity-modal input[type="date"]:not(:focus),
html body #compliance-add-modal input[type="date"]:not(:focus) {
    position: relative;
    z-index: 0;
    isolation: auto;
}
html body #entity-modal .form-employee-row3,
html body #entity-modal .form-employee-row4,
html body #entity-modal .form-vehicle-row,
html body #entity-modal input[type="date"]:not(:focus) ~ *,
html body #entity-modal :has(> input[type="date"]:not(:focus)) {
    z-index: 1;
}

/* Don't let any inner ancestor of the popover create a clipping context */
html body #entity-modal-panel,
html body #compliance-add-modal-panel,
html body #entity-modal .entity-modal-form,
html body #compliance-add-modal .entity-modal-form {
    contain: none !important;
}
html body #entity-modal-panel form,
html body #compliance-add-modal-panel form,
html body #entity-modal .entity-modal-form > *,
html body #compliance-add-modal .entity-modal-form > * {
    overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 36 — Modal dropdown polish: smooth scrolling, sticky search,
   crisp hover/selected states, modern SaaS appearance
═══════════════════════════════════════════════════════════════ */

/* Smooth internal scroll, no momentum jump on touch */
html body #entity-modal .dash-searchable-panel,
html body #entity-modal #emirates-combo-popover,
html body #entity-modal #doc-emirate-combo-popover,
html body #entity-modal #vehicle-plate-emirate-popover,
html body #entity-modal [data-emirate-popover],
html body #compliance-add-modal .dash-searchable-panel,
html body #emp-service-request-modal .dash-searchable-panel,
html body #veh-service-request-modal .dash-searchable-panel,
html body #fine-form-modal .dash-searchable-panel {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    border-radius: 12px !important;
}
html body #entity-modal .dash-searchable-panel::-webkit-scrollbar,
html body #entity-modal [data-emirate-popover]::-webkit-scrollbar,
html body #compliance-add-modal .dash-searchable-panel::-webkit-scrollbar {
    width: 6px;
}
html body #entity-modal .dash-searchable-panel::-webkit-scrollbar-thumb,
html body #entity-modal [data-emirate-popover]::-webkit-scrollbar-thumb,
html body #compliance-add-modal .dash-searchable-panel::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 6px;
}

/* Light-mode opaque background — clean modern SaaS appearance */
#tapx-dash-overlay:not(.dark) #entity-modal .dash-searchable-panel,
#tapx-dash-overlay:not(.dark) #entity-modal #emirates-combo-popover,
#tapx-dash-overlay:not(.dark) #entity-modal #doc-emirate-combo-popover,
#tapx-dash-overlay:not(.dark) #entity-modal [data-emirate-popover],
#tapx-dash-overlay:not(.dark) #compliance-add-modal .dash-searchable-panel {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}
#tapx-dash-overlay.dark #entity-modal .dash-searchable-panel,
#tapx-dash-overlay.dark #entity-modal #emirates-combo-popover,
#tapx-dash-overlay.dark #entity-modal [data-emirate-popover],
#tapx-dash-overlay.dark #compliance-add-modal .dash-searchable-panel {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* Sticky search input inside popover (if present) */
html body #entity-modal .dash-searchable-panel input[type="search"],
html body #entity-modal .dash-searchable-panel .dash-searchable-search,
html body #compliance-add-modal .dash-searchable-panel input[type="search"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: inherit !important;
    border-bottom: 1px solid rgba(148,163,184,0.18) !important;
}

/* Hover & selected states — unified cream/gold per dashboard theme.
   Single clean highlight, no border, no shadow. */
html body #entity-modal .dash-searchable-list li:hover,
html body #entity-modal .dash-searchable-list button:hover,
html body #entity-modal [data-emirate-popover] li:hover,
html body #entity-modal [data-emirate-popover] button:hover {
    background: #fff7da !important;
    color: #0f172a !important;
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
    transition: background 0.12s ease !important;
}
html body #entity-modal .dash-searchable-list li[aria-selected="true"],
html body #entity-modal .dash-searchable-list .is-selected {
    background: rgba(255, 215, 0, 0.18) !important;
    color: #b8860b !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Slide-up flip variant — different shadow direction when popover is above */
html body [data-tapx-pos="above"] {
    box-shadow: 0 -16px 48px rgba(0,0,0,0.32),
                0 -4px 14px rgba(0,0,0,0.18),
                0 0 0 1px rgba(15,23,42,0.06) !important;
}


    /* ─── Backdrop (the modal's outer fixed div) — same for all */
    #tapx-dash-overlay #entity-modal,
    #tapx-dash-overlay #fine-form-modal,
    #tapx-dash-overlay #emp-service-request-modal,
    #tapx-dash-overlay #veh-service-request-modal,
    #tapx-dash-overlay #bulk-doc-link-modal,
    #tapx-dash-overlay #bulk-selection-action-modal,
    #tapx-dash-overlay #tapx-invoice-add-modal,
    #tapx-dash-overlay #compliance-modal,
    #tapx-dash-overlay #toll-add-modal {
        background-color: rgba(0, 0, 0, 0.78) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }

    /* ─── Modal panel — unified look across all modals */
    #tapx-dash-overlay #entity-modal-panel,
    #tapx-dash-overlay #fine-form-panel,
    #tapx-dash-overlay #emp-service-request-panel,
    #tapx-dash-overlay #veh-service-request-panel,
    #tapx-dash-overlay #bulk-doc-link-panel,
    #tapx-dash-overlay #bulk-selection-action-panel,
    #tapx-dash-overlay #tapx-invoice-add-modal > div,
    #tapx-dash-overlay #compliance-modal > div,
    #tapx-dash-overlay #toll-add-modal > div {
        background-color: #141414 !important;
        border: 1px solid rgba(255, 215, 0, 0.18) !important;
        border-radius: 16px !important;
        box-shadow:
            0 32px 80px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
    }

    /* Sticky modal headers — same gradient + accent on all */
    #tapx-dash-overlay #entity-modal-panel .sticky.top-0,
    #tapx-dash-overlay #fine-form-panel .sticky.top-0,
    #tapx-dash-overlay #emp-service-request-panel .sticky.top-0,
    #tapx-dash-overlay #veh-service-request-panel .sticky.top-0 {
        background: linear-gradient(180deg, rgba(20, 20, 20, 0.98) 0%, rgba(20, 20, 20, 0.92) 100%) !important;
        border-bottom: 1px solid rgba(255, 215, 0, 0.12) !important;
    }

    /* Modal title — unified gold accent + size */
    #tapx-dash-overlay #modal-entity-title,
    #tapx-dash-overlay #fine-form-title,
    #tapx-dash-overlay #emp-service-request-title,
    #tapx-dash-overlay #veh-service-request-title {
        color: #FFD700 !important;
        font-size: 0.875rem !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.16em !important;
    }

    /* ─── Light-mode overrides keep the warm cream palette */
    #tapx-dash-overlay:not(.dark) #entity-modal-panel,
    #tapx-dash-overlay:not(.dark) #fine-form-panel,
    #tapx-dash-overlay:not(.dark) #emp-service-request-panel,
    #tapx-dash-overlay:not(.dark) #veh-service-request-panel,
    #tapx-dash-overlay:not(.dark) #bulk-doc-link-panel,
    #tapx-dash-overlay:not(.dark) #bulk-selection-action-panel,
    #tapx-dash-overlay:not(.dark) #tapx-invoice-add-modal > div,
    #tapx-dash-overlay:not(.dark) #compliance-modal > div,
    #tapx-dash-overlay:not(.dark) #toll-add-modal > div {
        background-color: #fdfdf9 !important;
        border: 1px solid rgba(15, 23, 42, 0.10) !important;
        box-shadow:
            0 32px 80px rgba(15, 23, 42, 0.18),
            0 0 0 1px rgba(15, 23, 42, 0.04) inset !important;
    }
    #tapx-dash-overlay:not(.dark) #entity-modal-panel .sticky.top-0,
    #tapx-dash-overlay:not(.dark) #fine-form-panel .sticky.top-0,
    #tapx-dash-overlay:not(.dark) #emp-service-request-panel .sticky.top-0,
    #tapx-dash-overlay:not(.dark) #veh-service-request-panel .sticky.top-0 {
        background: linear-gradient(180deg, rgba(253, 253, 249, 0.98) 0%, rgba(253, 253, 249, 0.92) 100%) !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    }
    #tapx-dash-overlay:not(.dark) #modal-entity-title,
    #tapx-dash-overlay:not(.dark) #fine-form-title,
    #tapx-dash-overlay:not(.dark) #emp-service-request-title,
    #tapx-dash-overlay:not(.dark) #veh-service-request-title {
        color: #1e3a8a !important;
    }
    /* "Service request" modal title (Action button) → WHITE in every theme/mode,
       and even if the modal is reparented outside #tapx-dash-overlay at runtime.
       The header strip is hardcoded dark (#141414), so white is readable in both
       light and dark mode. Selectors ordered/specific enough to beat the gold and
       light-mode navy rules above. */
    #tapx-dash-overlay:not(.dark) #emp-service-request-title,
    #tapx-dash-overlay #emp-service-request-title,
    #emp-service-request-title {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }


    /* ─── Lighter form backgrounds ──────────────────────────────── */
    #tapx-step1-panel, #tapx-step2-panel {
        background: linear-gradient(135deg,
            rgba(15, 25, 45, 0.85) 0%,
            rgba(20, 22, 30, 0.85) 60%,
            rgba(40, 30, 12, 0.85) 100%) !important;
    }
    #tapx-s2-body {
        background: rgba(8, 12, 20, 0.85) !important;
    }

    /* Login & Register pages — lighter overlay */
    #tapx-login-overlay,
    #tapx-register-overlay,
    .tapx-auth-overlay,
    [data-tapx-auth] {
        background: linear-gradient(135deg,
            rgba(15, 25, 45, 0.92) 0%,
            rgba(20, 22, 30, 0.92) 60%,
            rgba(40, 30, 12, 0.92) 100%) !important;
    }

    /* ─── Bigger company logos & names in tier arc band ─────────── */
    .partner-logo,
    .arc-partner-logo,
    [data-arc-logo] img,
    .tier-arc img,
    .partner-band img {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
        object-fit: contain !important;
    }
    .partner-name,
    .arc-partner-name,
    [data-arc-name],
    .tier-arc figcaption,
    .partner-band figcaption {
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
    }

    /* ─── Hover highlight on dropdown options ───────────────────── */
    #quick-action-form select option:hover,
    #quick-action-form select option:focus,
    #quick-action-form select option:checked,
    #free-fine-form select option:hover,
    #free-fine-form select option:focus,
    [data-quick-action] select option:hover,
    [data-free-fine] select option:hover {
        background: linear-gradient(90deg,
            rgba(255, 215, 0, 0.18) 0%,
            rgba(56, 189, 248, 0.12) 100%) !important;
        color: #fff !important;
    }

    /* ─── Yellow + light blue card combination on landing ──────── */
    .landing-card,
    .feature-card,
    section[id^="features"] .group,
    [data-landing-card] {
        border: 1px solid rgba(255, 215, 0, 0.20) !important;
        background:
            linear-gradient(135deg,
                rgba(255, 215, 0, 0.05) 0%,
                rgba(56, 189, 248, 0.06) 100%) !important;
        transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
    }
    .landing-card:hover,
    .feature-card:hover,
    section[id^="features"] .group:hover,
    [data-landing-card]:hover {
        border-color: rgba(56, 189, 248, 0.40) !important;
        background:
            linear-gradient(135deg,
                rgba(255, 215, 0, 0.10) 0%,
                rgba(56, 189, 248, 0.12) 100%) !important;
        transform: translateY(-2px);
    }


/* ═══ USER REQUEST: light backgrounds for the three modals (configure / details-pay / login) ═══ */

/* ── 1. CONFIGURE PLAN MODAL (image 1) — #tapx-tier-modal-panel ── */
#tapx-tier-modal-panel {
    background: #ffffff !important;
    border: 1px solid rgba(125, 211, 252, 0.55) !important;
    box-shadow: 0 24px 80px rgba(56, 189, 248, 0.18) !important;
    color: #0f172a !important;
}
/* Hard-hide Configure modal when closed — prevents it from bleeding
   through other higher-z-index overlays (login screen, etc.) */
#tier-quote-modal[aria-hidden="true"] {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}
#tier-quote-modal[aria-hidden="true"] #tapx-tier-modal-panel {
    visibility: hidden !important;
    opacity: 0 !important;
    box-shadow: none !important;
}
/* When the login overlay is OPEN (display is anything other than `none`),
   force-hide ALL underlying SaaS workflow modals so they cannot bleed
   through the login screen. Uses :has() — supported in modern browsers.
   The non-:has fallback below uses JS via MutationObserver as a backup. */
body:has(#tapx-login-overlay:not([style*="display: none"]):not([style*="display:none"])) #tier-quote-modal,
body:has(#tapx-login-overlay:not([style*="display: none"]):not([style*="display:none"])) #tapx-step2,
body:has(#tapx-login-overlay:not([style*="display: none"]):not([style*="display:none"])) .tier-quote-modal,
body:has(#tapx-login-overlay:not([style*="display: none"]):not([style*="display:none"])) #tapx-tier-modal-panel,
body:has(#tapx-login-overlay:not([style*="display: none"]):not([style*="display:none"])) #tapx-step2-panel {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* JS-driven fallback: when body has class `login-overlay-open`, hide modals */
body.login-overlay-open #tier-quote-modal,
body.login-overlay-open #tapx-step2,
body.login-overlay-open .tier-quote-modal,
body.login-overlay-open #tapx-tier-modal-panel,
body.login-overlay-open #tapx-step2-panel {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ═══ FULL ISOLATION: when login overlay is OPEN, hide every other body
   child so NOTHING from the landing page (hero, nav, ticker, modals, etc.)
   bleeds through. Only #tapx-login-overlay itself stays visible. ═══ */
body:has(#tapx-login-overlay:not([style*="display: none"]):not([style*="display:none"])) > *:not(#tapx-login-overlay):not(script):not(style):not(noscript) {
    visibility: hidden !important;
}
body.login-overlay-open > *:not(#tapx-login-overlay):not(script):not(style):not(noscript) {
    visibility: hidden !important;
}
/* And make sure the login overlay's own bg is fully opaque */
body.login-overlay-open #tapx-login-overlay,
#tapx-login-overlay:not([style*="display: none"]):not([style*="display:none"]) {
    background: #060b14 !important;
    background-color: #060b14 !important;
    visibility: visible !important;
}
/* ═══ LANDING GUARD (permanent, CSS-level) ═══════════════════════════════════
   ROOT CAUSE of "landing shows the login portal": the overlay is revealed by a
   CSS rule that keys off the ABSENCE of an inline `display:none` on
   #tapx-login-overlay (and a sibling rule then hides the whole landing behind
   it). If any script leaves the overlay's inline display as '' — not the literal
   'none' — that CSS turns the portal ON, and JS guards that set display later
   lose the timing race. This rule closes it for good: whenever <html> carries
   `tapx-landing-guard`, the overlay is force-hidden and the landing is force-
   shown, with !important so no inline style or earlier CSS can override it. The
   very first head script adds this class on any non-login navigation and the
   Login/Register handlers remove it (they set an explicit login intent), so the
   overlay opens normally on a real click and only a real click. */
html.tapx-landing-guard #tapx-login-overlay,
html.tapx-landing-guard #tapx-dash-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
html.tapx-landing-guard body > *:not(script):not(style):not(noscript) {
    visibility: visible !important;
}
#tapx-tier-modal-panel #tier-quote-modal-title { color: #0284c7 !important; }
#tapx-tier-modal-panel #tier-quote-intro,
#tapx-tier-modal-panel label.text-slate-500,
#tapx-tier-modal-panel label[for="tier-quote-count"],
#tapx-tier-modal-panel label[for="tier-quote-pro-duration"],
#tapx-tier-modal-panel label[for="tier-quote-training-package"],
#tapx-tier-modal-panel #tier-quote-footnote { color: #475569 !important; }
#tapx-tier-modal-panel #tier-quote-count {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(125, 211, 252, 0.55) !important;
}
#tapx-tier-modal-panel #tier-quote-pro-duration,
#tapx-tier-modal-panel #tier-quote-training-package {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(125, 211, 252, 0.55) !important;
}
#tapx-tier-modal-panel #tier-quote-pro-duration option,
#tapx-tier-modal-panel #tier-quote-training-package option {
    background: #ffffff !important;
    color: #0f172a !important;
}
#tapx-tier-modal-panel section[aria-labelledby="tier-quote-growth-pro-heading"],
#tapx-tier-modal-panel section[aria-labelledby="tier-quote-training-heading"] {
    background: #ffffff !important;
    border-color: rgba(255, 215, 0, 0.65) !important;
}
#tapx-tier-modal-panel #tier-quote-growth-pro-heading,
#tapx-tier-modal-panel #tier-quote-training-heading { color: #b45309 !important; }
/* ── Hire a Pro / Training dropdowns: keep their list ON TOP ──
   Under the modal's blurred backdrop some browsers paint the native
   <select> list in-page; without an explicit stacking context it can sit
   BEHIND the Estimated-monthly box / footnote / Next button that follow it
   in the DOM. Lifting the add-on block (and the selects) fixes the layering
   without changing any behaviour. */
#tapx-tier-modal-panel #tier-quote-growth-pro { position: relative; z-index: 60; }
#tapx-tier-modal-panel #tier-quote-pro-section,
#tapx-tier-modal-panel #tier-quote-pro-duration,
#tapx-tier-modal-panel #tier-quote-training-package { position: relative; z-index: 61; }
#tapx-tier-modal-panel button[data-tier-quote-close] {
    color: #475569 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    background: rgba(255, 255, 255, 0.6) !important;
}
#tapx-tier-modal-panel button[data-tier-quote-close]:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}
#tapx-tier-modal-panel #tier-quote-total-num,
#tapx-tier-modal-panel #tier-quote-total .sym-dirham-inline { color: #b45309 !important; }
#tapx-tier-modal-panel #tier-quote-annual { color: #475569 !important; }
#tapx-tier-modal-panel .text-slate-400,
#tapx-tier-modal-panel .text-slate-500,
#tapx-tier-modal-panel .text-slate-600 { color: #475569 !important; }

/* ── 2. DETAILS & PAY MODAL (image 2) — #tapx-step2-panel / #tapx-s2-body ── */
#tapx-step2-panel {
    background: #ffffff !important;
    border-color: rgba(125, 211, 252, 0.55) !important;
    color: #0f172a !important;
}
#tapx-s2-body {
    background: #ffffff !important;
    color: #0f172a !important;
}
/* Hard-hide modal when closed — prevents Details & Pay form from showing
   through other overlays (e.g. the login page) when not actively open. */
#tapx-step2[aria-hidden="true"] {
    visibility: hidden !important;
    pointer-events: none !important;
}
#tapx-step2[aria-hidden="true"] #tapx-step2-panel {
    visibility: hidden !important;
    opacity: 0 !important;
    box-shadow: none !important;
}
#tapx-step2-panel input[type="text"],
#tapx-step2-panel input[type="email"],
#tapx-step2-panel input[type="tel"],
#tapx-step2-panel input[type="number"],
#tapx-step2-panel select,
#tapx-step2-panel textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(125, 211, 252, 0.55) !important;
}
#tapx-step2-panel input::placeholder,
#tapx-step2-panel textarea::placeholder { color: #94a3b8 !important; }
#tapx-step2-panel #tapx-plan-name { color: #0f172a !important; }
#tapx-step2-panel label { color: #475569 !important; }

/* ── 3. LOGIN MODAL (image 3) — .right .card ── */
.right .card {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 60%, #fef9c3 100%) !important;
    border: 1px solid rgba(125, 211, 252, 0.55) !important;
    color: #0f172a !important;
}
.right .card .card-sub { color: #475569 !important; }
.right .card .field label { color: #475569 !important; }
.right .card input[type="email"],
.right .card input[type="password"],
.right .card input[type="text"],
.right .card input[type="tel"] {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(125, 211, 252, 0.55) !important;
}
.right .card input::placeholder { color: #94a3b8 !important; }
.right .card .tab:not(.active) { color: #475569 !important; }
.right .card .terms { color: #475569 !important; }
.right .card .err-msg { color: #dc2626 !important; }

/* ── 4. TERMS CHECKBOX — clear tick icon when checked ── */
#tapx-terms {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #FFD700 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease;
    margin: 2px 0 0 0 !important;
}
#tapx-terms:hover {
    border-color: #facc15 !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15) !important;
}
#tapx-terms:checked {
    background: #FFD700 !important;
    border-color: #FFD700 !important;
}
#tapx-terms:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 0px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #000000 !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
    display: block !important;
}


    /* Yellow typewriter text + blinking cursor */
    #hero-typewriter-line {
        color: #FFD700 !important;
    }
    #hero-typewriter-text {
        color: #FFD700 !important;
    }
    #hero-typewriter-cursor {
        display: inline-block;
        margin-left: 4px;
        color: #FFD700;
        font-weight: 100;
        animation: hero-typewriter-blink 0.7s step-end infinite;
    }
    @keyframes hero-typewriter-blink {
        0%, 50%   { opacity: 1; }
        50.01%, 100% { opacity: 0; }
    }
    /* Hero typewriter dust puffs (emitted on each type / erase tick) */
    .hero-tw-dust {
        position: absolute; width: 4px; height: 4px; border-radius: 50%;
        pointer-events: none; z-index: 6; opacity: 0.95;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 4px currentColor;
        animation: hero-tw-dust-fly 0.62s ease-out forwards;
        will-change: transform, opacity;
    }
    @keyframes hero-tw-dust-fly {
        0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
        100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -10px))) scale(0.25); }
    }
    @media (prefers-reduced-motion: reduce) { .hero-tw-dust { display: none !important; } }
    @media (prefers-reduced-motion: reduce) {
        #hero-typewriter-cursor { animation: none; opacity: 1; }
    }

    /* 3 hero cards: light-blue + yellow combination
       Selectors here intentionally use TWO IDs so they beat the existing
       html.dark #hero-vortex-focal .reveal-card !important rules. */
    html.dark #hero-vortex-focal #hero-mulkiya-card,
    html.dark #hero-vortex-focal #hero-residency-card,
    html.dark #hero-vortex-focal #hero-golden-access-card,
    html:not(.dark) #hero-vortex-focal #hero-mulkiya-card,
    html:not(.dark) #hero-vortex-focal #hero-residency-card,
    html:not(.dark) #hero-vortex-focal #hero-golden-access-card {
        background: linear-gradient(135deg,
            #BAE6FD 0%,
            #7DD3FC 35%,
            #FCD34D 70%,
            #FFD700 100%
        ) !important;
        background-color: #BAE6FD !important;
        border-color: rgba(255, 215, 0, 0.55) !important;
        box-shadow:
            0 0 0 1px rgba(125, 211, 252, 0.35) inset,
            0 24px 56px rgba(2, 12, 32, 0.35) !important;
    }
    /* Override the inner gradient overlay on Golden Access card */
    html.dark #hero-vortex-focal #hero-golden-access-card > div.absolute.inset-0,
    html:not(.dark) #hero-vortex-focal #hero-golden-access-card > div.absolute.inset-0 {
        background: linear-gradient(135deg,
            rgba(125, 211, 252, 0.45) 0%,
            transparent 50%,
            rgba(255, 215, 0, 0.40) 100%
        ) !important;
        opacity: 1 !important;
    }
    /* Suppress the white-sheen ::after on cards so the colors aren't washed out */
    html.dark #hero-vortex-focal #hero-mulkiya-card::after,
    html.dark #hero-vortex-focal #hero-residency-card::after,
    html.dark #hero-vortex-focal #hero-golden-access-card::after {
        opacity: 0.30 !important;
        mix-blend-mode: overlay !important;
    }


    /* ───────────────────────────────────────────────────────────────
       Compliance Add Modal — premium glassmorphism + light/dark modes
       ─────────────────────────────────────────────────────────────── */

    /* Body scroll lock helper (used by JS) — extra insurance over inline overflow:hidden */
    body.compliance-modal-locked {
        overflow: hidden !important;
        touch-action: none;
    }

    /* Bulletproof display rules — guarantees flex centering when open */
    #compliance-add-modal {
        display: none;
    }
    #compliance-add-modal:not(.hidden) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── Backdrop layer: heavy blur + semi-transparent overlay ── */
    .compliance-modal-backdrop {
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(32px) saturate(140%);
        -webkit-backdrop-filter: blur(32px) saturate(140%);
        cursor: default;
    }
    /* Light mode — lighter veil, same heavy blur */
    #tapx-dash-overlay:not(.dark) ~ * .compliance-modal-backdrop,
    #tapx-dash-overlay:not(.dark) .compliance-modal-backdrop,
    html:not(.dark) .compliance-modal-backdrop {
        background: rgba(15, 23, 42, 0.35);
        backdrop-filter: blur(34px) saturate(150%) brightness(0.95);
        -webkit-backdrop-filter: blur(34px) saturate(150%) brightness(0.95);
    }

    /* ── Panel: premium shadow, sharp content (no blur leak) ── */
    .compliance-modal-panel {
        box-shadow:
            0 25px 80px rgba(0, 0, 0, 0.45),
            0 8px 30px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(255, 255, 255, 0.05);
        border-radius: 18px;
        /* Establish own stacking context so its content stays sharp above backdrop-filter */
        isolation: isolate;
        transform-origin: center center;
    }

    /* ── Entrance animations ── */
    /* Backdrop fades in */
    #compliance-add-modal:not(.hidden) > .compliance-modal-backdrop {
        animation: comp-modal-backdrop-fade 0.3s ease-out forwards;
    }
    /* Panel scales + slides up + fades in */
    #compliance-add-modal:not(.hidden) > .compliance-modal-panel {
        animation: comp-modal-panel-rise 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes comp-modal-backdrop-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    @keyframes comp-modal-panel-rise {
        from {
            opacity: 0;
            transform: translateY(12px) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    /* Honour reduced motion */
    @media (prefers-reduced-motion: reduce) {
        #compliance-add-modal:not(.hidden) > .compliance-modal-backdrop,
        #compliance-add-modal:not(.hidden) > .compliance-modal-panel {
            animation: none !important;
        }
    }

    /* ───────────── LIGHT MODE OVERRIDES (Add Employee parity) ───────────── */

    /* Outer overlay — keep transparent so backdrop layer handles veil */
    #tapx-dash-overlay:not(.dark) #compliance-add-modal {
        background: transparent !important;
    }

    /* Panel — white card with soft shadow */
    #tapx-dash-overlay:not(.dark) #compliance-add-modal-panel {
        background: #ffffff !important;
        border-color: rgba(15, 23, 42, 0.12) !important;
        box-shadow:
            0 25px 80px rgba(15, 23, 42, 0.18),
            0 8px 30px rgba(15, 23, 42, 0.10),
            0 0 0 1px rgba(15, 23, 42, 0.06) !important;
    }
    #tapx-dash-overlay:not(.dark) #compliance-add-modal-panel .sticky {
        background: #ffffff !important;
        border-color: rgba(15, 23, 42, 0.10) !important;
    }

    /* Borders */
    #tapx-dash-overlay:not(.dark) #compliance-add-modal .border-white\/10 {
        border-color: rgba(15, 23, 42, 0.12) !important;
    }

    /* Text colors */
    #tapx-dash-overlay:not(.dark) #compliance-add-modal .text-white,
    #tapx-dash-overlay:not(.dark) #compliance-add-modal h3,
    #tapx-dash-overlay:not(.dark) #compliance-add-modal label,
    #tapx-dash-overlay:not(.dark) #compliance-add-modal p {
        color: var(--dash-text-blue, #06243f) !important;
    }
    #tapx-dash-overlay:not(.dark) #compliance-add-modal .text-gray-300,
    #tapx-dash-overlay:not(.dark) #compliance-add-modal .text-gray-200 {
        color: var(--dash-text-blue-mid, #1e3a5f) !important;
    }
    #tapx-dash-overlay:not(.dark) #compliance-add-modal .text-gray-400,
    #tapx-dash-overlay:not(.dark) #compliance-add-modal .text-gray-500 {
        color: #64748b !important;
    }
    #tapx-dash-overlay:not(.dark) #compliance-add-modal .text-gray-600 {
        color: #94a3b8 !important;
    }

    /* Inputs / selects / textareas */
    #tapx-dash-overlay:not(.dark) #compliance-add-modal input:not([type="checkbox"]),
    #tapx-dash-overlay:not(.dark) #compliance-add-modal select,
    #tapx-dash-overlay:not(.dark) #compliance-add-modal textarea {
        background: #f8fafc !important;
        border-color: rgba(15, 23, 42, 0.12) !important;
        color: var(--dash-text-blue, #06243f) !important;
    }
    #tapx-dash-overlay:not(.dark) #compliance-add-modal input::placeholder,
    #tapx-dash-overlay:not(.dark) #compliance-add-modal textarea::placeholder {
        color: #94a3b8 !important;
    }

    /* Background utility class overrides */
    #tapx-dash-overlay:not(.dark) #compliance-add-modal .bg-black\/50 {
        background: #f8fafc !important;
    }
    #tapx-dash-overlay:not(.dark) #compliance-add-modal .bg-black\/30 {
        background: rgba(15, 23, 42, 0.04) !important;
    }
    #tapx-dash-overlay:not(.dark) #compliance-add-modal .bg-black\/20 {
        background: rgba(15, 23, 42, 0.03) !important;
    }

    /* Inner Compliance Record card — pale blue gradient (matches Employee Record) */
    #tapx-dash-overlay:not(.dark) #compliance-add-modal .bg-gradient-to-b.from-accent-blue\/\[0\.08\] {
        background-image: linear-gradient(to bottom, rgba(56, 189, 248, 0.10), rgba(241, 245, 249, 0.6)) !important;
    }

    /* Reminder pill defaults */
    #tapx-dash-overlay:not(.dark) #compliance-add-modal label .border-white\/10.bg-black\/50 {
        background: #f1f5f9 !important;
        border-color: rgba(15, 23, 42, 0.08) !important;
    }

    /* Close button */
    #tapx-dash-overlay:not(.dark) #compliance-add-modal button[aria-label="Close"] {
        color: #475569 !important;
    }
    #tapx-dash-overlay:not(.dark) #compliance-add-modal button[aria-label="Close"]:hover {
        color: var(--dash-text-blue, #06243f) !important;
        background: rgba(15, 23, 42, 0.06) !important;
    }

    /* Cancel button */
    #tapx-dash-overlay:not(.dark) #compliance-add-modal button[type="button"][data-comp-modal-close]:not([aria-label="Close"]) {
        background: #f8fafc !important;
        border-color: rgba(15, 23, 42, 0.12) !important;
        color: var(--dash-text-blue, #06243f) !important;
    }
    #tapx-dash-overlay:not(.dark) #compliance-add-modal button[type="button"][data-comp-modal-close]:not([aria-label="Close"]):hover {
        background: rgba(15, 23, 42, 0.04) !important;
    }

    /* Save Compliance button stays bright yellow in both modes */


/* ═══════════════════════════════════════════════════════════════
   PHASE 37 — Sidebar Settings dropdown (collapsible group)
═══════════════════════════════════════════════════════════════ */
html body aside.dash-sidebar .dash-nav-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    padding-right: 0.85rem;
}
html body aside.dash-sidebar .dash-nav-group-label {
    flex: 1 1 auto;
    color: inherit;
}
html body aside.dash-sidebar .dash-nav-group-icon {
    color: #fbbf24;
}
html body aside.dash-sidebar .dash-nav-group-chev {
    margin-left: auto;
    font-size: 20px !important;
    transition: transform 0.22s ease;
    color: #94a3b8;
}
html body aside.dash-sidebar .dash-nav-group[data-open='true'] .dash-nav-group-chev {
    transform: rotate(180deg);
}

/* Children container */
html body aside.dash-sidebar .dash-nav-group-children {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 6px 0;
    padding-left: 14px;
    position: relative;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.32s cubic-bezier(0.16,1,0.3,1),
                opacity 0.22s ease,
                margin 0.22s ease;
}
html body aside.dash-sidebar .dash-nav-group-children[hidden] {
    display: none;
}
html body aside.dash-sidebar .dash-nav-group[data-open='true'] .dash-nav-group-children {
    max-height: 720px;
    opacity: 1;
}

/* Vertical guideline */
html body aside.dash-sidebar .dash-nav-group-children::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(148, 163, 184, 0.28);
}
#tapx-dash-overlay:not(.dark) aside.dash-sidebar .dash-nav-group-children::before {
    background: rgba(15, 23, 42, 0.14);
}

/* Sub-link items */
html body aside.dash-sidebar .nav-sublink {
    padding-left: 18px;
    margin-left: 6px;
    border-radius: 10px;
    font-size: 0.825rem;
    font-weight: 600;
    gap: 0.65rem;
}
html body aside.dash-sidebar .nav-sublink .dash-sublink-icon {
    color: #fbbf24 !important;
    flex-shrink: 0;
}
html body aside.dash-sidebar .nav-sublink:hover .dash-sublink-icon {
    color: #f59e0b !important;
}

/* Active sub-link — soft yellow pill */
html body aside.dash-sidebar .nav-sublink.active,
html body aside.dash-sidebar .nav-sublink.is-active {
    background: linear-gradient(180deg, rgba(251,191,36,0.20), rgba(251,191,36,0.10)) !important;
    box-shadow: inset 0 0 0 1px rgba(251,191,36,0.22);
}
#tapx-dash-overlay:not(.dark) aside.dash-sidebar .nav-sublink.active,
#tapx-dash-overlay:not(.dark) aside.dash-sidebar .nav-sublink.is-active {
    background: linear-gradient(180deg, rgba(254,243,199,0.85), rgba(253,230,138,0.55)) !important;
    color: #1e3a8a !important;
}
html body aside.dash-sidebar .nav-sublink.active .dash-sublink-icon,
html body aside.dash-sidebar .nav-sublink.is-active .dash-sublink-icon {
    color: #d97706 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PHASE 38 — Fines & Penalties: column-by-column styling to match
   the reference screenshot (amount black, paid black, balance red,
   discount pill, simple status pill, days countdown in block)
═══════════════════════════════════════════════════════════════ */

/* Amount — bold black/dark */
html body #tbody-fines-demo .fines-amt-cell,
html body #tbody-fines-demo tr td.fines-amt-cell {
    color: #0f172a !important;
    font-weight: 900 !important;
}
#tapx-dash-overlay.dark #tbody-fines-demo .fines-amt-cell,
#tapx-dash-overlay.dark #tbody-fines-demo tr td.fines-amt-cell {
    color: #f1f5f9 !important;
}

/* Paid — bold GREEN (positive — what's been paid) */
html body #tbody-fines-demo .fines-paid-cell,
html body #tbody-fines-demo tr td.fines-paid-cell,
html body #tbody-fines-demo .fines-paid-cell *,
html body #tbody-fines-demo tr td.fines-paid-cell * {
    color: #16a34a !important;
    font-weight: 800 !important;
}
/* Dirham icon — match the cell color (green for paid, red for balance) */
html body #tbody-fines-demo .fines-paid-cell .sym-dirham-dashpng,
html body #tbody-fines-demo tr td.fines-paid-cell .sym-dirham-dashpng {
    filter: brightness(0) saturate(100%) invert(46%) sepia(72%) saturate(596%) hue-rotate(95deg) brightness(94%) contrast(89%) !important;
}
html body #tbody-fines-demo .fines-balance-cell .sym-dirham-dashpng,
html body #tbody-fines-demo tr td.fines-balance-cell .sym-dirham-dashpng {
    filter: brightness(0) saturate(100%) invert(20%) sepia(95%) saturate(2500%) hue-rotate(348deg) brightness(91%) contrast(89%) !important;
}
/* Amount cell dirham — keep default (black) — only the number is bold */
html body #tbody-fines-demo .fines-amt-cell .sym-dirham-dashpng,
html body #tbody-fines-demo tr td.fines-amt-cell .sym-dirham-dashpng {
    filter: none !important;
}
#tapx-dash-overlay.dark #tbody-fines-demo .fines-paid-cell,
#tapx-dash-overlay.dark #tbody-fines-demo tr td.fines-paid-cell,
#tapx-dash-overlay.dark #tbody-fines-demo .fines-paid-cell *,
#tapx-dash-overlay.dark #tbody-fines-demo tr td.fines-paid-cell * {
    color: #4ade80 !important;
}
#tapx-dash-overlay.dark #tbody-fines-demo .fines-paid-cell .sym-dirham-dashpng,
#tapx-dash-overlay.dark #tbody-fines-demo tr td.fines-paid-cell .sym-dirham-dashpng {
    filter: brightness(0) saturate(100%) invert(72%) sepia(43%) saturate(528%) hue-rotate(89deg) brightness(95%) contrast(89%) !important;
}

/* Balance — bold red */
html body #tbody-fines-demo .fines-balance-cell,
html body #tbody-fines-demo tr td.fines-balance-cell,
html body #tbody-fines-demo .fines-balance-cell *,
html body #tbody-fines-demo tr td.fines-balance-cell * {
    color: #dc2626 !important;
    font-weight: 900 !important;
}
/* Discount badge inside balance cell — keep its own colors (overrides global * rule) */
html body #tbody-fines-demo .fines-balance-cell .fines-discount-badge,
html body #tbody-fines-demo .fines-balance-cell .fines-discount-badge * {
    color: revert !important;
    font-weight: revert !important;
}
/* ── Align Amount / Paid / Balance values evenly across all three columns
   (they were staggered: Amount/Paid used items-baseline, Balance items-center). ── */
html body #tbody-fines-demo td.fines-amt-cell,
html body #tbody-fines-demo td.fines-paid-cell,
html body #tbody-fines-demo td.fines-balance-cell { vertical-align: middle !important; }
html body #tbody-fines-demo .fines-amt-cell > span,
html body #tbody-fines-demo .fines-paid-cell > span,
html body #tbody-fines-demo .fines-balance-cell > span,
html body #tbody-fines-demo .fines-balance-cell > span > span {
    align-items: center !important;
    line-height: 1 !important;
}
html body #tbody-fines-demo .fines-amt-cell svg,
html body #tbody-fines-demo .fines-amt-cell img,
html body #tbody-fines-demo .fines-paid-cell svg,
html body #tbody-fines-demo .fines-paid-cell img,
html body #tbody-fines-demo .fines-balance-cell svg,
html body #tbody-fines-demo .fines-balance-cell img { vertical-align: middle !important; }
#tapx-dash-overlay.dark #tbody-fines-demo .fines-balance-cell,
#tapx-dash-overlay.dark #tbody-fines-demo tr td.fines-balance-cell,
#tapx-dash-overlay.dark #tbody-fines-demo .fines-balance-cell *,
#tapx-dash-overlay.dark #tbody-fines-demo tr td.fines-balance-cell * {
    color: #ef4444 !important;
}
#tapx-dash-overlay.dark #tbody-fines-demo .fines-balance-cell .sym-dirham-dashpng,
#tapx-dash-overlay.dark #tbody-fines-demo tr td.fines-balance-cell .sym-dirham-dashpng {
    filter: brightness(0) saturate(100%) invert(46%) sepia(85%) saturate(2200%) hue-rotate(338deg) brightness(98%) contrast(96%) !important;
}

/* Discount badge — green pill below balance */
html body .fines-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(34,197,94,0.14);
    color: #16a34a;
    border: 1px solid rgba(34,197,94,0.34);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
#tapx-dash-overlay.dark .fines-discount-badge {
    background: rgba(34,197,94,0.18);
    color: #4ade80;
    border-color: rgba(74,222,128,0.42);
}

/* Status pill — base */
html body .fines-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}
html body .fines-status-pill .fines-status-icon {
    font-size: 11px;
    line-height: 1;
}

/* Status — Paid (green) */
html body .fines-status-paid {
    background: rgba(34,197,94,0.14);
    color: #16a34a;
    border-color: rgba(34,197,94,0.36);
}
#tapx-dash-overlay.dark .fines-status-paid {
    background: rgba(34,197,94,0.20);
    color: #4ade80;
    border-color: rgba(74,222,128,0.42);
}

/* Status — Partial (amber) */
html body .fines-status-partial {
    background: rgba(251,191,36,0.16);
    color: #b45309;
    border-color: rgba(251,191,36,0.42);
}
#tapx-dash-overlay.dark .fines-status-partial {
    background: rgba(251,191,36,0.22);
    color: #fbbf24;
    border-color: rgba(251,191,36,0.5);
}

/* Status — Overdue (red, sharper) */
html body .fines-status-overdue {
    background: rgba(239,68,68,0.16);
    color: #b91c1c;
    border-color: rgba(239,68,68,0.4);
}
#tapx-dash-overlay.dark .fines-status-overdue {
    background: rgba(239,68,68,0.20);
    color: #f87171;
    border-color: rgba(248,113,113,0.45);
}

/* Status — Unpaid (light pink/red — matching screenshot) */
html body .fines-status-unpaid {
    background: rgba(254,202,202,0.55);
    color: #b91c1c;
    border-color: rgba(248,113,113,0.4);
}
#tapx-dash-overlay.dark .fines-status-unpaid {
    background: rgba(239,68,68,0.18);
    color: #fca5a5;
    border-color: rgba(248,113,113,0.4);
}

/* Block column — days countdown */
html body .fines-days-cell {
    min-width: 90px;
    line-height: 1.3;
}
html body .fines-days-line {
    display: flex;
    align-items: baseline;
    gap: 3px;
}
html body .fines-days-num {
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
#tapx-dash-overlay.dark .fines-days-num {
    color: #f1f5f9;
}
html body .fines-days-lbl {
    font-size: 11px;
    color: #475569;
    font-weight: 600;
}
#tapx-dash-overlay.dark .fines-days-lbl {
    color: #94a3b8;
}
html body .fines-days-bar {
    height: 3px;
    background: rgba(148,163,184,0.20);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
#tapx-dash-overlay.dark .fines-days-bar {
    background: rgba(255,255,255,0.10);
}
html body .fines-days-fill {
    height: 100%;
    border-radius: 2px;
}
html body .fines-days-date {
    font-size: 10px;
    color: #475569;
    margin-top: 4px;
    font-weight: 500;
    white-space: nowrap;
}
#tapx-dash-overlay.dark .fines-days-date {
    color: #94a3b8;
}

/* Block — Overdue variant */
html body .fines-days-overdue .fines-days-num {
    color: #dc2626;
}
#tapx-dash-overlay.dark .fines-days-overdue .fines-days-num {
    color: #ef4444;
}
html body .fines-days-overdue .fines-days-lbl {
    color: #dc2626;
    font-weight: 700;
}
#tapx-dash-overlay.dark .fines-days-overdue .fines-days-lbl {
    color: #f87171;
}

/* Block — fully blocked */
html body .fines-blocked-cell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(239,68,68,0.14);
    border: 1px solid rgba(239,68,68,0.4);
    font-size: 11px;
    font-weight: 900;
    color: #b91c1c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
#tapx-dash-overlay.dark .fines-blocked-cell {
    background: rgba(239,68,68,0.20);
    color: #f87171;
}
html body .fines-blocked-icon {
    font-size: 11px;
}

html body .fines-block-none {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════
   REMOVED — Old rule that was forcing footer text to dark.
   Footer is now black with white text instead.
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   PHASE 40 — Global Emirate field UI fix
   Ensures the auto-selected emirate text is fully visible across
   every emirate field — no truncation, no overflow, proper width.
═══════════════════════════════════════════════════════════════ */

/* Custom searchable emirate combobox visible input */
html body input[data-emirate-input],
html body input[id$="-combo-input"][placeholder*="emirate" i],
html body input[id*="emirate-combo-input"] {
    text-overflow: clip !important;
    white-space: nowrap !important;
    overflow: visible !important;
    min-width: 0 !important;
    width: 100% !important;
    /* Ensure padding-right leaves room for the chevron icon */
    padding-right: 2.4rem !important;
}

/* The wrap holding the combo — ensure no overflow-hidden cut */
html body [id$="-emirate-root"],
html body [id$="-combo-root"] {
    overflow: visible !important;
    min-width: 0;
}

/* Native <select> emirate fields — full text visibility */
html body select[name*="emirate" i],
html body select[id*="emirate" i]:not(#new-company-emirate):not(#tapx-emirate):not(#register-company-emirate):not(#edit-company-emirate) {
    text-overflow: clip !important;
    overflow: visible !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* Ensure parent form rows don't clip horizontally on mobile */
html body .form-employee-row2,
html body .form-employee-row3,
html body .form-employee-row4,
html body .form-vehicle-row,
html body .form-document-row {
    min-width: 0;
}

/* Mobile responsive sizing */
@media (max-width: 640px) {
    html body input[data-emirate-input],
    html body select[name*="emirate" i] {
        font-size: 14px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PHASE 41 — Eliminate containing block from entity-modal-panel
   The modalPopIn animation applies transform + filter, which makes
   the panel a containing block for position:fixed descendants —
   breaking the popover position math. Forcing these to none lets
   position:fixed inside the modal be truly viewport-relative again.
═══════════════════════════════════════════════════════════════ */

html body #entity-modal-panel,
html body #compliance-add-modal-panel,
html body #emp-service-request-modal-panel,
html body #veh-service-request-modal-panel,
html body #fine-form-modal-panel {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    perspective: none !important;
    /* will-change kept off these to avoid creating a containing block */
    will-change: auto !important;
    /* contain set to nothing that creates a CB */
    contain: none !important;
}

/* Override modalPopIn keyframes for these panels so the animation
   only changes opacity (no transform/filter), preserving a soft fade-in
   without creating a containing block. */
html body #entity-modal-panel,
html body #compliance-add-modal-panel {
    animation-name: tapxModalFadeIn !important;
    animation-duration: 0.32s !important;
    animation-timing-function: ease-out !important;
    animation-fill-mode: both !important;
}
@keyframes tapxModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes tapxModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   PHASE 42 — Allow popover to extend beyond modal panel
   Modal panel normally has overflow-y: auto for tall forms. When
   an emirate/searchable popover opens, switch to overflow: visible
   so the popover (position: absolute, top: 100%) can show fully
   below the field without being clipped.
═══════════════════════════════════════════════════════════════ */
html body #entity-modal-panel:has([data-emirate-popover][aria-hidden="false"]),
html body #entity-modal-panel:has(.dash-modal-drop-carpet.dash-modal-drop-carpet--open),
html body #entity-modal-panel:has(.dash-searchable-panel:not(.hidden)),
html body #compliance-add-modal-panel:has([data-emirate-popover][aria-hidden="false"]),
html body #compliance-add-modal-panel:has(.dash-modal-drop-carpet.dash-modal-drop-carpet--open),
html body #compliance-add-modal-panel:has(.dash-searchable-panel:not(.hidden)) {
    overflow: visible !important;
}

/* Form parents — overflow visible so popover can extend */
html body #entity-modal-panel form,
html body #entity-modal-panel .entity-modal-form,
html body #entity-modal-panel #employee-record-card,
html body #entity-modal-panel #vehicle-record-card,
html body #entity-modal-panel [class*="record-card"],
html body #compliance-add-modal-panel form,
html body #compliance-add-modal-panel .entity-modal-form {
    overflow: visible !important;
}

/* Emirates root + nationality wrap — no overflow clipping */
html body #emirates-combo-root,
html body #doc-emirate-combo-root,
html body #vehicle-plate-emirate-root,
html body #emp-filter-emirate-root,
html body .dash-searchable-wrap {
    overflow: visible !important;
    position: relative !important;
}


/* ═══════════════════════════════════════════════════════════════
   PHASE 43 — Popover GPU compositor layer override
   Native form controls (date inputs, native selects) render on
   their own GPU compositor layer that bypasses normal z-index.
   To beat them, popovers MUST also be on their own GPU layer with
   explicit translateZ(0) — creating an isolated stacking context
   that competes at the same compositor level.
═══════════════════════════════════════════════════════════════ */

/* Z-index + isolation + opaque bg ONLY on outer popover.
   NO transform/will-change here — the popover uses grid-template-rows
   animation for its open/close reveal, and forcing translateZ(0) on the
   outer breaks that animation in some browsers. */
html body #emirates-combo-popover,
html body #doc-emirate-combo-popover,
html body #vehicle-plate-emirate-popover,
html body [data-emirate-popover],
html body #entity-modal .dash-searchable-panel,
html body #entity-modal .dash-modal-drop-carpet,
html body #compliance-add-modal .dash-searchable-panel,
html body #compliance-add-modal .dash-modal-drop-carpet,
html body #emp-service-request-modal .dash-searchable-panel,
html body #veh-service-request-modal .dash-searchable-panel,
html body #fine-form-modal .dash-searchable-panel {
    isolation: isolate !important;
    z-index: 2147483647 !important;
    background-color: #ffffff !important;
}

/* The INNER div carries actual content + the transform animation. Apply
   GPU layer + solid bg here — this is what paints over sibling fields. */
html body #emirates-combo-popover .dash-modal-drop-carpet__inner,
html body #doc-emirate-combo-popover .dash-modal-drop-carpet__inner,
html body #vehicle-plate-emirate-popover .dash-modal-drop-carpet__inner,
html body [data-emirate-popover] .dash-modal-drop-carpet__inner,
html body #entity-modal .dash-searchable-panel .dash-modal-drop-carpet__inner,
html body #entity-modal .dash-searchable-panel,
html body #compliance-add-modal .dash-searchable-panel,
html body .dash-searchable-panel {
    background-color: #ffffff !important;
    background: #ffffff !important;
    will-change: transform !important;
    z-index: 2147483647 !important;
}
#tapx-dash-overlay.dark #emirates-combo-popover,
#tapx-dash-overlay.dark #doc-emirate-combo-popover,
#tapx-dash-overlay.dark #vehicle-plate-emirate-popover,
#tapx-dash-overlay.dark [data-emirate-popover],
#tapx-dash-overlay.dark #entity-modal .dash-searchable-panel,
#tapx-dash-overlay.dark #entity-modal .dash-modal-drop-carpet {
    background-color: #1a1a1a !important;
}

/* Suppress native form controls' compositor layer when their wrap
   doesn't have focus — they only need GPU layer when actively used.
   This lets popovers (always promoted) stay above. */
html body #entity-modal input[type="date"]:not(:focus),
html body #entity-modal input[type="text"]:not(:focus),
html body #entity-modal input[type="email"]:not(:focus),
html body #entity-modal input[type="tel"]:not(:focus),
html body #entity-modal input[type="number"]:not(:focus),
html body #compliance-add-modal input[type="date"]:not(:focus) {
    will-change: auto !important;
    transform: none !important;
    isolation: auto !important;
    z-index: 0;
    position: relative;
}

/* When ANY popover is open inside a modal, ALL native inputs in that
   modal forcibly drop to z-index 0 and lose their compositor layer.
   This is the strongest guarantee that popovers paint on top. */
html body #entity-modal-panel:has([data-emirate-popover][aria-hidden="false"]) input,
html body #entity-modal-panel:has(.dash-modal-drop-carpet--open) input,
html body #entity-modal-panel:has(.dash-searchable-panel:not(.hidden)) input,
html body #compliance-add-modal-panel:has([data-emirate-popover][aria-hidden="false"]) input,
html body #compliance-add-modal-panel:has(.dash-modal-drop-carpet--open) input,
html body #compliance-add-modal-panel:has(.dash-searchable-panel:not(.hidden)) input {
    z-index: 0 !important;
    position: relative;
    will-change: auto !important;
    transform: none !important;
}

/* Also drop labels and field wraps to z-index 0 when popover is open */
html body #entity-modal-panel:has([data-emirate-popover][aria-hidden="false"]) label,
html body #entity-modal-panel:has(.dash-modal-drop-carpet--open) label,
html body #entity-modal-panel:has(.dash-searchable-panel:not(.hidden)) label,
html body #compliance-add-modal-panel:has([data-emirate-popover][aria-hidden="false"]) label,
html body #compliance-add-modal-panel:has(.dash-modal-drop-carpet--open) label,
html body #compliance-add-modal-panel:has(.dash-searchable-panel:not(.hidden)) label {
    z-index: 0 !important;
    position: relative;
}

/* The wrap holding the OPEN popover — push to its own stacking context
   above all siblings */
html body #entity-modal #emirates-combo-root:has([data-emirate-popover][aria-hidden="false"]),
html body #entity-modal #doc-emirate-combo-root:has([data-emirate-popover][aria-hidden="false"]),
html body #entity-modal #vehicle-plate-emirate-root:has([data-emirate-popover][aria-hidden="false"]),
html body .dash-searchable-wrap:has(.dash-searchable-panel:not(.hidden)) {
    z-index: 999999 !important;
    position: relative !important;
    isolation: isolate !important;
}


/* ═══════════════════════════════════════════════════════════════
   PHASE 45 — Styling for popovers when PORTALED to <body>.
   When the popover is moved to body level, all original CSS scoped
   to `#entity-modal` / `#tapx-dash-overlay` / etc. stops matching.
   These rules force readable dark text on white bg + proper
   option layout regardless of where the popover is rendered.
═══════════════════════════════════════════════════════════════ */

/* Outer popover (when portaled) */
html body [data-tapx-portaled] {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    font-family: inherit !important;
}

/* Inner panel container */
html body [data-tapx-portaled] .dash-modal-drop-carpet__inner {
    padding: 0.25rem 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    overflow-y: auto !important;
    max-height: 320px !important;
}

/* List wrappers — clean styles */
html body [data-tapx-portaled] ul,
html body [data-tapx-portaled] [data-emirate-options],
html body [data-tapx-portaled] .dash-searchable-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html body [data-tapx-portaled] li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Emirates option buttons — `.doc-modal-combo-option` */
html body [data-tapx-portaled] .doc-modal-combo-option,
html body [data-tapx-portaled] [data-emirate-options] button,
html body [data-tapx-portaled] [data-emirate-options] li {
    color: #0f172a !important;
    background: transparent !important;
    background-color: transparent !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0.625rem 1rem !important;
    border: 0 !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    display: block !important;
    transition: background-color 0.12s ease !important;
}

/* Nationality option buttons — `.dash-searchable-option` */
html body [data-tapx-portaled] .dash-searchable-option {
    color: #0f172a !important;
    background: transparent !important;
    background-color: transparent !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0.625rem 1rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    display: block !important;
    box-sizing: border-box !important;
    transition: background-color 0.12s ease !important;
}

/* Hover state — soft gray */
html body [data-tapx-portaled] .doc-modal-combo-option:hover,
html body [data-tapx-portaled] [data-emirate-options] button:hover,
html body [data-tapx-portaled] [data-emirate-options] li:hover,
html body [data-tapx-portaled] .dash-searchable-option:hover,
html body [data-tapx-portaled] .dash-searchable-option:focus-visible,
html body [data-tapx-portaled] li:hover {
    background-color: #f1f5f9 !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Active / highlighted (keyboard nav or current selection) */
html body [data-tapx-portaled] .emirate-dropdown-active,
html body [data-tapx-portaled] [data-emirate-options] li.emirate-dropdown-active,
html body [data-tapx-portaled] [data-emirate-options] button.emirate-dropdown-active,
html body [data-tapx-portaled] .dash-searchable-option[aria-selected='true'],
html body [data-tapx-portaled] li[aria-selected='true'] {
    background-color: #dbeafe !important;
    background: #dbeafe !important;
    color: #1e40af !important;
}

/* Empty state row */
html body [data-tapx-portaled] .dash-searchable-empty,
html body [data-tapx-portaled] li.hidden ~ li[id$="emirate-empty"],
html body [data-tapx-portaled] li[id*="empty"] {
    color: #64748b !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.8rem !important;
}

/* Force the override of Tailwind `text-white` and other utility classes */
html body [data-tapx-portaled] .text-white,
html body [data-tapx-portaled] [class*="text-gray"],
html body [data-tapx-portaled] [class*="text-slate"] {
    color: #0f172a !important;
}

/* Hide elements that should NOT show in portaled state (like icons that
   only made sense in dark theme) */
html body [data-tapx-portaled] [aria-hidden="true"]:not(.material-symbols-outlined) {
    /* preserve material icons but allow CSS to handle the rest */
}


/* ═══════════════════════════════════════════════════════════════
   White background for Nationality + Emirates dropdown lists
═══════════════════════════════════════════════════════════════ */
html body #tapx-dash-overlay:not(.dark) .dash-searchable-panel,
html body #tapx-dash-overlay:not(.dark) .dash-searchable-panel *,
html body #tapx-dash-overlay:not(.dark) .dash-searchable-list,
html body #tapx-dash-overlay:not(.dark) .dash-searchable-list *,
html body #tapx-dash-overlay:not(.dark) #emirates-combo-popover,
html body #tapx-dash-overlay:not(.dark) #emirates-combo-popover *,
html body #tapx-dash-overlay:not(.dark) #emirates-combo-popover .dash-modal-drop-carpet__inner,
html body #tapx-dash-overlay:not(.dark) #doc-emirate-combo-popover,
html body #tapx-dash-overlay:not(.dark) #doc-emirate-combo-popover *,
html body #tapx-dash-overlay:not(.dark) #doc-emirate-combo-popover .dash-modal-drop-carpet__inner,
html body #tapx-dash-overlay:not(.dark) [data-emirate-popover],
html body #tapx-dash-overlay:not(.dark) [data-emirate-popover] *,
html body #tapx-dash-overlay:not(.dark) [data-emirate-popover] .dash-modal-drop-carpet__inner {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Re-apply text color to options so they're readable on white */
html body #tapx-dash-overlay:not(.dark) .dash-searchable-panel li,
html body #tapx-dash-overlay:not(.dark) .dash-searchable-panel button,
html body #tapx-dash-overlay:not(.dark) .dash-searchable-panel span,
html body #tapx-dash-overlay:not(.dark) .dash-searchable-list li,
html body #tapx-dash-overlay:not(.dark) [data-emirate-options] li,
html body #tapx-dash-overlay:not(.dark) [data-emirate-options] {
    color: #0f172a !important;
}

/* Hover state — soft gray (override the white-* rule above) */
html body #tapx-dash-overlay:not(.dark) .dash-searchable-panel li:hover,
html body #tapx-dash-overlay:not(.dark) .dash-searchable-panel button:hover,
html body #tapx-dash-overlay:not(.dark) [data-emirate-options] li:hover {
    background-color: #f1f5f9 !important;
    background: #f1f5f9 !important;
}

/* Active/selected/highlighted state — light blue */
html body #tapx-dash-overlay:not(.dark) .dash-searchable-panel li[aria-selected="true"],
html body #tapx-dash-overlay:not(.dark) .dash-searchable-panel li.active,
html body #tapx-dash-overlay:not(.dark) [data-emirate-options] li.emirate-dropdown-active {
    background-color: #dbeafe !important;
    background: #dbeafe !important;
    color: #1e40af !important;
}


/* ═══════════════════════════════════════════════════════════════
   Performance optimizations — speed up dashboard rendering.
═══════════════════════════════════════════════════════════════ */

/* Skip ALL rendering work for hidden panels — biggest single win */
[id^="panel-"].hidden,
#dash-overview.hidden {
    content-visibility: hidden !important;
    contain: strict !important;
}

/* Disable pointer events on hidden panels (no hit-testing cost) */
[id^="panel-"].hidden,
[id^="panel-"].hidden *,
#dash-overview.hidden,
#dash-overview.hidden * {
    pointer-events: none !important;
}

/* For visible panels, isolate layout/paint */
[id^="panel-"]:not(.hidden),
#dash-overview:not(.hidden) {
    contain: layout paint;
}

/* Tables — let browser auto-skip rows that scroll out of view */
#tbody-employees > tr,
#tbody-vehicles > tr,
#tbody-commercial-employees > tr,
#tbody-fines-demo > tr,
#tbody-recycle > tr,
#tbody-vault > tr,
#tbody-incoming-requests > tr,
#table-documents > tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 56px;
}

/* Reduce paint area for fixed-position decorative elements */
.hero-vortex, .ambient-glow, [class*="aurora"] {
    contain: paint;
    will-change: auto;
}

/* Disable expensive animations when prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Throttle hover transitions — they add up fast on big tables */
#tbody-employees tr:hover,
#tbody-vehicles tr:hover,
#tbody-commercial-employees tr:hover,
#tbody-fines-demo tr:hover,
#table-documents tr:hover {
    transition: background-color 0.1s ease !important;
}

/* Disable backdrop-filter on inactive modal overlays (it's expensive) */
.fixed.inset-0.hidden {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Promote sidebar to its own layer (smoother nav) */
#dash-sidebar, .dash-sidebar {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Avoid layout thrash on table re-renders */
#tbody-employees, #tbody-vehicles, #tbody-commercial-employees,
#tbody-fines-demo, #tbody-recycle, #tbody-vault,
#tbody-incoming-requests, #table-documents {
    contain: layout style;
}

/* Disable filter/blur on icons in tables (they multiply with row count) */
#tbody-employees img, #tbody-vehicles img,
#tbody-commercial-employees img, #table-documents img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}


/* ═══════════════════════════════════════════════════════════════
   Invoices & Billing — Stat boxes with visible borders + bg
   Uses high-specificity selectors + !important to win against
   any panel-level or framework CSS.
═══════════════════════════════════════════════════════════════ */
html body #panel-invoices .invoices-stat-card {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.18s ease !important;
}
html body #panel-invoices .invoices-stat-card:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1), 0 2px 4px rgba(15, 23, 42, 0.06) !important;
    transform: translateY(-1px);
}
html body #panel-invoices .invoices-stat-label {
    color: #64748b !important;
    font-weight: 700 !important;
}
html body #panel-invoices .invoices-stat-value {
    color: #0f172a !important;
}

/* Dark mode override */
#tapx-dash-overlay.dark #panel-invoices .invoices-stat-card {
    background: rgba(255,255,255,0.04) !important;
    background-color: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: none !important;
}
#tapx-dash-overlay.dark #panel-invoices .invoices-stat-card:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.3) !important;
}
#tapx-dash-overlay.dark #panel-invoices .invoices-stat-label { color: #9ca3af !important; }
#tapx-dash-overlay.dark #panel-invoices .invoices-stat-value { color: #ffffff !important; }


/* ═══════════════════════════════════════════════════════════════
   PHASE 47 — Manage Overview panel styling
   Designed to match screenshot: cream wrap, pure white cards,
   thin gray borders, dark text, gold gradient header card.
═══════════════════════════════════════════════════════════════ */

#panel-manage-overview {
    color: #0f172a;
}

.tapx-mo-wrap {
    background: #fefaf0;
    border: 1px solid #f3e8c0;
    border-radius: 1rem;
}

/* ── Section labels (QUICK STATS, QUICK ACTIONS, etc.) ──── */
.tapx-mo-section-label {
    color: #1e293b !important;
}
.tapx-mo-section-label .material-symbols-outlined {
    color: #475569;
}

/* ── Header card (cream w/ gold accent) ──────────────────── */
.tapx-mo-header-card {
    background: linear-gradient(135deg, #fef9d8 0%, #fefce8 100%);
    border: 1px solid #bcd3f0;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.tapx-mo-header-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    background: linear-gradient(135deg, #FFD700 0%, #f59e0b 100%);
    box-shadow: 0 8px 24px rgba(245,158,11,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tapx-mo-header-icon .material-symbols-outlined {
    font-size: 32px;
    color: #1a1a1a;
}
.tapx-mo-header-text {
    flex: 1;
    min-width: 0;
}
.tapx-mo-header-eyebrow {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #d97706;
    margin: 0;
}
.tapx-mo-header-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0f172a;
    margin: 2px 0 0;
    line-height: 1.15;
}
.tapx-mo-header-desc {
    font-size: 13px;
    color: #475569;
    margin: 4px 0 0;
}
.tapx-mo-open-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #FFD700 0%, #f59e0b 100%);
    color: #1a1a1a !important;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(245,158,11,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: all 0.18s ease;
}
.tapx-mo-open-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(245,158,11,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
}
.tapx-mo-open-btn .material-symbols-outlined {
    font-size: 16px;
}

/* ── Stat cards ──────────────────────────────────────────── */
.tapx-mo-stat-card {
    background: #ffffff;
    border: 1px solid #c8d2e0;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    transition: all 0.18s ease;
}
.tapx-mo-stat-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.tapx-mo-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 6px;
}
.tapx-mo-stat-value {
    font-size: 1.875rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
    line-height: 1.1;
}

/* ── Action buttons (white cards) ────────────────────────── */
.tapx-mo-action-btn {
    background: #ffffff;
    border: 1px solid #c8d2e0;
    border-radius: 0.75rem;
    padding: 14px 16px;
    color: #0f172a !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.18s ease;
    cursor: pointer;
}
.tapx-mo-action-btn:hover {
    background: #fefce8;
    border-color: #bcd3f0;
    box-shadow: 0 4px 12px rgba(245,158,11,0.1);
}
.tapx-mo-action-icon {
    color: #475569;
    font-size: 20px;
}
.tapx-mo-action-btn:hover .tapx-mo-action-icon {
    color: #d97706;
}

/* ── Recent records container ────────────────────────────── */
.tapx-mo-recent-box {
    background: #ffffff;
    border: 1px solid #c8d2e0;
}
.tapx-mo-empty {
    color: #64748b;
    margin: 0;
}
.tapx-mo-empty-strong {
    color: #0f172a;
}
.tapx-mo-recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    border-bottom: 1px solid #f1f5f9;
}
.tapx-mo-recent-row:last-child {
    border-bottom: 0;
}
.tapx-mo-recent-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tapx-mo-recent-icon {
    color: #d97706;
    font-size: 18px;
}
.tapx-mo-recent-name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}
.tapx-mo-recent-meta {
    font-size: 12px;
    color: #64748b;
}

/* ── Maintenance buttons ─────────────────────────────────── */
.tapx-mo-maint-btn {
    background: #ffffff;
    border: 1px solid #c8d2e0;
    border-radius: 0.75rem;
    padding: 14px 16px;
    color: #0f172a !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.18s ease;
    cursor: pointer;
}
.tapx-mo-maint-btn:hover {
    border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.tapx-mo-maint-btn .material-symbols-outlined {
    color: #475569;
    font-size: 20px;
}
.tapx-mo-maint-btn.is-danger:hover {
    background: #fef2f2;
    border-color: #fecaca;
}
.tapx-mo-maint-btn.is-danger:hover .material-symbols-outlined,
.tapx-mo-maint-btn.is-danger:hover {
    color: #b91c1c !important;
}

/* ── DARK MODE OVERRIDES ────────────────────────────────── */
#tapx-dash-overlay.dark .tapx-mo-wrap {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.08);
}
#tapx-dash-overlay.dark #panel-manage-overview {
    color: #ffffff;
}
#tapx-dash-overlay.dark .tapx-mo-section-label,
#tapx-dash-overlay.dark .tapx-mo-section-label .material-symbols-outlined {
    color: #cbd5e1 !important;
}
#tapx-dash-overlay.dark .tapx-mo-header-card {
    background: linear-gradient(135deg, rgba(255,215,0,0.12) 0%, rgba(255,215,0,0.04) 100%);
    border-color: rgba(255,215,0,0.3);
}
#tapx-dash-overlay.dark .tapx-mo-header-title { color: #ffffff; }
#tapx-dash-overlay.dark .tapx-mo-header-desc  { color: #94a3b8; }
#tapx-dash-overlay.dark .tapx-mo-stat-card,
#tapx-dash-overlay.dark .tapx-mo-action-btn,
#tapx-dash-overlay.dark .tapx-mo-recent-box,
#tapx-dash-overlay.dark .tapx-mo-maint-btn {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: #ffffff !important;
}
#tapx-dash-overlay.dark .tapx-mo-stat-value,
#tapx-dash-overlay.dark .tapx-mo-recent-name,
#tapx-dash-overlay.dark .tapx-mo-empty-strong { color: #ffffff; }
#tapx-dash-overlay.dark .tapx-mo-stat-label,
#tapx-dash-overlay.dark .tapx-mo-recent-meta,
#tapx-dash-overlay.dark .tapx-mo-empty { color: #9ca3af; }
#tapx-dash-overlay.dark .tapx-mo-action-icon,
#tapx-dash-overlay.dark .tapx-mo-maint-btn .material-symbols-outlined {
    color: #cbd5e1;
}
#tapx-dash-overlay.dark .tapx-mo-action-btn:hover {
    background: rgba(255,215,0,0.08);
    border-color: rgba(255,215,0,0.4);
}
#tapx-dash-overlay.dark .tapx-mo-recent-row { border-color: rgba(255,255,255,0.05); }


/* Hide "No matching emirates" empty row — user requested removal */
html body li[id$="-emirate-empty"],
html body [data-emirate-options] li[id$="-emirate-empty"],
html body [data-tapx-portaled] li[id$="-emirate-empty"] {
    display: none !important;
    visibility: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════
   Emirate dropdown — TIGHT compact spacing (forced)
   Maximum specificity to override anything.
═══════════════════════════════════════════════════════════════ */

/* List wrappers — no spacing */
html body #entity-modal #emirates-combo-popover ul,
html body #entity-modal #doc-emirate-combo-popover ul,
html body #entity-modal [data-emirate-popover] ul,
html body [data-tapx-portaled] ul,
html body [data-tapx-portaled] [data-emirate-options],
html body #emirates-combo-options,
html body #doc-emirate-combo-options {
    padding: 4px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: block !important;
    gap: 0 !important;
    row-gap: 0 !important;
}

/* List items — zero spacing, button takes full control */
html body #entity-modal #emirates-combo-popover li,
html body #entity-modal #doc-emirate-combo-popover li,
html body #entity-modal [data-emirate-popover] li,
html body [data-tapx-portaled] li,
html body #emirates-combo-options > li,
html body #doc-emirate-combo-options > li {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    display: block !important;
}

/* The clickable buttons — TIGHT vertical padding */
html body #entity-modal #emirates-combo-popover .doc-modal-combo-option,
html body #entity-modal #doc-emirate-combo-popover .doc-modal-combo-option,
html body #entity-modal [data-emirate-popover] .doc-modal-combo-option,
html body [data-tapx-portaled] .doc-modal-combo-option,
html body [data-tapx-portaled] [data-emirate-options] button,
html body [data-tapx-portaled] [data-emirate-options] li > button,
html body #emirates-combo-options .doc-modal-combo-option,
html body #doc-emirate-combo-options .doc-modal-combo-option,
html body button.doc-modal-combo-option {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 14px !important;
    line-height: 18px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
}

/* Same compact look for nationality searchable list */
html body #entity-modal .dash-searchable-list .dash-searchable-option,
html body [data-tapx-portaled] .dash-searchable-option,
html body button.dash-searchable-option {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 14px !important;
    line-height: 18px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
}
html body #entity-modal .dash-searchable-list,
html body [data-tapx-portaled] .dash-searchable-list {
    padding: 4px 0 !important;
    margin: 0 !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║   TAPX UNIFIED DROPDOWN DESIGN SYSTEM                            ║
   ║   One consistent design language for ALL select / dropdown UI    ║
   ║   • Same height, radius, padding, font, border, hover, focus     ║
   ║   • Auto light/dark mode support                                 ║
   ║   • Targets: tapx-ss, dash-searchable, fine-form-select, select  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
#tapx-dash-overlay {
    --tapx-dd-height: 40px;
    --tapx-dd-radius: 10px;
    --tapx-dd-pad-x: 14px;
    --tapx-dd-font-size: 13px;
    --tapx-dd-font-weight: 500;
    --tapx-dd-transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --tapx-dd-shadow-hover: 0 1px 3px rgba(15,23,42,0.06);
    --tapx-dd-shadow-focus: 0 0 0 3px rgba(99,102,241,0.18);
    --tapx-dd-shadow-panel: 0 8px 28px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.06);
}
/* Dark mode tokens */
#tapx-dash-overlay.dark {
    --tapx-dd-shadow-hover: 0 1px 3px rgba(0,0,0,0.25);
    --tapx-dd-shadow-focus: 0 0 0 3px rgba(99,102,241,0.28);
    --tapx-dd-shadow-panel: 0 12px 36px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
}

/* ── LIGHT MODE: COLOR TOKENS ───────────────────────────────────── */
#tapx-dash-overlay:not(.dark) {
    --tapx-dd-bg:       #ffffff;
    --tapx-dd-bg-hover: #f8fafc;
    --tapx-dd-border:   rgba(15,23,42,0.12);
    --tapx-dd-border-hover: rgba(99,102,241,0.4);
    --tapx-dd-border-focus: #6366f1;
    --tapx-dd-text:     #0f172a;
    --tapx-dd-placeholder: #94a3b8;
    --tapx-dd-icon:     #64748b;
    --tapx-dd-panel-bg: #ffffff;
    --tapx-dd-panel-border: rgba(15,23,42,0.10);
    --tapx-dd-item-hover-bg: #f1f5f9;
    --tapx-dd-item-active-bg: #eef2ff;
    --tapx-dd-item-active-text: #4338ca;
}
/* ── DARK MODE: COLOR TOKENS ────────────────────────────────────── */
#tapx-dash-overlay.dark {
    --tapx-dd-bg:       rgba(255,255,255,0.04);
    --tapx-dd-bg-hover: rgba(255,255,255,0.07);
    --tapx-dd-border:   rgba(255,255,255,0.12);
    --tapx-dd-border-hover: rgba(99,102,241,0.5);
    --tapx-dd-border-focus: #818cf8;
    --tapx-dd-text:     #f1f5f9;
    --tapx-dd-placeholder: #6b7280;
    --tapx-dd-icon:     #94a3b8;
    --tapx-dd-panel-bg: #1a1a1a;
    --tapx-dd-panel-border: rgba(255,255,255,0.1);
    --tapx-dd-item-hover-bg: rgba(255,255,255,0.06);
    --tapx-dd-item-active-bg: rgba(99,102,241,0.16);
    --tapx-dd-item-active-text: #c7d2fe;
}

/* ╔══ DROPDOWN TRIGGERS ═══════════════════════════════════════════╗ */
/* Targets all common select/dropdown trigger types under dashboard */
#tapx-dash-overlay .tapx-ss-trigger,
#tapx-dash-overlay .tapx-ss .tapx-ss-input,
#tapx-dash-overlay .dash-searchable-trigger,
#tapx-dash-overlay select:not([multiple]):not(.tapx-ss-native):not([class*="fine-phone-cc"]),
#tapx-dash-overlay .fine-form-select,
#tapx-dash-overlay input[list] {
    height: var(--tapx-dd-height) !important;
    min-height: var(--tapx-dd-height) !important;
    padding: 0 38px 0 var(--tapx-dd-pad-x) !important;
    border-radius: var(--tapx-dd-radius) !important;
    border: 1.5px solid var(--tapx-dd-border) !important;
    background: var(--tapx-dd-bg) !important;
    color: var(--tapx-dd-text) !important;
    font-size: var(--tapx-dd-font-size) !important;
    font-weight: var(--tapx-dd-font-weight) !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    transition: var(--tapx-dd-transition) !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Native select arrow — replace with our SVG */
#tapx-dash-overlay select:not([multiple]):not(.tapx-ss-native):not([class*="fine-phone-cc"]),
#tapx-dash-overlay .fine-form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px 14px !important;
    cursor: pointer !important;
}
#tapx-dash-overlay.dark select:not([multiple]):not(.tapx-ss-native):not([class*="fine-phone-cc"]),
#tapx-dash-overlay.dark .fine-form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}

/* Hover state — subtle lift */
#tapx-dash-overlay .tapx-ss-trigger:hover,
#tapx-dash-overlay .tapx-ss-input:hover,
#tapx-dash-overlay .dash-searchable-trigger:hover,
#tapx-dash-overlay select:not([multiple]):not(.tapx-ss-native):hover,
#tapx-dash-overlay .fine-form-select:hover {
    border-color: var(--tapx-dd-border-hover) !important;
    background-color: var(--tapx-dd-bg-hover) !important;
    box-shadow: var(--tapx-dd-shadow-hover) !important;
}

/* Focus state — NO highlight per user request.
   Dropdown fields stay neutral when focused. Only the chevron
   rotation (handled by JS) indicates the dropdown is open. */
#tapx-dash-overlay .tapx-ss-trigger:focus,
#tapx-dash-overlay .tapx-ss-trigger:focus-visible,
#tapx-dash-overlay .tapx-ss-input:focus,
#tapx-dash-overlay .tapx-ss-input:focus-visible,
#tapx-dash-overlay .dash-searchable-trigger:focus,
#tapx-dash-overlay select:not([multiple]):focus,
#tapx-dash-overlay .fine-form-select:focus {
    border-color: var(--tapx-dd-border) !important;
    box-shadow: var(--tapx-dd-shadow) !important;
    background-color: var(--tapx-dd-bg) !important;
    outline: none !important;
}

/* Placeholder text — consistent muted color */
#tapx-dash-overlay .tapx-ss-input::placeholder,
#tapx-dash-overlay .dash-searchable-trigger::placeholder,
#tapx-dash-overlay .fine-form-select::placeholder,
#tapx-dash-overlay input[list]::placeholder {
    color: var(--tapx-dd-placeholder) !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* ╔══ TAPX-SS CHEVRON ICON ════════════════════════════════════════╗ */
#tapx-dash-overlay .tapx-ss-arrow,
#tapx-dash-overlay .tapx-ss-chevron {
    width: 14px !important;
    height: 14px !important;
    color: var(--tapx-dd-icon) !important;
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1) !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
#tapx-dash-overlay .tapx-ss.open .tapx-ss-arrow,
#tapx-dash-overlay .tapx-ss.open .tapx-ss-chevron,
#tapx-dash-overlay .tapx-ss[data-open="true"] .tapx-ss-arrow,
#tapx-dash-overlay .tapx-ss[data-open="true"] .tapx-ss-chevron {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* ╔══ DROPDOWN PANEL / LIST ═══════════════════════════════════════╗ */
.tapx-ss-list,
#tapx-dash-overlay .tapx-ss-list,
#tapx-dash-overlay .dash-searchable-panel,
[data-tapx-portaled] .tapx-ss-list,
[data-tapx-portaled] .dash-searchable-panel {
    background: var(--tapx-dd-panel-bg, #ffffff) !important;
    border: 1px solid var(--tapx-dd-panel-border, rgba(15,23,42,0.10)) !important;
    border-radius: 12px !important;
    box-shadow: var(--tapx-dd-shadow-panel, 0 8px 28px rgba(15,23,42,0.12)) !important;
    padding: 6px !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148,163,184,0.4) transparent !important;
}
/* Dark mode panel */
.tapx-ss-list[data-theme="dark"],
#tapx-dash-overlay.dark .tapx-ss-list,
#tapx-dash-overlay.dark .dash-searchable-panel {
    background: #1a1a1a !important;
    border-color: rgba(255,255,255,0.10) !important;
}
.tapx-ss-list::-webkit-scrollbar,
.dash-searchable-panel::-webkit-scrollbar {
    width: 6px;
}
.tapx-ss-list::-webkit-scrollbar-thumb,
.dash-searchable-panel::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.4);
    border-radius: 6px;
}

/* ╔══ DROPDOWN ITEMS ══════════════════════════════════════════════╗ */
.tapx-ss-list li,
.tapx-ss-option,
#tapx-dash-overlay .dash-searchable-panel li,
#tapx-dash-overlay .dash-searchable-option,
[data-tapx-portaled] .dash-searchable-option,
[data-tapx-portaled] .tapx-ss-option {
    padding: 9px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--tapx-dd-text, #0f172a) !important;
    cursor: pointer !important;
    transition: background-color 0.14s ease, color 0.14s ease !important;
    list-style: none !important;
    user-select: none !important;
    border: none !important;
    margin: 1px 0 !important;
    background: transparent !important;
}
#tapx-dash-overlay.dark .tapx-ss-list li,
#tapx-dash-overlay.dark .dash-searchable-option {
    color: #f1f5f9 !important;
}

/* Item hover */
.tapx-ss-list li:hover,
.tapx-ss-option:hover,
#tapx-dash-overlay .dash-searchable-panel li:hover,
#tapx-dash-overlay .dash-searchable-option:hover {
    background-color: var(--tapx-dd-item-hover-bg, #f1f5f9) !important;
}
#tapx-dash-overlay.dark .tapx-ss-list li:hover,
#tapx-dash-overlay.dark .dash-searchable-option:hover {
    background-color: rgba(255,255,255,0.06) !important;
}

/* Selected state */
.tapx-ss-list li.tapx-ss-selected,
.tapx-ss-option.is-selected,
.tapx-ss-option[aria-selected="true"],
#tapx-dash-overlay .dash-searchable-option.is-selected,
#tapx-dash-overlay .dash-searchable-option[aria-selected="true"] {
    background-color: var(--tapx-dd-item-active-bg, #eef2ff) !important;
    color: var(--tapx-dd-item-active-text, #4338ca) !important;
    font-weight: 700 !important;
    position: relative;
}
.tapx-ss-list li.tapx-ss-selected::before,
.tapx-ss-option.is-selected::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--tapx-dd-border-focus, #6366f1);
}

/* Active (keyboard focus) */
.tapx-ss-list li.tapx-ss-active,
.tapx-ss-option.is-active {
    background-color: var(--tapx-dd-item-hover-bg, #f1f5f9) !important;
}

/* ╔══ FORM LABELS ABOVE DROPDOWNS — consistent spacing ════════════╗ */
#tapx-dash-overlay .fine-form-label,
#tapx-dash-overlay .tapx-ss-label,
#tapx-dash-overlay label.dash-form-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 6px !important;
    display: block !important;
    color: var(--tapx-dd-placeholder) !important;
}
#tapx-dash-overlay:not(.dark) .fine-form-label,
#tapx-dash-overlay:not(.dark) .tapx-ss-label {
    color: #475569 !important;
}

/* ╔══ Z-INDEX FIX ═════════════════════════════════════════════════╗ */
/* Ensure dropdown panels always float above other UI */
.tapx-ss-list,
[data-tapx-portaled] {
    z-index: 2147483647 !important;
}
.dash-searchable-panel {
    z-index: 999999 !important;
}

/* ╔══ FINE FORM DROPDOWNS — match unified design ══════════════════╗ */
#fine-form-modal .fine-form-select,
#fine-form-modal select.fine-form-select {
    height: var(--tapx-dd-height) !important;
    border-radius: var(--tapx-dd-radius) !important;
    padding: 0 38px 0 var(--tapx-dd-pad-x) !important;
}

/* ╔══ ENTITY MODAL (Add Employee/Vehicle/Doc) — match too ═════════╗ */
#entity-modal select:not([multiple]),
#entity-modal .dash-searchable-trigger,
#entity-modal input[type="text"][list] {
    height: var(--tapx-dd-height) !important;
    border-radius: var(--tapx-dd-radius) !important;
}

/* ╔══ MOBILE / RESPONSIVE TWEAKS ══════════════════════════════════╗ */
@media (max-width: 640px) {
    #tapx-dash-overlay {
        --tapx-dd-height: 42px;
        --tapx-dd-pad-x: 12px;
        --tapx-dd-font-size: 14px;
    }
    .tapx-ss-list,
    .dash-searchable-panel {
        border-radius: 14px !important;
        padding: 8px !important;
    }
}

/* ╔══ DISABLED STATE ══════════════════════════════════════════════╗ */
#tapx-dash-overlay select:disabled,
#tapx-dash-overlay .tapx-ss-input:disabled,
#tapx-dash-overlay .dash-searchable-trigger[aria-disabled="true"] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ╔══ INVALID/ERROR STATE ═════════════════════════════════════════╗ */
#tapx-dash-overlay select.is-invalid,
#tapx-dash-overlay .tapx-ss-input.is-invalid,
#tapx-dash-overlay .dash-searchable-trigger.is-invalid,
#tapx-dash-overlay .fine-form-select.is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.18) !important;
}

/* ╔══ SMOOTH OPEN ANIMATION ═══════════════════════════════════════╗ */
@keyframes tapxDdFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tapx-ss-list[data-open="true"],
.dash-searchable-panel[data-open="true"] {
    animation: tapxDdFadeIn 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ╔══ COMPLIANCE FORM TOGGLES — fast & snappy ═════════════════════╗ */
#compliance-add-modal label.relative.inline-flex.items-center > div,
#compliance-add-modal label.relative.inline-flex.items-center > div::after {
    transition-duration: 0.15s !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#compliance-add-modal label.relative.inline-flex.items-center > div {
    transition-property: background-color, box-shadow !important;
}
#compliance-add-modal label.relative.inline-flex.items-center > div::after {
    transition-property: transform, background-color !important;
}
/* Active feedback — slight scale on click for snappy feel */
#compliance-add-modal label.relative.inline-flex.items-center:active > div::after {
    transform: scale(0.92);
}
#compliance-add-modal input[type="checkbox"]:checked.peer + div::after,
#compliance-add-modal .peer:checked ~ div::after {
    transition-duration: 0.15s !important;
}
        /* WPS Hold toggle */
        input[name="hold"]:checked + .tapx-hold-slider { background: #10b981; }
        input[name="hold"]:checked ~ .tapx-hold-knob { transform: translateX(22px); }



/* ═══════════ CLIENT TAG CHIPS ═══════════ */
.tapx-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
    user-select: none;
    font-family: inherit;
}
.tapx-tag-chip:hover {
    border-color: rgba(96,165,250,0.4);
    background: rgba(96,165,250,0.08);
    transform: translateY(-1px);
}
.tapx-tag-chip .tapx-tag-icon {
    font-size: 13px;
    line-height: 1;
}
.tapx-tag-chip .tapx-tag-label {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: 0.01em;
}
/* Selected state — per tag type with distinct colors */
.tapx-tag-chip:has(input:checked) {
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.tapx-tag-chip[data-tag="VIP"]:has(input:checked) {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: #f59e0b;
}
.tapx-tag-chip[data-tag="VIP"]:has(input:checked) .tapx-tag-label { color: #1f1300; }
.tapx-tag-chip[data-tag="Fast payment"]:has(input:checked) {
    background: linear-gradient(135deg, #34d399, #10b981);
    border-color: #10b981;
}
.tapx-tag-chip[data-tag="Fast payment"]:has(input:checked) .tapx-tag-label { color: #052e1a; }
.tapx-tag-chip[data-tag="Problematic"]:has(input:checked) {
    background: linear-gradient(135deg, #f87171, #ef4444);
    border-color: #ef4444;
}
.tapx-tag-chip[data-tag="Problematic"]:has(input:checked) .tapx-tag-label { color: #ffffff; }
.tapx-tag-chip[data-tag="High priority"]:has(input:checked) {
    background: linear-gradient(135deg, #fb923c, #ea580c);
    border-color: #ea580c;
}
.tapx-tag-chip[data-tag="High priority"]:has(input:checked) .tapx-tag-label { color: #ffffff; }
.tapx-tag-chip[data-tag="Repeat customer"]:has(input:checked) {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    border-color: #8b5cf6;
}
.tapx-tag-chip[data-tag="Repeat customer"]:has(input:checked) .tapx-tag-label { color: #ffffff; }

/* Light mode adjustments */
#tapx-dash-overlay:not(.dark) .tapx-tag-chip {
    border-color: rgba(15,23,42,0.12);
    background: #ffffff;
}
#tapx-dash-overlay:not(.dark) .tapx-tag-chip:hover {
    background: #f1f5f9;
    border-color: rgba(96,165,250,0.5);
}
#tapx-dash-overlay:not(.dark) .tapx-tag-chip .tapx-tag-label {
    color: #475569;
}


/* ════════ PLATE STRIP CHAR — TEXT ALWAYS BLACK ════════
   Force black text on the plate-strip letter regardless of:
   • the emirate background color (red/green/blue/yellow/etc.)
   • light or dark theme
   • any global .text-white override rules
   Highest specificity + !important to win over all other rules. */
html body #tapx-dash-overlay .vehicle-plate-badge > div:first-child,
html body #tapx-dash-overlay .vehicle-plate-badge > div:first-child *,
html body .vehicle-plate-badge > div:first-child,
html body .vehicle-plate-badge > div:first-child *,
#tapx-dash-overlay.dark .vehicle-plate-badge > div:first-child,
#tapx-dash-overlay.dark .vehicle-plate-badge > div:first-child *,
#tapx-dash-overlay:not(.dark) .vehicle-plate-badge > div:first-child,
#tapx-dash-overlay:not(.dark) .vehicle-plate-badge > div:first-child *,
#tapx-dash-overlay:not(.dark) main .vehicle-plate-badge > div:first-child,
#tapx-dash-overlay:not(.dark) main .vehicle-plate-badge > div:first-child *,
.vehicle-plate-badge .bg-red-600,
.vehicle-plate-badge .bg-green-600,
.vehicle-plate-badge .bg-amber-950,
.vehicle-plate-badge .bg-blue-600,
.vehicle-plate-badge .bg-black,
.vehicle-plate-badge .bg-yellow-400,
.vehicle-plate-badge .bg-orange-500,
.vehicle-plate-badge .bg-slate-600,
.vehicle-plate-badge [class*="bg-"]:first-child {
    color: #000000 !important;
}
/* Defeat the global light-mode .text-white → blue override specifically inside plate badges */
#tapx-dash-overlay:not(.dark) main .vehicle-plate-badge .text-white,
#tapx-dash-overlay:not(.dark) .vehicle-plate-badge .text-white {
    color: #000000 !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║   TAPX FINAL DROPDOWN CONSISTENCY LAYER (highest priority)       ║
   ║   Forces EVERY dropdown trigger and panel to look identical      ║
   ║   regardless of which subsystem rendered it.                     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── DARK MODE TRIGGERS ──────────────────────────────────────────── */
#tapx-dash-overlay.dark select,
#tapx-dash-overlay.dark .tapx-ss-trigger,
#tapx-dash-overlay.dark .tapx-ss-input,
#tapx-dash-overlay.dark .dash-searchable-trigger,
#tapx-dash-overlay.dark .fine-form-select,
#tapx-dash-overlay.dark .doc-modal-combo-input,
#tapx-dash-overlay.dark input[list],
#tapx-dash-overlay.dark #emirates-combo-input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 38px 0 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    background-color: rgba(0,0,0,0.50) !important;
    color: #f1f5f9 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: all 0.18s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: inherit !important;
}

/* ── LIGHT MODE TRIGGERS ─────────────────────────────────────────── */
#tapx-dash-overlay:not(.dark) select,
#tapx-dash-overlay:not(.dark) .tapx-ss-trigger,
#tapx-dash-overlay:not(.dark) .tapx-ss-input,
#tapx-dash-overlay:not(.dark) .dash-searchable-trigger,
#tapx-dash-overlay:not(.dark) .fine-form-select,
#tapx-dash-overlay:not(.dark) .doc-modal-combo-input,
#tapx-dash-overlay:not(.dark) input[list],
#tapx-dash-overlay:not(.dark) #emirates-combo-input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 38px 0 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid rgba(15,23,42,0.12) !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: all 0.18s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: inherit !important;
}

/* ── UNIFIED CHEVRON ARROW — DARK MODE ──────────────────────────── */
#tapx-dash-overlay.dark select,
#tapx-dash-overlay.dark .fine-form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px 14px !important;
    cursor: pointer !important;
}

/* ── UNIFIED CHEVRON ARROW — LIGHT MODE ──────────────────────────── */
#tapx-dash-overlay:not(.dark) select,
#tapx-dash-overlay:not(.dark) .fine-form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px 14px !important;
    cursor: pointer !important;
}

/* ── HIDE OLD CUSTOM ARROW ICONS where we draw our own ──────────── */
#tapx-dash-overlay select + .material-symbols-outlined,
#tapx-dash-overlay .fine-form-select + .material-symbols-outlined {
    /* Don't hide custom emirate dropdowns that have their own chevron span — keep them aligned */
}

/* ── UNIFIED CHEVRON FOR CUSTOM TRIGGERS (tapx-ss / dash-searchable) ── */
#tapx-dash-overlay .tapx-ss-arrow,
#tapx-dash-overlay .tapx-ss-chevron,
#tapx-dash-overlay .tapx-ss-chev,
#tapx-dash-overlay .dash-searchable-trigger ~ [aria-hidden],
#tapx-dash-overlay .doc-modal-combo-input ~ .material-symbols-outlined {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1) !important;
    pointer-events: none !important;
}
#tapx-dash-overlay.dark .tapx-ss-arrow,
#tapx-dash-overlay.dark .tapx-ss-chevron,
#tapx-dash-overlay.dark .tapx-ss-chev,
#tapx-dash-overlay.dark .doc-modal-combo-input ~ .material-symbols-outlined {
    color: #94a3b8 !important;
}
#tapx-dash-overlay:not(.dark) .tapx-ss-arrow,
#tapx-dash-overlay:not(.dark) .tapx-ss-chevron,
#tapx-dash-overlay:not(.dark) .tapx-ss-chev,
#tapx-dash-overlay:not(.dark) .doc-modal-combo-input ~ .material-symbols-outlined {
    color: #64748b !important;
}

/* ── HOVER ──────────────────────────────────────────────────────── */
#tapx-dash-overlay.dark select:hover,
#tapx-dash-overlay.dark .tapx-ss-trigger:hover,
#tapx-dash-overlay.dark .tapx-ss-input:hover,
#tapx-dash-overlay.dark .dash-searchable-trigger:hover,
#tapx-dash-overlay.dark .fine-form-select:hover,
#tapx-dash-overlay.dark .doc-modal-combo-input:hover,
#tapx-dash-overlay.dark #emirates-combo-input:hover {
    border-color: rgba(99,102,241,0.5) !important;
    background-color: rgba(255,255,255,0.04) !important;
}
#tapx-dash-overlay:not(.dark) select:hover,
#tapx-dash-overlay:not(.dark) .tapx-ss-trigger:hover,
#tapx-dash-overlay:not(.dark) .tapx-ss-input:hover,
#tapx-dash-overlay:not(.dark) .dash-searchable-trigger:hover,
#tapx-dash-overlay:not(.dark) .fine-form-select:hover,
#tapx-dash-overlay:not(.dark) .doc-modal-combo-input:hover,
#tapx-dash-overlay:not(.dark) #emirates-combo-input:hover {
    border-color: rgba(99,102,241,0.4) !important;
    background-color: #f8fafc !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
}

/* ── FOCUS — premium blue ring (same for ALL) ──────────────────── */
#tapx-dash-overlay select:focus,
#tapx-dash-overlay .tapx-ss-trigger:focus,
#tapx-dash-overlay .tapx-ss-trigger:focus-visible,
#tapx-dash-overlay .tapx-ss-input:focus,
#tapx-dash-overlay .tapx-ss-input:focus-visible,
#tapx-dash-overlay .dash-searchable-trigger:focus,
#tapx-dash-overlay .fine-form-select:focus,
#tapx-dash-overlay .doc-modal-combo-input:focus,
#tapx-dash-overlay #emirates-combo-input:focus {
    /* No highlight on focus per user request — neutral border kept */
    border-color: var(--tapx-dd-border, #c8d2e0) !important;
    box-shadow: none !important;
    outline: none !important;
}
#tapx-dash-overlay.dark select:focus,
#tapx-dash-overlay.dark .tapx-ss-trigger:focus,
#tapx-dash-overlay.dark .tapx-ss-input:focus,
#tapx-dash-overlay.dark .dash-searchable-trigger:focus,
#tapx-dash-overlay.dark .fine-form-select:focus,
#tapx-dash-overlay.dark .doc-modal-combo-input:focus {
    /* No highlight on focus per user request — neutral border kept */
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   DROPDOWN PANELS / LISTS — IDENTICAL design everywhere
   ══════════════════════════════════════════════════════════════════ */

/* ── PANEL CONTAINER ─────────────────────────────────────────────── */
.tapx-ss-list,
.dash-searchable-panel,
.dash-modal-drop-carpet,
[data-emirate-popover],
#tapx-dash-overlay .tapx-ss-list,
#tapx-dash-overlay .dash-searchable-panel,
[data-tapx-portaled] .tapx-ss-list,
[data-tapx-portaled] .dash-searchable-panel {
    border-radius: 12px !important;
    padding: 6px !important;
    overflow: hidden !important;
    overflow-y: auto !important;
    margin-top: 4px !important;
    scrollbar-width: thin !important;
    font-family: inherit !important;
    font-size: 13px !important;
}

/* ── DARK PANEL ─────────────────────────────────────────────────── */
#tapx-dash-overlay.dark .tapx-ss-list,
#tapx-dash-overlay.dark .dash-searchable-panel,
#tapx-dash-overlay.dark .dash-modal-drop-carpet,
#tapx-dash-overlay.dark [data-emirate-popover],
body.dark .tapx-ss-list {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3) !important;
    color: #f1f5f9 !important;
}

/* ── LIGHT PANEL ─────────────────────────────────────────────────── */
#tapx-dash-overlay:not(.dark) .tapx-ss-list,
#tapx-dash-overlay:not(.dark) .dash-searchable-panel,
#tapx-dash-overlay:not(.dark) .dash-modal-drop-carpet,
#tapx-dash-overlay:not(.dark) [data-emirate-popover] {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.10) !important;
    box-shadow: 0 8px 28px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.06) !important;
    color: #0f172a !important;
}

/* ── PANEL ITEMS (the actual dropdown options) ──────────────────── */
.tapx-ss-list li,
.tapx-ss-option,
.dash-searchable-option,
.dash-modal-drop-carpet li,
[data-emirate-options] li,
#emirates-combo-options li {
    padding: 9px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    transition: background-color 0.14s ease, color 0.14s ease !important;
    list-style: none !important;
    user-select: none !important;
    border: none !important;
    margin: 1px 0 !important;
    background: transparent !important;
}

/* ── DARK PANEL ITEMS ────────────────────────────────────────────── */
#tapx-dash-overlay.dark .tapx-ss-list li,
#tapx-dash-overlay.dark .tapx-ss-option,
#tapx-dash-overlay.dark .dash-searchable-option,
#tapx-dash-overlay.dark .dash-modal-drop-carpet li,
#tapx-dash-overlay.dark [data-emirate-options] li,
#tapx-dash-overlay.dark #emirates-combo-options li {
    color: #f1f5f9 !important;
}

/* ── LIGHT PANEL ITEMS ───────────────────────────────────────────── */
#tapx-dash-overlay:not(.dark) .tapx-ss-list li,
#tapx-dash-overlay:not(.dark) .tapx-ss-option,
#tapx-dash-overlay:not(.dark) .dash-searchable-option,
#tapx-dash-overlay:not(.dark) .dash-modal-drop-carpet li,
#tapx-dash-overlay:not(.dark) [data-emirate-options] li,
#tapx-dash-overlay:not(.dark) #emirates-combo-options li {
    color: #0f172a !important;
}

/* ── ITEM HOVER ─────────────────────────────────────────────────── */
#tapx-dash-overlay.dark .tapx-ss-list li:hover,
#tapx-dash-overlay.dark .tapx-ss-option:hover,
#tapx-dash-overlay.dark .dash-searchable-option:hover,
#tapx-dash-overlay.dark .dash-modal-drop-carpet li:hover,
#tapx-dash-overlay.dark [data-emirate-options] li:hover {
    background-color: rgba(255,255,255,0.06) !important;
}
#tapx-dash-overlay:not(.dark) .tapx-ss-list li:hover,
#tapx-dash-overlay:not(.dark) .tapx-ss-option:hover,
#tapx-dash-overlay:not(.dark) .dash-searchable-option:hover,
#tapx-dash-overlay:not(.dark) .dash-modal-drop-carpet li:hover,
#tapx-dash-overlay:not(.dark) [data-emirate-options] li:hover {
    background-color: #f1f5f9 !important;
}

/* ── ITEM SELECTED ──────────────────────────────────────────────── */
#tapx-dash-overlay .tapx-ss-list li.tapx-ss-selected,
#tapx-dash-overlay .tapx-ss-option.is-selected,
#tapx-dash-overlay .tapx-ss-option[aria-selected="true"],
#tapx-dash-overlay .dash-searchable-option.is-selected,
#tapx-dash-overlay .dash-searchable-option[aria-selected="true"],
#tapx-dash-overlay [data-emirate-options] li[aria-selected="true"] {
    font-weight: 700 !important;
    position: relative !important;
}
#tapx-dash-overlay.dark .tapx-ss-list li.tapx-ss-selected,
#tapx-dash-overlay.dark .tapx-ss-option.is-selected,
#tapx-dash-overlay.dark .tapx-ss-option[aria-selected="true"],
#tapx-dash-overlay.dark .dash-searchable-option.is-selected,
#tapx-dash-overlay.dark .dash-searchable-option[aria-selected="true"] {
    background-color: rgba(99,102,241,0.16) !important;
    color: #c7d2fe !important;
}
#tapx-dash-overlay:not(.dark) .tapx-ss-list li.tapx-ss-selected,
#tapx-dash-overlay:not(.dark) .tapx-ss-option.is-selected,
#tapx-dash-overlay:not(.dark) .tapx-ss-option[aria-selected="true"],
#tapx-dash-overlay:not(.dark) .dash-searchable-option.is-selected,
#tapx-dash-overlay:not(.dark) .dash-searchable-option[aria-selected="true"] {
    background-color: #eef2ff !important;
    color: #4338ca !important;
}

/* ── SCROLLBAR ──────────────────────────────────────────────────── */
.tapx-ss-list::-webkit-scrollbar,
.dash-searchable-panel::-webkit-scrollbar,
.dash-modal-drop-carpet::-webkit-scrollbar,
[data-emirate-popover]::-webkit-scrollbar {
    width: 6px;
}
.tapx-ss-list::-webkit-scrollbar-thumb,
.dash-searchable-panel::-webkit-scrollbar-thumb,
.dash-modal-drop-carpet::-webkit-scrollbar-thumb,
[data-emirate-popover]::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,0.4);
    border-radius: 6px;
}

/* ── Z-INDEX FIX — panels always float above ────────────────────── */
.tapx-ss-list,
.dash-searchable-panel,
.dash-modal-drop-carpet:not(.hidden),
[data-emirate-popover]:not([aria-hidden="true"]) {
    z-index: 999999 !important;
}
[data-tapx-portaled] {
    z-index: 2147483647 !important;
}

/* ── Native select OPTIONs cannot be styled, but at least set font ─── */
#tapx-dash-overlay select option {
    background-color: #1a1a1a;
    color: #f1f5f9;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
}
#tapx-dash-overlay:not(.dark) select option {
    background-color: #ffffff;
    color: #0f172a;
}

/* ── MOBILE RESPONSIVENESS ──────────────────────────────────────── */
@media (max-width: 640px) {
    #tapx-dash-overlay select,
    #tapx-dash-overlay .tapx-ss-trigger,
    #tapx-dash-overlay .tapx-ss-input,
    #tapx-dash-overlay .dash-searchable-trigger,
    #tapx-dash-overlay .fine-form-select,
    #tapx-dash-overlay .doc-modal-combo-input {
        height: 42px !important;
        font-size: 14px !important;
    }
    .tapx-ss-list,
    .dash-searchable-panel,
    .dash-modal-drop-carpet {
        border-radius: 14px !important;
        padding: 8px !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║   YELLOW HOVER HIGHLIGHT FOR ALL DROPDOWN LIST ITEMS             ║
   ║   Hover = clear yellow background + amber accent border          ║
   ║   Matches the "Private" example from screenshot                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── LIGHT MODE: warm cream-yellow hover ─────────────────────────── */
#tapx-dash-overlay:not(.dark) .tapx-ss-list li:hover,
#tapx-dash-overlay:not(.dark) .tapx-ss-option:hover,
#tapx-dash-overlay:not(.dark) .dash-searchable-option:hover,
#tapx-dash-overlay:not(.dark) .dash-searchable-panel li:hover,
#tapx-dash-overlay:not(.dark) .dash-modal-drop-carpet li:hover,
#tapx-dash-overlay:not(.dark) [data-emirate-options] li:hover,
#tapx-dash-overlay:not(.dark) #emirates-combo-options li:hover,
#tapx-dash-overlay:not(.dark) .tapx-ss-list li.tapx-ss-active,
#tapx-dash-overlay:not(.dark) .tapx-ss-option.is-active,
html body .tapx-ss-list li:hover,
html body .dash-searchable-option:hover,
html body [data-tapx-portaled] .tapx-ss-option:hover,
html body [data-tapx-portaled] .dash-searchable-option:hover {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    color: #92400e !important;
    border-left: 3px solid #fbbf24 !important;
    border-bottom: 1px solid rgba(251,191,36,0.30) !important;
    padding-left: 9px !important;
    font-weight: 700 !important;
    transition: all 0.12s ease !important;
}

/* ── DARK MODE: warm amber hover (subtler, dark-tinted) ──────────── */
#tapx-dash-overlay.dark .tapx-ss-list li:hover,
#tapx-dash-overlay.dark .tapx-ss-option:hover,
#tapx-dash-overlay.dark .dash-searchable-option:hover,
#tapx-dash-overlay.dark .dash-searchable-panel li:hover,
#tapx-dash-overlay.dark .dash-modal-drop-carpet li:hover,
#tapx-dash-overlay.dark [data-emirate-options] li:hover,
#tapx-dash-overlay.dark #emirates-combo-options li:hover,
#tapx-dash-overlay.dark .tapx-ss-list li.tapx-ss-active,
#tapx-dash-overlay.dark .tapx-ss-option.is-active {
    background: linear-gradient(180deg, rgba(251,191,36,0.18) 0%, rgba(245,158,11,0.14) 100%) !important;
    color: #bcd3f0 !important;
    border-left: 3px solid #fbbf24 !important;
    border-bottom: 1px solid rgba(251,191,36,0.20) !important;
    padding-left: 9px !important;
    font-weight: 700 !important;
    transition: all 0.12s ease !important;
}

/* ── Keep base padding so non-hover items don't jump ─────────────── */
#tapx-dash-overlay .tapx-ss-list li,
#tapx-dash-overlay .tapx-ss-option,
#tapx-dash-overlay .dash-searchable-option,
#tapx-dash-overlay .dash-modal-drop-carpet li,
#tapx-dash-overlay [data-emirate-options] li,
#tapx-dash-overlay #emirates-combo-options li {
    border-left: 3px solid transparent;
    border-bottom: 1px solid transparent;
    padding-left: 9px !important;
}


/* Person column name color — auto-adapt to theme */
#tapx-dash-overlay.dark #tbody-fines-demo .font-semibold[style*="color:#0f172a"] {
    color: #f1f5f9 !important;
}
/* Make name in Person column always visible */
#tbody-fines-demo td:nth-child(4) span.font-semibold {
    font-size: 13px;
    font-weight: 600;
}


/* ── Login / Register page: WHITE background ── */
#tapx-login-overlay {
    background: #ffffff !important;
}
#tapx-login-overlay .bg-wrap,
#tapx-login-overlay .bg-orb,
#tapx-login-overlay .bg-grid {
    display: none !important;
}
#tapx-login-overlay .page {
    background: #ffffff !important;
}
/* Keep the login card itself nicely styled */
#tapx-login-overlay .card {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.08) !important;
    box-shadow: 0 20px 60px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.06) !important;
}

/* ── Payment Modal (Dashboard Add Company): WHITE backdrop ── */
html body #dash-addco-payment-modal,
html body #dash-addco-payment-modal.flex,
html body #dash-addco-payment-modal.fixed,
#dash-addco-payment-modal[style] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#dash-addco-payment-modal::before,
#dash-addco-payment-modal::after { background: transparent !important; }

/* ── Subscription Payment Modal (#tapx-step2 — landing page "Details & Pay"): WHITE backdrop ── */
html body #tapx-step2,
html body #tapx-step2[style],
html body #tapx-step2[aria-hidden="false"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Also kill any open-state class that might add a dark backdrop */
#tapx-step2.is-open,
#tapx-step2.tapx-modal-open {
    background: #ffffff !important;
}

/* ── Tier Modal (CONFIGURE step) outer backdrop: WHITE too for consistency ── */
html body #tapx-tier-modal,
html body #tapx-tier-modal[style] {
    background: #ffffff !important;
}


/* Fine form entity dropdowns must appear ABOVE all sibling fields */
#fine-vehicle-dropdown,
#fine-employee-dropdown,
#fine-commercial-dropdown {
    z-index: 999999 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    margin-top: 4px !important;
}
/* The container that holds them needs z-index too so dropdown floats above sibling fields */
.fine-entity-field {
    position: relative !important;
    z-index: 1;
}
.fine-entity-field:focus-within,
.fine-entity-field:has(div[style*="display:block"]),
.fine-entity-field:has(div[style*="display: block"]) {
    z-index: 999998 !important;
}
/* Also make the dropdown opaque so it covers fields below */
#fine-vehicle-dropdown[style*="display:block"],
#fine-employee-dropdown[style*="display:block"],
#fine-commercial-dropdown[style*="display:block"],
#fine-vehicle-dropdown[style*="display: block"],
#fine-employee-dropdown[style*="display: block"],
#fine-commercial-dropdown[style*="display: block"] {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.12) !important;
    box-shadow: 0 12px 30px rgba(15,23,42,0.12), 0 4px 10px rgba(15,23,42,0.08) !important;
    color: #0f172a !important;
}
/* Dark mode panels */
#tapx-dash-overlay.dark #fine-vehicle-dropdown[style*="display:block"],
#tapx-dash-overlay.dark #fine-employee-dropdown[style*="display:block"],
#tapx-dash-overlay.dark #fine-commercial-dropdown[style*="display:block"],
#tapx-dash-overlay.dark #fine-vehicle-dropdown[style*="display: block"],
#tapx-dash-overlay.dark #fine-employee-dropdown[style*="display: block"],
#tapx-dash-overlay.dark #fine-commercial-dropdown[style*="display: block"] {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5) !important;
    color: #f1f5f9 !important;
}
/* Options visible without overlap */
#fine-vehicle-dropdown .fv-option,
#fine-employee-dropdown .fv-option,
#fine-commercial-dropdown .fv-option {
    background: transparent !important;
}


/* "LINKED DOCUMENTS" heading + empty state — slate gray, clearly readable */
.incoming-req-sixfold-content p.text-[10px],
.incoming-req-sixfold-content p[class*="uppercase"][class*="text-gray-500"] {
    color: #475569 !important;
    font-weight: 700 !important;
}
.incoming-req-sixfold-content .text-sm,
.incoming-req-sixfold-content p.text-sm {
    color: #475569 !important;
}
/* "No documents linked" empty state — slate gray with darker emphasis */
.incoming-req-sixfold-content p.text-gray-500 {
    color: #64748b !important;
}
.incoming-req-sixfold-content p.text-gray-500 strong {
    color: #1e293b !important;
}
/* ═════════════════════════════════════════════════════════════════════
   USER REQUEST: text in expand-panel data tables must be BLACK, not
   yellow. The dark gold brand color (#FFD700 / amber-300 / amber-400)
   was bleeding into doc cards, table cells, and labels inside the
   employee/vehicle expand panel making it unreadable. Force everything
   inside .incoming-req-sixfold-content to black (slate-900) in light
   mode. Dark mode keeps lighter colors below.
   ════════════════════════════════════════════════════════════════════ */
.incoming-req-sixfold-content,
.incoming-req-sixfold-content * {
    color: #0f172a !important;
}
.incoming-req-sixfold-content .text-amber-300,
.incoming-req-sixfold-content .text-amber-400,
.incoming-req-sixfold-content .text-amber-500,
.incoming-req-sixfold-content [style*="color:#FFD700"],
.incoming-req-sixfold-content [style*="color: #FFD700"],
.incoming-req-sixfold-content [style*="color:#facc15"],
.incoming-req-sixfold-content [style*="color: #facc15"],
.incoming-req-sixfold-content [style*="color:#fbbf24"],
.incoming-req-sixfold-content [style*="color: #fbbf24"] {
    color: #0f172a !important;
}
/* Table cells + headings */
.incoming-req-sixfold-content table th,
.incoming-req-sixfold-content table td,
.incoming-req-sixfold-content dt,
.incoming-req-sixfold-content dd,
.incoming-req-sixfold-content h1,
.incoming-req-sixfold-content h2,
.incoming-req-sixfold-content h3,
.incoming-req-sixfold-content h4,
.incoming-req-sixfold-content h5,
.incoming-req-sixfold-content h6,
.incoming-req-sixfold-content p,
.incoming-req-sixfold-content span,
.incoming-req-sixfold-content strong,
.incoming-req-sixfold-content em,
.incoming-req-sixfold-content b,
.incoming-req-sixfold-content li {
    color: #0f172a !important;
}
/* Keep ACTION button text its own color (button has own style) */
.incoming-req-sixfold-content .text-emerald-400,
.incoming-req-sixfold-content .text-emerald-500,
.incoming-req-sixfold-content .text-emerald-600,
.incoming-req-sixfold-content .text-emerald-700,
.incoming-req-sixfold-content .text-red-400,
.incoming-req-sixfold-content .text-red-500,
.incoming-req-sixfold-content .text-red-600,
.incoming-req-sixfold-content .text-red-700,
.incoming-req-sixfold-content button.text-emerald-400,
.incoming-req-sixfold-content button.text-emerald-500,
.incoming-req-sixfold-content button.text-red-500,
.incoming-req-sixfold-content button.text-amber-500 {
    /* Buttons keep their accent colors via class — undo blanket override */
}
/* Make sure action buttons keep colored borders + text */
.incoming-req-sixfold-content button {
    color: inherit !important;
}
.incoming-req-sixfold-content .emp-action-trigger {
    /* The colored action buttons keep their own styled colors */
}
/* Dark mode keeps lighter colors */
#tapx-dash-overlay.dark .incoming-req-sixfold-content p.text-[10px],
#tapx-dash-overlay.dark .incoming-req-sixfold-content p[class*="uppercase"] {
    color: #94a3b8 !important;
}
#tapx-dash-overlay.dark .incoming-req-sixfold-content p.text-gray-500 {
    color: #94a3b8 !important;
}
#tapx-dash-overlay.dark .incoming-req-sixfold-content p.text-gray-500 strong {
    color: #f1f5f9 !important;
}
#tapx-dash-overlay.dark .incoming-req-sixfold-content,
#tapx-dash-overlay.dark .incoming-req-sixfold-content * {
    color: #c8d2e0 !important;
}


/* Make compliance form toggles INSTANT — no transition delay */
#compliance-add-form .peer + div,
#compliance-add-form .peer ~ div {
    transition: none !important;
}
#compliance-add-form .peer + div::after,
#compliance-add-form .peer ~ div::after {
    transition: none !important;
}
#compliance-add-form input[type="checkbox"] + div {
    transition: background-color 0s !important;
}
#compliance-add-form input[type="checkbox"] + div::after {
    transition: transform 0s !important;
}


/* ── Remove rotateX / 3D tilt that causes blur, keep clean lift ── */
#tapx-dash-overlay .emp-stat-card:hover,
#tapx-dash-overlay .dash-stat-tile:hover,
#tapx-dash-overlay .dash-card:hover {
    transform: translateY(-4px) !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Action buttons in overview - clean lift */
.tapx-mo-action-btn:hover,
.tapx-mo-stat-card:hover {
    transform: translateY(-2px) !important;
    filter: none !important;
    backdrop-filter: none !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║   UNIVERSAL DROPDOWN HOVER — All dropdowns everywhere            ║
   ║   Landing page + Dashboard, every list variant                   ║
   ║   Highlight: warm cream-yellow + amber left border + dark text   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── All dropdown option-like elements: hover state ──────────────── */
.tapx-ss-list li:hover,
.tapx-ss-option:hover,
.dash-searchable-option:hover,
.dash-searchable-panel li:hover,
.dash-modal-drop-carpet li:hover,
[data-emirate-options] li:hover,
#emirates-combo-options li:hover,
.fv-option:hover,
[role="option"]:hover,
[role="listbox"] li:hover,
.dropdown-option:hover,
.dropdown-item:hover,
.searchable-option:hover,
ul[role="listbox"] li:hover,
ul.options-list li:hover,
.tapx-dropdown-list li:hover,
.tapx-dropdown-option:hover,
.tapx-select-option:hover,
[data-tapx-portaled] li:hover,
[data-tapx-portaled] .tapx-ss-option:hover,
[data-tapx-portaled] .dash-searchable-option:hover,
[data-tapx-portaled] [role="option"]:hover,
/* Active states */
.tapx-ss-list li.tapx-ss-active,
.tapx-ss-option.is-active,
[role="option"][aria-selected="true"]:not(:hover),
.fv-option.active {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    color: #92400e !important;
    border-left: 3px solid #fbbf24 !important;
    padding-left: 9px !important;
    font-weight: 700 !important;
    transition: all 0.12s ease !important;
    cursor: pointer !important;
}

/* ── Dark mode variant (subtler amber on dark bg) ────────────────── */
#tapx-dash-overlay.dark .tapx-ss-list li:hover,
#tapx-dash-overlay.dark .tapx-ss-option:hover,
#tapx-dash-overlay.dark .dash-searchable-option:hover,
#tapx-dash-overlay.dark .dash-searchable-panel li:hover,
#tapx-dash-overlay.dark .dash-modal-drop-carpet li:hover,
#tapx-dash-overlay.dark [data-emirate-options] li:hover,
#tapx-dash-overlay.dark #emirates-combo-options li:hover,
#tapx-dash-overlay.dark .fv-option:hover,
#tapx-dash-overlay.dark [role="option"]:hover,
#tapx-dash-overlay.dark .dropdown-option:hover,
#tapx-dash-overlay.dark .dropdown-item:hover,
#tapx-dash-overlay.dark .tapx-dropdown-option:hover,
#tapx-dash-overlay.dark .tapx-ss-list li.tapx-ss-active,
#tapx-dash-overlay.dark .tapx-ss-option.is-active {
    background: linear-gradient(180deg, rgba(251,191,36,0.20) 0%, rgba(245,158,11,0.14) 100%) !important;
    color: #bcd3f0 !important;
    border-left: 3px solid #fbbf24 !important;
    padding-left: 9px !important;
    font-weight: 700 !important;
}

/* ── Native <select> options: limited styling support, but try ──── */
select option:hover,
select option:checked,
select:focus option:checked {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    color: #92400e !important;
    font-weight: 700 !important;
}

/* ── Landing page custom dropdown panels ─────────────────────────── */
.fancy-select__option:hover,
.fancy-select__option--active,
.tier-modal-dropdown li:hover,
.subscription-dropdown li:hover,
[class*="dropdown"] li:hover,
[class*="select"] li:hover,
[class*="combobox"] li:hover {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    color: #92400e !important;
    border-left: 3px solid #fbbf24 !important;
    padding-left: 9px !important;
    font-weight: 700 !important;
    transition: all 0.12s ease !important;
}

/* ── Ensure smooth padding on non-hover state (no jump on hover) ── */
.tapx-ss-list li,
.tapx-ss-option,
.dash-searchable-option,
.dash-searchable-panel li,
.fv-option,
[role="option"],
.dropdown-option,
.dropdown-item,
.tapx-dropdown-option {
    border-left: 3px solid transparent;
    padding-left: 9px;
    transition: all 0.12s ease;
}


/* ── Landing page footer — black bg + white text ── */
html body footer.scroll-reveal,
html body footer[class*="border-t"][class*="border-white"] {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}
/* Footer paragraph (description) — light, readable */
html body footer p,
html body footer p.text-slate-400,
html body footer p[class*="text-slate"] {
    color: #cbd5e1 !important;
}
/* ALL footer links → bright white at full visibility */
html body footer a,
html body footer ul li a,
html body footer a.text-white,
html body footer a[class*="text-white"],
html body footer a[class*="opacity-70"] {
    color: #ffffff !important;
    opacity: 1 !important;
}
html body footer a:hover {
    color: #FFD700 !important;
    opacity: 1 !important;
}
/* Section headers (SANCTUARY / INTELLIGENCE / LEGAL) — yellow */
html body footer h5,
html body footer h5.text-primary,
html body footer h5[class*="text-primary"] {
    color: #FFD700 !important;
}
/* Bottom row "© 2024 ..." — readable white */
html body footer p[class*="opacity-30"],
html body footer p[class*="opacity-"] {
    color: #ffffff !important;
    opacity: 0.7 !important;
}
/* "Security Layer 9" — light slate */
html body footer .text-slate-500,
html body footer span[class*="text-slate"] {
    color: #cbd5e1 !important;
}
/* "High-Fidelity Link Active" — keep yellow with pulse */
html body footer span.text-primary,
html body footer .text-primary {
    color: #FFD700 !important;
}
/* Footer SPANS inside list items (uppercase text) */
html body footer ul li span,
html body footer li a span,
html body footer a span {
    color: inherit !important;
}
/* Social icon containers — dark glass on black */
html body footer .bg-white\/5,
html body footer [class*="bg-white"] {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.10) !important;
}
html body footer .bg-white\/5 span {
    color: #FFD700 !important;
}
/* Border between sections */
html body footer .border-white\/5,
html body footer [class*="border-white"] {
    border-color: rgba(255,255,255,0.10) !important;
}
/* Hide footer white divider line(s) — user request (keep social-icon borders) */
html body footer{ border-top-color: transparent !important; }
html body footer .pt-6.border-t{ border-top-color: transparent !important; }


/* ── Tier Quote Modal: native selects styled like custom dropdowns ── */
#tapx-tier-modal-panel #tier-quote-pro-duration,
#tapx-tier-modal-panel #tier-quote-training-package {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23475569%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px 18px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 38px 10px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
/* Hover */
#tapx-tier-modal-panel #tier-quote-pro-duration:hover,
#tapx-tier-modal-panel #tier-quote-training-package:hover {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(251,191,36,0.10) !important;
}
/* Focus */
#tapx-tier-modal-panel #tier-quote-pro-duration:focus,
#tapx-tier-modal-panel #tier-quote-training-package:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
    outline: none !important;
}
/* Options (limited browser support, but tries) */
#tapx-tier-modal-panel #tier-quote-pro-duration option,
#tapx-tier-modal-panel #tier-quote-training-package option {
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 10px 12px !important;
    font-weight: 600 !important;
}
/* Selected/checked option */
#tapx-tier-modal-panel #tier-quote-pro-duration option:checked,
#tapx-tier-modal-panel #tier-quote-training-package option:checked,
#tapx-tier-modal-panel #tier-quote-pro-duration option:hover,
#tapx-tier-modal-panel #tier-quote-training-package option:hover {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    color: #92400e !important;
    font-weight: 700 !important;
}
/* Override the original Tailwind dark background classes */
#tapx-tier-modal-panel select[class*="bg-black"],
#tapx-tier-modal-panel select[class*="text-white"] {
    background-color: #ffffff !important;
    color: #0f172a !important;
}


/* ── Custom dropdown for tier modal — matches Emirate dropdown ── */
.tapx-tier-dd {
    position: relative;
    width: 100%;
    user-select: none;
}
.tapx-tier-dd-trigger {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 9999px;
    padding: 11px 42px 11px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
.tapx-tier-dd-trigger::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #475569;
    border-bottom: 2px solid #475569;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
}
.tapx-tier-dd.is-open .tapx-tier-dd-trigger {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.tapx-tier-dd.is-open .tapx-tier-dd-trigger::after {
    transform: translateY(-25%) rotate(-135deg);
}
.tapx-tier-dd-trigger:hover {
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251,191,36,0.10);
}
.tapx-tier-dd-trigger.is-placeholder {
    color: #94a3b8;
    font-weight: 500;
}
.tapx-tier-dd-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: #ffffff;
    border: 1px solid #c8d2e0;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(15,23,42,0.12), 0 4px 10px rgba(15,23,42,0.06);
    overflow: hidden;
    z-index: 9999;
    display: none;
    max-height: 280px;
    overflow-y: auto;
}
.tapx-tier-dd.is-open .tapx-tier-dd-panel { display: block; }
/* ── Defense-in-depth: ensure .is-open beats the stale-panel-guard rule
   (`.tapx-tier-dd-panel[hidden] { display:none !important }`) by adding
   matching specificity + !important on the is-open path. Without this,
   the panel could remain hidden even when the wrap is "open". */
.tapx-tier-dd.is-open .tapx-tier-dd-panel,
.tapx-tier-dd.is-open .tapx-tier-dd-panel[hidden],
.tapx-tier-dd.is-open .tapx-tier-dd-panel.hidden {
    display: block !important;
}
.tapx-tier-dd-option {
    padding: 12px 16px 12px 13px;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.12s ease;
}
.tapx-tier-dd-option:hover,
.tapx-tier-dd-option.is-active {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    color: #92400e !important;
    border-left: 3px solid #fbbf24 !important;
    font-weight: 700 !important;
}


/* ── Force ALL active/selected dropdown options to YELLOW style ── */
/* Overrides any blue/gray active highlight */
.tapx-ss-list li.tapx-ss-active,
.tapx-ss-option.is-active,
.tapx-ss-list li[aria-selected="true"],
.tapx-ss-option[aria-selected="true"],
.dash-searchable-option.is-active,
.dash-searchable-option[aria-selected="true"],
.fv-option.active,
.fv-option[aria-selected="true"],
[role="option"][aria-selected="true"],
.tapx-tier-dd-option.is-active,
.fancy-select__option--active,
.dropdown-option.active,
.dropdown-option.is-selected,
.dropdown-item.active,
.dropdown-item.is-selected,
li.is-selected,
li.is-active,
[class*="dropdown"] li.active,
[class*="dropdown"] li.is-active,
[class*="dropdown"] li[aria-selected="true"] {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-left: 3px solid #fbbf24 !important;
    padding-left: 9px !important;
    font-weight: 700 !important;
}
/* Dark mode equivalents */
#tapx-dash-overlay.dark .tapx-ss-list li.tapx-ss-active,
#tapx-dash-overlay.dark .tapx-ss-option.is-active,
#tapx-dash-overlay.dark .dash-searchable-option.is-active,
#tapx-dash-overlay.dark [role="option"][aria-selected="true"],
#tapx-dash-overlay.dark .fv-option.active {
    background: linear-gradient(180deg, rgba(251,191,36,0.22) 0%, rgba(245,158,11,0.16) 100%) !important;
    color: #bcd3f0 !important;
    border-left: 3px solid #fbbf24 !important;
}
/* Override the older blue gray rule explicitly */
.tapx-ss-list li.tapx-ss-active,
.tapx-ss-option.is-active {
    background-color: #fef3c7 !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ULTIMATE DROPDOWN HOVER + ACTIVE — wins over EVERY other rule   ║
   ║  Hover state = yellow highlight                                  ║
   ║  Active/Selected state = same yellow with bold amber             ║
   ║  Applies in light mode (white modals) AND dark mode              ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ────────────────────────────────────────────────────────────────
   EMIRATE COMBO LISTS — all 4 variants
   ──────────────────────────────────────────────────────────────── */
#emirates-combo-options li,
#doc-emirate-combo-options li,
#vehicle-plate-emirate-options li,
#emp-filter-emirate-options li,
[data-emirate-options] li,
.emirate-combo-option {
    border-left: 3px solid transparent !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    transition: background 0.12s ease, color 0.12s ease, border-left-color 0.12s ease !important;
    cursor: pointer !important;
    list-style: none !important;
}

/* HOVER on emirate options — light mode (white modals) */
#emirates-combo-options li:hover,
#doc-emirate-combo-options li:hover,
#vehicle-plate-emirate-options li:hover,
#emp-filter-emirate-options li:hover,
[data-emirate-options] li:hover,
.emirate-combo-option:hover {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-left-color: #fbbf24 !important;
    font-weight: 700 !important;
}

/* ACTIVE / KEYBOARD-FOCUS / SELECTED on emirate options */
#emirates-combo-options li.emirate-dropdown-active,
#doc-emirate-combo-options li.emirate-dropdown-active,
#vehicle-plate-emirate-options li.emirate-dropdown-active,
#emp-filter-emirate-options li.emirate-dropdown-active,
[data-emirate-options] li.emirate-dropdown-active,
.emirate-combo-option[aria-selected="true"],
.emirate-combo-option.is-active,
.emirate-combo-option.emirate-dropdown-active {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-left-color: #fbbf24 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ────────────────────────────────────────────────────────────────
   ALL OTHER DROPDOWNS — searchable selects, custom dropdowns
   Hover & active = same yellow look
   ──────────────────────────────────────────────────────────────── */
.tapx-ss-list li,
.tapx-ss-option,
.dash-searchable-option,
.dash-searchable-panel li,
.dash-modal-drop-carpet li,
.tapx-tier-dd-option,
.fv-option,
[role="option"] {
    border-left: 3px solid transparent !important;
    transition: background 0.12s ease, color 0.12s ease, border-left-color 0.12s ease !important;
    cursor: pointer !important;
}

.tapx-ss-list li:hover,
.tapx-ss-option:hover,
.dash-searchable-option:hover,
.dash-searchable-panel li:hover,
.dash-modal-drop-carpet li:hover,
.tapx-tier-dd-option:hover,
.fv-option:hover,
[role="option"]:hover,
/* Active/Selected */
.tapx-ss-list li.tapx-ss-active,
.tapx-ss-option.is-active,
.dash-searchable-option.is-active,
.tapx-tier-dd-option.is-active,
.fv-option.active,
[role="option"][aria-selected="true"] {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-left-color: #fbbf24 !important;
    font-weight: 700 !important;
}

/* ────────────────────────────────────────────────────────────────
   DARK MODE — preserved subtler amber tint
   ──────────────────────────────────────────────────────────────── */
#tapx-dash-overlay.dark [data-emirate-options] li:hover,
#tapx-dash-overlay.dark .emirate-combo-option:hover,
#tapx-dash-overlay.dark [data-emirate-options] li.emirate-dropdown-active,
#tapx-dash-overlay.dark .tapx-ss-list li:hover,
#tapx-dash-overlay.dark .tapx-ss-option:hover,
#tapx-dash-overlay.dark .dash-searchable-option:hover,
#tapx-dash-overlay.dark .dash-modal-drop-carpet li:hover,
#tapx-dash-overlay.dark .tapx-tier-dd-option:hover,
#tapx-dash-overlay.dark [role="option"]:hover,
#tapx-dash-overlay.dark .tapx-ss-list li.tapx-ss-active,
#tapx-dash-overlay.dark .tapx-ss-option.is-active,
#tapx-dash-overlay.dark [role="option"][aria-selected="true"] {
    background: linear-gradient(180deg, rgba(251,191,36,0.22) 0%, rgba(245,158,11,0.16) 100%) !important;
    color: #bcd3f0 !important;
    border-left-color: #fbbf24 !important;
    font-weight: 700 !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  MASTER DROPDOWN STYLING — Hover (dark navy text) + Selected     ║
   ║  (dark amber text). Final spec per user screenshots.             ║
   ║  Applies to ALL dropdowns: landing + dashboard                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── Base styling for all dropdown options ─────────────────────── */
.searchable-select-option,
.searchable-select-panel li,
.tapx-ss-list li,
.tapx-ss-option,
.dash-searchable-option,
.dash-searchable-panel li,
.dash-modal-drop-carpet li,
.tapx-tier-dd-option,
.fv-option,
.emirate-combo-option,
[data-emirate-options] li,
[role="option"],
.fancy-select__option,
.fc-dropdown-option,
[class*="dropdown"] li:not(.tapx-no-dd-style),
[class*="select"] li:not(.tapx-no-dd-style) {
    border-left: 3px solid transparent !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: 13px !important;
    padding-right: 16px !important;
    font-size: 14px !important;
    color: #334155 !important;          /* default: dark slate */
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.22s ease, color 0.22s ease,
                border-left-color 0.22s ease, font-weight 0.22s ease,
                box-shadow 0.22s ease !important;
    box-shadow: none !important;
}

/* ╔══ HOVER STATE ═════════════════════════════════════════════════╗
   Background: cream-yellow gradient
   Text:       DARK NAVY (#001D3D) — professional blue
   Border:     3px amber left accent
   Font:       700 bold
   ╚════════════════════════════════════════════════════════════════╝ */
.searchable-select-option:hover,
.searchable-select-option:focus-visible,
.searchable-select-panel li:hover,
.tapx-ss-list li:hover,
.tapx-ss-option:hover,
.dash-searchable-option:hover,
.dash-searchable-panel li:hover,
.dash-modal-drop-carpet li:hover,
.tapx-tier-dd-option:hover,
.fv-option:hover,
.emirate-combo-option:hover,
[data-emirate-options] li:hover,
[role="option"]:hover,
.fancy-select__option:hover,
.fc-dropdown-option:hover,
[class*="dropdown"] li:hover:not(.tapx-no-dd-style),
[class*="select"] li:hover:not(.tapx-no-dd-style) {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    background-color: #fef3c7 !important;
    color: #001D3D !important;          /* dark navy on hover */
    border-left-color: #fbbf24 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ╔══ SELECTED / ACTIVE STATE ════════════════════════════════════╗
   Same yellow background but with DARK AMBER (#92400e) text
   ╚═══════════════════════════════════════════════════════════════╝ */
.searchable-select-option[aria-selected="true"],
.searchable-select-option.is-selected,
.searchable-select-option.active,
.searchable-select-panel li[aria-selected="true"],
.tapx-ss-list li.tapx-ss-active,
.tapx-ss-option.is-active,
.dash-searchable-option.is-active,
.tapx-tier-dd-option.is-active,
.fv-option.active,
.emirate-combo-option[aria-selected="true"],
.emirate-combo-option.emirate-dropdown-active,
[data-emirate-options] li.emirate-dropdown-active,
[role="option"][aria-selected="true"],
.fancy-select__option--active,
.fc-dropdown-option[aria-selected="true"],
[class*="dropdown"] li[aria-selected="true"]:not(.tapx-no-dd-style),
[class*="dropdown"] li.is-selected:not(.tapx-no-dd-style),
[class*="select"] li[aria-selected="true"]:not(.tapx-no-dd-style),
[class*="select"] li.is-selected:not(.tapx-no-dd-style) {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    background-color: #fef3c7 !important;
    color: #92400e !important;          /* dark amber/brown on selected */
    border-left-color: #fbbf24 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ── Panel container styling ──────────────────────────────────── */
.searchable-select-panel,
.fine-check-form-card .searchable-select-panel,
.tapx-ss-list,
.dash-searchable-panel,
.dash-modal-drop-carpet,
.tapx-tier-dd-panel {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #c8d2e0 !important;
    box-shadow: 0 12px 30px rgba(15,23,42,0.12), 0 4px 10px rgba(15,23,42,0.06) !important;
    overflow: hidden !important;
}

/* ── DARK MODE — subtle amber tint ──────────────────────────── */
html.dark .searchable-select-option:hover,
html.dark .searchable-select-option:focus-visible,
#tapx-dash-overlay.dark .tapx-ss-list li:hover,
#tapx-dash-overlay.dark .tapx-ss-option:hover,
#tapx-dash-overlay.dark .dash-searchable-option:hover,
#tapx-dash-overlay.dark .dash-modal-drop-carpet li:hover,
#tapx-dash-overlay.dark .tapx-tier-dd-option:hover,
#tapx-dash-overlay.dark [data-emirate-options] li:hover,
#tapx-dash-overlay.dark [role="option"]:hover {
    background: linear-gradient(180deg, rgba(251,191,36,0.22) 0%, rgba(245,158,11,0.16) 100%) !important;
    color: #bcd3f0 !important;
    border-left-color: #fbbf24 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
html.dark .searchable-select-option[aria-selected="true"],
#tapx-dash-overlay.dark .tapx-ss-list li.tapx-ss-active,
#tapx-dash-overlay.dark .tapx-ss-option.is-active,
#tapx-dash-overlay.dark .tapx-tier-dd-option.is-active,
#tapx-dash-overlay.dark [data-emirate-options] li.emirate-dropdown-active,
#tapx-dash-overlay.dark [role="option"][aria-selected="true"] {
    background: linear-gradient(180deg, rgba(251,191,36,0.28) 0%, rgba(245,158,11,0.20) 100%) !important;
    color: #b5c4dc !important;
    border-left-color: #fbbf24 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ── Override any conflicting rule (especially old gold rules) ── */
.fine-check-form-card .searchable-select-option:hover,
.fine-check-form-card .searchable-select-option:focus-visible {
    box-shadow: none !important;  /* kill old inset border shadow */
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  FINAL DEFINITIVE — Landing page dropdown hover + selected       ║
   ║  Matches user spec exactly: image_b11176 (hover) + image_b11192  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ──── BASE: ensure consistent padding on non-state items (no jump) ──── */
.fine-check-form-card .searchable-select-option,
.searchable-select-option,
.searchable-select-panel li,
.searchable-select-panel .searchable-select-option,
html body .searchable-select-option {
    border-left: 3px solid transparent !important;
    padding-left: 13px !important;
    transition: background 0.15s ease, color 0.15s ease, border-left-color 0.15s ease, font-weight 0.15s ease !important;
    cursor: pointer !important;
}

/* ──── HOVER STATE — Cream-yellow gradient + amber bar + bold dark text ──── */
.fine-check-form-card .searchable-select-option:hover,
.fine-check-form-card .searchable-select-option:focus-visible,
.searchable-select-option:hover,
.searchable-select-option:focus-visible,
.searchable-select-panel li:hover,
.searchable-select-panel li:focus-visible,
html body .searchable-select-option:hover,
html body .searchable-select-panel li:hover {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-left-color: #fbbf24 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

/* ──── SELECTED STATE — same cream-yellow look + bold dark amber ──── */
.fine-check-form-card .searchable-select-option[aria-selected="true"],
.searchable-select-option[aria-selected="true"],
.searchable-select-option.active,
.searchable-select-option.is-selected,
.searchable-select-panel li[aria-selected="true"],
html body .searchable-select-option[aria-selected="true"] {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%) !important;
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border-left-color: #fbbf24 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* ──── TRIGGER FIELD — When value is selected, show bold dark text ──── */
.fine-check-form-card .searchable-select-trigger,
.searchable-select-trigger {
    font-weight: 600 !important;
    color: #0f172a !important;
}
/* Show bold when has actual value (not placeholder) */
.fine-check-form-card .searchable-select-trigger[value]:not([value=""]),
.searchable-select-trigger[value]:not([value=""]) {
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* ──── PANEL — white bg, rounded, elevated shadow ──── */
.fine-check-form-card .searchable-select-panel,
.searchable-select-panel {
    background: #ffffff !important;
    border: 1px solid #c8d2e0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(15,23,42,0.10), 0 4px 10px rgba(15,23,42,0.05) !important;
    overflow: hidden !important;
}

/* ──── DARK MODE — subtle amber on dark bg ──── */
html.dark .fine-check-form-card .searchable-select-option:hover,
html.dark .fine-check-form-card .searchable-select-option:focus-visible,
html.dark .searchable-select-option:hover,
html.dark .fine-check-form-card .searchable-select-option[aria-selected="true"],
html.dark .searchable-select-option[aria-selected="true"] {
    background: linear-gradient(180deg, rgba(251,191,36,0.22) 0%, rgba(245,158,11,0.16) 100%) !important;
    color: #bcd3f0 !important;
    border-left-color: #fbbf24 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}


/* Vertical mini sidebar tabs */
.tapx-toll-view-tab {
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.18s ease;
}
.tapx-toll-view-tab:hover {
    background: rgba(59,130,246,0.08);
    border-color: rgba(59,130,246,0.20);
    color: #c8d2e0;
}
.tapx-toll-view-tab--active {
    background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(217,119,6,0.10));
    border-color: rgba(251,191,36,0.30);
    color: #fbbf24;
    box-shadow: 0 1px 3px rgba(217,119,6,0.15);
}
.tapx-toll-view-tab--active .material-symbols-outlined {
    color: #fbbf24;
}
/* Light mode */
#tapx-dash-overlay:not(.dark) .tapx-toll-view-tab {
    color: #64748b;
}
#tapx-dash-overlay:not(.dark) .tapx-toll-view-tab:hover {
    background: #fef3c7;
    border-color: rgba(217,119,6,0.15);
    color: #0f172a;
}
#tapx-dash-overlay:not(.dark) .tapx-toll-view-tab--active {
    background: linear-gradient(135deg, #fef3c7, #bcd3f0);
    border-color: #fbbf24;
    color: #92400e;
}
#tapx-dash-overlay:not(.dark) .tapx-toll-view-tab--active .material-symbols-outlined {
    color: #d97706;
}
/* Mini sidebar container in light mode */
#tapx-dash-overlay:not(.dark) #toll-mini-sidebar {
    background: #ffffff !important;
    border-color: #c8d2e0 !important;
}


.settings-subnav-item {
    background: transparent;
    color: #9ca3af;
    border: 1px solid transparent;
    cursor: pointer;
    margin-bottom: 4px;
}
.settings-subnav-item:hover {
    background: rgba(255,255,255,0.04);
    color: #c8d2e0;
}
.settings-subnav-item.is-active {
    background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(217,119,6,0.10));
    color: #fbbf24;
    border-color: rgba(251,191,36,0.25);
    box-shadow: 0 1px 3px rgba(217,119,6,0.15);
}
.settings-subnav-item.is-active .material-symbols-outlined {
    color: #fbbf24;
}
/* Light mode */
#tapx-dash-overlay:not(.dark) .settings-subnav-item {
    color: #64748b;
}
#tapx-dash-overlay:not(.dark) .settings-subnav-item:hover {
    background: #fef3c7;
    color: #0f172a;
}
#tapx-dash-overlay:not(.dark) .settings-subnav-item.is-active {
    background: linear-gradient(135deg, #fef3c7, #bcd3f0);
    color: #92400e;
    border-color: #fbbf24;
}


/* Show/hide the entire wrapper (mini sidebar + main card) when toll panel is active */
#panel-tollgate-wrapper.hidden { display: none !important; }
/* When showPane shows panel-tollgate, also reveal the wrapper. We bridge via JS below. */

/* Light mode for mini sidebar */
#tapx-dash-overlay:not(.dark) #toll-mini-sidebar {
    background: #ffffff !important;
    border-color: #c8d2e0 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
}
#tapx-dash-overlay:not(.dark) #toll-mini-sidebar > div:first-child {
    background: #f8fafc !important;
    border-color: #c8d2e0 !important;
}
#tapx-dash-overlay:not(.dark) #toll-mini-sidebar p {
    color: #64748b !important;
}
#tapx-dash-overlay:not(.dark) #toll-mini-sidebar > div:first-child .material-symbols-outlined {
    color: #94a3b8 !important;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  TIER CARDS — AGGRESSIVE LENGTH REDUCTION                        ║
   ║  ⛔ RECOMMENDED BADGE (.absolute) IS NEVER TOUCHED                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Card padding — aggressive vertical reduction */
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
}
@media (min-width: 640px) {
    #sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* Icon container — smaller + tighter margin (NOT .absolute = NOT the badge) */
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] > div:not(.absolute):has(> .material-symbols-outlined) {
    width: 3rem !important;
    height: 3rem !important;
    margin-bottom: 0.5rem !important;
    border-radius: 0.85rem !important;
}
@media (min-width: 640px) {
    #sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] > div:not(.absolute):has(> .material-symbols-outlined) {
        width: 3.25rem !important;
        height: 3.25rem !important;
    }
}
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] > div:not(.absolute):has(> .material-symbols-outlined) .material-symbols-outlined {
    font-size: 1.75rem !important;
}
@media (min-width: 640px) {
    #sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] > div:not(.absolute):has(> .material-symbols-outlined) .material-symbols-outlined {
        font-size: 1.875rem !important;
    }
}

/* Title — tighter */
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] h3 {
    margin-bottom: 0.25rem !important;
    font-size: 1.125rem !important;
}
@media (min-width: 640px) {
    #sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] h3 {
        font-size: 1.25rem !important;
    }
}

/* Price section — tighter */
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] .sanctuary-tier-price {
    margin-bottom: 0.375rem !important;
}
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] .sanctuary-tier-price p {
    margin-bottom: 0.125rem !important;
}

/* Feature list — aggressively reduce spacing */
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] ul {
    margin-bottom: 0.5rem !important;
    margin-top: 0.25rem !important;
}
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] ul.space-y-1\.5 > li + li,
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] ul.space-y-2 > li + li,
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] ul.space-y-2\.5 > li + li,
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] ul.space-y-3 > li + li,
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] ul > li + li {
    margin-top: 0.25rem !important;
}
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] ul li {
    line-height: 1.25 !important;
    font-size: 0.6875rem !important;
}
@media (min-width: 640px) {
    #sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] ul li {
        font-size: 0.75rem !important;
    }
}

/* Annual / save banner — tighter */
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] .text-primary.font-bold,
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] [class*="save"]:not(.absolute) {
    margin-top: 0.125rem !important;
    margin-bottom: 0.375rem !important;
}

/* Per-employee toggle area — minimal margin */
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] .sanctuary-per-head-switch,
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] [class*="per-employee"] {
    margin-top: 0.375rem !important;
    margin-bottom: 0.375rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* CTA button (NOT the RECOMMENDED badge) — slight reduction */
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] > button:not(.absolute),
#sanctuary-tier-pricing-root .glass-panel[data-sanctuary-tier] a[role="button"]:not(.absolute) {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}


.teef { display:flex; flex-direction:column; gap:4px; }
.teef label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:#64748b; }
.teef input, .teef select {
    width:100%; padding:9px 12px; background:#ffffff; border:1px solid #c8d2e0; border-radius:8px;
    color:#0f172a; font-size:13px; outline:none; transition:all 0.15s;
}
.teef input:focus, .teef select:focus { border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,0.10); }
.tqs-btn-stamp {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    padding:18px 12px; border:2px solid transparent; border-radius:12px;
    cursor:pointer; transition:all 0.18s; font-size:12px; font-weight:900;
    text-transform:uppercase; letter-spacing:0.05em;
}
.tqs-btn-stamp--entry { background:linear-gradient(135deg,#d1fae5,#a7f3d0); color:#065f46; }
.tqs-btn-stamp--entry:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(16,185,129,0.30); border-color:#10b981; }
.tqs-btn-stamp--exit { background:linear-gradient(135deg,#fef3c7,#bcd3f0); color:#92400e; }
.tqs-btn-stamp--exit:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(245,158,11,0.30); border-color:#f59e0b; }

.teh-timeline {
    position:relative; padding-left:24px;
}
.teh-timeline::before {
    content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:#c8d2e0;
}
.teh-event {
    position:relative; padding:12px 14px; background:#ffffff; border:1px solid #c8d2e0;
    border-radius:10px; margin-bottom:10px;
}
.teh-event::before {
    content:''; position:absolute; left:-22px; top:18px; width:14px; height:14px;
    border-radius:50%; background:#ffffff; border:3px solid #0ea5e9;
}
.teh-event--entry::before { border-color:#10b981; }
.teh-event--exit::before { border-color:#f59e0b; }
.teh-event-title { font-size:12px; font-weight:900; color:#0f172a; }
.teh-event-meta { font-size:10px; color:#64748b; margin-top:2px; line-height:1.5; }
.teh-summary {
    background:linear-gradient(135deg,#dbeafe,#c8d2e0); border:1px solid #3b82f6;
    border-radius:12px; padding:14px; margin-bottom:14px;
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;
}
.teh-summary-cell { text-align:center; }
.teh-summary-cell .lbl { font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.06em; color:#1e40af; }
.teh-summary-cell .val { font-size:18px; font-weight:900; color:#0f172a; margin-top:2px; }


/* ════════ Entry & Exit — name color: black in light, white in dark ════════ */
#ee-tbody .ee-emp-cell { color: #0f172a !important; }
#ee-tbody .ee-emp-name { color: #0f172a !important; }
html.dark #ee-tbody .ee-emp-cell,
#tapx-dash-overlay.dark #ee-tbody .ee-emp-cell,
.dark #ee-tbody .ee-emp-cell { color: #f8fafc !important; }
html.dark #ee-tbody .ee-emp-name,
#tapx-dash-overlay.dark #ee-tbody .ee-emp-name,
.dark #ee-tbody .ee-emp-name { color: #f8fafc !important; }
/* ════════ Entry & Exit — Toolbar layout fix ════════ */
#panel-entryexit .ee-toolbar-pro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px;
}
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-toolbar-pro {
    background: #f8fafc;
    border-color: #c8d2e0;
}

/* Search bar — full width on its own row */
#panel-entryexit .ee-search-wrap--pro {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 9px 14px;
    width: 100%;
    transition: all 0.18s;
}
#panel-entryexit .ee-search-wrap--pro:focus-within {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14,165,233,0.10);
}
#panel-entryexit .ee-search-wrap--pro input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    min-width: 0;
}
#panel-entryexit .ee-search-wrap--pro input::placeholder {
    color: #64748b;
}
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-search-wrap--pro {
    background: #ffffff;
    border-color: #c8d2e0;
}
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-search-wrap--pro input {
    color: #0f172a;
}

/* Filters grid — 5 equal columns desktop, responsive down to 2/1 */
#panel-entryexit .ee-filters-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}
@media (max-width: 1100px) {
    #panel-entryexit .ee-filters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    #panel-entryexit .ee-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    #panel-entryexit .ee-filters-grid { grid-template-columns: 1fr; }
}

#panel-entryexit .ee-filter-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
#panel-entryexit .ee-filter-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-filter-label {
    color: #64748b;
}

/* Select + Date inputs — identical styling */
#panel-entryexit .ee-select,
#panel-entryexit .ee-date {
    width: 100% !important;
    height: 38px;
    padding: 0 12px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}
#panel-entryexit .ee-select:hover,
#panel-entryexit .ee-date:hover {
    border-color: rgba(14,165,233,0.40);
}
#panel-entryexit .ee-select:focus,
#panel-entryexit .ee-date:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14,165,233,0.10);
}
/* Select dropdown chevron */
#panel-entryexit select.ee-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 32px;
}
/* Date input — show calendar icon at the end */
#panel-entryexit input.ee-date {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 32px;
}
/* Hide native calendar picker icon (we use our own) — but keep input clickable */
#panel-entryexit input.ee-date::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}
#panel-entryexit .ee-filter-cell { position: relative; }

/* Light mode */
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-select,
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-date {
    background-color: #ffffff;
    border-color: #c8d2e0;
    color: #0f172a;
}
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-select:hover,
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-date:hover {
    border-color: #fbbf24;
    background-color: #fef9c3;
}
#tapx-dash-overlay:not(.dark) #panel-entryexit select.ee-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}
#tapx-dash-overlay:not(.dark) #panel-entryexit input.ee-date {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
}

/* ════════ Header action buttons — clean alignment ════════ */
#panel-entryexit .ee-btn-primary,
#panel-entryexit .ee-btn-secondary,
#panel-entryexit .ee-btn-ghost,
#panel-entryexit .ee-btn-icon {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1;
}
#panel-entryexit .ee-btn-primary {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(14,165,233,0.25);
    border-color: transparent;
}
#panel-entryexit .ee-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(14,165,233,0.40);
}
#panel-entryexit .ee-btn-secondary {
    background: linear-gradient(135deg, #fde047, #facc15);
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(250,204,21,0.25);
}
#panel-entryexit .ee-btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(250,204,21,0.40);
}
#panel-entryexit .ee-btn-ghost {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: #cbd5e1;
}
#panel-entryexit .ee-btn-ghost:hover {
    background: rgba(14,165,233,0.10);
    border-color: rgba(14,165,233,0.40);
    color: #0ea5e9;
}
#panel-entryexit .ee-btn-icon {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: #cbd5e1;
    width: 36px;
    padding: 0;
    justify-content: center;
}
#panel-entryexit .ee-btn-icon:hover {
    background: rgba(14,165,233,0.10);
    border-color: rgba(14,165,233,0.40);
    color: #0ea5e9;
}

/* Light mode buttons */
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-btn-ghost,
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-btn-icon {
    background: #ffffff;
    border-color: #c8d2e0;
    color: #475569;
}
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-btn-ghost:hover,
#tapx-dash-overlay:not(.dark) #panel-entryexit .ee-btn-icon:hover {
    background: linear-gradient(180deg, #fef9c3, #fef3c7);
    border-color: #fbbf24;
    color: #92400e;
}

/* Header right-side button container — keep right-aligned, no awkward wrap */
#panel-entryexit > .flex.items-center.justify-between > .flex.flex-wrap.gap-2 {
    display: flex !important;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}


#tapx-emp-detail-panel { font-family: Inter, system-ui, -apple-system, sans-serif; }
#tapx-emp-detail-panel .ted-tab-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 11px 14px;
    background: transparent; border: 1px solid transparent; border-radius: 9px;
    color: #94a3b8; font-size: 12.5px; font-weight: 700;
    text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s;
}
#tapx-emp-detail-panel .ted-tab-btn:hover { background: rgba(255,255,255,0.04); color: #cbd5e1; }
#tapx-emp-detail-panel .ted-tab-btn--active {
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(6,182,212,0.10));
    color: #60a5fa; border-color: rgba(59,130,246,0.30);
}
#tapx-emp-detail-panel .ted-tab-btn .material-symbols-outlined { font-size: 18px; }
#tapx-emp-detail-panel .ted-section-title {
    font-size: 11px; font-weight: 800; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
}
#tapx-emp-detail-panel .ted-card {
    background: #fff; border: 1px solid #c8d2e0; border-radius: 12px;
    padding: 16px 18px; margin-bottom: 14px;
}
#tapx-emp-detail-panel .ted-field-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
}
#tapx-emp-detail-panel .ted-field-label {
    font-size: 10px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px;
}
#tapx-emp-detail-panel .ted-field-value {
    font-size: 13px; font-weight: 600; color: #0f172a; word-break: break-word;
}
#tapx-emp-detail-panel .ted-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
#tapx-emp-detail-panel .ted-table thead th {
    text-align: left; padding: 10px 12px; background: #f1f5f9;
    color: #475569; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid #c8d2e0;
}
#tapx-emp-detail-panel .ted-table tbody td {
    padding: 10px 12px; border-bottom: 1px solid #f1f5f9;
    color: #0f172a; font-weight: 500;
}
#tapx-emp-detail-panel .ted-empty {
    padding: 48px 20px; text-align: center; color: #94a3b8; font-size: 13px;
}
#tapx-emp-detail-panel .ted-empty .material-symbols-outlined {
    font-size: 48px; opacity: 0.35; display: block; margin: 0 auto 12px;
}
#tapx-emp-detail-panel .ted-pill {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.tapx-emp-name-clickable {
    cursor: pointer; color: #60a5fa !important;
    text-decoration: underline; text-decoration-color: rgba(96,165,250,0.45);
    text-underline-offset: 3px; transition: color 0.15s;
}
.tapx-emp-name-clickable:hover { color: #9fc0e8 !important; }


    /* ── 1) DOCUMENT-LEVEL OVERFLOW GUARDS ── */
    html, body { max-width: 100vw; overflow-x: hidden; }

    /* Anything that uses container-style widths shouldn't exceed viewport */
    img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

    /* ── 2) TABLES: horizontal scroll instead of squashing or overflowing ── */
    .overflow-x-auto, [class*="overflow-x"] { max-width: 100%; }
    table { max-width: 100%; }
    /* Wrap any table without an explicit scroll container in one */
    .table-wrapper, .tapx-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── 3) FIXED LAYOUTS / DASHBOARD OVERLAY ── */
    #tapx-dash-overlay,
    .tapx-dash-overlay,
    .tapx-modal-overlay { max-width: 100vw; overflow-x: hidden; }

    /* ════════════════════════════════════════════════════════════════
       TABLET BREAKPOINT (≤ 1023px)
       ════════════════════════════════════════════════════════════════ */
    @media (max-width: 1023px) {
        /* Sidebar collapse */
        aside, .sidebar, [class*="sidebar"] { max-width: 240px; }
        /* Grid columns auto-shrink */
        .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        /* Modal width */
        .modal, [class*="-modal"], [id*="-modal"] > div:first-child {
            max-width: 92vw !important;
        }
    }

    /* ════════════════════════════════════════════════════════════════
       SMALL TABLET / LARGE PHONE (≤ 767px)
       ════════════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        /* Most multi-column grids collapse to single column */
        .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6,
        .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4 {
            grid-template-columns: minmax(0, 1fr) !important;
        }
        /* Tighter padding everywhere */
        .p-8, .p-10, .p-12 { padding: 1rem !important; }
        .px-8, .px-10, .px-12 { padding-left: 1rem !important; padding-right: 1rem !important; }
        .py-8, .py-10, .py-12 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
        /* Smaller hero / display fonts */
        .text-7xl, .text-8xl, .text-9xl { font-size: 2.5rem !important; line-height: 1.15 !important; }
        .text-6xl { font-size: 2.25rem !important; line-height: 1.15 !important; }
        .text-5xl { font-size: 2rem !important; line-height: 1.2 !important; }
        .text-4xl { font-size: 1.75rem !important; line-height: 1.25 !important; }
        .text-3xl { font-size: 1.5rem !important; line-height: 1.3 !important; }
        /* Sidebar tiny / collapsed */
        aside, .sidebar { max-width: 64px; }
        /* Modal: full-width with comfortable padding */
        .modal, [class*="-modal"] > div:first-child,
        [id*="modal"] > div:first-child {
            max-width: 96vw !important;
            width: 96vw !important;
            max-height: 92vh !important;
        }
        /* Make tables horizontally scrollable instead of overflowing */
        table { min-width: 600px; }
        /* Stat-box / cards: stack and shrink */
        .stat-box, .card, [class*="stat-card"] { padding: 12px !important; }
        /* Buttons in toolbars: wrap nicely */
        .flex.gap-2, .flex.gap-3, .flex.gap-4 { flex-wrap: wrap; }
        /* Tabs / nav bars: allow horizontal scroll */
        nav[role="tablist"], .tabs, [class*="-tabs"] {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            white-space: nowrap;
        }
    }

    /* ════════════════════════════════════════════════════════════════
       PHONE (≤ 480px) — strictest constraints
       ════════════════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
        /* Even tighter padding */
        .p-6, .p-7 { padding: 0.75rem !important; }
        .px-6, .px-7 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
        .py-6, .py-7 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
        /* Body text */
        body { font-size: 14px; }
        /* Sidebar: icon-only */
        aside, .sidebar { max-width: 56px; }
        aside .sidebar-label, .sidebar .sidebar-label { display: none; }
        /* Modal padding shrink */
        .modal > div, [class*="-modal"] > div:first-child {
            padding: 12px !important;
        }
        /* Table min-width slightly smaller so 5-col tables fit nicer */
        table { min-width: 520px; font-size: 11px; }
        /* Hero blocks: less vertical space */
        section, .hero-section, [class*="hero-"] { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
        /* Hide non-essential decorative SVG/canvas backgrounds */
        #sanctuary-backdrop, #vortex-canvas { display: none !important; }
    }

    /* ════════════════════════════════════════════════════════════════
       LANDING PAGE SPECIFIC — sections, cards, navs
       ════════════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        /* Tier cards / pricing grid → single column */
        [data-sanctuary-tier] {
            max-width: 100% !important;
            margin-left: auto;
            margin-right: auto;
        }
        /* Navigation bar buttons wrap */
        header nav, .top-nav { flex-wrap: wrap; gap: 8px !important; }
        header { padding: 12px 16px !important; }
        /* Footer columns collapse */
        footer .grid, footer [class*="grid"] {
            grid-template-columns: minmax(0, 1fr) !important;
            text-align: center;
        }
        /* Partner logo arcs / decorative wide blocks */
        .partner-arc, [class*="partner-"] { transform: scale(0.85); transform-origin: top center; }
    }

    /* ════════════════════════════════════════════════════════════════
       DASHBOARD SPECIFIC — panels, tables, modals
       ════════════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        /* Each dashboard panel — full width, tight padding */
        [id^="panel-"] { padding: 12px !important; }
        /* Stats row at top of any panel */
        [class*="stats-row"], [class*="-stats"] {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 8px !important;
        }
        /* Add Travel modal / E&E + WPS modals */
        #tapx-ee-add-modal-pro > div,
        #tapx-ee-quickstamp-modal > div,
        #tapx-ee-history-modal > div {
            max-width: 95vw !important;
            width: 95vw !important;
            max-height: 92vh !important;
        }
        #tapx-ee-add-modal-pro .teef { width: 100%; }
        /* Form grids collapse to single col */
        #tapx-ee-add-modal-pro [style*="grid-template-columns:1fr 1fr"] {
            grid-template-columns: 1fr !important;
        }
        /* Action column buttons stay inline, slightly smaller */
        #ee-tbody td button { width: 26px !important; height: 26px !important; }
        #ee-tbody td button .material-symbols-outlined { font-size: 14px !important; }
        /* Filter chips / toolbar — wrap & shrink */
        #panel-entryexit .ee-filter-row,
        #panel-wps [id*="filter"],
        #panel-toll [id*="filter"] {
            flex-wrap: wrap !important;
            gap: 6px !important;
        }
    }

    /* ════════════════════════════════════════════════════════════════
       ORIENTATION: landscape phones get a bit more breathing room
       ════════════════════════════════════════════════════════════════ */
    @media (max-width: 900px) and (orientation: landscape) {
        .hero, [class*="hero-"] { min-height: auto !important; }
    }

    /* ════════════════════════════════════════════════════════════════
       EXTRA-WIDE STRATEGY (USER REQUEST — landing + dashboard)
       
       Two-tier approach so every screen size feels right:
       
       1. <main> (landing) expands on wider screens up to ~1900px so
          pricing, partners, faq, dashboard-preview fill more space.
       2. #hero specifically stays at ~1500px design width and centers
          inside main — so the 2-col grid doesn't grow huge gaps
          between text and cards.
       3. Other sections (pricing, faq, etc) follow main's width.
       4. Dashboard <main id="dash-main"> already flex-1, so it auto-
          fills remaining space — just add safe padding caps.
       ════════════════════════════════════════════════════════════════ */
    @media (min-width: 1280px) {
        main#main-content {
            max-width: 1440px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }
    @media (min-width: 1600px) {
        main#main-content {
            max-width: 1600px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        /* Hero — KEEP COMPACT, no huge gap between text and cards */
        #hero, .hero-landing-ambient {
            max-width: 1400px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        /* Other sections (pricing, faqs, dashboard-preview) can fill main width */
        #sanctuary-tiers, #faqs, #dashboard-preview, #fine-check-hub, #quick-action-hub,
        section.scroll-reveal {
            max-width: 100% !important;
        }
    }
    @media (min-width: 1920px) {
        main#main-content {
            max-width: 1750px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        /* Hero stays compact */
        #hero, .hero-landing-ambient {
            max-width: 1500px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }
    @media (min-width: 2400px) {
        /* Ultra-wide 2K-3K */
        main#main-content {
            max-width: 1900px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        #hero, .hero-landing-ambient {
            max-width: 1500px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        html { font-size: 17px; }
    }
    @media (min-width: 3000px) {
        /* 4K / ultra-ultra-wide */
        main#main-content {
            max-width: 2100px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        #hero, .hero-landing-ambient {
            max-width: 1600px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        html { font-size: 18px; }
    }
    /* Dashboard main — already flex-1, but ensure inner panels don't go infinite */
    @media (min-width: 1600px) {
        main#dash-main {
            max-width: 100% !important;
        }
        main#dash-main .dash-card,
        main#dash-main section[id^="panel-"] {
            max-width: 100% !important;
        }
    }

    /* ── 4) UTILITY OVERRIDES ─────────────────────────────────────── */
    /* Banners / toasts shouldn't push the viewport */
    #tapx-ee-banner { max-width: calc(100vw - 40px); right: 20px !important; }
    /* Floating buttons / FABs respect safe-area on phones */
    @supports (padding: env(safe-area-inset-bottom)) {
        @media (max-width: 767px) {
            body { padding-bottom: env(safe-area-inset-bottom); }
        }
    }


    /* Base treatment for every stat tile across the dashboard */
    .emp-stat-card,
    .dash-stat-tile {
        position: relative;
        background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-radius: 14px !important;
        padding: 16px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.20), 0 0 0 1px rgba(255,255,255,0.02) inset;
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .emp-stat-card:hover,
    .dash-stat-tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06) inset;
        border-color: rgba(255,255,255,0.18) !important;
    }
    /* ── Light-mode (cream/pastel like the screenshot) ────────────────── */
    html.light .emp-stat-card,
    html.light .dash-stat-tile {
        background: linear-gradient(135deg, #f8fafc, #ffffff) !important;
        border: 1px solid rgba(15,23,42,0.08) !important;
        box-shadow: 0 1px 3px rgba(15,23,42,0.04);
    }
    html.light .emp-stat-card:hover,
    html.light .dash-stat-tile:hover {
        box-shadow: 0 6px 18px rgba(15,23,42,0.10);
        border-color: rgba(15,23,42,0.14) !important;
    }

    /* ── Color variants per accent (matches screenshot's 4 swatches) ─── */
    /* Emerald (Penalties Saved / On Time / Success) */
    .emp-stat-card.is-emerald,
    .dash-stat-tile.is-emerald,
    .emp-stat-card[data-comp-stat="ontime"],
    .emp-stat-card[data-fines-stat="paid"] {
        background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(16,185,129,0.02)) !important;
        border-color: rgba(16,185,129,0.25) !important;
    }
    html.light .emp-stat-card.is-emerald,
    html.light .dash-stat-tile.is-emerald,
    html.light .emp-stat-card[data-comp-stat="ontime"],
    html.light .emp-stat-card[data-fines-stat="paid"] {
        background: linear-gradient(135deg, #ecfdf5, #f0fdfa) !important;
        border-color: rgba(16,185,129,0.30) !important;
    }
    /* Amber (Critical / Due / Warning) */
    .emp-stat-card.is-amber,
    .dash-stat-tile.is-amber,
    .emp-stat-card[data-comp-stat="duesoon"],
    .emp-stat-card[data-overview-tile="vehicles"] {
        background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(245,158,11,0.02)) !important;
        border-color: rgba(245,158,11,0.25) !important;
    }
    html.light .emp-stat-card.is-amber,
    html.light .dash-stat-tile.is-amber,
    html.light .emp-stat-card[data-comp-stat="duesoon"],
    html.light .emp-stat-card[data-overview-tile="vehicles"] {
        background: linear-gradient(135deg, #fffbeb, #fefce8) !important;
        border-color: rgba(245,158,11,0.30) !important;
    }
    /* Sky / blue (Compliance % / Team / Default) */
    .emp-stat-card.is-sky,
    .dash-stat-tile.is-sky,
    .emp-stat-card[data-overview-tile="employees"] {
        background: linear-gradient(135deg, rgba(56,189,248,0.10), rgba(56,189,248,0.02)) !important;
        border-color: rgba(56,189,248,0.25) !important;
    }
    html.light .emp-stat-card.is-sky,
    html.light .dash-stat-tile.is-sky,
    html.light .emp-stat-card[data-overview-tile="employees"] {
        background: linear-gradient(135deg, #eff6ff, #f0f9ff) !important;
        border-color: rgba(56,189,248,0.30) !important;
    }
    /* Teal (Docs) */
    .emp-stat-card.is-teal,
    .dash-stat-tile.is-teal,
    .emp-stat-card[data-overview-tile="documents"] {
        background: linear-gradient(135deg, rgba(20,184,166,0.10), rgba(20,184,166,0.02)) !important;
        border-color: rgba(20,184,166,0.25) !important;
    }
    html.light .emp-stat-card.is-teal,
    html.light .dash-stat-tile.is-teal,
    html.light .emp-stat-card[data-overview-tile="documents"] {
        background: linear-gradient(135deg, #f0fdfa, #ecfeff) !important;
        border-color: rgba(20,184,166,0.30) !important;
    }
    /* Rose (Risk / Overdue) */
    .emp-stat-card.is-rose,
    .dash-stat-tile.is-rose,
    .emp-stat-card[data-comp-stat="overdue"],
    .emp-stat-card[data-fines-stat="overdue"] {
        background: linear-gradient(135deg, rgba(244,63,94,0.10), rgba(244,63,94,0.02)) !important;
        border-color: rgba(244,63,94,0.25) !important;
    }
    html.light .emp-stat-card.is-rose,
    html.light .dash-stat-tile.is-rose,
    html.light .emp-stat-card[data-comp-stat="overdue"],
    html.light .emp-stat-card[data-fines-stat="overdue"] {
        background: linear-gradient(135deg, #fff1f2, #fef2f2) !important;
        border-color: rgba(244,63,94,0.30) !important;
    }
    /* Gray (Recycle / Neutral) */
    .emp-stat-card[data-overview-tile="recycle"] {
        background: linear-gradient(135deg, rgba(148,163,184,0.10), rgba(148,163,184,0.02)) !important;
        border-color: rgba(148,163,184,0.20) !important;
    }
    html.light .emp-stat-card[data-overview-tile="recycle"] {
        background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
        border-color: rgba(148,163,184,0.30) !important;
    }


    /* Base styling for all dashboard stat cards in LIGHT mode */
    #tapx-dash-overlay:not(.dark) .emp-stat-card,
    #tapx-dash-overlay:not(.dark) .dash-stat-tile {
        border-radius: 0.85rem !important;
        padding: 1rem 1.1rem !important;
        text-align: left !important;
        border: 1px solid rgba(180, 170, 150, 0.18) !important;
        background: linear-gradient(135deg, #f7f6f1 0%, #fefdf9 100%) !important;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.95) inset,
            0 4px 14px rgba(80, 60, 30, 0.06) !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
    }
    #tapx-dash-overlay:not(.dark) .emp-stat-card:hover,
    #tapx-dash-overlay:not(.dark) .dash-stat-tile:hover {
        transform: translateY(-3px) !important;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 1) inset,
            0 12px 28px rgba(80, 60, 30, 0.12) !important;
    }

    /* Auto-rotate pastel themes through nth-child(4n) */
    /* GREEN — child 1 (1st, 5th, 9th...) */
    #tapx-dash-overlay:not(.dark) #emp-stats-grid .emp-stat-card:nth-child(4n+1),
    #tapx-dash-overlay:not(.dark) #veh-stats-grid .emp-stat-card:nth-child(4n+1),
    #tapx-dash-overlay:not(.dark) #docs-stats-grid .emp-stat-card:nth-child(4n+1),
    #tapx-dash-overlay:not(.dark) #fines-stats-grid .emp-stat-card:nth-child(4n+1),
    #tapx-dash-overlay:not(.dark) #compliance-stats-grid .emp-stat-card:nth-child(4n+1),
    #tapx-dash-overlay:not(.dark) #wps-stats-grid .emp-stat-card:nth-child(4n+1),
    #tapx-dash-overlay:not(.dark) [class*="stats-grid"] .emp-stat-card:nth-child(4n+1),
    #tapx-dash-overlay:not(.dark) [class*="stats-grid"] .dash-stat-tile:nth-child(4n+1) {
        background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
        border-color: rgba(16, 185, 129, 0.22) !important;
    }
    /* AMBER — child 2 */
    #tapx-dash-overlay:not(.dark) [class*="stats-grid"] .emp-stat-card:nth-child(4n+2),
    #tapx-dash-overlay:not(.dark) [class*="stats-grid"] .dash-stat-tile:nth-child(4n+2) {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
        border-color: rgba(245, 158, 11, 0.22) !important;
    }
    /* SKY — child 3 */
    #tapx-dash-overlay:not(.dark) [class*="stats-grid"] .emp-stat-card:nth-child(4n+3),
    #tapx-dash-overlay:not(.dark) [class*="stats-grid"] .dash-stat-tile:nth-child(4n+3) {
        background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%) !important;
        border-color: rgba(59, 130, 246, 0.22) !important;
    }
    /* ROSE — child 4 */
    #tapx-dash-overlay:not(.dark) [class*="stats-grid"] .emp-stat-card:nth-child(4n+4),
    #tapx-dash-overlay:not(.dark) [class*="stats-grid"] .dash-stat-tile:nth-child(4n+4) {
        background: linear-gradient(135deg, #fff1f2 0%, #fef2f2 100%) !important;
        border-color: rgba(244, 63, 94, 0.22) !important;
    }

    /* Strengthen the number color so it pops on the pastel bg */
    #tapx-dash-overlay:not(.dark) .emp-stat-card .text-xl,
    #tapx-dash-overlay:not(.dark) .emp-stat-card .text-2xl,
    #tapx-dash-overlay:not(.dark) .emp-stat-card .text-3xl,
    #tapx-dash-overlay:not(.dark) .dash-stat-tile .text-xl,
    #tapx-dash-overlay:not(.dark) .dash-stat-tile .text-2xl,
    #tapx-dash-overlay:not(.dark) .dash-stat-tile .text-3xl {
        font-weight: 900 !important;
        font-size: 1.5rem !important;
        line-height: 1.1 !important;
    }
    /* Light label */
    #tapx-dash-overlay:not(.dark) .emp-stat-card .text-\\[9px\\],
    #tapx-dash-overlay:not(.dark) .emp-stat-card .text-\\[10px\\],
    #tapx-dash-overlay:not(.dark) .dash-stat-tile .text-\\[9px\\],
    #tapx-dash-overlay:not(.dark) .dash-stat-tile .text-\\[10px\\] {
        color: #475569 !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
    }


    #panel-documents-wrapper.hidden { display: none !important; }

    .tapx-docs-view-tab {
        background: transparent;
        color: #0f172a;
        border: 1px solid transparent;
    }
    .tapx-docs-view-tab:hover {
        background: rgba(15, 23, 42, 0.05);
        color: #000;
    }
    .tapx-docs-view-tab--active {
        background: rgba(56, 189, 248, 0.15);
        color: #0369a1;
        border-color: rgba(56, 189, 248, 0.40);
    }

    /* Dark mode */
    html.dark .tapx-docs-view-tab { color: #c8d2e0; }
    html.dark .tapx-docs-view-tab:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
    }
    html.dark .tapx-docs-view-tab--active {
        background: rgba(56, 189, 248, 0.18);
        color: #7dd3fc;
        border-color: rgba(56, 189, 248, 0.35);
    }


/* ─── Cream / beige bar ─── shorter / slimmer than v1 */
.incoming-req-sixfold-content .emp-action-trigger,
.dash-carpet-expand .emp-action-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 9px 14px !important;
    border: 1px solid #b8a47e !important;
    border-radius: 7px !important;
    background: linear-gradient(90deg, #d9c7a7 0%, #c8b491 100%) !important;
    color: #2a2418 !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.35) !important;
    transition: filter 0.15s ease, box-shadow 0.15s ease !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
}
.incoming-req-sixfold-content .emp-action-trigger:hover,
.dash-carpet-expand .emp-action-trigger:hover {
    filter: brightness(1.04) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
.incoming-req-sixfold-content .emp-action-trigger:active,
.dash-carpet-expand .emp-action-trigger:active {
    filter: brightness(0.97) !important;
}

.incoming-req-sixfold-content .emp-action-trigger > span:first-child,
.dash-carpet-expand .emp-action-trigger > span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #2a2418 !important;
}
.incoming-req-sixfold-content .emp-action-trigger > span:first-child .material-symbols-outlined,
.dash-carpet-expand .emp-action-trigger > span:first-child .material-symbols-outlined {
    color: #2a2418 !important;
    font-size: 16px !important;
}

/* Slimmer right-side circle */
.incoming-req-sixfold-content .emp-action-trigger .emp-action-plus,
.dash-carpet-expand .emp-action-trigger .emp-action-plus {
    background: #2a2418 !important;
    color: #f5e9cf !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background 0.15s ease !important;
}
.incoming-req-sixfold-content .emp-action-trigger .emp-action-plus .material-symbols-outlined,
.dash-carpet-expand .emp-action-trigger .emp-action-plus .material-symbols-outlined {
    color: #f5e9cf !important;
    font-size: 15px !important;
}
.incoming-req-sixfold-content .emp-action-trigger[aria-expanded="true"] .emp-action-plus,
.dash-carpet-expand .emp-action-trigger[aria-expanded="true"] .emp-action-plus {
    background: #5a4a2a !important;
}

/* Equal spacing */
.incoming-req-sixfold-content .emp-action-buttons,
.dash-carpet-expand .emp-action-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

/* Expanded content panel (image-2 look) */
.incoming-req-sixfold-content .emp-fp-panel:not([hidden]),
.incoming-req-sixfold-content .emp-wps-panel:not([hidden]),
.incoming-req-sixfold-content .emp-inv-panel:not([hidden]),
.incoming-req-sixfold-content .emp-ee-panel:not([hidden]),
.incoming-req-sixfold-content .emp-docs-panel:not([hidden]),
.dash-carpet-expand .emp-fp-panel:not([hidden]),
.dash-carpet-expand .emp-wps-panel:not([hidden]),
.dash-carpet-expand .emp-inv-panel:not([hidden]),
.dash-carpet-expand .emp-ee-panel:not([hidden]),
.dash-carpet-expand .emp-docs-panel:not([hidden]) {
    background: #ffffff !important;
    border: 1px solid #d9c7a7 !important;
    border-top: none !important;
    border-radius: 0 0 7px 7px !important;
    margin-top: -8px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    animation: tapxEmpPanelDrop 0.22s ease-out !important;
}
@keyframes tapxEmpPanelDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.incoming-req-sixfold-content .emp-action-trigger[aria-expanded="true"],
.dash-carpet-expand .emp-action-trigger[aria-expanded="true"] {
    border-radius: 7px 7px 0 0 !important;
    border-bottom-color: transparent !important;
}

/* ─── Inline ACTION button placed inside the green "DOCUMENTS — N RECORD"
       header of the Linked-Document panel. No dark wrapper bar.
       Button sits RIGHT NEXT to the header text (flex-start, not space-between). ─── */
.tapx-emp-doc-header-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
}
.tapx-emp-doc-header-flex > *:first-child {
    flex: 0 1 auto !important;
    min-width: 0 !important;
}
.tapx-emp-doc-action-inline-btn {
    padding: 6px 14px !important;
    border-radius: 6px !important;
    background: #1a1a1a !important;
    color: #fbbf24 !important;
    border: none !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
    transition: filter 0.15s ease, transform 0.1s ease !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
.tapx-emp-doc-action-inline-btn:hover { filter: brightness(1.15) !important; }
.tapx-emp-doc-action-inline-btn:active { transform: scale(0.97) !important; }
.tapx-emp-doc-action-inline-btn .material-symbols-outlined {
    font-size: 14px !important;
    color: #fbbf24 !important;
}

/* Per-fine "View Fine" red replacement */
.incoming-req-sixfold-content .emp-fp-panel .emp-fp-action-btn,
.dash-carpet-expand .emp-fp-panel .emp-fp-action-btn {
    background: #fff !important;
    color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Responsive */
@media (max-width: 640px) {
    .incoming-req-sixfold-content .emp-action-trigger,
    .dash-carpet-expand .emp-action-trigger {
        padding: 8px 12px !important;
        font-size: 10.5px !important;
    }
    .tapx-emp-doc-header-flex {
        flex-wrap: wrap;
    }
}


/* Brief highlight flash when "View Fine" lands on a row */
@keyframes tapxFineRowFlash {
    0%   { background-color: rgba(251, 191, 36, 0.45); box-shadow: inset 0 0 0 2px rgba(251,191,36,0.55); }
    100% { background-color: transparent;               box-shadow: inset 0 0 0 2px rgba(251,191,36,0); }
}
.tapx-fine-row-flash > td,
.tapx-fine-row-flash {
    animation: tapxFineRowFlash 2.2s ease-out;
}
/* When a fine-form dropdown is portaled to <body>, give it a max-height +
   scroll and a high z-index so it always renders on top of any modal. */
.tapx-dd-portaled {
    z-index: 2147483647 !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.65) !important;
}
/* Hide the "Last Entry" column in the Entry & Exit table (5th column).
   Covers both rendering paths (header + tbody, both have 5th = Last Entry). */
#panel-entryexit table thead th:nth-child(5),
#panel-entryexit table tbody tr > td:nth-child(5),
#ee-tbody tr > td:nth-child(5) {
    display: none !important;
}


    #tapx-step2 input[type="date"].tapx-inp,
    #tapx-step2-panel input[type="date"],
    #tapx-step2-panel input[type="date"].tapx-inp {
        background: #ffffff !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        border: 1px solid rgba(125, 211, 252, 0.55) !important;
        border-radius: 9999px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
        font-family: inherit !important;
        font-weight: 500 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        position: relative !important;
    }
    #tapx-step2 input[type="date"].tapx-inp:focus,
    #tapx-step2-panel input[type="date"]:focus {
        border-color: rgba(254,240,138,0.85) !important;
        box-shadow: 0 0 0 2px rgba(254,240,138,0.30) !important;
        outline: none !important;
    }
    /* Internal segments — dd / mm / yyyy parts use dark slate to match white bg */
    #tapx-step2 input[type="date"].tapx-inp::-webkit-datetime-edit,
    #tapx-step2 input[type="date"].tapx-inp::-webkit-datetime-edit-fields-wrapper,
    #tapx-step2 input[type="date"].tapx-inp::-webkit-datetime-edit-text,
    #tapx-step2 input[type="date"].tapx-inp::-webkit-datetime-edit-day-field,
    #tapx-step2 input[type="date"].tapx-inp::-webkit-datetime-edit-month-field,
    #tapx-step2 input[type="date"].tapx-inp::-webkit-datetime-edit-year-field,
    #tapx-step2-panel input[type="date"]::-webkit-datetime-edit,
    #tapx-step2-panel input[type="date"]::-webkit-datetime-edit-fields-wrapper,
    #tapx-step2-panel input[type="date"]::-webkit-datetime-edit-text,
    #tapx-step2-panel input[type="date"]::-webkit-datetime-edit-day-field,
    #tapx-step2-panel input[type="date"]::-webkit-datetime-edit-month-field,
    #tapx-step2-panel input[type="date"]::-webkit-datetime-edit-year-field {
        color: #94a3b8 !important;
        background: transparent !important;
        padding: 0 !important;
    }
    /* When a real date is set, the segments turn full dark */
    #tapx-step2 input[type="date"].tapx-inp:valid::-webkit-datetime-edit-day-field,
    #tapx-step2 input[type="date"].tapx-inp:valid::-webkit-datetime-edit-month-field,
    #tapx-step2 input[type="date"].tapx-inp:valid::-webkit-datetime-edit-year-field,
    #tapx-step2-panel input[type="date"]:valid::-webkit-datetime-edit-day-field,
    #tapx-step2-panel input[type="date"]:valid::-webkit-datetime-edit-month-field,
    #tapx-step2-panel input[type="date"]:valid::-webkit-datetime-edit-year-field {
        color: #0f172a !important;
    }
    /* Calendar picker indicator — dark grey to suit the white background */
    #tapx-step2 input[type="date"].tapx-inp::-webkit-calendar-picker-indicator,
    #tapx-step2-panel input[type="date"]::-webkit-calendar-picker-indicator {
        filter: none;
        opacity: 0.55;
        cursor: pointer;
    }
    #tapx-step2 input[type="date"].tapx-inp::-webkit-calendar-picker-indicator:hover,
    #tapx-step2-panel input[type="date"]::-webkit-calendar-picker-indicator:hover {
        opacity: 1;
    }
    /* Hide the "clear" / spinner buttons that some Chromium builds show */
    #tapx-step2 input[type="date"].tapx-inp::-webkit-clear-button,
    #tapx-step2 input[type="date"].tapx-inp::-webkit-inner-spin-button,
    #tapx-step2-panel input[type="date"]::-webkit-clear-button,
    #tapx-step2-panel input[type="date"]::-webkit-inner-spin-button {
        display: none;
    }


    .tapx-pwd-wrap{position:relative;}
    .tapx-pwd-eye-btn{
        position:absolute;
        right:14px;
        top:50%;
        transform:translateY(-50%);
        width:28px;
        height:28px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:transparent;
        border:none;
        cursor:pointer;
        color:#94a3b8;
        padding:0;
        border-radius:50%;
        transition:background .15s,color .15s;
        z-index:2;
    }
    .tapx-pwd-eye-btn:hover{background:rgba(15,23,42,0.06);color:#0f172a;}
    .tapx-pwd-eye-btn .material-symbols-outlined{font-size:18px;line-height:1;}
    /* Add right-padding inside the password input so text doesn't overlap the eye */
    #tapx-s3-body input[type="password"].tapx-inp,
    #tapx-s3-body input[type="text"][data-tapx-pwd].tapx-inp{
        padding-right:42px !important;
    }


    /* Match the existing wizard tab-bar styling line-for-line so the
       tier modal feels like Step 1 of the same wizard. */
    #tapx-tier-modal-wiz-header {
        display: flex;
        margin: -24px -24px 18px;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        background: #050507;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        overflow: hidden;
    }
    @media (min-width: 640px) {
        #tapx-tier-modal-wiz-header { margin: -32px -32px 22px; }
    }
    #tapx-tier-modal-wiz-header .tapx-tmh-tab {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: rgba(255,255,255,0.03);
        min-width: 0;
    }
    #tapx-tier-modal-wiz-header .tapx-tmh-tab.is-active {
        background: rgba(255,215,0,0.04);
    }
    #tapx-tier-modal-wiz-header .tapx-tmh-divider {
        width: 1px;
        background: rgba(255,255,255,0.07);
        flex: 0 0 auto;
    }
    #tapx-tier-modal-wiz-header .tapx-tmh-num {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 900;
        border: 2px solid rgba(255,215,0,0.3);
        background: transparent;
        color: rgba(148,163,184,0.7);
        flex: 0 0 auto;
    }
    #tapx-tier-modal-wiz-header .tapx-tmh-tab.is-active .tapx-tmh-num {
        background: #FFD700;
        border: none;
        color: #000;
    }
    #tapx-tier-modal-wiz-header .tapx-tmh-lbl {
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(148,163,184,0.6);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #tapx-tier-modal-wiz-header .tapx-tmh-tab.is-active .tapx-tmh-lbl {
        color: #FFD700;
    }
    /* While the wizard-look header is showing, hide the old "Configure
       plan" sub-title so it doesn't duplicate the tab label. */
    #tapx-tier-modal-panel:has(#tapx-tier-modal-wiz-header) #tier-quote-modal-title {
        display: none;
    }


    #tapx-commercial-summary-card {
        margin: 18px 0 0;
        padding: 18px 20px;
        border: 1px solid rgba(56,189,248,0.22);
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(56,189,248,0.06) 0%, rgba(99,102,241,0.04) 100%);
        box-shadow: 0 2px 8px rgba(15,23,42,0.04);
        position: relative;
    }
    #tapx-dash-overlay.dark #tapx-commercial-summary-card {
        background: linear-gradient(135deg, rgba(56,189,248,0.08) 0%, rgba(99,102,241,0.05) 100%);
        border-color: rgba(56,189,248,0.3);
    }
    .tapx-cs-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(56,189,248,0.18);
    }
    .tapx-cs-title-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .tapx-cs-icon {
        width: 36px; height: 36px;
        border-radius: 10px;
        background: rgba(56,189,248,0.15);
        display: flex; align-items: center; justify-content: center;
        color: #0369a1;
    }
    #tapx-dash-overlay.dark .tapx-cs-icon { color: #38bdf8; }
    .tapx-cs-title {
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #0369a1;
        margin: 0 0 2px;
    }
    #tapx-dash-overlay.dark .tapx-cs-title { color: #38bdf8; }
    .tapx-cs-subtitle {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }
    #tapx-dash-overlay.dark .tapx-cs-subtitle { color: #f1f5f9; }
    .tapx-cs-edit-btn {
        padding: 7px 14px;
        border-radius: 9999px;
        border: 1px solid rgba(56,189,248,0.4);
        background: rgba(56,189,248,0.08);
        color: #0369a1;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.18s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .tapx-cs-edit-btn:hover {
        background: rgba(56,189,248,0.18);
        border-color: rgba(56,189,248,0.6);
    }
    #tapx-dash-overlay.dark .tapx-cs-edit-btn { color: #38bdf8; }
    .tapx-cs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px 18px;
    }
    .tapx-cs-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }
    .tapx-cs-field-label {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #64748b;
    }
    #tapx-dash-overlay.dark .tapx-cs-field-label { color: #94a3b8; }
    .tapx-cs-field-value {
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
        font-family: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
        word-break: break-word;
    }
    #tapx-dash-overlay.dark .tapx-cs-field-value { color: #c8d2e0; }
    .tapx-cs-field-value.is-empty {
        color: #cbd5e1;
        font-style: italic;
        font-weight: 500;
    }
    #tapx-dash-overlay.dark .tapx-cs-field-value.is-empty { color: #475569; }
    .tapx-cs-empty-state {
        text-align: center;
        padding: 18px 12px;
        color: #64748b;
        font-size: 12px;
    }
    .tapx-cs-empty-state-link {
        color: #0369a1;
        text-decoration: none;
        font-weight: 800;
        cursor: pointer;
    }
    .tapx-cs-empty-state-link:hover { text-decoration: underline; }


    /* Hide the original Contact Details, Trade License, Business Address
       sections — they're replaced by Phase A's new Company Setup form. */
    #tapx-s2-body > p.tapx-sec-label[data-phase-hidden],
    #tapx-s2-body > div[data-phase-hidden] {
        display: none !important;
    }
    /* Phase A container — the new Company Setup card */
    #tapx-phase-a-container {
        margin-top: 4px;
        margin-bottom: 6px;
    }
    /* Phase A field grid — mirrors the Commercial Add Detail modal */
    #tapx-phase-a-container .tapx-pa-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        margin-bottom: 14px;
    }
    #tapx-phase-a-container .tapx-pa-grid > .tapx-field-wrap.is-full {
        grid-column: 1 / -1;
    }
    /* Phase A → B transition: payment method section + sender info are
       hidden during Phase A, shown during Phase B. */
    body[data-tapx-s2-phase="A"] #tapx-pay-section-wrap,
    body[data-tapx-s2-phase="A"] #tapx-bank-info,
    body[data-tapx-s2-phase="A"] #tapx-bitcoin-info,
    body[data-tapx-s2-phase="A"] #tapx-s2-actions {
        display: none !important;
    }
    body[data-tapx-s2-phase="B"] #tapx-phase-a-container,
    body[data-tapx-s2-phase="B"] #tapx-phase-a-continue-row {
        display: none !important;
    }
    /* Phase A continue button styling — matches existing wizard buttons */
    #tapx-phase-a-continue-row {
        display: flex;
        gap: 10px;
        margin-top: 4px;
    }
    #tapx-phase-a-continue-row .tapx-pa-back,
    #tapx-phase-a-continue-row .tapx-pa-continue {
        font-family: inherit;
    }
    .tapx-pa-back {
        flex: 0 0 auto;
        padding: 11px 20px;
        border-radius: 9999px;
        border: 1.5px solid rgba(15, 23, 42, 0.18);
        background: transparent;
        color: #475569;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        cursor: pointer;
        transition: border-color .2s, color .2s;
    }
    .tapx-pa-back:hover {
        border-color: rgba(15, 23, 42, 0.4);
        color: #0f172a;
    }
    .tapx-pa-continue {
        flex: 1;
        padding: 12px;
        border-radius: 9999px;
        border: none;
        background: #FFD700;
        color: #000;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .1em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: 0 0 24px rgba(255,215,0,.28);
        transition: filter .2s, box-shadow .2s;
    }
    .tapx-pa-continue:hover {
        filter: brightness(1.05);
        box-shadow: 0 0 30px rgba(255,215,0,.42);
    }
    /* Phase B back button (#tapx-back-btn) — restyle for the now-white
       wizard body so it's visible. Original inline styles set a near-
       transparent white border + light-slate text which disappears on
       a white background. */
    #tapx-step2-panel #tapx-back-btn {
        border-color: rgba(15, 23, 42, 0.18) !important;
        color: #475569 !important;
    }
    #tapx-step2-panel #tapx-back-btn:hover {
        border-color: rgba(15, 23, 42, 0.4) !important;
        color: #0f172a !important;
    }
    /* Section labels inside Phase A / Phase B — slate on white */
    #tapx-step2-panel .tapx-sec-label {
        color: #475569 !important;
    }
    /* Phase A inline error pill */
    #tapx-phase-a-err {
        display: none;
        color: #ef4444;
        font-size: 9.5px;
        font-weight: 700;
        margin: 6px 0 8px;
        padding-left: 12px;
        letter-spacing: .02em;
    }


    /* Plan-label badge centered on each tier card's top border (floating pill,
       like the Most Popular badge in the reference). overflow:visible lets it
       straddle the border; the card background stays rounded via border-radius. */
    #sanctuary-tiers .tapx-tier-card-v2,
    .tapx-tier-card-v2 { overflow: visible !important; }
    .tapx-tier-card-v2 > .tapx-tier-plan-pill {
        position: absolute;
        top: -0.7rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 30;
        white-space: nowrap;
        pointer-events: none;
    }


    /* BRONZE */
    #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="bronze"] button[data-tier-quote-open],
    html:not(.dark) #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="bronze"] button[data-tier-quote-open],
    html.dark        #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="bronze"] button[data-tier-quote-open] {
        background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        box-shadow: 0 8px 22px rgba(205,127,50,0.45) !important;
    }
    #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="bronze"] button[data-tier-quote-open]:hover {
        background: linear-gradient(135deg, #e29a4d 0%, #9c4f17 100%) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        box-shadow: 0 14px 32px rgba(205,127,50,0.55) !important;
    }

    /* GOLD */
    #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="gold"] button[data-tier-quote-open],
    html:not(.dark) #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="gold"] button[data-tier-quote-open],
    html.dark        #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="gold"] button[data-tier-quote-open] {
        background: linear-gradient(135deg, #FFD700 0%, #b8860b 100%) !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        box-shadow: 0 8px 22px rgba(255,215,0,0.55) !important;
    }
    #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="gold"] button[data-tier-quote-open]:hover {
        background: linear-gradient(135deg, #ffe347 0%, #d09a13 100%) !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        box-shadow: 0 14px 32px rgba(255,215,0,0.62) !important;
    }

    /* SILVER */
    #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="silver"] button[data-tier-quote-open],
    html:not(.dark) #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="silver"] button[data-tier-quote-open],
    html.dark        #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="silver"] button[data-tier-quote-open] {
        background: linear-gradient(135deg, #e8e8e8 0%, #8a8a8a 100%) !important;
        color: #1e293b !important;
        -webkit-text-fill-color: #1e293b !important;
        box-shadow: 0 8px 22px rgba(150,160,175,0.55) !important;
    }
    #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="silver"] button[data-tier-quote-open]:hover {
        background: linear-gradient(135deg, #f4f4f4 0%, #9b9b9b 100%) !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        box-shadow: 0 14px 32px rgba(150,160,175,0.62) !important;
    }

    /* PLATINUM */
    #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="platinum"] button[data-tier-quote-open],
    html:not(.dark) #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="platinum"] button[data-tier-quote-open],
    html.dark        #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="platinum"] button[data-tier-quote-open] {
        background: linear-gradient(135deg, #e5e4e2 0%, #94a3b8 100%) !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        box-shadow: 0 8px 22px rgba(180,200,225,0.55) !important;
    }
    #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="platinum"] button[data-tier-quote-open]:hover {
        background: linear-gradient(135deg, #f0eee9 0%, #a4b3c4 100%) !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        box-shadow: 0 14px 32px rgba(180,200,225,0.62) !important;
    }

    /* DIAMOND — cyan/sky-blue gradient, matches Diamond tier brand color */
    #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="diamond"] button[data-tier-quote-open],
    html:not(.dark) #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="diamond"] button[data-tier-quote-open],
    html.dark        #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="diamond"] button[data-tier-quote-open] {
        background: linear-gradient(135deg, #7dd3fc 0%, #0ea5e9 100%) !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        box-shadow: 0 8px 22px rgba(125,211,252,0.55) !important;
    }
    #sanctuary-tiers .tapx-tier-card-v2[data-tapx-tier-key="diamond"] button[data-tier-quote-open]:hover {
        background: linear-gradient(135deg, #bae6fd 0%, #38bdf8 100%) !important;
        color: #0f172a !important;
        -webkit-text-fill-color: #0f172a !important;
        box-shadow: 0 14px 32px rgba(125,211,252,0.65) !important;
    }


    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail,
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail td,
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-content,
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-content *:not(.material-symbols-outlined):not(svg):not(path):not([class*="rounded-full"]):not([class*="rounded-xl"]),
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail p:not([class*="rounded-full"]):not([class*="rounded-xl"]),
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail span:not([class*="rounded-full"]):not([class*="rounded-xl"]),
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail label,
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail th,
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-shard-heading,
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-shard-table,
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-shard-table th,
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-shard-table td,
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-gold"],
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-amber"],
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-yellow"],
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-accent"],
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-sky"],
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-blue"],
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-white"],
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-gray"],
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-slate"] {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }
    /* The "VEHICLE SERVICE REQUEST" / "EMPLOYEE SERVICE REQUEST" header
       strip at the top of the expansion uses a light-purple gradient
       background. Force black text on it too so the title reads as
       crisp dark against the lavender. */
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-content > *:first-child,
    #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-content > *:first-child * {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }


    /* Force BLACK text everywhere inside the expanded request detail row
       on light theme. Higher specificity than the existing rule via the
       extra `body` ancestor and a longer selector chain. */
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail,
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail td,
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-content,
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .incoming-req-sixfold-content *:not(.material-symbols-outlined):not(svg):not(path):not(input):not(textarea):not(select):not(button),
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail p,
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail span,
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail label,
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail th,
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail td *,
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .text-gold-lo,
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-amber"],
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-yellow"],
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-sky"],
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-blue"],
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-white"],
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="text-gray"],
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail .text-accent-teal {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }
    /* The employee/vehicle/document name chips: keep them readable too.
       Make the chip background a soft tint instead of the existing dark
       navy fill, so black text on it stays high-contrast. */
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="rounded-full"],
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="rounded-xl"] {
        background: rgba(255, 255, 255, 0.55) !important;
        border-color: rgba(15, 23, 42, 0.18) !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="rounded-full"] *,
    body #tapx-dash-overlay:not(.dark) tr.incoming-req-detail [class*="rounded-xl"] * {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }


    /* Defensive: reinforce that any panel with the `hidden` class or
       attribute is never displayed, even if another rule attempts to
       override it. */
    .searchable-select-panel[hidden],
    .searchable-select-panel.hidden,
    .tapx-ss-list[hidden],
    .tapx-ss-list.hidden,
    .dash-searchable-panel[hidden],
    .dash-searchable-panel.hidden,
    .dash-modal-drop-carpet[hidden],
    .dash-modal-drop-carpet.hidden,
    .tapx-tier-dd-panel[hidden],
    .tapx-tier-dd-panel.hidden,
    [data-emirate-popover][aria-hidden="true"],
    [data-emirate-popover].hidden,
    [data-emirate-popover][hidden] {
        display: none !important;
    }
    /* EXTRA STRONG: any emirate-related popover/list that ends up at body
       level (i.e. not a descendant of its proper container) must be
       hidden — covers stray copies that escape their wrapper. */
    body > [id*="emirates-combo"],
    body > [id*="emirate-combo"],
    body > [data-emirate-popover],
    body > [data-emirate-options],
    body > ul[data-emirate-options] {
        display: none !important;
    }


/* ── A. BASE — clean off-white with cool undertone ── */
#hero.hero-landing-ambient {
    background:
        radial-gradient(ellipse 85% 65% at 25% 20%, rgba(212, 177, 58, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 75% 80%, rgba(59, 93, 122, 0.28) 0%, transparent 60%),
        linear-gradient(180deg, #f4ead0 0%, #ead68b 35%, #d8c266 65%, #f4ead0 100%) !important;
    box-shadow:
        0 1px 0 rgba(180, 130, 40, 0.12),
        inset 0 0 260px rgba(255, 255, 255, 0.20) !important;
    perspective: 1500px;
    perspective-origin: 50% 50%;
}
#hero.hero-landing-ambient::before,
#hero.hero-landing-ambient::after {
    display: none !important;
}

/* ── B. HERO TEXT — refined typography on clean light bg ── */
#hero.hero-landing-ambient .hero-headline-fines {
    color: #2a1e0a !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.65) !important;
    font-feature-settings: 'ss01' on, 'cv01' on, 'kern' on;
    letter-spacing: -0.025em;
}
#hero.hero-landing-ambient #hero-typewriter-line,
#hero.hero-landing-ambient #hero-typewriter-text,
#hero.hero-landing-ambient #hero-typewriter-cursor {
    color: #1e3a6f !important;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.60);
    letter-spacing: -0.025em;
}
#hero.hero-landing-ambient .text-slate-800,
#hero.hero-landing-ambient .text-slate-300,
#hero.hero-landing-ambient .dark\:text-slate-300 {
    color: #475569 !important;
}
#hero.hero-landing-ambient .hero-cta-secondary {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0a1a2f !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.06);
    transition: all 0.3s cubic-bezier(.22,1,.36,1);
}
#hero.hero-landing-ambient .hero-cta-secondary:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(59, 110, 165, 0.40) !important;
    color: #3b6ea5 !important;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(59, 110, 165, 0.08),
        0 14px 36px rgba(59, 110, 165, 0.15);
}

/* ── C. PREMIUM DECORATION LAYERS ── */
#hero.hero-landing-ambient .tapx-mesh,
#hero.hero-landing-ambient .tapx-grid,
#hero.hero-landing-ambient .tapx-orb-focal,
#hero.hero-landing-ambient .tapx-horizon {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* C1. Animated mesh-gradient — 4 huge soft blobs (Stripe signature) */
#hero.hero-landing-ambient .tapx-mesh { overflow: hidden; }
.tapx-mesh-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    will-change: transform;
}
/* Aurora bands — elongated, rotated for ribbon-like flow */
.tapx-mesh-blob--1 {
    width: 52rem; height: 22rem;
    background: radial-gradient(ellipse, #d4b13a 0%, transparent 70%);   /* coral peach */
    top: -4rem; left: -10rem;
    transform: rotate(-18deg);
    animation: tapxBlobDrift1 36s ease-in-out infinite alternate;
}
.tapx-mesh-blob--2 {
    width: 56rem; height: 26rem;
    background: radial-gradient(ellipse, #3b5d7a 0%, transparent 70%);   /* soft sky blue */
    top: 35%; right: -14rem;
    transform: rotate(22deg);
    animation: tapxBlobDrift2 42s ease-in-out infinite alternate;
}
.tapx-mesh-blob--3 {
    width: 46rem; height: 20rem;
    background: radial-gradient(ellipse, #c89c3a 0%, transparent 70%);   /* soft mint */
    bottom: -6rem; left: 18%;
    transform: rotate(-12deg);
    animation: tapxBlobDrift3 32s ease-in-out infinite alternate;
}
.tapx-mesh-blob--4 {
    width: 38rem; height: 18rem;
    background: radial-gradient(ellipse, #4a6b88 0%, transparent 70%);   /* lavender */
    top: 12%; left: 38%;
    transform: rotate(28deg);
    animation: tapxBlobDrift4 38s ease-in-out infinite alternate;
}
/* Natural flowing aurora — slower, water-like movement */
@keyframes tapxBlobDrift1 {
    0%   { transform: rotate(-18deg) translate3d(0, 0, 0) scale(1); }
    25%  { transform: rotate(-15deg) translate3d(45px, 30px, 0) scale(1.04); }
    50%  { transform: rotate(-13deg) translate3d(70px, 50px, 0) scale(1.08); }
    75%  { transform: rotate(-17deg) translate3d(50px, 10px, 0) scale(1.02); }
    100% { transform: rotate(-22deg) translate3d(30px, -25px, 0) scale(0.96); }
}
@keyframes tapxBlobDrift2 {
    0%   { transform: rotate(22deg) translate3d(0, 0, 0) scale(1); }
    25%  { transform: rotate(20deg) translate3d(-25px, -20px, 0) scale(1.03); }
    50%  { transform: rotate(17deg) translate3d(-55px, -45px, 0) scale(1.07); }
    75%  { transform: rotate(20deg) translate3d(-60px, 0, 0) scale(1.02); }
    100% { transform: rotate(26deg) translate3d(-70px, 25px, 0) scale(0.95); }
}
@keyframes tapxBlobDrift3 {
    0%   { transform: rotate(-12deg) translate3d(0, 0, 0) scale(1); }
    25%  { transform: rotate(-10deg) translate3d(25px, -25px, 0) scale(1.04); }
    50%  { transform: rotate(-7deg)  translate3d(55px, -55px, 0) scale(1.10); }
    75%  { transform: rotate(-12deg) translate3d(15px, -35px, 0) scale(1.04); }
    100% { transform: rotate(-16deg) translate3d(-25px, -15px, 0) scale(0.96); }
}
@keyframes tapxBlobDrift4 {
    0%   { transform: rotate(28deg) translate3d(0, 0, 0) scale(1); }
    25%  { transform: rotate(30deg) translate3d(-20px, 30px, 0) scale(1.06); }
    50%  { transform: rotate(33deg) translate3d(-45px, 55px, 0) scale(1.12); }
    75%  { transform: rotate(29deg) translate3d(-10px, 30px, 0) scale(1.06); }
    100% { transform: rotate(24deg) translate3d(25px, -35px, 0) scale(0.93); }
}

/* C2. Refined dot grid (Linear-style, very subtle, masked from center) */
#hero.hero-landing-ambient .tapx-grid {
    background-image:
        radial-gradient(circle, rgba(15, 23, 42, 0.10) 1px, transparent 1.5px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 70% 80% at center, transparent 0%, transparent 30%, black 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at center, transparent 0%, transparent 30%, black 100%);
    opacity: 0.5;
}

/* C3. ONE focal glass orb — elegant single floating element */
#hero.hero-landing-ambient .tapx-orb-focal {
    perspective: 1500px;
    perspective-origin: 50% 50%;
    overflow: hidden;
}
.tapx-orb-focal-inner {
    position: absolute;
    display: none;  /* replaced by .tapx-3d-sphere */
    width: 22rem; height: 22rem;
    top: 18%; right: 8%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.15) 25%, transparent 50%),
        linear-gradient(135deg, rgba(59, 110, 165, 0.10) 0%, rgba(200, 219, 239, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.8),
        inset 0 -2px 0 rgba(212, 165, 116, 0.15),
        0 30px 80px rgba(15, 23, 42, 0.08),
        0 10px 30px rgba(15, 23, 42, 0.04);
    animation: tapxOrbFloat 18s ease-in-out infinite;
    will-change: transform;
}
@keyframes tapxOrbFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
    33%      { transform: translate3d(20px, -25px, 0) rotateX(8deg) rotateY(-12deg); }
    66%      { transform: translate3d(-15px, 30px, 0) rotateX(-10deg) rotateY(8deg); }
}
.tapx-orb-focal-inner::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.20) 0%, transparent 60%);
}
.tapx-orb-focal-inner::after {
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 60%, rgba(59, 110, 165, 0.08) 70%, transparent 80%);
    animation: tapxOrbPulse 4s ease-in-out infinite;
}
@keyframes tapxOrbPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}
@media (max-width: 1024px) {
    .tapx-orb-focal-inner { width: 16rem; height: 16rem; top: 8%; right: 4%; opacity: 0.7; }
}
@media (max-width: 640px) {
    .tapx-orb-focal-inner { width: 12rem; height: 12rem; top: 5%; right: -2rem; opacity: 0.5; }
}

/* C4. Subtle horizon glow at bottom */
#hero.hero-landing-ambient .tapx-horizon {
    background: linear-gradient(180deg,
        transparent 60%,
        rgba(59, 110, 165, 0.04) 85%,
        rgba(59, 110, 165, 0.08) 100%);
    pointer-events: none;
}

/* Mouse-reactive subtle blob shift */
/* USER REQUEST: Mouse parallax DISABLED on hero — nothing moves with cursor.
   Blobs + orb continue their own ambient floats but ignore cursor position. */

@media (prefers-reduced-motion: reduce) {
    #hero.hero-landing-ambient .tapx-mesh-blob,
    #hero.hero-landing-ambient .tapx-orb-focal-inner,
    #hero.hero-landing-ambient .tapx-orb-focal-inner::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM 3D APPEALING SCENE — Crystal Sphere + Rotating Cube + Diamond
   ─────────────────────────────────────────────────────────────────────
   Real CSS 3D shapes floating in the hero. Each has its own slow
   organic motion. Cool sapphire/sky/white palette. Glass-like, refined.
   ═══════════════════════════════════════════════════════════════════════ */

/* Scene wrapper — establishes 3D space */
.tapx-3d-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    transform-style: preserve-3d;
    overflow: hidden;
}

/* ── A. CRYSTAL SPHERE (top-right) — large glass orb with refraction ── */
.tapx-3d-sphere {
    position: absolute;
    top: 12%;
    right: 6%;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(200, 220, 250, 0.55) 18%,
            rgba(130, 175, 220, 0.30) 40%,
            rgba(80, 130, 200, 0.20) 65%,
            rgba(40, 90, 160, 0.15) 90%,
            rgba(20, 60, 130, 0.10) 100%);
    box-shadow:
        inset -25px -25px 60px rgba(30, 80, 160, 0.30),
        inset 25px 25px 60px rgba(255, 255, 255, 0.40),
        inset 0 0 80px rgba(180, 210, 245, 0.25),
        0 30px 80px rgba(30, 80, 160, 0.18),
        0 10px 30px rgba(30, 80, 160, 0.10);
    transform-style: preserve-3d;
    animation: tapx3dSphereFloat 24s ease-in-out infinite alternate;
    will-change: transform;
}
/* Highlight reflection on sphere */
.tapx-3d-sphere::before {
    content: "";
    position: absolute;
    top: 12%;
    left: 18%;
    width: 35%;
    height: 30%;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.20) 50%,
        transparent 80%);
    border-radius: 50%;
    filter: blur(6px);
}
/* Glow halo around sphere */
.tapx-3d-sphere::after {
    content: "";
    position: absolute;
    inset: -15%;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 50%, rgba(100, 160, 220, 0.15) 65%, transparent 85%);
    animation: tapx3dHaloPulse 5s ease-in-out infinite;
}
@keyframes tapx3dSphereFloat {
    0%   { transform: translate3d(0,    0,    0) rotateX(0deg)  rotateY(0deg);    }
    33%  { transform: translate3d(20px, -25px, 30px) rotateX(8deg) rotateY(-12deg);}
    66%  { transform: translate3d(-15px, 20px, -20px) rotateX(-6deg) rotateY(10deg);}
    100% { transform: translate3d(10px, -10px, 15px) rotateX(4deg) rotateY(-6deg); }
}
@keyframes tapx3dHaloPulse {
    0%, 100% { opacity: 0.6; transform: scale(1);    }
    50%      { opacity: 1;   transform: scale(1.08); }
}

/* ── B. ROTATING 3D CUBE (mid-left) — sapphire glass ── */
.tapx-3d-cube-wrap {
    position: absolute;
    top: 38%;
    left: 5%;
    width: 9rem;
    height: 9rem;
    transform-style: preserve-3d;
    animation: tapx3dCubeRotate 22s linear infinite;
    will-change: transform;
}
.tapx-3d-cube-face {
    position: absolute;
    width: 9rem;
    height: 9rem;
    background: linear-gradient(135deg,
        rgba(180, 210, 245, 0.30) 0%,
        rgba(120, 170, 220, 0.20) 50%,
        rgba(80, 130, 200, 0.15) 100%);
    border: 1px solid rgba(120, 170, 220, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        inset 0 0 30px rgba(255, 255, 255, 0.20),
        inset 0 0 60px rgba(80, 130, 200, 0.10),
        0 0 30px rgba(80, 130, 200, 0.20);
}
.tapx-3d-cube-face--front  { transform: rotateY(0deg)   translateZ(72px); }
.tapx-3d-cube-face--back   { transform: rotateY(180deg) translateZ(72px); }
.tapx-3d-cube-face--right  { transform: rotateY(90deg)  translateZ(72px); }
.tapx-3d-cube-face--left   { transform: rotateY(-90deg) translateZ(72px); }
.tapx-3d-cube-face--top    { transform: rotateX(90deg)  translateZ(72px); }
.tapx-3d-cube-face--bottom { transform: rotateX(-90deg) translateZ(72px); }
@keyframes tapx3dCubeRotate {
    0%   { transform: rotateX(15deg)  rotateY(0deg)   rotateZ(0deg)   translate3d(0, 0, 0); }
    50%  { transform: rotateX(-10deg) rotateY(180deg) rotateZ(10deg)  translate3d(20px, -25px, 0); }
    100% { transform: rotateX(15deg)  rotateY(360deg) rotateZ(0deg)   translate3d(0, 0, 0); }
}

/* ── C. CRYSTAL DIAMOND (bottom-center) — gold-tinted accent ── */
.tapx-3d-diamond {
    position: absolute;
    bottom: 18%;
    left: 38%;
    width: 6rem;
    height: 6rem;
    transform-style: preserve-3d;
    animation: tapx3dDiamondSpin 16s ease-in-out infinite;
    will-change: transform;
}
.tapx-3d-diamond-shape {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(255, 215, 0, 0.40) 0%,
        rgba(220, 180, 80, 0.30) 50%,
        rgba(180, 140, 50, 0.20) 100%);
    border: 1px solid rgba(220, 180, 80, 0.50);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow:
        0 0 30px rgba(220, 180, 80, 0.35),
        inset 0 0 30px rgba(255, 255, 255, 0.20);
    filter: drop-shadow(0 8px 16px rgba(180, 140, 50, 0.25));
}
@keyframes tapx3dDiamondSpin {
    0%   { transform: translate3d(0, 0, 0)         rotateY(0deg)   rotateZ(0deg)  scale(1);    }
    50%  { transform: translate3d(15px, -30px, 50px) rotateY(180deg) rotateZ(15deg) scale(1.08); }
    100% { transform: translate3d(0, 0, 0)         rotateY(360deg) rotateZ(0deg)  scale(1);    }
}

/* ── D. SMALL FLOATING 3D OCTAHEDRON (top-center, accent) ── */
.tapx-3d-octa {
    position: absolute;
    top: 18%;
    left: 32%;
    width: 4rem;
    height: 4rem;
    transform-style: preserve-3d;
    animation: tapx3dOctaFloat 19s ease-in-out infinite;
}
.tapx-3d-octa-top,
.tapx-3d-octa-bot {
    position: absolute;
    width: 0; height: 0;
    left: 50%; transform: translateX(-50%);
    border-left:  32px solid transparent;
    border-right: 32px solid transparent;
}
.tapx-3d-octa-top {
    top: 0;
    border-bottom: 32px solid rgba(180, 210, 245, 0.30);
    filter: drop-shadow(0 0 12px rgba(120, 170, 220, 0.35));
}
.tapx-3d-octa-bot {
    bottom: 0;
    border-top: 32px solid rgba(140, 180, 220, 0.28);
    filter: drop-shadow(0 6px 12px rgba(80, 130, 200, 0.25));
}
@keyframes tapx3dOctaFloat {
    0%, 100% { transform: translate3d(0, 0, 0)        rotateY(0deg)   rotateZ(0deg);   }
    33%      { transform: translate3d(20px, 15px, 20px) rotateY(180deg) rotateZ(15deg);  }
    66%      { transform: translate3d(-15px, -10px, 0) rotateY(360deg) rotateZ(-10deg); }
}

/* ── E. Subtle floor reflection / horizon ── */
.tapx-3d-floor {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 30%;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(100, 150, 200, 0.04) 60%,
        rgba(60, 110, 180, 0.10) 100%);
}

/* ── F. Mobile: simplify ── */
@media (max-width: 768px) {
    .tapx-3d-cube-wrap { display: none; }
    .tapx-3d-sphere    { width: 14rem; height: 14rem; opacity: 0.7; top: 8%; right: -2rem; }
    .tapx-3d-diamond   { width: 4rem;  height: 4rem;  bottom: 12%; }
    .tapx-3d-octa      { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tapx-3d-sphere, .tapx-3d-sphere::after, .tapx-3d-cube-wrap,
    .tapx-3d-diamond, .tapx-3d-octa {
        animation: none !important;
    }
}

/* ── X. PROFESSIONAL ANIMATIONS — Spotlight sweep + floating particles ── */
/* Diagonal light sweep — a subtle white highlight that slides across hero every 9s */
.tapx-light-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.tapx-light-sweep::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.06) 47%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.06) 53%,
        transparent 65%
    );
    transform: translateX(-100%) rotate(0deg);
    animation: tapxSweep 9s ease-in-out infinite;
}
@keyframes tapxSweep {
    0%   { transform: translateX(-100%) rotate(0deg); }
    60%  { transform: translateX(100%)  rotate(0deg); }
    100% { transform: translateX(100%)  rotate(0deg); }
}

/* Floating particle dots — soft white sparkles drifting upward */
.tapx-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.tapx-particle {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 0 10px rgba(180, 210, 250, 0.7);
    animation: tapxParticleRise linear infinite;
    will-change: transform, opacity;
}
.tapx-particle:nth-child(1)  { left: 8%;  width: 3px; height: 3px; animation-duration: 14s; animation-delay: 0s;   }
.tapx-particle:nth-child(2)  { left: 18%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: 2s;   }
.tapx-particle:nth-child(3)  { left: 28%; width: 2px; height: 2px; animation-duration: 22s; animation-delay: 5s;   }
.tapx-particle:nth-child(4)  { left: 38%; width: 5px; height: 5px; animation-duration: 16s; animation-delay: 1s;   }
.tapx-particle:nth-child(5)  { left: 48%; width: 3px; height: 3px; animation-duration: 20s; animation-delay: 7s;   }
.tapx-particle:nth-child(6)  { left: 58%; width: 4px; height: 4px; animation-duration: 15s; animation-delay: 3s;   }
.tapx-particle:nth-child(7)  { left: 68%; width: 2px; height: 2px; animation-duration: 24s; animation-delay: 6s;   }
.tapx-particle:nth-child(8)  { left: 78%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: 4s;   }
.tapx-particle:nth-child(9)  { left: 88%; width: 4px; height: 4px; animation-duration: 19s; animation-delay: 8s;   }
.tapx-particle:nth-child(10) { left: 95%; width: 3px; height: 3px; animation-duration: 21s; animation-delay: 10s;  }
@keyframes tapxParticleRise {
    0%   { transform: translateY(0)     scale(0.6); opacity: 0;   }
    15%  { opacity: 0.8;                              }
    85%  { opacity: 0.8;                              }
    100% { transform: translateY(-110vh) scale(1);   opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
    .tapx-light-sweep::before,
    .tapx-particle { animation: none !important; }
    .tapx-particles { display: none; }
}
@media (max-width: 640px) {
    .tapx-particle:nth-child(n+7) { display: none; }
}

/* ── D. SCROLL REVEAL VARIANTS ── */
.scroll-reveal[data-reveal="fade-left"]  { opacity: 0; transform: translate3d(-42px, 0, 0); }
.scroll-reveal[data-reveal="fade-right"] { opacity: 0; transform: translate3d(42px, 0, 0); }
.scroll-reveal[data-reveal="zoom-in"]    { opacity: 0; transform: scale3d(0.88, 0.88, 1); }
.scroll-reveal[data-reveal="blur-in"] {
    opacity: 0; filter: blur(14px); transform: translate3d(0, 18px, 0);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-reveal[data-reveal="tilt-in"] {
    opacity: 0; transform: perspective(1200px) rotateX(8deg) translate3d(0, 28px, 0);
    transform-origin: center top;
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-reveal[data-reveal="slide-up-big"] {
    opacity: 0; transform: translate3d(0, 80px, 0);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-reveal[data-reveal].scroll-reveal--inview {
    opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); filter: none;
}
.scroll-reveal[data-reveal="tilt-in"].scroll-reveal--inview {
    transform: perspective(1200px) rotateX(0) translate3d(0, 0, 0);
}

[data-reveal-stagger] > * {
    opacity: 0; transform: translate3d(0, 24px, 0);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(1)   { transition-delay: 0.05s; opacity: 1; transform: translate3d(0,0,0); }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(2)   { transition-delay: 0.12s; opacity: 1; transform: translate3d(0,0,0); }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(3)   { transition-delay: 0.19s; opacity: 1; transform: translate3d(0,0,0); }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(4)   { transition-delay: 0.26s; opacity: 1; transform: translate3d(0,0,0); }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(5)   { transition-delay: 0.33s; opacity: 1; transform: translate3d(0,0,0); }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(6)   { transition-delay: 0.40s; opacity: 1; transform: translate3d(0,0,0); }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(7)   { transition-delay: 0.47s; opacity: 1; transform: translate3d(0,0,0); }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(n+8) { transition-delay: 0.54s; opacity: 1; transform: translate3d(0,0,0); }

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal[data-reveal],
    [data-reveal-stagger] > * {
        opacity: 1 !important; transform: none !important;
        filter: none !important; transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   USER REQUEST: STOP HOVER ANIMATIONS ON THE 3 RIGHT-SIDE HERO CARDS
   ─────────────────────────────────────────────────────────────────────
   The cards (mulkiya-reveal, residency-reveal, main-card) inside
   .ritual-container have container-hover transforms (scale, translate)
   and individual hover-to-front scale-ups. Per the user request, these
   are suppressed so the cards stay perfectly still on hover. The
   initial fan-out entrance animation on page load IS preserved.
   ═══════════════════════════════════════════════════════════════════════ */
.ritual-container:hover .mulkiya-reveal,
.ritual-container.hero-fan-out .mulkiya-reveal:hover,
.ritual-container.hero-fan-out:hover .mulkiya-reveal {
    transform: translate(-20%, -40%) rotate(-12deg) scale(0.95) !important;
}
.ritual-container:hover .residency-reveal,
.ritual-container.hero-fan-out .residency-reveal:hover,
.ritual-container.hero-fan-out:hover .residency-reveal {
    transform: translate(40%, 40%) rotate(12deg) scale(0.95) !important;
}
.ritual-container:hover .main-card,
.ritual-container.hero-fan-out .main-card:hover,
.ritual-container.hero-fan-out:hover .main-card {
    transform: scale(1) !important;
}
.ritual-container.hero-fan-out .mulkiya-reveal:hover,
.ritual-container.hero-fan-out .residency-reveal:hover,
.ritual-container.hero-fan-out .main-card:hover {
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM SCROLL EFFECTS — BEST-IN-CLASS REVEAL ANIMATIONS
   ─────────────────────────────────────────────────────────────────────
   Adds dramatic, professional scroll-triggered animations using the
   data-reveal attribute. Each variant uses an extended cubic-bezier
   for that "expensive software" feel. Easings tuned for premium SaaS.
   ═══════════════════════════════════════════════════════════════════════ */
/* Master timing — slightly longer for drama */
.scroll-reveal[data-reveal] {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
    transition-duration: 1.1s !important;
}

/* — NEW VARIANT: rotate-in (rotates as it enters) — */
.scroll-reveal[data-reveal="rotate-in"] {
    opacity: 0;
    transform: perspective(1400px) rotateY(-22deg) translate3d(40px, 30px, -100px);
    transform-origin: left center;
}
.scroll-reveal[data-reveal="rotate-in"].scroll-reveal--inview {
    opacity: 1;
    transform: perspective(1400px) rotateY(0) translate3d(0, 0, 0);
}

/* — NEW VARIANT: flip-up (3D flip from bottom edge) — */
.scroll-reveal[data-reveal="flip-up"] {
    opacity: 0;
    transform: perspective(1400px) rotateX(-30deg) translate3d(0, 80px, -150px);
    transform-origin: center bottom;
    transition-duration: 1.2s !important;
}
.scroll-reveal[data-reveal="flip-up"].scroll-reveal--inview {
    opacity: 1;
    transform: perspective(1400px) rotateX(0) translate3d(0, 0, 0);
}

/* — NEW VARIANT: scale-rotate (zoom + tilt combo) — */
.scroll-reveal[data-reveal="scale-rotate"] {
    opacity: 0;
    transform: scale3d(0.75, 0.75, 1) rotate(-4deg);
    filter: blur(8px);
    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal[data-reveal="scale-rotate"].scroll-reveal--inview {
    opacity: 1;
    transform: scale3d(1, 1, 1) rotate(0);
    filter: blur(0);
}

/* — NEW VARIANT: clip-reveal (curtain-style mask wipe) — */
.scroll-reveal[data-reveal="clip-reveal"] {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    transition: clip-path 1.4s cubic-bezier(0.7, 0, 0.3, 1),
                -webkit-clip-path 1.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.scroll-reveal[data-reveal="clip-reveal"].scroll-reveal--inview {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
}

/* — Enhanced existing variants — */
.scroll-reveal[data-reveal="blur-in"] {
    opacity: 0; filter: blur(20px) saturate(0.6); transform: translate3d(0, 28px, 0);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.scroll-reveal[data-reveal="blur-in"].scroll-reveal--inview {
    opacity: 1; filter: blur(0) saturate(1); transform: translate3d(0, 0, 0);
}

.scroll-reveal[data-reveal="zoom-in"] {
    opacity: 0;
    transform: scale3d(0.78, 0.78, 1);
    filter: blur(6px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.scroll-reveal[data-reveal="zoom-in"].scroll-reveal--inview {
    filter: blur(0);
}

.scroll-reveal[data-reveal="tilt-in"] {
    opacity: 0;
    transform: perspective(1400px) rotateX(15deg) rotateY(-3deg) translate3d(0, 40px, -80px);
    transform-origin: center top;
    transition-duration: 1.2s !important;
}

.scroll-reveal[data-reveal="slide-up-big"] {
    opacity: 0;
    transform: translate3d(0, 100px, 0) scale3d(0.96, 0.96, 1);
    transition-duration: 1.2s !important;
}
.scroll-reveal[data-reveal="slide-up-big"].scroll-reveal--inview {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

/* — Stagger refinement (longer delays for premium drama) — */
[data-reveal-stagger] > * {
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform: translate3d(0, 40px, 0) scale3d(0.92, 0.92, 1);
}
[data-reveal-stagger].scroll-reveal--inview > * {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(1)   { transition-delay: 0.08s; }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(2)   { transition-delay: 0.18s; }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(3)   { transition-delay: 0.28s; }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(4)   { transition-delay: 0.38s; }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(5)   { transition-delay: 0.48s; }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(6)   { transition-delay: 0.58s; }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(7)   { transition-delay: 0.68s; }
[data-reveal-stagger].scroll-reveal--inview > *:nth-child(n+8){ transition-delay: 0.78s; }

/* — Section headings: gradient underline that draws in on reveal — */
.scroll-reveal--inview h2.tapx-anim-underline::after {
    transform: scaleX(1);
}
h2.tapx-anim-underline {
    position: relative;
    display: inline-block;
}
h2.tapx-anim-underline::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -0.45rem;
    height: 3px;
    background: linear-gradient(90deg, #1e40af 0%, #60a5fa 50%, #1e40af 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
    border-radius: 2px;
}

/* — SCROLL PROGRESS BAR — REMOVED per user request.
   Bar element is never created (init skipped), but CSS forces
   display:none as a safety net in case any other code creates it. — */
.tapx-scroll-progress {
    display: none !important;
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #1e40af 0%, #60a5fa 50%, #1e40af 100%);
    z-index: 9999;
    pointer-events: none;
    transition: width 0.05s linear;
    box-shadow: 0 1px 8px rgba(96, 165, 250, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal[data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        transition: none !important;
    }
    [data-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    h2.tapx-anim-underline::after { transform: scaleX(1) !important; transition: none !important; }
    .tapx-scroll-progress { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR ICONS — VIBRANT COLORFUL (color-matched glow, no dark shadow)
   ─────────────────────────────────────────────────────────────────────
   Each icon gets a distinct saturated color + color-matched soft glow,
   not a dark drop-shadow. Filled (FILL=1) variant for stronger color.
   On hover, the matching color aura intensifies and the icon lifts.
   ═══════════════════════════════════════════════════════════════════════ */

/* Base — filled icons, larger, with white inner pop */
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link .material-symbols-outlined,
#tapx-dash-overlay:not(.dark) #dash-nav .nav-link .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24 !important;
    font-size: 22px !important;
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.70),
        0 1px 0 rgba(255, 255, 255, 0.50);
    transition: transform 0.25s cubic-bezier(.22, 1, .36, 1),
                filter   0.25s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
}

/* Per-module VIBRANT colors + color-matched soft glow via drop-shadow */
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#dash-overview"] .material-symbols-outlined {
    color: #2563eb !important;
    filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.45));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-employees"] .material-symbols-outlined {
    color: #059669 !important;
    filter: drop-shadow(0 0 6px rgba(5, 150, 105, 0.45));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-vehicles"] .material-symbols-outlined {
    color: #d97706 !important;
    filter: drop-shadow(0 0 6px rgba(217, 119, 6, 0.45));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-commercial"] .material-symbols-outlined {
    color: #0891b2 !important;
    filter: drop-shadow(0 0 6px rgba(8, 145, 178, 0.45));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-documents"] .material-symbols-outlined {
    color: #7c3aed !important;
    filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.45));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-requests"] .material-symbols-outlined {
    color: #db2777 !important;
    filter: drop-shadow(0 0 6px rgba(219, 39, 119, 0.45));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-fines"] .material-symbols-outlined {
    color: #dc2626 !important;
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.45));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-tollgate"] .material-symbols-outlined {
    color: #ea580c !important;
    filter: drop-shadow(0 0 6px rgba(234, 88, 12, 0.45));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-wps"] .material-symbols-outlined {
    color: #0d9488 !important;
    filter: drop-shadow(0 0 6px rgba(13, 148, 136, 0.45));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-invoices"] .material-symbols-outlined {
    color: #ca8a04 !important;
    filter: drop-shadow(0 0 6px rgba(202, 138, 4, 0.45));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-password"] .material-symbols-outlined {
    color: #4f46e5 !important;
    filter: drop-shadow(0 0 6px rgba(79, 70, 229, 0.45));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-recycle"] .material-symbols-outlined {
    color: #475569 !important;
    filter: drop-shadow(0 0 6px rgba(71, 85, 105, 0.40));
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-settings"] .material-symbols-outlined {
    color: #0284c7 !important;
    filter: drop-shadow(0 0 6px rgba(2, 132, 199, 0.45));
}

/* HOVER — lift + brighter + bigger color aura */
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link:hover .material-symbols-outlined,
#tapx-dash-overlay:not(.dark) #dash-nav .nav-link:hover .material-symbols-outlined {
    transform: translateY(-1px) scale(1.14);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#dash-overview"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(37, 99, 235, 0.75)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-employees"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(5, 150, 105, 0.75)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-vehicles"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(217, 119, 6, 0.75)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-commercial"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(8, 145, 178, 0.75)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-documents"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.75)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-requests"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(219, 39, 119, 0.75)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-fines"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.75)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-tollgate"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(234, 88, 12, 0.75)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-wps"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(13, 148, 136, 0.75)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-invoices"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(202, 138, 4, 0.75)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-password"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(79, 70, 229, 0.75)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-recycle"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(71, 85, 105, 0.65)) brightness(1.10);
}
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href="#panel-settings"]:hover .material-symbols-outlined {
    filter: drop-shadow(0 0 12px rgba(2, 132, 199, 0.75)) brightness(1.10);
}

/* ACTIVE — same as hover (brighter aura, lifted) */
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link.active .material-symbols-outlined,
#tapx-dash-overlay:not(.dark) #dash-nav .nav-link.active .material-symbols-outlined,
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[aria-current="page"] .material-symbols-outlined {
    transform: translateY(-1px) scale(1.10);
}

/* Stronger contrast: override the theme rule that turns icons blue on hover/active */
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href]:hover .material-symbols-outlined,
#tapx-dash-overlay:not(.dark) .dash-sidebar .nav-link[href].active .material-symbols-outlined,
#tapx-dash-overlay:not(.dark) #dash-nav .nav-link[href]:hover .material-symbols-outlined,
#tapx-dash-overlay:not(.dark) #dash-nav .nav-link[href].active .material-symbols-outlined {
    /* color preserved from per-module rule above */
}


    /* Partner Gold/Silver tiers swapped: the popular Gold badge can sit on either
       the growth or scale card. Center the plan-pill on the top border for both,
       identical to the client Gold badge. Max specificity + !important, last in source. */
    html body #sanctuary-tiers [data-sanctuary-tier="growth"] > .tapx-tier-plan-pill,
    html body #sanctuary-tiers [data-sanctuary-tier="scale"] > .tapx-tier-plan-pill,
    html body #tapx-user-tiers [data-sanctuary-tier="growth"] > .tapx-tier-plan-pill,
    html body #tapx-user-tiers [data-sanctuary-tier="scale"] > .tapx-tier-plan-pill {
        position: absolute !important;
        top: -0.7rem !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        -webkit-transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 30 !important;
        white-space: nowrap !important;
    }
    html body #sanctuary-tiers [data-sanctuary-tier="growth"],
    html body #sanctuary-tiers [data-sanctuary-tier="scale"],
    html body #tapx-user-tiers [data-sanctuary-tier="growth"],
    html body #tapx-user-tiers [data-sanctuary-tier="scale"] {
        overflow: visible !important;
    }


    /* Fine Check Free — lock every field into a stable, uniform 2-column grid.
       Half-width fields all share the same width and flow in natural source
       order; full-width fields (Note, Mobile|Email row) always span both
       columns. !important overrides the inline grid-column the lookup-mode
       JS sets, so fields never jump position when switching tabs/modes.
       NOTE: we deliberately do NOT set `display` here — the visa/trade panels
       rely on their `hidden` class to stay hidden until their tab is active. */
    html body #fines-check-free-form #fines-free-vehicle-panel,
    html body #fines-check-free-form #fines-free-visa-panel,
    html body #fines-check-free-form #fines-free-trade-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        gap: 0.5rem !important;
        align-items: start !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Standard (half-width) fields — exactly one column, natural order */
    html body #fines-check-free-form #fines-free-vehicle-panel > *:not(.col-span-2),
    html body #fines-check-free-form #fines-free-visa-panel  > *:not(.col-span-2),
    html body #fines-check-free-form #fines-free-trade-panel > *:not(.col-span-2) {
        grid-column: span 1 / span 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-self: start !important;
        box-sizing: border-box !important;
    }
    /* Full-width fields (Note, Mobile|Email contact row) — span both columns */
    html body #fines-check-free-form #fines-free-vehicle-panel > .col-span-2,
    html body #fines-check-free-form #fines-free-visa-panel  > .col-span-2,
    html body #fines-check-free-form #fines-free-trade-panel > .col-span-2 {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-self: start !important;
        box-sizing: border-box !important;
    }
    /* Uniform control sizing — every input/select/textarea fills its cell
       (the phone combo keeps its own flex layout and is excluded). */
    html body #fines-check-free-form input:not([type="hidden"]):not(#fines-free-phone-digits):not(.fine-phone-cc-trigger),
    html body #fines-check-free-form select,
    html body #fines-check-free-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }


.aed-dh{display:inline-block;width:1.1em;height:0.96em;vertical-align:-0.14em;background-color:currentColor;-webkit-mask:url("data:image/png;base64,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") no-repeat center / contain;mask:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdAAAAGVCAYAAABOyKDfAAAM1UlEQVR4nO3d23LjthZFUfpU/v+X+zzIidsXWSQIEsBeYzwmVR3FDWJqg5S8bQAAAAAAAAAAAADAMW+jX8AZf/78+TP6NZDj7e1t6esF6GvpDUFAWZEQQw1LX8gCSmVCC3Nb/gIVUdIIK8yhxIUooiCscLcSF5yAwnPCCtcoc2GJKOwnqnBeqYtIRKGNoMJxpS4aAYU+BBVeK3eRiCj0J6jwXbmLQkDhWmIKDyUvBBGFe4gpycoufhGF+wkqScoudgGFscSU6kovcBGFOYgpFf1v9AsA6vvzbvTrgJ7Kvyt00cKcTKWsrvwCFlCYn5iyIke4wHCOeFlRxLs+FyasxUTKCiIWqYB+sDG1sYbGsF6ZWczitAE+2JCuZ61dw9plNjEL0qb2YBMaz1o8xxpmFjEL0ab1YPOZk/V5nLXMaFEL0CZl01mFtbqfNc0oUQvPpmSzWZW1+5q1zd2iFpxNyCZThbX8nDXOXeIWWvrGY3OpJ31N/8Q65w5xiyx9s7Gx1Ja+vr+y3rlS3OJK32BsKDnS1/rfrHuuELeo0jcVG0mm9HX/L+ufnuK+TN4FRKK3d6Nfx2jeSNBTXEAhmZD6zS/0E3khJV886Zsn3yVfD9vmmqCdCRTCpU+l6W8gaOeiCZO8UbJP6rWxba4PjjGBAp8kT6TJbx44TkCBH6WG1ENG7CWgwK8SI7ptplFeiw1o6qYALZKn0dGvgXnFBhQ4LjWiQspPBBQ4xDQKDwIKNBFR0gko0CxxGnWky78EFDgtLaLbZhpFQIFOUqfR0a+BcaIDmnaxwx3SrisRzRUdUOAaiREV0jwCClwiLaLbZhpNI6DAZdwXpTIBBS4nolQkoMAtRJRqBBS4jYhSiYACtxJRqhBQ4HYiSgUCCgwhoqxOQIFhRJSVCSgwlIiyKgEFhhNRViSgwBRElNUIKDANEWUl8QFNu2BhdmnXpIiuKz6gwHxElBUIKMAERHQ9AgpMKW0K3TYRXY2AAtNKjCjrEFBgamkRNYWuQ0ABJiOiaxBQYHppU+i2iegKBBRYgogyGwEFlpEYUeYloAATM4XOS0CBpSROoSI6JwEFliOizEBAAaCBgAJLMoUymoACLERE5yGgwLISp1DmIaDA0hIjagqdg4ACLEhExxNQYHmJUyjjCSjAokyhYwkoUELqFCqi4wgoADQQUKAMUyh3ElCAAkT0fgIKlJI6hXI/AQUowhR6LwEFyjGFcgcBBSjEFHofAQVKMoVyNQEFKMYUeg8BBcpKnkJF9HoCCgANBBQozRTKVQQUABoIKAA0EFCgPMe4XEFAAaCBgAIRTKH0JqAAAUS0PwEFYiRPofQnoADQQEABQjjG7UtAgSiOcelFQAGCmEL7EVAAaCCgAGFMoX0IKBDHfVB6EFCAQKbQ8wQUABoIKBDJMS5nCShAKMe45wgoADQQUCCWY1zOEFCAYI5x2wkoADQQUABoIKBANPdBHeO2ElAAaCCgAJhCGwgoADQQUCCe+6C0EFAAtm1zjHuUgAJAAwEFgAYCCrC5D8pxAgrAf9wH3e9pQP+8u/PFAMAqTKAA0OBlQE2iQAr3QR/s+fvsnkD9QAHgw6EjXBEFgIfD90Ad6QLUZ59/rfkhIj9cAJKdegrXNApU40Ei9uryMRYhBSDN03daPYK4wju5tPCv8HcCI6XtCa/YM567NKAA0NNMQRdQAJY1Mqi+yg+AZY18BscECkApd02lJlAASrlrKhVQAEq6OqICCkBZV0ZUQAEo7aoj3acBnemzNgBwVu+ImkABiNEzogIKQJReERVQAOL0iOivAXUfFICqzkbUBAoADQQUgFhnptCXAXWMC0BlrRE1gQJAg10BNYUCUFnLFGoCBYDteER3B9QUCgAfTKAA8O7IFHoooKZQAHgwgQLAX/ZOoYcDagoFgMYJVEQBSOcIFwC+2HOM2xxQUygAyU5NoCIKQKrTR7giCkBFr45xu9wDFVEA0nR7iEhEAUjS9SlcEQUgRfePsYgoAFX8dh/0ks+BiigA1V32RQpv76768wFgpMu/iUhIAajotq/yE1IAKrn9u3CFFIAKpgnZkd8CDgB3eTb0TRPQUYQboM3Mp4k99/Zn/5//9PoPsIaZFzzMyhvt72bfS356fb3/HuN/H+jsiwCAPno/gxMfUACy9AqpgAIQ6WxIBRSAaK0hFVAA2I4/EyOgAPDuSEQFFAD+sjeiAgoAX+yJqC9SAIAfvIqoCRQAGggoADQQUABoIKAA0EBAAaCBgAJAAwEFgAYCCgANBBQAGggoADQQUABoIKAA0EBAAaCBgAJAAwEFgAYCCgANBBQAGggoADQQUABo8DSgf97d+WIAYBUvJ1ARBYDvdh3hiigAfLb7HqiIAsCHQw8RiSgAPBx+CtfDRQBw4mMsQgpAstOfAxVSABJ1+yKFVUO64msGYLy3Z/+iZ1je3t6e/ndGSw3o338nqT+DO7xa+6N/9mevzdlf/+jXV93Me/sdbgkoAPQyS7gFFIBljYypgAJQwt0x9dtYACjh7odZBRSAUu4KqYACUNLVERVQAMq6chp9GtBZHhMGgLOuiKgJFIAIvSMqoADE6BlRAQUgSq+I/hpQ90EBqKhHRE2gAEQ6G1EBBSDWmYi+DKhjXAD4zgQKQLTWKVRAAYjXEtFdAXWMCwCfmUABYDs+he4OqCkUAD6YQAHg3ZEp9FBATaEA8GACBYC/7J1CDwfUFAoAjROoiAKQzhEuAHyx5xi3OaCmUACSnZpARRSAVKePcEUUgIpeHeN2uQcqogCk6fYQkYgCkKTrU7giCkCK7h9jEVEAqvjtPuglnwN9e3fFnw0AM7j0ixREFICqLv8mItMoABXd9lV+QgpAJUODduQXlwLACM+Gv6kmQkEFYDZLBHSEtGg7Roffpe0Je6y8b/T4+3z2///P2T8YgLpWjue2fX79vd8cxf8+0NUXB8BVqu2PvR9mjQ8oAFmOhvTZ5CqgAEQ6O5EKKADRWkMqoAB8U+3+5x5PP67y5J8LKMA7H2HhyBsHAQWAv+yNqIAC8Eni8e1Xe34GvkgBAH7wKqImUIDN/U+OE1AA/uP4dj8BBYAGAgoADQQUiOf+Jy0EFIBt29z/PEpAAaCBgAJAAwEForn/+eD49jgBBYAGAgoADQQUIJzj2zYCCsRy/5MzBBQAGggoQDDHt+0EFIjk+JazBBQglOnzHAEFgAYCCsRxfEsPAgoQyPHteQIKAA0EFIji+Nb02YuAAkADAQWABgIKxHB86/i2JwEFgAYCCkQwfZo+exNQAGggoAABTJ/9CShQnuNbriCgAMWZPq8hoADQQECB0tKPb02f1xFQAGggoEBZpk/T55UEFAAaCChQkunT9Hm1+ICmX2QAtIkPKFBP+htj0+c9BBQAGggoUIrp0/R5FwEFKEI87yWgQBnp0yf3ElCAAkyf9xNQoITk6VM8xxBQYHnJ8WQcAQVYmOlzHAEFlmb6ZBQBBViU6XMsAQWWlTx9iud4AgosKTmezEFAARZj+pyDgALLSZ4+xXMeAgoADQQUWIrpk1kIKLAM8WQmAgosQTyZjYACQAMBBaZn+mRGAgpMTTyZlYAC0xJPZiagAJMRzzUIKDCl5OmTNQgoMJ3keJo+1yGgwFTEk1UIKDAN8WQlAgpMQTxZjYACw4knKxJQgEHEc20CCgyVOn2K5/oEFBhGPFmZgAJDpMaTOv4Z/QKAPKnxNHnWIqDAbVLDSU0CCtwiOZ4mz5rcAwUuJ55UJKDApcSTqgQUuIx4Upl7oEB3yeHcNvFMYQIFuhJP8UwhoEA34imeSQQU6EI8xTONe6DAKcIpnKmiJ9D0Cx/OSr+GxDObCRQ4LD2c2yaehE+gwHHiKZ48mECBXYRTOPlMQIFfCeeDePKVI1zgKfF8EE9+YgIFvhHOB+HkNwIK/Ec4P4gnr8QG1EYBH1wPH4STvWIDCgjnV+LJEQIKgYTzM+GkhYBCCNH8mXjSKjKgNhKSWO8/E07OigwoVCeazwknvQgoFCKcvxNPehJQWJhg7iOcXCEuoDYcKrCO9xFOrhQXUFiRYB4jnNxBQGFCgtlOPLlLVEBtSszK2jxPOLlbVEBhBmLZj2gykoDChcTyOuLJaDEBtZFxJevrPsLJLGICCkeJ4jxEkxnFLEqbIaxHOJlZxOIUT1iLcLICR7jAFEST1ZRfsKZPmJdosjITKHA74aSC0ovY9AnzEE2qMYEClxFNKiu7uE2fMIZoksIECpwmmiQquehNn3A90SRduQtAPOEaggmfOcIFfiSY8LtSF4jpE9oJJhxT5oIRTzhONKGdI1wIIJTQX4mLyvQJD0IJ91n+YhNPEgkljOcIFyYlkjC3pS9Q0ycrEUSoxQQKfxE5AAAAAAAAAAAAYJf/A18t34Vtqe4uAAAAAElFTkSuQmCC") no-repeat center / contain;-webkit-mask-size:contain;mask-size:contain;}


    /* Equal-size YELLOW chevrons on the LEFT of the Quick Action form (dark
       backdrop). A bright neon pulse travels through them left -> right (toward
       the form): each chevron lights up in turn and nudges slightly forward,
       then dims — an unmistakable, continuously moving directional flow.
       Infinite loop. All chevrons are the SAME size (no scale change).
       Animates opacity/transform with fixed px (no var/calc) so it runs on
       EVERY browser, and it is only SLOWED (never stopped) under reduced-motion.
       GPU-accelerated, pointer-events disabled. */
    .qa-3d-arrows{
        position:absolute;
        right:100%;          /* fully to the LEFT of the form card */
        left:auto;
        top:50%;
        transform:translateY(-50%);
        margin-right:clamp(1.5rem,4vw,4rem);
        pointer-events:none;
        z-index:1;
    }
    .qa-neon-chevs{
        --w:60px; --g:14px; --h:92px;     /* large, equal-size chevrons */
        display:flex;
        align-items:center;
        gap:var(--g);
    }
    .qa-nchev{
        flex:0 0 auto;
        width:var(--w);
        height:var(--h);
        opacity:.3;
        will-change:opacity,transform,filter;
        animation:qaPulse 1.3s ease-in-out infinite;
    }
    .qa-nchev path{ fill:#FFE600; }
    .qa-nchev:nth-child(1){ animation-delay:0s; }
    .qa-nchev:nth-child(2){ animation-delay:.13s; }
    .qa-nchev:nth-child(3){ animation-delay:.26s; }
    .qa-nchev:nth-child(4){ animation-delay:.39s; }
    .qa-nchev:nth-child(5){ animation-delay:.52s; }
    .qa-nchev:nth-child(6){ animation-delay:.65s; }
    @keyframes qaPulse{
        0%,72%,100%{ opacity:.28; transform:translate3d(0,0,0);  filter:drop-shadow(0 0 3px rgba(255,230,0,.45)); }
        36%        { opacity:1;   transform:translate3d(9px,0,0); filter:drop-shadow(0 0 9px rgba(255,230,0,1)) drop-shadow(0 0 18px rgba(255,230,0,.65)); }
    }
    @media (max-width:1023px){
        .qa-3d-arrows{ left:50%;right:auto;margin-right:0;top:-5rem;transform:translateX(-50%); }
        .qa-neon-chevs{ --w:46px; --g:10px; --h:70px; }
    }
    @media (max-width:480px){
        .qa-neon-chevs{ --w:38px; --g:8px; --h:56px; }
    }
    @media (prefers-reduced-motion: reduce){
        .qa-nchev{ animation-duration:2.8s; }
    }

#tapx-adduser-role-panel .tx-perm-row{padding:8px;border-radius:8px;}#tapx-adduser-role-panel .tx-perm-row + .tx-perm-row{border-top:1px solid #eef2f7;}#tapx-adduser-role-panel .tx-perm-modname{font-size:12px;font-weight:800;color:#0B1020;margin-bottom:6px;}#tapx-adduser-role-panel .tx-perm-roles{display:flex;flex-wrap:wrap;gap:6px 12px;}#tapx-adduser-role-panel .tx-perm-roles label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#334155;cursor:pointer;}#tapx-adduser-role-panel .tx-perm-roles input{width:14px;height:14px;accent-color:#fbbf24;cursor:pointer;flex:none;}

/* ===== 1TapX Blog — premium navy + gold redesign ===== */
#tapx-blog-view{position:fixed;inset:0;z-index:49;background:#070b14;overflow-y:auto;display:none;-webkit-font-smoothing:antialiased;}
#tapx-blog-view.is-open{display:block;}
html:not(.dark) #tapx-blog-view{background:#f4f6fb;}
#tapx-blog-view::before{content:'';position:fixed;top:0;left:0;right:0;height:440px;background:radial-gradient(58% 100% at 50% 0%, rgba(255,215,0,.10), transparent 70%);pointer-events:none;z-index:0;}
html:not(.dark) #tapx-blog-view::before{background:radial-gradient(58% 100% at 50% 0%, rgba(255,200,0,.16), transparent 72%);}

/* topbar */
.tapx-blog-topbar{display:none;}
html:not(.dark) .tapx-blog-topbar{background:rgba(244,246,251,.85);border-bottom:1px solid rgba(15,23,42,.08);}
.tapx-blog-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:#FFD700;background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.22);cursor:pointer;padding:7px 14px;border-radius:30px;transition:background .16s,border-color .16s;}
.tapx-blog-back:hover{background:rgba(255,215,0,.16);border-color:rgba(255,215,0,.45);}
.tapx-blog-brand{font-size:14px;font-weight:900;letter-spacing:.02em;color:#e2e8f0;display:inline-flex;align-items:center;gap:10px;}
html:not(.dark) .tapx-blog-brand{color:#0f172a;}
.tapx-blog-brand-dot{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,#FFD700,#F59E0B);color:#0a0e17;font-weight:900;font-size:14px;box-shadow:0 3px 10px rgba(255,215,0,.28);}
.tapx-blog-brand em{font-style:normal;color:#FFD700;}

/* wrap */
.tapx-blog-wrap{max-width:1060px;margin:0 auto;padding:160px 24px 92px;position:relative;z-index:1;}

/* hero */
.tapx-blog-hero{text-align:center;max-width:680px;margin:0 auto 48px;}
.tapx-blog-eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#FFD700;background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.2);padding:6px 16px;border-radius:30px;margin-bottom:20px;}
.tapx-blog-h1{font-size:clamp(30px,5vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1.05;color:#fff;margin:0 0 14px;}
html:not(.dark) .tapx-blog-h1{color:#0f172a;}
.tapx-blog-sub{font-size:15.5px;color:#94a3b8;margin:0;line-height:1.6;}
html:not(.dark) .tapx-blog-sub{color:#475569;}

/* list grid */
#tapx-blog-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(max-width:720px){#tapx-blog-list{grid-template-columns:1fr;}.tapx-blog-wrap{padding:150px 18px 72px;}}

/* card */
 .tapx-blog-card{position:relative;display:flex;flex-direction:column;text-align:left;width:100%;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:26px 26px 60px;cursor:pointer;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s,background .2s;}
 .tapx-blog-card::before{content:'';position:absolute;left:24px;right:24px;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,215,0,.55),transparent);opacity:.3;transition:opacity .2s;}
 .tapx-blog-card:hover{transform:translateY(-4px);border-color:rgba(255,215,0,.4);box-shadow:0 22px 50px rgba(0,0,0,.34);background:linear-gradient(180deg,rgba(255,215,0,.055),rgba(255,255,255,.018));}
 .tapx-blog-card:hover::before{opacity:1;}
 html:not(.dark) .tapx-blog-card{background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 6px 22px rgba(15,23,42,.06);}
 html:not(.dark) .tapx-blog-card:hover{box-shadow:0 22px 50px rgba(15,23,42,.13);background:linear-gradient(180deg,#fffdf5,#fff);border-color:rgba(245,158,11,.3);}
 .tapx-blog-card h3{font-size:20px;font-weight:800;color:#fff;margin:0 0 10px;letter-spacing:-.015em;line-height:1.32;transition:color .2s;}
 html:not(.dark) .tapx-blog-card h3{color:#0f172a;}
 .tapx-blog-card:hover h3{color:#FFD700;}
 html:not(.dark) .tapx-blog-card:hover h3{color:#0f172a;}
 .tapx-blog-card p{font-size:13.5px;color:#94a3b8;margin:0;line-height:1.62;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
 html:not(.dark) .tapx-blog-card p{color:#64748b;}
 .tapx-blog-card .tapx-blog-date{font-size:10.5px;font-weight:800;color:#FFD700;text-transform:uppercase;letter-spacing:.08em;margin-top:18px;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:rgba(255,215,0,.09);border:1px solid rgba(255,215,0,.18);padding:5px 12px;border-radius:30px;}
 .tapx-blog-card .tapx-blog-date::before{content:'';width:5px;height:5px;border-radius:50%;background:#FFD700;box-shadow:0 0 6px rgba(255,215,0,.7);}
 html:not(.dark) .tapx-blog-card .tapx-blog-date{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#b45309;}
 html:not(.dark) .tapx-blog-card .tapx-blog-date::before{background:#f59e0b;box-shadow:none;}
 .tapx-blog-card::after{content:'Read article →';position:absolute;left:26px;bottom:22px;font-size:12px;font-weight:800;letter-spacing:.01em;color:#FFD700;opacity:.9;transition:transform .2s,opacity .2s;}
 .tapx-blog-card:hover::after{opacity:1;transform:translateX(4px);}
 html:not(.dark) .tapx-blog-card::after{color:#b45309;}

 /* article */
.tapx-blog-article{max-width:760px;margin:0 auto;color:#cbd5e1;line-height:1.78;font-size:17px;}
html:not(.dark) .tapx-blog-article{color:#334155;}
.tapx-blog-meta{font-size:12px;font-weight:800;color:#FFD700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;display:inline-flex;align-items:center;gap:8px;}
.tapx-blog-meta::before{content:'';width:18px;height:2px;background:#FFD700;border-radius:2px;}
.tapx-blog-article h1{font-size:clamp(28px,4.5vw,40px);font-weight:900;color:#fff;letter-spacing:-.025em;line-height:1.12;margin:0 0 20px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.1);}
html:not(.dark) .tapx-blog-article h1{color:#0f172a;border-bottom-color:rgba(15,23,42,.1);}
.tapx-blog-article h2{font-size:23px;font-weight:800;color:#fff;margin:34px 0 12px;letter-spacing:-.01em;}
html:not(.dark) .tapx-blog-article h2{color:#0f172a;}
.tapx-blog-article h3{font-size:19px;font-weight:800;color:#f1f5f9;margin:26px 0 10px;}
html:not(.dark) .tapx-blog-article h3{color:#1e293b;}
.tapx-blog-article p{margin:0 0 18px;}
.tapx-blog-article ul,.tapx-blog-article ol{margin:0 0 18px;padding-left:22px;}
.tapx-blog-article li{margin:0 0 8px;}
.tapx-blog-article a{color:#FFD700;text-decoration:underline;text-underline-offset:2px;}
.tapx-blog-article strong{color:#fff;font-weight:700;}
html:not(.dark) .tapx-blog-article strong{color:#0f172a;}
.tapx-blog-article blockquote{margin:0 0 18px;padding:14px 20px;border-left:3px solid #FFD700;background:rgba(255,215,0,.06);border-radius:0 10px 10px 0;color:#e2e8f0;}
html:not(.dark) .tapx-blog-article blockquote{color:#334155;}
.tapx-blog-article img{max-width:100%;height:auto;border-radius:14px;margin:8px 0 20px;}
.tapx-blog-article code{background:rgba(255,255,255,.08);padding:2px 7px;border-radius:6px;font-size:14px;font-family:'DM Mono',monospace;}
html:not(.dark) .tapx-blog-article code{background:rgba(15,23,42,.07);}

/* empty / loading */
.tapx-blog-empty{grid-column:1/-1;color:#94a3b8;font-size:14px;padding:54px 0;text-align:center;}
/* side "Back to Blog" button — shows ONLY while reading an article */
.tapx-blog-side-back{display:none;position:fixed;left:24px;top:150px;z-index:6;align-items:center;gap:8px;padding:10px 16px;border-radius:30px;font-size:13px;font-weight:800;color:#FFD700;background:rgba(7,11,20,.7);border:1px solid rgba(255,215,0,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:background .18s,border-color .18s,transform .18s;}
.tapx-blog-side-back:hover{background:rgba(255,215,0,.14);border-color:rgba(255,215,0,.5);transform:translateX(-2px);}
html:not(.dark) .tapx-blog-side-back{background:rgba(255,255,255,.92);color:#b45309;border-color:rgba(245,158,11,.3);box-shadow:0 6px 20px rgba(15,23,42,.1);}
#tapx-blog-view:has(#tapx-blog-list-wrap[style*="display: none"]) .tapx-blog-side-back{display:inline-flex;}
@media(max-width:900px){.tapx-blog-side-back{left:14px;top:146px;padding:8px 13px;font-size:12px;}}


/* ═══════════════════════════════════════════════════════════════════
   1TapX — HERO: NO BACKGROUND  +  RESPONSIVE LAYER  (2026)
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO: remove ALL background (transparent — no gradient/animation/overlays/shadow) ── */
#hero.hero-landing-ambient{
  background: transparent !important;
  background-image: none !important;
  animation: none !important;
  box-shadow: none !important;
}
#hero.hero-landing-ambient::before,
#hero.hero-landing-ambient::after,
html:not(.dark) #hero.hero-landing-ambient::before{
  content: none !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
  display: none !important;
}

/* ── HERO TEXT: readable on the page background (there is no dark band now) ── */
#hero.hero-landing-ambient .hero-headline-fines{ color:#0a2540 !important; text-shadow:none !important; }
html.dark #hero.hero-landing-ambient .hero-headline-fines{ color:#7DD3FC !important; }
#hero.hero-landing-ambient #hero-typewriter-line,
#hero.hero-landing-ambient #hero-typewriter-text{ color:#0a2540 !important; text-shadow:none !important; }
html.dark #hero.hero-landing-ambient #hero-typewriter-line,
html.dark #hero.hero-landing-ambient #hero-typewriter-text{ color:#eaf3ff !important; }
#hero.hero-landing-ambient .text-slate-800{ color:#1e293b !important; }
html.dark #hero.hero-landing-ambient .text-slate-800{ color:#c8d2e0 !important; }

/* ═══════════════════ RESPONSIVE LAYER ═══════════════════ */
@media (max-width:1024px){
  html, body{ overflow-x:hidden !important; max-width:100% !important; }
  #hero.hero-landing-ambient{
    margin-top:-5.5rem !important; padding-top:8.5rem !important; padding-bottom:3.25rem !important;
    padding-left:1.5rem !important; padding-right:1.5rem !important; min-height:auto !important;
    gap:2.5rem !important; margin-bottom:3.5rem !important;
  }
}
@media (max-width:640px){
  #hero.hero-landing-ambient{
    margin-top:-4rem !important; padding-top:6.5rem !important; padding-bottom:2.25rem !important;
    padding-left:1rem !important; padding-right:1rem !important; gap:1.6rem !important; margin-bottom:2.25rem !important;
  }
  #hero .hero-headline-fines{ font-size:clamp(1.85rem,8.5vw,2.6rem) !important; line-height:1.08 !important; }
  #hero #hero-typewriter-line{ font-size:clamp(1.45rem,6.5vw,2rem) !important; line-height:1.12 !important; }
}
@media (max-width:768px){
  #fines-check-free-form input,
  #fines-check-free-form select,
  #fines-check-free-form textarea,
  #fines-check-free-form .fine-phone-combo-row{ max-width:100% !important; }
}

/* ── Email field = exactly the same size as the Expiry field ── */
#fines-check-free-form #fines-free-veh-email{
  width:100% !important; max-width:100% !important; box-sizing:border-box !important;
}


/* ── "Choose Silver" (growth tier) button — keep its shadow SILVER ──────────
   This client card carries data-tapx-tier-key="gold" (legacy naming), so the
   generic [data-tapx-tier-key="gold"] button rules were bleeding a GOLD
   box-shadow onto the silver-labelled button at rest AND on hover. The button
   background/colour are already silver via its own inline styles; only the
   shadow was leaking gold. These selectors out-specify every gold rule (light
   + dark, rest + hover) and lock the shadow to silver. Shadow only — no other
   property, tier, button, or behaviour is touched. */
#sanctuary-tiers .tapx-tier-card-v2[data-sanctuary-tier="growth"][data-tapx-tier-key="gold"] button[data-tier-quote-open],
html:not(.dark) #sanctuary-tiers .tapx-tier-card-v2[data-sanctuary-tier="growth"][data-tapx-tier-key="gold"] button[data-tier-quote-open],
html.dark #sanctuary-tiers .tapx-tier-card-v2[data-sanctuary-tier="growth"][data-tapx-tier-key="gold"] button[data-tier-quote-open],
#sanctuary-tiers .tapx-tier-card-v2[data-sanctuary-tier="growth"][data-tapx-tier-key="gold"] button[data-tier-quote-open]:hover,
html:not(.dark) #sanctuary-tiers .tapx-tier-card-v2[data-sanctuary-tier="growth"][data-tapx-tier-key="gold"] button[data-tier-quote-open]:hover,
html.dark #sanctuary-tiers .tapx-tier-card-v2[data-sanctuary-tier="growth"][data-tapx-tier-key="gold"] button[data-tier-quote-open]:hover {
    box-shadow: 0 8px 22px rgba(192,192,192,0.45) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   SETTINGS ▸ SUBSCRIPTION PANEL — make the light-gray helper text default
   black for readability. Scoped strictly to the subscription tab panel so
   no other module/colour is affected. Accent colours (gold, green, the
   white-on-dark hero numbers) are left as they are. Pure colour rule —
   no markup or function changed.
   ═══════════════════════════════════════════════════════════════════════ */
.settings-tab-panel[data-tab-panel="subscription"] .text-gray-400,
.settings-tab-panel[data-tab-panel="subscription"] .text-gray-500,
.settings-tab-panel[data-tab-panel="subscription"] [class*="text-gray-4"],
.settings-tab-panel[data-tab-panel="subscription"] [class*="text-gray-5"]{
    color:#000 !important;
}
.settings-tab-panel[data-tab-panel="subscription"] #settings-toggle-autorenew,
.settings-tab-panel[data-tab-panel="subscription"] #settings-export-invoices{
    color:#000 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   CONFIGURE PLAN ▸ HIRE A PRO dropdown — make the option list open clearly
   on top (front) and keep options readable. The control is a native <select>;
   we lift it above sibling content and force readable option colours so the
   opened list never appears hidden/clipped. Scoped to this one control only —
   no function or markup changed.
   ═══════════════════════════════════════════════════════════════════════ */
#tier-quote-pro-duration{
    position: relative;
    z-index: 60;
}
#tier-quote-pro-duration:focus{
    z-index: 9999;
}
/* Readable option list across browsers (dark theme can render options dark) */
#tier-quote-pro-duration option{
    background:#0a0c10;
    color:#ffffff;
}
/* Ensure the PRO add-on section doesn't clip the opened list */
#tier-quote-pro-section{
    overflow: visible;
}


/* ═══════════════════════════════════════════════════════════════════════
   SETTINGS ▸ SUBSCRIPTION BILLS — current-bill card text contrast.
   The card was styled for a dark surface (light-gray + white text), but it
   now renders on a light panel where that text is hard to read. Make the
   light-gray helper text black, and the white values a dark "dark-white"
   slate so everything reads clearly. Scoped to the billing render area only —
   accent colours (gold amount, status badges, Pay buttons) are left as-is.
   Pure colour rule — no markup or function changed.
   ═══════════════════════════════════════════════════════════════════════ */
/* Light-gray helper text → black */
#tapx-billing-render .tapx-bill-label,
#tapx-billing-render .tapx-bill-grid > div,
#tapx-billing-render .tapx-bill-amount-sub,
#tapx-billing-render .tapx-bill-history-date,
#tapx-billing-render .tapx-bill-history-row small{
    color:#000 !important;
}
/* White text → dark white (readable dark slate) */
#tapx-billing-render .tapx-bill-month,
#tapx-billing-render .tapx-bill-grid b,
#tapx-billing-render .tapx-bill-history-row > div,
#tapx-billing-render .tapx-bill-history-amt{
    color:#1e293b !important;
}
/* Big bill amount ("800 / month") → black so it reads on the light card */
#tapx-billing-render .tapx-bill-amount,
#tapx-billing-render .tapx-bill-amount-sub{
    color:#000 !important;
}
/* Keep the inner grid panel readable behind the now-dark text */
#tapx-billing-render .tapx-bill-grid{
    background: rgba(0,0,0,0.04) !important;
}


/* Company-Setup sub-phase: hide the ENTIRE Payment section + the Next/Confirm actions
   so they appear only on the "Details & Pay" sub-step. The "Continue to Payment" button
   shows only during Company Setup. Driven by the .tapx-phase-company class on #tapx-step2,
   set by the script below. Diamond tier never gets the class (single-form, no Details&Pay). */
#tapx-step2.tapx-phase-company #tapx-paymethod-label,
#tapx-step2.tapx-phase-company #tapx-paymethod-field,
#tapx-step2.tapx-phase-company #tapx-bank-info,
#tapx-step2.tapx-phase-company #tapx-card-info,
#tapx-step2.tapx-phase-company #tapx-cheque-info,
#tapx-step2.tapx-phase-company #tapx-bitcoin-info,
#tapx-step2.tapx-phase-company #tapx-terms-row,
#tapx-step2.tapx-phase-company #tapx-s2-actions { display: none !important; }
#tapx-cs-continue-row { display: none; }
#tapx-step2.tapx-phase-company #tapx-cs-continue-row { display: flex !important; }
/* Details & Pay sub-step (non-Diamond): hide the Company Setup fields so the user lands
   on a clean Details & Pay section instead of payment appearing below the company fields.
   Non-Diamond pay phase = no .tapx-phase-company class AND the Details & Pay tab is visible.
   Diamond keeps everything (its Details & Pay tab is display:none → excluded). Back button
   returns to Company Setup (re-adds the class) and these reappear. */
#tapx-step2:not(.tapx-phase-company):has(#tapx-step-tab-pay:not([style*="display: none"])) #tapx-cs-contact-label,
#tapx-step2:not(.tapx-phase-company):has(#tapx-step-tab-pay:not([style*="display: none"])) #tapx-cs-contact-grid { display: none !important; }


#tapx-boot-loader{
  background:#ffffff !important;
  pointer-events:auto !important;
  flex-direction:column !important;
  overflow:hidden !important;
  transition:opacity .8s ease, visibility .8s ease !important;
}
html.tapx-loader-fade #tapx-boot-loader{ opacity:0 !important; }


/* ══ FIX ══════════════════════════════════════════════════════════════
   Pichhli koshish mein yahan `display:flex` (bina shart ke) daal diya tha.
   Base rule mein `display:none` hota hai jise JS (tapx-booting-dash /
   tapx-initial-loading class) ke zariye flex kiya jata hai — magar meri
   unconditional `display:flex` ne loader ko HAMESHA khula rakh diya, is
   liye page loader par atak jata tha.

   Ab `display` ko HAATH NAHI lagate — JS ko control karne dete hain.
   Sirf tri-loader ko bara aur uski animation ko yaqeeni banate hain,
   aur woh bhi TABHI jab loader waqai dikh raha ho
   (.tapx-booting-dash / .tapx-initial-loading), warna nahi.
═══════════════════════════════════════════════════════════════════════ */
/* tri-loader — admin jaisa bara, saaf 3-rang spin (display ko chhua nahi) */
#tapx-boot-loader .tapx-tri-loader{
  width:58px !important;
}
html.tapx-booting-dash #tapx-boot-loader .tapx-tri-loader,
html.tapx-initial-loading #tapx-boot-loader .tapx-tri-loader{
  animation:tapx-l3-0 1s infinite linear !important;
}
html.tapx-booting-dash #tapx-boot-loader .tapx-tri-loader::before,
html.tapx-booting-dash #tapx-boot-loader .tapx-tri-loader::after,
html.tapx-initial-loading #tapx-boot-loader .tapx-tri-loader::before,
html.tapx-initial-loading #tapx-boot-loader .tapx-tri-loader::after{
  animation:tapx-l3-1 1s infinite linear !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOADER FREEZE FIX — "bara laal dot, ghoomta nahi"

   Root cause: dashboard.html is a ~7.9 MB single file. While the browser
   parses and executes it the MAIN THREAD is blocked for seconds, and a CSS
   animation that has not been promoted to its own compositor layer is driven
   by that same blocked main thread — so the spinner stops mid-frame and looks
   like one static red dot. The partner dashboard is only ~740 KB, which is
   why its loader spins perfectly: its main thread is never blocked that long.

   Fix: promote the spinner (and its two coloured pseudo-elements) to their own
   GPU layer. Once the animation is running on the compositor it keeps turning
   smoothly even while the main thread is busy parsing the rest of the file.
   Pure CSS — no markup, no script, no app logic touched.
   ═══════════════════════════════════════════════════════════════════════════ */
.tapx-tri-loader,
.tapx-tri-loader::before,
.tapx-tri-loader::after{
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}
/* Guarantee the spin runs wherever the loader is used (splash, boot loader,
   dashboard) — earlier rules only switched it on for two <html> classes. */
#tapx-splash .tapx-tri-loader,
#tapx-boot-loader .tapx-tri-loader{
  animation: tapx-l3-0 1s infinite linear !important;
  animation-play-state: running !important;
}
#tapx-splash .tapx-tri-loader::before,
#tapx-splash .tapx-tri-loader::after,
#tapx-boot-loader .tapx-tri-loader::before,
#tapx-boot-loader .tapx-tri-loader::after{
  animation: tapx-l3-1 1s infinite linear !important;
  animation-play-state: running !important;
}