/* ============================================================================
   Auftragsmanager – Design System (clean SaaS, SevDesk-inspiriert)
   ========================================================================= */

:root {
    /* Flächen & Linien */
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #f4f5f7;
    --border: #e8e9ee;
    --border-strong: #dcdee5;

    /* Text */
    --ink: #14171c;
    --ink-2: #3b414c;
    --muted: #767c89;
    --faint: #a0a6b1;

    /* Akzent (Albrecht-Rot, von albrecht-elektro.info) */
    --accent: #d10006;
    --accent-strong: #a80005;
    --accent-soft: #fce7e7;
    --accent-rgb: 209, 0, 6;
    --brand-mark-bg: linear-gradient(140deg, #e8252b, #d10006);

    /* Funktionsfarben (soft) */
    --green: #15915f;  --green-soft: #e4f3ec;
    --amber: #b06f12;  --amber-soft: #fbf0dc;
    --red:   #d23f3f;  --red-soft:   #fbe8e8;
    --blue:  #2f6feb;  --blue-soft:  #e8f0fd;
    --slate: #5b6472;  --slate-soft: #eef0f3;

    --radius: 16px;
    --radius-sm: 11px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(20,23,28,.05);
    --shadow-sm: 0 1px 2px rgba(20,23,28,.04), 0 2px 6px -2px rgba(20,23,28,.06);
    --shadow-md: 0 1px 3px rgba(20,23,28,.05), 0 12px 28px -12px rgba(20,23,28,.14);

    --sidebar-w: 252px;
    --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: var(--font);

    /* Bootstrap-Variablen umbiegen, damit alle Komponenten mitziehen */
    --bs-body-font-family: var(--font);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink-2);
    --bs-body-font-size: .9rem;
    --bs-primary: #d10006;
    --bs-primary-rgb: 209, 0, 6;
    --bs-link-color: var(--accent-strong);
    --bs-link-color-rgb: 168, 0, 5;
    --bs-link-hover-color: var(--accent);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius-sm);
    --bs-secondary-color: var(--muted);
    --bs-emphasis-color: var(--ink);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0;
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: none; }

code {
    font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, monospace;
    font-size: .85em;
    color: var(--ink);
    background: var(--surface-2);
    padding: .12em .4em;
    border-radius: 6px;
}

::selection { background: var(--accent-soft); color: var(--accent-strong); }

/* ============================================================================
   App-Shell: Sidebar + Hauptbereich
   ========================================================================= */

.app-shell { display: flex; min-height: 100vh; }

/* Mobile Kopfzeile + Klickfänger des Drawers: nur unterhalb des Breakpoints sichtbar (s. u.). */
.app-topbar,
.sidebar-backdrop,
.sidebar-close { display: none; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
}

.app-main {
    flex: 1;
    min-width: 0;
    padding: 30px 36px 56px;
    max-width: 1380px;
}

/* Brand */
.nav-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 16px; color: inherit; text-decoration: none; }
.nav-brand:focus-visible, .topbar-brand:focus-visible { outline: none; border-radius: 10px; box-shadow: 0 0 0 3px var(--accent-soft); }
.brand-mark {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 10px;
    background: var(--brand-mark-bg);
    color: #fff; font-weight: 800; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px -3px rgba(var(--accent-rgb), .45);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; color: var(--ink); font-size: 15px; letter-spacing: -0.02em; }
.brand-sub { font-size: 11.5px; color: var(--faint); font-weight: 500; }
/* Kundenmarke: hochgeladenes Logo bzw. groß der Firmenname (Firmenprofil). */
.brand-logo { display: block; max-height: 40px; max-width: 190px; object-fit: contain; }
.brand-logo-sm { max-height: 28px; max-width: 150px; }
.brand-company {
    font-weight: 800; color: var(--ink); font-size: 19px; letter-spacing: -0.02em; line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* Suche */
.nav-search { position: relative; margin: 2px 4px 14px; }
.nav-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.nav-search input {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 10px;
    padding: 8px 12px 8px 34px;
    font-size: 13px;
    color: var(--ink-2);
    font-family: var(--font);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.nav-search input::placeholder { color: var(--faint); }
.nav-search input { padding-right: 52px; }
.nav-search-kbd {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none;
    font-family: var(--font); font-size: 10.5px; font-weight: 600; color: var(--faint);
    border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; background: var(--surface);
}
.nav-search:focus-within .nav-search-kbd { display: none; }
@media (hover: none) { .nav-search-kbd { display: none; } }
.nav-search input:focus {
    outline: none;
    background: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Globale Schnellsuche – Autocomplete-Dropdown */
.nav-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    max-height: 380px;
    overflow-y: auto;
    padding: 4px;
}
/* Suche + „Neu"-Button in einer Zeile (Hauptmenü-Neuordnung, Phase 3). */
.nav-tools { display: flex; align-items: flex-start; gap: 6px; margin: 2px 4px 14px; }
.nav-tools .nav-search { flex: 1 1 auto; min-width: 0; margin: 0; }
.nav-new { position: relative; flex: 0 0 auto; }
.nav-new-btn {
    width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
    border-radius: 10px; cursor: pointer; transition: color .14s, border-color .14s, background .14s;
}
.nav-new-btn:hover, .nav-new.is-open .nav-new-btn { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft); }
.nav-new-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.nav-new-backdrop { position: fixed; inset: 0; z-index: 40; }
.nav-new-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 41; width: 236px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px;
}
.nav-new-menu .nav-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 500; font-size: 13px; white-space: nowrap; text-decoration: none; }
.nav-new-menu .nav-link svg { width: 16px; height: 16px; color: var(--faint); flex: 0 0 auto; }
.nav-new-menu .nav-link:hover { background: var(--surface-2); color: var(--ink); }

.nsr-status { padding: 10px 12px; font-size: 12.5px; color: var(--faint); }
.nsr-group {
    font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--faint); padding: 9px 10px 4px;
}
.nsr-item {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 10px; border-radius: 7px;
    text-decoration: none; cursor: pointer;
}
.nsr-item:hover, .nsr-item.active { background: var(--accent-soft); }
.nsr-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.nsr-sub { font-size: 11.5px; color: var(--faint); }

/* Navigation */
.nav-list { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-section {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--faint); padding: 16px 12px 6px;
}
.nav-list .nav-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--ink-2);
    font-weight: 500; font-size: 13.5px;
    transition: background .14s, color .14s;
    white-space: nowrap;
}
.nav-list .nav-link svg { color: var(--faint); transition: color .14s; flex: 0 0 auto; }
.nav-list .nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-list .nav-link:hover svg { color: var(--muted); }
/* Zähler offener Aufgaben (NavCounters): grau = zu erledigen, gelb = Frist überschritten, bei 0 kein Zähler. */
.nav-item { position: relative; }
.nav-item .nav-link { padding-right: 44px; }
.nav-count, .nav-section-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px;
    border-radius: var(--radius-pill);
    font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    background: var(--surface-2); color: var(--muted); text-decoration: none;
}
.nav-count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.nav-count:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--border); }
.nav-count.is-overdue, .nav-section-count.is-overdue { background: var(--amber-soft); color: var(--amber); }
/* Favoriten: Stern am Eintrag (bei Hover/Fokus, angeheftet immer), Block ganz oben. */
.nav-star {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--faint); border-radius: 6px; cursor: pointer;
    opacity: 0; transition: opacity .12s, color .12s;
}
.nav-item.has-count .nav-star { right: 38px; }
.nav-item:hover .nav-star, .nav-star:focus-visible { opacity: 1; }
.nav-star:hover { color: var(--ink); background: var(--surface-2); }
.nav-star:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.nav-star.is-on { color: var(--amber); }
.nav-item:not(:hover) .nav-star.is-on { opacity: 0; }
.nav-favorites { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
@media (hover: none) { .nav-star { opacity: .55; } .nav-item:not(:hover) .nav-star.is-on { opacity: 1; } }
.nav-section-count { margin-left: auto; margin-right: 6px; height: 16px; min-width: 18px; font-size: 10.5px; }

.nav-list .nav-link.active {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
}
.nav-list .nav-link.active svg { color: var(--accent); }

/* Aufklappbare Ober-Gruppen (Abschnitte, Akkordeon) – Optik wie die statische .nav-section. Titel = Link zur
   Abschnitts-Übersicht (Kacheln), Chevron = nur auf-/zuklappen. */
.nav-supergroup { display: flex; flex-direction: column; }
.nav-section-toggle { display: flex; align-items: center; gap: 8px; padding-right: 6px; }
.nav-section-title { flex: 1; }
a.nav-section-link { color: inherit; text-decoration: none; border-radius: 6px; }
a.nav-section-link:hover { color: var(--ink-2); }
a.nav-section-link.active { color: var(--accent-strong); }
.nav-section-chevron-btn {
    width: 24px; height: 24px; margin: -6px 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--faint);
}
.nav-section-chevron-btn:hover { background: var(--surface-2); color: var(--muted); }
.nav-section-chevron-btn:focus-visible, a.nav-section-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.nav-section-chevron { transition: transform .16s ease; }
.nav-supergroup.open > .nav-section-toggle .nav-section-chevron { transform: rotate(90deg); }
.nav-supergroup-items {
    display: flex; flex-direction: column; gap: 2px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .22s ease, opacity .15s ease;
}
.nav-supergroup.open > .nav-supergroup-items {
    max-height: 1500px;
    opacity: 1;
}

