/* ═══════════════════════════════════════════════════════════════════
   TRATOK CORPORATES — AURORA BRIDGE
   ───────────────────────────────────────────────────────────────────
   Loaded AFTER platform.css → dashboard.css → dash-polish.css.

   Two jobs:
     1. Retune the existing system so it reads as a welcoming product
        rather than a dense admin console — type scale, density,
        visible surfaces, calmer use of gold.
     2. Define tratok.net's "Aurora" token names in terms of Corporates'
        gold tokens, so components ported from the consumer site inherit
        this identity instead of arriving orange.

   Everything here is additive. Removing the <link> reverts the design
   pass completely, with no other file touched.
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   1. TYPE SCALE + DENSITY
   The single highest-leverage change. 15px → 16px lifts every rem-based
   size ~7%, which is the difference between "cramped" and "composed".
   ─────────────────────────────────────────────────────────────────── */

html { font-size: 16px; }

/* Nothing a person reads should sit below 12px. The old 15px root put
   several .7rem rules at 10.5px. Re-floor them explicitly. */
:root {
    --fs-micro:  0.72rem;   /* uppercase labels only — never prose */
    --fs-small:  0.8125rem; /* 13px — captions, table meta */
    --fs-body:   0.9375rem; /* 15px — default reading size */
    --fs-lead:   1.0625rem; /* 17px */

    /* A real spacing scale. The codebase had none — every value was
       hand-written, which is why rhythm drifts between screens. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --container: 1440px;
    --bottom-nav-h: 64px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Motion — spring easing for anything that should feel physical. */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ───────────────────────────────────────────────────────────────────
   2. SURFACES YOU CAN ACTUALLY SEE
   --border-subtle was gold at 6% alpha — effectively invisible, so
   every card floated with no edge. Cards need definition to read as
   objects rather than as regions of background.
   ─────────────────────────────────────────────────────────────────── */

:root {
    --border-subtle:  rgba(212, 168, 67, 0.14);
    --border-default: rgba(212, 168, 67, 0.22);
    --border-strong:  rgba(212, 168, 67, 0.34);
    --border-muted:   rgba(255, 255, 255, 0.09);

    /* Gentle top-lit gradient so surfaces have a light source. */
    --surface-sheen: linear-gradient(180deg,
                     rgba(255,255,255,0.035) 0%,
                     rgba(255,255,255,0.00) 42%);
}

html[data-theme="midnight"] {
    --border-subtle:  rgba(212, 168, 67, 0.13);
    --border-default: rgba(212, 168, 67, 0.20);
}

/* Boardroom (light) — the current values fail WCAG AA. Fixed here so
   the theme is safe to use as the default. */
html[data-theme="boardroom"] {
    --border-subtle:  rgba(120, 88, 26, 0.20);
    --border-default: rgba(120, 88, 26, 0.30);
    --border-strong:  rgba(120, 88, 26, 0.44);
    --border-muted:   rgba(0, 0, 0, 0.12);
    --text-secondary: #3f362c;   /* was #4d4239 */
    --text-muted:     #6b6154;   /* was #8a7d6e — 4.1:1, failed AA */
    --surface-sheen:  linear-gradient(180deg,
                      rgba(0,0,0,0.018) 0%, rgba(0,0,0,0.00) 42%);
}


/* ───────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY
   Playfair is a beautiful editorial face doing a job it should not do:
   labelling UI. Keep it for the marketing page and page titles; give
   the app chrome a face built for interfaces.
   ─────────────────────────────────────────────────────────────────── */

:root {
    --font-display-ui: 'Space Grotesk', 'Plus Jakarta Sans',
                       -apple-system, BlinkMacSystemFont, sans-serif;
}

.dash-brand-text,
.dash-nav-label,
.kpi-card .kpi-label,
.stat-tile-label,
.page-header-title h1 {
    font-family: var(--font-display-ui);
    letter-spacing: -0.012em;
}

.page-header-title h1 { font-weight: 600; }

/* Uppercase micro-labels need tracking or they read as noise. */
.dash-nav-label,
.kpi-label,
.stat-tile-label {
    font-size: var(--fs-micro);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 600;
}

body { font-size: var(--fs-body); line-height: 1.6; }


/* ───────────────────────────────────────────────────────────────────
   4. BREATHING ROOM
   Small paddings, applied consistently. ~7% more space everywhere.
   ─────────────────────────────────────────────────────────────────── */

.dash-nav-link       { padding: 10px 14px; border-radius: var(--radius-sm); }
.dash-table td       { padding-top: 13px; padding-bottom: 13px; }
.dash-table th       { padding-top: 11px; padding-bottom: 11px; }
.form-group input,
.form-group select,
.form-group textarea { padding: 13px 16px; font-size: var(--fs-body); }
.form-card           { padding: var(--space-5); }

/* iOS zooms the viewport when a focused input is under 16px. */
@media (max-width: 820px) {
    input, select, textarea { font-size: 16px !important; }
}

/* On a wide monitor an uncapped table stretches to ~2300px and becomes
   unreadable. Cap the reading measure, keep the shell full-bleed. */
.dash-main > * { max-width: var(--container); }


/* ───────────────────────────────────────────────────────────────────
   5. STOP USING GOLD FOR EVERYTHING
   When every accent is the brand colour, nothing reads as important.
   Gold marks primary action and brand. Everything else gets a hue that
   carries meaning.
   ─────────────────────────────────────────────────────────────────── */

:root {
    --hue-flight:  #5ccec2;   /* teal   */
    --hue-stay:    #a78bfa;   /* violet */
    --hue-car:     #60a5fa;   /* sky    */
    --hue-dining:  #f07b65;   /* coral  */
    --hue-expense: #fbbf24;   /* amber  */
    --hue-team:    #34d399;   /* green  */
}

.fi-flight,  .icon-flight  { color: var(--hue-flight); }
.fi-stay,    .icon-stay    { color: var(--hue-stay); }
.fi-car,     .icon-car     { color: var(--hue-car); }
.fi-dining,  .icon-dining  { color: var(--hue-dining); }
.fi-expense, .icon-expense { color: var(--hue-expense); }
.fi-team,    .icon-team    { color: var(--hue-team); }


/* ───────────────────────────────────────────────────────────────────
   6. BUTTONS — pill geometry, one specular highlight
   ─────────────────────────────────────────────────────────────────── */

.btn, .btn-primary, .btn-secondary, .btn-ghost {
    border-radius: var(--radius-full);
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                background var(--transition-fast);
}

.btn-primary {
    position: relative;
    overflow: hidden;
    /* Deliberately dark ink on gold: white on #e8b82e is ~2.0:1. */
    color: #0c1018;
    box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset,
                0 6px 18px -8px rgba(212,168,67,0.55);
}
.btn-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
                rgba(255,255,255,0.20) 0%,
                rgba(255,255,255,0.00) 55%);
    pointer-events: none;
}
.btn-primary:hover  { transform: translateY(-1px);
                      box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset,
                                  0 10px 26px -10px rgba(212,168,67,0.65); }
