/* ═══════════════════════════════════════════════════════════════════════════
 *  GHUB UI — Central Design System  ·  "Groundhub House Style" (Aurora + Glass)
 *  Matches the flydus / tanken family aesthetic:
 *  animated aurora background · frosted glassmorphism · Bricolage Grotesque
 *  + IBM Plex · cool deep-dark / cool-light palette · violet→blue→cyan brand grad.
 *
 *  Single source of truth. Every page pulls its tokens from here, so changing
 *  values here re-skins the whole app. Load via theme_head.php (?v=N).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── TOKENS · LIGHT (cool) ─────────────────────────────────────────────────── */
:root {
    --font-serif: 'Bricolage Grotesque', Georgia, serif;   /* display */
    --font-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono:  'IBM Plex Mono', 'SF Mono', Menlo, monospace;
    --font-display: var(--font-serif);
    --font-body:    var(--font-sans);

    /* Canvas — cool light */
    --bg:        #E8ECF5;
    --bg-2:      #DCE2EF;
    --solid:     #F4F6FB;

    /* Surfaces = frosted glass */
    --surface:   rgba(255,255,255,0.55);
    --surface-2: rgba(255,255,255,0.70);
    --fill:      rgba(11,16,32,0.05);
    --fill-2:    rgba(11,16,32,0.03);

    /* Ink — cool blue-black + alpha scale */
    --ink:    #0B1020;
    --ink-2:  rgba(11,16,32,0.64);
    --ink-3:  rgba(11,16,32,0.46);
    --ink-4:  rgba(11,16,32,0.34);
    --ink-5:  rgba(11,16,32,0.24);

    /* Hairlines */
    --line:   rgba(11,16,32,0.12);
    --line-2: rgba(11,16,32,0.22);

    /* Glass primitives */
    --glass:        rgba(255,255,255,0.55);
    --glass-2:      rgba(255,255,255,0.68);
    --glass-strong: rgba(255,255,255,0.80);
    --glass-border: rgba(255,255,255,0.65);
    --glass-hi:     rgba(255,255,255,0.90);
    --blur: 18px;

    --ink-accent: #0B1020;
    --on-accent:  #FFFFFF;

    /* Accents (+ soft tints) — cool, calibrated for glass */
    --green:  #138A5A;  --green-soft:  rgba(19,138,90,0.14);
    --amber:  #B26A12;  --amber-soft:  rgba(199,121,26,0.16);
    --rose:   #D03A33;  --rose-soft:   rgba(208,58,51,0.14);
    --sky:    #2563C7;  --sky-soft:    rgba(37,99,199,0.14);
    --violet: #6D40D6;  --violet-soft: rgba(109,64,214,0.14);
    --indigo: #4F46E5;  --indigo-soft: rgba(79,70,229,0.14);
    --orange: #C7791A;  --orange-soft: rgba(199,121,26,0.16);

    /* Signature brand gradient (violet → blue → cyan) */
    --grad-brand: linear-gradient(115deg, #8B5CF6 0%, #3B82F6 48%, #22D3EE 100%);

    /* Aurora blobs */
    --a1: rgba(139,92,246,0.42);
    --a2: rgba(59,130,246,0.40);
    --a3: rgba(34,211,238,0.32);
    --a4: rgba(245,165,36,0.28);

    /* Geometry */
    --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 34px;

    /* Elevation (glass) */
    --shadow-sm: 0 2px 10px -6px rgba(11,16,32,0.30);
    --shadow-md: 0 14px 40px -16px rgba(11,16,32,0.34), 0 2px 8px -4px rgba(11,16,32,0.14);
    --shadow-lg: 0 34px 80px -28px rgba(11,16,32,0.46), 0 8px 24px -10px rgba(11,16,32,0.22);

    /* Motion */
    --ease:   cubic-bezier(0.22, 1, 0.36, 1);
    --spring: cubic-bezier(0.34, 1.42, 0.64, 1);

    /* Navigation chrome (glass) */
    --nav-bg:       rgba(255,255,255,0.55);
    --nav-border:   rgba(11,16,32,0.10);
    --nav-ink:      #0B1020;
    --nav-ink-2:    rgba(11,16,32,0.64);
    --nav-ink-3:    rgba(11,16,32,0.46);
    --nav-off:      rgba(11,16,32,0.40);
    --nav-fill:     rgba(11,16,32,0.06);
    --nav-red:      #D03A33;
    --nav-parchment:#E8ECF5;
    --nav-radius:   24px;
    --nav-ease:     cubic-bezier(0.22, 1, 0.36, 1);
    --nav-spring:   cubic-bezier(0.34, 1.42, 0.64, 1);

    /* Sheets & overlays */
    --sheet-bg:     rgba(255,255,255,0.80);
    --sheet-shadow: rgba(11,16,32,0.22);
    --overlay-bg:   rgba(11,16,32,0.34);
}

/* ─── TOKENS · DARK (deep cool / cockpit) ───────────────────────────────────── */
html[data-theme="dark"] {
    --bg:        #060912;
    --bg-2:      #0A0F1C;
    --solid:     #0E1322;

    --surface:   rgba(255,255,255,0.055);
    --surface-2: rgba(255,255,255,0.09);
    --fill:      rgba(255,255,255,0.06);
    --fill-2:    rgba(255,255,255,0.04);

    --ink:    #E8ECF5;
    --ink-2:  rgba(232,236,245,0.66);
    --ink-3:  rgba(232,236,245,0.46);
    --ink-4:  rgba(232,236,245,0.34);
    --ink-5:  rgba(232,236,245,0.22);

    --line:   rgba(232,236,245,0.12);
    --line-2: rgba(232,236,245,0.20);

    --glass:        rgba(255,255,255,0.055);
    --glass-2:      rgba(255,255,255,0.09);
    --glass-strong: rgba(255,255,255,0.12);
    --glass-border: rgba(255,255,255,0.12);
    --glass-hi:     rgba(255,255,255,0.14);

    --ink-accent: #E8ECF5;
    --on-accent:  #060912;

    --green:  #21C17A;  --green-soft:  rgba(33,193,122,0.16);
    --amber:  #F5A524;  --amber-soft:  rgba(245,165,36,0.16);
    --rose:   #FB7185;  --rose-soft:   rgba(251,113,133,0.16);
    --sky:    #3B82F6;  --sky-soft:    rgba(59,130,246,0.16);
    --violet: #8B5CF6;  --violet-soft: rgba(139,92,246,0.16);
    --indigo: #A5B4FC;  --indigo-soft: rgba(165,180,252,0.16);
    --orange: #F5A524;  --orange-soft: rgba(245,165,36,0.16);

    --a1: rgba(139,92,246,0.50);
    --a2: rgba(37,99,235,0.50);
    --a3: rgba(34,211,238,0.34);
    --a4: rgba(245,165,36,0.26);

    --shadow-sm: 0 2px 12px -6px rgba(0,0,0,0.6);
    --shadow-md: 0 16px 44px -18px rgba(0,0,0,0.7), 0 2px 8px -4px rgba(0,0,0,0.5);
    --shadow-lg: 0 36px 90px -30px rgba(0,0,0,0.8);

    --nav-bg:       rgba(10,15,28,0.55);
    --nav-border:   rgba(232,236,245,0.10);
    --nav-ink:      #E8ECF5;
    --nav-ink-2:    rgba(232,236,245,0.66);
    --nav-ink-3:    rgba(232,236,245,0.46);
    --nav-off:      rgba(232,236,245,0.40);
    --nav-fill:     rgba(255,255,255,0.06);
    --nav-parchment:#0A0F1C;

    --sheet-bg:     rgba(14,19,34,0.82);
    --sheet-shadow: rgba(0,0,0,0.6);
    --overlay-bg:   rgba(0,0,0,0.55);
}

/* ─── BASE + AURORA ─────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
    transition: background-color .3s ease;
}
body {
    position: relative;
    z-index: 0;
    background: transparent;
    font-family: var(--font-sans);
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
    font-feature-settings: "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color .3s ease;
}

/* Animated aurora — fixed layer behind all content (pure CSS, app-wide) */
body::before {
    content: "";
    position: fixed;
    inset: -15%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38% 34% at 16% 10%,  var(--a1), transparent 62%),
        radial-gradient(34% 30% at 86% 6%,   var(--a2), transparent 60%),
        radial-gradient(40% 38% at 50% 104%, var(--a3), transparent 60%),
        radial-gradient(30% 28% at 96% 92%,  var(--a4), transparent 60%);
    filter: blur(42px) saturate(1.3);
    animation: ghAurora 42s var(--ease) infinite alternate;
    will-change: transform;
}
/* Fine grain so glass reads cleanly */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.40;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::after { mix-blend-mode: overlay; opacity: 0.30; }
@keyframes ghAurora {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(2%, 3%, 0) scale(1.08); }
    100% { transform: translate3d(-2%, -3%, 0) scale(1.04); }
}

