@tailwind base;
@tailwind components;
@tailwind utilities;

html.dark {
    color-scheme: dark;
}

html,
body {
    overflow-x: hidden;
}

button,
a,
input,
select,
textarea,
[role="button"],
[role="link"] {
    transition:
        color,
        background-color,
        border-color,
        box-shadow,
        transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family:
        "Lato",
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    background-color: #050505;
    /* Deep Midnight Black */
    transition: background-color 0.3s ease-in-out;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Film Grain Texture - Paint-only layer */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
}

/* 3. Scrollbar Customization */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-image: linear-gradient(
        to bottom,
        #bf953f,
        #fcf6ba,
        #b38728,
        #fbf5b7,
        #aa771c
    );
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(
        to bottom,
        #aa771c,
        #fbf5b7,
        #b38728,
        #fcf6ba,
        #bf953f
    );
}

/* Custom scrollbar for rental agreement */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #bf953f, #d4af37, #aa771c);
    border-radius: 10px;
    border: 2px solid #1a1a1a;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #d4af37, #fcf6ba, #bf953f);
}

/* Firefox scrollbar */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #d4af37 #1a1a1a;
}

/* Hide scrollbar for horizontal scroll areas */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 1. Royal Gold Gradient Utilities */
.text-gold-metallic {
    background: linear-gradient(
        to right,
        #bf953f,
        #fcf6ba,
        #b38728,
        #fbf5b7,
        #aa771c
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}

.bg-gold-metallic {
    background-image: linear-gradient(
        to right,
        #bf953f,
        #fcf6ba,
        #b38728,
        #fbf5b7,
        #aa771c
    );
}

/* ============================================
   ADMIN THEMING
   ============================================
   The `admin-*` Tailwind colours resolve to these variables, so a theme swap is
   a single `data-admin-theme` attribute on <html> — no component changes.

   Themes:
     dark      — deep indigo, gold/cyan/violet aurora (default)
     light     — warm paper, soft shadows, restrained aurora
     midnight  — near-black OLED, neon accents
     material  — Material 3 tonal surfaces, bolder fills, pill shapes

   `data-admin-density` controls spacing: comfortable | compact
*/

:root,
[data-admin-theme="dark"] {
    --admin-amber-rgb: 245 158 11;
    --admin-blue-rgb: 59 130 246;
    --admin-rose-rgb: 244 63 94;

    --admin-canvas: #0b0d17;
    --admin-surface: #121527;
    --admin-raised: #1a1e34;
    --admin-overlay: #232842;
    --admin-border: #2b3154;
    --admin-border-strong: #3b4270;
    --admin-ink: #f5f6fb;
    --admin-ink-muted: #a9b0cc;
    --admin-ink-subtle: #8991ad; /* 4.62:1 worst case — clears AA at 10-12px */
    --admin-ink-inverse: #0a0a0a;
    --admin-on-accent: #0a0a0a; /* text colour placed on top of bg-admin-accent — dark across all themes, so a gold/violet button always has black text. */
    /* Accent used as TEXT, not fill. Split from --admin-accent because a gold
       that is legible as a button body is not automatically legible as small
       text on --admin-overlay (light-theme gold on white was 2.85:1). */
    --admin-accent-fg: #d4af37;

    --admin-accent: #d4af37;
    --admin-accent-soft: rgba(212, 175, 55, 0.14);
    --admin-accent-ring: rgba(212, 175, 55, 0.45);
    --admin-aura-1: rgba(212, 175, 55, 0.20);
    --admin-aura-2: rgba(6, 182, 212, 0.18);
    --admin-aura-3: rgba(139, 92, 246, 0.18);
    --admin-aura-base: rgba(212, 175, 55, 0.10), rgba(99, 102, 241, 0.12);
    --admin-grid: rgba(148, 163, 255, 0.045);
    --admin-glass: rgba(26, 30, 52, 0.62);
    --admin-glass-strong: rgba(18, 21, 39, 0.82);
    --admin-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.6);
    --admin-shadow-lg: 0 18px 50px -18px rgba(0, 0, 0, 0.8);
    --admin-radius: 1rem;
    --admin-radius-sm: 0.75rem;

    /* Status palette — every theme defines all six so the .admin-status-bg-*
       utilities can be theme-agnostic. */
    --admin-amber-soft: rgba(245, 158, 11, 0.16);
    --admin-amber: #fbbf24;
    --admin-amber-line: rgba(245, 158, 11, 0.32);
    --admin-blue-soft: rgba(59, 130, 246, 0.16);
    --admin-blue: #60a5fa;
    --admin-blue-line: rgba(59, 130, 246, 0.32);
    --admin-cyan-soft: rgba(6, 182, 212, 0.16);
    --admin-cyan: #22d3ee;
    --admin-cyan-line: rgba(6, 182, 212, 0.32);
    --admin-emerald-soft: rgba(16, 185, 129, 0.16);
    --admin-emerald: #34d399;
    --admin-emerald-line: rgba(16, 185, 129, 0.32);
    --admin-rose-soft: rgba(244, 63, 94, 0.16);
    --admin-rose: #fb7185;
    --admin-rose-line: rgba(244, 63, 94, 0.32);
    --admin-violet-soft: rgba(139, 92, 246, 0.16);
    --admin-violet: #a78bfa;
    --admin-violet-line: rgba(139, 92, 246, 0.32);
    --admin-indigo-soft: rgba(99, 102, 241, 0.16);
    --admin-indigo: #818cf8;
    --admin-indigo-line: rgba(99, 102, 241, 0.32);
    --admin-neutral-soft: rgba(148, 163, 184, 0.14);
    --admin-neutral: var(--admin-ink-muted);
    --admin-neutral-line: var(--admin-border-strong);

    /* Form focus — what input/select focus rings resolve to. */
    --admin-input-focus: var(--admin-accent-ring);
    --admin-input-focus-bg: var(--admin-accent-soft);

    /* Charts (recharts) — kept out of the component so each theme can soften
       the analytics section. */
    --admin-chart-axis: #6b7393;
    --admin-chart-grid: #2b3154;
    --admin-chart-tooltip-bg: #121527;
    --admin-chart-tooltip-border: #3b4270;
    --admin-chart-tooltip-text: #f5f6fb;
    --admin-chart-tooltip-muted: #a9b0cc;
    --admin-chart-revenue: #d4af37;
    --admin-chart-revenue-fill: rgba(212, 175, 55, 0.45);

    /* WhatsApp brand colour is theme-stable (the brand does not change
       between themes), but we expose it as a token so future themes can
       soften it. */
    --admin-whatsapp: #25d366;
    --admin-whatsapp-soft: rgba(37, 211, 102, 0.16);
    --admin-whatsapp-line: rgba(37, 211, 102, 0.32);
}