.btn-primary:active { transform: translateY(0); }

/* Never white-on-gold anywhere. */
.btn-primary, .btn-primary i, .btn-primary span { color: #0c1018; }


/* ───────────────────────────────────────────────────────────────────
   7. CARDS
   ─────────────────────────────────────────────────────────────────── */

.dash-card, .form-card, .kpi-card, .stat-tile, .empty-state {
    background-image: var(--surface-sheen);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast),
                transform var(--transition-fast);
}
.kpi-card:hover, .stat-tile:hover { border-color: var(--border-default); }

.dash-table tbody tr { transition: background var(--transition-fast); }
.dash-table tbody tr:hover { background: var(--bg-hover); }
.dash-table td { border-bottom: 1px solid var(--border-muted); }


/* ───────────────────────────────────────────────────────────────────
   8. THE GREETING BLOCK  (dashboard.php)
   The biggest emotional change in the product, and it needs no new data.
   ─────────────────────────────────────────────────────────────────── */

.dash-greeting { margin-bottom: var(--space-6); }

.dash-greeting-eyebrow {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: var(--space-3);
}
.dash-greeting-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--hue-team);
    box-shadow: 0 0 0 0 rgba(52,211,153,0.55);
    animation: greetPulse 2.4s var(--ease-out-soft) infinite;
}
@keyframes greetPulse {
    0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.dash-greeting h1 {
    font-family: var(--font-display-ui);
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    font-weight: 600; line-height: 1.14;
    letter-spacing: -0.022em;
    margin: 0 0 var(--space-2);
    text-wrap: balance;
}
.dash-greeting .text-gradient {
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dash-greeting-sub {
    color: var(--text-secondary);
    font-size: var(--fs-body);
    max-width: 62ch;
}

/* Quick actions */
.quick-tiles {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-5);
}
@media (min-width: 780px) {
    .quick-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.quick-tile {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-card);
    background-image: var(--surface-sheen);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    text-decoration: none;
    transition: transform var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}
.quick-tile:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}
.quick-tile i { font-size: 1.05rem; }
.quick-tile strong { font-size: var(--fs-body); font-weight: 600; }
.quick-tile span { font-size: var(--fs-small); color: var(--text-muted); }

.quick-tile--brand {
    border-color: rgba(212,168,67,0.34);
    background-image: linear-gradient(135deg,
        rgba(212,168,67,0.11) 0%, rgba(212,168,67,0.02) 60%);
}
.quick-tile--brand i { color: var(--gold-400); }


