/* =============================================================================
   InfinityCore — V5 RAC Shell + Color Foundation

   Loaded AFTER tokens.css + ds.css + responsive.css so this file's chrome
   rules win against the V4 light defaults still defined in tokens.css.

   What this layer does:
     1. Adds the V5 RAC color vocabulary as additive `--v5-*` tokens
        (abyss / void / carbon dark canvas, bronze, RAC orange, plate ivory,
        status hex variants). Pages that want explicit V5 colors can read
        these directly. No existing token value is mutated.
     2. Flips the visible authenticated app shell (`.app-shell`,
        `.app-sidebar`, `.app-main`, `.app-topbar`, `.app-content`) to the
        V5 dark vault canvas with RAC orange `is-active` rail. Pre-existing
        `.app-*` class hooks are preserved verbatim — tests that key off
        them continue to pass.
     3. Leaves `--surface`, `--ink`, `--line` etc. unchanged so per-page
        content cards (Dashboard panels, Booking detail dl, etc.) still
        render as light surfaces "floating" on the V5 dark canvas. This is
        the V5 hybrid look — dark chrome around light content — and is the
        explicit goal of this phase (the spec says "Do not redesign
        Dashboard content").

   What this layer does NOT do:
     · No new global fonts (Inter / Instrument Serif stay off; chrome reads
       existing Geist + Geist Mono).
     · No new shell structure (no 76px instrument rail; the V4 single
       232px sidebar is just restyled, not split into two columns).
     · No model / migration / business-logic touch.
     · No login / Contract PDF touch (login already has its own self-
       contained palette; PDFs read their own template tokens).
     · No page redesign — only chrome.
   ============================================================================= */


/* ============================================================================
   1. V5 RAC token vocabulary (additive)
   ============================================================================ */
:root {
    /* Void / abyss / carbon — dark canvas substrate */
    --v5-abyss:        #080d14;
    --v5-void:         #0e141d;
    --v5-void-2:       #131b27;
    --v5-void-3:       #182232;
    --v5-carbon:       #202b3c;
    --v5-steel:        #2b384c;

    /* Text on dark canvas */
    --v5-on-void:      #d8d6cd;
    --v5-on-void-2:    #f6f3e8;
    --v5-on-void-mute: #a7a99f;
    --v5-on-void-dim:  #737987;

    /* Plate / ivory paper for badge backgrounds */
    --v5-ivory:        #f4f1e8;
    --v5-ivory-2:      #ece8dc;

    /* Bronze (group accent, mark + eyebrow tone) */
    --v5-bronze:       #c39257;
    --v5-bronze-2:     #a47438;
    --v5-bronze-3:     #6f4d1f;
    --v5-bronze-glow:  rgba(195, 146, 87, 0.18);

    /* RAC orange (Rent A Car company accent — active nav + primary CTAs) */
    --v5-rac-orange:   #e07a35;
    --v5-rac-orange-2: #c66520;
    --v5-rac-tint:     rgba(224, 122, 53, 0.10);
    --v5-rac-glow:     rgba(224, 122, 53, 0.45);

    /* V5 status hex variants (next to the existing oklch --green/amber/red/
       blue tokens; pages can pick either depending on canvas) */
    --v5-ok:           #6cbf7a;
    --v5-warn:         #e3b352;
    --v5-crit:         #d65543;
    --v5-info:         #7cb1e0;
    --v5-neural:       #b696e3;

    /* Faint borders on dark */
    --v5-line:         rgba(255, 255, 255, 0.075);
    --v5-line-soft:    rgba(255, 255, 255, 0.045);
    --v5-line-strong:  rgba(255, 255, 255, 0.12);
}


/* ============================================================================
   2. Body / page canvas
   ============================================================================ */
body {
    background: var(--v5-void);
    color: var(--v5-on-void);
}

/* Skip-link visible style — keep accessible focus on V5 canvas */
.skip-link {
    background: var(--v5-abyss);
    color: var(--v5-on-void-2);
}
.skip-link:focus {
    outline: 2px solid var(--v5-rac-orange);
    outline-offset: 2px;
}