/* User-Footer */
.nav-footer { position: relative; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; }
.nav-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.nav-user:hover { background: var(--surface-2); }
.avatar {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    background: var(--ink); color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.nav-user .user-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.nav-user .user-name { font-weight: 600; color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user .user-sub { font-size: 11px; color: var(--faint); }

/* App-Version (aus der Build-Pipeline, siehe AppVersion.cs) – klein, dezent, auf jeder Seite */
.app-version { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: .02em; user-select: all; }
.nav-version { display: block; padding: 6px 8px 0; }

/* Globale Timer-Anzeige (RunningTimerPill): Sidebar-Fuß auf dem Desktop, kompakt in der mobilen Kopfzeile. */
.run-timer { position: relative; margin-bottom: 8px; }
.run-timer-pill {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--accent-soft); border-radius: 10px; background: var(--accent-soft); color: var(--ink);
    font: inherit; cursor: pointer; text-align: left; transition: border-color .14s;
}
.run-timer-pill:hover, .run-timer.is-open .run-timer-pill { border-color: var(--accent); }
.run-timer-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.run-timer-dot { width: 8px; height: 8px; flex: 0 0 8px; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); animation: run-timer-pulse 1.6s ease-in-out infinite; }
.run-timer-clock { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; font-size: 14px; }
.run-timer-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-2); }
.run-timer-backdrop { position: fixed; inset: 0; z-index: 49; }
.run-timer-pop {
    position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 50; width: max(100%, 260px);
    padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}
.run-timer-pop-clock { font-size: 24px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-bottom: 4px; }
.run-timer-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.run-timer.is-compact { margin: 0 0 0 auto; }
.run-timer.is-compact .run-timer-pill { width: auto; padding: 6px 10px; border-radius: var(--radius-pill); }
.run-timer.is-compact .run-timer-pop { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); width: min(300px, calc(100vw - 32px)); }
/* „⏱ Timer starten“ auf Auftrag/Projekt/Kontingent (StartTimerButton). */
.start-timer { position: relative; display: inline-block; }
.start-timer-running {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--accent); background: var(--accent-soft); color: var(--ink);
}
.start-timer-running:hover { background: var(--accent-soft); border-color: var(--accent-strong); color: var(--ink); }
.start-timer-pop {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: min(320px, calc(100vw - 32px));
    padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14); text-align: left;
}
@keyframes run-timer-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .run-timer-dot { animation: none; } }
.terminal-version { display: block; text-align: center; padding: 0 0 12px; }

/* Aufklappbares Profilmenü im Footer */
.nav-user-trigger { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; }
.nav-user-trigger .user-text { flex: 1; text-align: left; }
.nav-user-trigger[aria-expanded="true"] { background: var(--surface-2); }
.nav-user-caret { color: var(--faint); flex: 0 0 auto; transition: transform .16s ease; }
.nav-footer.is-open .nav-user-caret { transform: rotate(180deg); }

.nav-user-menu {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 50;
    display: flex; flex-direction: column; gap: 2px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}
.nav-user-menu .nav-link {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px;
    color: var(--ink-2); font-weight: 500; font-size: 13.5px; white-space: nowrap;
    transition: background .14s, color .14s;
}
.nav-user-menu .nav-link svg { color: var(--faint); flex: 0 0 auto; transition: color .14s; }
.nav-user-menu .nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-user-menu .nav-link:hover svg { color: var(--muted); }

.nav-user-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }

/* Zahnrad „Einstellungen" im Fuß der Sidebar – Optik wie ein normaler Menüpunkt. */
.nav-footer .nav-settings {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin-bottom: 4px; border-radius: 10px;
    color: var(--ink-2); font-weight: 500; font-size: 13.5px; white-space: nowrap;
    transition: background .14s, color .14s;
}
.nav-footer .nav-settings svg { color: var(--faint); flex: 0 0 auto; transition: color .14s; }
.nav-footer .nav-settings:hover { background: var(--surface-2); color: var(--ink); }
.nav-footer .nav-settings:hover svg { color: var(--muted); }
.nav-footer .nav-settings.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav-footer .nav-settings.active svg { color: var(--accent); }

/* Einstellungen-Übersicht (/verwaltung): je Fachbereich eine Zeile – links der Bereich, rechts die Einträge
   in festen Spalten, damit alle Bereiche bündig untereinander stehen, egal wie viele Einträge sie haben. */
.settings-list { padding: 4px 20px; }
.settings-section { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
.settings-section + .settings-section { border-top: 1px solid var(--border); }
.settings-section-head { display: flex; align-items: center; gap: 10px; align-self: start; padding-top: 4px; }
.settings-section-head h2 { font-size: 15px; }
.settings-section-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 12px; }
@media (max-width: 900px) {
    .settings-list { padding: 4px 16px; }
    .settings-section { grid-template-columns: 1fr; gap: 8px; }
    .settings-section-links { grid-template-columns: 1fr; margin: 0 -8px; }
}
.settings-tile-icon {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
}
.settings-link { display: flex; flex-direction: column; padding: 7px 8px; border-radius: 8px; line-height: 1.3; }
.settings-link:hover { background: var(--surface-2); }
.settings-link-title { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.settings-link-hint { color: var(--muted); font-size: 12.5px; }

/* ============================================================================
   Seitenkopf
   ========================================================================= */

.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.page-title { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
.page-subtitle { color: var(--muted); font-size: 14px; margin-top: 3px; }

.section-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--ink); }

/* Wizard-Stepper */
.stepper { display: flex; gap: 8px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; }
.step .step-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.step.active { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.step.active .step-num { background: var(--accent); color: #fff; }
.step.done { color: var(--ink); }
.step.done .step-num { background: var(--green-soft); color: var(--green); }

/* ============================================================================
   Karten (Bootstrap .card überschrieben)
   ========================================================================= */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    font-weight: 700; color: var(--ink);
    padding: 16px 20px; font-size: 14.5px;
}
.card-body { padding: 20px; }
.card-footer { background: transparent; border-top: 1px solid var(--border); padding: 14px 20px; }

/* ============================================================================
   Tabs (Detailseiten) – siehe Components/Shared/TabView.razor
   ========================================================================= */

.app-tabs-nav {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.app-tab {
    position: relative;
    border: 0;
    background: transparent;
    padding: 11px 15px 13px;
    font-family: var(--font);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .14s, border-color .14s;
}
.app-tab:hover { color: var(--ink); }
.app-tab.active { color: var(--accent-strong); border-bottom-color: var(--accent); }
.app-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 8px; }

.app-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 6px;
    border-radius: var(--radius-pill);
    font-size: 11px; font-weight: 700; line-height: 1;
    background: var(--surface-2); color: var(--muted);
}
.app-tab.active .app-tab-badge { background: var(--accent-soft); color: var(--accent-strong); }
.app-tab-badge.badge-warn { background: var(--amber-soft); color: var(--amber); }

