/* ════════════════════════════════════════════════════════════════════
   MEWA Entreprise — gemeinsamer Look (Markenfarbe #0072A3,
   Karten-Layout wie die Fahrer-App). Wird von BEIDEN Hosts geladen:
   _content/QuickWaka.Entreprise.UI/ent.css
   ════════════════════════════════════════════════════════════════════ */

:root {
    --mewa: #0072A3;
    --mewa-2: #40E0D0;
    --mewa-yellow: #FCD116;
    --ink: #1a1a1a;
    --bg-light: #F2F5F7;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: "DM Sans", "Segoe UI", Roboto, sans-serif;
    background: var(--ink);
}

#app { height: 100%; }

/* ── Auth-Seiten: Verlauf + weiße Karte (Muster LoginPage Fahrer-App) ── */
.ent-page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #0072A3, #1a1a1a);
}

.ent-hero { padding: 44px 24px 26px; text-align: center; }

/* Wortzeichen als Text: weißes „MEW" + gelbes „A" — bewusst KEIN Emoji,
   Kodierungsunfälle können Text nicht zerlegen. */
.ent-wordmark { font-size: 34px; font-weight: 800; letter-spacing: 2px; color: #fff; }
.ent-wordmark .a { color: var(--mewa-yellow); }

.ent-hero-role {
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82);
    text-transform: uppercase; letter-spacing: 2.5px; margin-top: 4px;
}
.ent-hero-sub { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 6px; }

