/* =======================================================================
   LifeBoxx Theme — Override-Layer über Bootstrap 5
   Enthält: @font-face, CSS-Variablen, App-Shell, Login, Dashboard
   ======================================================================= */

/* --- @font-face: Work Sans ------------------------------------------- */

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/work-sans/work-sans-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/work-sans/work-sans-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/work-sans/work-sans-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/work-sans/work-sans-700.woff2') format('woff2');
}

/* --- @font-face: JetBrains Mono -------------------------------------- */

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono/jetbrains-mono-400.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono/jetbrains-mono-500.woff2') format('woff2');
}

/* --- CSS-Variablen --------------------------------------------------- */

:root {
    /* Bootstrap-Overrides — bewusst nur markenspezifische, themeunabhängige Werte (Akzentblau,
       Schrift). --bs-body-color war hier früher ebenfalls fest gesetzt und hat dadurch
       Bootstraps eigene [data-bs-theme=dark]-Neudefinition global überschrieben (gleiche
       Spezifität wie :root, aber lifeboxx-theme.css lädt nach bootstrap.min.css → gewinnt immer,
       unabhängig vom Theme) — das war die eigentliche Ursache des Dark-Mode-Bugs, siehe
       Abschlussbericht. Jetzt entfernt, Bootstraps eigener Light-/Dark-Default greift wieder.
       */
    --bs-primary:            #1f53c4;
    --bs-primary-rgb:        31, 83, 196;
    --bs-link-color:         #1f53c4;
    --bs-link-color-rgb:     31, 83, 196;
    --bs-body-font-family:   'Work Sans', system-ui, sans-serif;

    /* Text-/Rand-Farbe für Outline-Elemente auf --bs-body-bg (z.B. .lb-empty-state-cta).
       Im Light Mode identisch zu --bs-primary; im Dark Mode wird das per [data-bs-theme=dark]
       weiter unten aufgehellt, weil #1f53c4 auf dem dunklen --bs-body-bg (#212529) nur ~2,3:1
       Kontrast erreicht (WCAG AA verlangt 4,5:1 für Text). */
    --lb-primary-outline:    var(--bs-primary);

    /* LifeBoxx-eigene Tokens — Werte zeigen ausschließlich auf Bootstrap-5.3-CSS-Variablen
       (keine neuen eigenen Farbwerte), damit jede .lb-*-Regel, die var(--lb-*) nutzt, automatisch
       über Bootstraps [data-bs-theme=dark]-Kaskade themefähig wird, ohne pro Klasse eine eigene
       Dark-Regel schreiben zu müssen. --lb-success/--lb-warning bewusst NICHT auf Bootstraps
       Tokens umgestellt (Bootstraps success/warning-Töne weichen spürbar vom Marken-Ton ab) —
       eigene Dark-Variante stattdessen weiter unten in diesem :root-Block. */
    --lb-bg-app:         var(--bs-tertiary-bg);
    --lb-bg-sidebar:     var(--bs-body-bg);
    --lb-bg-accent:      var(--bs-primary-bg-subtle);
    --lb-border:         var(--bs-border-color);
    --lb-border-strong:  var(--bs-border-color);
    --lb-text-primary:   var(--bs-body-color);
    --lb-text-secondary: var(--bs-secondary-color);
    --lb-text-muted:     var(--bs-secondary-color);
    --lb-text-faint:     var(--bs-tertiary-color);
    --lb-text-faint-alt: var(--bs-tertiary-color);
    --lb-success:        #1f8a5b;
    --lb-warning:        #c2683a;

    /* Kategorie-Farben Verlauf-Timeline (Marker-Hintergrund, siehe .lb-timeline-marker--* weiter
       unten) — eigene Marken-Hex-Werte aus demselben Grund wie --lb-success/--lb-warning, plus
       bewusst KEINE Wiederverwendung von --bs-danger/--bs-info/--bs-primary, damit eine Kategorie
       (z.B. Schaden/Reparatur) nicht wie ein Systemzustand (Fehler/Hinweis) wirkt. */
    --lb-cat-tuv:         #6a4bb0;
    --lb-cat-inspektion:  #4a5d73;
    --lb-cat-oelwechsel:  #a1751a;
    --lb-cat-schaden:     #9c3d5e;
    --lb-cat-kilometerstand: #1f7a5f;

    /* Kategorie-Akzentfarben der Vertragsliste (Kategorie-Karten, siehe .contract-category-card
       in list.html.twig) — unabhängig von --lb-cat-* oben (das ist Vehicles-Timeline-spezifisch).
       Feste, aber auf den Kategorie-NAMEN (Stichwort-Zuordnung, siehe list.html.twig) gemappte
       Werte, da contract_categories frei vom Nutzer angelegt werden und keine eigene Icon-/
       Farbspalte haben. -rgb-Begleitwerte analog --bs-primary-rgb, für die halbtransparente
       Icon-Hintergrundfläche (rgba(), kein color-mix() — hier nicht verwendet). */
    --lb-ccat-versicherung:   #5b4b9e;
    --lb-ccat-versicherung-rgb: 91, 75, 158;
    --lb-ccat-fahrzeug:       #1f6fb0;
    --lb-ccat-fahrzeug-rgb:   31, 111, 176;
    --lb-ccat-energie:        #a1751a;
    --lb-ccat-energie-rgb:    161, 117, 26;
    --lb-ccat-wohnen:         #1f7a5f;
    --lb-ccat-wohnen-rgb:     31, 122, 95;
    --lb-ccat-kommunikation:  #3d6a9c;
    --lb-ccat-kommunikation-rgb: 61, 106, 156;
    --lb-ccat-finanzen:       #2d7d46;
    --lb-ccat-finanzen-rgb:   45, 125, 70;
    --lb-ccat-gesundheit:     #b03a3a;
    --lb-ccat-gesundheit-rgb: 176, 58, 58;

    --lb-radius-sm: 8px;
    --lb-radius-md: 11px;
    --lb-radius-lg: 14px;
    --lb-radius-xl: 16px;

    --lb-font-sans:  'Work Sans', system-ui, sans-serif;
    --lb-font-mono:  'JetBrains Mono', monospace;

    --lb-sidebar-width:  248px;
    --lb-topbar-height:  64px;
}

/* --lb-success/--lb-warning bleiben Marken-Hex-Werte (siehe Kommentar oben) und folgen
   deshalb NICHT automatisch der Bootstrap-Dark-Kaskade wie die --bs-*-basierten Tokens.
   Eigene Dark-Variante: gleicher Farbton/gleiche Sättigung wie im Light Mode, nur mehr
   Helligkeit für ausreichenden Kontrast auf dunklem --bs-body-bg/--bs-tertiary-bg
   (WCAG-Kontrastwerte siehe Abschlussbericht). Light-Mode-Werte oben bleiben unverändert. */