/* Abstände zwischen mehreren Karten innerhalb eines Tabs. */
.app-tab-panel > * + * { margin-top: 20px; }

/* ============================================================================
   KPI- & Aktions-Kacheln (Dashboard)
   ========================================================================= */

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-xs);
    display: flex; align-items: center; gap: 13px;
    color: var(--ink-2);
    transition: border-color .15s, box-shadow .15s, transform .15s;
    cursor: pointer;
}
.tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); color: var(--ink); }
.tile .tile-icon {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
}
.tile .tile-label { font-weight: 600; font-size: 14px; }

/* Abschnitts-Übersicht (/bereich/{slug}): je Menüeintrag eine Kachel, Bereiche mit ihren Tabs als Direktlinks. */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hub-tile {
    position: relative;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow-xs);
    display: flex; flex-direction: column; gap: 12px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hub-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.hub-tile-head { display: flex; align-items: flex-start; gap: 8px; }
.hub-tile-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 13px; color: var(--ink-2); text-decoration: none; }
/* Ganze Kachel klickbar; Tab-Links und Zähler liegen darüber. */
.hub-tile-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hub-tile-main:focus-visible { outline: none; }
.hub-tile:has(.hub-tile-main:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.hub-tile-icon {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
}
.hub-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hub-tile-title { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.hub-tile-hint { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.hub-tile .nav-count { position: relative; z-index: 1; right: auto; top: auto; transform: none; flex: 0 0 auto; }
.hub-tile-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 53px; }
.hub-tile-tab {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--radius-pill);
    background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 500; text-decoration: none;
}
.hub-tile-tab:hover { background: var(--accent-soft); color: var(--accent-strong); }
.hub-tile-tab .nav-count { height: 16px; min-width: 16px; font-size: 10.5px; padding: 0 5px; background: var(--surface); }
@media (max-width: 720px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-dashboard { margin-top: 28px; }

.kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 8px;
    min-height: 116px;
    justify-content: space-between;
}
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.kpi-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.kpi-value { font-size: 32px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.kpi-sub { font-size: 12.5px; color: var(--faint); }
.kpi-badge {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
    display: flex; align-items: center; justify-content: center;
}
.dot-accent { background: var(--accent); } .ic-accent { background: var(--accent-soft); color: var(--accent); }
.dot-amber  { background: var(--amber); }  .ic-amber  { background: var(--amber-soft); color: var(--amber); }
.dot-red    { background: var(--red); }    .ic-red    { background: var(--red-soft); color: var(--red); }
.dot-green  { background: var(--green); }  .ic-green  { background: var(--green-soft); color: var(--green); }
.dot-blue   { background: var(--blue); }   .ic-blue   { background: var(--blue-soft); color: var(--blue); }
.dot-slate  { background: var(--slate); }  .ic-slate  { background: var(--slate-soft); color: var(--slate); }

/* einfache Verteilungs-Bar */
.dist-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.dist-seg { height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.legend-item b { color: var(--ink); }

/* klickbare KPI-Karten (Link auf gefilterte Auftragsübersicht) */
.kpi-link { cursor: pointer; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s, transform .12s; }
.kpi-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); color: inherit; text-decoration: none; }

/* Filter-Chips (Status-Schnellfilter in Listen) */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-active:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.chip-count {
    display: inline-block; margin-left: 7px; padding: 0 7px;
    border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted);
    font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: middle;
}
.chip-active .chip-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* ============================================================================
   Tabellen (Bootstrap .table überschrieben)
   ========================================================================= */

.table { color: var(--ink-2); margin: 0; --bs-table-bg: transparent; border-color: var(--border); }
.table > thead th {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--border); padding: 10px 14px; background: transparent;
}
.table > tbody td { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table > tbody tr:last-child td { border-bottom: none; }
.table.table-bordered, .table.table-bordered th, .table.table-bordered td { border-left: none; border-right: none; }
.table-hover > tbody > tr { transition: background .12s; }
.table-hover > tbody > tr:hover > * { background: var(--surface-2); }
.table tfoot td { padding: 12px 14px; border-top: 1px solid var(--border); color: var(--ink); }

/* Sortierbare Spaltenköpfe */
.table > thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table > thead th.sortable:hover { color: var(--ink); }
.sort-caret { margin-left: 5px; font-size: .9em; opacity: .3; letter-spacing: 0; }
.table > thead th.sortable:hover .sort-caret { opacity: .55; }
.table > thead th.sortable.sorted { color: var(--ink); }
.table > thead th.sortable.sorted .sort-caret { opacity: 1; }

/* Karten-Tabelle ohne doppelten Innenabstand */
.card > .table:first-child > thead th { padding-left: 20px; }
.card .table > tbody td:first-child, .card .table > thead th:first-child { padding-left: 20px; }
.card .table > tbody td:last-child, .card .table > thead th:last-child { padding-right: 20px; }

/* ============================================================================
   Badges (soft pills)
   ========================================================================= */

.badge {
    font-weight: 600; font-size: 11.5px; letter-spacing: .01em;
    border-radius: var(--radius-pill); padding: .38em .7em; line-height: 1.3;
}
.badge.bg-primary   { background: var(--accent-soft) !important; color: var(--accent-strong) !important; }
.badge.bg-success   { background: var(--green-soft) !important;  color: var(--green) !important; }
.badge.bg-warning   { background: var(--amber-soft) !important;  color: var(--amber) !important; }
.badge.bg-danger    { background: var(--red-soft) !important;    color: var(--red) !important; }
.badge.bg-secondary { background: var(--surface-2) !important;   color: var(--muted) !important; }
.badge.bg-info      { background: var(--blue-soft) !important;   color: var(--blue) !important; }

/* ============================================================================
   Buttons
   ========================================================================= */

.btn { font-weight: 600; border-radius: 10px; padding: .5rem .9rem; font-size: .875rem; transition: all .14s; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; border-radius: 9px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 6px -2px rgba(var(--accent-rgb), .45); }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
/* Deaktiviert: Akzentfarbe gedimmt statt Bootstrap-Blau. */
.btn-primary:disabled, .btn-primary.disabled { background: var(--accent); border-color: var(--accent); color: #fff; opacity: .45; box-shadow: none; }
.btn-outline-primary { color: var(--accent-strong); border-color: var(--border-strong); background: var(--surface); }
.btn-outline-primary:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.btn-secondary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-secondary:hover { background: #000; border-color: #000; }
.btn-outline-secondary { color: var(--ink-2); border-color: var(--border-strong); background: var(--surface); }
.btn-outline-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); }
.btn:focus, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* ============================================================================
   Formulare
   ========================================================================= */

.form-label { font-weight: 600; font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; }
.form-control, .form-select {
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: .5rem .75rem;
    font-size: .9rem;
    color: var(--ink);
    background-color: var(--surface);
    transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--faint); }
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ============================================================================
   Beschreibungslisten (Detailseiten)
   ========================================================================= */

dl.row dt { color: var(--muted); font-weight: 500; font-size: 13px; padding-top: 5px; padding-bottom: 5px; }
dl.row dd { color: var(--ink); font-weight: 500; font-size: 13.5px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 0; }
address { font-style: normal; line-height: 1.6; color: var(--ink-2); }

/* Breadcrumb */
.breadcrumb { font-size: 13px; margin-bottom: 8px; }
.breadcrumb-item, .breadcrumb-item a { color: var(--muted); }
.breadcrumb-item.active { color: var(--ink); }

/* Links mit Pfeil */
.link-arrow { color: var(--accent-strong); font-weight: 600; font-size: 13px; }
.link-arrow:hover { color: var(--accent); }

.empty-hint { color: var(--muted); padding: 14px 0; }

