/* ============================================================================
   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;

    /* 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;

    /* 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 {
    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; }
.brand-mark {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 10px;
    background: linear-gradient(140deg, #e8252b, #d10006);
    color: #fff; font-weight: 800; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px -3px rgba(209,0,6,.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: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;
}
.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); }
.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 Navigationsgruppen */
.nav-group { display: flex; flex-direction: column; }
.nav-group-toggle {
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    text-align: left;
}
.nav-group-toggle .nav-group-title { flex: 1; }
.nav-group-chevron { color: var(--faint); transition: transform .16s ease; flex: 0 0 auto; }
.nav-group.open > .nav-group-toggle .nav-group-chevron { transform: rotate(90deg); }
/* Auf-/Zuklappen per grid-template-rows 0fr → 1fr: animiert auf die echte Inhaltshöhe, ohne feste
   max-height (die schnitt wachsende Gruppen wie „Einstellungen" ab – Versand/Go-live waren unsichtbar). */
.nav-group-items {
    display: grid;
    grid-template-rows: 0fr;
    margin-left: 17px;
    padding-left: 11px;
    border-left: 1px solid var(--border);
    opacity: 0;
    transition: grid-template-rows .2s ease, opacity .15s ease, margin .2s ease;
}
.nav-group-items-inner {
    display: flex; flex-direction: column; gap: 2px;
    min-height: 0;
    overflow: hidden;
}
.nav-group.open > .nav-group-items {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 2px;
    margin-bottom: 2px;
}
.nav-group-items .nav-link { font-size: 13px; }

/* Aufklappbare Ober-Gruppen (Abschnitte) – Optik identisch zur statischen .nav-section, nur klickbar */
.nav-supergroup { display: flex; flex-direction: column; }
button.nav-section {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    text-align: left;
}
button.nav-section:hover { color: var(--muted); }
.nav-section-title { flex: 1; }
.nav-section-chevron { color: var(--faint); transition: transform .16s ease; flex: 0 0 auto; }
.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); }

/* 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; }

/* ============================================================================
   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; }

.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(209,0,6,.45); }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.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; }
    .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; }