[data-admin-theme="light"] {
    --admin-amber-rgb: 179 83 9;
    --admin-blue-rgb: 29 78 216;
    --admin-rose-rgb: 190 18 60;

    --admin-canvas: #f4f2ee;
    --admin-surface: #ffffff;
    --admin-raised: #faf9f7;
    --admin-overlay: #ffffff;
    --admin-border: #e4e0d8;
    --admin-border-strong: #cfc9bd;
    --admin-ink: #1c1b19;
    --admin-ink-muted: #56534e;
    /* 3.46:1 → 4.52:1 on white. Every theme's ink-subtle must clear 4.5:1 on
       its own lightest surface, because it carries labels and metadata. */
    --admin-ink-subtle: #716c66; /* 4.65:1 worst case — clears AA at 10-12px */
    --admin-ink-inverse: #ffffff;
    --admin-on-accent: #1c1b19;
    /* Darkened from --admin-accent (#b48a1f = 2.85:1 on white) to clear 4.5:1
       as TEXT. The fill stays #b48a1f, which carries dark text on top. */
    --admin-accent-fg: #896818;

    --admin-accent: #b48a1f;
    --admin-accent-soft: rgba(180, 138, 31, 0.12);
    --admin-accent-ring: rgba(180, 138, 31, 0.45);
    --admin-aura-1: rgba(212, 175, 55, 0.16);
    --admin-aura-2: rgba(6, 182, 212, 0.12);
    --admin-aura-3: rgba(139, 92, 246, 0.12);
    --admin-aura-base: rgba(212, 175, 55, 0.14), rgba(99, 102, 241, 0.10);
    --admin-grid: rgba(90, 80, 60, 0.05);
    --admin-glass: rgba(255, 255, 255, 0.78);
    --admin-glass-strong: rgba(255, 255, 255, 0.92);
    --admin-shadow: 0 2px 10px -4px rgba(90, 80, 60, 0.18);
    --admin-shadow-lg: 0 16px 40px -16px rgba(90, 80, 60, 0.26);
    --admin-radius: 0.875rem;
    --admin-radius-sm: 0.625rem;

    /* Warm Paper — softer, less saturated status washes so the dashboard
       reads as paper, not as a recoloured dark theme. */
    --admin-amber-soft: rgba(217, 119, 6, 0.10);
    --admin-amber: #b35309;
    --admin-amber-line: rgba(217, 119, 6, 0.28);
    --admin-blue-soft: rgba(37, 99, 235, 0.08);
    --admin-blue: #1d4ed8;
    --admin-blue-line: rgba(37, 99, 235, 0.24);
    --admin-cyan-soft: rgba(14, 116, 144, 0.10);
    --admin-cyan: #0e7490;
    --admin-cyan-line: rgba(14, 116, 144, 0.24);
    --admin-emerald-soft: rgba(5, 150, 105, 0.10);
    --admin-emerald: #047857;
    --admin-emerald-line: rgba(5, 150, 105, 0.24);
    --admin-rose-soft: rgba(190, 18, 60, 0.08);
    --admin-rose: #be123c;
    --admin-rose-line: rgba(190, 18, 60, 0.24);
    --admin-indigo-soft: rgba(79, 70, 229, 0.10);
    --admin-indigo: #4f46e5;
    --admin-indigo-line: rgba(79, 70, 229, 0.24);
    --admin-neutral-soft: rgba(120, 113, 108, 0.12);
    --admin-neutral: var(--admin-ink-muted);
    --admin-neutral-line: var(--admin-border-strong);
    --admin-violet-soft: rgba(109, 40, 217, 0.10);
    --admin-violet: #6d28d9;
    --admin-violet-line: rgba(109, 40, 217, 0.24);

    --admin-input-focus: rgba(180, 138, 31, 0.45);
    --admin-input-focus-bg: rgba(180, 138, 31, 0.10);

    --admin-chart-axis: #86817a;
    --admin-chart-grid: #e4e0d8;
    --admin-chart-tooltip-bg: #ffffff;
    --admin-chart-tooltip-border: #cfc9bd;
    --admin-chart-tooltip-text: #1c1b19;
    --admin-chart-tooltip-muted: #56534e;
    --admin-chart-revenue: #b48a1f;
    --admin-chart-revenue-fill: rgba(180, 138, 31, 0.32);

    --admin-whatsapp: #1f9d50;
    --admin-whatsapp-soft: rgba(31, 157, 80, 0.10);
    --admin-whatsapp-line: rgba(31, 157, 80, 0.28);
}