input, select, textarea { font-size: 16px; }
button, input, select, textarea { font-family: inherit; }
input, select, textarea, button { touch-action: manipulation; }

.page { max-width: 680px; margin: 0 auto; padding: 0 0 6.5rem; position: relative; z-index: 1; }

/* ─── TYPOGRAPHY UTILITIES ──────────────────────────────────────────────────── */
.serif { font-family: var(--font-serif); font-weight: 700; letter-spacing: -.02em; }
.mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.it    { font-style: normal; font-weight: 500; color: var(--ink-3); }
.num   { font-variant-numeric: tabular-nums; }
.grad  { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ─── GLASS PRIMITIVE ───────────────────────────────────────────────────────── */
.glass {
    position: relative;
    background: var(--glass);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7);
    backdrop-filter: blur(var(--blur)) saturate(1.7);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-hi);
    border-radius: var(--r-md);
}
.glass-2 { background: var(--glass-2); }
.glass-strong { background: var(--glass-strong); }

/* Frost the shared surface components (backdrop-filter isn't set inline on pages,
   so this adds the glass blur app-wide; their bg already = var(--surface) glass). */
.card, .shift-card, .bento-cell, .fids, .prose-card, .toc-card, .help-card,
.step-card, .export-card, .stat-card, .summary-card, .metric-card, .pending-card,
.login-card, .feature, .success {
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
    backdrop-filter: blur(var(--blur)) saturate(1.6);
}
/* Graceful fallback where backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .card, .shift-card, .bento-cell, .fids, .prose-card, .toc-card, .glass { background: var(--solid); }
}

/* ─── PAGE HEADER ───────────────────────────────────────────────────────────── */
.page-header { padding: 1.75rem 1.5rem 1rem; }
.page-eyebrow { font-family: var(--font-mono); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-3); }
.page-title { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; letter-spacing: -.045em; line-height: 1; margin-top: .45rem; color: var(--ink); }
.page-title .it { font-weight: 500; color: var(--ink-2); }
.page-intro { font-family: var(--font-sans); font-size: .92rem; font-weight: 400; color: var(--ink-2); margin-top: .7rem; line-height: 1.5; max-width: 40ch; }

