/* ═══════════════════════════════════════════════════════════════════════════
   Schaffio Redesign — Design-System „Werkbank"
   Geladen NUR im Redesign-Theme-Layout (themes/redesign/layouts/app.blade.php).
   Regeln: ausschließlich variablenbasiert · kein neues !important außer im klar
   markierten Bootstrap-Utility-Dark-Kompat-Block (Bootstrap-Utilities sind selbst
   !important) · genau EINE Primärfarbe (Orange, kalibriert) · Hairlines statt Boxen.
   Leitsatz: Sidebar = Bereiche · Segmented Control = Ansichten · ··· = Aktionen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
    /* Flächen (Light) — bg bewusst etwas dunkler als früher (#f5f5f7),
       damit die weißen Karten deutlicher abheben (Feedback Michael 2026-07-04). */
    --sf-bg: #e8e8ee;
    --sf-surface: #ffffff;
    --sf-surface-2: #fafafa;
    --sf-hairline: rgba(0, 0, 0, .08);
    --sf-hairline-strong: rgba(0, 0, 0, .14);
    /* Text */
    --sf-text: #1d1d1f;
    --sf-text-2: #6e6e73;
    --sf-text-3: #a1a1a6;
    /* EIN Akzent — Orange, gerechnet statt gehofft */
    --sf-accent: #e8730a;            /* Vollton NUR Buttons/aktive Segmente/Fortschritt */
    --sf-accent-hover: #d16608;
    --sf-accent-text: #c05e04;       /* Links/Kleintext, ≥4.5:1 auf Weiß */
    --sf-accent-tint: rgba(232, 115, 10, .10);
    /* Semantik: nur Tint-BG + satte Textfarbe, nie Vollton */
    --sf-ok: #248a3d;     --sf-ok-bg: rgba(52, 199, 89, .14);
    --sf-warn: #9c6a00;   --sf-warn-bg: rgba(255, 159, 10, .15);
    --sf-danger: #d70015; --sf-danger-bg: rgba(255, 59, 48, .10);
    --sf-info: #3a5f8a;   --sf-info-bg: rgba(90, 140, 190, .13);
    /* Sidebar (bleibt warmes Anthrazit — Markenanker) */
    --sf-sidebar-bg: #3c3c3b;
    --sf-sidebar-bg-2: #333332;
    --sf-sidebar-text: rgba(255, 255, 255, .82);
    --sf-sidebar-text-2: rgba(255, 255, 255, .55);
    --sf-sidebar-active: rgba(232, 115, 10, .18);
    --sf-sidebar-hairline: rgba(255, 255, 255, .10);
    /* Topbar (Translucency — der EINZIGE Blur der App) */
    --sf-topbar-bg: rgba(255, 255, 255, .72);
    /* Geometrie & Effekte */
    --sf-r-card: 12px; --sf-r-ctl: 8px; --sf-r-modal: 16px; --sf-r-badge: 6px; --sf-r-pill: 980px;
    --sf-shadow: 0 1px 2px rgba(0, 0, 0, .04);       /* Karten: die Hairline trägt */
    --sf-shadow-pop: 0 4px 16px rgba(0, 0, 0, .10);  /* nur Dropdowns/Popovers/Sheets */
    --sf-trans: all .15s ease;
    --sf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Chrome-Maße (Bestand) */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 58px;

    /* Legacy-Aliase — von Content-Views direkt benutzt (planung, assignments,
       calendar, users, foto_editor, ai/coins). NICHT entfernen bis Voll-Migration. */
    --primary-color: var(--sf-sidebar-bg);
    --accent-color: var(--sf-accent);

    /* Bootstrap-Bridge (kein Build-Step nötig) */
    --bs-primary: #e8730a;
    --bs-primary-rgb: 232, 115, 10;
    --bs-body-bg: var(--sf-bg);
    --bs-body-color: var(--sf-text);
    --bs-border-color: var(--sf-hairline);
    --bs-link-color: var(--sf-accent-text);
    --bs-link-hover-color: #a54f03;
}