[data-admin-theme="midnight"] {
    --admin-amber-rgb: 245 158 11;
    --admin-blue-rgb: 59 130 246;
    --admin-rose-rgb: 244 63 94;

    --admin-canvas: #05060a;
    --admin-surface: #0a0c14;
    --admin-raised: #11141f;
    --admin-overlay: #171b28;
    --admin-border: #1e2333;
    --admin-border-strong: #2c3348;
    --admin-ink: #f0f4ff;
    --admin-ink-muted: #96a0bd;
    /* 3.29:1 → 4.55:1 on --admin-overlay. */
    --admin-ink-subtle: #7a84a0; /* 4.60:1 worst case — clears AA at 10-12px */
    --admin-ink-inverse: #000000;
    --admin-on-accent: #000000;
    --admin-accent-fg: #22d3ee;

    --admin-accent: #22d3ee;
    --admin-accent-soft: rgba(34, 211, 238, 0.14);
    --admin-accent-ring: rgba(34, 211, 238, 0.45);
    --admin-aura-1: rgba(34, 211, 238, 0.22);
    --admin-aura-2: rgba(168, 85, 247, 0.20);
    --admin-aura-3: rgba(236, 72, 153, 0.16);
    --admin-aura-base: rgba(34, 211, 238, 0.10), rgba(168, 85, 247, 0.12);
    --admin-grid: rgba(34, 211, 238, 0.05);
    --admin-glass: rgba(17, 20, 31, 0.66);
    --admin-glass-strong: rgba(10, 12, 20, 0.86);
    --admin-shadow: 0 4px 26px -8px rgba(0, 0, 0, 0.9);
    --admin-shadow-lg: 0 20px 60px -20px rgba(0, 0, 0, 0.95);
    --admin-radius: 0.75rem;
    --admin-radius-sm: 0.5rem;

    /* Midnight — neon-tinted, saturated. Reads as "OLED cockpit", not dark. */
    --admin-amber-soft: rgba(251, 191, 36, 0.16);
    --admin-amber: #fbbf24;
    --admin-amber-line: rgba(251, 191, 36, 0.36);
    --admin-blue-soft: rgba(96, 165, 250, 0.18);
    --admin-blue: #60a5fa;
    --admin-blue-line: rgba(96, 165, 250, 0.36);
    --admin-cyan-soft: rgba(34, 211, 238, 0.20);
    --admin-cyan: #22d3ee;
    --admin-cyan-line: rgba(34, 211, 238, 0.40);
    --admin-emerald-soft: rgba(52, 211, 153, 0.18);
    --admin-emerald: #34d399;
    --admin-emerald-line: rgba(52, 211, 153, 0.36);
    --admin-rose-soft: rgba(251, 113, 133, 0.18);
    --admin-rose: #fb7185;
    --admin-rose-line: rgba(251, 113, 133, 0.36);
    --admin-violet-soft: rgba(167, 139, 250, 0.20);
    --admin-indigo-soft: rgba(99, 102, 241, 0.20);
    --admin-indigo: #818cf8;
    --admin-indigo-line: rgba(99, 102, 241, 0.40);
    --admin-neutral-soft: rgba(148, 163, 184, 0.14);
    --admin-neutral: var(--admin-ink-muted);
    --admin-neutral-line: var(--admin-border-strong);
    --admin-violet: #a78bfa;
    --admin-violet-line: rgba(167, 139, 250, 0.40);

    --admin-input-focus: rgba(34, 211, 238, 0.45);
    --admin-input-focus-bg: rgba(34, 211, 238, 0.14);

    --admin-chart-axis: #626c8a;
    --admin-chart-grid: #1e2333;
    --admin-chart-tooltip-bg: #0a0c14;
    --admin-chart-tooltip-border: #2c3348;
    --admin-chart-tooltip-text: #f0f4ff;
    --admin-chart-tooltip-muted: #96a0bd;
    --admin-chart-revenue: #22d3ee;
    --admin-chart-revenue-fill: rgba(34, 211, 238, 0.45);

    --admin-whatsapp: #25d366;
    --admin-whatsapp-soft: rgba(37, 211, 102, 0.18);
    --admin-whatsapp-line: rgba(37, 211, 102, 0.36);
}