/* Artikel-Autocomplete */
.ac-wrap { position: relative; }
.ac-list {
    position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 2px;
    min-width: 300px; max-height: 260px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 10px; box-shadow: var(--shadow-md);
}
.ac-item {
    display: block; width: 100%; text-align: left;
    padding: 8px 12px; border: 0; background: transparent;
    font-size: 13px; cursor: pointer; color: var(--ink);
}
.ac-item:hover, .ac-item-active { background: var(--accent-soft); }
.ac-item span { color: var(--muted); margin-left: 8px; }
/* Liste nur zeigen, solange das Feld (bzw. die Liste) den Fokus hat – sonst bliebe z. B. der
   „anlegen"-Eintrag bei Freitext stehen. Klicks in die Liste halten den Fokus (siehe App.razor). */
.ac-wrap:not(:focus-within) .ac-list { display: none; }
/* „+ … anlegen"-Eintrag am Listenende. Bewusst KEIN .ac-item, damit Enter (App.razor) weiterhin
   nur echte Treffer übernimmt und nie ungewollt eine Neuanlage startet. */
.ac-create {
    display: block; width: 100%; text-align: left;
    padding: 8px 12px; border: 0; background: transparent;
    font-size: 13px; cursor: pointer; color: var(--accent, var(--ink));
}
.ac-list .ac-item ~ .ac-create { border-top: 1px solid var(--border); }
.ac-create:hover { background: var(--accent-soft); }
.ac-create .ac-create-plus { font-weight: 700; margin-right: 6px; }
.ac-empty { padding: 8px 12px; font-size: 13px; color: var(--muted); }

/* Zahlenfelder in den Auftragspositionen: Number-Spinner ausblenden, damit der (rechtsbündige)
   Wert nicht hinter den Pfeilen abgeschnitten wird. */
.num-input::-webkit-outer-spin-button,
.num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-input { -moz-appearance: textfield; appearance: textfield; }

/* WYSIWYG-Editorfläche (contenteditable) für Textpositionen */
.rte-surface {
    min-height: 220px; max-height: 50vh; overflow-y: auto;
    height: auto; white-space: normal;
}
.rte-surface:focus { outline: none; box-shadow: none; }
.rte-surface ul, .rte-surface ol { padding-left: 1.4rem; margin-bottom: .4rem; }
.rte-surface h3, .rte-surface h4 { margin: .3rem 0; }

/* Gerenderter Rich-Text einer Textposition (Auftragsdetail/Positionsliste) */
.rte-content > :last-child { margin-bottom: 0; }
.rte-content ul, .rte-content ol { padding-left: 1.4rem; margin-bottom: .3rem; }
.rte-content h3, .rte-content h4 { margin: .2rem 0; font-size: 1rem; }
.rte-content p { margin-bottom: .3rem; }

/* ============================================================================
   Validierung & Fehler-UI
   ========================================================================= */

h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--green); }
.invalid { outline: 1px solid var(--red); }
.validation-message { color: var(--red); font-size: 12.5px; }

#blazor-error-ui {
    background: var(--ink);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 20px rgba(0,0,0,.2);
    display: none;
    left: 0; right: 0;
    padding: 0.9rem 1.4rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 13.5px;
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; margin-left: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1.2rem; top: .8rem; }

.blazor-error-boundary {
    background: var(--red); padding: 1rem 1.4rem; color: white; border-radius: var(--radius-sm);
}
.blazor-error-boundary::after { content: "Ein Fehler ist aufgetreten."; }

/* Detail-Panel (Offcanvas), das von rechts einblendet – siehe Components/Shared/DetailOffcanvas.razor.
   Breiter als der Bootstrap-Standard (400px); auf Telefonen volle Bildschirmbreite. */
.app-detail-offcanvas { --bs-offcanvas-width: min(720px, 94vw); }
.app-detail-offcanvas.app-detail-offcanvas-wide { --bs-offcanvas-width: min(1040px, 96vw); }
@media (max-width: 575.98px) {
    .app-detail-offcanvas,
    .app-detail-offcanvas.app-detail-offcanvas-wide { --bs-offcanvas-width: 100vw; }
}

/* ============================================================================
   Kommissionier-Terminal (MDE / Handscanner, mobil-first)
   – Vollbild ohne Sidebar (TerminalLayout), große Touch-/Scan-Flächen und ein
     Schritt-für-Schritt-Ablauf: Lagerort → Menge → Seriennummern.
   ========================================================================= */
.terminal-shell { min-height: 100vh; background: var(--bg); }
.terminal-main { max-width: 720px; margin: 0 auto; padding: 16px 18px 108px; }

.terminal-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.terminal-topbar .tt-title { font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.terminal-topbar .tt-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
/* inline-flex + Zentrierung, damit auch als .btn gestylte <a> (z. B. „Beenden") ihren Text mittig
   in der min-height ausrichten – native <button> tun das ohnehin, inline-block-<a> sonst oben. */
.terminal-topbar .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Fortschritts-„Chips" (Positionen/Artikel) – groß genug für den Touch-Betrieb. */
.pick-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-jump .btn { min-height: 40px; }

/* Großes Scan-Eingabefeld. */
.scan-input {
    font-size: 20px !important;
    min-height: 60px;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}
.scan-input::placeholder { font-size: 15px; letter-spacing: 0; }

/* Mengen-Stepper: große − / + Tasten links/rechts, Zahl mittig. */
.qty-row { display: flex; align-items: stretch; gap: 10px; }
.qty-btn {
    flex: 0 0 auto; width: 64px; min-height: 64px; font-size: 30px; line-height: 1;
    border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink); font-weight: 700;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.qty-btn:active { background: var(--surface-2); }
.qty-btn:disabled { opacity: .4; cursor: default; }
.qty-input {
    flex: 1 1 auto; text-align: center; font-size: 30px !important; min-height: 64px;
    font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Tapbare Lagerort-/Bestands-Chips. */
.loc-chip {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 10px 14px; font-size: 15px; font-weight: 600; min-height: 44px;
    border-radius: var(--radius-sm);
}

/* Zusammenfassung bereits erledigter Schritte. */
.pick-recap { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; }
.pick-recap .recap-k { color: var(--muted); }
.pick-recap .recap-v { font-weight: 700; color: var(--ink); }

/* Aktionsleiste unten. */
.pick-actions { display: flex; gap: 10px; margin-top: 18px; }
.pick-actions .btn { min-height: 54px; font-size: 16px; font-weight: 600; }
.btn-scan-confirm { flex: 1 1 auto; }

@media (max-width: 575.98px) {
    .terminal-main { padding: 12px 12px 92px; }
    .step { padding: 6px 10px; font-size: 12px; }
    /* Aktionsleiste am unteren Bildschirmrand „kleben", damit „Weiter/Bestätigen"
       ohne Scrollen mit dem Daumen erreichbar ist. */
    .pick-actions {
        position: sticky; bottom: 0; z-index: 20;
        margin: 18px -12px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(to top, var(--bg) 72%, rgba(245,246,248,0));
    }
}

/* ============================================================================
   Service-Arbeitsplatz (Werkstatt-Vorgang am Terminal)
   – Nutzt dasselbe Vollbild-Terminal wie der Handscanner, ist aber ein
     Desktop-Arbeitsplatz mit viel Vorgangsinhalt: mehr Breite + ein kompakter,
     EINHEITLICH gruppierter Vorgangs-Kopf, damit der Erfassungsbereich oben
     bleibt statt nach unten zu rutschen.
   ========================================================================= */

/* Nur der Arbeitsplatz (Marker .svc-workstation) bekommt Desktop-Breite –
   der Handscanner (Kommissionierung) bleibt schmal bei 720px. */
.terminal-shell:has(.svc-workstation) .terminal-main { max-width: 1200px; }

/* Vorgangs-Kopf: EIN Kontextblock. Linker Statusstreifen = physischer Zustand:
   grün „liegt auf meinem Arbeitsplatz" / schiefer „nur Ansicht". */
.ws-head { overflow: hidden; }
.ws-head.is-work { border-left: 3px solid var(--green); }
.ws-head.is-view { border-left: 3px solid var(--slate); }

.ws-head-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px 14px; flex-wrap: wrap;
    padding: 13px 20px; border-bottom: 1px solid var(--border);
}
.ws-head-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ws-serial {
    font-size: 21px; font-weight: 800; color: var(--ink);
    letter-spacing: -0.01em; line-height: 1;
}
.ws-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Kontext-Kacheln – Gerät / Vorgang / Endkunde / Fachhändler in EINER Grammatik.
   Hairline-Raster: gap zeigt die Rahmenfarbe zwischen weißen Kacheln. */
.ws-context {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px; background: var(--border);
}
.ws-tile { background: var(--surface); padding: 14px 20px; min-width: 0; }
.ws-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 7px;
}
.ws-value { font-size: 14.5px; color: var(--ink); line-height: 1.4; }
.ws-value .ws-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* Abschnittsüberschrift im Arbeitsplatz (Bereichs-Notizen etc.) – lesbar, nicht winzig. */
.ws-section-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }

@media (max-width: 900px) { .ws-context { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ws-context { grid-template-columns: 1fr; } }

/* Vorgangsdetails am Arbeitsplatz (Reparatur · Abrechnung · SDB-Auftrag) als EIN gedämpfter Streifen –
   bewusst zweitrangig, damit Gerät/Kunde oben die primäre Information bleiben (CompactMeta).
   Gruppen als Spalten nebeneinander, die einzelnen Punkte je Gruppe untereinander (leichte dl-Optik). */
.svc-meta {
    display: flex; flex-wrap: wrap; gap: 14px 32px;
    padding: 12px 16px; margin-bottom: 12px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}
.svc-meta-group { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.svc-meta-group + .svc-meta-group { border-left: 1px solid var(--border-strong); padding-left: 32px; }
.svc-meta-h {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 4px;
}
.svc-meta-kv { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.svc-meta-kv i {
    font-style: normal; color: var(--muted); margin-right: 6px;
    display: inline-block; min-width: 74px;
}

/* Fehler / Bemerkung – bewusst prominenter als der Streifen: Amber-Callout mit Akzentkante. */
.svc-meta-note {
    display: flex; align-items: baseline; gap: 10px;
    padding: 10px 14px; margin-bottom: 14px;
    background: var(--amber-soft); border: 1px solid var(--amber);
    border-left-width: 4px; border-radius: 8px;
    font-size: 14.5px; font-weight: 500; color: var(--ink);
}
.svc-meta-note i {
    font-style: normal; font-weight: 700; text-transform: uppercase;
    font-size: 10.5px; letter-spacing: .06em; color: var(--amber);
    white-space: nowrap; flex: none;
}
@media (max-width: 700px) {
    .svc-meta-group + .svc-meta-group { border-left: 0; padding-left: 0; }
}

/* Bereichs-Filter der Notizen: Badges als anklickbare Tabs (Alle · Elektrik · Mechanik …). */
.svc-notes-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.svc-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1;
    cursor: pointer; transition: background .14s, border-color .14s, color .14s;
}
.svc-tab:hover { background: var(--surface-2); color: var(--ink); }
.svc-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.svc-tab-n {
    font-size: 11px; font-weight: 700;
    background: var(--surface-2); color: var(--muted);
    padding: 1px 7px; border-radius: var(--radius-pill);
}
.svc-tab.is-active .svc-tab-n { background: rgba(255,255,255,.22); color: #fff; }

/* Bereichs-Notizen als saubere Karten-Liste statt winziger grauer Textzeilen – die Notiz ist das
   Arbeitsprotokoll und darf lesbar/prominent sein. */
.svc-notes { display: flex; flex-direction: column; gap: 10px; }
.svc-note-areachip { font-size: 10px; font-weight: 700; }
.svc-note-item {
    padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--accent); border-radius: 9px;
    box-shadow: var(--shadow-xs);
}
.svc-note-item.is-import { border-left-color: var(--slate); background: var(--surface-2); }
.svc-note-text { font-size: 14px; color: var(--ink); line-height: 1.5; }
.svc-note-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 6px; font-size: 11.5px; color: var(--muted);
}
.svc-note-who { font-weight: 600; color: var(--ink-2); }
.svc-note-sep { color: var(--faint); }
.svc-note-tag {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--slate); background: var(--slate-soft);
    padding: 1px 7px; border-radius: var(--radius-pill);
}

/* ============================================================================
   Mobil & Tablet (≤ 900px)
   – Die feste Sidebar wird zum Off-Canvas-Drawer über einer schlanken Kopfzeile.
   – Innenabstände, Schriftgrößen und Bedienflächen werden auf Touch angepasst.
   – Breite Tabellen scrollen in sich statt die ganze Seite zu sprengen.
   ========================================================================= */

@media (max-width: 900px) {

    /* ── Grundgerüst: Sidebar raus aus dem Fluss, Inhalt volle Breite ─────── */
    .app-shell { display: block; }

    .app-topbar {
        display: flex; align-items: center; gap: 10px;
        position: sticky; top: 0; z-index: 60;
        min-height: 56px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }
    .topbar-burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; flex: 0 0 40px;
        border: 1px solid var(--border-strong); border-radius: 10px;
        background: var(--surface); color: var(--ink-2);
        cursor: pointer; touch-action: manipulation;
    }
    .topbar-burger:active { background: var(--surface-2); }
    .topbar-burger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
    .topbar-brand { display: flex; align-items: center; gap: 9px; min-width: 0; color: inherit; text-decoration: none; }
    .topbar-brand .brand-mark { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; font-size: 14px; }
    .topbar-brand .brand-name {
        font-weight: 700; color: var(--ink); font-size: 15px; letter-spacing: -0.02em;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        height: 100dvh;
        width: min(300px, 86vw); flex: 0 0 auto;
        z-index: 80;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 44px rgba(20, 23, 28, .22);
        padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    }
    .app-shell.is-nav-open .sidebar { transform: none; }

    /* Schließen-Kreuz oben rechts im Drawer (die Kopfzeile liegt hinter dem Overlay). */
    .sidebar-close {
        display: inline-flex; align-items: center; justify-content: center;
        position: absolute; top: 14px; right: 12px;
        width: 34px; height: 34px;
        border: 1px solid var(--border); border-radius: 9px;
        background: var(--surface); color: var(--muted);
        cursor: pointer; touch-action: manipulation;
    }
    .sidebar-close:active { background: var(--surface-2); }
    .nav-brand { padding-right: 44px; }

    .app-shell.is-nav-open .sidebar-backdrop {
        display: block; position: fixed; inset: 0; z-index: 70;
        background: rgba(20, 23, 28, .42);
    }

    .app-main { padding: 18px 14px 44px; max-width: none; }

    /* ── Seitenkopf & Karten kompakter ───────────────────────────────────── */
    .page-header { gap: 12px; margin-bottom: 18px; }
    .page-title { font-size: 22px; }
    .page-subtitle { font-size: 13px; }
    .card { border-radius: 14px; }
    .card-header { padding: 14px 16px; }
    .card-body { padding: 16px; }
    .card-footer { padding: 12px 16px; }
    /* Schlankere Zellen – auf 390px zählt jeder Pixel Spaltenbreite. */
    .table > thead th { padding: 9px 8px; }
    .table > tbody td { padding: 11px 8px; }
    .table code { font-size: .78em; padding: .1em .3em; }
    .table .badge { font-size: 11px; padding: .32em .55em; }
    .card .table > tbody td:first-child, .card .table > thead th:first-child,
    .card > .table:first-child > thead th { padding-left: 14px; }
    .card .table > tbody td:last-child, .card .table > thead th:last-child { padding-right: 14px; }
    .grid { gap: 12px; }
    .kpi { padding: 16px; min-height: 0; }
    .kpi-value { font-size: 28px; }

    /* ── Touch-Bedienflächen ─────────────────────────────────────────────── */
    .nav-list .nav-link, .nav-user-menu .nav-link { padding: 11px 12px; font-size: 14px; }
    .btn { min-height: 40px; }
    .btn-sm { min-height: 34px; }
    .chip { padding: 8px 14px; }

    /* Schriftgröße ≥16px verhindert das automatische Hineinzoomen von iOS beim Fokussieren. */
    .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; }
    .input-group-sm > .form-control, .input-group-sm > .form-select { font-size: 16px; }

    /* ── Breite Tabellen: horizontal scrollen statt die Seite zu sprengen ──
       Der Tabellenkasten wird selbst zum Scroll-Container.
       Ausnahme .table-mobile-full: Tabellen mit aufklappenden Vorschlagslisten
       (Auftragspositionen) – ein Scroll-Container würde die Liste abschneiden. */
    .app-main .table:not(.table-mobile-full) {
        display: block;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Aktionsleisten (Detailseiten-Buttons, Kartenköpfe) umbrechen lassen, statt seitlich
       aus dem Bild zu laufen. Bewusst ausgenommen: alles, was explizit nowrap verlangt. */
    .app-main .d-flex:not([class*="nowrap"]) { flex-wrap: wrap; }

    /* Tabs dürfen am Rand „anschneiden", damit erkennbar bleibt: da geht noch was. */
    .app-tabs-nav { margin-bottom: 18px; }
    .app-tab { padding: 10px 12px 12px; }
}

