/* RUESS Hub 2.77.0 - Fuhrpark-Umbau (Plan-Fuhrpark-2.77-03-11.md) */

/* Tagesdispo: Suche in den Auswahlfenstern */
.fleet-picker-search { width: 100%; height: 38px; margin: 0 0 10px; padding: 0 12px; border: 1px solid var(--border, #d6dbe3); border-radius: 8px; font: inherit; }
.fleet-picker-option[hidden], .fleet-picker-list[hidden], .fleet-picker h3[hidden] { display: none !important; }

/* Fahrzeuge: schmale Filterleiste statt grosser Kacheln (Typ + E-Fahrzeuge + Kostenstelle in einer Zeile, Status darunter als Pillen) */
#fleetView .fleet-vehicle-filterbar,
#fleetView #fleetVehStatusKpis .fleet-vehicle-kpis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
#fleetView .fleet-vehicle-filterbar::before,
#fleetView #fleetVehStatusKpis::before { display: none; content: none; }
#fleetView #fleetVehStatusKpis { margin-bottom: 10px; }
#fleetView .fleet-vehicle-kpi { flex-direction: row; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 14px; border-radius: 999px; }
#fleetView .fleet-vehicle-kpi::before { width: 3px; }
#fleetView .fleet-vehicle-kpi strong { font-size: 14px; line-height: 1; }
#fleetView .fleet-vehicle-kpi span { font-size: 12.5px; }
#fleetView .fleet-kst-filter { position: relative; }
#fleetView .fleet-kst-filter summary { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; }
#fleetView .fleet-kst-filter .fleet-kst-panel { position: absolute; z-index: 20; min-width: 240px; margin-top: 4px; padding: 10px; border: 1px solid var(--fl-line, #d6dbe3); border-radius: 10px; background: var(--fl-card, #fff); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
/* Gruppen zum Auf-/Zuklappen */
#fleetView details.fleet-vehicle-block > summary.fleet-vehicle-block-title { cursor: pointer; list-style: none; user-select: none; }
#fleetView details.fleet-vehicle-block > summary.fleet-vehicle-block-title::-webkit-details-marker { display: none; }
#fleetView details.fleet-vehicle-block > summary.fleet-vehicle-block-title::before { content: "▸"; display: inline-block; width: 1em; transition: transform .15s ease; }
#fleetView details.fleet-vehicle-block[open] > summary.fleet-vehicle-block-title::before { transform: rotate(90deg); }
#fleetView details.fleet-vehicle-block:not([open]) { margin-bottom: 6px; }

/* 2.77.0 Etappe 2: Tankkarten im Fahrzeugformular */
.fleet-tankkarten { grid-column: 1 / -1; border: 1px solid var(--border, #d8dee6); border-radius: 8px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 6px; }
.fleet-tankkarten legend { font-weight: 600; padding: 0 4px; }
.fleet-tankkarte { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, 2fr); gap: 10px; align-items: center; }
.fleet-tankkarte label { display: flex; align-items: center; gap: 8px; margin: 0; }
.fleet-tankkarte input[type="text"]:disabled { opacity: .5; }
.fleet-tankkarten small { color: var(--muted, #667085); }

/* 2.77.0 Etappe 2: Bereich Einstellungen mit Listen */
.fleet-einstellungen .fleet-form { max-width: 720px; }
.fleet-listen { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; margin-top: 12px; }
.fleet-liste-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.fleet-liste-tabelle th, .fleet-liste-tabelle td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border, #e4e7ec); vertical-align: middle; }
.fleet-liste-tabelle tr.is-inaktiv td { color: var(--muted, #98a2b3); text-decoration: line-through; }
.fleet-liste-tabelle tr.is-inaktiv td:last-child { text-decoration: none; }
.fleet-liste-aktionen { white-space: nowrap; text-align: right; }
.fleet-liste-aktionen button { padding: 2px 8px; font-size: 12px; margin-left: 4px; }
.fleet-liste-neu { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.fleet-liste-neu input { flex: 1 1 120px; min-width: 0; }
@media (max-width: 600px) { .fleet-listen { grid-template-columns: 1fr; } .fleet-tankkarte { grid-template-columns: 1fr; } }
/* 2.77.0 Etappe 2: Feinschliff nach Sichtpruefung im Test-Hub (Knoepfe in den Listen-Kacheln, Kopf der Warnfristen) */
.fleet-listen { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
.fleet-liste { overflow-x: auto; }
.fleet-liste-tabelle td { overflow-wrap: anywhere; }
.fleet-liste-aktionen button { padding: 2px 6px; margin-left: 2px; }
.fleet-einstellungen .fleet-section-heading { margin-bottom: 12px; }
.fleet-einstellungen .fleet-form > .fleet-einstellungen-neu, .fleet-einstellungen .fleet-form > .fleet-record-note, .fleet-einstellungen .fleet-form > .fleet-form-actions { grid-column: 1 / -1; }
@media (max-width: 600px) { .fleet-listen { grid-template-columns: 1fr; } }
.fleet-damage-number { font-weight: 700; letter-spacing: .02em; } /* 2.77.0 Etappe 3: Schaden-Nummer */
#fleetRecordModal tr.fleet-fuel-withdrawal td { color: var(--danger, #c0392b); font-weight: 600; border-top: 0; } /* 2.77.0 Etappe 4: Entnahme fuer ein Geraet */
/* 2.77.0 Etappe 5: Fahrer/Nutzer per Suchliste zuordnen */
#fleetPersonEditor .fleet-person-list { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
#fleetPersonEditor .fleet-person-option { display: flex; justify-content: space-between; gap: 8px; text-align: left; padding: 6px 10px; background: var(--surface, #fff); color: inherit; border: 1px solid var(--border, #e4e7ec); }
#fleetPersonEditor .fleet-person-option.active { border-color: var(--accent, #8ab51e); font-weight: 600; }
#fleetPersonEditor .fleet-person-option small { color: var(--muted, #667085); }
.fleet-erinnerungen input[data-feld="stufen"] { width: 9em; } .fleet-erinnerungen input[data-feld="empfaenger"] { width: 100%; } /* 2.77.0 Etappe 5: Erinnerungen je Frist-Art */

/* 2.77.0 Nacharbeit: Termin-Feld nur bei HU/SP (hidden wirkt sonst nicht auf label), Spruenge Schaden <-> Wartung */
#fleetRecordModal [hidden] { display: none !important; }
#fleetRecordModal .fleet-damage-links { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; margin: 4px 0; }
#fleetRecordModal .fleet-damage-links > span { color: var(--muted, #667085); }
#fleetRecordModal .fleet-damage-jump { display: block; font-size: 12px; padding: 0; }
#fleetRecordModal .fleet-sprung { outline: 3px solid var(--accent, #8ab51e); outline-offset: 2px; transition: outline-color .4s; }

/* 2.77.0 Nacharbeit: Einstellungsseite als Karten ueber die volle Breite */
#fleetView .fleet-settings-page { display: grid; gap: 14px; }
#fleetView .fleet-settings-form { display: grid; gap: 14px; }
#fleetView .fleet-settings-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
#fleetView .fleet-settings-head span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #667085); }
#fleetView .fleet-settings-head h2 { margin: 2px 0; }
#fleetView .fleet-settings-head p, #fleetView .fleet-settings-card-head p, #fleetView .fleet-settings-section-title p { margin: 2px 0 0; color: var(--muted, #667085); font-size: 13px; }
#fleetView .fleet-settings-card { padding: 16px 18px; display: grid; gap: 12px; }
#fleetView .fleet-settings-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#fleetView .fleet-settings-card-head h3, #fleetView .fleet-settings-section-title h3 { margin: 0; font-size: 15px; }
#fleetView .fleet-settings-section-title { margin-top: 6px; }
#fleetView .fleet-settings-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }
#fleetView .fleet-settings-field { display: grid; gap: 4px; margin: 0; font-size: 13px; }
#fleetView .fleet-settings-field > span { font-weight: 600; }
#fleetView .fleet-settings-wide { max-width: 640px; }
#fleetView .fleet-settings-span2 { grid-column: span 2; }
#fleetView .fleet-settings-unit { display: flex; align-items: center; gap: 6px; }
#fleetView .fleet-settings-unit input { flex: 1 1 auto; min-width: 0; }
#fleetView .fleet-settings-unit em { font-style: normal; font-size: 12px; color: var(--muted, #667085); white-space: nowrap; }
#fleetView .fleet-settings-actions { display: flex; justify-content: flex-end; }
#fleetView .fleet-erinnerungen { display: grid; border: 1px solid var(--border, #e4e7ec); border-radius: 10px; overflow: hidden; }
#fleetView .fleet-reminder-row { display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(200px, 1fr) minmax(240px, 1.6fr); gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border, #e4e7ec); }
#fleetView .fleet-reminder-row:first-child { border-top: 0; }
#fleetView .fleet-reminder-header { background: var(--surface-muted, rgba(0,0,0,.03)); font-size: 12px; font-weight: 700; color: var(--muted, #667085); }
#fleetView .fleet-reminder-name { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; white-space: nowrap; }
#fleetView .fleet-reminder-row:has(input[data-feld="aktiv"]:not(:checked)) > :not(.fleet-reminder-name) { opacity: .45; }
#fleetView .fleet-listen { margin-top: 0; }
@media (max-width: 900px) {
  #fleetView .fleet-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #fleetView .fleet-reminder-row { grid-template-columns: 1fr; gap: 6px; }
  #fleetView .fleet-reminder-header { display: none; }
}

/* 2.77.0 Nacharbeit: Kopf der Fahrzeugliste - eine Karte, Werkzeugzeile + schmale Filterzeile (Typ | Status) */
#fleetView .fleet-vehicle-head { display: grid; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--fl-line, #e2e7e5); border-radius: 12px; background: var(--fl-card, #fff); }
#fleetView .fleet-vehicle-head .fleet-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
#fleetView .fleet-vehicle-head .fleet-toolbar-search { flex: 1 1 320px; min-width: 220px; }
#fleetView .fleet-vehicle-head .fleet-toolbar-search input { height: 36px; }
#fleetView .fleet-vehicle-head .fleet-head-select select { height: 36px; min-width: 150px; }
#fleetView .fleet-vehicle-head .fleet-kst-filter { flex: 0 0 auto; align-self: center; }
#fleetView .fleet-vehicle-head .fleet-kst-filter > summary { height: 36px; min-height: 0; padding: 0 14px; border-radius: 8px; font-size: 13px; }
#fleetView .fleet-vehicle-head .fleet-toolbar-actions { margin-left: auto; display: flex; gap: 8px; }
#fleetView .fleet-vehicle-head .fleet-toolbar-actions button { height: 36px; }
#fleetView .fleet-filter-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 10px; border-top: 1px solid var(--fl-line, #eef1f0); }
#fleetView .fleet-filter-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #667085); }
#fleetView .fleet-filter-sep { width: 1px; height: 22px; margin: 0 6px; background: var(--fl-line, #dfe5e3); }
#fleetView .fleet-filter-strip .fleet-vehicle-kpis, #fleetView .fleet-filter-strip #fleetVehStatusKpis .fleet-vehicle-kpis { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
#fleetView .fleet-filter-strip #fleetVehStatusKpis { margin: 0; }
#fleetView .fleet-filter-strip .fleet-vehicle-kpi { height: 28px; padding: 0 4px 0 10px; gap: 6px; border: 1px solid var(--fl-line, #dfe5e3); border-radius: 999px; background: transparent; box-shadow: none; }
#fleetView .fleet-filter-strip .fleet-vehicle-kpi::before { display: none; }
#fleetView .fleet-filter-strip .fleet-vehicle-kpi span { order: 1; font-size: 12.5px; font-weight: 500; }
#fleetView .fleet-filter-strip .fleet-vehicle-kpi strong { order: 2; min-width: 22px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 11.5px; background: var(--fl-soft, #f1f4f3); }
#fleetView .fleet-filter-strip .fleet-vehicle-kpi.warning strong { background: #fff1d6; color: #8a5a00; }
#fleetView .fleet-filter-strip .fleet-vehicle-kpi.danger strong { background: #fde3e1; color: #a1271b; }
#fleetView .fleet-filter-strip .fleet-vehicle-kpi.success strong { background: #e6f4dc; color: #3f6b12; }
#fleetView .fleet-filter-strip .fleet-vehicle-kpi:hover { border-color: var(--accent, #9bbd16); }
#fleetView .fleet-filter-strip .fleet-vehicle-kpi.active { border-color: var(--accent, #9bbd16); background: var(--accent, #9bbd16); color: #fff; }
#fleetView .fleet-filter-strip .fleet-vehicle-kpi.active strong { background: rgba(255,255,255,.25); color: #fff; }
@media (max-width: 760px) { #fleetView .fleet-filter-sep { display: none; } #fleetView .fleet-vehicle-head .fleet-toolbar-actions { margin-left: 0; } }