/* ─── HERO ──────────────────────────────────────────────────────────────────── */
.hero { padding: 1.75rem 1.5rem 1.25rem; position: relative; animation: fadeIn .4s var(--ease) both; }
.hero-eyebrow { font-family: var(--font-mono); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-3); }
.hero-title { margin-top: .55rem; font-family: var(--font-display); font-size: 2.3rem; line-height: .96; letter-spacing: -.05em; font-weight: 800; color: var(--ink); }
.hero-title .ser { font-weight: 500; color: var(--ink-2); }
.hero-strip { margin-top: .9rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hero-clock { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hero-dept { font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--grad-brand); color: #fff; padding: .24rem .6rem; border-radius: 100px; }
.hero-divider { color: var(--ink-4); font-size: .5rem; }

/* ─── SECTION LABELS ────────────────────────────────────────────────────────── */
.sec-label { padding: 1.75rem 1.5rem .75rem; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.sec-label-inner, .sec-inner { display: flex; align-items: baseline; gap: .6rem; }
.sec-num { font-family: var(--font-mono); font-size: .62rem; font-weight: 600; color: var(--ink-3); letter-spacing: .06em; }
.sec-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.sec-hint { font-size: .66rem; font-weight: 500; color: var(--ink-3); font-family: var(--font-mono); }
.sec-link { font-size: .72rem; font-weight: 600; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 1px; transition: color .15s var(--ease), border-color .15s var(--ease); }
.sec-link:hover { color: var(--ink); border-color: var(--ink); }

/* ─── CARD BASE ─────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: var(--r-lg); margin: 0 1rem; overflow: hidden;
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-hi);
    animation: riseIn .35s var(--ease) both;
}

/* ─── SHIFT HERO CARD ───────────────────────────────────────────────────────── */
.shift-card {
    margin: 0 1rem; background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: var(--r-xl); padding: 1.5rem 1.5rem 1.35rem; position: relative;
    overflow: hidden; box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-hi);
    animation: riseIn .4s var(--ease) both;
}
.shift-card.active   { background: radial-gradient(ellipse 420px 220px at 100% 0%, var(--green-soft) 0%, transparent 62%), var(--surface); }
.shift-card.upcoming { background: radial-gradient(ellipse 420px 220px at 100% 0%, var(--amber-soft) 0%, transparent 62%), var(--surface); }

.shift-status-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; position: relative; z-index: 1; }
.status-chip { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.sc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.sc-dot.active   { background: var(--green); animation: pulseDot 2s ease-in-out infinite; box-shadow: 0 0 0 3px var(--green-soft); }
.sc-dot.upcoming { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.sc-dot.done     { background: var(--ink-5); }
.sc-dot.urlaub   { background: var(--sky); }
.sc-dot.krank    { background: var(--rose); }
.status-chip .sc-label.active   { color: var(--green); }
.status-chip .sc-label.upcoming { color: var(--amber); }
.status-chip .sc-label.done     { color: var(--ink-3); }
.status-chip .sc-label.urlaub   { color: var(--sky); }
.status-chip .sc-label.krank    { color: var(--rose); }
.status-chip .sc-label.none     { color: var(--ink-3); }

.shift-countdown { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--ink); background: var(--fill); padding: .25rem .55rem; border-radius: 100px; position: relative; z-index: 1; }
.shift-time-display { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(2.5rem, 10vw, 3.5rem); font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: .95; margin-bottom: .15rem; position: relative; z-index: 1; }
.shift-time-display .dash { font-weight: 300; color: var(--ink-4); margin: 0 .1em; }
.shift-time-display.empty { font-family: var(--font-display); font-size: 1.75rem; color: var(--ink-3); font-weight: 600; }
.shift-meta-row { display: flex; align-items: center; gap: .75rem; font-size: .8rem; color: var(--ink-2); margin-top: .3rem; flex-wrap: wrap; position: relative; z-index: 1; }
.shift-meta-row b { font-weight: 600; color: var(--ink); }
.shift-meta-row .dotsep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); display: inline-block; }

