/* Carenti Gruen: Tokens laut docs/design/DESIGN-RICHTLINIEN.md. Keine freien Hex-Werte ausserhalb dieser Datei. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/InterVariable.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/InterVariable-Italic.woff2') format('woff2'); }

:root {
    --cp-primary-900: #0B2F26;
    --cp-primary-850: #124132;
    --cp-primary-800: #14533E;
    --cp-primary-750: #0F4634;
    --cp-primary-700: #1B6B50;
    --cp-primary-600: #2E8B68;
    --cp-primary-100: #DDF3E9;
    --cp-primary-050: #EDF8F2;
    --cp-bg-app: #F3F7F4;
    --cp-bg-workspace: #EEF4F0;
    --cp-surface: #FFFFFF;
    --cp-surface-soft: #F8FBF9;
    --cp-chip: #F2F6F4;
    --cp-border: #DCE5DF;
    --cp-border-soft: #E8EFEB;
    --cp-row-border: #EDF2EF;
    --cp-text: #102331;
    --cp-text-secondary: #607180;
    --cp-text-muted: #6B7680;
    --cp-text-disabled: #8A98A5;
    --cp-text-inverse: #FFFFFF;
    --cp-text-on-soft: #176447;
    --cp-count-active: #BFE9D4;
    --cp-sidebar-text: #EAF3EE;
    --cp-sidebar-label: #8FB2A4;
    --cp-sidebar-hover: #143E31;
    --cp-sidebar-active: #1A4E3D;
    --cp-sidebar-divider: rgba(255, 255, 255, .10);
    --cp-ok-bg: #DDF5E8; --cp-ok-dot: #1D8A5B; --cp-ok-text: #197A50;
    --cp-info-bg: #E8EEFF; --cp-info-dot: #2559E6; --cp-info-text: #2559E6;
    --cp-warn-bg: #FBE9C9; --cp-warn-dot: #B87400; --cp-warn-text: #935C00;
    --cp-danger-bg: #F8DEDE; --cp-danger-dot: #BE3E3E; --cp-danger-text: #B23A3A;
    --cp-radius-card: 20px;
    --cp-radius-control: 12px;
    --cp-radius-item: 14px;
    --cp-shadow-card: 0 8px 24px rgba(16, 35, 49, .06);
    --cp-shadow-pop: 0 20px 48px rgba(16, 35, 49, .16);
    --cp-focus: 0 0 0 3px rgba(46, 139, 104, .15);
    --cp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cp-ease-out: cubic-bezier(.23, 1, .32, 1);
}

html { font-family: var(--cp-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { color: var(--cp-text); }
::placeholder { color: var(--cp-text-muted); opacity: 1; }
:where(input, select, textarea):focus-visible { outline: none; border-color: var(--cp-primary-600); box-shadow: var(--cp-focus); }
:where(button, a, [role="tab"]):focus-visible { outline: 3px solid rgba(46, 139, 104, .45); outline-offset: 2px; }

/* Buttons und Felder fuer Tailwind-Seiten (ersetzen lange Klassenketten in Seitenkoepfen). */
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-control); background: var(--cp-surface); color: var(--cp-text); font: 600 15px/1 var(--cp-font); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, transform .12s ease-out; }
.cp-btn:hover { background: var(--cp-primary-050); }
.cp-btn:active { transform: scale(.98); }
.cp-btn--primary { background: var(--cp-primary-800); border-color: var(--cp-primary-800); color: var(--cp-text-inverse); box-shadow: 0 6px 16px rgba(20, 83, 62, .22); }
.cp-btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
@media (pointer: coarse) { .cp-btn--sm { min-height: 44px; } }
.cp-btn--primary:hover { background: var(--cp-primary-750); border-color: var(--cp-primary-750); }
.cp-icon { flex: none; width: 18px; height: 18px; }
/* :is(input,select,textarea) hebt die Spezifitaet ueber Tailwind-Utilities wie lg:min-h-0, die sonst die Hoehe auf Desktop kollabieren lassen. */
.cp-field:is(input, select, textarea) { min-height: 48px; }
.cp-field { min-height: 48px; padding: 0 14px; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-control); background: var(--cp-surface); color: var(--cp-text); font: 400 15px/1.2 var(--cp-font); }
select.cp-field { appearance: none; padding-right: 36px; background: var(--cp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23102331' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center; }
.cp-field--suche { padding-left: 36px; }
@media (pointer: coarse) { .cp-field { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .cp-btn { transition: none; } .cp-btn:active { transform: none; } }

/* Sidebar und mobile Kopfleiste (dunkelgruener Verlauf, siehe DESIGN-RICHTLINIEN.md Abschnitt Sidebar). */
.cp-sidebar { background: linear-gradient(180deg, var(--cp-primary-900), var(--cp-primary-850)); color: var(--cp-sidebar-text); }
.cp-topbar { background-color: var(--cp-primary-900); color: var(--cp-sidebar-text); }
.cp-firmenlogo { display: flex; align-items: center; justify-content: center; background: var(--cp-surface); border-radius: var(--cp-radius-item); padding: 10px; }
.cp-firmenlogo img { max-height: 44px; max-width: 130px; object-fit: contain; }
.cp-brandkarte { display: flex; justify-content: center; background: linear-gradient(135deg, var(--cp-primary-850), var(--cp-primary-900)); border-radius: 16px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.cp-brandkarte img { width: 120px; object-fit: contain; }
/* Schmale, zur Sidebar passende Scrollleiste statt grauer System-Leiste mit Pfeilen. */
.cp-sidebar nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.cp-sidebar nav::-webkit-scrollbar { width: 6px; }
.cp-sidebar nav::-webkit-scrollbar-track { background: transparent; }
.cp-sidebar nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
.cp-sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .30); }
.cp-sidebar nav::-webkit-scrollbar-button { display: none; height: 0; }
.cp-nav-link, .cp-nav-gruppe { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: var(--cp-radius-item); background: transparent; color: var(--cp-sidebar-text); font: inherit; font-size: .875rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s ease-out; }
.cp-nav-link:hover, .cp-nav-gruppe:hover { background: var(--cp-sidebar-hover); }
.cp-nav-link[aria-current="page"] { background: var(--cp-sidebar-active); color: var(--cp-text-inverse); }
.cp-nav-gruppe-label { flex: 1; min-width: 0; }
.cp-nav-chevron { opacity: .7; transition: transform .2s ease-out; }
.cp-nav-group.is-open > .cp-nav-gruppe .cp-nav-chevron { transform: rotate(180deg); }
/* Untermenue: Hoehe per grid-rows animiert, geschlossen unsichtbar (kein Tab-Fokus). */
.cp-nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease-out; }
.cp-nav-group.is-open > .cp-nav-sub { grid-template-rows: 1fr; }
.cp-nav-sub-inner { min-height: 0; overflow: hidden; visibility: hidden; margin-left: 22px; padding-left: 8px; border-left: 1px solid var(--cp-sidebar-divider); transition: visibility 0s linear .2s; }
.cp-nav-group.is-open > .cp-nav-sub > .cp-nav-sub-inner { visibility: visible; transition-delay: 0s; }
.cp-nav-link--sub { min-height: 36px; font-weight: 400; opacity: .9; }
.cp-nav-link--sub svg { display: none; }
.cp-nav-link--sub[aria-current="page"] { opacity: 1; font-weight: 500; }
@media (pointer: coarse) { .cp-nav-link, .cp-nav-gruppe { min-height: 44px; } .cp-nav-link--sub { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .cp-nav-sub, .cp-nav-chevron, .cp-nav-sub-inner { transition: none; } }
/* Eingeklappte Sidebar (nur Icons): Gruppenknoepfe weg, alle Unterpunkte als Icons untereinander. */
.sidebar-collapsed .cp-nav-gruppe { display: none; }
.sidebar-collapsed .cp-nav-sub { grid-template-rows: 1fr; }
.sidebar-collapsed .cp-nav-sub-inner { visibility: visible; margin-left: 0; padding-left: 0; border-left: 0; }
.sidebar-collapsed .cp-nav-link--sub { min-height: 42px; opacity: 1; }
.sidebar-collapsed .cp-nav-link--sub svg { display: block; }
.cp-nav-divider { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--cp-sidebar-divider); }

/* Seitenkopf der Modulseiten: weisse Karte auf canvas (Referenz: Fahrzeugverwaltung). */
.cp-page-head { margin: 16px 16px 0; padding: 16px 20px; background: var(--cp-surface); border: 1px solid var(--cp-border-soft); border-radius: var(--cp-radius-card); box-shadow: var(--cp-shadow-card); }
.cp-page-title { color: var(--cp-text); font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.cp-page-sub { margin-top: 4px; color: var(--cp-text-secondary); font-size: 14px; }
.cp-page-count { margin-left: 10px; color: var(--cp-text-on-soft); font-weight: 600; }
@media (min-width: 768px) { .cp-page-head { margin: 20px 20px 0; padding: 20px 24px; } .cp-page-title { font-size: 26px; } }
@media (min-width: 1280px) { .cp-page-head { margin: 24px 24px 0; } .cp-page-title { font-size: 28px; } }

/* Bereichs-Umschalter (Segment wie Finanzen) statt randloser weisser Unterstrich-Leiste.
   Aktiver Zustand ueber aria-selected, die Seiten setzen nur noch dieses Attribut. */
.cp-tabbar { flex-shrink: 0; margin: 16px 16px 0; }
@media (min-width: 768px) { .cp-tabbar { margin: 20px 20px 0; } }
@media (min-width: 1280px) { .cp-tabbar { margin: 20px 24px 0; } }
.cp-seg { display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; overflow-x: auto; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-item); box-shadow: 0 1px 2px rgba(16, 35, 49, .04); scrollbar-width: none; }
.cp-seg::-webkit-scrollbar { display: none; }
.cp-seg-btn { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--cp-text-secondary); font: 600 14px/1 var(--cp-font); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.cp-seg-btn:hover { background: var(--cp-primary-050); color: var(--cp-text); }
.cp-seg-btn[aria-selected="true"] { background: var(--cp-primary-800); color: var(--cp-text-inverse); }
@media (pointer: coarse) { .cp-seg-btn { min-height: 44px; } }
/* Mit Maus gibt es kein Wischen: bei vielen Bereichen (Einstellungen) umbrechen statt versteckt scrollen.
   Auf Touch bleibt die Leiste wischbar; ein Verlauf am Rand zeigt, dass es weitergeht. */
@media (hover: hover) and (pointer: fine) { .cp-seg { flex-wrap: wrap; overflow-x: visible; } }
@media (pointer: coarse) { .cp-seg { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .cp-seg.cp-seg--am-ende, .cp-seg:not(.cp-seg--scrollt) { -webkit-mask-image: none; mask-image: none; } }
@media (prefers-reduced-motion: reduce) { .cp-seg-btn { transition: none; } }

/* Tabellenzeile als Karte auf schmalen Breiten (Dokumente, Zahlungen, Reifenlager).
   Rollen je <td>: kz-titel (oben links), kz-aktion (oben rechts), kz-sub (Unterzeile),
   kz-chips (Badges in einer Reihe), kz-meta (Label + Wert), kz-betrag / kz-status (Fusszeile).
   .kz-l sind die Feld-Labels der Tabellenzellen, in der Karte nur bei kz-meta sichtbar.
   cp-kz gilt unter 768 px (Seiten mit md-Tabelle), cp-kz--bis-lg zusaetzlich bis 1023 px. */
@media (max-width: 767.98px) {
  tr.cp-kz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 6px; padding: 14px 16px; }
  tr.cp-kz > td { display: block; min-width: 0; padding: 0; border: 0; grid-column: 1 / -1; }
  tr.cp-kz > td:not(.kz-meta) > .kz-l { display: none; }
  tr.cp-kz > td.kz-titel { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 700; color: var(--cp-text); }
  tr.cp-kz > td.kz-aktion { grid-column: 2; grid-row: 1; justify-self: end; }
  tr.cp-kz > td.kz-sub { font-size: 15px; font-weight: 500; color: var(--cp-text); overflow-wrap: anywhere; }
  tr.cp-kz > td.kz-chips { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  tr.cp-kz > td.kz-meta { display: flex; justify-content: flex-start; align-items: baseline; gap: 12px; font-size: 14px; color: var(--cp-text-secondary); overflow-wrap: anywhere; }
  tr.cp-kz > td.kz-meta > .kz-l { flex: none; width: 72px; font-size: 12px; }
  tr.cp-kz > td.kz-betrag { grid-column: 1; margin-top: 4px; font-size: 17px; font-weight: 700; color: var(--cp-text); }
  tr.cp-kz > td.kz-status { grid-column: 2; margin-top: 4px; justify-self: end; }
  tr.cp-kz > td.kz-status--links { grid-column: 1 / -1; justify-self: start; }
  tr.cp-kz > td.kz-leer { display: none; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  tr.cp-kz--bis-lg { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 6px; padding: 14px 16px; }
  tr.cp-kz--bis-lg > td { display: block; min-width: 0; padding: 0; border: 0; grid-column: 1 / -1; }
  tr.cp-kz--bis-lg > td:not(.kz-meta) > .kz-l { display: none; }
  tr.cp-kz--bis-lg > td.kz-titel { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 700; color: var(--cp-text); }
  tr.cp-kz--bis-lg > td.kz-aktion { grid-column: 2; grid-row: 1; justify-self: end; }
  tr.cp-kz--bis-lg > td.kz-sub { font-size: 15px; font-weight: 500; color: var(--cp-text); overflow-wrap: anywhere; }
  tr.cp-kz--bis-lg > td.kz-meta { display: flex; justify-content: flex-start; align-items: baseline; gap: 12px; font-size: 14px; color: var(--cp-text-secondary); overflow-wrap: anywhere; }
  tr.cp-kz--bis-lg > td.kz-meta > .kz-l { flex: none; width: 72px; font-size: 12px; }
  tr.cp-kz--bis-lg > td.kz-status--links { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
}

/* Datum/Uhrzeit auf iOS: Safari gibt diesen Feldern eine feste Mindestbreite und graue
   Systemoptik, in einem zweispaltigen Grid laufen sie dadurch ineinander. */
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; }
/* :where ohne Spezifitaet, damit Tailwind-Klassen wie bg-transparent weiter gewinnen. */
:where(input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])) { display: block; background-color: var(--cp-surface); color: var(--cp-text); }
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
@media (pointer: coarse) { :where(input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])) { min-height: 44px; font-size: 16px; } }
.grid > * { min-width: 0; }