[data-theme="dark"] {
    --sf-bg: #161617;
    --sf-surface: #1d1d1f;
    --sf-surface-2: #2c2c2e;
    --sf-hairline: rgba(255, 255, 255, .13);
    --sf-hairline-strong: rgba(255, 255, 255, .22);
    --sf-text: #f5f5f7;
    --sf-text-2: #a1a1a6;
    --sf-text-3: #6e6e73;
    --sf-accent: #ff8f2e;
    --sf-accent-hover: #ff9f4d;
    --sf-accent-text: #ffa04d;
    --sf-accent-tint: rgba(255, 143, 46, .14);
    --sf-ok: #30d158;     --sf-ok-bg: rgba(48, 209, 88, .16);
    --sf-warn: #ffd60a;   --sf-warn-bg: rgba(255, 214, 10, .14);
    --sf-danger: #ff453a; --sf-danger-bg: rgba(255, 69, 58, .14);
    --sf-info: #7fb2e5;   --sf-info-bg: rgba(127, 178, 229, .14);
    --sf-sidebar-bg: #111113;
    --sf-sidebar-bg-2: #0c0c0e;
    --sf-sidebar-hairline: rgba(255, 255, 255, .07);
    --sf-topbar-bg: rgba(22, 22, 23, .72);
    --sf-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --sf-shadow-pop: 0 4px 16px rgba(0, 0, 0, .5);

    /* Legacy-Dark-Aliase (offers/assistant nutzt var(--dm-surface, fallback)) */
    --dm-bg: var(--sf-bg);
    --dm-surface: var(--sf-surface);
    --dm-border: var(--sf-hairline);
    --dm-text: var(--sf-text);
    --dm-muted: var(--sf-text-2);
}

/* ── 2. Basis ──────────────────────────────────────────────────────────── */
/* Kein horizontales Scrollen durch überbreite Elemente (clip = sticky-sicher, hidden = Fallback) */
html { overflow-x: hidden; overflow-x: clip; }
body {
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: var(--sf-font);
    font-size: 15px;
    line-height: 1.5;
    max-width: 100%;
}
h1, h2, h3, h4, h5, h6 { color: var(--sf-text); }
a { color: var(--sf-accent-text); }
a:hover { color: var(--bs-link-hover-color); }

/* Fokus: nie entfernen, immer Akzent-Ring */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--sf-accent-tint);
    border-color: var(--sf-accent);
}

/* Typo-Rollen */
.sf-page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--sf-text); }
.sf-num { font-variant-numeric: tabular-nums; text-align: right; }
.sf-stat-number { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sf-text); }
.sf-caption { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--sf-text-2); }

/* ── 3. Chrome: Sidebar ────────────────────────────────────────────────── */
#sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--sf-sidebar-bg);
    color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    transition: width .25s ease, transform .3s ease;
    display: flex;
    flex-direction: column;
}
#sidebar .brand {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sf-sidebar-hairline);
    display: flex; align-items: center; justify-content: space-between;
    white-space: nowrap;
}
#sidebar-collapse-btn {
    background: none; border: none; color: var(--sf-sidebar-text-2);
    cursor: pointer; padding: .2rem .3rem; border-radius: var(--sf-r-ctl);
    flex-shrink: 0; line-height: 1;
    transition: color .15s;
}
#sidebar-collapse-btn:hover { color: #fff; }
#sidebar .nav-link {
    color: var(--sf-sidebar-text);
    padding: .5rem 1.25rem;
    margin: 1px .5rem;
    border-radius: var(--sf-r-ctl);
    display: flex; align-items: center; gap: .6rem;
    white-space: nowrap;
    font-size: 14px;
    transition: var(--sf-trans);
}
#sidebar .nav-link i { flex-shrink: 0; font-size: 1rem; width: 18px; text-align: center; }
#sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
#sidebar .nav-link.active {
    color: #fff;
    background: var(--sf-sidebar-active);
}
#sidebar .nav-link.active > i { color: var(--sf-accent); }
[data-theme="dark"] #sidebar .nav-link.active > i { color: var(--sf-accent); }
#sidebar .nav-section {
    padding: .5rem 1.5rem .25rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .4);
    white-space: nowrap;
    transition: opacity .15s;
}

/* Eingeklappt (Mechanik unverändert — JS-Hooks: .collapsed / html.sidebar-is-collapsed) */
#sidebar.collapsed,
html.sidebar-is-collapsed #sidebar { width: var(--sidebar-collapsed-width); }
html.sidebar-is-collapsed #main-content { margin-left: var(--sidebar-collapsed-width); }
html.sidebar-is-collapsed #sidebar,
html.sidebar-is-collapsed #main-content { transition: none !important; } /* Bestand: verhindert Flash beim Initial-Render */
#sidebar.collapsed .nav-link-text,
#sidebar.collapsed .nav-section,
#sidebar.collapsed .brand-text,
#sidebar.collapsed .sidebar-bottom-text,
#sidebar.collapsed .badge,
html.sidebar-is-collapsed #sidebar .nav-link-text,
html.sidebar-is-collapsed #sidebar .nav-section,
html.sidebar-is-collapsed #sidebar .brand-text,
html.sidebar-is-collapsed #sidebar .sidebar-bottom-text,
html.sidebar-is-collapsed #sidebar .badge { display: none !important; } /* Bestand */
#sidebar.collapsed .nav-link { padding: .5rem 0; margin: 1px .35rem; justify-content: center; }
#sidebar.collapsed .brand { justify-content: center; padding: 1rem .5rem; }
#sidebar.collapsed #sidebar-collapse-btn i { transform: rotate(180deg); }