/* "Losfahren um" — departure reminder */
.shift-depart { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); position: relative; z-index: 1; }
.sd-main { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ink-2); }
.sd-main i { font-size: .95rem; color: var(--ink-3); }
.sd-main b { font-weight: 600; color: var(--ink); font-family: var(--font-mono); }
.shift-depart.soon .sd-main, .shift-depart.soon .sd-main i, .shift-depart.soon .sd-main b { color: var(--amber); }
.sd-edit { display: inline-flex; align-items: center; gap: .35rem; font: 600 .68rem var(--font-mono); color: var(--ink-3); background: var(--fill); border: 1px solid var(--line); border-radius: 100px; padding: .28rem .6rem; cursor: pointer; }
.sd-editor { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; justify-content: flex-end; position: relative; z-index: 1; }
.sd-editor button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.sd-cur { font: 700 .82rem var(--font-mono); min-width: 86px; text-align: center; color: var(--ink); }

/* ─── BENTO ─────────────────────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: .55rem 1rem 0; }
.bento-cell { background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: .85rem .95rem .9rem; position: relative; overflow: hidden; box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi); animation: riseIn .35s var(--ease) both; }
.bento-cell.wide { grid-column: span 2; }
.bento-label { font-family: var(--font-mono); font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); display: flex; align-items: center; gap: .4rem; }
.bento-val { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; margin-top: .4rem; color: var(--ink); }
.bento-val .cur { font-weight: 500; color: var(--ink-2); font-size: .68em; margin-left: .05em; }
.bento-sub { font-size: .7rem; font-weight: 500; color: var(--ink-2); margin-top: .3rem; }
.bento-bar { height: 6px; border-radius: 100px; background: var(--fill); overflow: hidden; margin-top: .6rem; }
.bento-bar > b { display: block; height: 100%; background: var(--grad-brand); border-radius: 100px; }

/* ─── FIDS · DEPARTURE BOARD ────────────────────────────────────────────────── */
.fids { margin: 0 1rem; background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi); }
.fids-head { display: flex; padding: .6rem .95rem; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.fids-head .c-day { min-width: 56px; } .fids-head .c-time { flex: 1; } .fids-head .c-pos { min-width: 72px; text-align: right; }
.fids-row { display: flex; align-items: center; gap: .75rem; padding: .85rem .95rem; border-bottom: 1px solid var(--line); background: transparent; position: relative; text-decoration: none; color: inherit; animation: flapIn .4s var(--ease) both; }
.fids-row:last-child { border-bottom: none; }
.fids-row::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); opacity: .4; pointer-events: none; }
.fids-day  { font-family: var(--font-mono); font-size: .76rem; font-weight: 600; color: var(--ink-2); min-width: 56px; position: relative; }
.fids-time { font-family: var(--font-mono); font-size: .92rem; font-weight: 600; color: var(--ink); flex: 1; position: relative; font-variant-numeric: tabular-nums; }
.fids-pos  { font-size: .74rem; font-weight: 600; color: var(--ink-2); text-align: right; min-width: 72px; position: relative; }
.fids-pos .free { color: var(--sky); font-family: var(--font-mono); font-weight: 600; }
html[data-theme="dark"] .fids-time { color: var(--amber); }