[data-admin-theme="material"] {
    --admin-amber-rgb: 105 77 0;
    --admin-blue-rgb: 46 97 213;
    --admin-rose-rgb: 196 27 94;

    --admin-canvas: #fef7ff;
    --admin-canvas-alt: #f3eefa;
    --admin-surface: #ffffff;
    --admin-raised: #f6f2fa;
    --admin-overlay: #ece6f4;
    --admin-border: #e6def0;
    --admin-border-strong: #d3c7e2;
    --admin-ink: #1d1b20;
    --admin-ink-muted: #49454f;
    --admin-ink-subtle: #6a656e; /* 4.65:1 worst case — clears AA at 10-12px */
    --admin-ink-inverse: #ffffff;
    --admin-on-accent: #ffffff;
    --admin-accent-fg: #6750a4;

    --admin-accent: #6750a4;
    --admin-accent-soft: rgba(103, 80, 164, 0.12);
    --admin-accent-ring: rgba(103, 80, 164, 0.4);
    --admin-aura-1: rgba(103, 80, 164, 0.18);
    --admin-aura-2: rgba(0, 105, 92, 0.16);
    --admin-aura-3: rgba(196, 27, 94, 0.12);
    --admin-aura-base: rgba(103, 80, 164, 0.12), rgba(0, 105, 92, 0.10);
    --admin-grid: rgba(103, 80, 164, 0.05);
    --admin-glass: rgba(255, 255, 255, 0.82);
    --admin-glass-strong: rgba(246, 242, 250, 0.94);
    --admin-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 4px 12px -4px rgba(0, 0, 0, 0.1);
    --admin-shadow-lg: 0 8px 28px -6px rgba(0, 0, 0, 0.2);
    --admin-radius: 1.375rem;
    --admin-radius-sm: 1rem;

    /* Material — tonal, muted, matching M3 expressive surfaces.
       amber/blue/emerald were darkened to clear 4.5:1 on this theme's own
       surfaces (#fef7ff / #f6f2fa / #ece6f4); at their original values they
       sat at 2.60 / 4.12 / 3.95:1 on --admin-overlay. */
    --admin-amber-soft: rgba(196, 158, 0, 0.14);
    --admin-amber: #846400;
    --admin-amber-line: rgba(196, 158, 0, 0.32);
    --admin-blue-soft: rgba(56, 105, 215, 0.12);
    --admin-blue: #2e61d5;
    --admin-blue-line: rgba(56, 105, 215, 0.28);
    --admin-cyan-soft: rgba(0, 105, 92, 0.14);
    --admin-cyan: #00695c;
    --admin-cyan-line: rgba(0, 105, 92, 0.30);
    --admin-emerald-soft: rgba(0, 130, 92, 0.14);
    --admin-emerald: #007855;
    --admin-emerald-line: rgba(0, 130, 92, 0.30);
    --admin-rose-soft: rgba(196, 27, 94, 0.12);
    --admin-rose: #c41b5e;
    --admin-rose-line: rgba(196, 27, 94, 0.28);
    --admin-violet-soft: rgba(103, 80, 164, 0.14);
    --admin-violet: #6750a4;
    --admin-indigo-soft: rgba(79, 70, 229, 0.14);
    --admin-indigo: #4f46e5;
    --admin-indigo-line: rgba(79, 70, 229, 0.30);
    --admin-neutral-soft: rgba(103, 96, 128, 0.14);
    --admin-neutral: var(--admin-ink-muted);
    --admin-neutral-line: var(--admin-border-strong);
    --admin-violet-line: rgba(103, 80, 164, 0.30);

    --admin-input-focus: rgba(103, 80, 164, 0.4);
    --admin-input-focus-bg: rgba(103, 80, 164, 0.12);

    --admin-chart-axis: #79747e;
    --admin-chart-grid: #e6def0;
    --admin-chart-tooltip-bg: #ffffff;
    --admin-chart-tooltip-border: #d3c7e2;
    --admin-chart-tooltip-text: #1d1b20;
    --admin-chart-tooltip-muted: #49454f;
    --admin-chart-revenue: #6750a4;
    --admin-chart-revenue-fill: rgba(103, 80, 164, 0.30);

    --admin-whatsapp: #1f9d50;
    --admin-whatsapp-soft: rgba(31, 157, 80, 0.12);
    --admin-whatsapp-line: rgba(31, 157, 80, 0.30);
}

/* =============================================================================
   STATUS PILL UTILITIES
   Theme-aware status pills. Each one combines the soft background, the line
   border, and a readable ink colour. The mapping is intentionally theme-blind:
   components apply the same `admin-status-bg-pending` regardless of theme and
   each theme defines what those variables resolve to.
   ============================================================================= */
.admin-status-bg-pending {
    background-color: var(--admin-amber-soft);
    border-color: var(--admin-amber-line);
    color: var(--admin-amber);
}
.admin-status-bg-confirmed {
    background-color: var(--admin-emerald-soft);
    border-color: var(--admin-emerald-line);
    color: var(--admin-emerald);
}
.admin-status-bg-completed {
    background-color: var(--admin-violet-soft);
    border-color: var(--admin-violet-line);
    color: var(--admin-violet);
}
.admin-status-bg-cancelled {
    background-color: var(--admin-rose-soft);
    border-color: var(--admin-rose-line);
    color: var(--admin-rose);
}
.admin-status-bg-communicating {
    background-color: var(--admin-blue-soft);
    border-color: var(--admin-blue-line);
    color: var(--admin-blue);
}
/* Estimate-specific accents */
.admin-status-bg-draft {
    background-color: var(--admin-overlay);
    border-color: var(--admin-border-strong);
    color: var(--admin-ink);
}
.admin-status-bg-sent {
    background-color: var(--admin-blue-soft);
    border-color: var(--admin-blue-line);
    color: var(--admin-blue);
}
.admin-status-bg-viewed {
    background-color: var(--admin-cyan-soft);
    border-color: var(--admin-cyan-line);
    color: var(--admin-cyan);
}
.admin-status-bg-accepted {
    background-color: var(--admin-emerald-soft);
    border-color: var(--admin-emerald-line);
    color: var(--admin-emerald);
}
.admin-status-bg-rejected {
    background-color: var(--admin-rose-soft);
    border-color: var(--admin-rose-line);
    color: var(--admin-rose);
}
.admin-status-bg-expired {
    background-color: var(--admin-amber-soft);
    border-color: var(--admin-amber-line);
    color: var(--admin-amber);
}
.admin-status-bg-converted {
    background-color: var(--admin-violet-soft);
    border-color: var(--admin-violet-line);
    color: var(--admin-violet);
}
/* Enquiry-specific accents */
.admin-status-bg-new {
    background-color: var(--admin-cyan-soft);
    border-color: var(--admin-cyan-line);
    color: var(--admin-cyan);
}
.admin-status-bg-contacted {
    background-color: var(--admin-blue-soft);
    border-color: var(--admin-blue-line);
    color: var(--admin-blue);
}
.admin-status-bg-quoted {
    background-color: var(--admin-violet-soft);
    border-color: var(--admin-violet-line);
    color: var(--admin-violet);
}
.admin-status-bg-archived {
    background-color: var(--admin-overlay);
    border-color: var(--admin-border-strong);
    color: var(--admin-ink-muted);
}
/* Vehicle/Package-specific */
.admin-status-bg-active {
    background-color: var(--admin-emerald-soft);
    border-color: var(--admin-emerald-line);
    color: var(--admin-emerald);
}
.admin-status-bg-paused {
    background-color: var(--admin-overlay);
    border-color: var(--admin-border-strong);
    color: var(--admin-ink-muted);
}

/* Form focus — universal, theme-aware. Use this class on any input/select/
   textarea that wants the dashboard's primary focus ring. */
.admin-focus {
    outline: none;
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 3px var(--admin-input-focus-bg);
}