[data-bs-theme="dark"] {
    --lb-success: #28ac72;
    --lb-warning: #cf845d;

    /* #6ea8fe statt --bs-primary (#1f53c4): erreicht auf --bs-body-bg (#212529) ~6,4:1
       Kontrast statt ~2,3:1 und besteht damit WCAG AA (≥4,5:1) für Text/Icon von
       .lb-empty-state-cta. Gleicher Grundton, nur aufgehellt — analog zu --lb-cat-* unten. */
    --lb-primary-outline: #6ea8fe;

    /* Gleicher Ton/gleiche Sättigung wie Light-Werte oben, nur aufgehellt für Kontrast ≥4,5:1
       gegen --bs-body-bg im Dark Mode (rechnerisch geprüft, siehe Abschlussbericht). */
    --lb-cat-tuv:        #9b82d9;
    --lb-cat-inspektion: #7d93ab;
    --lb-cat-oelwechsel: #d9a53f;
    --lb-cat-schaden:    #cf7396;
    --lb-cat-kilometerstand: #4fc79a;

    /* Vertragsliste-Kategorie-Akzente: gleicher Ton wie Light-Werte oben, aufgehellt für
       Kontrast auf --bs-body-bg im Dark Mode (analog --lb-cat-* darüber). */
    --lb-ccat-versicherung:   #9c8bd9;
    --lb-ccat-versicherung-rgb: 156, 139, 217;
    --lb-ccat-fahrzeug:       #6fb3e0;
    --lb-ccat-fahrzeug-rgb:   111, 179, 224;
    --lb-ccat-energie:        #dba84a;
    --lb-ccat-energie-rgb:    219, 168, 74;
    --lb-ccat-wohnen:         #4fc79a;
    --lb-ccat-wohnen-rgb:     79, 199, 154;
    --lb-ccat-kommunikation:  #7d9fc9;
    --lb-ccat-kommunikation-rgb: 125, 159, 201;
    --lb-ccat-finanzen:       #5fbf80;
    --lb-ccat-finanzen-rgb:   95, 191, 128;
    --lb-ccat-gesundheit:     #d97a7a;
    --lb-ccat-gesundheit-rgb: 217, 122, 122;
}

/* --- Basis ----------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--lb-font-sans);
    color: var(--lb-text-primary);
    background: var(--bs-body-bg);
}

/* --- Bootstrap-Primärfarbe patchen ----------------------------------- */

.btn-primary {
    --bs-btn-bg:                 #1f53c4;
    --bs-btn-border-color:       #1f53c4;
    --bs-btn-hover-bg:           #1947ad;
    --bs-btn-hover-border-color: #1947ad;
    --bs-btn-active-bg:          #163d98;
    box-shadow: 0 8px 20px rgba(31, 83, 196, .26);
}

/* =======================================================================
   App-Shell
   ======================================================================= */

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

/* --- Sidebar --------------------------------------------------------- */

.lb-sidebar {
    /* Bootstrap-Offcanvas-Variablen: Breite, Hintergrund, Trennlinie */
    --bs-offcanvas-width: var(--lb-sidebar-width);
    --bs-offcanvas-bg: var(--lb-bg-sidebar);
    --bs-offcanvas-border-color: var(--lb-border);
    width: var(--lb-sidebar-width);
    display: flex;
    flex-direction: column;
    /* position/height/overflow/padding: siehe Desktop-MQ unten */
}

/* Logo */
.lb-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    margin-bottom: 28px;
}

.lb-logo-icon {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 26%;
    background: linear-gradient(145deg, #3b7df0, #1f53c4 60%, #173f9e);
    overflow: hidden;
    flex-shrink: 0;
}

.lb-logo-grid {
    position: absolute;
    inset: 24%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 11%;
}

.lb-logo-grid-cell {
    border-radius: 22%;
}

.lb-logo-text {
    font-size: 17px;
    font-weight: 600;
    color: var(--lb-text-primary);
    letter-spacing: -0.01em;
}

.lb-logo-text span {
    color: var(--bs-primary);
}

/* Nav section label */
.lb-nav-section-label {
    font-family: var(--lb-font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--lb-text-faint-alt);
    text-transform: uppercase;
    padding: 14px 12px 8px;
}

/* Nav list */
.lb-nav-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nav item */
.lb-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--lb-radius-sm);
    color: var(--lb-text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.1s, color 0.1s;
    cursor: pointer;
    margin-bottom: 1px;
}

.lb-nav-item:hover {
    background: var(--lb-bg-accent);
    color: var(--bs-primary);
    text-decoration: none;
}

.lb-nav-item--active {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

.lb-nav-item--active:hover {
    background: #1947ad;
    color: #fff;
}

.lb-nav-item--module-active {
    background: var(--lb-bg-accent);
    color: var(--bs-primary);
    font-weight: 600;
}

.lb-nav-item--module-active:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-primary);
}

/* Nav SVG icons */
.lb-nav-svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Sidebar footer */
/* Kein margin-top:auto mehr hier — der Papierkorb-Wrapper (.mt-auto in app.html.twig)
   übernimmt das Nach-unten-Schieben; Footer folgt ihm direkt in normaler Flex-Reihenfolge. */
.lb-sidebar-footer {
    border-top: 1px solid var(--lb-border);
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.lb-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.lb-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--lb-text-primary);
    line-height: 1.2;
}

.lb-user-settings {
    font-size: 12px;
    color: var(--lb-text-faint);
    text-decoration: none;
}

.lb-user-settings:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

/* Sidebar-Footer als Dropup-Trigger — .lb-sidebar-footer liefert bereits Flex/Gap/
   border-top, hier nur die Button-spezifischen Resets (UA-Button-Styles). */
.lb-user-menu-toggle {
    width: 100%;
    background: transparent;
    border: none;
    border-top: 1px solid var(--lb-border);
    margin: 0;
    padding: 14px 10px 14px 4px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--lb-radius-sm);
}

.lb-user-menu-toggle:hover,
.lb-user-menu-toggle[aria-expanded="true"] {
    background: var(--lb-bg-accent);
}

.lb-user-menu {
    min-width: 220px;
}

/* Formular ums Abmelden-<button> darf im Dropdown-Item keinen Eigenraum beanspruchen —
   sonst hat die Zeile UA-Form-Margin und der Button füllt sie nicht randlos aus. */
.lb-user-menu-logout-form {
    margin: 0;
}

.lb-user-menu-logout-form .lb-row-menu-item {
    width: 100%;
}

/* --- Main area ------------------------------------------------------- */

.lb-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--lb-bg-app);
}

/* --- Topbar ---------------------------------------------------------- */

.lb-topbar {
    height: var(--lb-topbar-height);
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--lb-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.lb-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bs-secondary-bg);
    border-radius: var(--lb-radius-sm);
    padding: 9px 14px;
    width: 320px;
    color: var(--lb-text-faint-alt);
    font-size: 14px;
    cursor: text;
}

.lb-search-icon {
    width: 16px;
    height: 16px;
    stroke: var(--lb-text-faint-alt);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.lb-topbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.lb-btn-icon {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--lb-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.1s, background 0.1s;
}

.lb-btn-icon:hover {
    color: var(--lb-text-primary);
    background: var(--lb-bg-accent);
}

.lb-btn-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-btn-icon:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Wrapper für die Viewer-Vor/Zurück-Pfeile (document-viewer.js updateNavUI()).
   Bewusst ohne !important: die Sichtbarkeit wird per inline style="display:none/'''"
   von updateNavUI() gesteuert und darf nicht von einer Utility-Klasse überschrieben
   werden (siehe CHANGELOG — vorher class="d-flex" mit Bootstraps !important). */
.document-viewer-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lb-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bs-primary);
    color: #fff;
    font-family: var(--lb-font-sans);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--lb-radius-sm);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(31, 83, 196, .24);
    transition: background 0.1s;
}

.lb-btn-primary:hover {
    background: #1947ad;
}

.lb-btn-primary svg {
    width: 15px;
    height: 15px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
}

/* --- Content area ---------------------------------------------------- */

.lb-content {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
}

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

.lb-page-title {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lb-text-primary);
    margin: 0;
}

.lb-page-subtitle {
    font-size: 14px;
    color: var(--lb-text-faint);
    margin: 7px 0 0;
}

/* KPI strip */
.lb-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--bs-body-bg);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-xl);
    overflow: hidden;
    margin: 32px 0 44px;
}

.lb-kpi-cell {
    padding: 20px 24px;
    border-right: 1px solid var(--bs-border-color);
}

.lb-kpi-cell:last-child {
    border-right: none;
}

.lb-kpi-label {
    font-size: 12px;
    color: var(--lb-text-faint);
    margin-bottom: 7px;
}

.lb-kpi-value {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--lb-text-primary);
}

.lb-kpi-value--warning {
    color: var(--lb-warning);
}

/* Section heading */
.lb-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