/* ───────────────────────────────────────────────────────────────────
   9. MOBILE
   Fixes the 901–1100px dead zone where the sidebar became a drawer but
   no control existed to open it.
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .menu-toggle,
    #dashMobileToggle { display: inline-flex !important; }
}

.dash-bottom-nav {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    backdrop-filter: blur(12px);
}
.dash-bottom-nav-inner {
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: var(--bottom-nav-h);
}
.dash-bottom-link {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    color: var(--text-muted); text-decoration: none;
    font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.03em;
    transition: color var(--transition-fast);
}
.dash-bottom-link i { font-size: 1.02rem; }
.dash-bottom-link.active { color: var(--gold-400); }

@media (max-width: 1024px) {
    .dash-bottom-nav { display: block; }
    .dash-main { padding-bottom: calc(var(--bottom-nav-h)
                 + var(--safe-bottom) + var(--space-5)) !important; }
}


/* ───────────────────────────────────────────────────────────────────
   10. RESILIENCE
   If main.js stalls, .reveal elements are stuck at opacity 0 and the
   page renders blank. Guarantee content appears regardless.
   ─────────────────────────────────────────────────────────────────── */

.reveal { animation: revealSafety 0.45s var(--ease-out-soft) 1.6s forwards; }
@keyframes revealSafety { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .reveal, .dash-main > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .dash-greeting-dot { animation: none !important; }
}

/* Preserve the existing focus ring — do not regress it. */
*:focus-visible {
    outline: 2px solid var(--gold-400);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}


/* ───────────────────────────────────────────────────────────────────
   11. AURORA TOKEN BRIDGE
   tratok.net's components reference Aurora's token names. Mapping them
   onto Corporates' tokens means ported markup inherits this identity
   across all three themes without editing the ported CSS.
   ─────────────────────────────────────────────────────────────────── */

:root {
    --brand:      var(--gold-400);
    --brand-2:    var(--gold-500);
    --brand-soft: rgba(212, 168, 67, 0.14);
    --brand-glow: rgba(212, 168, 67, 0.38);

    --bg-canvas:  var(--bg-body);
    --bg-base:    var(--bg-body);
    --bg-raised:  var(--bg-card);

    --ink-100: var(--text-primary);
    --ink-200: var(--text-primary);
    --ink-300: var(--text-secondary);
    --ink-400: var(--text-muted);
    --ink-500: var(--text-muted);

    --ok:   var(--success);
    --warn: var(--warning);
    --bad:  var(--danger);

    --glass-1: rgba(255, 255, 255, 0.04);
    --glass-2: rgba(255, 255, 255, 0.06);
    --glass-3: rgba(255, 255, 255, 0.10);
    --glass-border:    var(--border-subtle);
    --glass-border-hi: var(--border-strong);

    --grad-text:   linear-gradient(135deg, var(--gold-300), var(--gold-500));
    --grad-aurora: linear-gradient(135deg, var(--gold-300) 0%,
                   var(--gold-500) 45%, var(--coral-500) 100%);

    --r-xs: var(--radius-xs);  --r-sm: var(--radius-sm);
    --r-md: var(--radius-md);  --r-lg: var(--radius-lg);
    --r-xl: var(--radius-xl);  --r-pill: var(--radius-full);

    --sh-sm: 0 1px 2px rgba(0,0,0,0.20);
    --sh-md: var(--shadow-md);
    --sh-lg: var(--shadow-lg);

    --ease-out: var(--ease-out-soft);
    --t-fast: 140ms; --t-mid: 260ms; --t-slow: 480ms;
}

/* Glass is white-alpha over dark. Over boardroom's near-white ground it
   renders as nothing at all, so it must invert to black-alpha. */
html[data-theme="boardroom"] {
    --glass-1: rgba(0, 0, 0, 0.025);
    --glass-2: rgba(0, 0, 0, 0.04);
    --glass-3: rgba(0, 0, 0, 0.07);
}

/* Aurora ships its light overrides under [data-theme="light"], a value
   Corporates never sets. Alias it so pasted blocks resolve. */
html[data-theme="boardroom"] { color-scheme: light; }


/* ───────────────────────────────────────────────────────────────────
   12. PORTED-COMPONENT GUARDRAILS
   Two collisions that would otherwise surface only at runtime.
   ─────────────────────────────────────────────────────────────────── */

/* .t-search-shell uses backdrop-filter, which creates a stacking context
   and traps its absolutely-positioned autocomplete. Corporates' staggered
   load animation transforms every .dash-main child, reproducing it
   exactly. Both z-indexes are required. */
.t-search-shell        { position: relative; z-index: 50; }
.search-ribbon-section { position: relative; z-index: 20; }

/* The ported date picker is renamed .dtc-* because .cal-grid / .cal-cell
   already belong to the trips month view. This asserts the boundary. */
.dtc-grid, .dtc-cell { box-sizing: border-box; }