/* Wyld Management — design system */

/* ====================== Inter (self-hosted) ======================
   Inter Variable Font (OFL-Lizenz, https://rsms.me/inter/) — eine
   einzige Datei deckt alle Gewichte 100-900 + Italic ab. Lokal aus
   public/fonts/inter/ ausgeliefert, kein externer CDN, kein Tracking.
   `font-display: swap` zeigt sofort den System-Fallback und tauscht
   nahtlos sobald die woff2-Datei geladen ist (~340 KB cached forever).
================================================================== */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter/InterVariable.woff2') format('woff2-variations'),
         url('/fonts/inter/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter/InterVariable-Italic.woff2') format('woff2-variations'),
         url('/fonts/inter/InterVariable-Italic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ====================== Icons ======================
   SVG-Sprite-Pattern: <x-icon name="..."/> rendert ein <svg class="icon">
   mit <use href="/img/icons.svg#icon-NAME">. Stroke nutzt currentColor,
   Größe folgt der Schriftgröße — daher passt jedes Icon automatisch in
   Buttons, Headlines, Nav-Links ohne separate Größenklassen.

   Größen-Varianten für Stellen, wo das 1em-Defauft zu klein/groß ist:
     .icon-sm — 14px (Listentabellen, Mini-Buttons)
     .icon-md — 18px (Page-Titles, Card-Headers)
     .icon-lg — 22px (Hero-Bereiche)
*/
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    /* Sicherheits-Defaults falls ein Symbol mal ohne eigene Stroke-Attribute
       liegt — der Sprite setzt sie eigentlich pro <symbol>. */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon-sm { width: 14px; height: 14px; vertical-align: -2px; }

/* In Buttons soll das Icon konsistent neben Text sitzen ohne extra margin */
.btn .icon { vertical-align: -0.2em; margin-right: 6px; }
.btn .icon:last-child:not(:first-child) { margin-right: 0; margin-left: 6px; }
.btn-icon .icon { margin: 0; vertical-align: -0.2em; }

:root {
    /* Primary brand palette */
    --primary-orange: #fe5900;
    --primary-anthracite: #223439;

    --accent: var(--primary-orange);
    --accent-soft: #fff1e6;
    --accent-strong: #cc4700;

    /* Sidebar palette (derived from anthracite) */
    --sidebar-bg: var(--primary-anthracite);
    --sidebar-border: #2f4449;
    --sidebar-border-strong: #486068;
    --sidebar-hover: #2c4147;
    --sidebar-text: #c8d3d6;
    --sidebar-text-subtle: #7d9097;

    --bg: #f5f5f3;
    --surface: #ffffff;
    --surface-2: #fafaf8;
    --border: #e5e4e0;
    --text: #1b1b18;
    --text-muted: #706f6c;
    --text-subtle: #a1a09a;
    --red: #d94343;
    --yellow: #d4a206;
    --green: #2f9e44;
    --blue: #2563eb;
    --gray: #8a8a86;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 4px 12px rgba(0,0,0,0.06);

    /* === z-index Hierarchie (klein → groß) ===
       Content  · Banner  · FABs  · Toasts  · Modals  · Phase  · Party
       Werte sind absichtlich Lücken-frei dokumentiert, damit man immer
       weiß wo etwas hingehört. Magische 9999 sind hier verboten. */
    --z-content:        1;
    --z-banner:        60;   /* sticky-Banner (broadcast, admin-toolbar) */
    --z-banner-party:  70;   /* Party-Banner über andere Banner */
    --z-fab:         9990;   /* notification, clock, audit-tail */
    --z-toolbar:     9998;   /* admin-toolbar, nahe an FABs aber über content */
    --z-toast:      10000;   /* Flash-Toasts immer obenauf */
    --z-modal:      10500;   /* admin-modal-backdrop */
    --z-quickjump:  10600;   /* ⌘K Command-Palette über regulären Modals */
    --z-dialog:     10700;   /* app-dialog (Confirm-Ersatz) über regulären Modals */
    --z-broadcast-confirm: 10800; /* zweistufiger Broadcast-Confirm-Dialog */
    --z-overlay-party:    99999;  /* Konfetti-Wolke deckt fast alles */
    --z-overlay-phase:   100000;  /* Mode-Übergang über allem für 1.4s */
}

/* Dark theme: applied when [data-theme="dark"] OR [data-theme="system"]
   AND the OS prefers dark. Sidebar palette stays anthracite either way. */
:root[data-theme="dark"],
:root[data-theme="system"] {
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --bg: #14171a;
        --surface: #1d2125;
        --surface-2: #181c20;
        --border: #2a2f34;
        --text: #e8e8e6;
        --text-muted: #a8a8a4;
        --text-subtle: #6a6e72;
        --accent-soft: #3a2a1c;
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
        --shadow: 0 4px 14px rgba(0,0,0,0.45);
    }
}
:root[data-theme="dark"] {
    --bg: #14171a;
    --surface: #1d2125;
    --surface-2: #181c20;
    --border: #2a2f34;
    --text: #e8e8e6;
    --text-muted: #a8a8a4;
    --text-subtle: #6a6e72;
    --accent-soft: #3a2a1c;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
    --shadow: 0 4px 14px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Kleine Inter-Optimierungen: aktiviert Ligaturen und alternative
       Ziffern-Glyphen (z.B. "case-aligned" Großbuchstaben-Ziffern). */
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    font-optical-sizing: auto;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    /* Body selbst nicht scrollen — die Sidebar bleibt damit garantiert
       still, und nur der Inhaltsbereich (.main) scrollt intern. Sorgt
       außerdem dafür, dass FABs / Popovers ein stabiles Viewport haben. */
    overflow: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* Layout shell — feste Viewport-Höhe; nur .main scrollt intern,
   die Sidebar steht völlig still (siehe body { overflow: hidden }). */
/* Layout-Shell: schwebende Sidebar in einem 12px-Padding-Rahmen, dazwischen
   ein Gap. Sidebar wirkt damit als „Karte" abgesetzt vom Hintergrund, analog
   zu den Content-Cards (gleicher radius, gleiche shadow-Familie). */
.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: 100vh;
    padding: 12px;
    gap: 12px;
    box-sizing: border-box;
    transition: grid-template-columns 0.18s ease;
}
body.sidebar-collapsed .layout { grid-template-columns: 64px 1fr; }

/* Responsive: bei schmalen Viewports wird body.sidebar-collapsed via JS
   gesetzt (siehe layouts/app.blade.php — Inline-Script direkt nach <body>
   + Resize-Listener). Die Media Queries hier kümmern sich nur noch um die
   reduzierten Layout-Paddings und die schmalere Grid-Column für die
   Sidebar — die Sichtbarkeits-Regeln der Sidebar-Innenelemente kommen
   alle aus body.sidebar-collapsed-Selektoren weiter unten. */
@media (max-width: 980px) {
    .layout,
    body.sidebar-collapsed .layout { grid-template-columns: 56px 1fr; padding: 8px; gap: 8px; }
    /* Negative Margin gleich Layout-Padding, damit main weiter die volle
       Viewport-Höhe nutzt — sonst entstünde eine 4px-Diskrepanz. */
    .main { margin: -8px -8px -8px 0; padding: 0; }
    .main-fixed  { padding: 8px 14px 0; }
    .main-scroll { padding: 0 14px 96px; scroll-padding-bottom: 96px; }
}
@media (max-width: 560px) {
    /* Sehr schmal — Layout-Padding weiter reduziert, Sidebar bleibt schmal
       (Icon-only). Topbar wird flexibel umbrechend, Page-Actions wandern
       unter den Titel. */
    .layout,
    body.sidebar-collapsed .layout { padding: 6px; gap: 6px; grid-template-columns: 52px 1fr; }
    .main { margin: -6px -6px -6px 0; padding: 0; }
    .main-fixed  { padding: 6px 10px 0; }
    .main-scroll { padding: 0 10px 96px; scroll-padding-bottom: 96px; }
    .topbar {
        flex-wrap: wrap; gap: 8px;
        padding: 12px 14px;
    }
    .topbar-titles { flex: 1 1 100%; min-width: 0; }
    .topbar-actions { flex: 1 1 100%; flex-wrap: wrap; }
    .page-title { font-size: 17px; }
    .page-subtitle { font-size: 12px; }
}
.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex; flex-direction: column;
    padding: 16px 0;
    /* Sidebar selbst NICHT scrollen — Brand/Search bleiben oben,
       .sidebar-foot bleibt unten dauerhaft sichtbar. Nur .sidebar-nav
       darf intern scrollen (min-height: 0 + overflow-y: auto). */
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--sidebar-border);
}
/* Im eingeklappten Zustand wird das Logo selbst zum Toggle (siehe JS).
   Cursor wechselt entsprechend, dezenter Hover. */
body.sidebar-collapsed .brand-link {
    cursor: e-resize;
}
body.sidebar-collapsed .brand-link:hover .brand-logo-mark {
    transform: scale(1.04);
    transition: transform 0.18s ease;
}
.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 20px 18px;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 12px;
    position: relative;
    flex-shrink: 0;
}
.sidebar-toggle {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    width: 24px; height: 24px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1;
    padding: 0;
    transition: transform 0.18s ease, color 0.12s, border-color 0.12s;
}
.sidebar-toggle:hover { color: white; border-color: var(--sidebar-border-strong); }
body.sidebar-collapsed .sidebar-brand { padding: 8px 12px 18px; justify-content: center; }
/* Chevron-Button im eingeklappten Zustand ausblenden — das Logo selbst
   übernimmt die Toggle-Rolle. */
body.sidebar-collapsed .sidebar-toggle { display: none; }
.brand-link {
    display: inline-flex; align-items: center;
    line-height: 0;
    flex: 1;
    min-width: 0;
}
.brand-logo { display: block; height: 28px; width: auto; max-width: 100%; }
.brand-logo-mark { display: none; height: 32px; }
body.sidebar-collapsed .brand-logo-full { display: none; }
body.sidebar-collapsed .brand-logo-mark { display: block; }
/* Toast Notifications — Stack oben rechts */
.toast-container {
    position: fixed;
    top: 16px; right: 16px;
    display: flex; flex-direction: column;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
    max-width: 380px;
    width: calc(100vw - 32px);
}
.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-muted);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
    padding: 12px 14px 12px 14px;
    display: flex; align-items: flex-start; gap: 10px;
    pointer-events: auto;
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s;
    position: relative;
    overflow: hidden;
}
.toast.toast-visible { transform: translateY(0); opacity: 1; }
.toast.toast-leaving { transform: translateY(-8px); opacity: 0; }
/* "merging" = sanftes Wegfliegen Richtung Drawer wenn das Notification-Center geöffnet wird */
.toast.toast-merging {
    transform: translateX(110%) scale(0.96);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.4, 0, 1, 1), opacity 0.28s;
}
.toast-success { border-left-color: var(--green); }
.toast-info    { border-left-color: var(--blue); }
.toast-warning { border-left-color: var(--yellow); }
.toast-error   { border-left-color: var(--red); }
.toast-icon { font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.toast-text { flex: 1; min-width: 0; }
.toast-title { font-weight: 600; color: var(--text); font-size: 14px; line-height: 1.3; }
.toast-message { color: var(--text-muted); font-size: 12px; margin-top: 2px; line-height: 1.4; }
.toast-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 18px; line-height: 1;
    padding: 0; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.toast-close:hover { color: var(--text); }
.toast-progress {
    position: absolute; bottom: 0; left: 0;
    height: 2px; background: var(--accent);
    width: 100%;
    transform-origin: left;
    animation: toast-progress 10s linear forwards;
}
@keyframes toast-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Floating Notification Bell (FAB unten rechts) */
.notification-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(254, 89, 0, 0.35);
    z-index: 9998;
    transition: transform 0.15s, box-shadow 0.15s;
}
.notification-fab:hover { transform: scale(1.08); box-shadow: 0 8px 22px rgba(254, 89, 0, 0.45); }
/* Icon-Wrapper als eigener Flex-Centerer + SVG-Größe explizit + vertical-align
   zurücksetzen, damit der Lucide-Stroke perfekt im Kreis sitzt. */
.notification-fab-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; line-height: 1;
}
.notification-fab-icon svg.icon,
.notification-fab .icon { width: 24px; height: 24px; vertical-align: 0; }