/* Seitenkopf-Aktionen auf dem Handy kompakter; "Aktualisieren" nur als Icon. */
@media (max-width: 639.98px) {
  .cp-page-head .cp-btn { min-height: 40px; padding: 0 14px; gap: 6px; font-size: 14px; box-shadow: none; }
  .cp-page-head .cp-btn .cp-icon { width: 16px; height: 16px; }
  .cp-page-head .cp-btn:has(> .cp-btn-text) { width: 40px; padding: 0; }
  .cp-page-head .cp-btn > .cp-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Handy: Menue klappt unter der Kopfleiste auf (volle Breite) statt als Schublade von links.
   Logo-Block und Carenti-Karte entfallen dort, das Firmenlogo steht schon in der Kopfleiste. */
@media (max-width: 767.98px) {
  #navAside.cp-nav-dropdown { position: fixed; top: var(--cp-nav-top, 56px); bottom: auto; left: 0; right: 0; width: auto !important; max-width: none; max-height: calc(100dvh - var(--cp-nav-top, 56px)); border-radius: 0 0 var(--cp-radius-card) var(--cp-radius-card); box-shadow: var(--cp-shadow-pop); animation: cp-nav-auf .2s var(--cp-ease-out); }
  #navAside.cp-nav-dropdown > div:first-child, #navAside.cp-nav-dropdown > div:last-child { display: none; }
  #navAside.cp-nav-dropdown > nav { padding: 4px 12px 16px; overscroll-behavior: contain; }
  #navBackdrop.cp-nav-dropdown-bg { top: var(--cp-nav-top, 56px); }
}
@keyframes cp-nav-auf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #navAside.cp-nav-dropdown { animation: none; } }

/* Automatische Kartenzeile (bis 1023 px) fuer Tabellen mit Label-Spans je Zelle:
   erste Zelle = Titel, letzte Zelle mit Aktionsmenue = oben rechts, Rest = Label + Wert. */
@media (max-width: 1023.98px) {
  tr.cp-kz-auto { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 8px; padding: 14px 16px; }
  tr.cp-kz-auto > td { display: flex; justify-content: flex-start; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; grid-column: 1 / -1; font-size: 14px; color: var(--cp-text); overflow-wrap: anywhere; }
  tr.cp-kz-auto > td > span.text-xs:first-child { flex: none; width: 84px; font-size: 12px; font-weight: 400; color: var(--cp-text-muted); }
  tr.cp-kz-auto > td:first-child { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 700; }
  tr.cp-kz-auto > td:first-child > span.text-xs:first-child { display: none; }
  tr.cp-kz-auto > td.kz-leer { display: none; }
  tr.cp-kz-auto > td:last-child:has(.aktions-dropdown, [aria-haspopup="menu"]) { grid-column: 2; grid-row: 1; justify-content: flex-end; }
}
/* Handy: Seitenkopf-Aktionen fuellen die Zeile, statt einzeln umzubrechen. */
@media (max-width: 639.98px) {
  .cp-page-head .cp-btn { padding: 0 12px; }
  .cp-page-head .cp-btn--primary { flex: 1 1 auto; }
  .cp-page-head .flex-wrap.gap-3 { gap: 8px; }
}

/* Menue-Knopf der mobilen Kopfleiste: volles Touch-Ziel (44 px), Icon 22 px. */
.cp-menue-knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--cp-radius-control); }
.cp-menue-knopf:active { background: rgba(255, 255, 255, .08); }
.cp-menue-knopf svg { width: 22px; height: 22px; }

/* Niedrige Laptop-Bildschirme (z. B. 1366x768): Sidebar dichter, damit mehr Menuepunkte ohne Scrollen sichtbar sind. */
@media (min-width: 1024px) and (max-height: 900px) {
  #navAside > div:first-child { height: 72px; padding-top: 12px; padding-bottom: 12px; }
  .cp-nav-link, .cp-nav-gruppe { min-height: 38px; }
  .cp-nav-link--sub { min-height: 34px; }
  .cp-brandkarte { padding: 10px; }
  .cp-brandkarte img { width: 96px; }
}

/* KPI-Kacheln (Dashboard): Betrag bleibt einzeilig und passt die Schriftgroesse an die
   Kachelbreite an (Container-Query), statt "€" in eine zweite Zeile zu schieben. */
.cp-kpi { container-type: inline-size; }
.cp-kpi-wert { font-size: 20px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
@supports (font-size: 1cqi) { .cp-kpi-wert { font-size: clamp(16px, 12cqi, 30px); } }