/* Tooltip im eingeklappten Zustand (Bestand) */
#sidebar.collapsed .nav-link { position: relative; }
#sidebar.collapsed .nav-link::after {
    content: attr(data-label);
    position: absolute;
    left: calc(var(--sidebar-collapsed-width) - 4px);
    background: #333;
    color: #fff;
    padding: .25rem .6rem;
    border-radius: var(--sf-r-ctl);
    font-size: .78rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    transition: opacity .15s;
}
#sidebar.collapsed .nav-link:hover::after { opacity: 1; }

/* Aufklappbare Untermenüs (Mechanik unverändert) */
.nav-has-submenu .nav-parent-row { display: flex; align-items: stretch; }
.nav-has-submenu .nav-link-parent { flex: 1; min-width: 0; }
#sidebar button.nav-link-parent,
#sidebar a.nav-link-parent {
    background: transparent;
    border: none;
    font: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
}
.nav-submenu-toggle {
    background: transparent;
    border: none;
    color: var(--sf-sidebar-text-2);
    width: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
}
.nav-submenu-toggle:hover { color: #fff; }
.nav-submenu-toggle i { font-size: .85rem; transition: transform .2s ease; }
.nav-has-submenu.is-expanded .nav-submenu-toggle i { transform: rotate(180deg); }
.nav-submenu {
    list-style: none;
    padding-left: 0;
    margin: 0;
    background: rgba(0, 0, 0, .18);
    border-radius: var(--sf-r-ctl);
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}
.nav-has-submenu.is-expanded .nav-submenu { max-height: 600px; }
#sidebar .nav-submenu .nav-link { padding-left: 2.6rem; font-size: 13px; }
#sidebar.collapsed .nav-submenu,
#sidebar.collapsed .nav-submenu-toggle,
html.sidebar-is-collapsed #sidebar .nav-submenu,
html.sidebar-is-collapsed #sidebar .nav-submenu-toggle { display: none !important; } /* Bestand */

/* Sidebar-Footer: Avatar-Zeile + Popover-Panel */
#sidebar .sf-userbar-wrap {
    margin-top: auto;
    padding: .75rem;
    border-top: 1px solid var(--sf-sidebar-hairline);
}
.sf-userbar {
    display: flex; align-items: center; gap: .6rem;
    width: 100%;
    background: transparent; border: none;
    padding: .4rem .5rem;
    border-radius: var(--sf-r-ctl);
    cursor: pointer;
    text-align: left;
    transition: var(--sf-trans);
}
.sf-userbar:hover { background: rgba(255, 255, 255, .08); }
.sf-avatar {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--sf-accent);
    color: #fff;
    font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.sf-avatar.sf-ring-warn { box-shadow: 0 0 0 2px #ffd60a; }
.sf-avatar.sf-ring-danger { box-shadow: 0 0 0 2px #ff453a; }
.sf-userbar .sf-user-name { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; }
.sf-userbar .sf-user-role { color: var(--sf-sidebar-text-2); font-size: 11px; }
.sf-user-panel {
    position: fixed;
    left: 12px; bottom: 12px;
    width: 300px;
    background: var(--sf-surface);
    border: 1px solid var(--sf-hairline);
    border-radius: var(--sf-r-card);
    box-shadow: var(--sf-shadow-pop);
    padding: 1rem;
    z-index: 1100;
}
.sf-user-panel .sf-panel-label {
    font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
    color: var(--sf-text-2);
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: .25rem;
}
.sf-user-panel .progress { height: 4px; background: var(--sf-hairline); }

/* ── 4. Chrome: Main + Topbar ──────────────────────────────────────────── */
#main-content {
    margin-left: var(--sidebar-width);
    transition: margin-left .25s ease;
    min-height: 100vh;
}
#topbar {
    background: var(--sf-topbar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);   /* der EINZIGE Blur der App */
    border-bottom: 1px solid var(--sf-hairline);
    padding: .65rem 1.5rem;
    position: sticky; top: 0; z-index: 500;
}
#topbar h5 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.page-content { padding: 24px 32px; }
footer { border-top: 1px solid var(--sf-hairline); color: var(--sf-text-3); }

/* Topbar-Suche als sichtbares Feld */
.sf-search-field {
    display: flex; align-items: center; gap: .5rem;
    background: var(--sf-surface-2);
    border: 1px solid var(--sf-hairline);
    border-radius: var(--sf-r-ctl);
    padding: .3rem .7rem;
    color: var(--sf-text-2);
    font-size: 13px;
    text-decoration: none;
    min-width: 180px;
    transition: var(--sf-trans);
}
.sf-search-field:hover { border-color: var(--sf-hairline-strong); color: var(--sf-text); }
.sf-search-field kbd {
    background: var(--sf-surface);
    border: 1px solid var(--sf-hairline);
    border-radius: 4px;
    color: var(--sf-text-3);
    font-size: .65rem;
    padding: .05rem .3rem;
}

