/* Pitlane Tools - Minimal app-specific styles */

/* ===== Mobile-Sidebar-Slide-In =====
   Hintergrund (siehe `wwwroot/js/tools-overlay-init.js`): Die Tailwind-Variante
   `hs-overlay-open:translate-x-0` ist im kompilierten Preline-Theme-CSS nicht
   enthalten — die Variante ist im Submodule-Tailwind-Config nicht registriert.
   Wir bringen das Verhalten app-lokal nach: `.opened` ist der Klassen-Anker,
   der vom Sidebar-Toggle gesetzt wird, und schiebt die Sidebar zurueck auf 0. */
#hs-werkzeugkiste-sidebar.opened {
    translate: 0 0;
}

/* ===== Preline-Dropdown sichtbar im offenen Zustand =====
   Gleiche Luecke wie oben: die Variante `hs-dropdown-open:opacity-100` ist im
   kompilierten Preline-Theme-CSS NICHT registriert → ein offenes hs-dropdown bleibt
   trotz `display:block` auf `opacity:0` (unsichtbar). Preline setzt beim Oeffnen die
   Klasse `.open` auf `.hs-dropdown` + `aria-expanded=true` auf den Toggle. App-lokaler
   Ersatz: offenes Menue sichtbar + bedienbar machen. Betrifft alle hs-dropdowns
   (Kebab/RowActionMenu, NotificationDropdown, Listen-Menues). Submodule unangetastet. */
.hs-dropdown.open > .hs-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
}

/* ===== iOS Safe-Area-Insets =====
   App.razor setzt `viewport-fit=cover` — damit reicht die Page bis unter die
   Notch/Home-Indicator. Ohne env(safe-area-inset-*)-Padding wuerde die Topbar
   auf iPhones mit Notch oben abgeschnitten + der Sidebar-Footer unten am
   Home-Indicator kleben. */
@supports (padding: env(safe-area-inset-top)) {
    /* Fixe Topbar (ToolsAppShell.razor:87) — auf iOS oben um Safe-Area-Top schieben. */
    header.fixed.top-0 {
        padding-top: env(safe-area-inset-top);
    }

    /* Sidebar-Footer (Logout-Button) — auf iOS unten um Safe-Area-Bottom schieben. */
    #hs-werkzeugkiste-sidebar > div > footer {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    /* Mobile-Detail-Pane in der Inbox — Back-Button-Header soll nicht hinter
       der iOS-Statusbar verschwinden, wenn die Inbox als Full-Screen wirkt. */
    #pitlane-inbox-content {
        padding-top: env(safe-area-inset-top);
    }
}

/* ===== Pitlane Design-Tokens (Redesign C0 — „Tokens zentral") =====
   Marken-Tokens als CSS-Custom-Properties. Werte-Quelle: PitlaneBrandingOptions
   (PrimaryColor #FFE500, AccentColor #F2DA02, SecondaryColor #111827) — siehe
   appsettings.json `Pitlane:Branding`.

   WARUM App-CSS-Utilities statt Tailwind-Arbitrary-Values (`bg-[#FFE500]`):
   Die Toolbox laedt ein VORKOMPILIERTES `main.min.css` OHNE Tailwind-JIT. Arbitrary
   values (`bg-[#FFE500]`) sind dort nicht enthalten und wuerden nicht rendern — die
   freigegebenen Mockups verwenden sie aber. Komponenten referenzieren daher diese
   Tokens/Utilities, NIEMALS hartkodierte Hex-Werte (Plan C0). Jede Mockup-Stelle
   mit `bg-[#FFE500]` wird in der Razor-Adaption durch `.pitlane-bg-brand` ersetzt.

   Freigabe: Agent-Council pal.clink-Codereview (Codex) vom 2026-06-06 — Ansatz
   bestaetigt; On-Brand-Textklasse + Tailwind-kompatibles Ring-Mapping ergaenzt.
   (Hinweis Codex: statische Tokens duplizieren Branding-Konfig — fuer C0 akzeptiert,
    da Lucky-Car-Farben statisch; spaeter ggf. aus Branding gerendert.) */
:root {
    --pitlane-brand: #FFE500;          /* Lucky-Car-Gelb (Primaer) */
    --pitlane-brand-strong: #F2DA02;   /* Akzent / Hover */
    --pitlane-brand-ink: #111827;      /* Lesbare Schrift AUF Gelb (gray-900) */
    --pitlane-brand-soft: #FEF9C3;     /* weiche Flaeche (amber-100-aequivalent) */
}

/* Marken-Flaeche (Primaer-Button, aktive Pill, ausgewaehlter Tab):
   gelb + dunkle Schrift. Schrift wird mitgesetzt, damit Weiss-auf-Gelb nie auftritt. */
.pitlane-bg-brand {
    background-color: var(--pitlane-brand);
    color: var(--pitlane-brand-ink);
}
.pitlane-bg-brand:hover {
    background-color: var(--pitlane-brand-strong);
}

/* Weiche Marken-Flaeche (Badge-Hintergrund, Hinweis-Box). */
.pitlane-bg-brand-soft {
    background-color: var(--pitlane-brand-soft);
    color: var(--pitlane-brand-ink);
}

/* Marken-Akzent als Rahmen / Leiste — Schrift bleibt unveraendert. */
.pitlane-border-brand { border-color: var(--pitlane-brand); }
.pitlane-accent-brand { background-color: var(--pitlane-brand); }

/* Schrift in Marken-Ink (dunkel) — explizit fuer Inhalte AUF Gelb, damit ein
   geerbtes `text-white` nie kontrastarm auf der Marke steht (Codereview-Empfehlung). */
.pitlane-text-on-brand { color: var(--pitlane-brand-ink); }

/* Fokus-Ring in Markenfarbe — Tailwind-/Preline-kompatibel ueber --tw-ring-color,
   plus Box-Shadow-Fallback fuer Kontexte ohne ring-Utility (Codereview-Empfehlung). */
.pitlane-ring-brand { --tw-ring-color: var(--pitlane-brand-strong); }
.pitlane-ring-brand:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--pitlane-brand-strong);
}