/* ============================================================================
   Beleg-Positionstabellen (Angebot/Auftrag/Rechnung erfassen) auf Telefon & Tablet
   – Jede Zeile wird zur Positionskarte mit beschrifteten Feldern statt einer
     10-spaltigen Tabelle, die seitlich überläuft und Eingaben zusammenquetscht.
   – Markup: Tabelle .beleg-pos-table, Zellen .pos-* mit data-label (Feldname).
   – Kein Scroll-Container → die Artikel-Vorschlagsliste wird nicht abgeschnitten.
   ========================================================================= */
@media (max-width: 900px) {
    .app-main .table-scroll.pos-scroll { overflow: visible; }

    .app-main .beleg-pos-table,
    .beleg-pos-table > tbody { display: block; width: 100%; }
    .beleg-pos-table > thead { display: none; }

    .beleg-pos-table > tbody > tr {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            "type type type act  act  act"
            "art  art  art  art  art  art"
            "desc desc desc desc desc desc"
            "qty  qty  ep   ep   vat  vat"
            "disc disc disc disc av   av"
            "net  net  net  net  net  net";
        gap: 10px 10px;
        padding: 12px;
        margin-bottom: 10px;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: 10px;
    }
    .beleg-pos-table > tbody > tr.pos-row-text {
        grid-template-areas:
            "type type type act  act  act"
            "text text text text text text";
    }
    /* Leere Tippzeile: nur Suche nach Nummer/Bezeichnung; Menge/Preis kommen nach der Auswahl. */
    .beleg-pos-table > tbody > tr.pos-row-blank {
        border-style: dashed;
        background: var(--surface-2);
    }
    .beleg-pos-table > tbody > tr.pos-row-blank > .pos-qty,
    .beleg-pos-table > tbody > tr.pos-row-blank > .pos-ep,
    .beleg-pos-table > tbody > tr.pos-row-blank > .pos-vat,
    .beleg-pos-table > tbody > tr.pos-row-blank > .pos-disc,
    .beleg-pos-table > tbody > tr.pos-row-blank > .pos-av,
    .beleg-pos-table > tbody > tr.pos-row-blank > .pos-net,
    .beleg-pos-table > tbody > tr.pos-row-blank > .pos-act { display: none; }
    .beleg-pos-table > tbody > tr.pos-row-blank::before {
        content: "Neue Position";
        grid-area: act; align-self: center; justify-self: end;
        font-size: 12px; color: var(--muted);
    }

    .beleg-pos-table > tbody > tr > td {
        display: block; min-width: 0;
        padding: 0; border: 0; background: none; box-shadow: none;
        text-align: left;
    }
    .beleg-pos-table > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block; margin-bottom: 4px;
        font-size: 11px; font-weight: 600; color: var(--muted);
    }
    .beleg-pos-table > tbody > tr > td.pos-hide,
    .beleg-pos-table > tbody > tr > td.pos-av:empty { display: none; }

    .beleg-pos-table .pos-type { grid-area: type; }
    .beleg-pos-table .pos-act  { grid-area: act; justify-self: end; align-self: center; }
    .beleg-pos-table .pos-art  { grid-area: art; }
    .beleg-pos-table .pos-desc { grid-area: desc; }
    .beleg-pos-table .pos-text { grid-area: text; }
    .beleg-pos-table .pos-qty  { grid-area: qty; }
    .beleg-pos-table .pos-ep   { grid-area: ep; }
    .beleg-pos-table .pos-vat  { grid-area: vat; }
    .beleg-pos-table .pos-disc { grid-area: disc; }
    .beleg-pos-table .pos-av   { grid-area: av; }
    .beleg-pos-table .pos-av .small { font-size: 12px; }
    .beleg-pos-table .pos-type .form-select { max-width: 150px; }

    /* Zeilensumme als Fußzeile der Karte */
    .beleg-pos-table > tbody > tr > td.pos-net {
        grid-area: net;
        display: flex; justify-content: space-between; align-items: baseline;
        padding-top: 10px; border-top: 1px dashed var(--border-strong);
        font-size: 15px;
    }
    .beleg-pos-table > tbody > tr > td.pos-net::before { margin: 0; font-size: 12px; }

    /* Rabattstufen füllen die Zelle gleichmäßig */
    .app-main .beleg-pos-table .disc-group { justify-content: flex-start; }
    .app-main .beleg-pos-table .disc-group .form-control { width: auto; flex: 1 1 0; min-width: 0; }

    /* Zeilen-Aktionen als fingerfreundliche Schaltflächen */
    .beleg-pos-table .pos-act .btn { min-width: 40px; min-height: 36px; }

    /* Vorschlagsliste nie breiter als der Bildschirm */
    .beleg-pos-table .ac-list { min-width: 0; width: 100%; max-width: calc(100vw - 48px); }
}

/* Hintergrund nicht mitscrollen lassen, solange der Drawer offen ist. */
body:has(.app-shell.is-nav-open) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
}

/* Dashboard-Diagramme: Farbfelder, Legenden und horizontaler Anteilsbalken (StackedBarChart,
   Finance-/Rechnungs-Panels). Farben aus den Variablen oben → Light/Dark laufen mit. */
.sw-green  { background: var(--green); }
.sw-slate  { background: var(--slate); }
.sw-red    { background: var(--red); }
.sw-amber  { background: var(--amber); }
.sw-blue   { background: var(--blue); }
.sw-accent { background: var(--accent); }
.dash-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.dash-legend-item { display: inline-flex; align-items: center; }
.dash-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.dash-split { display: flex; height: 14px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.dash-split > div { height: 100%; }
.dash-split-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; margin-top: 12px; font-size: 13px; }

/* Kunden-Memos: gerendertes Markdown (SafeMarkdown) – Liste, Vorschau, Kurzansicht */
.memo-md p { margin: 0 0 .4em; }
.memo-md p:last-child { margin-bottom: 0; }
.memo-md ul, .memo-md ol { margin: 0 0 .4em; padding-left: 1.3em; }
.memo-md h4, .memo-md h5, .memo-md h6 { font-size: .95rem; font-weight: 700; margin: .4em 0 .2em; }
.memo-md code { font-size: 12px; background: var(--slate-soft); padding: 1px 4px; border-radius: 4px; color: inherit; }
.memo-md hr { margin: .5em 0; }
.memo-md .md-table { overflow-x: auto; margin: .3em 0 .5em; }
.memo-md table { border-collapse: collapse; font-size: 12.5px; }
.memo-md th, .memo-md td { padding: 3px 8px; border-bottom: 1px solid var(--border); }
.memo-md th { font-weight: 600; color: var(--muted); text-align: left; }
.memo-md mark { padding: 0 1px; background: #ffe58a; border-radius: 2px; }

/* ============================================================================
   Modul Werkstatt (WERKSTATT.md) – Board, Fortschrittsleiste, Vorgang
   ========================================================================= */
.wk-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.wk-col { background: #eceef2; border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 420px; }
.wk-col.is-wait { background: var(--amber-soft); }
.wk-col-h { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 6px 0; }
.wk-col-t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wk-col-m { font-size: 11.5px; color: var(--muted); padding: 0 6px 4px; }
.wk-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; box-shadow: var(--shadow-xs); color: var(--ink-2); }
.wk-card:hover { border-color: var(--border-strong); color: var(--ink-2); }
.wk-card.is-overdue { border-left: 3px solid var(--red); }
.wk-serial { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 14px 20px; border-bottom: 1px solid var(--border); list-style: none; margin: 0; }
.wk-rs { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink); min-width: 0; }
.wk-rs small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.wk-bar { height: 6px; border-radius: 999px; background: var(--border); }
.wk-rs.done .wk-bar { background: var(--green); }
.wk-rs.cur .wk-bar { background: var(--accent); }
.wk-rs.cur { color: var(--accent-strong); }
.wk-rs.todo { color: var(--muted); }
.wk-chk { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.wk-chk:last-child { border-bottom: 0; }
.wk-ev { display: grid; grid-template-columns: 130px 12px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.wk-ev:last-child { border-bottom: 0; }
.wk-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--slate); }
@media (max-width: 900px) { .wk-rail { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } .wk-ev { grid-template-columns: 1fr; } .wk-dot { display: none; } }
/* Authenticator-Einrichtung: QR-Code (SVG von QRCoder) füllt die Box. */
.qr-box svg { display: block; width: 100%; height: auto; }