/* ============================================================================
   3. App shell wrapper
   ============================================================================ */
.app-shell {
    background: var(--v5-void);
}


/* ============================================================================
   4. Sidebar (dark abyss + RAC orange active rail)
   ============================================================================ */
.app-sidebar {
    background: var(--v5-abyss);
    color: var(--v5-on-void);
    border-right: 1px solid var(--v5-line);
}
.app-sidebar__logo {
    color: var(--v5-on-void-2);
    border-bottom: 1px solid var(--v5-line);
    font-family: var(--ff-ui);
    font-weight: 600;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-sidebar__logo::before {
    content: "∞";
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--v5-bronze), var(--v5-bronze-3));
    color: var(--v5-abyss);
    display: inline-grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.app-sidebar__nav {
    color: var(--v5-on-void);
}
.app-sidebar__group-label {
    color: var(--v5-on-void-mute);
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    font-weight: 600;
}
.app-sidebar__item {
    color: var(--v5-on-void);
    font-size: 13px;
    font-weight: 500;
    min-height: 38px;
    border-left-color: transparent;
    position: relative;
}
.app-sidebar__item:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--v5-on-void-2);
}
.app-sidebar__item.is-active {
    background: var(--v5-rac-tint);
    color: var(--v5-on-void-2);
    border-left-color: var(--v5-rac-orange);
    font-weight: 650;
}
.app-sidebar__item.is-active .app-sidebar__icon {
    color: var(--v5-rac-orange);
}
.app-sidebar__icon { color: var(--v5-on-void-mute); }
.app-sidebar__item:hover .app-sidebar__icon { color: var(--v5-on-void-2); }
.app-sidebar__footer {
    color: var(--v5-on-void-mute);
    border-top: 1px solid var(--v5-line);
    background: rgba(255, 255, 255, 0.015);
}


/* ============================================================================
   5. Main area + topbar

   V5 canvas treatment for .app-main:
     · base colour stays --v5-void (NOT pure black)
     · two faint white grid layers @ 56px spacing — matches V5 `.cv::before`
     · subtle bronze radial glow anchored top-right so the canvas reads as
       a designed surface, not empty void
     · implemented as a multi-layer `background-image` (no pseudo-element,
       no `overflow: hidden` on .app-main) so the sticky topbar's
       containing block is unaffected and clicks naturally pass through
   ============================================================================ */
.app-main {
    background-color: var(--v5-void);
    background-image:
        linear-gradient(to right,  rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        radial-gradient(900px 600px at 100% 0%, rgba(224, 122, 53, 0.05), transparent 60%);
    background-size: 56px 56px, 56px 56px, auto;
    background-position: 0 0, 0 0, top right;
    background-repeat: repeat, repeat, no-repeat;
}
.app-topbar {
    background: var(--v5-void-2);
    border-bottom: 1px solid var(--v5-line);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.03);
    color: var(--v5-on-void);
    height: 56px;
}
.app-topbar__row {
    color: var(--v5-on-void);
    height: 100%;
}
.app-topbar__breadcrumb {
    color: var(--v5-on-void-mute);
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.app-topbar__breadcrumb a { color: var(--v5-on-void-mute); }
.app-topbar__breadcrumb a:hover { color: var(--v5-on-void-2); }
.app-topbar__breadcrumb span:not(.app-topbar__breadcrumb-sep) { color: var(--v5-on-void-2); }
.app-topbar__breadcrumb-sep { color: var(--v5-on-void-dim); }

.app-topbar__selector {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--v5-line);
    color: var(--v5-on-void-2);
    font-size: 12.5px;
    font-weight: 600;
}
.app-topbar__selector:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--v5-on-void-2);
}
.app-topbar__selector.is-readonly {
    background: rgba(255, 255, 255, 0.02);
    color: var(--v5-on-void-mute);
}
.app-topbar__selector svg { color: currentColor; }