.lb-section-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.lb-section-count {
    font-family: var(--lb-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--lb-text-faint-alt);
    margin-left: 8px;
}

/* Module cards grid */
.lb-modules-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.lb-module-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-xl);
    padding: 22px;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.lb-module-card:hover {
    box-shadow: 0 4px 16px rgba(16, 26, 44, .08);
    border-color: var(--lb-border-strong);
    text-decoration: none;
    color: inherit;
}

.lb-module-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--lb-bg-accent);
    padding: 9px;
    margin-bottom: 16px;
}

.lb-module-icon-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: var(--bs-primary);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-module-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--lb-text-primary);
}

.lb-module-meta {
    font-size: 13px;
    font-weight: 500;
    color: var(--lb-text-faint);
    margin-top: 5px;
}

/* =======================================================================
   Login
   ======================================================================= */

.lb-login {
    display: flex;
    min-height: 100vh;
}

/* Brand-Panel (links) */
.lb-login-brand {
    width: 46%;
    background: linear-gradient(160deg, #2a64de, #1f53c4 50%, #163f8f);
    padding: 56px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Dekorative Blobs via Pseudo-Elemente */
.lb-login-brand::before {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 320px;
    height: 320px;
    border-radius: 30%;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
}

.lb-login-brand::after {
    content: '';
    position: absolute;
    right: 60px;
    bottom: -60px;
    width: 200px;
    height: 200px;
    border-radius: 30%;
    background: rgba(255, 255, 255, .05);
    pointer-events: none;
}

.lb-login-brand-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    z-index: 1;
}

.lb-login-brand-logo-icon {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 26%;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
    flex-shrink: 0;
}

.lb-login-brand-logo-text {
    font-size: 21px;
    font-weight: 600;
    color: #fff;
}

.lb-login-brand-copy {
    position: relative;
    z-index: 1;
}

.lb-login-brand-headline {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

.lb-login-brand-sub {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    max-width: 360px;
    margin: 18px 0 0;
}

.lb-login-trust-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lb-login-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
}

.lb-login-trust-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: #fff;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Form-Panel (rechts) */
.lb-login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 72px;
}

.lb-login-form-inner {
    width: 100%;
    max-width: 380px;
}

/* Tab-Switcher */
.lb-tab-switcher {
    display: inline-flex;
    background: #f1f4f9;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 32px;
}

.lb-tab {
    font-family: var(--lb-font-sans);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 22px;
    border-radius: 7px;
    border: none;
    background: none;
    cursor: pointer;
    transition: background 0.1s;
}

.lb-tab--active {
    background: #fff;
    color: var(--lb-text-primary);
    box-shadow: 0 1px 3px rgba(16, 26, 44, .08);
}

.lb-tab--inactive {
    color: var(--lb-text-faint);
    cursor: default;
    pointer-events: none;
}

/* Formular-Elemente */
.lb-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--lb-text-secondary);
    margin-bottom: 8px;
}

.lb-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--lb-border-strong);
    border-radius: var(--lb-radius-md);
    padding: 13px 15px;
    background: var(--bs-body-bg);
    transition: border-color 0.1s, box-shadow 0.1s;
    margin-bottom: 18px;
}

.lb-input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(31, 83, 196, .12);
}

.lb-input-group > svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: var(--lb-text-faint-alt);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-input-group input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--lb-font-sans);
    font-size: 15px;
    color: var(--lb-text-primary);
    background: transparent;
    min-width: 0;
}

.lb-input-group input::placeholder {
    color: var(--lb-text-faint-alt);
}

.lb-pw-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--lb-text-faint-alt);
    flex-shrink: 0;
}

.lb-pw-toggle:hover {
    color: var(--lb-text-secondary);
}

.lb-pw-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Checkbox + Link-Zeile */
.lb-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.lb-check-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--lb-text-secondary);
    cursor: pointer;
    user-select: none;
}

.lb-check-label input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid var(--lb-border-strong);
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background 0.1s, border-color 0.1s;
}

.lb-check-label input[type=checkbox]:checked {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.lb-check-label input[type=checkbox]:checked::after {
    content: '';
    position: absolute;
    inset: 2px 3px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lb-forgot-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-primary);
    text-decoration: none;
}

.lb-forgot-link:hover {
    text-decoration: underline;
}

/* Submit-Button */
.lb-btn-submit {
    display: block;
    width: 100%;
    background: var(--bs-primary);
    color: #fff;
    font-family: var(--lb-font-sans);
    font-size: 16px;
    font-weight: 600;
    padding: 15px;
    border-radius: var(--lb-radius-md);
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(31, 83, 196, .28);
    transition: background 0.1s;
    text-align: center;
}

.lb-btn-submit:hover {
    background: #1947ad;
}

/* Registrieren-Hinweis */
.lb-login-register-hint {
    text-align: center;
    font-size: 14px;
    color: var(--lb-text-muted);
    margin-top: 24px;
}

.lb-login-register-hint a {
    font-weight: 600;
    color: var(--bs-primary);
    text-decoration: none;
}

.lb-login-register-hint a:hover {
    text-decoration: underline;
}

/* Fehler-Alert */
.lb-alert-error {
    background: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
    color: var(--bs-danger-text-emphasis);
    border-radius: var(--lb-radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 20px;
}

/* Erfolgs-Alert (z. B. Einstellungen nach Speichern) */
.lb-alert-success {
    background: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
    color: var(--bs-success-text-emphasis);
    border-radius: var(--lb-radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 20px;
}

/* --- Public Footer (Login, Konto-gelöscht, Datenschutz) --------------- */
.lb-public-footer {
    text-align: center;
    padding: 20px 16px;
    font-size: 13px;
}

.lb-public-footer a {
    color: var(--lb-text-muted);
    text-decoration: none;
}

.lb-public-footer a:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

/* =======================================================================
   Responsive
   Breakpoints (Bootstrap 5 Standard):
     sm: 576px | md: 768px | lg: 992px | xl: 1200px

   Mobil = < md (768px):
     - Sidebar als Bootstrap-Offcanvas (offcanvas-md)
     - Login gestapelt (Brand-Balken oben, Formular darunter)
     - Dashboard-Grids auf 2 Spalten, unter sm auf 1 Spalte

   Sidebar-Breakpoint md (768px) gewählt: Bei 768px bleiben dem
   Hauptinhalt 520px (768-248) — ausreichend für alle Module.
   ======================================================================= */

/* --- Sidebar Offcanvas-Body ------------------------------------------ */

/* Sidebar-Inhalt ist in .offcanvas-body; Bootstrap überschreibt Padding  */
/* mit 0 auf Desktop (offcanvas-md) — wir korrigieren das weiter unten.  */
/* overflow-y:auto sitzt bewusst NICHT hier, sondern auf .lb-sidebar-nav — so scrollt nur
   der Modul-Bereich, während Papierkorb (mt-auto) und User-Footer sichtbar fixiert bleiben. */
.lb-sidebar .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 8px 16px 24px;
}

/* Offcanvas-Header enthält den Close-Button (Bootstrap blendet ihn auf   */
/* Desktop via display:none aus — kein eigenes d-md-none nötig).          */
.lb-sidebar .offcanvas-header {
    justify-content: flex-end;
    padding: 10px 16px 4px;
    flex-shrink: 0;
    min-height: 44px;
}

/* Desktop (≥ md): Basis-.offcanvas setzt global position:fixed,          */
/* visibility:hidden und transform:translateX(-100%) — alle drei hier      */
/* zurücksetzen, da Bootstrap-JS das nicht automatisch per show-Klasse     */
/* erledigt (kein DOMContentLoaded-Hook für responsive Sidebars).          */
@media (min-width: 768px) {
    .lb-sidebar.offcanvas-md {
        /* Basis-.offcanvas-Overrides */
        visibility: visible;
        transform: none;
        position: sticky;
        top: 0;
        /* Sidebar-Appearance */
        background: var(--lb-bg-sidebar) !important;
        border-right: 1px solid var(--lb-border);
        height: 100vh;
        overflow-y: auto;
        flex-shrink: 0;
        width: var(--lb-sidebar-width);
        z-index: auto;
    }

    .lb-sidebar.offcanvas-md .offcanvas-body {
        flex-grow: 1;             /* Bootstrap setzt 0 */
        padding: 24px 16px;       /* Bootstrap setzt 0 */
    }
}

/* --- Hamburger-Button ------------------------------------------------ */

.lb-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--lb-text-muted);
    border-radius: var(--lb-radius-sm);
    min-width: 44px;
    min-height: 44px;
    transition: color 0.1s, background 0.1s;
    flex-shrink: 0;
}