/* ─── BUTTONS ───────────────────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-pdf {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-family: var(--font-sans); font-size: .88rem; font-weight: 600; letter-spacing: -.01em;
    border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: .8rem 1.1rem;
    background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer;
    -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
    transition: transform .15s var(--spring), box-shadow .2s var(--ease), border-color .2s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: var(--line-2); }
.btn:active, .btn-primary:active, .btn-pdf:active { transform: scale(.98); }
.btn-primary, .btn-pdf { width: 100%; background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: 0 12px 30px -12px rgba(109,64,214,0.6); }
.btn-primary:hover, .btn-pdf:hover { box-shadow: 0 16px 38px -12px rgba(109,64,214,0.75); }
.btn-ghost { background: var(--fill); border-color: var(--line); color: var(--ink-2); }
.btn[disabled], .btn-pdf[disabled], .btn-pdf:disabled { background: var(--ink-5); border-color: transparent; color: var(--surface); cursor: not-allowed; box-shadow: none; }

/* ─── FORMS ─────────────────────────────────────────────────────────────────── */
.field-label, .ec-picker-label, .set-lbl { font-family: var(--font-mono); font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); display: block; margin-bottom: .4rem; }
.inp, .s-inp, .ec-sel, .ec-date {
    width: 100%; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-sm);
    padding: .6rem .7rem; font-family: var(--font-sans); font-size: .9rem; font-weight: 500; color: var(--ink); outline: none;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.inp:focus, .s-inp:focus, .ec-sel:focus, .ec-date:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }

/* ─── TAGS ──────────────────────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: .66rem; font-weight: 600; padding: .22rem .5rem; border-radius: 7px; background: var(--fill); color: var(--ink-2); border: 1px solid var(--line); }
.tag.solid { background: var(--grad-brand); color: #fff; border-color: transparent; }

/* ─── SHARED MODULES (prose / toc / settings / help / steps / mini-cal) ─────── */
.prose-card, .help-card, .step-card { background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--r-lg); margin: 0 1rem 1rem; padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi); }
.prose-card h2, .prose-card h3, .step-card-title { font-family: var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.prose-card p, .prose-card li { color: var(--ink-2); line-height: 1.6; }
.toc-card { background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--r-lg); margin: 0 1rem; overflow: hidden; box-shadow: var(--shadow-sm); }
.toc-row { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.toc-row:first-child { border-top: none; }
.toc-num { font-family: var(--font-mono); font-size: .66rem; color: var(--ink-3); }
.toc-text { flex: 1; font-size: .9rem; font-weight: 600; color: var(--ink); }
.toc-arrow { color: var(--ink-4); font-size: .8rem; }
.set-row { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border-top: 1px solid var(--line); }
.set-row:first-child { border-top: none; }
.set-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; background: var(--fill); color: var(--ink-2); }
.set-val { font-weight: 600; color: var(--ink); }
.step-num { font-family: var(--font-mono); font-size: .7rem; font-weight: 600; color: var(--ink-3); }
.step-card-desc { font-size: .82rem; color: var(--ink-2); line-height: 1.5; margin-top: .35rem; }
.mini-cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; color: var(--ink-2); border-radius: 9px; position: relative; }
.mini-cal-cell.empty { color: transparent; }
.mini-cal-cell.active { background: var(--grad-brand); color: #fff; }

/* ─── MODALS / DIALOGS (Bootstrap + custom) ─────────────────────────────────── */
.modal-content { background: var(--sheet-bg) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border: 1px solid var(--glass-border) !important; box-shadow: var(--shadow-lg) !important; color: var(--ink); border-radius: var(--r-lg) !important; }
.modal-backdrop, .modal-backdrop.show { background-color: var(--overlay-bg) !important; }
.modal-header, .modal-footer { border-color: var(--line) !important; }
.modal-title, .modal-day, .m-lbl, .m-inp, .m-sel { color: var(--ink) !important; }
.modal input, .modal select, .modal textarea { background: var(--glass) !important; color: var(--ink) !important; border-color: var(--glass-border) !important; }
.btn-modal-save, .modal .btn-primary { background: var(--grad-brand) !important; color: #fff !important; }
html[data-theme="dark"] .m-sel option { background: #0E1322; color: #E8ECF5; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color-scheme: dark; }
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(.85); }
html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink) !important; -webkit-box-shadow: 0 0 0 1000px var(--solid) inset !important; transition: background-color 5000s ease-in-out 0s;
}

/* Airline logos keep a light backing in dark */
html[data-theme="dark"] .airline-logo, html[data-theme="dark"] .flight-logo,
html[data-theme="dark"] img[style*="background:#fff"], html[data-theme="dark"] img[style*="background: #fff"] { background: #E8ECF5 !important; }

/* ─── ANIMATIONS ────────────────────────────────────────────────────────────── */
@keyframes riseIn   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn    { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes flapIn   { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Page transition + ripple (ghub-fx.js). Opacity-only on body — NO transform,
   so position:fixed nav/aurora keep their viewport anchor. */
body { animation: fxPageIn .4s var(--ease) both; }
body.fx-leaving { opacity: 0; transition: opacity .19s var(--ease); }
@keyframes fxPageIn { from { opacity: 0; } to { opacity: 1; } }
.fx-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .22; pointer-events: none; animation: fxRipple .6s var(--ease) forwards; }
@keyframes fxRipple { to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body { animation: none !important; } .fx-ripple { display: none !important; } }

/* ─── SCROLLBAR + SELECTION ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
::selection { background: rgba(139,92,246,0.25); color: var(--ink); }

body, .card, .shift-card, .bento-cell, .fids, .fids-row, .prose-card, .toc-card,
.help-card, .step-card, .btn, .btn-pdf, input, select, textarea {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* ─── ACCESSIBILITY ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    body::before { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    .card, .shift-card, .bento-cell, .fids, .glass, .prose-card, .toc-card { background: var(--solid) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
    body::before { opacity: .4; }
}
@media print {
    body::before, body::after { display: none !important; }
    body { background: #fff; }
    .bottom-bar, .ghub-nav, .gh-cmdk, .bottom-nav { display: none !important; }
}