/* WhatsApp brand surfaces — used by enquiries list, message card, and the
   quick-reply button. Same on every theme. */
.admin-bg-whatsapp {
    background-color: var(--admin-whatsapp-soft);
    color: var(--admin-whatsapp);
    border-color: var(--admin-whatsapp-line);
}
.admin-bg-whatsapp:hover {
    background-color: rgba(37, 211, 102, 0.24);
    background-color: color-mix(in srgb, var(--admin-whatsapp) 24%, transparent);
}

/* Density ------------------------------------------------------------- */
/* Consumed by .admin-density-list / .admin-density-viewer in SplitView, so the
   compact option genuinely tightens row spacing and pane padding rather than
   only setting unused variables. */
[data-admin-density="compact"] {
    --admin-density-gap: 0.375rem;
    --admin-density-pad: 0.75rem;
}

.admin-density-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/*
 * CRITICAL: rows must not shrink.
 *
 * These are flex items in a column, and flex items default to
 * `flex-shrink: 1`. With a bounded height (the pane scrolls internally), a
 * shrinkable row is squeezed to fit the visible box instead of overflowing
 * and scrolling — so cards silently collapse, and the selected card collapses
 * most visibly because `.accent-card` sets `overflow: hidden`, which clips its
 * content once the box is compressed.
 *
 * `flex-shrink: 0` restores natural card height; overflow is then absorbed by
 * the pane's scrollbar, which is the intended behaviour.
 */
.admin-density-list > * {
    flex-shrink: 0;
}

.admin-density-viewer {
    padding: 1.5rem;
}

[data-admin-density="compact"] .admin-density-list {
    gap: var(--admin-density-gap);
}

[data-admin-density="compact"] .admin-density-viewer {
    padding: var(--admin-density-pad);
}

