/* ============================================================================
   Scan-Uebersicht (/scans, Teile von /helfer-info) im FreakCash-Look.
   Hiess bis 08/2026 checkin.css - der Name log: die Scanner-Seite /checkin
   styled scanner.css, HIER liegt der .fv-cash-Look von cash.rock-freaks.de.
   Vorlage: FreakCash.Shared/wwwroot/fv-theme.css — dort gelten die Token
   :root-weit, hier sind sie bewusst auf .fv-cash gescoped, damit der Rest
   der Helfer-App (Desktop, /m, Portal, Anmeldung) unberuehrt bleibt.
   Den Display-Font Oswald laedt NUR die Scan-Uebersicht selbst per
   <HeadContent> (Google Fonts, font-display:swap; Bungee flog 08/2026 raus -
   dem User zu fett).
   ========================================================================== */

.fv-cash {
    --fv-bg: var(--fvt-grund);
    --fv-panel: var(--fvt-panel);
    --fv-panel2: var(--fvt-panel2);
    --fv-line: var(--fvt-linie);
    --fv-fg: var(--fvt-creme);
    --fv-mut: var(--fvt-gedaempft);
    --fv-green: var(--fvt-gruen);
    --fv-green2: var(--fvt-gruen-dunkel);
    --fv-green-bright: var(--fvt-gruen-hell);
    --fv-green-soft: var(--fvt-gruen-soft);
    --fv-slate: var(--fvt-slate);
    --fv-slate-hi: var(--fvt-slate-hi);
    --fv-ocker: var(--fvt-ocker);
    --fv-error: var(--fvt-fehler);
    --fv-input-bg: var(--fvt-input);
    --fv-font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --fv-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* app.css sperrt global das Scrollen (Desktop-DxSplitter-Layout) — fuer den
   Cash-Look gezielt freischalten (gleicher Trick wie mobile.css/anmeldung.css). */
html:has(.fv-cash),
body:has(.fv-cash) {
    overflow: auto !important;
    height: auto !important;
}

/* EmptyLayout zentriert hell — hier: dunkler Vollflaechen-Grund. */
.fv-auth-layout:has(.fv-cash) {
    display: block;
    background: none;
    min-height: 100vh;
}

.fv-cash {
    position: relative;
    min-height: 100vh;
    background: var(--fv-bg);
    color: var(--fv-fg);
    font-family: var(--fv-font-body);
    line-height: 1.5;
    padding: 24px 16px 48px;
}

.fv-cash-wrap {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
}

/* --- Hintergrund-Deko: 1:1 aus fv-theme.css (Farbnebel + Ripple + Korn) --- */
.fv-cash-bgfx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.14;
}

.fv-cash-bgfx::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(42% 30% at 82% 6%, rgba(106, 115, 150, 0.40), transparent 70%),
        radial-gradient(45% 38% at 6% 34%, rgba(42, 156, 60, 0.65), transparent 70%),
        radial-gradient(36% 30% at 92% 82%, rgba(42, 156, 60, 0.34), transparent 70%),
        radial-gradient(30% 26% at 30% 96%, rgba(80, 80, 112, 0.55), transparent 70%);
    filter: blur(48px);
    animation: fv-cash-drift 26s ease-in-out infinite alternate;
}

.fv-cash-bgfx::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at -12% 42%,
            rgba(106, 115, 150, 0.55) 0 2px, transparent 2px 30px),
        repeating-radial-gradient(circle at 112% 24%,
            rgba(62, 194, 84, 0.60) 0 2px, transparent 2px 26px),
        repeating-radial-gradient(circle at 108% 92%,
            rgba(62, 194, 84, 0.45) 0 2px, transparent 2px 34px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 32%, transparent 68%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 32%, transparent 68%, #000 100%);
}

@keyframes fv-cash-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(2.5%, -2%) scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .fv-cash-bgfx::before { animation: none; }
}

@media (max-width: 640.98px) {
    .fv-cash-bgfx::before {
        animation: none;
        filter: blur(28px);
    }
}

/* --- Titel: Gruen-Verlaufstext mit Glow (wie Cash-Seitentitel) ------------- */
.fv-cash-title {
    margin: 0;
    font-family: var(--fv-font-display);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: linear-gradient(180deg, var(--fv-green-soft) 0%, var(--fv-green) 45%, var(--fv-green2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 32px rgba(42, 156, 60, 0.25);
}

.fv-cash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* Ruecksprung zum Checkin-Portal */
.fv-cash-back {
    color: var(--fv-mut);
    border: 1px solid var(--fv-line);
    border-radius: 999px;
    padding: 6px 14px;
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.03);
}

.fv-cash-back:hover {
    color: var(--fv-fg);
    border-color: var(--fv-green2);
}

/* --- Karten + Abschnitts-Ueberschriften (wie fv-card/fv-heading in Cash) --- */
.fv-cash .fv-card {
    background: linear-gradient(180deg, var(--fv-panel2) 0%, var(--fv-panel) 55%);
    border: 1px solid var(--fv-line);
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(62, 194, 84, 0.14),
        0 10px 28px rgba(0, 0, 0, 0.45);
    padding: 18px 20px;
    margin-top: 24px;
}

.fv-cash .fv-heading {
    margin: 0 0 14px;
    font-family: var(--fv-font-display);
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fv-green);
    padding-bottom: 6px;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, var(--fv-green2), var(--fv-ocker), transparent) 1;
}

.fv-cash .fv-heading::before {
    content: "\2605 ";
    color: var(--fv-ocker);
    font-size: 0.85em;
}

.fv-cash-hint { color: var(--fv-mut); }
.fv-cash-error { color: var(--fv-error); margin-top: 8px; }

/* --- Scan-Timeline in der Cash-Palette ------------------------------------ */
.fv-cash .fv-scan-timeline { display: grid; gap: 8px; }

.fv-cash .fv-scan-timeline-row {
    display: grid;
    grid-template-columns: 130px 100px minmax(160px, 1fr) minmax(180px, 1fr);
    gap: 10px;
    padding: 10px 12px;
    border-left: 5px solid var(--fv-slate-hi);
    border-radius: 0 6px 6px 0;
    background: rgba(255, 255, 255, 0.04);
}

.fv-cash .fv-scan-einlass { border-left-color: var(--fv-green); }
.fv-cash .fv-scan-garage  { border-left-color: var(--fv-ocker); }
.fv-cash .fv-scan-schicht { border-left-color: var(--fv-slate-hi); }

/* Gescannt, aber nicht eingeteilt (DxGrid-Zeile) */
.fv-cash .fv-scan-nicht-eingeteilt { background: rgba(255, 143, 160, 0.16) !important; }

@media (max-width: 640.98px) {
    .fv-cash .fv-scan-timeline-row { grid-template-columns: 110px 1fr; }
}