.app-topbar__bell {
    color: var(--v5-on-void);
}
.app-topbar__bell:hover {
    background: rgba(255, 255, 255, 0.05);
}
.app-topbar__bell-badge {
    background: var(--v5-rac-orange);
    color: var(--v5-abyss);
    font-weight: 700;
}

.app-topbar__user {
    color: var(--v5-on-void);
}
.app-topbar__user:hover { color: var(--v5-on-void-2); }
.app-topbar__avatar {
    background: var(--v5-bronze);
    color: var(--v5-abyss);
    font-weight: 700;
}

/* Dropdown menu panels attached to the topbar (company/branch/user).
   These are absolutely-positioned <div role="menu">s rendered inside the
   <details> elements in topbar.html. The Tailwind `bg-white` utility on
   them would otherwise leave the menu painted white on a dark topbar. */
.app-topbar [role="menu"] {
    background: var(--v5-void-3);
    border: 1px solid var(--v5-line);
    color: var(--v5-on-void);
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}
.app-topbar [role="menu"] [role="menuitem"] {
    color: var(--v5-on-void);
}
.app-topbar [role="menu"] [role="menuitem"][aria-current="true"] {
    color: var(--v5-on-void-2);
    background: rgba(224, 122, 53, 0.08);
}
.app-topbar [role="menu"] button[role="menuitem"]:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--v5-on-void-2);
}
.app-topbar [role="menu"] > div[style*="border-color"] {
    /* The user-menu header (name + email at top of dropdown) — preserve
       the layout, just darken the divider. */
    border-color: var(--v5-line) !important;
}


/* ============================================================================
   6. Mobile menu button + close button + scrim
   ============================================================================ */
.app-topbar__menu-btn {
    color: var(--v5-on-void);
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
.app-topbar__menu-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--v5-on-void-2);
}
.app-sidebar__close-btn {
    color: var(--v5-on-void);
}
.app-sidebar__close-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--v5-on-void-2);
}
.app-scrim {
    background: rgba(3, 5, 10, 0.65);
}


/* ============================================================================
   7. Page content area — keep transparent so content cards (which still
      read --surface as light) sit as floating cards on the V5 dark canvas.
   ============================================================================ */
.app-content {
    background: transparent;
    color: var(--ink);
}
.app-content > * + * { margin-top: 28px; }

/* Toast / flash messages — they read .ds-message-* from ds.css which still
   uses light surfaces. That's fine — they appear as light pills on dark. */


/* ============================================================================
   8. RTL safety — mirror the active-rail position when in RTL mode.
      The V4 [dir="rtl"] rules in ds.css already swap margin/border sides;
      this only re-binds the colour so the active row reads V5 orange.
   ============================================================================ */
[dir="rtl"] .app-sidebar__item.is-active {
    border-right-color: var(--v5-rac-orange);
}


/* ============================================================================
   9. Autocomplete picker (partials/_autocomplete_picker.html) — V5 repaint.
      The shared Tier-2 picker is inline-styled with V4 tokens
      (--surface #fff / --line / --ink), so inside the dark RAC shell its
      input + dropdown render as a white box (light mismatch on the accidents,
      damages, bookings-detail and violations forms). Repaint to the V5 dark
      surface here. !important is required only because the partial sets those
      properties inline; behaviour/markup is untouched.
   ============================================================================ */
.app-main .ac-picker__input {
    background: var(--v5-void-2) !important;
    border-color: var(--v5-line-strong) !important;
    color: var(--v5-on-void) !important;
}
.app-main .ac-picker__input::placeholder {
    color: var(--v5-on-void-dim);
    opacity: 1;
}
.app-main .ac-picker__menu {
    background: var(--v5-void-2) !important;
    border-color: var(--v5-line-strong) !important;
}
.app-main .ac-picker__row {
    color: var(--v5-on-void) !important;
}
.app-main .ac-picker__row--active,
.app-main .ac-picker__row:hover {
    background: var(--v5-void-3) !important;
}