/* Anmeldeseite: Trenner „oder" zwischen Passwort- und Passkey-Anmeldung. */
.or-divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ============================================================================
   Zeit & Leistung (ZEIT-UND-LEISTUNG.md) – Timer, Wochenzettel, mobile PWA
   ========================================================================= */
.time-timer.is-running { border-color: #f3c4c5; }
.time-timer-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.time-timer-what { flex: 1 1 220px; min-width: 0; }
.time-live { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex: 0 0 10px; }
.time-clock { font-size: 26px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.time-timer-start { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: start; }
.time-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.time-week th, .time-week td { white-space: nowrap; }
.time-week td:first-child { white-space: normal; min-width: 200px; }
.time-weekend { background: var(--surface-2); }
.time-today { color: var(--accent-strong) !important; }
.time-cell, .time-cell-ro { display: inline-block; width: 64px; text-align: right; border: 1px solid transparent; border-radius: 8px; padding: 5px 8px;
    font-family: var(--font); font-size: 14px; color: var(--ink); background: transparent; font-variant-numeric: tabular-nums; }
.time-cell:hover, .time-cell:focus { border-color: var(--border-strong); background: var(--surface); outline: none; }
.time-cell:focus { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.time-cell.is-submitted, .time-cell-ro.is-submitted { background: var(--blue-soft); }
.time-cell.is-approved, .time-cell-ro.is-approved { background: var(--green-soft); }
.time-cell-ro.is-billed { background: var(--surface-2); color: var(--muted); }
.time-cell-wrap { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.time-cell-more { width: 20px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted);
    font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.time-week tr:hover .time-cell-more, .time-cell-wrap:focus-within .time-cell-more, .time-cell-more.has-details { opacity: 1; }
.time-cell-more.has-details { color: var(--accent); }
.time-cell-more:hover, .time-cell-more:focus-visible { background: var(--surface-2); color: var(--ink); opacity: 1; outline: none; }
@media (hover: none) { .time-cell-more { opacity: 1; } }
.time-add td { background: var(--surface-2); }
.time-add-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.time-add-target { flex: 1 1 240px; min-width: 0; }
.time-add-row .form-select { flex: 0 1 180px; }
.time-entry-date { flex: 0 1 160px; }
.time-entry-clock { flex: 0 1 110px; }
.time-entry-duration { flex: 0 1 140px; }
.time-desc { white-space: pre-line; max-width: 380px; }
@media (max-width: 900px) {
    .time-timer-start { grid-template-columns: 1fr; }
    .time-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile PWA-Hülle (MobileLayout) */
.m-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); font-family: var(--font); }
.m-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: var(--surface); border-bottom: 1px solid var(--border); }
.m-mark { width: 30px; height: 30px; border-radius: 8px; }
.m-top-title { font-weight: 700; color: var(--ink); font-size: 16px; }
.m-body { flex: 1; padding: 16px 16px calc(88px + env(safe-area-inset-bottom)); max-width: 640px; width: 100%; margin: 0 auto; }
.m-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--surface); border-top: 1px solid var(--border); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
.m-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 12px;
    font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.m-tab.active { color: var(--accent-strong); background: var(--accent-soft); }
.m-day { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.m-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.m-name { font-weight: 700; color: var(--ink); font-size: 17px; }
.m-sum { font-size: 22px; font-weight: 800; color: var(--ink); }
.m-list { list-style: none; margin: 0; padding: 0; }
.m-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.m-list li:last-child { border-bottom: 0; }
.m-list-main { min-width: 0; }
.m-list-side { text-align: right; flex: 0 0 auto; }
.m-shell .btn, .m-shell .form-control, .m-shell .form-select { min-height: 48px; font-size: 16px; }
.m-shell .time-timer-start { grid-template-columns: 1fr; }
.m-shell .time-timer-row .btn { width: 100%; }

/* Einsatzplanung (EINSATZPLANUNG.md): Plantafel, Auslastungs-Heatmap */
.plan-board-card { overflow: hidden; }
.plan-board-scroll { overflow-x: auto; }
.plan-board { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.plan-board th, .plan-board td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: top; }
.plan-board thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 8px 6px; font-weight: 700; color: var(--ink);
    text-align: center; white-space: nowrap; min-width: 118px; }
.plan-board .plan-res { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 170px; max-width: 220px; padding: 8px 10px;
    text-align: left; font-weight: 600; }
.plan-board thead .plan-res { z-index: 3; }
.plan-res-name { display: block; color: var(--ink); font-weight: 700; }
.plan-res-sub { font-size: 11px; color: var(--muted); font-weight: 500; }
.plan-group th { background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: 6px 10px; position: sticky; left: 0; }
.plan-cell { padding: 4px; min-height: 64px; height: 64px; cursor: default; background: var(--surface); }
.plan-cell:hover { background: #fafbfc; }
.plan-board .is-off { background: var(--surface-2); }
.plan-board thead .is-today, .plan-board td.is-today { box-shadow: inset 0 3px 0 var(--accent); }
.plan-cell.has-conflict { box-shadow: inset 0 0 0 2px var(--red); }
.plan-cell.is-unavailable { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 6px, var(--surface) 6px, var(--surface) 12px); }
.plan-cell.is-drop { background: var(--blue-soft); }
.plan-row-open .plan-cell { background: #fffdf7; }
.plan-holiday { font-size: 10.5px; font-weight: 600; color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.plan-chip { border-radius: 8px; padding: 3px 7px; margin-bottom: 3px; cursor: pointer; border-left: 3px solid var(--blue); background: var(--blue-soft);
    color: var(--ink); line-height: 1.25; }
.plan-chip[draggable="true"] { cursor: grab; }
.plan-chip.is-confirmed { border-left-color: var(--green); background: var(--green-soft); }
.plan-chip.is-done { border-left-color: var(--slate); background: var(--slate-soft); color: var(--muted); }
.plan-chip.is-cancelled { text-decoration: line-through; opacity: .6; }
.plan-chip-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.plan-chip-sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.plan-alloc { font-size: 10.5px; color: var(--ink-2); background: repeating-linear-gradient(135deg, var(--slate-soft), var(--slate-soft) 4px, var(--surface) 4px, var(--surface) 8px);
    border-radius: 6px; padding: 1px 6px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.plan-absence { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 1px 6px; margin-bottom: 3px; }
.plan-absence.is-vacation { background: var(--amber-soft); color: var(--amber); }
.plan-absence.is-sick { background: var(--red-soft); color: var(--red); }
.plan-absence.is-maintenance { background: var(--slate-soft); color: var(--slate); }
.plan-absence.is-other { background: var(--slate-soft); color: var(--ink-2); }
.plan-load { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 2px; }
.plan-load span { display: block; height: 100%; background: var(--green); }
.plan-load.load-2 span { background: var(--blue); }
.plan-load.load-3 span { background: var(--amber); }
.plan-load.load-over span { background: var(--red); }
.plan-heat th, .plan-heat td { white-space: nowrap; }
.plan-heat .plan-heat-name { min-width: 190px; white-space: normal; }
.plan-heat-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-width: 74px;
    min-height: 46px; border: 0; border-radius: 8px; font-size: 12px; line-height: 1.2; color: var(--ink); background: var(--surface-2); }
.plan-heat-cell small { color: var(--muted); font-size: 10.5px; }
.plan-heat-cell.load-0, .plan-heat-cell.load-1 { background: #f1f8f4; }
.plan-heat-cell.load-2 { background: var(--green-soft); }
.plan-heat-cell.load-3 { background: var(--amber-soft); }
.plan-heat-cell.load-over { background: var(--red-soft); color: var(--red); }
.plan-heat-cell:hover { outline: 2px solid var(--border-strong); }
.plan-load-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; background: var(--surface-2); }
.plan-load-dot.load-1 { background: #f1f8f4; border: 1px solid var(--green-soft); }
.plan-load-dot.load-2 { background: var(--green-soft); }
.plan-load-dot.load-3 { background: var(--amber-soft); }
.plan-load-dot.load-over { background: var(--red-soft); }
.plan-conflict-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
@media (max-width: 900px) {
    .plan-board .plan-res { min-width: 120px; }
    .plan-board thead th { min-width: 104px; }
}

/* Externe Systeme › Funktionen (einzeln schaltbare Teile einer Anbindung) */
.ext-feature-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); padding: 12px 0 4px; }
.ext-feature { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; align-items: start; padding: 7px 6px; border-radius: 8px; }
.ext-feature:hover { background: var(--surface-2); }
.ext-feature .form-check-input { width: 2.2em; height: 1.15em; margin-top: 2px; cursor: pointer; }
.ext-feature-text { cursor: pointer; margin: 0; }
.ext-feature-name { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.ext-feature-hint { display: block; color: var(--muted); font-size: 12.5px; }
.ext-feature-options { margin: 2px 0 8px 50px; padding: 4px 0 6px 12px; border-left: 2px solid var(--border-strong); }
@media (max-width: 900px) { .ext-feature-options { margin-left: 12px; } }

/* Gerätedaten (INFACO-Auslesungen) – DeviceElectronicDataCard */
.elec-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 900px) { .elec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .elec-kpis .kpi-value { font-size: 20px; } }
.elec-kpis .kpi { padding: 14px 16px; min-height: 0; gap: 6px; }
.elec-kpis .kpi-value { font-size: 24px; font-variant-numeric: tabular-nums; }
.elec-kpis .kpi-sub code { font-size: 11px; background: transparent; padding: 0; color: var(--faint); }
.elec-kpi-date { font-size: 20px !important; }
.kpi-badge.elec-delta { background: var(--blue-soft); color: var(--blue); }
.elec-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.elec-readings { font-variant-numeric: tabular-nums; white-space: nowrap; }
.elec-readings > thead th, .elec-readings > tbody td { padding: 8px 10px; }
.elec-readings .elec-chk { width: 34px; }
.elec-readings tr.elec-row { cursor: pointer; }
.elec-readings tr.elec-row:hover > td { background: var(--surface-2); }
.elec-readings tr.elec-row.is-open > td { background: var(--accent-soft); }
.elec-readings tr.elec-detail > td { background: var(--surface-2); white-space: normal; padding: 14px 16px; }
.elec-obs { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.elec-caret { display: inline-block; width: 10px; color: var(--faint); transition: transform .15s; }
tr.is-open .elec-caret { transform: rotate(90deg); }
.elec-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.elec-group h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-bottom: 6px; }
.elec-reg { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dotted var(--border-strong); font-size: 13px; }
.elec-reg code { font-size: 11px; color: var(--muted); background: transparent; padding: 0; }
.elec-reg b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.elec-compare { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface); }
.elec-compare code { font-size: 11px; background: transparent; padding: 0; color: var(--muted); }
.elec-up { color: var(--blue); font-weight: 700; }
.elec-down { color: var(--amber); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .elec-caret { transition: none; } }

/* Gerätedaten als schmale Leiste (Vorgang, Arbeitsplatz) */
.elec-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding: 9px 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; }
.elec-strip-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.elec-strip-item { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.elec-strip-label { color: var(--muted); }
.elec-strip-item b { color: var(--ink); font-size: 14px; }
.elec-strip-delta { color: var(--blue); background: var(--blue-soft); border-radius: var(--radius-pill); padding: 0 7px; font-size: 12px; font-weight: 600; }
.elec-strip-note { color: var(--muted); }
.elec-strip-warn { color: var(--amber); font-size: 12px; cursor: help; }
.elec-strip-link { white-space: nowrap; font-weight: 600; }
@media (max-width: 900px) { .elec-strip-link.ms-auto { margin-left: 0 !important; } }

/* ============================================================================
   Tolven – Produktmarke im SaaS (App.razor setzt <html class="theme-tolven">).
   Werte 1:1 aus dem Tolven-Design-System (tokens.json, Theme „Hell"); On-Premise bleibt beim Schema oben.
   ========================================================================= */

html.theme-tolven {
    --bg: #f4f6f7;
    --surface: #ffffff;
    --surface-2: #eef1f3;
    --border: #e2e6ea;
    --border-strong: #d3d9df;

    --ink: #17212b;
    --ink-2: #36414d;
    --muted: #5f6a76;
    --faint: #9aa3ad;

    /* Bernstein: accent für Primär-Buttons (weiße Schrift 5:1), accent-strong für Links */
    --accent: #9a6416;
    --accent-strong: #7a4e0e;
    --accent-soft: #fbf3e4;
    --accent-rgb: 154, 100, 22;
    --brand-gold: #b7791f;
    --brand-mark-bg: #17212b;

    --green: #15915f;  --green-soft: #e4f3ec;
    --amber: #a34b08;  --amber-soft: #fcebdd;
    --red:   #c93636;  --red-soft:   #fbe8e8;
    --blue:  #2f6feb;  --blue-soft:  #e8f0fd;
    --slate: #5f6a76;  --slate-soft: #eef1f3;

    --radius: 12px;
    --radius-sm: 8px;

    --shadow-xs: 0 1px 2px rgba(23,33,43,.06);
    --shadow-sm: 0 1px 2px rgba(23,33,43,.05), 0 2px 6px -2px rgba(23,33,43,.08);
    --shadow-md: 0 1px 3px rgba(23,33,43,.06), 0 12px 28px -12px rgba(23,33,43,.18);

    --font-display: 'Sora', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --bs-primary: #9a6416;
    --bs-primary-rgb: 154, 100, 22;
    --bs-link-color: #7a4e0e;
    --bs-link-color-rgb: 122, 78, 14;
}

/* Tolven-Kopfmarke: Ring aus zwölf Steinen (TolvenMark) + Schriftzug „tolven" (Sora 600, klein) */
.tolven-mark { display: block; flex: 0 0 auto; color: var(--ink); }
.tolven-mark .tolven-mark-gold { fill: var(--brand-gold, #b7791f); }
.brand-tolven .tolven-mark { width: 34px; height: 34px; }
.topbar-brand .brand-tolven .tolven-mark, .topbar-brand > .tolven-mark { width: 28px; height: 28px; }
.brand-wordmark {
    font-family: 'Sora', 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 22px; line-height: 1;
    letter-spacing: -0.03em; text-transform: lowercase; color: var(--ink);
}
.brand-tolven { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-tolven .brand-text { gap: 3px; }

/* Produktzeile „tolven" im Sidebar- und Login-Fuß (nur SaaS), neben der App-Version */
.product-signature { display: flex; align-items: center; gap: 6px; padding: 10px 8px 0; color: var(--muted); font-size: 11.5px; }
.product-signature .tolven-mark { width: 14px; height: 14px; }
.product-signature-name { font-family: 'Sora', 'Hanken Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-2); }
.product-signature-slogan { color: var(--muted); }