/* 4. Glassmorphism 2.0 */
.glass-panel {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    background-color: rgba(5, 5, 5, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
       ADMIN GLASS SURFACES + ACCENT CARDS
       ============================================ */

/* Translucent variant of bg-admin-raised so the aurora backdrop shows through
   panel surfaces. Keeps the same hue as the token it replaces, so existing
   markup stays token-driven rather than hardcoding rgba() per component. */
.admin-glass {
    background-color: var(--admin-glass);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-color: var(--admin-border);
}

.admin-glass-strong {
    background-color: var(--admin-glass-strong);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-color: var(--admin-border);
}

/* Elevated card surface used by the split-view rows. */
.admin-card {
    background-color: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    box-shadow: var(--admin-shadow);
}

/* Recessed surface for inputs, textareas and note blocks inside the admin.
   On dark themes this reads as "inset"; on light themes it still separates
   from the card without the unreadable black-on-black of a raw bg-black/40. */
.admin-input {
    background-color: var(--admin-raised);
    border: 1px solid var(--admin-border);
    color: var(--admin-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-input::placeholder {
    color: var(--admin-ink-subtle);
}

.admin-input:focus {
    outline: none;
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 3px var(--admin-input-focus-bg);
}

/* Universal form focus — for inputs that already have a different base
   surface (e.g. bg-admin-overlay). */
.admin-focus-ring:focus {
    outline: none;
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 3px var(--admin-input-focus-bg);
}

/* ------------------------------------------------------------------
   OPACITY MODIFIERS ON ADMIN TOKENS
   Tailwind 3 cannot apply an `/opacity` suffix to a colour declared as a bare
   `var()` — `bg-admin-surface/95` compiles to a rule whose value is literally
   `rgb(var(--admin-surface) / 95%)`, which is invalid, so the declaration is
   dropped and the class silently does nothing. The same applies to
   `border-admin-accent/50` and every other `/n` variant.

   Rather than hand-replacing each call site with a literal rgba(), the tokens
   are re-declared in RGB channel form so Tailwind's opacity modifier works
   normally. `--admin-<name>-rgb` holds space-separated channels; the base
   `--admin-<name>` stays a full colour for plain `bg-admin-<name>`.
   ------------------------------------------------------------------ */
:root,
[data-admin-theme] {
    --admin-canvas-rgb: 11 13 23;
    --admin-surface-rgb: 18 21 39;
    --admin-raised-rgb: 26 30 52;
    --admin-overlay-rgb: 35 40 66;
    --admin-ink-rgb: 245 246 251;
    --admin-ink-inverse-rgb: 10 10 10;
    --admin-accent-rgb: 212 175 55;
    --admin-border-rgb: 43 49 84;
}

[data-admin-theme="light"] {
    --admin-canvas-rgb: 244 242 238;
    --admin-surface-rgb: 255 255 255;
    --admin-raised-rgb: 250 249 247;
    --admin-overlay-rgb: 255 255 255;
    --admin-ink-rgb: 28 27 25;
    --admin-ink-inverse-rgb: 255 255 255;
    --admin-accent-rgb: 180 138 31;
    --admin-border-rgb: 228 224 216;
}

[data-admin-theme="midnight"] {
    --admin-canvas-rgb: 5 6 10;
    --admin-surface-rgb: 10 12 20;
    --admin-raised-rgb: 17 20 31;
    --admin-overlay-rgb: 23 27 40;
    --admin-ink-rgb: 240 244 255;
    --admin-ink-inverse-rgb: 0 0 0;
    --admin-accent-rgb: 34 211 238;
    --admin-border-rgb: 30 35 51;
}

[data-admin-theme="material"] {
    --admin-canvas-rgb: 254 247 255;
    --admin-surface-rgb: 255 255 255;
    --admin-raised-rgb: 246 242 250;
    --admin-overlay-rgb: 236 230 244;
    --admin-ink-rgb: 29 27 32;
    --admin-ink-inverse-rgb: 255 255 255;
    --admin-accent-rgb: 103 80 164;
    --admin-border-rgb: 230 222 240;
}

.bg-admin-canvas\/80 { background-color: rgb(var(--admin-canvas-rgb) / 0.8); }
.bg-admin-surface\/95 { background-color: rgb(var(--admin-surface-rgb) / 0.95); }
.bg-admin-surface\/50 { background-color: rgb(var(--admin-surface-rgb) / 0.5); }
.bg-admin-raised\/40 { background-color: rgb(var(--admin-raised-rgb) / 0.4); }
.bg-admin-overlay\/50 { background-color: rgb(var(--admin-overlay-rgb) / 0.5); }
.bg-admin-ink-inverse\/50 { background-color: rgb(var(--admin-ink-inverse-rgb) / 0.5); }
.border-admin-accent\/50 { border-color: rgb(var(--admin-accent-rgb) / 0.5); }

/* Status washes are already alpha-carrying rgba() values, so `/n` on them is
   still a compile no-op. Re-expose the solid channels for the few call sites
   that fade a status fill (the status <select> in the booking cards). */
.bg-admin-status-communicating\/80 { background-color: rgb(var(--admin-blue-rgb) / 0.2); }
.bg-admin-status-cancelled\/80 { background-color: rgb(var(--admin-rose-rgb) / 0.2); }
.bg-admin-status-pending\/80 { background-color: rgb(var(--admin-amber-rgb) / 0.2); }
.ring-admin-status-cancelled\/30 { --tw-ring-color: rgb(var(--admin-rose-rgb) / 0.3); }
.ring-admin-status-expired\/30 { --tw-ring-color: rgb(var(--admin-amber-rgb) / 0.3); }
.ring-admin-status-communicating\/30 { --tw-ring-color: rgb(var(--admin-blue-rgb) / 0.3); }

/* Safe area: keep important content above the iOS home indicator / Android
   gesture bar. Apply on full-bleed modals and mobile sheets. */
.safe-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Per-accent card tint. Each card gets a faint hue wash plus a matching glow,
   so a screen of KPI tiles reads as colourful rather than a wall of grey.
   Opacities are deliberately low — this is tint, not fill. */
.accent-card {
    position: relative;
    overflow: hidden;
    /*
     * `isolation: isolate` creates a stacking context so the tint layer can be
     * pushed behind the content with `z-index: -1`. Without it the absolutely
     * positioned `::before` paints above the in-flow text, so the tinted
     * (selected) card washes out its own content while untinted cards do not.
     */
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.34, 1.3, 0.64, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.accent-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.accent-card:hover {
    transform: translateY(-3px);
}

.accent-card:hover::before {
    opacity: 1;
}

/* Coloured sheen that sweeps across a card on hover. */
.accent-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.07) 50%,
        transparent 100%
    );
    transform: translateX(-120%) skewX(-18deg);
}

/* Coloured sheen that sweeps across a card on hover.
   The keyframes are declared locally rather than in tailwind.config.js
   because Tailwind only emits configured keyframes when the matching
   `animate-*` utility is used, and this is triggered by a `hover::after`
   pseudo-element instead. Declaring them here keeps them in the bundle. */
@keyframes sheen-sweep {
    0% {
        transform: translateX(-120%) skewX(-18deg);
    }

    100% {
        transform: translateX(320%) skewX(-18deg);
    }
}

.accent-card:hover::after {
    animation: sheen-sweep 1.1s ease-out;
}

.accent-gold {
    background: linear-gradient(
        145deg,
        rgba(212, 175, 55, 0.14) 0%,
        rgba(212, 175, 55, 0.03) 55%,
        var(--admin-surface) 100%
    );
}

.accent-gold::before {
    background: radial-gradient(
        circle at 88% -10%,
        rgba(212, 175, 55, 0.22),
        transparent 60%
    );
}

.accent-cyan {
    background: linear-gradient(
        145deg,
        rgba(6, 182, 212, 0.14) 0%,
        rgba(6, 182, 212, 0.03) 55%,
        var(--admin-surface) 100%
    );
}

.accent-cyan::before {
    background: radial-gradient(
        circle at 88% -10%,
        rgba(6, 182, 212, 0.22),
        transparent 60%
    );
}

.accent-emerald {
    background: linear-gradient(
        145deg,
        rgba(16, 185, 129, 0.14) 0%,
        rgba(16, 185, 129, 0.03) 55%,
        var(--admin-surface) 100%
    );
}

.accent-emerald::before {
    background: radial-gradient(
        circle at 88% -10%,
        rgba(16, 185, 129, 0.22),
        transparent 60%
    );
}

.accent-violet {
    background: linear-gradient(
        145deg,
        rgba(139, 92, 246, 0.15) 0%,
        rgba(139, 92, 246, 0.03) 55%,
        var(--admin-surface) 100%
    );
}

.accent-violet::before {
    background: radial-gradient(
        circle at 88% -10%,
        rgba(139, 92, 246, 0.24),
        transparent 60%
    );
}

.accent-amber {
    background: linear-gradient(
        145deg,
        rgba(245, 158, 11, 0.14) 0%,
        rgba(245, 158, 11, 0.03) 55%,
        var(--admin-surface) 100%
    );
}

.accent-amber::before {
    background: radial-gradient(
        circle at 88% -10%,
        rgba(245, 158, 11, 0.22),
        transparent 60%
    );
}

.accent-rose {
    background: linear-gradient(
        145deg,
        rgba(244, 63, 94, 0.14) 0%,
        rgba(244, 63, 94, 0.03) 55%,
        var(--admin-surface) 100%
    );
}

.accent-rose::before {
    background: radial-gradient(
        circle at 88% -10%,
        rgba(244, 63, 94, 0.22),
        transparent 60%
    );
}

.accent-blue {
    background: linear-gradient(
        145deg,
        rgba(59, 130, 246, 0.14) 0%,
        rgba(59, 130, 246, 0.03) 55%,
        var(--admin-surface) 100%
    );
}

.accent-blue::before {
    background: radial-gradient(
        circle at 88% -10%,
        rgba(59, 130, 246, 0.22),
        transparent 60%
    );
}

.accent-indigo {
    background: linear-gradient(
        145deg,
        rgba(99, 102, 241, 0.15) 0%,
        rgba(99, 102, 241, 0.03) 55%,
        var(--admin-surface) 100%
    );
}

.accent-indigo::before {
    background: radial-gradient(
        circle at 88% -10%,
        rgba(99, 102, 241, 0.24),
        transparent 60%
    );
}

.accent-neutral {
    background: linear-gradient(
        145deg,
        rgba(148, 163, 184, 0.08) 0%,
        rgba(148, 163, 184, 0.02) 55%,
        var(--admin-surface) 100%
    );
}

.accent-neutral::before {
    background: radial-gradient(
        circle at 88% -10%,
        rgba(148, 163, 184, 0.12),
        transparent 60%
    );
}

/* Soft coloured ring matching the card tint, for selected/active states. */
.accent-ring-gold {
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.45),
        0 10px 30px -12px rgba(212, 175, 55, 0.35);
}

.accent-ring-cyan {
    box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.45),
        0 10px 30px -12px rgba(6, 182, 212, 0.35);
}