.lb-hamburger:hover {
    color: var(--lb-text-primary);
    background: var(--lb-bg-accent);
}

.lb-hamburger svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* --- Topbar Mobile (< md) ------------------------------------------- */

@media (max-width: 767.98px) {
    .lb-topbar {
        padding: 0 12px;
    }

    /* Vollbreites Suchfeld ausblenden → Icon-Button in .lb-topbar-actions */
    .lb-search {
        display: none;
    }

    /* Touch-Ziele für Icon-Buttons */
    .lb-btn-icon {
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    /* Nav-Einträge: 44px Touch-Ziel auf Mobile */
    .lb-nav-item {
        padding: 13px 12px;
        min-height: 44px;
    }

    /* Logo mittig in der Topbar. Hamburger (links, 44px) und Actions (rechts, zwei
       Icon-Buttons, ~106px) sind unterschiedlich breit — eine 3-Spalten-Flex/Grid-
       Utility-Lösung würde die Mitte dadurch Richtung Actions verschieben. Absolute
       Zentrierung relativ zur vollen Topbar-Breite ist hier robuster und minimal.
       .lb-topbar ist bereits position:sticky und damit automatisch Positionierungs-
       kontext für dieses Element — kein zusätzliches position:relative nötig. */
    .lb-topbar-logo-mobile {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        gap: 10px;
    }
}

/* --- Dashboard Mobile (< md) ---------------------------------------- */

@media (max-width: 767.98px) {
    .lb-content {
        padding: 24px 16px;
    }

    .lb-page-title {
        font-size: 22px;
    }

    /* KPI-Leiste: 2 Spalten */
    .lb-kpi-strip {
        grid-template-columns: repeat(2, 1fr);
        margin: 20px 0 28px;
    }
    /* Kein rechter Rand auf dem jeweils letzten Element einer Zeile */
    .lb-kpi-cell:nth-child(2n) {
        border-right: none;
    }
    /* Obere Trennlinie für die zweite Zeile */
    .lb-kpi-cell:nth-child(3),
    .lb-kpi-cell:nth-child(4) {
        border-top: 1px solid #f1f4f9;
    }
    .lb-kpi-cell {
        padding: 16px 18px;
    }

    /* Modul-Grid: 2 Spalten */
    .lb-modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .lb-module-card {
        padding: 16px;
    }
}

/* Dashboard: 1 Spalte bei < sm (576px) */
@media (max-width: 575.98px) {
    .lb-kpi-strip {
        grid-template-columns: 1fr;
    }
    .lb-kpi-cell {
        border-right: none;
        border-top: 1px solid #f1f4f9;
    }
    .lb-kpi-cell:first-child {
        border-top: none;
    }
    .lb-modules-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Login Mobile (< md) -------------------------------------------- */

@media (max-width: 767.98px) {
    .lb-login {
        flex-direction: column;
    }

    /* Brand-Panel: kompakter blauer Balken oben (nur Logo sichtbar) */
    .lb-login-brand {
        width: 100%;
        min-height: 0;
        padding: 20px 24px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-shrink: 0;
    }
    /* Dekorative Blobs: keine auf kleinen Viewports */
    .lb-login-brand::before,
    .lb-login-brand::after {
        display: none;
    }
    /* Headline, Subtext und Trust-Badges auf Mobile ausblenden */
    .lb-login-brand-copy,
    .lb-login-trust-list {
        display: none;
    }

    /* Form-Panel: volle Breite */
    .lb-login-form-panel {
        flex: 1;
        padding: 36px 24px 40px;
        align-items: flex-start;
    }
    .lb-login-form-inner {
        max-width: 100%;
    }
}

/* Sehr schmale Viewports (< 400px): etwas mehr Platz durch weniger Padding */
@media (max-width: 399.98px) {
    .lb-login-form-panel {
        padding: 24px 16px 32px;
    }
}

/* =======================================================================
   Vehicles-Modul — gemeinsame Komponenten
   ======================================================================= */

/* --- Zurück-Link / Breadcrumb ---------------------------------------- */

.lb-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lb-text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.1s;
}

.lb-back-link:hover {
    color: var(--bs-primary);
    text-decoration: none;
}

.lb-back-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Content-Card (weiße Box mit Border) ----------------------------- */

.lb-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-xl);
    padding: 24px 28px;
}

.lb-cards-stack > .lb-card + .lb-card {
    margin-top: 20px;
}

/* Statusleiste: Schnellübersicht wichtiger Fahrzeugdaten */
.lb-stat-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.lb-stat-item {
    flex: 1;
    background: var(--bs-body-bg);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-xl);
    padding: 14px 18px;
    min-width: 0;
}

.lb-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--lb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lb-text-primary);
    white-space: nowrap;
}

.lb-stat-value--warning {
    color: var(--lb-warning);
}

.lb-stat-value--faint {
    color: var(--lb-text-muted);
    font-weight: 400;
}

.lb-stat-unit {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--lb-text-muted);
    margin-left: 2px;
}

@media (max-width: 767px) {
    .lb-stat-bar {
        flex-wrap: wrap;
    }
    .lb-stat-item {
        flex: 1 1 calc(50% - 6px);
    }
}