/* Topbar-Buttons ruhig (Quiet statt btn-light-Grau) */
#topbar .btn-light {
    background: transparent;
    border: none;
    color: var(--sf-text-2);
    transition: var(--sf-trans);
}
#topbar .btn-light:hover { background: var(--sf-accent-tint); color: var(--sf-accent-text); }

/* ── 5. Karten ─────────────────────────────────────────────────────────── */
.card {
    background: var(--sf-surface);
    border: 1px solid var(--sf-hairline);
    border-radius: var(--sf-r-card);
    box-shadow: var(--sf-shadow);
    color: var(--sf-text);
}
.card-header {
    background: var(--sf-surface);
    border-bottom: 1px solid var(--sf-hairline);
    font-weight: 600;
    color: var(--sf-text);
    border-radius: var(--sf-r-card) var(--sf-r-card) 0 0 !important; /* Bootstrap setzt eigenen Radius mit höherer Spezifität */
}
.card-footer { background: var(--sf-surface); border-top: 1px solid var(--sf-hairline); }

/* Neuer einheitlicher Karten-Kopf (Partial _card_header) */
.sf-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid transparent; /* Hairline erst, wenn Body eine Tabelle ist (.sf-card-header--divided) */
}
.sf-card-header--divided { border-bottom-color: var(--sf-hairline); }
.sf-card-title { font-size: 17px; font-weight: 600; color: var(--sf-text); }
.sf-collapse-toggle { border: none; background: none; color: var(--sf-text-3); padding: .2rem .4rem; }
.sf-collapse-toggle i { transition: transform .2s ease; display: inline-block; }
.sf-collapse-toggle.collapsed i { transform: rotate(-90deg); }

/* Hub-Kacheln (/verwaltung, settings-Katalog) */
.sf-hub-card { transition: var(--sf-trans); }
.sf-hub-card:hover { border-color: var(--sf-hairline-strong); transform: translateY(-1px); box-shadow: var(--sf-shadow-pop); }
.sf-hub-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 10px;
    background: var(--sf-accent-tint);
    color: var(--sf-accent-text);
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
}

/* ── 6. Tabellen ───────────────────────────────────────────────────────── */
.table { color: var(--sf-text); font-size: 13.5px; --bs-table-bg: transparent; }
.table > :not(caption) > * > * { border-bottom-color: var(--sf-hairline); box-shadow: none; }
.table thead th {
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .02em;
    color: var(--sf-text-2);
    background: var(--sf-surface-2);
    border-bottom: 1px solid var(--sf-hairline);
    position: sticky; top: 0; z-index: 1;
}
.table tbody tr { transition: background .1s ease; }
.table tbody tr:hover { background: var(--sf-surface-2); }
.table td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
/* Zahlenspalten: im Redesign-Markup .sf-num setzen (tabular-nums, rechtsbündig) */

/* Zeilen-Kebab: abdimmen ok, verstecken nie */
.sf-kebab-btn { opacity: .45; transition: opacity .15s ease; }
tr:hover .sf-kebab-btn,
.card:hover > .sf-card-header .sf-kebab-btn,
.sf-kebab-btn:hover,
.sf-kebab-btn:focus-visible,
.sf-kebab .show .sf-kebab-btn,
.sf-kebab-btn[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .sf-kebab-btn { opacity: 1; } } /* Touch: immer voll deckend */