.accent-ring-emerald {
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.45),
        0 10px 30px -12px rgba(16, 185, 129, 0.35);
}

.accent-ring-violet {
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.45),
        0 10px 30px -12px rgba(139, 92, 246, 0.35);
}

.accent-ring-amber {
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.45),
        0 10px 30px -12px rgba(245, 158, 11, 0.35);
}

.accent-ring-rose {
    box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.45),
        0 10px 30px -12px rgba(244, 63, 94, 0.35);
}

.accent-ring-blue {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.45),
        0 10px 30px -12px rgba(59, 130, 246, 0.35);
}

.accent-ring-indigo {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.45),
        0 10px 30px -12px rgba(99, 102, 241, 0.35);
}

.accent-ring-neutral {
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4),
        0 10px 30px -12px rgba(148, 163, 184, 0.25);
}

/* Live/attention dot used on unread badges and pipeline counters. */
.admin-live-dot {
    position: relative;
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: currentColor;
}

.admin-live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: currentColor;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    70%,
    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}


/* Global text shadow utility classes */
.text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.text-shadow-lg {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

/* Animation for incoming chatbot messages */
@keyframes message-in {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-message-in {
    animation: message-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* CSS-only Fade In Up for LCP Optimization */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* --- Hero: keep the headline + CTAs inside the fold on short viewports ---
   The hero stacks ~550px of content. On laptops with a short window height
   (e.g. 1366x600 with browser chrome) a fixed 72px headline overflows and
   pushes the CTA buttons below the fold. Scale the type and rhythm with the
   viewport height so the primary actions stay visible without scrolling. */
.hero-title {
    font-size: clamp(1.875rem, min(4.6vw, 9vh), 4.5rem);
    line-height: 1.12;
}

.hero-lede {
    font-size: clamp(0.875rem, min(1.15vw, 2.1vh), 1.125rem);
}

@media (max-height: 700px) {
    .hero-title { font-size: clamp(1.75rem, 5.4vh, 2.75rem); }
    .hero-lede { font-size: 0.875rem; }
    .hero-badge { margin-bottom: 0.75rem; }
    .hero-title, .hero-lede { margin-bottom: 0.75rem; }
    .hero-actions { margin-top: 0.25rem; }
}

/* --- Hero Slider --- */
@keyframes hero-kenburns {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.08); }
}

.hero-slide-active img {
    animation: hero-kenburns 8s ease-out forwards;
}

@keyframes hero-fade-in {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-text-animate {
    animation: hero-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.hero-progress-bar {
    transform-origin: left;
    animation: slide-progress 6.5s linear forwards;
}

.hero-features {
    animation: hero-text-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide-active img { animation: none; transform: scale(1.02); }
    .hero-text-animate > * { animation: none; opacity: 1; }
    .hero-features { animation: none; opacity: 1; }
    .hero-progress-bar { animation: none; }
}

/* Animation for modals */
@keyframes modal-scale-in {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-modal-scale-in {
    animation: modal-scale-in 0.2s ease-out forwards;
}

/* Animation for button feedback */
@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    70% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.animate-pop-in {
    animation: pop-in 0.3s ease-out forwards;
}

/* Gold Breath Animation for Dark Mode Logo */
@keyframes gold-breath {
    0% {
        filter: drop-shadow(0 0 2px rgba(234, 179, 8, 0.5));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.9));
        transform: scale(1.05);
    }

    100% {
        filter: drop-shadow(0 0 2px rgba(234, 179, 8, 0.5));
        transform: scale(1);
    }
}

.animate-gold-breath {
    animation: gold-breath 3s ease-in-out infinite;
}

/* ============================================
       ADMIN DASHBOARD VIBRANT COLOR UTILITIES
       ============================================ */

/* Glow Effects for Cards */
.glow-cyan {
    box-shadow:
        0 0 20px rgba(6, 182, 212, 0.15),
        0 0 40px rgba(6, 182, 212, 0.05);
}

.glow-emerald {
    box-shadow:
        0 0 20px rgba(16, 185, 129, 0.15),
        0 0 40px rgba(16, 185, 129, 0.05);
}

.glow-amber {
    box-shadow:
        0 0 20px rgba(245, 158, 11, 0.15),
        0 0 40px rgba(245, 158, 11, 0.05);
}

.glow-violet {
    box-shadow:
        0 0 20px rgba(139, 92, 246, 0.15),
        0 0 40px rgba(139, 92, 246, 0.05);
}

.glow-rose {
    box-shadow:
        0 0 20px rgba(244, 63, 94, 0.15),
        0 0 40px rgba(244, 63, 94, 0.05);
}

.glow-blue {
    box-shadow:
        0 0 20px rgba(59, 130, 246, 0.15),
        0 0 40px rgba(59, 130, 246, 0.05);
}

.glow-gold {
    box-shadow:
        0 0 20px rgba(251, 191, 36, 0.2),
        0 0 40px rgba(251, 191, 36, 0.08);
}

/* Gradient Backgrounds for Cards */
.bg-gradient-cyan {
    background: linear-gradient(
        135deg,
        rgba(6, 182, 212, 0.08) 0%,
        rgba(6, 182, 212, 0.02) 100%
    );
}

.bg-gradient-emerald {
    background: linear-gradient(
        135deg,
        rgba(16, 185, 129, 0.08) 0%,
        rgba(16, 185, 129, 0.02) 100%
    );
}

.bg-gradient-amber {
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.08) 0%,
        rgba(245, 158, 11, 0.02) 100%
    );
}