/* Two-column detail layout: links gestapelte Cards, rechts Verlauf in voller Höhe */
.lb-detail-layout {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.lb-detail-layout__left {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.lb-detail-layout__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lb-detail-layout__right .lb-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lb-detail-layout__right .lb-timeline {
    flex: 1;
    overflow-y: auto;
}

@media (max-width: 767px) {
    .lb-detail-layout {
        flex-direction: column;
    }
    .lb-detail-layout__right .lb-card {
        flex: none;
    }
}

/* --- Tabelle ---------------------------------------------------------- */

.lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.lb-table thead tr {
    border-bottom: 2px solid var(--lb-border);
}

.lb-table thead th {
    font-family: var(--lb-font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lb-text-faint-alt);
    padding: 0 20px 12px 0;
    font-weight: 700;
    white-space: nowrap;
}

.lb-table thead th:last-child {
    padding-right: 0;
}

.lb-table tbody tr {
    border-bottom: 1px solid var(--lb-border);
    transition: background 0.1s;
}

.lb-table tbody tr:last-child {
    border-bottom: none;
}

.lb-table tbody tr:hover {
    background: var(--lb-bg-accent);
}

.lb-table tbody td {
    padding: 14px 20px 14px 0;
    color: var(--lb-text-primary);
    vertical-align: middle;
}

.lb-table tbody td:last-child {
    padding-right: 0;
}

.lb-table a {
    color: inherit;
    text-decoration: none;
}

.lb-table a:hover {
    color: var(--bs-primary);
}

/* --- Monospace-Wert (Kennzeichen, VIN) -------------------------------- */

.lb-mono {
    font-family: var(--lb-font-mono);
    font-size: 12.5px;
    background: var(--lb-bg-accent);
    color: var(--bs-primary);
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: 500;
    display: inline-block;
}

/* --- Badge ------------------------------------------------------------ */

.lb-badge {
    display: inline-block;
    font-family: var(--lb-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 5px;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.lb-badge--warning {
    background: #fef3e2;
    color: var(--lb-warning);
}

/* Hintergrund oben ist ein fester Hex-Wert (kein Bootstrap-Token) und folgt daher nicht
   automatisch dem Theme-Wechsel — im Dark Mode eigener dunkler Terracotta-Hintergrund,
   sonst wäre die aufgehellte --lb-warning-Textfarbe auf dem hellen Chip kaum lesbar. */
[data-bs-theme="dark"] .lb-badge--warning {
    background: #341e14;
}

.lb-badge--info {
    background: var(--lb-bg-accent);
    color: var(--bs-primary);
}

/* --- section-count Warnung-Variante ----------------------------------- */

.lb-section-count--warning {
    color: var(--lb-warning);
}

/* --- Leerer Zustand --------------------------------------------------- */

.lb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.lb-empty-state svg {
    width: 40px;
    height: 40px;
    stroke: var(--lb-text-faint);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 16px;
    opacity: 0.45;
}

.lb-empty-state-text {
    font-size: 14px;
    color: var(--lb-text-muted);
    margin: 0;
}

/* Outline-CTA im Empty State — bewusst kein .lb-btn-primary (gefüllt): heller/surface
   Hintergrund + farbiger Rand wirkt im leeren Zustand weniger dominant als ein Solid-Button. */
.lb-empty-state-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 16px 24px;
    background: var(--bs-body-bg);
    color: var(--lb-primary-outline);
    font-family: var(--lb-font-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--lb-primary-outline);
    border-radius: var(--lb-radius-md);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.lb-empty-state-cta:hover {
    background: var(--lb-bg-accent);
    text-decoration: none;
}

.lb-empty-state-cta:focus-visible {
    outline: 2px solid var(--lb-primary-outline);
    outline-offset: 2px;
}

.lb-empty-state-cta svg {
    width: 28px;
    height: 28px;
    stroke: var(--lb-primary-outline);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* --- Datei-Download-Link --------------------------------------------- */

.lb-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.lb-doc-link:hover {
    text-decoration: underline;
    color: var(--bs-primary);
}

.lb-doc-link svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Daten-Grid (Stammdaten) ------------------------------------------ */

.lb-data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 32px;
}

.lb-data-label {
    font-size: 10px;
    font-family: var(--lb-font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lb-text-faint-alt);
    margin-bottom: 6px;
}

.lb-data-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--lb-text-primary);
}

.lb-data-value--faint {
    font-weight: 400;
    color: var(--lb-text-muted);
}

/* --- Personen-Chip ---------------------------------------------------- */

.lb-person-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lb-bg-accent);
    border: 1px solid var(--lb-border);
    border-radius: 999px;
    padding: 6px 14px 6px 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lb-text-primary);
}

.lb-person-chip-avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Reminder-Zeile --------------------------------------------------- */

.lb-reminder-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--lb-border);
}

.lb-reminder-row:first-of-type {
    margin-top: 8px;
}

.lb-reminder-row:last-child {
    border-bottom: none;
}

.lb-reminder-due {
    font-size: 12px;
    font-family: var(--lb-font-mono);
    color: var(--lb-text-muted);
    white-space: nowrap;
}

.lb-reminder-due--overdue {
    color: var(--lb-warning);
    font-weight: 600;
}

/* --- Timeline (Verlauf) ----------------------------------------------- */

.lb-timeline {
    position: relative;
    padding-left: 22px;
}

.lb-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--lb-border);
    border-radius: 1px;
}

.lb-timeline-item {
    position: relative;
    padding-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    align-items: start;
}

.lb-timeline-right {
    border-left: 1px solid var(--lb-border);
    padding-left: 20px;
    min-height: 1px;
}

@media (max-width: 639px) {
    .lb-timeline-item {
        grid-template-columns: 1fr;
    }

    .lb-timeline-right {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--lb-border);
        padding-top: 10px;
        margin-top: 6px;
    }
}

.lb-timeline-item:last-child {
    padding-bottom: 0;
}

.lb-timeline-item::before {
    content: '';
    position: absolute;
    left: -19px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 2px solid var(--bs-body-bg);
    box-shadow: 0 0 0 2px var(--bs-primary);
}

/* Kategorie-Icon (Baustein 3, Verlauf): ersetzt den neutralen Punkt für Verlaufseinträge mit
   erkennbarer Kategorie (siehe VehicleEventIconRegistry) — Sonstiges/unbekannt behält den
   ::before-Punkt oben, --icon unterdrückt ihn nur, wenn ein echtes Marker-Element gerendert wird. */
.lb-timeline-item--icon::before {
    content: none;
}

.lb-timeline-marker {
    position: absolute;
    left: -22px;
    top: 1px;
    width: 20px;
    height: 20px;
    padding: 3px;
    display: block;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 2px solid var(--bs-body-bg);
    color: #fff;
}

/* Kategorie-Farbe des Markers (ergänzt die Formunterscheidung der Icons aus
   VehicleEventIconRegistry) — überschreibt nur den Hintergrund, Icon-Symbol/Form unverändert. */
.lb-timeline-marker--tuv { background: var(--lb-cat-tuv); }
.lb-timeline-marker--inspektion { background: var(--lb-cat-inspektion); }
.lb-timeline-marker--oelwechsel { background: var(--lb-cat-oelwechsel); }
.lb-timeline-marker--schaden { background: var(--lb-cat-schaden); }
.lb-timeline-marker--kilometerstand { background: var(--lb-cat-kilometerstand); }

.lb-timeline-date {
    font-family: var(--lb-font-mono);
    font-size: 10px;
    color: var(--lb-text-faint);
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.lb-timeline-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--lb-text-primary);
    margin-bottom: 2px;
}

.lb-timeline-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--lb-bg-accent);
    color: var(--lb-text-muted);
    font-size: 11px;
    font-weight: 500;
    vertical-align: middle;
}

.lb-timeline-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.lb-timeline-item--drag-over {
    outline: 2px dashed var(--bs-primary);
    outline-offset: 4px;
    border-radius: var(--lb-radius-md);
    background: var(--lb-bg-accent);
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 767.98px) {
    .lb-data-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lb-card {
        padding: 18px 20px;
    }

    .lb-table thead th,
    .lb-table tbody td {
        padding-right: 12px;
    }
}

@media (max-width: 479.98px) {
    .lb-data-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px 20px;
    }
}

/* =======================================================================
   .lb-license-plate — deutsches Kfz-Kennzeichen, rein CSS
   Aufbau: [blauer EU-Streifen mit "D" | Kennzeichentext]
   ======================================================================= */

.lb-license-plate {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
    font-family: var(--lb-font-sans);
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.8rem;
    line-height: 1;
    padding: 3px 7px 3px 0;
}

.lb-license-plate::before {
    content: '';
    align-self: stretch;
    flex-shrink: 0;
    width: 7px;
    margin-top: -3px;
    margin-bottom: -3px;
    margin-right: 6px;
    background-color: #003399;
}

.lb-license-plate--lg {
    font-size: 1.05rem;
    padding: 5px 12px 5px 0;
    letter-spacing: 0.14em;
    border-width: 2.5px;
}

.lb-license-plate--lg::before {
    width: 9px;
    margin-top: -5px;
    margin-bottom: -5px;
    margin-right: 8px;
}

/* =======================================================================
   Fahrzeug-Formular (vehicles/form.html.twig)
   Ergänzt die Login-Formular-Klassen um App-Shell-spezifische Varianten.
   ======================================================================= */

/* Feld-Wrapper — enthält Label + Input/Select + optional Fehlertext */
.lb-form-field {
    margin-bottom: 20px;
}

.lb-form-field--error .lb-input-group,
.lb-form-field--error .lb-select-group {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), .10);
}

/* Hinweistext neben dem Label (z. B. "(falls vorhanden)") */
.lb-form-label-hint {
    font-weight: 400;
    font-size: 12px;
    color: var(--lb-text-faint);
    margin-left: 6px;
}