/* ── 7. Buttons — exakt 3 Ebenen ───────────────────────────────────────── */
.sf-btn-primary {
    background: var(--sf-accent);
    color: #fff;
    border: none;
    border-radius: var(--sf-r-ctl);
    padding: .42rem .9rem;
    font-size: 14px; font-weight: 600;
    transition: var(--sf-trans);
    display: inline-flex; align-items: center; gap: .4rem;
}
.sf-btn-primary:hover { background: var(--sf-accent-hover); color: #fff; }
.sf-btn-quiet {
    background: var(--sf-accent-tint);
    color: var(--sf-accent-text);
    border: none;
    border-radius: var(--sf-r-ctl);
    padding: .42rem .9rem;
    font-size: 14px; font-weight: 500;
    transition: var(--sf-trans);
    display: inline-flex; align-items: center; gap: .4rem;
}
.sf-btn-quiet:hover { background: rgba(232, 115, 10, .18); color: var(--sf-accent-text); }
.sf-btn-quiet--neutral { background: var(--sf-surface-2); color: var(--sf-text); border: 1px solid var(--sf-hairline); }
.sf-btn-quiet--neutral:hover { background: var(--sf-hairline); color: var(--sf-text); }
.sf-btn-ghost {
    background: transparent;
    color: var(--sf-text-2);
    border: none;
    border-radius: var(--sf-r-ctl);
    padding: .3rem .6rem;
    font-size: 14px;
    transition: var(--sf-trans);
    display: inline-flex; align-items: center; gap: .35rem;
}
.sf-btn-ghost:hover { background: var(--sf-accent-tint); color: var(--sf-accent-text); }

/* Bootstrap-Bridge: Alt-Screens mit .btn-primary werden orange (Fremdfarben-Eliminierung).
   CDN-Bootstrap hat #0d6efd hart einkompiliert → Override über --bs-btn-Variablen. */
.btn-primary {
    --bs-btn-bg: var(--sf-accent);
    --bs-btn-border-color: var(--sf-accent);
    --bs-btn-hover-bg: var(--sf-accent-hover);
    --bs-btn-hover-border-color: var(--sf-accent-hover);
    --bs-btn-active-bg: var(--sf-accent-hover);
    --bs-btn-active-border-color: var(--sf-accent-hover);
    --bs-btn-disabled-bg: var(--sf-accent);
    --bs-btn-disabled-border-color: var(--sf-accent);
}
.btn-outline-primary {
    --bs-btn-color: var(--sf-accent-text);
    --bs-btn-border-color: var(--sf-accent);
    --bs-btn-hover-bg: var(--sf-accent);
    --bs-btn-hover-border-color: var(--sf-accent);
    --bs-btn-active-bg: var(--sf-accent);
    --bs-btn-active-border-color: var(--sf-accent);
}
.btn { border-radius: var(--sf-r-ctl); }
.btn:focus-visible { box-shadow: 0 0 0 4px var(--sf-accent-tint); }

/* ── 8. Badges: nur Tint ───────────────────────────────────────────────── */
.sf-badge {
    display: inline-flex; align-items: center;
    padding: .25em .6em;
    border-radius: var(--sf-r-badge);
    font-size: 12px; font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.sf-badge-ok     { background: var(--sf-ok-bg);     color: var(--sf-ok); }
.sf-badge-warn   { background: var(--sf-warn-bg);   color: var(--sf-warn); }
.sf-badge-danger { background: var(--sf-danger-bg); color: var(--sf-danger); }
.sf-badge-info   { background: var(--sf-info-bg);   color: var(--sf-info); }
.sf-badge-muted  { background: var(--sf-hairline);  color: var(--sf-text-2); }
.sf-badge-accent { background: var(--sf-accent-tint); color: var(--sf-accent-text); }

/* ── 9. Segmented Control — die EINZIGE Tab-Mechanik ───────────────────── */
.sf-seg {
    display: inline-flex;
    background: #e9e9eb;
    border-radius: var(--sf-r-ctl);
    padding: 2px;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;   /* Mobile: scrollt horizontal statt umzubrechen */
}
[data-theme="dark"] .sf-seg { background: var(--sf-surface-2); }
.sf-seg-item {
    padding: .35rem .9rem;
    border-radius: calc(var(--sf-r-ctl) - 2px);
    font-size: 13.5px; font-weight: 500;
    color: var(--sf-text-2);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--sf-trans);
    display: inline-flex; align-items: center;
    margin: 0;
}
.sf-seg-item:hover { color: var(--sf-text); }
.sf-seg-item.active,
.btn-check:checked + .sf-seg-item {
    background: var(--sf-surface);
    color: var(--sf-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.sf-seg-badge {
    background: var(--sf-warn-bg); color: var(--sf-warn);
    border-radius: var(--sf-r-pill);
    font-size: 10.5px; font-weight: 600;
    padding: .1em .5em;
    margin-left: .4rem;
}

/* ── 10. Filterzeile + Chips ───────────────────────────────────────────── */
.sf-filter-search {
    display: flex; align-items: center; gap: .45rem;
    background: var(--sf-surface);
    border: 1px solid var(--sf-hairline);
    border-radius: var(--sf-r-ctl);
    padding: .3rem .7rem;
    min-width: 220px;
}
.sf-filter-search i { color: var(--sf-text-3); font-size: .85rem; }
.sf-filter-search input {
    border: none; outline: none; background: transparent;
    color: var(--sf-text); font-size: 14px; width: 100%;
}
.sf-filter-search input::placeholder { color: var(--sf-text-3); }
.sf-filter-search:focus-within { border-color: var(--sf-accent); box-shadow: 0 0 0 4px var(--sf-accent-tint); }
.sf-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--sf-accent-tint);
    color: var(--sf-accent-text);
    border-radius: var(--sf-r-pill);
    padding: .25rem .7rem;
    font-size: 12.5px; font-weight: 500;
    text-decoration: none;
    transition: var(--sf-trans);
}
.sf-chip:hover { background: rgba(232, 115, 10, .18); color: var(--sf-accent-text); }
.sf-filter-popover { min-width: 300px; }

/* ── 11. Dropdowns & Modals (= Sheets) ─────────────────────────────────── */
.sf-dropdown,
.dropdown-menu {
    border: 1px solid var(--sf-hairline);
    border-radius: var(--sf-r-card);
    box-shadow: var(--sf-shadow-pop);
    background: var(--sf-surface);
    color: var(--sf-text);
    font-size: 14px;
}
.dropdown-item { color: var(--sf-text); border-radius: var(--sf-r-ctl); }
.dropdown-item:hover { background: var(--sf-surface-2); color: var(--sf-text); }
.dropdown-menu { padding: .35rem; }
.dropdown-divider { border-color: var(--sf-hairline); }
.dropdown-header { color: var(--sf-text-2); }

.modal-content {
    background: var(--sf-surface);
    color: var(--sf-text);
    border: 1px solid var(--sf-hairline);
    border-radius: var(--sf-r-modal);
    box-shadow: var(--sf-shadow-pop);
}
.modal-header { border-bottom: none; padding-bottom: .25rem; }
.modal-footer { border-top: none; }
.modal-backdrop { --bs-backdrop-opacity: .4; }

/* ── 12. Formulare ─────────────────────────────────────────────────────── */
.form-control, .form-select, textarea.form-control {
    background: var(--sf-surface);
    color: var(--sf-text);
    border: 1px solid var(--sf-hairline-strong);
    border-radius: var(--sf-r-ctl);
}
.form-control:focus, .form-select:focus {
    background: var(--sf-surface);
    color: var(--sf-text);
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 4px var(--sf-accent-tint);
}
.form-control::placeholder { color: var(--sf-text-3); }
.form-label { color: var(--sf-text-2); font-size: 13px; font-weight: 500; }
.form-text { color: var(--sf-text-3); }
.input-group-text { background: var(--sf-surface-2); color: var(--sf-text-2); border-color: var(--sf-hairline-strong); border-radius: var(--sf-r-ctl); }
.form-check-input:checked { background-color: var(--sf-accent); border-color: var(--sf-accent); }
.form-check-input:focus { border-color: var(--sf-accent); box-shadow: 0 0 0 4px var(--sf-accent-tint); }

/* ── 12b. Stat-Zeile (Dashboards/Auswertungen: Kennzahlen ohne Boxen) ──── */
.sf-stat-row {
    display: flex;
    background: var(--sf-surface);
    border: 1px solid var(--sf-hairline);
    border-radius: var(--sf-r-card);
    box-shadow: var(--sf-shadow);
    overflow-x: auto;
}
.sf-stat-cell {
    flex: 1 1 0;
    min-width: 150px;
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    transition: var(--sf-trans);
}
.sf-stat-cell + .sf-stat-cell { border-left: 1px solid var(--sf-hairline); }
a.sf-stat-cell:hover { background: var(--sf-surface-2); color: inherit; }
.sf-stat-cell .sf-caption { margin-bottom: 2px; }
.sf-stat-cell .sf-stat-sub { font-size: 12.5px; color: var(--sf-text-2); margin-top: 2px; }

/* Posteingang (Dashboard: alles Handlungsbedürftige in EINER Karte) */
.sf-inbox-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .25rem;
    border-bottom: 1px solid var(--sf-hairline);
    font-size: 13.5px;
    position: relative;
}
.sf-inbox-row:last-child { border-bottom: none; }
.sf-inbox-icon {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
}
.sf-inbox-group {
    font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
    color: var(--sf-text-2);
    display: flex; justify-content: space-between; align-items: baseline;
    padding: .8rem .25rem .25rem;
}
.sf-inbox-group a { text-transform: none; letter-spacing: 0; }
.sf-approve-btn {
    border: none; border-radius: var(--sf-r-ctl);
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem;
    transition: var(--sf-trans);
}
.sf-approve-btn.ok { background: var(--sf-ok-bg); color: var(--sf-ok); }
.sf-approve-btn.ok:hover { background: var(--sf-ok); color: #fff; }
.sf-approve-btn.no { background: var(--sf-danger-bg); color: var(--sf-danger); }
.sf-approve-btn.no:hover { background: var(--sf-danger); color: #fff; }

/* Scroll-Bereiche in Karten */
.sf-scroll { max-height: 400px; overflow-y: auto; }

/* Live-Punkt (eingestempelt) */
.sf-live-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sf-live-dot.on { background: var(--sf-ok); animation: sfLivePulse 1.8s infinite; }
.sf-live-dot.off { background: var(--sf-text-3); }
@keyframes sfLivePulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .5); }
    70% { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

/* ── 13. Empty-State / Moved-Hint ──────────────────────────────────────── */
.sf-empty i { font-size: 32px; color: var(--sf-text-3); }
.sf-empty-text { color: var(--sf-text-2); font-size: 14px; margin-top: .4rem; }
.sf-moved-hint {
    background: var(--sf-info-bg);
    color: var(--sf-info);
    border-radius: var(--sf-r-ctl);
    padding: .5rem .9rem;
    font-size: 13.5px;
    margin-bottom: 1rem;
}
.sf-moved-hint .sf-btn-ghost { color: inherit; padding: .1rem .3rem; }

/* ── 14. Kompat: Alt-Screens im neuen Rahmen ───────────────────────────── */
/* Von Content-Views direkt benutzt (dashboard, projects/show, standzeiten,
   time-entries, clock) — Look bleibt bis zur Migration des jeweiligen Screens. */
.stat-card { border-left: 4px solid var(--sf-accent); }
.stat-card .stat-icon, .stat-icon { font-size: 2rem; opacity: .15; }
.badge-status { font-size: .75rem; padding: .35em .7em; }

/* Bug-Reporter-FAB: vom Orange-Kreis zum grauen Quiet-FAB (Orange = nur Aktion) */
#bug-btn {
    background: var(--sf-surface);
    color: var(--sf-text-2);
    border: 1px solid var(--sf-hairline-strong);
    box-shadow: var(--sf-shadow-pop);
}
#bug-btn:hover { color: var(--sf-accent-text); transform: scale(1.06); }