.ent-lang { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.ent-lang button {
    background: rgba(255,255,255,.12); border: none; color: rgba(255,255,255,.75);
    font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 8px;
    cursor: pointer; font-family: inherit;
}
.ent-lang button.on { background: #fff; color: var(--mewa); }

.ent-card {
    flex: 1;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 28px 20px 36px;
    display: flex; flex-direction: column; gap: 14px;
}

/* Kopf INNERHALB der weißen Karte: echtes Logo (blauer Chevron auf Weiß),
   darunter „Entreprise" und der Untertitel. Löst das alte Verlauf-Wortzeichen
   der Auth-Seiten ab (Login/Activate/Register/Reset). */
.ent-card-head {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; text-align: center; margin-bottom: 6px;
}
.ent-card-role {
    font-size: 13px; font-weight: 600; color: var(--mewa);
    text-transform: uppercase; letter-spacing: 2.5px; margin-top: 10px;
}
.ent-card-sub { font-size: 13px; color: #7A8894; margin-top: 2px; }

.ent-field { display: flex; flex-direction: column; gap: 5px; }
.ent-lbl {
    font-size: 11px; font-weight: 700; color: #111;
    text-transform: uppercase; letter-spacing: .5px;
}
.ent-sub-lbl { font-size: 11px; color: #999; margin-top: -3px; }

.ent-input {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid #E0E0E0; border-radius: 12px;
    background: #F8F8F8; font-size: 15px; outline: none;
    font-family: inherit;
}
.ent-input:focus { border-color: var(--mewa); }

/* Telefon mit +237-Präfix + gezeichneter Kamerun-Flagge */
.ent-phone-wrap {
    display: flex; align-items: center;
    border: 1.5px solid #E0E0E0; border-radius: 12px;
    overflow: hidden; background: #F8F8F8;
}
.ent-phone-prefix {
    padding: 12px 10px; font-size: 13px; color: #333;
    border-right: 1px solid #E0E0E0; white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
}
.ent-flag-cm { width: 20px; height: 14px; border-radius: 2px; flex: none; display: block; }
.ent-phone-input {
    flex: 1; padding: 12px; border: none; background: transparent;
    font-size: 15px; font-family: inherit; outline: none; min-width: 0;
}

.ent-btn {
    width: 100%; padding: 14px; border-radius: 13px;
    background: linear-gradient(135deg, #0072A3, #40E0D0);
    color: #fff; font-size: 14px; font-weight: 600;
    border: none; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 6px;
}
.ent-btn.btn-disabled { opacity: .45; pointer-events: none; }

.ent-btn-line {
    background: none; border: none; color: var(--mewa);
    font-size: 13px; font-weight: 600; cursor: pointer; text-align: center;
    font-family: inherit; padding: 8px;
}
/* Textknöpfe trugen btn-disabled schon im Markup, aber es gab dazu keine
   Regel — ein „laufender" Knopf blieb voll anklickbar und der zweite Klick
   feuerte denselben Aufruf ein weiteres Mal. */
.ent-btn-line.btn-disabled { opacity: .45; pointer-events: none; }

/* Entfernen ist endgültig: rot, damit er sich vom Rest abhebt. */
.ent-btn-danger { color: #A32D2D; }
.ent-btn.ent-btn-danger {
    background: linear-gradient(135deg, #C0392B, #E74C3C); color: #fff;
}

.ent-error {
    padding: 10px 12px; background: #FCEBEB; border-radius: 9px;
    font-size: 12px; color: #A32D2D;
    display: flex; align-items: flex-start; gap: 8px;
}
.ent-error .ico { width: 15px; height: 15px; flex: none; margin-top: 1px; }

.ent-ok {
    padding: 10px 12px; background: #E8F6EE; border-radius: 9px;
    font-size: 12px; color: #1F7A44;
}

.ent-links { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }

/* ── Innere Seiten: farbige Leiste + helle Fläche ── */
.ent-page-light {
    min-height: 100%; display: flex; flex-direction: column;
    background: var(--bg-light);
}
.ent-appbar {
    background: var(--mewa); color: #fff;
    padding: 16px; padding-top: calc(16px + env(safe-area-inset-top));
    display: flex; align-items: center; gap: 12px;
}
.ent-appbar-title { font-size: 17px; font-weight: 700; flex: 1; min-width: 0;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-appbar-sub { font-size: 11px; opacity: .8; }
.ent-iconbtn {
    background: rgba(255,255,255,.14); border: none; color: #fff;
    width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.ent-iconbtn svg { width: 18px; height: 18px; }

.ent-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.ent-item-card {
    background: #fff; border-radius: 16px; padding: 16px;
    box-shadow: 0 1px 4px rgba(16,42,67,.08);
    border: none; text-align: left; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; gap: 12px; width: 100%;
    box-sizing: border-box;
}
.ent-item-card.disabled { opacity: .55; cursor: default; }

.ent-avatar {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    background: #E3F0F6; color: var(--mewa);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px;
}
.ent-item-main { flex: 1; min-width: 0; }
.ent-item-title { font-size: 15px; font-weight: 700; color: #16232D;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-item-sub { font-size: 12px; color: #7A8894; margin-top: 2px; }

.ent-badge {
    font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .4px; flex: none;
}
.ent-badge.ok { background: #E8F6EE; color: #1F7A44; }
.ent-badge.warn { background: #FFF4DC; color: #9A6B00; }
.ent-badge.off { background: #F0F0F0; color: #888; }
.ent-badge.role { background: #E3F0F6; color: var(--mewa); }

/* Kachel-Raster (CompanyHome) */
.ent-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ent-tile {
    background: #fff; border-radius: 16px; padding: 18px 14px;
    box-shadow: 0 1px 4px rgba(16,42,67,.08);
    border: none; font-family: inherit; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 8px; min-height: 108px;
    box-sizing: border-box;
}
.ent-tile.soon { cursor: default; }
.ent-tile-ico {
    width: 40px; height: 40px; border-radius: 12px;
    background: #E3F0F6; color: var(--mewa);
    display: flex; align-items: center; justify-content: center;
}
.ent-tile-ico svg { width: 22px; height: 22px; }
.ent-tile-title { font-size: 14px; font-weight: 700; color: #16232D; }
.ent-tile-sub { font-size: 11px; color: #7A8894; }
.ent-chip-soon {
    align-self: flex-start;
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    background: #FFF4DC; color: #9A6B00;
}

.ent-section-title {
    font-size: 12px; font-weight: 700; color: #7A8894;
    text-transform: uppercase; letter-spacing: .8px; margin: 6px 2px 0;
}

/* ── Dialog/Sheet (Einladen, Bearbeiten, Code) ── */
.ent-overlay {
    position: fixed; inset: 0; background: rgba(10,25,35,.55);
    display: flex; align-items: flex-end; justify-content: center; z-index: 50;
}
.ent-sheet {
    background: #fff; width: 100%; max-width: 520px;
    border-radius: 20px 20px 0 0; padding: 20px 18px 30px;
    display: flex; flex-direction: column; gap: 13px;
    max-height: 88vh; overflow-y: auto; box-sizing: border-box;
}
.ent-sheet-title { font-size: 16px; font-weight: 800; color: #16232D; }

.ent-select {
    width: 100%; box-sizing: border-box; padding: 12px 14px;
    border: 1.5px solid #E0E0E0; border-radius: 12px;
    background: #F8F8F8; font-size: 15px; outline: none; font-family: inherit;
}

/* Modul-Karten-Checkboxen */
.ent-mods { display: flex; flex-direction: column; gap: 8px; }
.ent-mod {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid #E0E0E0; border-radius: 12px;
    background: #F8F8F8; padding: 12px 14px; cursor: pointer;
    font-family: inherit; text-align: left; width: 100%; box-sizing: border-box;
}
.ent-mod.on { border-color: var(--mewa); background: #EAF5FA; }
.ent-mod-box {
    width: 20px; height: 20px; border-radius: 6px; flex: none;
    border: 2px solid #C4CDD4; display: flex; align-items: center; justify-content: center;
    background: #fff;
}
.ent-mod.on .ent-mod-box { border-color: var(--mewa); background: var(--mewa); }
.ent-mod-box svg { width: 12px; height: 12px; color: #fff; }
.ent-mod-title { font-size: 14px; font-weight: 700; color: #16232D; }
.ent-mod-sub { font-size: 11px; color: #7A8894; }

/* Code-Anzeige groß */
.ent-code-big {
    font-size: 30px; font-weight: 800; letter-spacing: 6px; text-align: center;
    color: var(--mewa); background: #EAF5FA; border: 1.5px dashed var(--mewa);
    border-radius: 14px; padding: 18px 10px; user-select: all;
}
.ent-btn-wa {
    width: 100%; padding: 13px; border-radius: 13px;
    background: #25D366; color: #fff; font-size: 14px; font-weight: 700;
    border: none; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none; box-sizing: border-box;
}
.ent-btn-wa svg { width: 18px; height: 18px; }

/* PIN */
.ent-pin-input {
    width: 100%; box-sizing: border-box; padding: 14px 16px;
    border: 1.5px solid #E0E0E0; border-radius: 12px;
    font-size: 24px; text-align: center; letter-spacing: 10px;
    background: #F8F8F8; outline: none; font-family: inherit;
}
.ent-pin-input:focus { border-color: var(--mewa); }

.ent-empty { text-align: center; color: #7A8894; font-size: 13px; padding: 26px 10px; }
.ent-loading { text-align: center; color: #7A8894; font-size: 13px; padding: 30px 10px; }

.ent-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ════════════════════════════════════════════════════════════════════
   ✨ 04.08.2026 — Modul Flotte (Welle 1)
   ════════════════════════════════════════════════════════════════════ */

/* Rotes Badge (abgelaufenes Papier) — die vier Alt-Badges (ok/warn/off/
   role) decken grün/gelb/grau/blau ab, für Rot fehlte eine Regel. */
.ent-badge.bad { background: #FCEBEB; color: #A32D2D; }

/* Papier-Ampel als kleine Punktzeile je Fahrzeug (Liste). Ein Punkt je
   Papierart, gefärbt nach dem vom SERVER gelieferten Status. */
.ent-ampel { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ent-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ent-dot.ok   { background: #2F9A5E; }   /* gueltig       */
.ent-dot.warn { background: #E0A800; }   /* bald_faellig  */
.ent-dot.bad  { background: #C0392B; }   /* abgelaufen    */
.ent-dot.info { background: var(--mewa); } /* unbegrenzt   */
.ent-dot.na   { background: #C4CDD4; }   /* manquant      */
.ent-ampel-lbl { font-size: 11px; color: #7A8894; margin-left: 2px; }

/* Papierzeile im Detail (Ampel-Badge links, Aktion rechts) */
.ent-doc-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-top: 1px solid #EDF1F4;
}
.ent-doc-row:first-of-type { border-top: none; }
.ent-doc-main { flex: 1; min-width: 0; }
.ent-doc-kind { font-size: 14px; font-weight: 700; color: #16232D; }
.ent-doc-sub { font-size: 12px; color: #7A8894; margin-top: 2px; }

/* Foto (Fahrzeug im Detail, Papier im Blatt) */
.ent-photo {
    width: 100%; max-height: 200px; object-fit: cover;
    border-radius: 14px; display: block; background: #EDF1F4;
}
.ent-photo-sm {
    width: 100%; max-height: 150px; object-fit: contain;
    border-radius: 12px; display: block; background: #EDF1F4;
}

/* Zähl-Kacheln (Dashboard) — GROSSE Zahl, kleine Beschriftung, KEIN Geld. */
.ent-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ent-stat {
    background: #fff; border-radius: 16px; padding: 18px 16px;
    box-shadow: 0 1px 4px rgba(16,42,67,.08);
    display: flex; flex-direction: column; gap: 4px;
}
.ent-stat-num { font-size: 30px; font-weight: 800; color: var(--mewa); line-height: 1; }
.ent-stat-num.alert { color: #C0392B; }
.ent-stat-lbl { font-size: 12px; color: #7A8894; font-weight: 600; }

/* „+ hinzufügen"-Knopf, der wie eine Karte in der Liste steht */
.ent-add-card {
    background: #EAF5FA; border: 1.5px dashed var(--mewa); color: var(--mewa);
    border-radius: 16px; padding: 16px; font-family: inherit; font-weight: 700;
    font-size: 14px; cursor: pointer; display: flex; align-items: center;
    justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
}
.ent-add-card svg { width: 18px; height: 18px; }

/* ════════════════════════════════════════════════════════════════════
   ✨ 05.08.2026 — Fahrzeugliste: Karten (Handy) ODER Tabelle (Browser)

   Diese beiden Regeln sind die SICHERUNG für die Handy-App. Sie stehen
   hier in der RCL, die BEIDE Wirte laden, und sie tragen ABSICHTLICH
   keine Medienabfrage: Die Tabelle ist damit aus, egal wie breit der
   Bildschirm ist. Eingeschaltet wird sie ausschliesslich in app.css des
   Web-Hosts (.wshell, ab 1000 px) — eine Datei, die die App nie lädt.
   Ein breites Tablet kann die abgenommene Kartenansicht deshalb nicht
   versehentlich gegen eine Tabelle tauschen.

   display:contents für die Kartenhülle: Das Element verschwindet aus dem
   Fluss, seine Kinder liegen weiter direkt im Flex-Stapel von .ent-body.
   Der Abstand zwischen den Karten bleibt also exakt der von heute — ein
   nachgebautes gap wäre eine zweite Zahl, die später auseinanderläuft. */
.ent-fleet-cards { display: contents; }
.ent-fleet-table { display: none; }

/* Kleine Überschrift innerhalb einer Karte */
.ent-card-title {
    font-size: 13px; font-weight: 800; color: #16232D; margin-bottom: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   ✨ 05.08.2026 — Fund 1 (Pflichtfeld rot) und Fund 2 (Passwortstärke)

   „is-error" ist die EINE Markierung für alle Eingabeformen. Sie wird von
   EntFeldFehler.Css(…) an die Grundklasse gehängt — deshalb steht die
   Farbe hier genau einmal und nicht in jedem Razor als style-Attribut.
   ════════════════════════════════════════════════════════════════════ */

.ent-input.is-error,
.ent-select.is-error { border-color: #C0392B; background: #FDF3F3; }
.ent-input.is-error:focus,
.ent-select.is-error:focus { border-color: #C0392B; }

/* Telefon: markiert wird der WRAPPER, nicht das innere Feld — der Rahmen
   gehört zum Wrapper, das Feld selbst hat keinen. */
.ent-phone-wrap.is-error { border-color: #C0392B; background: #FDF3F3; }

/* Modulauswahl: kein Eingabefeld, aber ein Pflichtblock. */
.ent-mods.is-error {
    border: 1.5px solid #C0392B; border-radius: 12px;
    padding: 6px; background: #FDF3F3;
}

/* Kurze Meldung DIREKT unter dem Feld (Komponente EntFieldError). */
.ent-field-err {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; color: #A32D2D; margin-top: 1px;
}
.ent-field-err svg { width: 13px; height: 13px; flex: none; }

/* ── Stärkeanzeige (Komponente EntPasswordStrength) ── */
.ent-pwd-meter { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ent-pwd-bars { display: flex; gap: 4px; flex: 1; }
.ent-pwd-bar { flex: 1; height: 5px; border-radius: 3px; background: #E4E9ED; }
.ent-pwd-bar.on.s1 { background: #C0392B; }
.ent-pwd-bar.on.s2 { background: #E0A800; }
.ent-pwd-bar.on.s3 { background: #2F9A5E; }
.ent-pwd-lbl { font-size: 11px; font-weight: 700; flex: none; }
.ent-pwd-lbl.s1 { color: #C0392B; }
.ent-pwd-lbl.s2 { color: #9A6B00; }
.ent-pwd-lbl.s3 { color: #2F9A5E; }

.ent-pwd-req {
    list-style: none; margin: 4px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.ent-pwd-req li {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: #9AA6AF;
}
.ent-pwd-req li.ok { color: #2F9A5E; }
.ent-pwd-req li.hint { color: #7A8894; padding-left: 18px; }
.ent-pwd-ico { width: 13px; height: 13px; flex: none; }

/* ════════════════════════════════════════════════════════════════════
   ✨ 05.08.2026 — Fahrzeugblatt: Marke, Lackfarbe, Fahrersuche

   Alles hier ist FINGERMASS. Die Seite läuft unverändert in der
   abgenommenen Handy-App; deshalb keine Hover-Only-Bedienung, keine
   Trefferliste, die über dem Feld schwebt, und keine Zielfläche unter
   44 px Höhe.
   ════════════════════════════════════════════════════════════════════ */

/* ── Trefferliste unter einem Tippfeld (Marke) ─────────────────────────
   ⚠ ABSICHTLICH IM TEXTFLUSS statt position:absolute. Eine schwebende
   Liste liegt auf dem Handy unter der eingeblendeten Tastatur und ist
   dann unerreichbar — der Bediener sieht Vorschläge, an die er nicht
   herankommt. Im Fluss schiebt die Liste den Rest der Seite nach unten
   und lässt sich scrollen, egal wie hoch die Tastatur ist. */
.ent-suggest {
    display: flex; flex-direction: column;
    border: 1.5px solid #E0E0E0; border-radius: 12px; background: #fff;
    overflow: hidden; max-height: 224px; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ent-suggest-item {
    border: none; background: none; font-family: inherit; text-align: left;
    padding: 12px 14px; font-size: 14px; color: #16232D; cursor: pointer;
    border-top: 1px solid #F0F4F7; min-height: 44px;
    display: flex; align-items: center; gap: 9px; width: 100%;
    box-sizing: border-box;
}
.ent-suggest-item:first-child { border-top: none; }
.ent-suggest-item:hover { background: #EAF5FA; }
.ent-suggest-item.on { background: #EAF5FA; color: var(--mewa); font-weight: 700; }

/* Kleiner grauer Satz direkt unter einem Feld (Hinweis, nicht Fehler). */
.ent-inline-note { font-size: 11px; color: #7A8894; }

/* ── Mietkauf (location-vente) ────────────────────────────────────────
   ✨ 07.08.2026 — Der Balken zeigt, wie weit der Fahrer vom Eigentum
   entfernt ist. Grün, weil hier etwas WÄCHST — anders als die Papier-Ampel,
   wo Grün „in Ordnung" heißt. Der Balken ist die einzige Stelle im Portal,
   an der Grün Fortschritt bedeutet. */
.ent-buy {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ent-buy-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ent-buy-t { font-size: 12px; font-weight: 700; color: #35566E; }
.ent-buy-pct { font-size: 15px; font-weight: 700; color: #15803D; }

.ent-buy-bar {
    height: 7px;
    border-radius: 4px;
    background: #DDE5EC;
    overflow: hidden;
}

    .ent-buy-bar i {
        display: block;
        height: 100%;
        background: #15803D;
        border-radius: 4px;
    }

.ent-buy-s { font-size: 11.5px; color: #5F7387; }

/* Erreicht: Der Übergang geschieht NICHT von selbst — deshalb ein eigener
   Kasten mit Knopf statt einer stillen Erfolgsmeldung. */
.ent-buy-done {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #E8F5EC;
    border-radius: 9px;
    padding: 10px;
    font-size: 12px;
    color: #15803D;
    margin-top: 4px;
}

/* ── Kästchen zum Ankreuzen ───────────────────────────────────────────
   ✨ 07.08.2026 — für den Mietkauf im Einladungsformular. Das Kästchen ist
   bewusst groß (18 px statt der 13 px, die der Browser vorgibt): Auf einem
   Handy trifft ein Daumen kein Standardkästchen, und das ganze Label ist
   deshalb Teil der Trefferfläche. */
.ent-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
    padding: 3px 0;
}

.ent-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--mewa);
    flex: none;
    margin: 0;
}

/* ── Zuweisung (Welle 2): Einladung und Code ──────────────────────────
   ✨ 07.08.2026 — Der Einladungscode ist die EINE Zeichenkette, die der
   Inhaber dem Fahrer vorliest oder per WhatsApp schickt. Er steht deshalb
   groß, gesperrt und mit fester Zeichenbreite da — bei O/0-Verwechslung
   wäre der Code wertlos (das Alphabet lässt beide zwar aus, aber der
   Bediener weiß das nicht und muss mühelos ablesen können). */
.ent-invitebox {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ent-invitecode {
    font-family: Consolas, "Roboto Mono", monospace;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 5px;
    text-align: center;
    color: var(--mewa);
    background: #fff;
    border: 1px dashed var(--mewa);
    border-radius: 10px;
    padding: 10px 6px;
    user-select: all;   /* ein Tipp/Klick markiert den ganzen Code zum Kopieren */
}

/* Gewähltes Abrechnungsmodell — gefüllt statt nur umrandet: Auf einem
   Handy in der Sonne reicht ein Farbstich als einziges Merkmal nicht. */
.ent-chipbtn.on {
    background: var(--mewa);
    border-color: var(--mewa);
    color: #fff;
    font-weight: 700;
}

/* ── Was fotografiert werden soll ─────────────────────────────────────
   ✨ 06.08.2026 — MEWA stuft nach dem ZUSTAND ein, und der Prüfer sieht nur,
   was hochgeladen wurde. Sechs Aufnahmen derselben Seitenansicht sagen ihm
   nichts über die Polster, auf denen der Fahrgast sitzt.

   Zurückhaltend gestaltet: Das ist eine Erinnerung, keine Warnung. Ein
   auffälliger Kasten würde neben den echten Fehlermeldungen dieser Seite
   um Aufmerksamkeit kämpfen und beide entwerten.

   flex-wrap statt fester Spalten: Sechs kurze Wörter brechen auf einem
   320-px-Handy von selbst um; ein Raster müsste die Zahl der Spalten raten. */
.ent-photo-guide {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ent-photo-guide-t { font-size: 11px; color: #5F7387; }

.ent-photo-guide-list { display: flex; flex-wrap: wrap; gap: 5px; }

.ent-photo-guide-chip {
    font-size: 11px;
    font-weight: 600;
    color: #35566E;
    background: #fff;
    border: 1px solid #DDE5EC;
    border-radius: 20px;
    padding: 3px 9px;
    white-space: nowrap;
}

/* ── Lackfarben-Auswahl ────────────────────────────────────────────────
   Ein Raster aus Schaltflächen mit Punkt. auto-fill statt fester
   Spaltenzahl: dasselbe Raster trägt ein 320-px-Handy und einen breiten
   Browser, ohne dass eine Medienabfrage im Code entscheiden muss. */
.ent-colorgrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
}

.ent-color-chip {
    display: flex; align-items: center; gap: 8px;
    border: 1.5px solid #E0E0E0; border-radius: 12px; background: #F8F8F8;
    padding: 10px 11px; min-height: 44px; cursor: pointer;
    font-family: inherit; font-size: 13px; color: #16232D;
    text-align: left; width: 100%; box-sizing: border-box;
}
.ent-color-chip.on { border-color: var(--mewa); background: #EAF5FA; font-weight: 700; }

/* Der Punkt trägt den Lackton als Inline-Stil (er kommt aus den Daten,
   nicht aus dem Stylesheet). Unbekannte/frei eingetragene Farbe ⇒ leerer
   gestrichelter Ring — ein GERATENER Farbpunkt wäre schlimmer als keiner. */
.ent-color-dot {
    width: 16px; height: 16px; border-radius: 50%; flex: none;
    border: 1px solid rgba(16,42,67,.22);
}
.ent-color-dot.unknown { background: transparent; border-style: dashed; }

/* ── Fahrersuche: Suchzeile + Trefferkarten ───────────────────────────
   Feld und Knopf nebeneinander, der Knopf schrumpft nicht unter seine
   Beschriftung (flex:none) und bleibt auf 44 px Höhe antippbar. */
.ent-searchrow { display: flex; align-items: stretch; gap: 8px; }
.ent-searchrow .ent-input { flex: 1; min-width: 0; }

.ent-searchbtn {
    flex: none; padding: 0 16px; min-height: 44px; border-radius: 12px;
    border: none; background: var(--mewa); color: #fff;
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ent-searchbtn.btn-disabled { opacity: .45; pointer-events: none; }

.ent-hit {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid #E7EDF2; border-radius: 12px; background: #fff;
    padding: 11px 12px;
}
.ent-hit-main { flex: 1; min-width: 0; }
.ent-hit-name { font-size: 14px; font-weight: 700; color: #16232D; }
.ent-hit-sub { font-size: 12px; color: #7A8894; margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════════
   ✨ 07.08.2026 — Fahrzeugblatt: Fotokarussell, Klassenkacheln,
   Jahresraster, Remarques internes

   ALLES HIER IST FINGERMASS und gilt ZUERST für die abgenommene
   Handy-App: keine Bedienung, die nur mit Zeigegerät funktioniert
   (kein Ziehen zum Sortieren, kein Hover-Menü), keine Zielfläche unter
   44 px. Was der Browser anders anordnet, steht ausschliesslich in
   app.css des Web-Hosts (.wshell) — einer Datei, die die App nie lädt.
   ════════════════════════════════════════════════════════════════════ */

/* ── Fotokarussell ────────────────────────────────────────────────────
   Feste Bühnenhöhe statt „so hoch wie das Bild": Fotos kommen im
   Hoch- und im Querformat, und ohne feste Höhe hüpfte die halbe Seite
   bei jedem Blättern. object-fit:contain, weil ein beschnittenes
   Fahrzeugfoto genau das verstecken kann, weswegen es aufgenommen
   wurde (Delle, Kennzeichen). */
.ent-carousel { display: flex; flex-direction: column; gap: 10px; }

.ent-carousel-stage {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 14px;
    background: #EDF1F4;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    /* Wischen soll das Karussell bedienen, nicht Text markieren. */
    user-select: none; -webkit-user-select: none;
    touch-action: pan-y;
}

.ent-carousel-img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* „Wird geladen" und „nicht ladbar" sehen bewusst NICHT wie ein leeres
   Bild aus — ein grauer Kasten wäre von „kein Foto" nicht zu
   unterscheiden. */
.ent-carousel-msg {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 12px; color: #7A8894; text-align: center; padding: 12px;
}

.ent-carousel-main {
    position: absolute; top: 10px; left: 10px;
    background: var(--mewa); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
}

.ent-carousel-count {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(10,25,35,.62); color: #fff;
    font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
}

/* Die Pfeile sitzen ÜBER dem Bild und sind 44 px gross — auf dem Handy
   ist Wischen der Hauptweg, aber wer mit einer Hand hält, tippt. */
.ent-carousel-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    border: none; cursor: pointer;
    background: rgba(255,255,255,.88); color: #16232D;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 5px rgba(16,42,67,.22);
}
.ent-carousel-nav svg { width: 22px; height: 22px; }
.ent-carousel-nav.prev { left: 8px; }
.ent-carousel-nav.next { right: 8px; }

/* Punkte (Handy) sind der Standard, Miniaturen (Browser) sind AUS.
   Dieselbe Sicherung wie bei der Fahrzeugliste: ohne Medienabfrage,
   damit ein breites Tablet die abgenommene Ansicht nicht versehentlich
   tauscht. Eingeschaltet wird ausschliesslich in app.css. */
.ent-carousel-dots {
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ent-cdot {
    width: 44px; height: 44px; padding: 0; border: none; background: none;
    cursor: pointer; position: relative; flex: none;
}
/* Der sichtbare Punkt ist klein, die ANTIPPBARE Fläche darum herum
   nicht: 44 px, wie jede andere Zielfläche in diesem Blatt. Ein 10-px-
   Punkt trifft auf einem Handy nur, wer Glück hat — und daneben zu
   tippen springt hier zu einem anderen Bild. */
.ent-cdot::after {
    content: ""; position: absolute; inset: 17px;
    border-radius: 50%; background: #C4CDD4;
}
.ent-cdot.on::after { background: var(--mewa); }

.ent-carousel-thumbs { display: none; }

.ent-cthumb {
    position: relative; flex: none;
    width: 64px; height: 48px; padding: 0; overflow: hidden;
    border: 2px solid #E0E0E0; border-radius: 10px; background: #F2F5F7;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ent-cthumb.on { border-color: var(--mewa); }
.ent-cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ent-cthumb-num { font-size: 12px; font-weight: 700; color: #7A8894; }

/* Kleiner blauer Eckpunkt = das ist die Hauptansicht. Kein Text, weil
   die Miniatur dafür zu klein ist. */
.ent-cthumb-main {
    position: absolute; top: 3px; left: 3px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--mewa);
    box-shadow: 0 0 0 2px #fff;
}

.ent-carousel-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Kleiner Knopf im Fliesstext (Sortieren, Löschen, Notiz-Stichworte). */
.ent-chipbtn {
    border: 1.5px solid #E0E0E0; border-radius: 999px; background: #F8F8F8;
    padding: 0 14px; min-height: 44px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; color: #16232D;
    display: flex; align-items: center; gap: 6px;
}
.ent-chipbtn.danger { border-color: #EBC9C9; color: #A32D2D; background: #FDF3F3; }
.ent-chipbtn.btn-disabled { opacity: .45; pointer-events: none; }

/* ── Freigabe-Karte ───────────────────────────────────────────────────
   Der farbige linke Rand trägt die Aussage mit: Wer das Blatt öffnet,
   sieht am Streifen, ob sein Fahrzeug fahren darf, bevor er liest. */
.ent-valcard { border-left: 4px solid #C4CDD4; }
.ent-valcard.val-ok { border-left-color: #2F9A5E; }
.ent-valcard.val-wait { border-left-color: #E0A800; }
.ent-valcard.val-bad { border-left-color: #C0392B; }

.ent-valhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.ent-valreason {
    display: flex; flex-direction: column; gap: 3px;
    background: #F7FAFC; border-radius: 10px; padding: 10px 12px;
    font-size: 13px; color: #16232D;
}

/* ── Klassenkacheln ───────────────────────────────────────────────────
   auto-fill statt fester Spaltenzahl: dasselbe Raster trägt ein
   320-px-Handy (zwei Spalten) und einen breiten Browser, ohne dass eine
   Abfrage im Code entscheiden muss. */
.ent-classgrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}

.ent-classtile {
    position: relative;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    border: 1.5px solid #E0E0E0; border-radius: 14px; background: #F8F8F8;
    padding: 10px; cursor: pointer; font-family: inherit;
    text-align: left; width: 100%; box-sizing: border-box;
}
.ent-classtile.on { border-color: var(--mewa); background: #EAF5FA; }

.ent-classtile-img {
    display: flex; align-items: center; justify-content: center;
    height: 62px; border-radius: 10px; background: #fff; overflow: hidden;
}
.ent-classtile-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Die gezeichnete Silhouette ist ABSICHTLICH blass: Sie ist ein
   Platzhalter, kein Foto — und soll nicht mit einem echten Bild
   verwechselt werden. */
.ent-classtile-sil { width: 78%; height: 100%; color: #C4CDD4; }

.ent-classtile-name { font-size: 13px; font-weight: 700; color: #16232D; }
.ent-classtile-sub { font-size: 11px; color: #7A8894; }

.ent-classtile-tag {
    align-self: flex-start;
    font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
    background: #FFF4DC; color: #9A6B00; padding: 2px 7px; border-radius: 999px;
}

/* ── Jahresraster (vier mal vier) ─────────────────────────────────────
   Feste vier Spalten, nicht auto-fill: „vier mal vier" ist die Form,
   an der sich das Auge orientiert — eine Reihe, die je nach Fenster
   fünf oder drei Felder hat, muss man jedes Mal neu lesen. */
.ent-yearhead {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ent-yearrange { font-size: 13px; font-weight: 700; color: #16232D; }

.ent-yearnav {
    width: 44px; height: 44px; flex: none;
    border: 1.5px solid #E0E0E0; border-radius: 12px; background: #F8F8F8;
    color: #16232D; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ent-yearnav svg { width: 20px; height: 20px; }
.ent-yearnav.btn-disabled { opacity: .35; pointer-events: none; }

.ent-yeargrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.ent-yearcell {
    min-height: 46px;
    border: 1.5px solid #E0E0E0; border-radius: 12px; background: #F8F8F8;
    font-family: inherit; font-size: 14px; color: #16232D; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ent-yearcell.on { border-color: var(--mewa); background: var(--mewa); color: #fff; font-weight: 700; }

/* Das laufende Jahr ist UMRANDET, nicht gefüllt: Gefüllt hiesse
   „gewählt", und das ist es nicht — es ist nur der Bezugspunkt. */
.ent-yearcell.now { border-color: var(--mewa); border-width: 2px; font-weight: 700; }
.ent-yearcell.on.now { border-color: var(--mewa); }

.ent-yearnone {
    min-height: 46px; width: 100%; box-sizing: border-box;
    border: 1.5px dashed #C4CDD4; border-radius: 12px; background: #fff;
    font-family: inherit; font-size: 13px; font-weight: 600; color: #7A8894;
    cursor: pointer;
}
.ent-yearnone.on { border-style: solid; border-color: var(--mewa); background: #EAF5FA; color: var(--mewa); }

/* ── Remarques internes ───────────────────────────────────────────────── */
.ent-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }

.ent-textarea { resize: vertical; min-height: 84px; line-height: 1.45; }

.ent-notes-count { align-self: flex-end; font-size: 11px; color: #7A8894; }

/* ════════════════════════════════════════════════════════════════════
   NUR Desktop-Browser (Web-Portal): die Auth-Karte zentriert und rundum
   abgerundet, statt bildschirmfüllend unten zu kleben. GETEILTES CSS mit
   der Handy-App — deshalb strikt ab 700px. Unterhalb bleibt ALLES wie
   heute (Karte klebt unten, border-radius nur oben, flex:1).
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
    /* Karte mittig auf dem Verlauf. .ent-page nutzt min-height (kein festes
       height) — eine hohe Karte (Register) wächst über den Schirm hinaus,
       wird NICHT oben abgeschnitten, die Seite scrollt. */
    .ent-page {
        align-items: center;
        justify-content: center;
        padding: 32px 16px;
        box-sizing: border-box;
    }
    .ent-card {
        flex: none;
        width: 100%;
        max-width: 400px;
        border-radius: 20px;
        padding: 32px 28px 34px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   ✨ 07.08.2026 — DAS KONTO ZWISCHEN INHABER UND FAHRER

   Karten statt Tabelle, auch im Browser: Eine Kontozeile trägt vier Zahlen
   und einen Fortschrittsbalken — als Tabellenspalten wären sie auf einem
   Handy unlesbar, und die Seite gehört in die Hand des Flottenchefs, nicht
   nur auf seinen Schreibtisch.
   ══════════════════════════════════════════════════════════════════════ */

.ent-kstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.ent-kstat {
    background: #fff;
    border: 1px solid var(--line, #DDE5EC);
    border-radius: 12px;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ent-kstat-v { font-size: 19px; font-weight: 700; letter-spacing: -.4px; color: #0d2233; }
.ent-kstat-l { font-size: 11px; color: #5F7387; }

.ent-kstat.bad .ent-kstat-v { color: #B3261E; }
.ent-kstat.ok .ent-kstat-v { color: #15803D; }
.ent-kstat.warn { background: #FEF3C7; border-color: #FCD34D; }
.ent-kstat.warn .ent-kstat-v { color: #92400E; }

.ent-klist { display: flex; flex-direction: column; gap: 9px; }

.ent-kcard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #DDE5EC;
    border-radius: 13px;
    padding: 12px;
}

.ent-kcard:active { background: #F9FAFB; }

/* Ein Rückstand von drei Tagessätzen ist die Schwelle, ab der ein
   Flottenchef anruft — deshalb ein Streifen, der auch beim Überfliegen
   auffällt. */
.ent-kcard.late { border-left: 3px solid #B3261E; }

.ent-kcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ent-kcard-m { flex: 1; min-width: 0; }
.ent-kcard-n { font-size: 14px; font-weight: 700; color: #16232e; }
.ent-kcard-s { font-size: 11.5px; color: #5F7387; margin-top: 1px; }
.ent-kcard-r { text-align: right; flex: none; }

.ent-kcard-saldo { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ent-kcard-saldo.debt { color: #B3261E; }
.ent-kcard-saldo.credit { color: #0072A3; }
.ent-kcard-saldo.clear { color: #15803D; font-size: 13px; }
.ent-kcard-abrede { font-size: 11px; color: #8ba3b8; margin-top: 2px; }

.ent-kcard-buy { display: flex; flex-direction: column; gap: 4px; }
.ent-kcard-buys { font-size: 11px; color: #5F7387; }

.ent-knote {
    font-size: 11.5px;
    color: #5F7387;
    background: var(--bg-light, #F2F5F7);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 12px;
    line-height: 1.45;
}

/* ── Kassenbuch ─────────────────────────────────────────────────────── */

.ent-ksaldo {
    background: #fff;
    border: 1px solid #DDE5EC;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 12px;
}

.ent-ksaldo-l { font-size: 11px; color: #5F7387; text-transform: uppercase; letter-spacing: .5px; }
.ent-ksaldo-v { font-size: 30px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.ent-ksaldo-s { font-size: 11.5px; color: #8ba3b8; }

.ent-ksaldo.debt .ent-ksaldo-v { color: #B3261E; }
.ent-ksaldo.credit .ent-ksaldo-v { color: #0072A3; }
.ent-ksaldo.clear .ent-ksaldo-v { color: #15803D; }

.ent-kbook { display: flex; flex-direction: column; }

.ent-kbook-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid #EEF2F5;
}

.ent-kbook-row:last-child { border-bottom: 0; }

.ent-kbook-d {
    font-size: 11.5px;
    color: #8ba3b8;
    min-width: 42px;
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
}

.ent-kbook-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ent-kbook-n { font-size: 13px; font-weight: 600; color: #16232e; }
.ent-kbook-s { font-size: 11px; color: #5F7387; }

.ent-kbook-v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.ent-kbook-v.plus { color: #15803D; }

/* Ein Erlass ist KEIN eingegangenes Geld — deshalb neutral grau und nicht
   grün wie eine Zahlung. Sonst sähe das Kassenbuch nach mehr Einnahmen aus,
   als tatsächlich geflossen sind. */
.ent-kbook-v.waiver { color: #8ba3b8; }