/* Feldname-Fehlertext unter dem Feld */
.lb-form-error {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--bs-form-invalid-color);
}

/* Select-Feld — gleiche Optik wie lb-input-group */
.lb-select-group {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--lb-border-strong);
    border-radius: var(--lb-radius-md);
    padding: 13px 15px;
    background: var(--bs-body-bg);
    transition: border-color 0.1s, box-shadow 0.1s;
    margin-bottom: 0;
    position: relative;
}

.lb-select-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(31, 83, 196, .12);
}

.lb-select-group > svg:first-child {
    flex-shrink: 0;
    stroke: var(--lb-text-faint-alt);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-select-group select {
    flex: 1;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--lb-font-sans);
    font-size: 15px;
    color: var(--lb-text-primary);
    background: transparent;
    cursor: pointer;
    min-width: 0;
}

.lb-select-arrow {
    flex-shrink: 0;
    stroke: var(--lb-text-faint-alt);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* lb-input-group ohne icon — input takes full width */
.lb-input-group input[type="number"] {
    -moz-appearance: textfield;
}
.lb-input-group input[type="number"]::-webkit-inner-spin-button,
.lb-input-group input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* Zwei Felder nebeneinander */
.lb-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

/* Aktionszeile: Abbrechen-Link + Submit-Button */
.lb-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--lb-border);
}

.lb-btn-cancel {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--lb-font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--lb-text-secondary);
    text-decoration: none;
    padding: 10px 16px;
    border-radius: var(--lb-radius-md);
    transition: background 0.1s;
}

.lb-btn-cancel:hover {
    background: var(--lb-bg-accent);
    color: var(--lb-text-primary);
}

/* Submit-Button im Card-Kontext — nicht full-width wie im Login-Panel */
.lb-btn-primary--form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    width: auto;
    padding: 10px 20px;
    box-shadow: 0 4px 12px rgba(31, 83, 196, .22);
}

/* Kompakte Upload-Zone im Dokumente-Abschnitt */
.lb-upload-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 16px 0 0;
    border-top: 1px solid var(--lb-border);
    margin-top: 16px;
}

.lb-upload-form .lb-form-field {
    margin-bottom: 0;
    flex: 1;
    min-width: 180px;
}

.lb-upload-form-file {
    flex: 1;
    min-width: 180px;
}

.lb-upload-submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lb-sidebar-bg);
    color: #fff;
    font-family: var(--lb-font-sans);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border: none;
    border-radius: var(--lb-radius-md);
    cursor: pointer;
    transition: opacity 0.1s;
}

.lb-upload-submit:hover {
    opacity: 0.88;
}

@media (max-width: 575.98px) {
    .lb-form-row {
        grid-template-columns: 1fr;
    }

    .lb-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .lb-btn-primary--form {
        width: 100%;
        justify-content: center;
    }

    .lb-btn-cancel {
        text-align: center;
    }
}

/* =======================================================================
   Bootstrap nav-tabs — LifeBoxx-Overrides
   Klasse .lb-vehicle-tabs auf dem <ul> aktiviert das angepasste Styling.
   Bootstrap-Klassen bleiben unverändert; nur visuelle Schicht überschrieben.
   ======================================================================= */

.lb-vehicle-tabs.nav-tabs {
    border-bottom: 2px solid var(--lb-border);
    gap: 4px;
    margin-bottom: 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;   /* verhindert vertikales Scrollen (overflow-x:auto setzt sonst implizit overflow-y:auto) */
    padding-bottom: 2px;  /* gibt dem margin-bottom:-2px der nav-links Raum innerhalb der Clip-Grenze */
    scrollbar-width: none;
}

.lb-vehicle-tabs.nav-tabs::-webkit-scrollbar {
    display: none;
}

.lb-vehicle-tabs .nav-link {
    font-family: var(--lb-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--lb-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    margin-bottom: -2px;
    border-radius: 0;
    background: none;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}

.lb-vehicle-tabs .nav-link:hover:not(.active) {
    color: var(--lb-text-secondary);
    border-bottom-color: var(--lb-border-strong);
    background: none;
}

.lb-vehicle-tabs .nav-link.active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    background: none;
    font-weight: 700;
}

.lb-vehicle-tab-content .tab-pane {
    padding-top: 4px;
}

/* =======================================================================
   Dokument-Baum (Alle Dokumente)
   ======================================================================= */

/* Äußerer Container — Abstand zwischen Wurzelknoten */
.lb-tree {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* -----------------------------------------------------------------------
   .lb-tree-node  =  <details>-Element für jeden Knoten
   Tiefe-0: Karte mit Rand.  Tiefe-1+: flach, kein eigener Rahmen.
   KEIN overflow:hidden — das würde .lb-tree-children abschneiden.
   ----------------------------------------------------------------------- */
.lb-tree-node {
    background: transparent;
    border: none;
    border-radius: 0;
}

.lb-tree-depth-0 {
    background: var(--bs-body-bg);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-md);
}

/* -----------------------------------------------------------------------
   .lb-tree-children  =  Wrapper um alle Kinder eines geöffneten Knotens.
   Dieser eine Wrapper erledigt Einrückung + vertikale Führungslinie.
   Durch Verschachtelung akkumuliert sich der Einzug automatisch:
   Tiefe 1 → 22px, Tiefe 2 → 44px, Tiefe 3 → 66px usw.
   Sichtbar nur wenn <details open> — verschwindet beim Zuklappen.
   ----------------------------------------------------------------------- */
.lb-tree-children {
    margin-left: 22px;
    padding-left: 18px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-left: 2px solid var(--lb-border);
}

/* Abstand zwischen Geschwisterknoten innerhalb eines geöffneten Knotens */
.lb-tree-children > .lb-tree-node + .lb-tree-node {
    margin-top: 4px;
}

/* -----------------------------------------------------------------------
   Summary = klickbarer Header jedes Knotens
   ----------------------------------------------------------------------- */
.lb-tree-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Rechtes Padding bewusst identisch zu .lb-doc-row (10px) und den kompakteren
       Tiefe-1+-Summaries — sonst steht das "⋮"-Dropdown bei Tiefe-0-Ordnern 4px weiter
       links als bei allem, was darunter verschachtelt ist (siehe .lb-row-actions). */
    padding: 11px 10px 11px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    color: var(--lb-text-primary);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--lb-radius-md);
    transition: background 0.1s;
}

/* Webkit zeigt sonst ein zusätzliches Dreieck */
.lb-tree-summary::-webkit-details-marker { display: none; }
.lb-tree-summary::marker { display: none; }

.lb-tree-summary:hover {
    background: var(--lb-bg-accent);
}

/* Drag & Drop: Datei über einen Ordner-Knoten gezogen (nur Ordner mit Edit-Recht,
   siehe data-drop-folder-id) — dezente Hervorhebung, reines Klassen-Toggle per JS. */
.lb-tree-summary--dragover {
    background: var(--lb-bg-accent);
    outline: 2px dashed var(--bs-primary);
    outline-offset: -2px;
}

/* Tiefe-0 geöffnet: Trennlinie zwischen Summary und Kindern */
.lb-tree-depth-0[open] > .lb-tree-summary {
    border-radius: var(--lb-radius-md) var(--lb-radius-md) 0 0;
    border-bottom: 1px solid var(--lb-border);
}

/* Tiefe 1+ hat kompakteres Padding */
.lb-tree-depth-1 > .lb-tree-summary,
.lb-tree-depth-2 > .lb-tree-summary,
.lb-tree-depth-3 > .lb-tree-summary,
.lb-tree-depth-4 > .lb-tree-summary {
    padding: 7px 10px;
    font-size: 13px;
}

/* -----------------------------------------------------------------------
   Chevron-Caret — zeigt Auf/Zu-Zustand des Knotens
   ----------------------------------------------------------------------- */