.bg-gradient-violet {
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.08) 0%,
        rgba(139, 92, 246, 0.02) 100%
    );
}

.bg-gradient-rose {
    background: linear-gradient(
        135deg,
        rgba(244, 63, 94, 0.08) 0%,
        rgba(244, 63, 94, 0.02) 100%
    );
}

.bg-gradient-blue {
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(59, 130, 246, 0.02) 100%
    );
}

/* Accent Border Left */
.border-l-accent-cyan {
    border-left: 3px solid #06b6d4;
}

.border-l-accent-emerald {
    border-left: 3px solid #10b981;
}

.border-l-accent-amber {
    border-left: 3px solid #f59e0b;
}

.border-l-accent-violet {
    border-left: 3px solid #8b5cf6;
}

.border-l-accent-rose {
    border-left: 3px solid #f43f5e;
}

.border-l-accent-blue {
    border-left: 3px solid #3b82f6;
}

/* Pulsing Dot for Unread Indicators */
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

.animate-pulse-dot {
    animation: pulse-dot 2s ease-in-out infinite;
}

/* Shimmer Effect for Prices */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.text-shimmer {
    background: linear-gradient(90deg, #fbbf24 0%, #fde68a 50%, #fbbf24 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

/* Hover lift effect */
.hover-lift {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

@keyframes buttonGlow {
    0%,
    100% {
        box-shadow:
            0 0 10px rgba(212, 175, 55, 0.2),
            0 0 20px rgba(212, 175, 55, 0.1);
    }

    50% {
        box-shadow:
            0 0 25px rgba(212, 175, 55, 0.5),
            0 0 40px rgba(212, 175, 55, 0.3);
    }
}

.animate-button-glow:hover {
    animation: buttonGlow 2s ease-in-out infinite;
}

@keyframes buttonPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.animate-button-pulse {
    animation: buttonPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Golden Running Edge Animation for Fleet Buttons */
@keyframes gold-border-pulse {
    0%,
    100% {
        box-shadow:
            0 0 5px rgba(212, 175, 55, 0.2),
            0 0 15px rgba(212, 175, 55, 0.1),
            inset 0 0 3px rgba(212, 175, 55, 0.15);
    }

    50% {
        box-shadow:
            0 0 15px rgba(212, 175, 55, 0.5),
            0 0 30px rgba(212, 175, 55, 0.3),
            inset 0 0 8px rgba(255, 215, 0, 0.3);
    }
}

.animate-gold-edge {
    animation: gold-border-pulse 1.5s ease-in-out infinite;
    border-color: rgba(212, 175, 55, 0.5) !important;
}

/* Running Shine Effect */
@keyframes shine-sweep {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }

    100% {
        transform: translateX(200%) skewX(-15deg);
    }
}

.btn-shine-effect {
    position: relative;
    overflow: hidden;
}

.btn-shine-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 215, 0, 0.4),
        transparent
    );
    transform: translateX(-100%) skewX(-15deg);
    pointer-events: none;
}

.group:hover .btn-shine-effect::after {
    animation: shine-sweep 1.5s ease-out infinite;
}

/* Mobile Performance Optimizations */
@media (max-width: 768px) {
    /* Aggressively reduce blur on mobile to improve frame rates */
    [class*="backdrop-blur-"] {
        -webkit-backdrop-filter: blur(4px) !important;
        backdrop-filter: blur(4px) !important;
    }

    /* Disable decorative floating leaves on mobile to reduce layout thrash */
    .floating-leaves { display: none !important; }

    /* Reduce film grain opacity on mobile */
    body::before { opacity: 0.015 !important; }
}

/* CSS-only scroll-based reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered reveal delays */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.3s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.5s; }
.reveal-stagger.reveal-visible > .reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Floating leaves CSS animation replacement */
@keyframes leaf-fall {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.3; }
    90% { opacity: 0.3; }
    100% { transform: translateY(110vh) translateX(var(--drift, 50px)) rotate(360deg); opacity: 0; }
}
.leaf {
    position: absolute;
    top: -10%;
    animation: leaf-fall var(--duration, 8s) linear var(--delay, 0s) infinite;
}

/* Accessibility: Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 5. Majestic Text Glow & Breathe for Arabic Calligraphy */
@keyframes text-glow-breath {
    0%,
    100% {
        filter: drop-shadow(0 0 5px rgba(191, 149, 63, 0.3));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 25px rgba(191, 149, 63, 0.8));
        transform: scale(1.05);
    }
}

.animate-text-glow-breath {
    animation: text-glow-breath 4s ease-in-out infinite;
    /* Ensure it doesn't conflict with inline display if needed */
    display: inline-block;
}

/* 6. Premium Golden Text Masking Animation */
@keyframes golden-text-mask {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.animate-golden-text-mask {
    background: linear-gradient(
        90deg,
        #bf953f 0%,
        #fcf6ba 20%,
        #b38728 40%,
        #fbf5b7 60%,
        #aa771c 80%,
        #bf953f 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: golden-text-mask 8s linear infinite;
    display: inline-block;
}