/* Alerts: Tint-Optik, tokenbasiert */
.alert { border-radius: var(--sf-r-ctl); }
.alert-warning { background: var(--sf-warn-bg); border-color: transparent; color: var(--sf-warn); }
.alert-success { background: var(--sf-ok-bg); border-color: transparent; color: var(--sf-ok); }
.alert-danger  { background: var(--sf-danger-bg); border-color: transparent; color: var(--sf-danger); }
.alert-info    { background: var(--sf-info-bg); border-color: transparent; color: var(--sf-info); }

/* Pagination */
.page-link { color: var(--sf-accent-text); background: var(--sf-surface); border-color: var(--sf-hairline); }
.page-item.active .page-link { background: var(--sf-accent); border-color: var(--sf-accent); color: #fff; }
.page-item.disabled .page-link { background: var(--sf-surface); border-color: var(--sf-hairline); color: var(--sf-text-3); }

/* Nav-Tabs/Pills der Alt-Screens: ruhig einfärben bis zur Segmented-Migration */
.nav-pills .nav-link { color: var(--sf-text-2); border-radius: var(--sf-r-ctl); }
.nav-pills .nav-link.active { background: var(--sf-accent); color: #fff; }
.nav-tabs { border-color: var(--sf-hairline); }
.nav-tabs .nav-link { color: var(--sf-text-2); }
.nav-tabs .nav-link.active { background: var(--sf-surface); border-color: var(--sf-hairline); color: var(--sf-text); }

/* List groups */
.list-group-item { background: var(--sf-surface); color: var(--sf-text); border-color: var(--sf-hairline); }
.list-group-item-action:hover { background: var(--sf-surface-2); color: var(--sf-text); }

/* ── 15. Flatpickr: EINE Primärfarbe statt Dunkelblau ──────────────────── */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--sf-accent) !important;   /* Bestands-Overrides waren !important — gleiche Waffe nötig */
    border-color: var(--sf-accent) !important;
    color: #fff !important;
}
.flatpickr-day.inRange {
    background: var(--sf-accent-tint) !important;
    border-color: transparent !important;
    box-shadow: -5px 0 0 var(--sf-accent-tint), 5px 0 0 var(--sf-accent-tint) !important;
}
.flatpickr-day.today:not(.selected) { border-color: var(--sf-accent); }
.flatpickr-day:hover:not(.selected):not(.inRange):not(.startRange):not(.endRange) { background: var(--sf-accent-tint); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--sf-accent); }
.fp-range-input { cursor: pointer; background: var(--sf-surface) !important; }
.fp-range-input:focus { border-color: var(--sf-accent); box-shadow: 0 0 0 4px var(--sf-accent-tint); }