.lb-tree-caret {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--lb-text-faint);
    transition: transform 0.15s ease;
}

.lb-tree-caret svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* Klappt den Chevron um 90° wenn der Knoten offen ist */
details[open] > .lb-tree-summary .lb-tree-caret {
    transform: rotate(90deg);
    color: var(--bs-primary);
}

/* -----------------------------------------------------------------------
   Ordner-Icon — blau, hebt sich klar von der grauen Führungslinie ab
   ----------------------------------------------------------------------- */
.lb-tree-folder-icon {
    width: 15px;
    height: 15px;
    stroke: var(--bs-primary);
    fill: rgba(31, 83, 196, 0.08);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Label + Kontext-Link
   ----------------------------------------------------------------------- */
.lb-tree-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Dokument-Zähler-Badge im Summary
   ----------------------------------------------------------------------- */
.lb-tree-badge {
    font-family: var(--lb-font-mono);
    font-size: 11px;
    font-weight: 600;
    background: var(--lb-bg-accent);
    color: var(--bs-primary);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Dokument-Zeilen innerhalb eines Blattknotens
   ----------------------------------------------------------------------- */
.lb-tree-docs {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
}

.lb-doc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px 9px 6px;
    border-bottom: 1px solid var(--lb-border);
    font-size: 13px;
    border-radius: var(--lb-radius-sm);
}

.lb-doc-row:last-child {
    border-bottom: none;
}

.lb-doc-row:hover {
    background: var(--lb-bg-accent);
}

/* MIME-Typ Badge — farbig, hebt sich klar von Führungslinie ab */
.lb-doc-mime {
    font-family: var(--lb-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--lb-bg-accent);
    color: var(--lb-text-muted);
    flex-shrink: 0;
    min-width: 36px;
    text-align: center;
}

.lb-doc-mime--pdf {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.lb-doc-mime--img {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

/* Titel + optionale Beschreibung */
.lb-doc-info {
    flex: 1;
    min-width: 0;
}

.lb-doc-title {
    font-weight: 600;
    color: var(--lb-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-doc-desc {
    font-size: 12px;
    color: var(--lb-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Datum */
.lb-doc-meta {
    font-size: 12px;
    color: var(--lb-text-faint);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Dateigröße */
.lb-doc-size {
    font-family: var(--lb-font-mono);
    font-size: 11px;
    color: var(--lb-text-faint);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 52px;
    text-align: right;
}

/* -----------------------------------------------------------------------
   Export-Schaltfläche — oberhalb des Dokumentenbaums
   ----------------------------------------------------------------------- */
.lb-browse-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

/* Dezenter Trigger für das Kopfzeilen-Aktionsmenü (Neuer Bereich / Dokument hochladen /
   Alle herunterladen) — bewusst zurückhaltender als ein Primary-Button, da es drei
   gleichrangig-prominente blaue Buttons ersetzt, nicht eine einzelne Hauptaktion. */
.lb-header-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: var(--bs-body-bg);
    color: var(--lb-text-secondary);
    border: 1px solid var(--lb-border-strong);
    border-radius: var(--lb-radius-md);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.lb-header-menu-toggle:hover,
.lb-header-menu-toggle[aria-expanded="true"] {
    background: var(--lb-bg-accent);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.lb-header-menu-toggle svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-browse-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* -----------------------------------------------------------------------
   Rechte Spalte jeder Baum-/Dokument-Zeile (Zähler-Badge + "⋮"-Dropdown bzw.
   Export-Icon) — EIN gemeinsamer Wrapper für Ordner-Summary und Dokument-Zeile,
   damit das Dropdown/Icon in jeder Zeile exakt an derselben rechten Position
   landet, unabhängig von Zeilentyp und Verschachtelungstiefe. Braucht kein
   explizites min-width/justify-content: da .lb-tree-label/.lb-doc-info per
   flex:1 den gesamten Restplatz aufsaugen, sitzt dieser Wrapper als letztes
   Flex-Kind ohnehin bündig an padding-right — vorausgesetzt, dieses
   padding-right ist über beide Zeilentypen und alle Tiefen identisch (siehe
   .lb-tree-summary/.lb-doc-row).
   ----------------------------------------------------------------------- */
.lb-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Aktions-Dropdown pro Zeile ("Drei-Punkte"-Menü) — ersetzt die vorher
   einzeln nebeneinander stehenden Icon-Buttons für Ordner-Knoten
   (Umbenennen/Verschieben/Löschen/Unterordner anlegen/Datei hochladen) und
   Dokument-Zeilen (Bearbeiten/Verschieben/Löschen/Herunterladen).
   Überschreibt bewusst den Bootstrap-Standard-Look von .dropdown-menu/
   .dropdown-item, damit es sich ins lifeboxx-theme einfügt.
   ----------------------------------------------------------------------- */
.lb-row-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--lb-text-faint);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.1s, color 0.1s;
}

.lb-row-menu-toggle:hover,
.lb-row-menu-toggle[aria-expanded="true"] {
    background: var(--lb-bg-accent);
    color: var(--bs-primary);
}

.lb-row-menu-toggle svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-row-menu-list {
    min-width: 210px;
    padding: 6px;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-md);
    box-shadow: 0 8px 24px rgba(16, 26, 44, .14);
    font-size: 13px;
}

.lb-row-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--lb-radius-sm);
    border: none;
    background: transparent;
    color: var(--lb-text-primary);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.lb-row-menu-item svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    color: var(--lb-text-faint);
    transition: color 0.1s;
}

.lb-row-menu-item:hover,
.lb-row-menu-item:focus-visible {
    background: var(--lb-bg-accent);
    color: var(--bs-primary);
}

.lb-row-menu-item:hover svg,
.lb-row-menu-item:focus-visible svg {
    color: var(--bs-primary);
}

.lb-row-menu-item--danger {
    color: var(--bs-danger);
}

.lb-row-menu-item--danger svg {
    color: var(--bs-danger);
}

.lb-row-menu-item--danger:hover,
.lb-row-menu-item--danger:focus-visible {
    background: rgba(var(--bs-danger-rgb), .08);
    color: var(--bs-danger);
}

.lb-row-menu-item--danger:hover svg,
.lb-row-menu-item--danger:focus-visible svg {
    color: var(--bs-danger);
}

.lb-row-menu-divider {
    margin: 6px 4px;
    border: none;
    border-top: 1px solid var(--lb-border);
}

/* -----------------------------------------------------------------------
   Upload-Formularfelder — verwendet im Upload-Modal
   ----------------------------------------------------------------------- */
.lb-upload-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.lb-upload-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--lb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lb-upload-required { color: var(--bs-danger); }
.lb-upload-optional { font-weight: 400; color: var(--lb-text-faint); }

.lb-upload-hint {
    font-size: 11px;
    color: var(--lb-text-faint);
}

/* Vorschauliste der ausgewählten Dateien im Mehrfach-Upload-Modal (Dialog oder Drag & Drop) —
   siehe renderFileList() im scripts-Block. */
.lb-upload-filelist {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--lb-text-muted);
}

.lb-upload-filelist-error {
    color: var(--bs-danger);
    font-weight: 600;
}

.lb-upload-input {
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    color: var(--lb-text-primary);
    background: var(--bs-body-bg);
    outline: none;
    transition: border-color 0.15s;
}

.lb-upload-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(31, 83, 196, 0.12);
}

input[type="file"].lb-upload-input {
    padding: 5px 8px;
}

.lb-upload-submit {
    padding: 7px 18px;
    background: var(--bs-primary);
    color: #fff;
    border: none;
    border-radius: var(--lb-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.lb-upload-submit:hover { background: #1552c1; }

/* Drop-Zone im Ordner-Inhalt-Modal (Vehicles-Verlauf) — Drag&Drop und klassischer
   Datei-Auswahl-Button (.lb-upload-input) sind gleichwertig nebeneinander, siehe
   public/js/vehicle-folder-content-modal.js. */
.lb-folder-dropzone {
    border: 1px dashed var(--lb-border);
    border-radius: var(--lb-radius-sm);
    padding: 14px;
    transition: border-color 0.15s, background 0.15s;
}

.lb-folder-dropzone--dragover {
    border-color: var(--bs-primary);
    background: var(--lb-bg-accent);
}

/* Inline-Bearbeiten-Formular unter einer Datei-Zeile im Ordner-Inhalt-Modal (Vehicles-Verlauf) —
   bewusst kein Sub-Modal (siehe public/js/vehicle-folder-content-modal.js). */
.lb-doc-edit-row {
    margin: -4px 0 8px;
    padding: 10px 12px;
    background: var(--lb-bg-accent);
    border-radius: var(--lb-radius-sm);
}

/* -----------------------------------------------------------------------
   Icon-Auswahl-Grid im "Neuer Bereich"-Modal — jede Kachel ist vollständig
   klickbar (Label umschließt Radio + Icon), Radio-Input bleibt technisch
   vorhanden, aber unsichtbar über der gesamten Kachel.
   ----------------------------------------------------------------------- */
.lb-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 8px;
}

.lb-icon-option {
    position: relative;
    display: block;
    cursor: pointer;
}

/* Visuell versteckt, aber weiterhin fokussierbar/klickbar — deckt die
   gesamte Kachel ab statt nur einen kleinen Punkt daneben. */
.lb-icon-option input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.lb-icon-option-swatch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border: 1.5px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-text-secondary);
    background: var(--bs-body-bg);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.lb-icon-option-swatch svg {
    width: 20px;
    height: 20px;
}

.lb-icon-option:hover .lb-icon-option-swatch {
    border-color: var(--lb-border-strong);
    background: var(--lb-bg-accent);
}

.lb-icon-option input[type="radio"]:checked + .lb-icon-option-swatch {
    border-color: var(--bs-primary);
    background: rgba(31, 83, 196, 0.1);
    color: var(--bs-primary);
}

/* Häkchen-Badge in der Ecke bei Auswahl — reines CSS, kein zusätzliches Markup */
.lb-icon-option input[type="radio"]:checked + .lb-icon-option-swatch::after {
    content: "\2713";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.lb-icon-option input[type="radio"]:focus-visible + .lb-icon-option-swatch {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(31, 83, 196, 0.3);
}

/* --- Modul-Instanz-Picker (generische Verknüpfungs-UI, module-instance-picker.js) ------- */

.lb-picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lb-bg-accent);
    border: 1px solid var(--lb-border);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lb-text-primary);
}

/* Zielinstanz existiert nicht mehr (siehe ContractController::UNAVAILABLE_RELATION_LABEL) —
   weiterhin entfernbar, aber optisch klar als verwaist erkennbar. */
.lb-picker-chip--unavailable {
    background: transparent;
    border-style: dashed;
    color: var(--lb-text-muted);
    font-style: italic;
}

.lb-picker-chip-icon {
    display: flex;
    align-items: center;
    color: var(--lb-text-muted);
    flex-shrink: 0;
}

.lb-picker-chip-remove {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0 0 0 4px;
    cursor: pointer;
    line-height: 0;
    color: var(--lb-text-muted);
}

.lb-picker-chip-remove:hover {
    color: var(--bs-danger);
}

.lb-picker-result {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--lb-text-primary);
    cursor: pointer;
}