/* Stempeluhr-FAB — links neben dem Notification-Bell */
.clock-fab {
    position: fixed;
    bottom: 24px; right: 88px;  /* 24 + 56 + 8 = links vom Bell */
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #6b7280;  /* default: clocked_out */
    color: white;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    z-index: 9998;
    transition: transform 0.15s, box-shadow 0.15s, background 0.25s;
    position: fixed;
}
.clock-fab:hover { transform: scale(1.08); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); }
.clock-fab-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; line-height: 1;
}
.clock-fab-icon svg.icon,
.clock-fab .icon { width: 24px; height: 24px; vertical-align: 0; }
.clock-fab[data-status="clocked_in"] {
    background: #16a34a;  /* grün — Arbeit läuft */
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.4);
}
.clock-fab[data-status="on_break"] {
    background: #f59e0b;  /* gelb — Pause */
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.clock-popover {
    position: fixed;
    bottom: 90px; right: 88px;
    width: 320px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    padding: 14px;
    z-index: 9999;
}
.clock-popover-head {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.clock-popover-head strong { font-size: 14px; color: var(--text); }
.clock-popover-time { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.clock-popover-day { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; }
.clock-pop-stat { display: flex; justify-content: space-between; }
.clock-pop-stat span { color: var(--text-muted); }
.clock-pop-stat strong { font-variant-numeric: tabular-nums; }
.clock-pop-empty { color: var(--text-muted); font-size: 12px; font-style: italic; }
.clock-popover-warning {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    color: #7a5615;
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.clock-popover-actions { display: flex; flex-direction: column; gap: 6px; }
.clock-popover-actions .btn { justify-content: center; width: 100%; }
.clock-popover-footer {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
/* Footer-Buttons gleichmäßig auf die Breite verteilen — wirken so wie ein
   Pair, statt zwei lose Text-Links. */
.clock-popover-footer .btn { flex: 1; justify-content: center; }

/* ---------- Ticket-Stoppuhr im Stempeluhr-Popover ---------- */
/* Eigene Optik: kein Card-im-Card, sondern flach ins Popover integriert.
   Eine schmale Trennlinie + zarte Section-Überschrift grenzen sie von
   den Arbeitszeit-Aktionen ab. */
.sw-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.sw-section[hidden] { display: none; }
.sw-section-head {
    display: flex; align-items: baseline; gap: 6px;
    margin-bottom: 8px;
}
.sw-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
}
/* Popover-Variante überschreibt das alte Sidebar-Styling vollständig.
   Keine eigene Box, kein eigener Hintergrund — fließt direkt im Popover. */
.stopwatch-popover {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}

/* Time-Display + Start/Pause-Buttons in einer Zeile */
.stopwatch-popover .sw-top {
    display: flex; gap: 6px; align-items: stretch;
}
.stopwatch-popover .stopwatch-display {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.stopwatch-popover .stopwatch-display:hover {
    border-color: var(--accent);
    background: var(--surface);
}
.stopwatch-popover.is-running .stopwatch-display {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(254, 89, 0, 0.06);
}
.stopwatch-popover .stopwatch-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}
.stopwatch-popover.is-running .stopwatch-dot {
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(254, 89, 0, 0.5);
    animation: sw-pulse 1.4s ease-in-out infinite;
}
.stopwatch-popover .stopwatch-controls { display: flex; gap: 4px; }
.stopwatch-popover .sw-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0 10px;
    min-width: 36px;
    height: auto;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    display: inline-flex; align-items: center; justify-content: center;
}
.stopwatch-popover .sw-btn:hover:not(:disabled) {
    background: var(--surface);
    color: var(--text);
    border-color: var(--accent);
}
.stopwatch-popover .sw-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.stopwatch-popover .sw-btn-start { color: var(--green, #2f9e44); }
.stopwatch-popover .sw-btn-start:hover:not(:disabled) {
    border-color: var(--green, #2f9e44);
    background: rgba(47, 158, 68, 0.08);
}
.stopwatch-popover .sw-btn-pause { color: var(--yellow, #d4a206); }
.stopwatch-popover .sw-btn-pause:hover:not(:disabled) {
    border-color: var(--yellow, #d4a206);
    background: rgba(212, 162, 6, 0.08);
}

/* Inputs: kompakt, neutral, gleicher Look wie .list-filter-row Inputs */
.stopwatch-popover .stopwatch-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.stopwatch-popover .sw-input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 9px;
    border-radius: 6px;
    font: inherit;
    font-size: 12.5px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.stopwatch-popover .sw-input::placeholder { color: var(--text-muted); }
.stopwatch-popover .sw-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(254, 89, 0, 0.12);
}
.stopwatch-popover .sw-textarea { resize: vertical; min-height: 44px; font-family: inherit; line-height: 1.35; }
.stopwatch-popover .sw-ticket-row { display: flex; gap: 4px; align-items: stretch; }
.stopwatch-popover .sw-ticket-row .sw-input { flex: 1; min-width: 0; }
.stopwatch-popover .sw-ticket-open {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    flex-shrink: 0;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.stopwatch-popover .sw-ticket-open:hover {
    color: var(--accent); border-color: var(--accent); background: var(--surface-2);
}
.stopwatch-popover .sw-ticket-open[hidden] { display: none; }

/* Save-Button: primäre Aktion, volle Breite, akzentuiert */
.stopwatch-popover .sw-btn-save {
    width: 100%;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: white;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    min-width: 0;
    transition: background 0.12s, border-color 0.12s;
}
.stopwatch-popover .sw-btn-save:hover:not(:disabled) {
    background: var(--accent-strong, var(--accent));
    border-color: var(--accent-strong, var(--accent));
}

.stopwatch-popover .sw-status {
    min-height: 14px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}
.stopwatch-popover .sw-status[data-kind="ok"] { color: var(--green, #2f9e44); }
.stopwatch-popover .sw-status[data-kind="warn"] { color: var(--yellow, #d4a206); }
.stopwatch-popover .sw-status[data-kind="err"] { color: var(--red, #e03131); }
.notification-fab-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--red); color: white;
    font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--surface);
}

/* Wenn ungelesene da sind: pulsierender Ring + Bounce alle paar Sekunden */
.notification-fab.has-unread {
    animation: fab-bounce 6s ease-in-out infinite;
}
.notification-fab.has-unread::before {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    animation: fab-pulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes fab-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}
@keyframes fab-bounce {
    0%, 70%, 100% { transform: translateY(0); }
    74% { transform: translateY(-10px); }
    78% { transform: translateY(0); }
    82% { transform: translateY(-6px); }
    86% { transform: translateY(0); }
}
.notification-fab.has-unread:hover { animation-play-state: paused; transform: scale(1.08); }

/* Slide-over Drawer */
.notification-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9990;
    opacity: 0;
    transition: opacity 0.25s;
}
.notification-drawer-backdrop.is-open { opacity: 1; }

/* Floating-Card-Variante: 12px-Frame zu allen Seiten (passend zum
   Layout-Padding), Border + Radius + Shadow rundherum. Slide-In bleibt
   horizontal, aber mit etwas Offset damit die Karte „reinschwebt"
   statt aus dem Bildschirm zu kleben. */
.notification-drawer {
    position: fixed;
    top: 12px; right: 12px; bottom: 12px;
    width: 400px; max-width: calc(100vw - 24px);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    z-index: 9999;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateX(calc(100% + 24px));
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.notification-drawer.is-open { transform: translateX(0); }
.notification-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.notification-drawer-title {
    margin: 0;
    font-size: 15px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notification-drawer-actions {
    display: flex;
    gap: 4px;
    flex: none;
}
.notification-perm-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    background: rgba(254, 89, 0, 0.08);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
}
.notification-perm-banner[hidden] { display: none; }
.notification-perm-banner > span { flex: 1; min-width: 0; }
.notification-perm-banner > button { flex-shrink: 0; }
.notification-drawer-body {
    flex: 1; overflow-y: auto;
}
.notification-empty { padding: 36px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Notification-Center-Items teilen das Design der Toasts (gleiche Karten-Optik
   mit linksseitiger Level-Border und Icon-Layout). */
.notification-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-muted);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 12px 14px;
    margin: 10px 14px;
    display: flex; align-items: flex-start; gap: 10px;
    text-decoration: none; color: inherit;
    transition: background 0.12s, box-shadow 0.12s;
    position: relative;
}
.notification-item:hover {
    background: var(--surface-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.notification-item.level-success { border-left-color: var(--green); }
.notification-item.level-info    { border-left-color: var(--blue); }
.notification-item.level-warning { border-left-color: var(--yellow); }
.notification-item.level-error   { border-left-color: var(--red); }
.notification-item.is-unread { background: var(--accent-soft); }
.notification-item.is-unread .notification-item-title { font-weight: 600; }
.notification-item.is-unread::after {
    content: '';
    position: absolute; top: 14px; right: 36px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
}
.notification-item-icon { font-size: 18px; flex-shrink: 0; line-height: 1.2; }
.notification-item-body { flex: 1; min-width: 0; }
.notification-item-title { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--text); }
.notification-item-msg { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.notification-item-ago { font-size: 11px; color: var(--text-muted); margin-top: 4px; opacity: 0.7; }
.notification-item-dismiss {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 18px; line-height: 1;
    padding: 0; width: 22px; height: 22px;
    align-self: flex-start; flex-shrink: 0;
}
.notification-item-dismiss:hover { color: var(--red); }

/* Globale Sidebar-Suche */
.sidebar-search {
    position: relative;
    padding: 10px 8px 6px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}
.sidebar-search input[type="search"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--sidebar-text);
    border: 1px solid var(--sidebar-border);
    border-radius: 6px;
    padding: 7px 36px 7px 28px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: background 0.15s, border-color 0.15s;
}
.sidebar-search input[type="search"]::placeholder { color: var(--sidebar-text-subtle); }
.sidebar-search input[type="search"]:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--sidebar-border-strong);
}
.sidebar-search-icon {
    position: absolute;
    left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--sidebar-text-subtle);
    font-size: 13px;
    pointer-events: none;
}
/* Eingeklappte Sidebar: Suchleiste wird zum reinen Icon-Button. Eingabe-
   feld, Kbd-Hint und Resultate werden komplett ausgeblendet — Klick aufs
   Lupen-Icon klappt die Sidebar wieder auf (siehe JS in app.blade.php). */
body.sidebar-collapsed .sidebar-search {
    padding: 4px 12px 12px;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 8px;
}
body.sidebar-collapsed .sidebar-search input[type="search"],
body.sidebar-collapsed .sidebar-search .sidebar-search-kbd,
body.sidebar-collapsed .sidebar-search .sidebar-search-results,
body.sidebar-collapsed .sidebar-search .sidebar-search-icon {
    display: none;
}
body.sidebar-collapsed .sidebar-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    background: transparent;
    border: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
body.sidebar-collapsed .sidebar-search-btn:hover {
    background: var(--sidebar-hover);
    color: white;
    border-color: var(--sidebar-border-strong);
}
body.sidebar-collapsed .sidebar-search-btn .icon { width: 16px; height: 16px; }
/* Im aufgeklappten Zustand bleibt der Button-Trigger unsichtbar */
.sidebar-search-btn { display: none; }

/* Sidebar Quick-Actions — Capture-Pattern direkt unter der Suche */
.sidebar-quick {
    display: flex; gap: 6px;
    padding: 8px 14px 12px;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 8px;
}
.sidebar-quick-btn {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px;
    background: transparent;
    border: 1px solid var(--sidebar-border);
    border-radius: 6px;
    color: var(--sidebar-text);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sidebar-quick-btn:hover {
    background: var(--sidebar-hover);
    border-color: var(--sidebar-border-strong);
    color: #fff;
}
.sidebar-quick-icon { font-size: 18px; line-height: 1; }
svg.sidebar-quick-icon { width: 18px; height: 18px; stroke-width: 1.8; }
.sidebar-quick-label { font-size: 10px; letter-spacing: 0.02em; }
.sidebar-quick-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: white;
    font-size: 9px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Collapsed: nur Icon, kein Label */
body.sidebar-collapsed .sidebar-quick {
    padding: 8px 6px;
    flex-direction: column;
    gap: 4px;
}
body.sidebar-collapsed .sidebar-quick-btn {
    padding: 8px 0;
}
body.sidebar-collapsed .sidebar-quick-label { display: none; }

.sidebar-search-results {
    position: absolute;
    top: 100%; left: 8px; right: 8px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 100;
    margin-top: 4px;
}
.sidebar-search-empty { padding: 14px; color: var(--text-muted); font-size: 13px; text-align: center; }
.sidebar-search-group {
    padding: 8px 12px 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
.sidebar-search-group:first-child { border-top: none; }
.sidebar-search-item {
    display: block;
    padding: 8px 12px;
    color: var(--text);
    text-decoration: none;
    border-top: 1px solid var(--border);
}
.sidebar-search-item:first-of-type { border-top: none; }
.sidebar-search-item:hover,
.sidebar-search-item.is-active { background: var(--accent-soft); }
.sidebar-search-item-title { font-size: 13px; font-weight: 500; }
.sidebar-search-item-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.sidebar-nav {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    padding: 0 8px; gap: 2px;
    overflow-y: auto; overflow-x: hidden;
    /* Schmaler Scrollbar passend zum dunklen Sidebar-Look */
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border-strong) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--sidebar-border);
    border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--sidebar-border-strong); }
.nav-section {
    color: var(--sidebar-text-subtle);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 14px 12px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: color 0.12s;
}
.nav-section:hover { color: var(--sidebar-text); }
.nav-section > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.nav-section-chevron {
    display: inline-block;
    transition: transform 0.15s, opacity 0.15s;
    font-size: 13px;
    opacity: 0.85;
    margin-left: auto;
    padding: 0 4px;
    line-height: 1;
}
.nav-section:hover .nav-section-chevron { opacity: 1; }
.nav-section.is-collapsed .nav-section-chevron { transform: rotate(-90deg); }
.nav-section-cog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    color: var(--sidebar-text-subtle);
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.nav-section-cog:hover { background: var(--sidebar-hover); color: white; }
.nav-section-cog.is-active { background: var(--accent); color: white; }
.nav-link {
    display: flex; align-items: center; gap: 10px;
    color: var(--sidebar-text);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.nav-link:hover { background: var(--sidebar-hover); color: white; }
.nav-link.is-active { background: var(--accent); color: white; }
.nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Wenn nav-icon ein SVG (Lucide) ist statt Emoji, soll es Stroke-Currentcolor nutzen
   und exakt die definierte Größe haben (überschreibt das 1em-Default von .icon). */
svg.nav-icon { width: 18px; height: 18px; vertical-align: middle; }
.nav-label { overflow: hidden; }
body.sidebar-collapsed .nav-link { justify-content: center; padding: 8px; }
body.sidebar-collapsed .nav-label { display: none; }
body.sidebar-collapsed .nav-section { display: none; }
body.sidebar-collapsed .badge { display: none; }
body.sidebar-collapsed .sidebar-nav { padding: 0 6px; }
.badge {
    margin-left: auto;
    background: rgba(255,255,255,0.18);
    color: white;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.nav-link.is-active .badge { background: rgba(0,0,0,0.18); }
.sidebar-foot {
    border-top: 1px solid var(--sidebar-border);
    padding: 12px;
    margin-top: 12px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
}
.user-chip {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    color: inherit; text-decoration: none;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    transition: background 0.12s;
}
.user-chip:hover { background: var(--sidebar-hover); color: inherit; }
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    color: white; font-weight: 600; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-lg { width: 72px; height: 72px; font-size: 22px; }
.avatar-edit {
    display: flex; gap: 16px; align-items: center;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
}
.avatar-edit-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.avatar-edit-fields .form-row { margin: 0; }
.avatar-edit-fields .form-row > span {
    display: block;
    font-size: 11px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 4px;
}
/* line-height 1.4 statt 1.2 — sonst beißt overflow:hidden Descender
   wie g / p / y in der unteren Linie ab. */
.user-meta { line-height: 1.4; min-width: 0; overflow: hidden; }
.user-name { font-size: 13px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: var(--sidebar-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-actions {
    display: flex; gap: 6px; margin-top: 12px;
}
.sidebar-action-form { flex: 1; display: flex; margin: 0; padding: 0; }
.sidebar-action {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    padding: 6px 10px;
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.sidebar-action:hover { background: var(--sidebar-hover); color: white; border-color: var(--sidebar-border-strong); }
.sidebar-action .nav-icon { width: 14px; font-size: 13px; }


body.sidebar-collapsed .sidebar-foot { padding: 12px 8px; }
body.sidebar-collapsed .user-chip { justify-content: center; }
body.sidebar-collapsed .user-meta { display: none; }
body.sidebar-collapsed .sidebar-actions { flex-direction: column; gap: 4px; }
body.sidebar-collapsed .sidebar-action { padding: 6px; }
body.sidebar-collapsed .sidebar-action .nav-label { display: none; }

/* Main area — bricht VERTIKAL aus dem 12px-Layout-Padding aus, damit
   die scrollbare Fläche die volle Viewport-Höhe nutzt. Die Sidebar
   floatet weiter mit ihrem Rahmen, weil sie das Padding-Frame der
   Layout-Shell mitmacht. Negative Margins extendieren main über die
   Grid-Cell-Grenzen hinaus; inner padding (12px oben/unten) gibt dem
   Content trotzdem Atemraum, damit Topbar nicht direkt am Edge klebt. */
.main {
    margin: -12px -12px -12px 0;
    height: 100vh;
    box-sizing: border-box;
    /* .main selbst scrollt NICHT mehr. Es ist nur noch der Flex-Container
       für die zwei Zonen .main-fixed (oben, fix) und .main-scroll (unten,
       scrollbar). So bleiben Banner + Topbar dauerhaft im Viewport. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
/* Obere Zone: Banner-Stack + Topbar. Scrollt nicht mit, bleibt fix
   oben. Horizontales + oberes Padding kommt hier rein, damit die
   Karten-Optik der Topbar sauber im Layout-Rahmen sitzt. */
.main-fixed {
    flex: 0 0 auto;
    padding: 12px 28px 0;
    box-sizing: border-box;
    /* Damit die Sticky-Stat-Kacheln darunter beim Scrollen sauber UNTER
       diese Zone gleiten und nicht hindurchscheinen — sie haben eigenen
       Background, .main-fixed liegt davor in z-Reihenfolge. */
    position: relative;
    z-index: 10;
}
/* Untere Zone: einziger Scroll-Container. Bottom-Padding ist groß (96px)
   damit FABs (notification-fab + clock-fab, je 56×56 mit bottom: 24px)
   am unteren Viewport-Rand keinen Content verdecken. */
.main-scroll {
    flex: 1 1 auto;
    min-height: 0;        /* sonst kollabiert flex-Kind nicht und scrollt nicht */
    padding: 0 28px 96px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    /* Anker-Sprünge sollen nicht hinter Sticky-Stat-Kacheln landen — die
       paar Pixel reichen, weil die fixe Topbar schon außerhalb des Scroll-
       Bereichs liegt. */
    scroll-padding-top: 8px;
    scroll-padding-bottom: 96px;
}
/* Stat-Card-Kacheln am Anfang der Content-Spalte werden an die Oberkante
   geheftet. :has(.stat-card) sorgt dafür, dass „normale" Card-Grids
   (z.B. auf Show-Seiten) NICHT ungewollt sticky werden.
   Kein extra Padding/Margin: damit JS exakt offsetHeight + flex-gap + 1px
   border = thead.natural-Y rechnen kann und der Thead ohne Jitter
   einrastet. */
.content > .cards-grid:first-child:has(.stat-card) {
    position: sticky;
    top: 0;
    z-index: 8;  /* ÜBER dem Sticky-Thead (z=7): wenn der Thead nach dem
                    Tabellen-Ende „entrastet" und nach oben scrollt, soll
                    er hinter den Stat-Kacheln verschwinden, nicht über
                    sie hinweg bis zur Topbar gleiten. */
    background: var(--bg);
}
/* Topbar als schwebende Karte — Optik passt zur Sidebar und zu den Cards.
   Vorher hatte sie nur eine Bottom-Border, was bei schwebender Sidebar
   visuell unstimmig wirkte. */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
}
.topbar-titles-wrap { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.topbar-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Zurück-Button links neben Page-Title. Wird automatisch vom Layout
   eingeblendet wenn die aktuelle Route nach Resource-Konvention einen
   logischen Parent hat (*.show → *.index, *.edit → *.show / *.index,
   *.create → *.index). Override per @section('back_url'/'back_hide'). */
.page-title-back {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    background: var(--bg);
    text-decoration: none;
    flex: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
}
.page-title-back:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
    transform: translateX(-2px);
}
.page-title-back .icon { width: 18px; height: 18px; }

.page-title { font-size: 20px; font-weight: 600; margin: 0; }
.page-title .icon, .page-title svg.icon, svg.page-title-icon {
    width: 22px; height: 22px;
    vertical-align: -4px;
    stroke-width: 1.8;
    color: var(--accent);
    margin-right: 8px;
}
.page-subtitle { font-size: 14px; color: var(--text-muted); }
.page-subtitle a { color: var(--accent); font-weight: 600; }
.page-subtitle a:hover { color: var(--accent-strong); text-decoration: underline; }
.topbar-actions { display: flex; gap: 8px; align-items: flex-start; }
.content { display: flex; flex-direction: column; gap: 18px; }

/* Admin-Bereich (Routes admin.*, roles.*, users.*, audit.*): Content-
   Spalte wird auf 900 px begrenzt + zentriert. Konsistent mit der
   .form-narrow-Konvention für Einzelspalten-Formulare. Geltungsbereich
   wird über die `is-admin-area`-Body-Class aus layouts/app.blade.php
   gesteuert; siehe Kommentar dort. */
body.is-admin-area .content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px; font-weight: 500;
    /* box-sizing explizit: <button>-Elemente erben UA-Default border-box,
       <a> nutzt content-box vom globalen Default. Bei expliziter width/
       height (z.B. Topbar-Icon-Only-Buttons) ergibt das sonst je 1px
       Differenz pro Border → Button rendert sichtbar tiefer als der
       Link daneben. Border-box vereinheitlicht beides. */
    box-sizing: border-box;
    /* line-height explizit setzen — sonst rendern <button>-Elemente
       browserseitig mit line-height:normal (= ~15px bei 13px Schrift),
       während <a class="btn"> die 1.5 vom Body erbt → sichtbarer
       Höhen-Unterschied. */
    line-height: 1.5;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all 0.1s;
}
.btn:hover { border-color: var(--text); color: var(--text); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: white; }
.btn-danger { background: var(--red); border-color: var(--red); color: white; }
.btn-danger:hover { background: #b13333; color: white; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* Topbar-Primary-Buttons systemweit als Icon-Only. Text bleibt im DOM
   (für Screen-Reader + title-Tooltip), wird aber visuell auf 0 gesetzt;
   <svg.icon> behält seine Größe über width/height.
   Selector [title]: nur Buttons mit Hover-Tooltip — das markiert die
   echten Action-Buttons. Tab-/Toggle-Buttons (clock-Index: Heute/Woche/
   Monat) und Filter-Panel-Buttons („Anwenden") haben kein title und
   bleiben mit Label sichtbar. */
/* Topbar-Actions: feste min-height + Kinder vertikal zentrieren statt
   flex-start. Damit hat der Container immer die gleiche Cross-Size,
   egal ob ein einzelner Icon-Only-Button drin sitzt (34px) oder ein
   Filter+Primary-Kombo (~35-36px). Sub-Pixel-Rundung beim Top-Level-
   Centering der Topbar führte sonst zu 0.5-1px Versatz wenn der
   Primary-Button alleine in den Actions stand (z.B. Telefonnotizen). */
.topbar-actions { min-height: 36px; align-items: center; }

/* Quadratischer Icon-Only-Button. 34×34px, Text bleibt im DOM auf
   font-size:0; gap:0 + justify-content:center sorgen dafür dass das
   Icon trotz unsichtbarem Text-Knoten exakt mittig sitzt. */
.topbar-actions .btn-primary[title] {
    font-size: 0;
    line-height: 1;
    gap: 0;
    margin: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
}
/* .icon ist normalerweise 1em groß — mit font-size:0 würde es auf 0×0
   schrumpfen und unsichtbar werden. Explizite Pixel-Größe macht
   das Icon wieder sichtbar. */
.topbar-actions .btn-primary[title] .icon {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Dropdown-Menü (HTML <details>) */
.dropdown-menu { position: relative; display: inline-block; }
.dropdown-menu > summary {
    list-style: none;
    user-select: none;
}
.dropdown-menu > summary::-webkit-details-marker { display: none; }
.dropdown-menu > summary::marker { content: ''; }
.dropdown-menu[open] > summary { border-color: var(--accent); color: var(--accent); }
.dropdown-menu-list {
    position: absolute;
    top: calc(100% + 4px); right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 320px;
    list-style: none;
    margin: 0; padding: 4px;
    z-index: 100;
}
.dropdown-menu-list li { margin: 0; }
.dropdown-menu-list a,
.dropdown-menu-list button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    color: var(--text);
    text-decoration: none;
    background: none; border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    transition: background 0.1s;
}
.dropdown-menu-list a:hover,
.dropdown-menu-list button:hover { background: var(--surface-2); }
.dropdown-menu-list strong { display: block; font-weight: 600; color: var(--text); }
.dropdown-menu-list span { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}
.card h2, .card h3 { margin: 0 0 12px; font-size: 15px; }

/* Icon vor einer Card-Headline — dezent, in Akzentfarbe. Gilt sowohl wenn
   das Icon als <x-icon class="card-h-icon"/> in einem <h3> sitzt als auch
   wenn ein bloßes <svg> direkt im h3 platziert ist (Skript-Migration). */
.card h2 svg.card-h-icon, .card h3 svg.card-h-icon,
.card h2 > svg.icon:first-child, .card h3 > svg.icon:first-child {
    width: 16px; height: 16px;
    color: var(--accent);
    vertical-align: -3px;
    margin-right: 6px;
    flex-shrink: 0;
}

.cards-grid {
    display: grid;
    /* Default-Min: 240px — bei <980px greift max 2 Kacheln, <600px nur 1.
       Vorher waren 180px → drei Kacheln passten auch noch bei sehr engen
       Viewports und sahen gequetscht aus. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
@media (max-width: 980px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cards-grid { grid-template-columns: 1fr; }
    .stat-card { height: auto; min-height: 100px; }
}
.stat-card {
    display: flex;
    flex-direction: column;
    min-height: 120px;     /* statt fixe height — Karten mit stat-sub
                              (z.B. Arbeitszeiten „Arbeit heute") brauchen
                              etwas mehr Platz und sollen nicht clippen */
    overflow: hidden;
    position: relative;    /* Anker für stat-card-icon oben rechts */
}
.stat-card .stat-value { font-size: 26px; font-weight: 700; margin-top: 4px; }
.stat-card .stat-label { color: var(--text-muted); font-size: 12px; padding-right: 32px; }

/* Dezenter Kontext-Hinweis oben rechts in der Kachel.
   Folgt currentColor; pro Kachel wird die Farbe ggf. inline gesetzt. */
.stat-card-icon {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 22px;
    height: 22px;
    color: var(--accent);
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.12s, transform 0.12s;
}
.stat-card-link:hover .stat-card-icon { opacity: 0.9; transform: scale(1.05); }

/* Tables */
/* `overflow: clip` statt `hidden` — clip schneidet weiterhin sauber an den
   abgerundeten Ecken, erzeugt aber KEINEN Scroll-Container. Damit kann der
   sticky <th> seinen Scroll-Anker bis zu .main-scroll durchreichen und
   beim Scrollen am oberen Rand kleben bleiben.

   KEINE 1px-border am Wrapper: die liefe sonst vertikal an der Seite
   neben dem Sticky-Thead und wäre auf jeder Index-Seite mit Tabelle
   sichtbar (das war das „schmale Striche links/rechts"-Problem). Die
   Tabelle hebt sich auch ohne Border klar vom Body-Background ab —
   Surface (#fff bzw. #1d2125) vs Body (#f5f5f3 bzw. #14171a). */
.table-wrap { background: var(--surface); border-radius: var(--radius-lg); overflow: clip; }
/* border-collapse: separate (statt collapse) — sonst rendert
   border-radius an einzelnen Zellen nicht. Wird gebraucht, damit der
   Sticky-Thead seine Eck-Rundungen behält, wenn der Wrapper darüber
   rausscrollt. border-spacing: 0 hält das Bild visuell identisch zu
   collapse. */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.table th {
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    height: 38px;
    line-height: 1;
    vertical-align: middle;
}
/* Sticky Thead NUR für Tabellen in .table-wrap. Rohe <table class="table">
   in .card oder anderen Containern (z.B. clock/index, customers/show)
   scrollen normal mit ihrem Container — sonst entstünden Notch- und
   Hintergrund-Artefakte, weil das ::before-Eckmasking var(--bg) annimmt
   und die Karten-Hintergründe var(--surface) sind.

   Wenn die Seite oben Stat-Kacheln hat, stapelt sich der Thead darunter
   — die Variable wird per JS aus der Höhe des Sticky-Stat-Blocks + Flex-
   Gap gesetzt (siehe layouts/app.blade.php). Default 1px kompensiert
   sub-pixel-Rendering. z-index 7 sitzt ÜBER dem Sticky-Stats-Block
   (z=6), damit der Thead trotz dessen Padding-Overlay sichtbar bleibt. */
.table-wrap .table thead th {
    position: sticky;
    top: var(--sticky-stack-top, 1px);
    z-index: 7;
}
/* Sticky-Thead mit Eck-Rundungen.
   Für Index-Seiten, wo cards-grid direkt vor der Tabelle steht
   (z.B. Tickets), deckt das Stats-Overlay die komplette Thead-Höhe
   ab und kümmert sich um den Notch außerhalb der Rundung.
   Für Index-Seiten mit Zwischensektionen (z.B. Abrechnung: h2's
   zwischen Stat-Kacheln und mehreren Tabellen) gibt es kein
   Stats-Overlay über dem Thead — der Eck-Notch würde sonst Tbody-
   Zeilen durchscheinen lassen. Lösung: ::before am Eck-th mit
   radialem Gradient maskiert das Eck-Dreieck selber mit var(--bg).
   Bei Tickets ist das harmlos redundant (Stats deckt ohnehin ab),
   bei Abrechnung übernimmt das Pseudo die Maskierung. */
.table-wrap .table thead tr:first-child th:first-child {
    border-top-left-radius: var(--radius-lg);
}
.table-wrap .table thead tr:first-child th:last-child {
    border-top-right-radius: var(--radius-lg);
}
.table-wrap .table thead tr:first-child th:first-child::before,
.table-wrap .table thead tr:first-child th:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    width: var(--radius-lg);
    height: var(--radius-lg);
    pointer-events: none;
}
.table-wrap .table thead tr:first-child th:first-child::before {
    left: 0;
    background: radial-gradient(circle at bottom right,
                                transparent var(--radius-lg),
                                var(--bg) var(--radius-lg));
}
.table-wrap .table thead tr:first-child th:last-child::before {
    right: 0;
    background: radial-gradient(circle at bottom left,
                                transparent var(--radius-lg),
                                var(--bg) var(--radius-lg));
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr[data-row-href] { cursor: pointer; }
.table tbody tr[data-row-href]:hover { background: var(--accent-soft); }

/* Toggle Switch (Checkbox als Slider) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px; height: 22px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-switch .slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 22px;
    transition: background 0.15s, border-color 0.15s;
}
.toggle-switch .slider::before {
    position: absolute; content: "";
    height: 16px; width: 16px;
    left: 2px; bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: transform 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .slider {
    background: var(--accent);
    border-color: var(--accent);
}
.toggle-switch input:checked + .slider::before {
    transform: translateX(20px);
}
.toggle-switch input:focus-visible + .slider {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Permission list — gruppierte Schalter mit Beschreibung */
.permission-group { margin-bottom: 18px; }
.permission-group-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.permission-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
}
.permission-row:last-child { border-bottom: none; }
.permission-row-text { flex: 1; min-width: 0; }
.permission-row-label { font-weight: 500; color: var(--text); }
.permission-row-desc { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.permission-row-code {
    font-family: ui-monospace, monospace;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
    margin-left: 6px;
}

/* Pills / status */
.pill {
    display: inline-block; padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px; font-weight: 600;
    background: #eee; color: #555;
}
.pill-red { background: #fde7e7; color: #b13333; }
.pill-yellow { background: #fef3c7; color: #92651b; }
.pill-green { background: #d4f4dd; color: #226e3a; }
.pill-blue { background: #dbe9ff; color: #1e3a8a; }
.pill-gray { background: #ececec; color: #555; }

/* Pagination-Footer mit Per-Page-Selector ----------------------------------- */
.pager-bar {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin: 14px 0 4px; padding: 8px 0;
    border-top: 1px solid var(--border);
    font-size: 13px;
}
.pager-meta { color: var(--text-muted); }
.pager-meta strong { color: var(--text); }
.pager-perpage { display: inline-flex; align-items: center; gap: 4px; }
.pager-perpage-link {
    display: inline-block; padding: 3px 9px; border-radius: 4px;
    font-size: 12px; font-weight: 600; text-decoration: none;
    color: var(--text-muted); background: transparent;
    border: 1px solid var(--border);
}
.pager-perpage-link:hover { background: var(--surface-2); color: var(--text); }
.pager-perpage-link.is-active {
    background: var(--accent); border-color: var(--accent); color: white; cursor: default;
}
.pager-links { margin-left: auto; }

/* Support-ID puzzle pieces ----------------------------------------------------
   Kunden-ID + Geräte-ID = Support-ID. Die zwei Bestandteile werden farblich
   und durch eine Chevron-/V-Form so dargestellt, dass sie ineinandergreifen,
   wenn sie zur Support-ID kombiniert werden. Standalone (z.B. Kunden-ID auf
   der Kunden-Show) signalisieren die Formen, dass es ein Bestandteil einer
   längeren Kette ist.
*/
.support-id-pair { display: inline-flex; align-items: stretch; line-height: 1; }
.support-id-piece {
    display: inline-block; padding: 5px 11px;
    font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.06em; color: white; white-space: nowrap;
}
.support-id-piece.kunde {
    background: var(--blue); padding-right: 17px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}
.support-id-piece.geraet {
    background: var(--accent); padding-left: 17px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
}
.support-id-pair .support-id-piece.geraet { margin-left: -8px; }

/* Forms */
.form-row { display: grid; gap: 6px; margin-bottom: 14px; }
.form-row label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row input[type=number],
.form-row input[type=date],
.form-row input[type=datetime-local],
.form-row input[type=time],
.form-row input[type=file],
.form-row select,
.form-row textarea {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    min-height: 36px;
    box-sizing: border-box;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}
.form-row textarea { min-height: 64px; resize: vertical; }
.form-row small { font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
/* Standard content/form layout when there's no right-anchored sidebar.
   900 px ist die kanonische Hauptspalten-Breite — gleichzeitig die
   Breite der linken Spalte auf zweispaltigen Detail-Seiten (siehe
   `.ticket-detail`). Auf der Detail-Seite kommt rechts noch eine
   ~466 px Sidebar dazu (Gesamt-Container max-width: 1380 px); auf
   Einspalten-Seiten zentriert sich `.form-narrow` mittig in der
   verfügbaren Content-Area. Pages mit eigener Sidebar nutzen ihren
   eigenen Grid (siehe `.ticket-detail`). */
.form-narrow {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    align-self: center;
}
@media (max-width: 720px) {
    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
}

/* Tighter inputs inside data tables (master/edit rows) */
.table input[type=text],
.table input[type=email],
.table input[type=number],
.table input[type=date],
.table input[type=datetime-local],
.table input[type=color],
.table select,
.table textarea {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 12px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
    min-height: 32px;
}
.table input:focus, .table select:focus, .table textarea:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}

/* Hidden helper */
.hidden { display: none !important; }

/* Stat-card link variant */
.stat-card-link { text-decoration: none; color: inherit; transition: transform 0.12s, box-shadow 0.12s; display: block; }
.stat-card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.stat-card .stat-sub { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* ===================== Dashboard ===================== */

/* Begrüßung oben — tageszeit-abhängiger Gradient als Card-Hintergrund.
   Keine Szene, keine Animation: nur Farbe, die zur Tageszeit passt. */
.dashboard-greeting {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    margin-bottom: 14px;
    padding: 18px 22px;
}
.dashboard-greeting .greeting-hi {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
}
.dashboard-greeting .greeting-name {
    color: var(--accent);
    font-weight: 700;
}
.dashboard-greeting .greeting-sub {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* Dynamisches Briefing — Fließtext-Absatz mit hervorgehobenen Zahlen
   und Namen. Ersetzt den vorherigen einzeiligen greeting-sub-Text und
   das frühere Stichpunkt-Format. */
.greeting-briefing {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    max-width: 70ch;
}
.greeting-briefing strong { font-weight: 600; }
.dashboard-greeting--night .greeting-briefing { color: rgba(243, 245, 255, 0.92); }
.dashboard-greeting .greeting-meta {
    text-align: right;
    flex-shrink: 0;
}
.dashboard-greeting .greeting-date {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: capitalize;
}
.dashboard-greeting .greeting-time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 24px;
    color: var(--text);
    line-height: 1.1;
}

/* Phasen-Gradienten — Stimmung kommt aus dem Farbverlauf, Text bleibt lesbar.
   Die hellen Varianten haben fixe Pastell-Hintergründe (theme-unabhängig)
   → Text-Variablen werden lokal auf dunkle Töne gepinnt, sonst würde im
   Dark-Mode ein helles var(--text) auf hellem Pastell-Gradient enden. */
.dashboard-greeting--dawn    { background: linear-gradient(110deg, #ffd9b3 0%, #ffe9d1 45%, #fff5e6 100%); }
.dashboard-greeting--morning { background: linear-gradient(110deg, #fff4cc 0%, #e7f3ff 50%, #cfe6ff 100%); }
.dashboard-greeting--day     { background: linear-gradient(110deg, #d6ecff 0%, #b9dcff 60%, #9ccaff 100%); }
.dashboard-greeting--evening { background: linear-gradient(110deg, #ffc99a 0%, #f3a5b8 55%, #c994d4 100%); }
.dashboard-greeting--night   { background: linear-gradient(110deg, #2c3458 0%, #404a78 55%, #5762a3 100%); }

.dashboard-greeting--dawn,
.dashboard-greeting--morning,
.dashboard-greeting--day,
.dashboard-greeting--evening {
    --text: #1a1d22;
    --text-muted: #4a5260;
}

/* Nacht-Variante ist dunkel — Text und Akzentfarbe invertieren. */
.dashboard-greeting--night .greeting-hi,
.dashboard-greeting--night .greeting-time { color: #f3f5ff; }
.dashboard-greeting--night .greeting-sub,
.dashboard-greeting--night .greeting-date { color: rgba(243, 245, 255, 0.72); }
.dashboard-greeting--night .greeting-name { color: #ffb98a; }

/* Etwas kleinere KPI-Tiles auf dem Dashboard */
/* .cards-grid-compact wurde entfernt — Dashboard nutzt jetzt das
   Standard-Cards-Grid für konsistente Höhe + Abstände im ganzen System. */

/* Zweispaltige Panel-Reihe */
.dashboard-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 980px) {
    .dashboard-row { grid-template-columns: 1fr; }
}
.dashboard-stack { display: flex; flex-direction: column; gap: 14px; }

.dashboard-panel { padding: 16px 18px; }
.dashboard-panel .panel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.dashboard-panel .panel-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.dashboard-panel .panel-link {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
}
.dashboard-panel .panel-link:hover { color: var(--accent); }

/* „Mein Tag" — 3-spaltiges Mini-Grid */
.my-day-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 540px) {
    .my-day-grid { grid-template-columns: 1fr; }
}
.my-day-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.my-day-value {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.my-day-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Anwesenheit */
.presence-stats {
    display: flex; gap: 22px;
    margin-bottom: 12px;
}
.presence-stats > div {
    display: flex; align-items: baseline; gap: 6px;
}
.presence-count {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--green);
}
.presence-label {
    font-size: 12px;
    color: var(--text-muted);
}
.presence-empty {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}
.presence-list {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.presence-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px 3px 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    position: relative;
}
.presence-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}
.presence-name { color: var(--text); }
.presence-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Mini-Listen (Tickets, Geburtstage, Notifications — kompakt statt Tabelle) */
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.mini-list-item:last-child { border-bottom: none; }
.mini-list-no {
    flex-shrink: 0;
    min-width: 64px;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.mini-list-no:hover { text-decoration: underline; }
.mini-list-title {
    flex: 1;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.mini-list-title:hover { color: var(--accent); }
.mini-list-meta {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 12px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pill-sm {
    padding: 1px 7px;
    font-size: 10px;
}

/* Geburtstag-heute besonders hervorheben */
.birthday-today {
    background: linear-gradient(135deg, rgba(254,89,0,0.07), var(--surface));
    border-left: 3px solid var(--accent);
}
.birthday-line {
    padding: 6px 0;
    font-size: 13px;
    color: var(--text);
}

/* Meta-list (definition list for ticket overview etc.) */
.meta-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.meta-list dt { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; align-self: center; }
.meta-list dd { margin: 0; font-size: 13px; }
.meta-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 4px; }

/* Timeline (ticket detail view) */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }

/* Ticket detail layout:
   - Linke Hauptspalte (Beschreibung, Verlauf, Projektordner) auf
     900 px gedeckelt — selbe Standardbreite wie `.form-narrow` und der
     Admin-Bereich. So bleibt der Lesefluss in Kommentaren und
     Beschreibung konsistent.
   - Rechte Sidebar (Übersicht + Zeit erfassen) hält ihre ~1/3-Quote
     der Gesamtbreite — sichergestellt durch `max-width: 1380px` auf
     dem Container und `1fr` für die Sidebar:
       900 (main) + 14 (gap) + ~466 (sidebar) ≈ 1380
       → 466 / 1380 ≈ 33,8 %
   Auf engen Viewports schrumpft die Sidebar bis 280 px, darunter
   greift der Mobile-Breakpoint und stapelt einspaltig. */
.ticket-detail {
    grid-template-columns: minmax(0, 900px) minmax(280px, 1fr);
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
}
.ticket-main {
    display: flex; flex-direction: column; gap: 14px;
    width: 100%;
    min-width: 0;
}
@media (max-width: 1024px) {
    .ticket-detail { grid-template-columns: 1fr; max-width: 900px; }
}
.ticket-description {
    margin: 0;
    padding: 4px 0 4px 16px;
    border-left: 3px solid var(--accent);
    font-size: 16px;
    line-height: 1.6;
    white-space: pre-wrap;
}
.ticket-description.is-collapsible {
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.ticket-description.is-collapsible.is-collapsed {
    max-height: 6.4em;  /* ~ 4 Zeilen bei line-height 1.6 */
    position: relative;
    mask-image: linear-gradient(to bottom, black 70%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent);
}
.ticket-description.is-collapsible:not(.is-collapsed) {
    max-height: none;
    mask-image: none;
    -webkit-mask-image: none;
}
.ticket-desc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    margin-left: 4px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    transition: transform 0.2s, background 0.15s, color 0.15s;
}
.ticket-desc-toggle:hover { background: var(--surface-2); color: var(--accent); }
.ticket-desc-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.ticket-desc-toggle .ticket-desc-chevron { font-size: 11px; line-height: 1; }
.ticket-desc-more {
    display: block;
    margin: 6px 0 0 16px;
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
.ticket-desc-more:hover { text-decoration: underline; }
.ticket-description.is-collapsible:not(.is-collapsed) ~ .ticket-desc-more { display: none; }
.subtitle-sep { margin: 0 6px; color: var(--text-subtle); }
.subtitle-meta { color: var(--text-muted); font-weight: 500; }
.timeline::before {
    content: '';
    position: absolute;
    left: 13px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--border);
}
.tl-item { position: relative; padding: 0 0 12px 40px; --tl-color: var(--gray); }
.tl-item:last-child { padding-bottom: 0; }

.tl-icon {
    position: absolute;
    left: 0; top: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--tl-color);
    color: var(--text);
    font-size: 14px;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 1;
}
.tl-card {
    border: 1px solid var(--border);
    border-left: 3px solid var(--tl-color);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--surface);
}
.tl-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.tl-content { margin-top: 6px; white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
.tl-time .tl-content { color: var(--text-muted); }

/* per-kind colors */
.tl-comment { --tl-color: var(--accent); }
.tl-comment.is-internal { --tl-color: var(--yellow); }
.tl-comment.is-internal .tl-card { background: #fef9e7; }
/* Live-Update-Toasts (Bottom-Right, fadeout nach ~8 Sek). Werden von
   resources/js/live.js dynamisch erzeugt — keine Templates dafür im
   Blade. Stacken übereinander wenn mehrere gleichzeitig kommen. */
.live-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    line-height: 1.4;
    max-width: 360px;
    animation: live-toast-in 0.25s ease-out;
}
.live-toast-info    { border-left-color: var(--blue, #2563eb); }
.live-toast-warning { border-left-color: #fe5900; }
.live-toast-icon { font-size: 18px; flex-shrink: 0; }
.live-toast-body  { word-break: break-word; }
@keyframes live-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Flash-Effekt für gerade aktualisierte Elemente (Timeline-Comment,
   Status-Pille). Subtil, nicht aufdringlich. */
.tl-flash {
    animation: tl-flash-anim 1.5s ease-out;
}
@keyframes tl-flash-anim {
    0%   { box-shadow: 0 0 0 4px rgba(254, 89, 0, 0.4); background: rgba(254, 89, 0, 0.08); }
    100% { box-shadow: 0 0 0 0   rgba(254, 89, 0, 0);   background: transparent; }
}

/* Frisch eingefügte Tabellen-/Timeline-Zeile pulsiert 5 Sek lang orange. */
.tl-row-fresh {
    animation: tl-row-fresh-anim 5s ease-out;
}
@keyframes tl-row-fresh-anim {
    0%, 30%  { background: rgba(254, 89, 0, 0.12); }
    100%     { background: transparent; }
}

/* Customer-Email-Kommentar: blauer Akzent, leicht gefärbter Hintergrund —
   klar als externer Beleg erkennbar, gleichzeitig im Stil der Timeline. */
.tl-comment-email { --tl-color: var(--blue, #2563eb); }
.tl-comment-email .tl-card {
    background: #eff6ff;
    border-left: 3px solid var(--blue, #2563eb);
}
.tl-comment-email .tl-content { white-space: pre-wrap; }
.tl-time { --tl-color: #2563eb; }
.tl-attachment { --tl-color: #6f8389; }
.tl-milestone { --tl-color: var(--gray); }
.tl-milestone.tl-blue { --tl-color: var(--blue); }
.tl-milestone.tl-green { --tl-color: var(--green); }
.tl-milestone.tl-gray { --tl-color: var(--gray); }
.tl-milestone .tl-meta { font-weight: 600; color: var(--text); }

/* Card header row (h3 + edit toggle button on the right) */
.card-header-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-header-row > *:first-child { flex: 1; }

/* Time capture (ticket: log time) */
.tc-date-line {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    justify-content: center;
}
.tc-date-edit {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    padding: 2px 6px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
}
.tc-date-edit:hover { background: var(--surface-2); color: var(--text); }

.tc-spinners {
    display: flex; align-items: stretch; justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}
.tc-spinner { flex: 1; min-width: 0; }
.tc-label {
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.tc-clock {
    display: flex; align-items: stretch; justify-content: center;
    gap: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px 6px;
}
.tc-seg {
    display: flex; flex-direction: column; align-items: stretch;
    justify-content: center;
    cursor: ns-resize;
    user-select: none;
    padding: 0;
    border-radius: 7px;
    transition: background 0.12s, box-shadow 0.12s;
    outline: none;
    width: 56px;
    position: relative;
}
.tc-seg::before, .tc-seg::after {
    content: '';
    position: absolute;
    left: 8px; right: 8px;
    height: 1px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.16s;
    pointer-events: none;
}
.tc-seg::before { top: calc(50% - 14px); }
.tc-seg::after  { top: calc(50% + 14px); }
.tc-seg:hover, .tc-seg:focus { background: var(--accent-soft); }
.tc-seg:hover::before, .tc-seg:hover::after,
.tc-seg:focus::before, .tc-seg:focus::after { opacity: 0.45; }
.tc-seg:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.tc-arrow {
    background: transparent; border: none;
    color: var(--text-muted);
    font-size: 9px; line-height: 1;
    cursor: pointer;
    height: 12px;
    padding: 0;
    opacity: 0.35;
    transition: opacity 0.12s, color 0.12s;
}
.tc-seg:hover .tc-arrow,
.tc-seg:focus .tc-arrow { opacity: 1; }
.tc-arrow:hover { color: var(--accent); }
.tc-wheel {
    position: relative;
    height: 64px;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tc-row {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-align: center;
    line-height: 1.2;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.tc-row.prev, .tc-row.next {
    font-size: 13px;
    color: var(--text-muted);
    opacity: 0.55;
    height: 16px;
}
.tc-row.current {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    height: 28px;
    line-height: 28px;
    text-shadow: 0 0 6px var(--surface), 0 0 6px var(--surface);
}
.tc-colon {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0 2px;
    align-self: center;
    line-height: 1;
}
.tc-arrow-between {
    color: var(--text-muted);
    font-size: 18px;
    align-self: center;
    padding: 0 2px;
}
.tc-quick-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 8px;
}
.tc-quick-row .tc-quick {
    flex: 1;
    justify-content: center;
    padding: 9px 12px;
    font-size: 13px;
}
.tc-duration {
    text-align: center;
    font-size: 13px;
    color: var(--accent);
    font-weight: 600;
    background: var(--accent-soft);
    border: 1px solid #f5d3b5;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 12px;
}
.tc-duration.is-zero { color: var(--text-muted); background: var(--surface-2); border-color: var(--border); }
.tl-att-thumb { display: inline-block; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2); }
.tl-att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Inline-Anhänge an einem Kommentar (im Timeline-Eintrag) */
.tl-comment-files {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tl-comment-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 12px;
    transition: background 0.15s, border-color 0.15s;
}
.tl-comment-file:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.tl-comment-file-image {
    width: 80px; height: 80px;
    padding: 0;
    overflow: hidden;
}
.tl-comment-file-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-comment-file-icon { font-size: 18px; flex-shrink: 0; }
.tl-comment-file-name { font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-comment-file-size { color: var(--text-muted); font-size: 10px; }
.tl-att-icon { font-size: 28px; line-height: 1; flex-shrink: 0; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }

/* Project folder — list / tile view */
.folder-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.fv-btn {
    background: transparent;
    border: none;
    padding: 5px 10px;
    font: inherit;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.fv-btn + .fv-btn { border-left: 1px solid var(--border); }
.fv-btn:hover { background: var(--surface-2); color: var(--text); }
.fv-btn.is-active { background: var(--accent); color: white; }

#project-folder[data-view="tiles"] .folder-list { display: none; }
#project-folder[data-view="list"] .folder-tiles { display: none; }

.folder-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.folder-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.folder-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.folder-tile-thumb {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
    overflow: hidden;
    text-decoration: none;
    flex-direction: column;
}
.folder-tile-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.folder-tile-icon { color: var(--text-muted); }
.folder-tile-meta {
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    min-width: 0;
}
.folder-tile-name {
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.folder-tile-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.folder-tile-actions {
    display: flex;
    gap: 4px;
    padding: 6px 10px 8px;
    justify-content: flex-end;
    align-items: center;
}

/* Attachment viewer modal */
.att-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.86);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.att-modal-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 12px;
    color: white;
    font-size: 13px;
}
.att-modal-bar #att-name { font-weight: 500; word-break: break-all; }
.att-modal-bar .btn {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: white;
}
.att-modal-bar .btn:hover { background: rgba(255, 255, 255, 0.2); }
.att-modal-close {
    position: absolute;
    top: 12px; right: 16px;
    background: transparent;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.12s;
}
.att-modal-close:hover { background: rgba(255, 255, 255, 0.12); }
.att-modal-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: white;
    border-radius: var(--radius);
    min-height: 0;
}
.att-modal-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.att-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}
.checkbox-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
}
.checkbox-row input[type=checkbox] {
    width: 16px; height: 16px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.form-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }

/* List toolbar pattern: sortable headers + filter popover.
   Apply this convention to all list views (Tickets, Zeiten, Kunden, …). */
.table th.sortable { padding: 0; }
.table th.sortable a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
    padding: 10px 14px;
    color: inherit; text-decoration: none;
    user-select: none;
}
.table th.sortable a:hover { background: var(--bg); color: var(--accent); }
.table th.sortable .sort-arrow { font-size: 10px; opacity: 0.4; line-height: 1; }
.table th.sortable.is-sorted a { color: var(--accent); }
.table th.sortable.is-sorted .sort-arrow { opacity: 1; }
.table td.cell-title { font-weight: 600; }
.table td.cell-title a { color: inherit; }
.table td.cell-title a:hover { color: var(--accent); }

.list-filter { position: relative; display: inline-block; }
.list-filter > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.list-filter > summary::-webkit-details-marker { display: none; }
.list-filter > summary::marker { content: ''; }
.list-filter[open] > summary { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }
.list-filter > summary.is-active { border-color: var(--accent); color: var(--accent); }
.list-filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--accent); color: white;
    border-radius: 10px;
    font-size: 11px; font-weight: 600;
}
.list-filter-popover {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 300px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
    z-index: 30;
}
.list-filter-form { display: flex; flex-direction: column; gap: 8px; }
.list-filter-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); font-weight: 500; }
.list-filter-row > input,
.list-filter-row > select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
}
.list-filter-row > input:focus,
.list-filter-row > select:focus { outline: 2px solid rgba(254,89,0,0.25); border-color: var(--accent); }
.list-filter-actions {
    display: flex; gap: 8px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* Alerts */
.alert {
    /* Horizontal-Padding 18px ist die SYSTEMWEIT kanonische Banner-/Card-
       Padding-Breite (siehe docs/UI-CONVENTIONS.md §12). Cards (.card)
       nutzen die gleichen 18px → der rechte Rand von Action-Buttons in
       Bannern fluchtet mit Action-Buttons in Cards. */
    padding: 10px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 13px;
}
.alert-info { background: #eef4ff; border-color: #cfd9f7; color: #1e3a8a; }
.alert-success { background: #e8f7ed; border-color: #c4e8d3; color: #226e3a; }
.alert-error { background: #fdecec; border-color: #f4c4c4; color: #b13333; }

/* Empty state */
.empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: var(--radius);
}

/* =====================================================================
   Super-Admin-Toolbar + Banner (Zeitreise / Doppelgänger)
===================================================================== */
.admin-banner {
    display: flex; align-items: center; gap: 12px;
    /* Schwebend wie die Sidebar / Topbar. Padding 10px/18px = kanonische
       Banner-Padding-Breite, identisch zu `.alert`, `.broadcast-banner`,
       `.card` → siehe docs/UI-CONVENTIONS.md §12. */
    margin: 0 0 10px 0;
    padding: 10px 18px;
    min-height: 48px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    /* Beim Scrollen am oberen Rand kleben bleiben — Scroll-Container
       ist .main (overflow-y: auto). */
    position: sticky;
    top: 0;
    z-index: var(--z-banner);
}
/* Slide-Animation nur beim ERSTEN Erscheinen im aktuellen Tab —
   die is-fresh-Klasse setzt unten ein kleines JS via sessionStorage,
   damit Modulwechsel kein erneutes Einblenden auslösen. */
.admin-banner.is-fresh { animation: admin-banner-slide-down 0.4s ease-out; }
/* Hinweis: gestackte Banner (admin + broadcast + party) bekommen ihren
   sticky-top dynamisch via JS — siehe updateBannerStacks() in app.blade.php.
   Statische CSS-Werte wären falsch, sobald Mini- und Volle Banner gemischt
   sind (32px vs 52px vs 48px). */

/* Farb-Paletten — gleiche Hex-Werte wie die <x-banner>-Component, damit
   System-Banner (Admin-Modi, Broadcasts) und Page-Banner zur selben
   visuellen Familie gehören. Vorher waren das gradientige Knaller in
   weißer Schrift; jetzt flache Pastelle mit dunkler Schrift + Border. */
.admin-banner-time   { background: #e0e7ff; border: 1px solid #a5b4fc; color: #3730a3; }  /* info */
.admin-banner-doppel { background: #fef3c7; border: 1px solid #f3d97a; color: #7a5615; }  /* warning */
.admin-banner-maint  { background: #fef3c7; border: 1px solid #f3d97a; color: #7a5615; }  /* warning */
.admin-banner-xray   { background: #e0e7ff; border: 1px solid #a5b4fc; color: #3730a3; }  /* info */
.admin-banner-actions-group { display: flex; gap: 6px; flex-shrink: 0; }

/* =====================================================================
   X-Ray-Modus — Visualisiert Permission-Gates und ungesicherte
   Aktionen für den Super-Admin.
   Wenn gleichzeitig Party-Mode läuft, würden die Buttons hüpfen UND
   ihren X-Ray-Outline+Label haben → unlesbar. In dem Fall friert der
   Party-Bounce ein, damit man die Permission-Labels in Ruhe lesen kann.
===================================================================== */
body.party-mode.xray-mode .btn,
body.party-mode.xray-mode .card,
body.party-mode.xray-mode .nav-link,
body.party-mode.xray-mode tbody tr,
body.party-mode.xray-mode .pill,
body.party-mode.xray-mode .admin-toolbar-handle {
    animation: none !important;
    transform: none !important;
}
body.xray-mode [data-xray-perm] {
    outline: 2px dashed #fe5900;
    outline-offset: 3px;
    position: relative;
}
body.xray-mode [data-xray-perm]::before {
    content: '🔒 ' attr(data-xray-perm);
    position: absolute;
    top: -18px; left: -2px;
    background: #fe5900;
    color: #fff;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.xray-mode [data-xray-type="canany"]::before {
    content: '🔓 ANY: ' attr(data-xray-perm);
    background: #f59e0b;
}

/* Ungesicherte interaktive Aktionen — kandidatenmäßig markiert */
body.xray-mode [data-xray-ungated] {
    outline: 2px dotted #ef4444;
    outline-offset: 3px;
    position: relative;
}
body.xray-mode [data-xray-ungated]::before {
    content: '⚠ ungesichert ' attr(data-xray-ungated);
    position: absolute;
    top: -18px; right: -2px;
    background: #ef4444;
    color: #fff;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Wenn beides zutrifft, zeigt nur das positive Label (data-xray-perm) */
body.xray-mode [data-xray-perm][data-xray-ungated]::before {
    content: '🔒 ' attr(data-xray-perm);
    background: #fe5900;
}

/* Aktiv-Style für den Toolbar-Button */
.admin-toolbar-btn.is-active {
    background: rgba(254, 89, 0, 0.25);
}

/* =====================================================================
   Element-Inspector — schwebender Tooltip am Cursor, Crosshair-Mode
===================================================================== */
.eli-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 999999; /* über allem, auch Phase-Overlay */
    background: rgba(20, 23, 26, 0.94);
    color: #fff1e6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(254, 89, 0, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    max-width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eli-tooltip[hidden] { display: none; }
.eli-tooltip.is-copied {
    background: rgba(34, 197, 94, 0.96);
    border-color: rgba(134, 239, 172, 0.7);
    color: #fff;
}

/* Aktiver Inspector-Modus: nur ein dezenter Dashed-Outline am gehoverten
   Element. Cursor bleibt normal, weil Klicks weiter normal navigieren —
   Kopieren läuft über die Tastatur (Taste C).
   `:not(:has(*:hover))` greift exakt am deepest-hovered Element, sonst
   stapeln sich Outlines von Ancestor-Elementen. */
body.is-eli-active *:hover:not(:has(*:hover)) {
    outline: 1px dashed rgba(254, 89, 0, 0.7);
    outline-offset: -1px;
}
/* Toolbar bleibt von Inspector-Effekten ausgenommen */
body.is-eli-active #admin-toolbar *:hover { outline: none; }

/* =====================================================================
   Live-Audit-Tail — floating Panel bottom-left, Terminal-Look
===================================================================== */
.audit-tail {
    position: fixed;
    bottom: 24px; left: 24px;
    width: 420px;
    max-width: calc(100vw - 48px);
    max-height: 380px;
    background: #1a1d28;
    color: #e6e9ef;
    border: 1px solid #2c3142;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    z-index: 9997;
    display: flex; flex-direction: column;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow: hidden;
}
.audit-tail[hidden] { display: none; }
.audit-tail-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid #2c3142;
    cursor: grab;
    user-select: none;
}
.audit-tail.is-dragging { opacity: 0.92; box-shadow: 0 20px 40px rgba(0,0,0,0.45); }
.audit-tail.is-dragging .audit-tail-head { cursor: grabbing; }
.audit-tail-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #e6e9ef;
}
.audit-tail-pulse {
    color: #4ad994;
    margin-left: 4px;
    animation: at-pulse 1.6s ease-in-out infinite;
}
.audit-tail.is-paused .audit-tail-pulse { color: #f59e0b; animation: none; }
@keyframes at-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}
.audit-tail-actions { display: flex; gap: 4px; }
.audit-tail-btn {
    background: transparent;
    border: 1px solid #2c3142;
    color: #cdd3e1;
    width: 24px; height: 24px;
    border-radius: 4px;
    font-size: 12px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    font-family: inherit;
}
.audit-tail-btn:hover { background: #2c3142; color: #fff; }

.audit-tail-list {
    list-style: none; margin: 0; padding: 6px 10px;
    overflow-y: auto;
    flex: 1;
    font-size: 11.5px;
    line-height: 1.5;
}
.audit-tail-empty {
    color: #6e7587;
    font-style: italic;
    text-align: center;
    padding: 12px 0;
}
.audit-tail-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.audit-tail-row:last-child { border-bottom: none; }
.audit-tail-row.is-new {
    background: linear-gradient(90deg, rgba(74,217,148,0.18), transparent);
    animation: at-flash 1.5s ease-out;
}
@keyframes at-flash {
    0%   { background: rgba(74,217,148,0.32); }
    100% { background: transparent; }
}
.at-time   { color: #6e7587; flex-shrink: 0; }
.at-tt     { color: #f0c36d; flex-shrink: 0; }
.at-who    { color: #82d49a; min-width: 0; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-imp    { color: #d49af0; }
.at-entity { color: #9ec1ff; }
.at-id     { color: #6e7587; }
.at-action { color: #ffce4a; }
.at-field  { color: #ff8a40; font-weight: 600; }
.at-change { color: #cdd3e1; flex-basis: 100%; padding-left: 0; font-size: 10.5px; opacity: 0.85; }

/* Cleanup-Wizard-Cards — verschiedene Zustände visuell trennen */
.cleanup-check { border-left: 4px solid var(--border); }
.cleanup-check.cleanup-ok     { border-left-color: #22c55e; }
.cleanup-check.cleanup-action { border-left-color: var(--accent); }
.cleanup-check.cleanup-warn   { border-left-color: #f59e0b; }
.cleanup-details summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    user-select: none;
    padding: 4px 0;
}
.cleanup-details[open] summary { margin-bottom: 4px; color: var(--text); font-weight: 500; }
.cleanup-details .table th { background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.cleanup-details .table td { padding: 6px 12px; }
/* 22px-Slot wie .broadcast-icon / <x-banner>-Icon — Icon-Mitte fluchtet
   systemweit, egal wie groß das einzelne Icon ist. */
.admin-banner-icon {
    font-size: 18px; flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
}
.admin-banner-text { flex: 1; }
.admin-banner-action { margin: 0; }
.admin-banner-btn {
    /* Erbt die Banner-Text-Farbe — funktioniert daher auf jedem der vier
       Pastell-Töne ohne explizite Per-Ton-Variante. */
    background: rgba(0,0,0,0.06);
    color: inherit;
    border: 1px solid currentColor;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    transition: background 0.12s;
}
.admin-banner-btn:hover { background: rgba(0,0,0,0.12); }
@keyframes admin-banner-slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Toolbar bottom-center: kollabiert ist sie ein runder Button, beim
   Hover/Focus klappt sie zu einer schmalen Leiste auf. Im kollabierten
   Zustand ist die äußere Hülle transparent, damit kein dunkler Ring
   um den orange-Button sichtbar wird — Hintergrund + Shadow blendet
   erst beim Aufklappen ein. */
.admin-toolbar {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center;
    background: transparent;
    color: #fff;
    /* Stadium / Pill — bleibt egal wie hoch die Toolbar wird perfekt
       halbkreisförmig an den Enden. */
    border-radius: 9999px;
    padding: 0;
    z-index: 9998;
    box-shadow: none;
    overflow: hidden;
    transition: background 0.22s ease, box-shadow 0.22s ease, padding 0.22s ease;
}
.admin-toolbar:hover,
.admin-toolbar:focus-within {
    background: #1a1d28;
    padding: 6px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}
.admin-toolbar-handle {
    /* Gleiche Maße wie clock-fab / notification-fab (56×56 + 24px Icon). */
    width: 56px; height: 56px;
    border: none;
    background: linear-gradient(135deg, #fe5900 0%, #ff8a40 100%);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    /* Eigenen Schatten — damit der Button auch kollabiert (transparente
       Hülle) leicht „schwebt". Im aufgeklappten Zustand übernimmt der
       Hüllen-Shadow den größeren Lift. */
    box-shadow: 0 6px 16px rgba(254, 89, 0, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.admin-toolbar:hover .admin-toolbar-handle,
.admin-toolbar:focus-within .admin-toolbar-handle { box-shadow: none; }
.admin-toolbar-handle:hover { transform: scale(1.04); }
.admin-toolbar-handle-icon { display: block; }

.admin-toolbar-tray {
    display: flex; gap: 4px; align-items: center;
    /* Auf mehrere Zeilen umbrechen wenn nötig — wir lassen ~4 Buttons
       pro Reihe und brechen den Rest in die nächste Zeile um. */
    flex-wrap: wrap;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-left: 0;
    transition: max-width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease,
                margin-left 0.28s ease;
}
.admin-toolbar:hover .admin-toolbar-tray,
.admin-toolbar:focus-within .admin-toolbar-tray {
    /* Breite-Anker: ca. 4 Buttons pro Reihe (118 min-width × 4 + Gaps).
       Höhe: passt 3 Reihen Buttons (34px × 3 + 4px-Gap × 2 = 110px) plus
       Innenpadding-Reserve. Mehr als 12 Buttons schicken wir nicht in
       die Toolbar — wenn doch nötig, separates Drawer-Konzept bauen. */
    max-width: 540px;
    max-height: 150px;
    opacity: 1;
    margin-left: 6px;
}
.admin-toolbar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 118px; /* gleichmäßige Reihen-Optik trotz unterschiedlicher Labels */
    background: transparent;
    color: #fff;
    border: none;
    padding: 8px 14px 8px 10px;
    border-radius: 22px;
    font-size: 13px;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
    text-decoration: none; /* auch für <a>-Variante (z.B. Aufräum-Wizard) */
}
.admin-toolbar-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }
.admin-toolbar-btn-icon { font-size: 16px; }
.admin-toolbar-btn-label { font-weight: 500; }

/* Confirmation-Modal — schlicht, zentriert. */
.admin-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.admin-modal-backdrop[hidden] { display: none; }
.admin-modal-backdrop.is-open { opacity: 1; }
.admin-modal {
    background: var(--surface);
    color: var(--text);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.35);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-modal-backdrop.is-open .admin-modal { transform: translateY(0); }
.admin-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.admin-modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.admin-modal-close {
    background: none; border: none;
    font-size: 22px; line-height: 1;
    color: var(--text-muted); cursor: pointer;
    padding: 0 4px;
}
.admin-modal-close:hover { color: var(--text); }
.admin-modal-body { padding: 16px 18px; }
.admin-modal-hint {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 12px;
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
}
.admin-modal-row { display: flex; gap: 10px; margin-bottom: 12px; }
.admin-modal-row label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; color: var(--text-muted);
    font-weight: 500;
    flex: 1;
}
.admin-modal-row input[type="date"],
.admin-modal-row input[type="time"],
.admin-modal-row input[type="text"] {
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}
.admin-modal-fieldset {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 6px 0 0;
}
.admin-modal-fieldset legend { padding: 0 6px; font-size: 12px; color: var(--text-muted); }
.admin-modal-radio {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}
.admin-modal-radio input { margin-top: 3px; }
.admin-modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
}
.admin-modal-results { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; margin-top: 4px; }
.admin-modal-result {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    text-align: left;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    font: inherit;
}
.admin-modal-result:hover { background: var(--surface-2); border-color: var(--accent); }
.admin-modal-selected {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(254,89,0,0.08);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
}

/* =====================================================================
   PARTY-MODUS — Banner, Effekte, Chaos
===================================================================== */
.party-banner {
    display: flex; align-items: center; gap: 12px;
    /* Padding 10px/18px = kanonische Banner-Padding-Breite, identisch zu
       `.alert`, `.broadcast-banner`, `.admin-banner`, `.card`. Siehe
       docs/UI-CONVENTIONS.md §12. */
    margin: 0 0 10px 0;
    padding: 10px 18px;
    min-height: 48px;
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
    border-radius: var(--radius-lg);
    position: sticky;
    top: 0;
    z-index: var(--z-banner-party);
    box-shadow: var(--shadow);
    background: linear-gradient(90deg, #ff3d8b 0%, #ff8a40 25%, #ffd23a 50%, #4ad994 75%, #5cb6ff 100%);
    background-size: 300% 100%;
    animation: party-rainbow 6s linear infinite;
}
@keyframes party-rainbow {
    from { background-position: 0% 50%; }
    to   { background-position: 300% 50%; }
}
.party-banner-icon {
    font-size: 22px; animation: party-spin 2s linear infinite;
    /* 22px-Slot wie alle anderen Banner-Icons. */
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* Quiet-Variante für Super-Admin-Spielverderber: gedämpft, keine
   Rainbow-Animation, kein Spin — nur ein Hinweis dass die Party noch
   läuft + Notbremse erreichbar. Verwendet die <x-banner>-Info-Palette,
   damit's sich im sonstigen Banner-System einreiht. */
.party-banner-quiet {
    background: #e0e7ff;
    border: 1px solid #a5b4fc;
    color: #3730a3;
    animation: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.party-banner-quiet .party-banner-icon { animation: none; opacity: 0.85; }
.party-banner-quiet .party-banner-btn {
    background: rgba(0,0,0,0.06);
    color: inherit;
    border: 1px solid currentColor;
}
.party-banner-quiet .party-banner-btn:hover { background: rgba(0,0,0,0.12); }
.party-banner-quiet.is-dismissed { opacity: 0; transform: translateY(-100%); }
.party-banner-text { flex: 1; }
.party-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
.party-banner-action { margin: 0; }
.party-banner-btn {
    background: rgba(0,0,0,0.35);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.55);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
}
.party-banner-btn:hover { background: rgba(0,0,0,0.55); }
.party-banner-btn-strong {
    background: rgba(0,0,0,0.55);
    border-color: rgba(255,255,255,0.8);
}
.party-banner-btn-strong:hover { background: rgba(0,0,0,0.75); }
.party-music-btn.party-music-muted {
    /* Visualisierung: leiser Puls solange Sound aus ist — fällt auf */
    animation: party-music-pulse 1.4s ease-in-out infinite;
}
@keyframes party-music-pulse {
    0%, 100% { background: rgba(0,0,0,0.35); box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
    50%      { background: rgba(255,255,255,0.25); box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}

/* Hinweis: Stack-Offset wird dynamisch per JS gesetzt — siehe
   updateBannerStacks() in app.blade.php. Statisch wäre's bei gemischten
   Banner-Größen (mini 32 / normal 52 / admin 48) immer falsch. */

/* Effekt-Container ist viewport-weit + ignoriert Clicks. */
.party-effects {
    position: fixed; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: var(--z-overlay-party);
}
.party-confetti {
    position: absolute;
    top: -40px;
    line-height: 1;
    animation: party-fall linear forwards;
    user-select: none;
}
@keyframes party-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(var(--party-rot-end, 360deg)); opacity: 0; }
}
.party-float {
    position: absolute;
    bottom: -40px;
    line-height: 1;
    animation: party-rise ease-out forwards;
    user-select: none;
}
@keyframes party-rise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translateY(-110vh) scale(1.4); opacity: 0; }
}
.party-burst {
    position: fixed;
    line-height: 1;
    animation: party-burst-anim 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    user-select: none;
    will-change: transform, opacity;
}
@keyframes party-burst-anim {
    0%   { transform: translate(-50%, -50%) scale(0.3) rotate(0); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--party-burst-x)), calc(-50% + var(--party-burst-y))) scale(1) rotate(var(--party-burst-rot)); opacity: 0; }
}

/* === DAS EIGENTLICHE CHAOS === Body-weite Effekte bei party-mode === */

/* Hue-rotate über die ganze App — Farbpalette dreht sich periodisch */
body.party-mode {
    animation: party-hue 8s linear infinite;
}
@keyframes party-hue {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Cards wackeln stärker */
body.party-mode .card {
    animation: party-wobble 2.6s ease-in-out infinite;
    transform-origin: center;
}
body.party-mode .card:nth-of-type(2n)   { animation-delay: -0.5s; animation-duration: 2.2s; }
body.party-mode .card:nth-of-type(3n)   { animation-delay: -1.1s; animation-duration: 3.1s; }
body.party-mode .card:nth-of-type(5n)   { animation-delay: -1.7s; animation-duration: 3.5s; }
@keyframes party-wobble {
    0%, 100% { transform: rotate(-2deg) scale(1); }
    50%      { transform: rotate(2deg) scale(1.02); }
}

/* Screen-Shake — Body wird ab und zu durchgerüttelt (JS triggert klasse) */
body.party-shake { animation: party-shake 0.8s ease-out, party-hue 8s linear infinite; }
@keyframes party-shake {
    0%, 100%       { transform: translate(0, 0) rotate(0); }
    10%            { transform: translate(-6px, 3px) rotate(-0.8deg); }
    20%            { transform: translate(7px, -2px) rotate(0.9deg); }
    30%            { transform: translate(-5px, 4px) rotate(-1deg); }
    40%            { transform: translate(8px, 2px) rotate(0.7deg); }
    55%            { transform: translate(-4px, -3px) rotate(-0.5deg); }
    70%            { transform: translate(5px, 2px) rotate(0.5deg); }
    85%            { transform: translate(-2px, 1px) rotate(-0.2deg); }
}

/* Quersliding "WUHU"-Worte */
.party-wuhu {
    position: fixed;
    z-index: var(--z-overlay-party);
    font-weight: 900;
    color: var(--wuhu-color, #ff3d8b);
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #fff, 0 6px 16px rgba(0,0,0,0.3);
    letter-spacing: 0.02em;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    animation: party-wuhu-l2r linear forwards;
}
.party-wuhu-l2r { left: -200px; animation-name: party-wuhu-l2r; }
.party-wuhu-r2l { right: -200px; animation-name: party-wuhu-r2l; }
@keyframes party-wuhu-l2r {
    0%   { transform: translateX(0) rotate(-6deg) scale(0.8); opacity: 0; }
    15%  { opacity: 1; }
    50%  { transform: translateX(50vw) rotate(2deg) scale(1.1); }
    85%  { opacity: 1; }
    100% { transform: translateX(110vw) rotate(8deg) scale(0.9); opacity: 0; }
}
@keyframes party-wuhu-r2l {
    0%   { transform: translateX(0) rotate(6deg) scale(0.8); opacity: 0; }
    15%  { opacity: 1; }
    50%  { transform: translateX(-50vw) rotate(-2deg) scale(1.1); }
    85%  { opacity: 1; }
    100% { transform: translateX(-110vw) rotate(-8deg) scale(0.9); opacity: 0; }
}

/* Mid-Session-Onset: kurzer "BAM" wenn die Party plötzlich startet */
body.party-onset .main {
    animation: party-onset-flash 1.4s ease-out;
}
@keyframes party-onset-flash {
    0%   { box-shadow: inset 0 0 0 9999px rgba(255, 61, 139, 0.4); }
    30%  { box-shadow: inset 0 0 0 9999px rgba(255, 210, 58, 0.25); }
    60%  { box-shadow: inset 0 0 0 9999px rgba(74, 217, 148, 0.15); }
    100% { box-shadow: inset 0 0 0 9999px rgba(0,0,0,0); }
}

/* Buttons hüpfen */
body.party-mode .btn {
    animation: party-bounce 0.55s ease-in-out infinite alternate;
}
@keyframes party-bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-3px); }
}

/* Sidebar-Links zittern leicht — wie bei zu viel Kaffee */
body.party-mode .nav-link {
    animation: party-jitter 0.5s linear infinite;
}
body.party-mode .nav-link:nth-of-type(2n) { animation-delay: -0.1s; }
body.party-mode .nav-link:nth-of-type(3n) { animation-delay: -0.2s; }
body.party-mode .nav-link:nth-of-type(5n) { animation-delay: -0.3s; }
@keyframes party-jitter {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-1.5px) rotate(-0.8deg); }
    75%      { transform: translateX(1.5px) rotate(0.8deg); }
}

/* Sidebar-Brand spinnt */
body.party-mode .brand-logo,
body.party-mode .sidebar-brand .brand-link {
    animation: party-spin 4s linear infinite;
}
@keyframes party-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Topbar-Title pulsiert wie ein Discoknopf */
body.party-mode .page-title {
    animation: party-disco 1.2s ease-in-out infinite;
    background: linear-gradient(90deg, #ff3d8b, #ff8a40, #ffd23a, #4ad994, #5cb6ff, #ff3d8b);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@keyframes party-disco {
    0%, 100% { background-position: 0% 50%; transform: scale(1); }
    50%      { background-position: 100% 50%; transform: scale(1.04); }
}

/* Tabellen-Zeilen schubsen sich gegenseitig */
body.party-mode tbody tr {
    animation: party-shimmy 4s ease-in-out infinite;
}
body.party-mode tbody tr:nth-of-type(2n) { animation-delay: -1s; animation-direction: reverse; }
body.party-mode tbody tr:nth-of-type(3n) { animation-delay: -2s; animation-duration: 3.2s; }
@keyframes party-shimmy {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}

/* Pills rotieren langsam */
body.party-mode .pill {
    animation: party-pill 5s linear infinite;
    display: inline-block;
}
@keyframes party-pill {
    0%   { transform: rotate(-3deg); }
    50%  { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}

/* FAB-Buttons hüpfen-rotieren */
body.party-mode .clock-fab,
body.party-mode .notification-fab,
body.party-mode .admin-toolbar-handle {
    animation: party-fab 1s ease-in-out infinite;
}
@keyframes party-fab {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(-6px) rotate(8deg); }
}

/* Eingabefelder zittern bei Focus etwas extra */
body.party-mode input:focus,
body.party-mode textarea:focus,
body.party-mode select:focus {
    animation: party-jitter 0.3s linear infinite;
}

/* =====================================================================
   Quick Jump — Command Palette (⌘K / Strg+K). Modal mit Prefix-Suche
   ("t 12345" → Ticket, "c Acme" → Kunde, "> aktion" → Aktion).
===================================================================== */
.qj-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: var(--z-quickjump);
    opacity: 0;
    transition: opacity 0.15s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.qj-backdrop[hidden] { display: none; }
.qj-backdrop.is-open { opacity: 1; }

.qj-modal {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: min(640px, calc(100vw - 32px));
    max-height: 70vh;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    z-index: calc(var(--z-quickjump) + 1);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    overflow: hidden;
}
.qj-modal[hidden] { display: none; }
.qj-modal.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }

.qj-search {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.qj-search-icon { color: var(--text-muted); display: inline-flex; }
.qj-search-icon svg.icon { width: 18px; height: 18px; }
.qj-search input[type="search"] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    padding: 0;
    /* WebKit search-clear button ausblenden – wir haben Esc + Hint */
    appearance: none; -webkit-appearance: none;
}
.qj-search input[type="search"]::-webkit-search-decoration,
.qj-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.qj-search input::placeholder { color: var(--text-muted); }
.qj-kbd {
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--bg);
    line-height: 1;
}

.qj-hints {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
}
.qj-hints.is-hidden { display: none; }
.qj-hint {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--text-muted);
}
.qj-hint kbd {
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg);
    color: var(--text);
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1;
    min-width: 14px;
    text-align: center;
}

.qj-results {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 10px;
}
.qj-results-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.qj-group {
    padding: 10px 16px 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}
.qj-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.qj-item:hover { background: var(--bg); }
.qj-item.is-active {
    background: var(--accent-soft);
    border-left-color: var(--accent);
}
.qj-item-icon {
    color: var(--text-muted);
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
}
.qj-item-icon svg.icon { width: 16px; height: 16px; }
.qj-item.is-active .qj-item-icon { color: var(--accent); }
.qj-item-body { flex: 1; min-width: 0; }
.qj-item-title {
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qj-item-sub {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Treffer-Highlight im Titel: orange + bold, kein Background damit es
   sich nicht mit der is-active-Hervorhebung beißt. */
.qj-mark {
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    padding: 0;
}
.qj-item.is-active .qj-mark { color: var(--accent); }

/* Mini-Toast für Math-Copy-Feedback. Schwebt im Modal mittig unten. */
.qj-toast {
    position: absolute;
    left: 50%; bottom: 56px;
    transform: translateX(-50%) translateY(8px);
    background: var(--text);
    color: var(--surface);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.qj-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.qj-footer {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    font-size: 11px;
    color: var(--text-muted);
}
.qj-footer kbd {
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1;
    margin-right: 3px;
    min-width: 14px;
    text-align: center;
    display: inline-block;
}

/* =====================================================================
   AppDialog — globaler Confirm/Alert-Ersatz für native Browser-Dialoge
===================================================================== */
.app-dialog-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: var(--z-dialog);
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 20px;
}
.app-dialog-backdrop[hidden] { display: none; }
.app-dialog-backdrop.is-open { opacity: 1; }
.app-dialog {
    background: var(--surface);
    color: var(--text);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    max-width: 440px;
    width: 100%;
    padding: 24px 24px 18px;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.app-dialog-backdrop.is-open .app-dialog { transform: scale(1); }
.app-dialog-icon { font-size: 44px; line-height: 1; margin-bottom: 6px; }
.app-dialog-icon svg.icon { width: 44px; height: 44px; vertical-align: middle; }
.app-dialog-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.app-dialog-message {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.55;
}
.app-dialog-actions {
    display: flex; gap: 10px; justify-content: center;
}

/* =====================================================================
   System-Broadcast-Banner + Acknowledge-Dialog
===================================================================== */
.broadcast-banner {
    display: flex; align-items: center; gap: 12px;
    /* Schwebend wie admin-banner / topbar — eigene Karten-Optik in der
       .main-Spalte. Padding 10px/18px ist die kanonische Banner-Padding-
       Breite und identisch zu `.alert` und `.card` (horizontal 18px) —
       Icon-Position links und Action-Button-Position rechts fluchten
       systemweit (siehe docs/UI-CONVENTIONS.md §12). */
    margin: 0 0 10px 0;
    padding: 10px 18px;
    min-height: 48px;
    font-size: 13px;
    line-height: 1.45;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: calc(var(--z-banner) + 5); /* Broadcast minimal über admin-banner */
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.broadcast-banner.is-dismissed { opacity: 0; transform: translateY(-100%); }
.broadcast-banner.is-fresh { animation: admin-banner-slide-down 0.4s ease-out; }
/* Flache Pastell-Töne + dunkle Schrift + 1px Border — gleiche Palette wie
   die <x-banner>-Component, damit System-Broadcasts und Seiten-Banner
   zur selben visuellen Familie gehören (siehe UI-CONVENTIONS Sektion 7). */
.broadcast-info     { background: #e0e7ff; border: 1px solid #a5b4fc; color: #3730a3; }
.broadcast-warning  { background: #fef3c7; border: 1px solid #f3d97a; color: #7a5615; }
.broadcast-critical {
    background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b;
    animation: broadcast-pulse-crit 2s ease-in-out infinite;
}
@keyframes broadcast-pulse-crit {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.28), 0 2px 8px rgba(0,0,0,0.1); }
}
/* Fixe 22px-Slot-Breite — egal ob das Icon selbst 22px (Voll-Banner) oder
   16px (Mini-Banner nach Bestätigung) groß ist, das Icon zentriert in
   einem 22px breiten Slot → optisch fluchtet die Icon-Mitte zwischen
   Mini-Banner und Voll-Banner darunter. */
.broadcast-icon {
    font-size: 22px; flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
}
.broadcast-body { flex: 1; min-width: 0; }
.broadcast-message { font-weight: 500; }
.broadcast-meta {
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.72;
}
/* Bestätigen-Button im Banner — verwendet das System-`.btn .btn-sm`-
   Styling (siehe oben). `.broadcast-dismiss` ist nur noch ein JS-Hook,
   keine eigene Optik mehr. So fühlt sich der Button identisch zu allen
   anderen Buttons im System an. */
.broadcast-dismiss { flex-shrink: 0; }

/* Mini-Variante nach Bestätigung — schmaler, eine Zeile, deaktiviert
   das Animation-Pulsieren bei critical. Klickbar ist NUR der Toggle-
   Button (siehe unten), nicht der ganze Banner — sonst fühlte sich der
   ganze Banner wie ein dead-link an. */
.broadcast-banner-mini {
    min-height: 32px;
    padding: 6px 18px;
    font-size: 12.5px;
    opacity: 0.92;
    animation: none !important;
}
.broadcast-banner-mini .broadcast-icon { font-size: 16px; }
.broadcast-banner-mini .broadcast-body {
    display: flex; align-items: center;
    overflow: hidden;
    min-width: 0;
}
.broadcast-mini-text {
    display: flex; align-items: baseline; gap: 4px;
    min-width: 0; flex: 1;
    line-height: 1.3;
}
.broadcast-mini-preview {
    color: inherit; opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

/* Inline-Toggle „mehr/weniger" — erscheint nur wenn Text > 90 Zeichen
   ist (Server entscheidet beim Render). Klick toggelt is-expanded. */
.broadcast-mini-toggle {
    flex-shrink: 0;
    background: rgba(0,0,0,0.06);
    border: 1px solid currentColor;
    color: inherit;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.12s, transform 0.12s;
}
.broadcast-mini-toggle:hover { background: rgba(0,0,0,0.12); }
.broadcast-mini-toggle:active { transform: scale(0.95); }

/* Expanded-State: Vorschau-Span darf umbrechen und in die Höhe gehen */
.broadcast-banner-mini.is-expanded {
    align-items: flex-start;
}
.broadcast-banner-mini.is-expanded .broadcast-mini-text {
    align-items: flex-start;
    flex-wrap: wrap;
}
.broadcast-banner-mini.is-expanded .broadcast-mini-preview {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.5;
}

/* Stack-Offset wird dynamisch per JS gesetzt — siehe updateBannerStacks()
   in app.blade.php. Mini-Banner sind 32px, volle 52px → statisch wäre's
   immer falsch. */

/* Ack-Confirm-Dialog */
.broadcast-confirm-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: var(--z-broadcast-confirm);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.broadcast-confirm-backdrop[hidden] { display: none; }
.broadcast-confirm-backdrop.is-open { opacity: 1; }
.broadcast-confirm {
    background: var(--surface);
    color: var(--text);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    max-width: 440px;
    width: calc(100% - 32px);
    padding: 24px 24px 18px;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.broadcast-confirm-backdrop.is-open .broadcast-confirm { transform: scale(1); }
/* WICHTIG: die nachfolgenden Dialog-Innen-Selektoren auf den Backdrop scopen,
   sonst kollidieren sie mit gleichnamigen Klassen im Banner-Button (z.B.
   .broadcast-confirm-icon, .broadcast-confirm-text) und blasen den
   „Kenntnis genommen"-Button auf. */
.broadcast-confirm-backdrop .broadcast-confirm-icon { font-size: 48px; line-height: 1; margin-bottom: 8px; width: auto; height: auto; background: transparent; border-radius: 0; }
.broadcast-confirm-backdrop .broadcast-confirm-icon svg.icon { width: 48px; height: 48px; }
.broadcast-confirm-backdrop .broadcast-confirm-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.broadcast-confirm-backdrop .broadcast-confirm-text { margin: 0 0 18px; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.broadcast-confirm-actions {
    display: flex; gap: 10px; justify-content: center;
    margin-bottom: 12px;
}
.broadcast-confirm-stage {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* =====================================================================
   Modus-Übergangs-Overlay (Zeitreise / Doppelgänger rein und raus)
===================================================================== */
.phase-overlay {
    position: fixed; inset: 0;
    z-index: var(--z-overlay-phase);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    pointer-events: auto;
    overflow: hidden;
}
.phase-overlay[hidden] { display: none; }
.phase-overlay-bg {
    position: absolute; inset: 0;
    z-index: 0;
    opacity: 0;
}
.phase-overlay-rings {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
    pointer-events: none;
}
.phase-ring {
    position: absolute;
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 2px solid transparent;
    opacity: 0;
    transform: scale(0);
}
.phase-overlay-center {
    position: relative;
    z-index: 2;
    font-size: 96px;
    line-height: 1;
    opacity: 0;
    transform: scale(0.5);
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}
.phase-overlay-caption {
    position: relative;
    z-index: 2;
    margin-top: 22px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ---------- Time Travel ENTER (Wormhole) ---------- */
.is-tt-enter .phase-overlay-bg {
    background: radial-gradient(circle at center, #3b3a82 0%, #14154a 55%, #060924 100%);
    animation: phase-fade-in 0.32s ease-out forwards;
}
.is-tt-enter .phase-overlay-center {
    animation: phase-clock-warp 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.is-tt-enter .phase-overlay-caption {
    animation: phase-caption-pulse 1.3s ease-out 0.3s forwards;
}
.is-tt-enter .phase-ring {
    border-color: #9b9fff;
    animation: phase-ring-expand 1.1s ease-out forwards;
}
.is-tt-enter .phase-ring:nth-child(1) { animation-delay: 0.05s; }
.is-tt-enter .phase-ring:nth-child(2) { animation-delay: 0.25s; }
.is-tt-enter .phase-ring:nth-child(3) { animation-delay: 0.45s; }

/* ---------- Time Travel EXIT (Heim) ---------- */
.is-tt-exit .phase-overlay-bg {
    background: radial-gradient(circle at center, #ffe9b8 0%, #b8d8ff 50%, #ffffff 100%);
    animation: phase-fade-in 0.28s ease-out forwards;
}
.is-tt-exit .phase-overlay-center {
    color: #2a3a78;
    animation: phase-earth-home 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.is-tt-exit .phase-overlay-caption {
    color: #2a3a78;
    text-shadow: none;
    animation: phase-caption-pulse 1.05s ease-out 0.2s forwards;
}
.is-tt-exit .phase-ring {
    border-color: rgba(255,255,255,0.75);
    animation: phase-ring-collapse 0.85s ease-out forwards;
}
.is-tt-exit .phase-ring:nth-child(1) { animation-delay: 0.00s; }
.is-tt-exit .phase-ring:nth-child(2) { animation-delay: 0.10s; }
.is-tt-exit .phase-ring:nth-child(3) { animation-delay: 0.20s; }

/* ---------- Doppelgänger ENTER (Mask Shift) ---------- */
.is-doppel-enter .phase-overlay-bg {
    background: linear-gradient(135deg, #5b1f6e 0%, #b04ab5 50%, #e0639a 100%);
    animation: phase-fade-in 0.28s ease-out forwards;
}
.is-doppel-enter .phase-overlay-center {
    animation: phase-mask-arrive 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.is-doppel-enter .phase-overlay-caption {
    animation: phase-caption-pulse 1.3s ease-out 0.3s forwards;
}
.is-doppel-enter .phase-ring {
    border-style: dashed;
    border-color: rgba(255,255,255,0.6);
    animation: phase-ring-expand 1.0s ease-out forwards;
}
.is-doppel-enter .phase-ring:nth-child(1) { animation-delay: 0.10s; width: 220px; height: 220px; }
.is-doppel-enter .phase-ring:nth-child(2) { animation-delay: 0.30s; width: 220px; height: 220px; }
.is-doppel-enter .phase-ring:nth-child(3) { animation-delay: 0.50s; width: 220px; height: 220px; }

/* ---------- Doppelgänger EXIT (Maske fällt / Poof) ---------- */
.is-doppel-exit .phase-overlay-bg {
    background: radial-gradient(circle at center, #f5e1f1 0%, #ffffff 100%);
    animation: phase-fade-in 0.25s ease-out forwards;
}
.is-doppel-exit .phase-overlay-center {
    color: #5b1f6e;
    animation: phase-wand-poof 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.is-doppel-exit .phase-overlay-caption {
    color: #5b1f6e;
    text-shadow: none;
    animation: phase-caption-pulse 0.95s ease-out 0.15s forwards;
}
.is-doppel-exit .phase-ring {
    border-color: rgba(176, 74, 181, 0.5);
    animation: phase-ring-puff 0.8s ease-out forwards;
}
.is-doppel-exit .phase-ring:nth-child(1) { animation-delay: 0.05s; }
.is-doppel-exit .phase-ring:nth-child(2) { animation-delay: 0.20s; }
.is-doppel-exit .phase-ring:nth-child(3) { animation-delay: 0.35s; }

/* ---------- Keyframes ---------- */
@keyframes phase-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes phase-caption-pulse {
    0%   { opacity: 0; transform: translateY(8px); }
    35%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes phase-clock-warp {
    0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
    25%  { opacity: 1; transform: scale(1) rotate(180deg); }
    65%  { opacity: 1; transform: scale(1.15) rotate(720deg); }
    100% { opacity: 0; transform: scale(2.2) rotate(1080deg); }
}
@keyframes phase-ring-expand {
    0%   { opacity: 0.9; transform: scale(0.1); }
    100% { opacity: 0;   transform: scale(4.5); }
}
@keyframes phase-earth-home {
    0%   { opacity: 0; transform: scale(2.4) rotate(-180deg); }
    50%  { opacity: 1; transform: scale(1) rotate(0); }
    85%  { opacity: 1; transform: scale(1) rotate(0); }
    100% { opacity: 0; transform: scale(1.05) rotate(0); }
}
@keyframes phase-ring-collapse {
    0%   { opacity: 0;   transform: scale(4.5); }
    50%  { opacity: 0.9; transform: scale(1.5); }
    100% { opacity: 0;   transform: scale(0); }
}
@keyframes phase-mask-arrive {
    0%   { opacity: 0; transform: scale(0.6) rotateY(-180deg); filter: blur(6px); }
    25%  { opacity: 1; filter: blur(0); }
    55%  { transform: scale(1.1) rotateY(0deg); }
    75%  { transform: scale(1.1) rotateY(0deg); }
    100% { opacity: 0; transform: scale(1.3) rotateY(0deg); }
}
@keyframes phase-wand-poof {
    0%   { opacity: 0; transform: scale(0.3) rotate(-30deg); }
    35%  { opacity: 1; transform: scale(1.15) rotate(15deg); }
    70%  { opacity: 1; transform: scale(1.15) rotate(15deg); }
    100% { opacity: 0; transform: scale(1.9) rotate(30deg); filter: blur(4px); }
}
@keyframes phase-ring-puff {
    0%   { opacity: 0;   transform: scale(0.4); }
    40%  { opacity: 0.7; transform: scale(1.2); }
    100% { opacity: 0;   transform: scale(2.4); }
}

/* Respekt für Reduce-Motion: Übergang fast unsichtbar machen */
@media (prefers-reduced-motion: reduce) {
    .phase-overlay-bg,
    .phase-overlay-center,
    .phase-overlay-caption,
    .phase-ring {
        animation: phase-fade-in 0.1s ease-out forwards !important;
    }
}

/* HTTP-Fehler-Seiten (403/404/500) — gemeinsamer Look */
.error-card {
    max-width: 560px;
    margin: 48px auto;
    padding: 40px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    text-align: center;
}
.error-meme {
    display: block;
    margin: 0 auto 18px;
    max-width: 320px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.error-code {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.error-title {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
}
.error-text {
    margin: 0 auto 24px;
    max-width: 440px;
    color: var(--text-muted);
    line-height: 1.55;
}
.error-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.error-meta {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}

/* Pagination (Laravel default) */
nav[role="navigation"] svg { display: inline; vertical-align: middle; height: 14px; }
.pagination, nav[role="navigation"] > div:last-child { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* Guest (login) */
.guest-body {
    background: linear-gradient(135deg, #fff1e6 0%, #f5f5f3 100%);
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
    position: relative; overflow: hidden;
}
.guest-particles {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.guest-shell { width: 100%; max-width: 380px; position: relative; z-index: 1; }
.guest-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.guest-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; }
.guest-logo { display: block; height: 44px; width: auto; max-width: 100%; }
.guest-suffix {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding-left: 10px;
    border-left: 2px solid var(--border);
    line-height: 1;
}

/* Ticket-Stoppuhr — vollständig im Popover-Block oben definiert
   (siehe .stopwatch-popover). Legacy-Sidebar-Styles wurden entfernt;
   nur die Puls-Animation für den Status-Dot bleibt hier global. */
@keyframes sw-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.9); }
}

/* ============================================================
   Dark-mode overrides for hardcoded color values.
   `html.is-dark` is set by the inline theme script when the
   effective theme is dark (explicit choice OR system+OS dark).
   ============================================================ */
html.is-dark .pill { background: #2a2f34; color: #d6d6d2; }
html.is-dark .pill-red    { background: #3a1d1d; color: #f0a4a4; }
html.is-dark .pill-yellow { background: #3a2f15; color: #ecc466; }
html.is-dark .pill-green  { background: #1a3424; color: #82d49a; }
html.is-dark .pill-blue   { background: #1c2a47; color: #94b3ec; }
html.is-dark .pill-gray   { background: #2a2f34; color: #b6b6b2; }

html.is-dark .alert-info    { background: #1c2a47; border-color: #2c3d62; color: #b6cdf2; }
html.is-dark .alert-success { background: #1a3424; border-color: #265838; color: #b1e3c1; }
html.is-dark .alert-error   { background: #3a1d1d; border-color: #5a2a2a; color: #f0a4a4; }

html.is-dark .tl-comment.is-internal .tl-card { background: #2f2818; }
html.is-dark .tc-duration { border-color: #5a3a1c; }

html.is-dark code { background: var(--surface-2); color: var(--text); }

/* ============================================================
   Stundentafel (timesheet week view)
   ============================================================ */
.ts-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.ts-user-name { font-weight: 600; font-size: 15px; }
.ts-user-picker select {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}
.ts-range { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); }
.ts-range-month { font-weight: 600; color: var(--text); }
.ts-range-sep { opacity: 0.5; }
.ts-total { margin-left: auto; font-weight: 700; font-size: 14px; color: var(--accent); }

.ts-grid {
    display: grid;
    grid-template-columns: 64px repeat(7, minmax(0, 1fr));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.ts-head {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-size: 13px;
    background: var(--surface-2);
}
.ts-head:last-child { border-right: none; }
.ts-head-axis { padding: 0; }
.ts-head.is-today { background: var(--accent-soft); color: var(--accent-strong); }
.ts-head.is-weekend { color: var(--text-subtle); }
.ts-head-day { font-weight: 700; margin-right: 4px; font-size: 14px; }
.ts-head-name { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }

.ts-axis {
    border-right: 1px solid var(--border);
    background: var(--surface-2);
    height: var(--ts-grid-height);
    position: relative;
}
.ts-axis-row { box-sizing: border-box; border-bottom: 1px dashed var(--border); padding: 4px 8px; }
.ts-axis-label { font-size: 11px; color: var(--text-muted); }

.ts-day {
    position: relative;
    height: var(--ts-grid-height);
    border-right: 1px solid var(--border);
    overflow: hidden;
}
.ts-day:last-child { border-right: none; }
.ts-day.is-today { background: rgba(254,89,0,0.04); }
.ts-day.is-weekend { background: var(--surface-2); }
.ts-day-row {
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(25% - 1px),
        rgba(0, 0, 0, 0.04) calc(25% - 1px),
        rgba(0, 0, 0, 0.04) 25%
    );
}
html.is-dark .ts-day-row {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(25% - 1px),
        rgba(255, 255, 255, 0.05) calc(25% - 1px),
        rgba(255, 255, 255, 0.05) 25%
    );
}

.ts-block {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 6px;
    padding: 4px 7px;
    font-size: 11px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}
.ts-block-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-block-sub { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.ts-block-dur { font-weight: 600; align-self: flex-end; margin-top: auto; font-size: 10px; opacity: 0.85; }
.ts-entry { cursor: grab; user-select: none; }
.ts-entry.is-dragging { cursor: grabbing; opacity: 0.85; box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 10; }
.ts-entry:hover { filter: brightness(0.96); color: var(--text); }
.ts-handle {
    position: absolute;
    left: 0; right: 0;
    height: 6px;
    cursor: ns-resize;
    background: transparent;
}
.ts-handle-top { top: 0; }
.ts-handle-bottom { bottom: 0; }
.ts-entry:hover .ts-handle { background: rgba(0, 0, 0, 0.08); }
html.is-dark .ts-entry:hover .ts-handle { background: rgba(255, 255, 255, 0.12); }

.ts-ghost {
    background: rgba(254, 89, 0, 0.18);
    border: 2px dashed var(--accent);
    pointer-events: none;
    z-index: 5;
    color: var(--accent-strong);
    font-weight: 600;
}
.ts-ghost .ts-time-label { display: block; }

.ts-floating-time {
    position: fixed;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--surface);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.08s;
}
.ts-floating-time.is-visible { opacity: 1; }

.ts-menu {
    position: fixed;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
}
.ts-menu a, .ts-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
}
.ts-menu a:hover, .ts-menu button:hover { background: var(--surface-2); color: var(--accent); }
.ts-menu button[data-act="delete"]:hover { background: #fdecec; color: #b13333; }
html.is-dark .ts-menu button[data-act="delete"]:hover { background: #3a1d1d; color: #f0a4a4; }


/* ============================================================
   Device picker (tag-input style for linking devices to tickets)
   ============================================================ */
.device-picker {
    display: flex; flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}
.device-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.device-chips:empty { display: none; }
.device-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
}
.device-chip code {
    background: transparent;
    padding: 0;
    font-weight: 600;
}
.device-chip-meta { color: var(--text-muted); font-size: 11px; }
.device-chip button[data-remove] {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1;
    padding: 0;
}
.device-chip button[data-remove]:hover { background: #fdecec; color: #b13333; }
html.is-dark .device-chip button[data-remove]:hover { background: #3a1d1d; color: #f0a4a4; }
.device-picker-search { position: relative; }
.device-picker-input {
    border: none;
    padding: 4px 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    outline: none;
    width: 100%;
}
.device-picker-suggestions {
    position: absolute; top: 100%; left: 0; right: 0;
    margin-top: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    max-height: 280px; overflow-y: auto;
    z-index: 1000;
    padding: 4px 0;
}
.device-picker-item {
    display: flex; align-items: baseline; gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
}
.device-picker-item code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    background: transparent;
    padding: 0;
}
.device-picker-item-meta { color: var(--text-muted); font-size: 12px; }
.device-picker-item:hover,
.device-picker-item.is-active { background: var(--surface-2); }
.device-picker-item.is-active { outline: 2px solid var(--accent); outline-offset: -2px; }
/* ============================================================
   Kategorie-Karten (admin/inventory)
   ============================================================ */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
.category-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.category-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.category-card-view {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px;
    position: relative;
}
.category-card-icon {
    font-size: 36px; line-height: 1;
    margin: 4px 0 2px;
}
.category-card-name { font-weight: 600; font-size: 14px; }
.category-card-meta {
    display: flex; gap: 10px; align-items: center; justify-content: center;
    font-size: 11px; color: var(--text-muted);
}
.category-card-key code {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.category-card-count { white-space: nowrap; }
.category-card-actions {
    position: absolute; top: -4px; right: -4px;
    display: flex; gap: 4px;
    opacity: 0;
    transition: opacity 0.12s;
}
.category-card:hover .category-card-actions,
.category-card:focus-within .category-card-actions { opacity: 1; }
.category-card-edit { padding-top: 4px; }

/* ============================================================
   Bearbeiter-Liste / Assignee-Picker
   ============================================================ */
.assignee-list { display: flex; flex-wrap: wrap; gap: 6px; }
.assignee-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.3;
}
.assignee-chip.is-primary {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-strong);
    font-weight: 600;
}
.assignee-star { color: var(--accent); font-size: 13px; line-height: 1; }

.assignee-picker {
    display: flex; flex-direction: column; gap: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}
.assignee-picker .assignee-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.assignee-picker .assignee-chip {
    padding: 3px 4px 3px 4px;
    border-radius: 6px;
}
.assignee-star-btn {
    border: none; background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px; line-height: 1;
    padding: 0 2px;
}
.assignee-star-btn:hover { color: var(--accent); }
.assignee-chip.is-primary .assignee-star-btn { color: var(--accent); }
.assignee-name { padding: 0 4px; }
.assignee-remove-btn {
    border: none; background: transparent;
    color: var(--text-muted); cursor: pointer;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1; padding: 0;
}
.assignee-remove-btn:hover { background: #fdecec; color: #b13333; }
html.is-dark .assignee-remove-btn:hover { background: #3a1d1d; color: #f0a4a4; }
.assignee-search { position: relative; }
.assignee-picker-input {
    border: none; padding: 4px 6px;
    background: transparent; color: var(--text);
    font: inherit; font-size: 13px;
    outline: none; width: 100%;
}
.assignee-picker-suggestions {
    position: absolute; top: 100%; left: 0; right: 0;
    margin-top: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    max-height: 240px; overflow-y: auto;
    z-index: 1000;
    padding: 4px 0;
}
.assignee-picker-item {
    padding: 6px 10px; font-size: 13px;
    cursor: pointer;
}
.assignee-picker-item:hover,
.assignee-picker-item.is-active { background: var(--surface-2); }
.assignee-picker-item.is-active { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ============================================================
   Bestell-Positionen — dynamische Reihen im PO-Form
   ============================================================ */
.po-items { display: flex; flex-direction: column; gap: 10px; }
.po-item-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--surface-2);
}
.po-item-grid {
    display: grid;
    grid-template-columns: 1fr 140px 80px 30px;
    grid-template-areas:
        "product  art      qty     remove"
        "customer customer target  target"
        "address  address  address address";
    gap: 8px 10px;
    align-items: end;
}
.po-item-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-item-cell label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.po-item-cell input, .po-item-cell select { font-size: 13px; padding: 4px 6px; width: 100%; box-sizing: border-box; }
.po-item-product  { grid-area: product; }
.po-item-art      { grid-area: art; }
.po-item-qty      { grid-area: qty; }
.po-item-actions  { grid-area: remove; align-self: end; }
.po-item-customer { grid-area: customer; }
.po-item-target   { grid-area: target; }
.po-item-address  { grid-area: address; }
@media (max-width: 640px) {
    .po-item-grid {
        grid-template-columns: 1fr 80px 30px;
        grid-template-areas:
            "product  product remove"
            "art      qty     qty"
            "customer customer customer"
            "target   target  target"
            "address  address address";
    }
}

/* ============================================================
   Gerätegruppen — Multi-Picker auf Geräten + Tiles
   ============================================================ */
.device-group-picker {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}
.device-group-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.device-group-picker-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 4px 3px 10px;
    background: #dbe9ff;
    color: #1e3a8a;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
html.is-dark .device-group-picker-chip { background: #1e3a8a; color: #dbe9ff; }
.device-group-picker-chip button {
    border: none; background: transparent;
    color: inherit; opacity: 0.6; cursor: pointer;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1; padding: 0;
}
.device-group-picker-chip button:hover { opacity: 1; background: rgba(0,0,0,0.1); }
.device-group-picker-input {
    border: none; padding: 4px 6px;
    background: transparent; color: var(--text);
    font: inherit; font-size: 13px;
    outline: none; width: 100%;
}

/* ============================================================
   IP-Adressen — Multi-Input und Anzeige-Badges
   ============================================================ */
.ip-list { display: flex; flex-direction: column; gap: 6px; }
.ip-row { display: flex; gap: 6px; align-items: center; }
.ip-row > input { flex: 1; }
.ip-display { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
}
.ip-badge code {
    background: transparent; padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ip-kind {
    font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
    padding: 1px 5px; border-radius: 2px; text-transform: uppercase;
    background: var(--accent-soft); color: var(--accent-strong);
}

.device-list { display: flex; flex-direction: column; gap: 4px; }
.device-chip-link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s, background 0.12s;
}
.device-chip-link:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

/* ============================================================
   Customer contacts list
   ============================================================ */
.contact-list { display: flex; flex-direction: column; gap: 8px; }
.contact-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--surface);
}
.contact-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.contact-role { color: var(--text-muted); font-size: 13px; }
.contact-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.contact-meta a { color: var(--text); }
.contact-meta a:hover { color: var(--accent); }
.contact-notes { font-size: 12px; color: var(--text-muted); margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border); white-space: pre-wrap; }
.contact-form { margin-top: 12px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; }

/* Letzte Aktivitäten auf der Mitarbeiter-Seite */
.emp-activity-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; }
.emp-activity-row { display: flex; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.emp-activity-row:last-child { border-bottom: none; }
.emp-activity-time { flex: none; width: 70px; color: var(--text-muted); font-size: 11px; padding-top: 2px; }
.emp-activity-body { flex: 1; min-width: 0; }

/* Mitarbeiter-Dokumentenablage */
.doc-folder-tree { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.doc-folder {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
}
.doc-folder-head {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.doc-folder-head::-webkit-details-marker { display: none; }
.doc-folder-head::marker { content: ''; }
.doc-folder-head::before {
    content: '▸';
    color: var(--text-muted);
    font-size: 11px;
    transition: transform 0.15s;
    display: inline-block;
}
.doc-folder[open] > .doc-folder-head::before { transform: rotate(90deg); }
.doc-folder-icon { font-size: 16px; }
.doc-folder-name { font-weight: 600; flex: 1; }
.doc-folder-count {
    background: var(--surface);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.doc-folder-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.doc-folder-head:hover .doc-folder-actions { opacity: 1; }

.doc-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px 8px; }
.doc-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
}
.doc-row-view { display: flex; gap: 10px; align-items: flex-start; }
.doc-row-icon { font-size: 22px; flex: none; padding-top: 2px; }
.doc-row-body { flex: 1; min-width: 0; }
.doc-row-name {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.doc-row-name a { color: var(--text); font-weight: 500; }
.doc-row-name a:hover { color: var(--accent); }
.doc-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.doc-row-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-style: italic; }
.doc-row-actions { display: flex; gap: 4px; flex: none; }

/* Hardware-Zuordnung pro Mitarbeiter */
.hw-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.hw-row {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    background: var(--surface-2);
}
.hw-row-head { display: flex; gap: 10px; align-items: flex-start; }
.hw-row-icon {
    font-size: 24px;
    text-decoration: none;
    flex: none;
    line-height: 1;
    padding-top: 2px;
}

/* Profilbild eines Ansprechpartners — quadratisch, rund maskiert */
.contact-avatar {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.contact-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* Compact icon-only button used for delete actions in inline lists */
.btn-icon { padding: 4px 7px; font-size: 13px; min-width: 28px; }

/* Customer logo in master-data card */
.customer-logo {
    width: 56px; height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.customer-logo-placeholder {
    width: 56px; height: 56px;
    border-radius: 8px;
    background: var(--accent);
    color: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px;
}

/* Customer file browser */
.cf-breadcrumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
}
.cf-breadcrumbs a { color: var(--accent); }
.cf-sep { color: var(--text-subtle); }
.cf-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.cf-action-form { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 240px; }
.cf-action-form input[type="text"], .cf-action-form input[type="file"] {
    flex: 1; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 13px; background: var(--surface); color: var(--text);
}

/* =====================================================================
   NOTIZ-DRAWER — Sticky-Note-Scratchpad mit FAB rechts unten.
   Folgt dem etablierten FAB-+-Slide-over-Drawer-Pattern der
   Benachrichtigungen. Container-Innenrand 18px gemäß §12.
===================================================================== */

/* FAB sitzt links vom Clock-FAB (24 + 56 + 8 = 88) + (88 + 56 + 8 = 152). */
.notes-fab {
    position: fixed;
    bottom: 24px; right: 152px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    z-index: 9998;
    transition: transform 0.15s, box-shadow 0.15s, background 0.12s;
}
.notes-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    background: var(--surface-2);
}
.notes-fab-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; line-height: 1;
}
.notes-fab-icon svg.icon { width: 24px; height: 24px; vertical-align: 0; }

/* Drawer — gleiche Floating-Card-Optik wie Notification-Drawer. */
.notes-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9990;
    opacity: 0;
    transition: opacity 0.25s;
}
.notes-drawer-backdrop.is-open { opacity: 1; }

.notes-drawer {
    position: fixed;
    top: 12px; right: 12px; bottom: 12px;
    width: 400px; max-width: calc(100vw - 24px);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    z-index: 9999;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateX(calc(100% + 24px));
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.notes-drawer.is-open { transform: translateX(0); }

.notes-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.notes-drawer-title {
    margin: 0; font-size: 15px;
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notes-drawer-actions { display: flex; gap: 4px; flex: none; }

/* Tab-Leiste unter dem Header — Meine / Geteilt / Alle */
.notes-drawer-tabs {
    display: flex; gap: 4px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.notes-tab {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.notes-tab:hover { color: var(--text); }
.notes-tab.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}
.notes-tab-count {
    display: inline-block;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.12);
}
.notes-tab.is-active .notes-tab-count { background: rgba(255, 255, 255, 0.25); }

/* Sichtbarkeits-Radio — wird sowohl in Edit-Mode-Karten als auch bei
   neuen Drafts verwendet. */
.notes-editor-visibility {
    display: flex; gap: 8px;
    font-size: 12px; color: var(--text-muted);
}
.notes-editor-visibility label {
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
}
.notes-editor-visibility input[type="radio"] { margin: 0 2px 0 0; }

/* Body: scrollende Liste */
.notes-drawer-body { flex: 1; overflow-y: auto; }
.notes-empty { padding: 36px; text-align: center; color: var(--text-muted); font-size: 13px; }

.notes-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-muted);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 12px 14px;
    margin: 10px 14px;
    display: flex; flex-direction: column; gap: 6px;
    transition: background 0.12s, box-shadow 0.12s;
}
.notes-item:hover {
    background: var(--surface-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.notes-item.is-shared { border-left-color: #5b8def; }
.notes-item.is-private { border-left-color: #8b8b8b; }
.notes-item.is-editing {
    background: var(--surface-2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.notes-item-head {
    display: flex; align-items: center; gap: 8px;
}
.notes-item-title {
    flex: 1; min-width: 0;
    font-weight: 600; font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notes-item-title.is-untitled {
    color: var(--text-muted); font-weight: 500; font-style: italic;
}

/* Body wird per default auf 88px geclampt — lange Notizen sind eingeklappt.
   Der mehr/weniger-Toggle (JS) hängt `is-expanded` an die Karte und löst
   damit das clamp auf. */
.notes-item-body {
    font-size: 12.5px; line-height: 1.45;
    color: var(--text);
    white-space: pre-wrap; word-wrap: break-word;
    max-height: 88px;
    overflow: hidden;
    position: relative;
}
/* Fade-Out am unteren Rand wenn geclampt — nur sichtbar wenn der Body
   wirklich überläuft. `is-clampable` wird vom JS gesetzt. */
.notes-item-body.is-clampable::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
    background: linear-gradient(to bottom, transparent, var(--surface));
    pointer-events: none;
}
.notes-item:hover .notes-item-body.is-clampable::after {
    background: linear-gradient(to bottom, transparent, var(--surface-2));
}
.notes-item.is-expanded .notes-item-body {
    max-height: none;
}
.notes-item.is-expanded .notes-item-body::after { display: none; }

.notes-item-toggle {
    align-self: flex-start;
    padding: 2px 8px;
    background: transparent;
    border: none;
    color: var(--accent);
    font: inherit;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
}
.notes-item-toggle:hover { background: rgba(0, 0, 0, 0.04); }
.notes-item-toggle[hidden] { display: none; }

.notes-item-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
    font-size: 11px; color: var(--text-muted);
}
.notes-item-meta-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.notes-item-actions { display: flex; gap: 4px; }
.notes-item-actions .btn-icon { padding: 2px 5px; }

/* Edit-Mode: Titel + Body als Inputs INNERHALB derselben Karte —
   kein separates Editor-Feld mehr im Header. */
.notes-item-edit-title,
.notes-item-edit-body {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
}
.notes-item-edit-body { resize: vertical; min-height: 80px; }
.notes-item-edit-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
}
.notes-item-edit-actions { display: flex; gap: 6px; }

/* =====================================================================
   KALENDER — Layout (Kalender links + Sidebar rechts).
===================================================================== */
.cal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: start;
}
.cal-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cal-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 70px; }
@media (max-width: 980px) {
    .cal-layout { grid-template-columns: 1fr; }
    .cal-sidebar { position: static; }
}

/* Sidebar-Listen */
.cal-side-list { list-style: none; margin: 0; padding: 0; }
.cal-side-event,
.cal-side-ticket {
    display: flex; flex-direction: column; gap: 1px;
    padding: 6px 8px;
    border-left: 3px solid var(--blue, #2e86de);
    background: rgba(46, 134, 222, 0.06);
    border-radius: 0 4px 4px 0;
    margin-bottom: 6px;
    font-size: 12px;
}
.cal-side-event.is-linked {
    border-left-color: var(--accent);
    background: rgba(254, 89, 0, 0.06);
}
.cal-side-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-side-title { font-weight: 500; word-break: break-word; }
.cal-side-loc { font-size: 11px; color: var(--text-muted); }
.cal-side-ticket a { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.cal-side-ticket a:hover { text-decoration: underline; }
.cal-side-num { font-size: 10px; font-weight: 600; color: var(--text-muted); }
.cal-side-due { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cal-side-due.is-overdue { color: var(--red); font-weight: 600; }

/* Kalender-Bedienung sitzt jetzt im System-Topbar (page_actions-Slot).
   Hier nur die Layout-Helpers für die Gruppen — Datum + KW erscheinen
   im page_subtitle, also keine eigene Title-Komponente mehr. */
.cal-topbar-nav { display: inline-flex; gap: 4px; }
.cal-toolbar-views { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-view-btn {
    padding: 6px 12px; font-size: 12px; text-decoration: none;
    color: var(--text); background: var(--surface);
    border-right: 1px solid var(--border);
}
.cal-view-btn:last-child { border-right: 0; }
.cal-view-btn:hover { background: var(--surface-2); }
.cal-view-btn.is-active { background: var(--accent); color: #fff; }

/* =====================================================================
   KALENDER — Tag- und Wochen-Ansicht (Stunden-Grid mit Events).
   Lehnt sich optisch an .ts-grid aus dem Stundentafel-Modul an.
===================================================================== */
/* Container scrollt vertikal — 24-Stunden-Grid passt sonst nie auf
   den Bildschirm. JS scrollt initial zur aktuellen Stunde. */
.cal-tw-scroll {
    max-height: calc(100vh - 220px);
    min-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}
.cal-tw-grid {
    display: grid;
    grid-template-columns: 56px repeat(var(--cal-day-count), minmax(0, 1fr));
    grid-template-rows: 42px var(--cal-grid-h);
    background: var(--border);
    gap: 1px;
}
/* Wenn ganztägige Termine vorhanden, kommt eine zusätzliche Reihe
   zwischen Header und Stunden-Grid — passt sich der Höhe der Chips an. */
.cal-tw-grid.has-allday {
    grid-template-rows: 42px auto var(--cal-grid-h);
}
/* Header sticky am oberen Rand des scrollbaren Containers */
.cal-tw-grid > .cal-tw-head {
    position: sticky;
    top: 0;
    z-index: 5;
}
/* All-Day-Row */
.cal-tw-allday-axis {
    /* Leere Zelle als Platzhalter für die Achs-Spalte — nur Optik,
       passt zum Stunden-Achs-Hintergrund darunter. */
    background: var(--surface-2);
    grid-row: 2;
    grid-column: 1;
    position: sticky; top: 42px; z-index: 4;
}
.cal-tw-allday {
    background: var(--surface);
    padding: 4px;
    display: flex; flex-direction: column; gap: 2px;
    min-height: 22px;
    grid-row: 2;
    position: sticky; top: 42px; z-index: 4;
}
.cal-tw-allday.is-weekend { background: #fbfaf6; }
.cal-tw-allday-event {
    border: 0;
    background: rgba(46, 134, 222, 0.14);
    color: #1c5aa3;
    border-left: 3px solid #2e86de;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
    text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-tw-allday-event:hover { background: rgba(46, 134, 222, 0.24); }
.cal-tw-allday-event.cal-ev-ticket {
    background: rgba(254, 89, 0, 0.14);
    color: #a3360c;
    border-left-color: var(--accent);
}
.cal-tw-allday-event.cal-ev-ticket:hover { background: rgba(254, 89, 0, 0.24); }
/* Wenn All-Day-Row aktiv, Axis + Day rutschen auf Row 3 */
.cal-tw-grid.has-allday .cal-tw-axis,
.cal-tw-grid.has-allday .cal-tw-day {
    grid-row: 3;
}
.cal-tw-head {
    background: var(--surface);
    padding: 6px 10px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    font-size: 11px; line-height: 1.2;
    color: var(--text-muted);
}
.cal-tw-axis-head {
    background: var(--surface-2);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Heute-Header: nur Akzent-Farbe + Border-Bottom, keine Background-
   Tönung — sonst wirkt die heutige Spalte im Vollbildmodus optisch
   abgedunkelt gegenüber den anderen Tagen. */
.cal-tw-head.is-today {
    color: var(--accent);
    box-shadow: inset 0 -3px 0 var(--accent);
}
.cal-tw-head.is-weekend { background: #fbfaf6; }
.cal-tw-head-name { text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
.cal-tw-head-day { font-size: 18px; font-weight: 600; color: var(--text); }
.cal-tw-head.is-today .cal-tw-head-day { color: var(--accent); }

.cal-tw-axis {
    background: var(--surface);
    position: relative;
    grid-row: 2;
    grid-column: 1;
}
.cal-tw-axis-row {
    border-bottom: 1px solid var(--border);
    position: relative;
}
.cal-tw-axis-label {
    position: absolute;
    top: -8px;
    right: 6px;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--surface);
    padding: 0 4px;
    font-variant-numeric: tabular-nums;
}
/* Erstes Label (00:00) komplett ausblenden — der Beginn der Stunden-
   achse ist implizit, ein Label dort wirkt redundant. */
.cal-tw-axis-row:first-child .cal-tw-axis-label {
    display: none;
}

.cal-tw-day {
    background: var(--surface);
    position: relative;
    cursor: crosshair;
    grid-row: 2;
}
/* Heute-Spalte: keine Background-Tönung mehr — wirkte sonst gegenüber
   den anderen Spalten "abgedunkelt". Akzent steckt im Header (s.o.). */
.cal-tw-day.is-weekend { background: #fbfaf6; }
.cal-tw-day-row {
    border-bottom: 1px solid var(--border);
}
.cal-tw-day-row:nth-child(2n) {
    border-bottom-color: rgba(0,0,0,0.04);
}

/* Event-Block in Tag/Wochen-Ansicht */
.cal-tw-event {
    position: absolute;
    left: 2px;
    right: 2px;
    background: rgba(46, 134, 222, 0.14);
    color: #1c5aa3;
    border-left: 3px solid #2e86de;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
    overflow: hidden;
    z-index: 2;
}
.cal-tw-event:hover { background: rgba(46, 134, 222, 0.24); z-index: 3; }
.cal-tw-event-time { font-weight: 600; display: block; font-variant-numeric: tabular-nums; }
/* Titel: wenn das Event hoch genug ist, mehrzeilig umbrechen und am
   Ende mit Ellipsis abschneiden, statt mitten im Wort zu clippen. */
.cal-tw-event-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    font-weight: 500;
    word-break: break-word;
}
.cal-tw-event-loc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    font-size: 10px;
    color: inherit;
    opacity: 0.7;
}

/* Kompakt-Variante für sehr kurze Termine (<=30 min): Zeit + Titel
   in einer Zeile, ohne extra Block-Umbruch. Sonst würde der Titel
   bei zu kleiner Box-Höhe komplett wegclippen. */
.cal-tw-event.is-compact {
    padding: 1px 6px;
    line-height: 1.15;
    white-space: nowrap;
}
.cal-tw-event.is-compact .cal-tw-event-time { display: inline; margin-right: 5px; }
.cal-tw-event.is-compact .cal-tw-event-title {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: initial;
    line-clamp: initial;
}
.cal-tw-event.is-compact .cal-tw-event-loc { display: none; }

/* Off-Hours-Overlay: dezent abgedunkelte Bereiche außerhalb der
   Arbeitszeit. Liegt über den Stunden-Linien, unter den Events. */
.cal-tw-offhours {
    position: absolute;
    left: 0; right: 0;
    background: rgba(15, 23, 42, 0.05);
    pointer-events: none;
    z-index: 1;
}
:root[data-theme="dark"] .cal-tw-offhours { background: rgba(0, 0, 0, 0.22); }
@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] .cal-tw-offhours { background: rgba(0, 0, 0, 0.22); }
}

/* Aktuelle-Zeit-Linie.
   In jeder Tagesspalte gerendert: heute volle Intensität (mit Punkt),
   Vergangenheit/Zukunft verblasst — bildet zusammen eine durch-
   gehende horizontale Linie über die ganze Wochenbreite. */
.cal-now-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    opacity: 0.25;
    z-index: 4;
    pointer-events: none;
}
.cal-now-line.is-today {
    opacity: 1;
}
.cal-now-line.is-today::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
}

/* Drag-to-create-Overlay */
.cal-drag-overlay {
    position: absolute;
    left: 2px; right: 2px;
    background: rgba(254, 89, 0, 0.22);
    border: 2px dashed var(--accent);
    border-radius: 3px;
    z-index: 5;
    pointer-events: none;
}

/* =====================================================================
   KALENDER — Monatsansicht mit KW-Spalte links.
===================================================================== */
.cal-month { display: flex; flex-direction: column; }
.cal-month-head {
    display: grid;
    grid-template-columns: 36px repeat(7, 1fr);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.cal-month-kwhead {
    padding: 8px 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}
.cal-month-wd {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.cal-month-row {
    display: grid;
    grid-template-columns: 36px repeat(7, 1fr);
    border-bottom: 1px solid var(--border);
}
.cal-month-row:last-child { border-bottom: 0; }
.cal-month-kw {
    background: var(--surface-2);
    padding: 6px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--border);
}

/* =====================================================================
   KALENDER — Jahresansicht (12 Mini-Monate als 3×4-Grid).
===================================================================== */
.cal-year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 980px) {
    .cal-year-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cal-year-grid { grid-template-columns: 1fr; }
}
.cal-year-month {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.cal-year-month-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    margin-bottom: 6px;
}
.cal-year-month-title:hover { color: var(--accent); }
.cal-year-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 4px;
}
.cal-year-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}
.cal-year-day {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    color: var(--text);
    text-decoration: none;
    border-radius: 3px;
}
.cal-year-day.is-other { color: var(--text-muted); opacity: 0.4; }
.cal-year-day.is-today { background: var(--accent); color: #fff; font-weight: 600; }
.cal-year-day.is-low  { background: rgba(46, 134, 222, 0.18); color: #1c5aa3; }
.cal-year-day.is-mid  { background: rgba(46, 134, 222, 0.40); color: #fff; }
.cal-year-day.is-high { background: rgba(46, 134, 222, 0.75); color: #fff; }
.cal-year-day:hover { outline: 2px solid var(--accent); }

/* =====================================================================
   KALENDER — Monats-Grid mit Event-Chips.
   Vanilla CSS-Grid, 7 Spalten × variable Zeilen. Keine externe Library.
===================================================================== */
.cal-day {
    background: var(--surface);
    padding: 6px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    position: relative;
}
.cal-day.is-other-month { background: #fafaf8; }
.cal-day.is-other-month .cal-day-number { color: var(--text-muted); opacity: 0.5; }
.cal-day.is-weekend { background: #fbfaf6; }
.cal-day.is-weekend.is-other-month { background: #f7f6f2; }
.cal-day.is-today {
    background: rgba(254, 89, 0, 0.06);
    box-shadow: inset 0 0 0 2px var(--accent);
}
.cal-day.is-today .cal-day-number {
    color: var(--accent);
    font-weight: 700;
}
.cal-day-number {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 2px;
}

/* Event-Chips: kompakt, klickbar, farblich nach showAs-Status. */
.cal-event {
    display: flex;
    align-items: baseline;
    gap: 4px;
    border: 0;
    background: rgba(46, 134, 222, 0.12);
    color: #1c5aa3;
    border-left: 3px solid #2e86de;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11.5px;
    line-height: 1.3;
    cursor: pointer;
    text-align: left;
    width: 100%;
    overflow: hidden;
}
.cal-event:hover { background: rgba(46, 134, 222, 0.22); }
.cal-event-time {
    font-weight: 600;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.cal-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Farb-Varianten nach showAs-Status */
.cal-ev-busy       { background: rgba(46, 134, 222, 0.12); color: #1c5aa3; border-left-color: #2e86de; }
.cal-ev-busy:hover { background: rgba(46, 134, 222, 0.22); }
.cal-ev-free       { background: rgba(120, 120, 120, 0.10); color: #555;    border-left-color: #888; }
.cal-ev-free:hover { background: rgba(120, 120, 120, 0.20); }
.cal-ev-tentative  { background: rgba(245, 188, 41, 0.14); color: #8a6d10; border-left-color: #f5bc29; }
.cal-ev-tentative:hover { background: rgba(245, 188, 41, 0.24); }
.cal-ev-oof        { background: rgba(170, 90, 200, 0.14); color: #6c3892; border-left-color: #aa5ac8; }
.cal-ev-oof:hover  { background: rgba(170, 90, 200, 0.24); }
.cal-ev-elsewhere  { background: rgba(54, 160, 122, 0.14); color: #1f6e54; border-left-color: #36a07a; }
.cal-ev-elsewhere:hover { background: rgba(54, 160, 122, 0.24); }
/* Ticket-Termine: oranger Akzent (Wyld-Brand) statt blau — sofort
   erkennbar dass das ein Wyld-MGMT-Termin ist, nicht ein zufälliger
   externer Outlook-Eintrag. */
.cal-ev-ticket     { background: rgba(254, 89, 0, 0.14); color: #a3360c; border-left-color: var(--accent); }
.cal-ev-ticket:hover { background: rgba(254, 89, 0, 0.24); }
.cal-tw-event.cal-ev-ticket { background: rgba(254, 89, 0, 0.14); color: #a3360c; border-left-color: var(--accent); }
.cal-tw-event.cal-ev-ticket:hover { background: rgba(254, 89, 0, 0.24); }

.cal-more {
    font-size: 10.5px;
    color: var(--text-muted);
    padding: 1px 6px;
    font-style: italic;
}

/* Mobile: kleinere Zellen, Events nur als Punkte */
@media (max-width: 720px) {
    .cal-grid { grid-auto-rows: minmax(70px, auto); }
    .cal-event { font-size: 10px; padding: 1px 4px; }
}

/* =====================================================================
   MODUL-EINSTELLUNGEN — Tiles auf der Admin-Übersichtsseite.
   App-Launcher-Stil: Icon links in einem getönten Accent-Chip,
   Label rechts. Wirkt deutlich präsenter als die alte schmale
   Border-only-Variante.
===================================================================== */
.module-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.module-settings-tile {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 14px; font-weight: 500;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(34, 52, 57, 0.04);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
    position: relative;
    overflow: hidden;
}

/* Icon-Chip: weiches Accent-Quadrat links neben dem Label. */
.module-settings-tile .icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    padding: 8px;
    background: rgba(254, 89, 0, 0.10);
    color: var(--accent);
    border-radius: 8px;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.module-settings-tile:hover {
    border-color: var(--accent);
    background: var(--surface);
    color: var(--text);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34, 52, 57, 0.10);
}
.module-settings-tile:hover .icon {
    background: var(--accent);
    color: #ffffff;
    transform: scale(1.05);
}
.module-settings-tile:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Modul-Einstellungen-Seite: konsistente Card-Sektionen.
   Header sitzt NICHT mehr als eigene Bar unter der Topbar — Icon, Titel und
   Beschreibung kommen direkt in die System-Topbar via page_title /
   page_subtitle / page_actions. Hier nur noch die Stat-Zeile + Placeholder. */
.modsetting-info-row {
    display: flex; flex-wrap: wrap; gap: 16px;
    padding: 10px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    font-size: 12px;
}
.modsetting-info-row > div { color: var(--text-muted); }
.modsetting-info-row > div strong { color: var(--text); font-weight: 600; }
.modsetting-placeholder {
    padding: 14px 18px;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

/* =====================================================================
   AUFGABEN-MODUL — Liste + Kanban + Subtask-Checkliste.
   Sidebar-Eintrag direkt unter Kalender. Konventionen: gleiche Pill-
   und Stat-Card-Optik wie der Rest des Systems, eigene Klassen nur
   für das wirklich Modul-spezifische (Kanban-Karten, Subtask-Zeilen).
===================================================================== */

/* Filter-UI nutzt den systemweiten <x-list-filter>-Popover (siehe
   resources/views/components/list-filter.blade.php) — kein eigenes
   Filter-Row-Layout für das Aufgaben-Modul nötig. */

/* --- Listen-Switcher als Topbar-Dropdown (native <details>-Popover) --- */
.task-lists-dropdown {
    position: relative;
}
.task-lists-dropdown > summary {
    list-style: none;             /* native marker entfernen */
    cursor: pointer;
    user-select: none;
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 240px;
}
.task-lists-dropdown > summary::-webkit-details-marker { display: none; }
.task-lists-dropdown > summary::marker { content: ''; }
.task-lists-dropdown > summary > span:not(.icon-sm) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 180px;
}
.task-lists-dropdown[open] > summary {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}
.task-lists-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    max-width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 6px;
    display: flex; flex-direction: column; gap: 1px;
    z-index: 50;
}
.task-lists-section {
    padding: 10px 10px 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
    font-weight: 600;
}
.task-lists-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}
.task-list-new {
    border: 0; background: transparent;
    text-align: left;
    cursor: pointer;
    width: 100%;
    color: var(--accent);
    font: inherit;
}

.task-list-item-wrap {
    display: flex; align-items: stretch; gap: 2px;
    position: relative;
}
.task-list-item {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.12s, color 0.12s;
}
.task-list-item:hover {
    background: var(--surface-2);
    color: var(--accent);
}
.task-list-item.is-active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.task-list-item .icon {
    width: 16px; height: 16px;
    flex: 0 0 auto;
    color: var(--text-muted);
}
.task-list-item.is-active .icon { color: var(--accent); }
.task-list-item-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-list-item-count {
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.task-list-item.is-active .task-list-item-count {
    background: var(--accent);
    color: #fff;
}
.task-list-vis-mini {
    color: var(--text-muted);
    font-size: 10px;
    display: inline-flex; align-items: center;
}
.task-list-vis-mini .icon { width: 12px; height: 12px; }
.task-list-edit-btn {
    background: transparent; border: 0;
    padding: 4px 6px;
    color: var(--text-subtle);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.task-list-edit-btn .icon { width: 14px; height: 14px; }
.task-list-item-wrap:hover .task-list-edit-btn { opacity: 1; }
.task-list-edit-btn:hover {
    color: var(--accent);
    background: var(--surface-2);
}

/* Hauptbereich rechts (Stats + Liste/Kanban) */
.task-main {
    display: flex; flex-direction: column;
    gap: 14px;
}

/* Mitglieder-Auswahl im Listen-Modal */
.task-list-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface-2);
    border-radius: 6px;
}
.task-list-member-check {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s;
}
.task-list-member-check:hover { background: var(--surface); }
.task-list-member-check input { margin: 0; }

/* --- Listen-Ansicht: Quick-Action-Button + Prio-Badges --- */
.task-quick-action {
    background: transparent; border: 0; padding: 4px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.task-quick-action:hover { background: var(--accent-soft); color: var(--accent); }
.task-quick-action.is-done { color: var(--green); }
.task-quick-action .icon { width: 18px; height: 18px; }

.task-row-overdue td:first-child { box-shadow: inset 3px 0 0 #c0392b; }
.task-due-overdue { color: #c0392b; font-weight: 600; }

.task-subtask-badge {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 8px;
    font-size: 11px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.task-subtask-badge .icon { width: 12px; height: 12px; }

.task-desc-snippet {
    font-size: 11px; color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 380px;
}

/* Prioritäts-Badges (klein, neutral) */
.task-prio {
    display: inline-block;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 3px;
    background: var(--surface-2);
    color: var(--text-muted);
}
.task-prio-high   { background: rgba(192, 57, 43, 0.12); color: #c0392b; }
.task-prio-normal { background: var(--surface-2); color: var(--text-muted); }
.task-prio-low    { background: rgba(40, 116, 166, 0.10); color: #2874a6; }

.task-link {
    color: var(--accent); text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.task-link:hover { text-decoration: underline; }
.task-link .icon { width: 12px; height: 12px; }

/* --- Subtask-Editor im Modal --- */
.task-items-list {
    display: flex; flex-direction: column; gap: 4px;
    padding: 6px;
    background: var(--surface-2);
    border-radius: 6px;
}
.task-item-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface);
    padding: 4px 6px;
    border-radius: 4px;
}
.task-item-check { display: inline-flex; align-items: center; }
.task-item-input {
    flex: 1;
    border: 0; background: transparent;
    color: var(--text);
    padding: 4px 6px;
    font-size: 13px;
    outline: none;
}

/* --- Kanban-Board --- */
.task-kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: start;
}
@media (max-width: 900px) {
    .task-kanban { grid-template-columns: 1fr; }
}
.task-kanban-col {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 10px;
    min-height: 200px;
    display: flex; flex-direction: column;
    gap: 8px;
    transition: background 0.12s;
}
.task-kanban-col.is-drop-target {
    background: var(--accent-soft);
    outline: 2px dashed var(--accent);
    outline-offset: -3px;
}
.task-kanban-col-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 4px;
}
.task-kanban-count {
    font-size: 11px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.task-kanban-list {
    display: flex; flex-direction: column; gap: 8px;
    min-height: 60px;
}
.task-kanban-card {
    background: var(--surface-2);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: grab;
    border-left: 3px solid transparent;
    transition: box-shadow 0.12s, transform 0.12s;
}
.task-kanban-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.task-kanban-card.is-dragging { opacity: 0.5; cursor: grabbing; }
.task-kanban-card.task-prio-high-border   { border-left-color: #c0392b; }
.task-kanban-card.task-prio-normal-border { border-left-color: var(--border); }
.task-kanban-card.task-prio-low-border    { border-left-color: #2874a6; }
.task-kanban-card-title {
    font-weight: 600; font-size: 13.5px;
    color: var(--text);
    margin-bottom: 4px;
}
.task-kanban-card-desc {
    font-size: 11.5px; color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.4;
}
.task-kanban-card-meta {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-size: 11px; color: var(--text-muted);
}
.task-kanban-card-meta .icon { width: 12px; height: 12px; }
.task-kanban-card-foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    font-size: 11px; color: var(--text-muted);
}
.task-kanban-card-foot .icon { width: 12px; height: 12px; }
.task-kanban-empty {
    padding: 20px 8px;
    text-align: center;
    font-size: 12px; color: var(--text-muted);
    font-style: italic;
}