/* ═══════════════════════════════════════════════════════════════════════
   16. DARK-KOMPAT (Bootstrap-Utilities + Alt-Screens im neuen Rahmen)
   Neue sf-Komponenten sind per Konstruktion variablenbasiert dark-fähig und
   brauchen diesen Block NICHT. Er hält nur Alt-Markup (Bootstrap-Utilities,
   FullCalendar) im Dark-Mode lesbar. !important nur, wo Bootstrap-Utilities
   selbst !important sind. Schrumpft mit jeder migrierten Welle.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] body { color: var(--sf-text); }
[data-theme="dark"] .text-dark { color: var(--sf-text) !important; }
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary { color: var(--sf-text-2) !important; }
[data-theme="dark"] .bg-white { background: var(--sf-surface) !important; }
[data-theme="dark"] .bg-light { background: var(--sf-surface-2) !important; }
[data-theme="dark"] .bg-body { background: var(--sf-bg) !important; }
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end { border-color: var(--sf-hairline) !important; }
[data-theme="dark"] .btn-light { background: var(--sf-surface-2); border-color: transparent; color: var(--sf-text); }
[data-theme="dark"] .btn-light:hover { background: var(--sf-hairline); color: var(--sf-text); }
[data-theme="dark"] .btn-outline-secondary { border-color: var(--sf-hairline-strong); color: var(--sf-text-2); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--sf-surface-2); color: var(--sf-text); }
[data-theme="dark"] .btn-outline-dark { border-color: var(--sf-hairline-strong); color: var(--sf-text); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
[data-theme="dark"] .badge.bg-light { background: var(--sf-surface-2) !important; color: var(--sf-text) !important; }
[data-theme="dark"] .badge.bg-secondary { background: var(--sf-hairline-strong) !important; }
[data-theme="dark"] .table-sm td,
[data-theme="dark"] .table-sm th { background: var(--sf-surface); color: var(--sf-text); }
/* FullCalendar (Plantafel/Kalender bleiben bis Welle 6 Alt-Markup) */
[data-theme="dark"] .fc-theme-standard td,
[data-theme="dark"] .fc-theme-standard th,
[data-theme="dark"] .fc-theme-standard .fc-scrollgrid { border-color: var(--sf-hairline); }
[data-theme="dark"] .fc-col-header-cell-cushion,
[data-theme="dark"] .fc-daygrid-day-number { color: var(--sf-text); }
[data-theme="dark"] .fc-daygrid-day { background: var(--sf-surface); }
[data-theme="dark"] .fc-day-other { background: rgba(0, 0, 0, .2); }
[data-theme="dark"] .fc-toolbar-title { color: var(--sf-text); }