.lb-picker-result:hover {
    background: var(--lb-bg-accent);
}

.lb-picker-empty {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--lb-text-muted);
}

/* =======================================================================
   Vertragsliste: dunkle Filterleiste + Kategorie-/Gruppen-Karten
   (templates/contracts/list.html.twig) — eigene Klassen statt Wiederverwendung von
   components/filter_bar.html.twig, das weiterhin unverändert von vehicles/detail.html.twig
   genutzt wird.
   ======================================================================= */

/* --- Filterleiste --- */

.contract-controlbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    background: var(--lb-bg-app);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-lg);
    padding: 14px 18px;
}

.contract-controlbar__group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contract-controlbar__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lb-text-muted);
    white-space: nowrap;
}

/* Status-Segmented-Control: Server-GET-Links (kein JS), aktiver Status per .is-active */
.contract-status-segments {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    background: var(--bs-body-bg);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-md);
    padding: 3px;
}

.contract-status-segments__item {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: calc(var(--lb-radius-md) - 3px);
    font-size: 13px;
    color: var(--lb-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}

.contract-status-segments__item:hover {
    color: var(--lb-text-primary);
}

.contract-status-segments__item.is-active {
    background: var(--bs-primary);
    color: #fff;
}

.contract-controlbar__select {
    background: var(--bs-body-bg);
    color: var(--lb-text-primary);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-md);
    padding: 6px 10px;
    font-size: 13px;
}

.contract-controlbar__search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bs-body-bg);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-md);
    padding: 0 10px;
}

.contract-controlbar__search svg {
    flex-shrink: 0;
    color: var(--lb-text-faint);
}

.contract-controlbar__search input {
    border: none;
    background: none;
    padding: 7px 0;
    font-size: 13px;
    color: var(--lb-text-primary);
    min-width: 160px;
}

.contract-controlbar__search input:focus {
    outline: none;
}

.contract-controlbar__reset {
    font-size: 12.5px;
    color: var(--bs-primary);
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
}

.contract-controlbar__reset:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .contract-controlbar__reset {
        margin-left: 0;
    }
}

/* --- Status-Pill mit Punkt-Indikator (Tabellenspalte) --- */

.contract-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--lb-text-secondary);
}

.contract-status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lb-text-faint);
    flex-shrink: 0;
}

.contract-status-pill--active::before {
    background: var(--lb-success);
}

.contract-status-pill--cancellation_pending::before {
    background: var(--lb-warning);
}

/* --- Zahlen: rechtsbündig, Mono-Font, 0,00 € gedimmt --- */

.contract-amount {
    font-family: var(--lb-font-mono);
    font-size: 13px;
    color: var(--lb-text-primary);
}

.contract-amount--zero {
    color: var(--lb-text-faint);
}

/* --- Gruppen-Karten (Ansicht: Kategorie/Turnus/Anbieter) ---
   --contract-cat-accent wird inline auf .contract-category-card__head gesetzt (Kategorie-
   Ansicht, Zuordnung nach Stichwort siehe list.html.twig); ohne Zuordnung bzw. in
   Turnus-/Anbieter-Ansicht bleibt die Custom-Property unbelegt und der zweite var()-Parameter
   (neutraler Fallback) greift automatisch. */

.contract-category-card {
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-xl);
    overflow: hidden;
}

.contract-category-card + .contract-category-card {
    margin-top: 20px;
}

.contract-category-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--lb-bg-app);
    border-bottom: 1px solid var(--lb-border);
    border-left: 4px solid var(--contract-cat-accent, var(--lb-border-strong));
    flex-wrap: wrap;
    row-gap: 6px;
}

.contract-category-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex-shrink: 0;
    color: var(--contract-cat-accent, var(--lb-text-muted));
    background: rgba(var(--contract-cat-accent-rgb, 100, 100, 100), .14);
}

.contract-category-card__icon svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contract-category-card__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--lb-text-primary);
}

.contract-category-card__count {
    margin-left: 2px;
}

.contract-category-card__subtotal {
    margin-left: auto;
    font-family: var(--lb-font-mono);
    font-size: 13px;
    color: var(--lb-text-secondary);
    white-space: nowrap;
}

.contract-category-card__subtotal--zero {
    color: var(--lb-text-faint);
}

.contract-category-card__table-wrap {
    overflow-x: auto;
    padding: 4px 20px 4px;
}

.contract-category-card__table-wrap .lb-table {
    min-width: 640px;
}

@media (max-width: 767px) {
    .contract-category-card__table-wrap {
        padding: 4px 14px;
    }
}