/* ── 17. Responsive (Mechanik = Bestand: 768px-Breakpoint, .open/.show via JS) ── */
@media (max-width: 768px) {
    /* Sidebar immer als Off-Canvas – auch der eingeklappte Desktop-Zustand
       (html.sidebar-is-collapsed VOR dem JS, #sidebar.collapsed NACH dem JS)
       darf auf dem Handy NICHT durchschlagen. Höhere Spezifität + !important,
       damit die Mobile-Regel gewinnt. */
    #sidebar,
    html.sidebar-is-collapsed #sidebar,
    #sidebar.collapsed {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;   /* geöffnet = volle Breite, nicht 58px */
    }
    #sidebar.open { transform: translateX(0); }
    #main-content,
    html.sidebar-is-collapsed #main-content {
        margin-left: 0 !important;                /* schlägt Inline-Style main.style.marginLeft */
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* Off-Canvas-Menü lesbar: eingeklappte Icon-only-Regeln mobil zurücknehmen.
       .nav-submenu bleibt via max-height gesteuert (revert = block, zu bis .is-expanded). */
    #sidebar.collapsed .nav-link-text,
    #sidebar.collapsed .nav-section,
    #sidebar.collapsed .brand-text,
    #sidebar.collapsed .sidebar-bottom-text,
    #sidebar.collapsed .badge,
    #sidebar.collapsed .nav-submenu { display: revert !important; }
    #sidebar.collapsed .nav-submenu-toggle { display: flex !important; }
    #sidebar.collapsed .nav-link  { padding: .5rem .85rem; margin: 1px .5rem; justify-content: flex-start; }
    #sidebar.collapsed .brand     { justify-content: flex-start; padding: 1rem; }
    #sidebar.collapsed .nav-link::after { display: none; }   /* Desktop-Hover-Tooltip mobil aus */
    #sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .4); }
    #sidebar-overlay.show { display: block; }
    .page-content { padding: 16px; }
    .sf-search-field { min-width: 0; }
    .sf-search-field span, .sf-search-field kbd { display: none; }
}

/* ── App-Footer (identisch zum Branding-Footer der Mobile-App) ──────────────
   Reihenfolge und Maße 1:1 aus app/(tabs)/settings.tsx: Hairline oben,
   zentriert, Logo 90×60 (contain), Claim 15px/700, Version 12px. */
.sf-app-footer {
    text-align: center;
    padding: 24px 16px 28px;
    border-top: 1px solid var(--sf-hairline);
}
.sf-app-footer-logo { width: 90px; height: 60px; object-fit: contain; display: inline-block; }
.sf-app-footer-logo--dark { display: none; }
[data-theme="dark"] .sf-app-footer-logo--light { display: none; }
[data-theme="dark"] .sf-app-footer-logo--dark { display: inline-block; }
.sf-app-footer-claim {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--sf-text);
}
.sf-app-footer-version { margin-top: 2px; font-size: 12px; color: var(--sf-text-2); }