/* Web-Host: nur das Nötigste — der MEWA-Look kommt aus der RCL (ent.css). */

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

/* Blazor-Server rendert direkt in <body> — die Seiten füllen die Höhe. */
body > .ent-page,
body > .ent-page-light {
    min-height: 100vh;
}

#blazor-error-ui {
    background: #FCEBEB;
    color: #A32D2D;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    font-size: 13px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* ══════════════════════════════════════════════════════════════════════
   ✨ 05.08.2026 — WEB-HÜLLE (Menü links)

   Diese Datei liegt NUR im Web-Host. Die Handy-App lädt sie nicht, die
   RCL kennt sie nicht — was hier steht, kann die App nicht erreichen.

   Der Aufbau in einem Satz: Unter 1000 px ist die Hülle unsichtbar und
   alles sieht aus wie bisher; ab 1000 px klappt das Menü heraus und die
   vorhandene `.ent-appbar` jeder Seite wird zum weißen Kopfbalken.

   WARUM die vorhandene Leiste umgefärbt statt eine neue gebaut wird:
   Jede Seite bringt Titel, Untertitel und ihre Aktionsknöpfe dort schon
   mit. Ein zweiter Balken hieße: jeden Titel doppelt, jede Seite anfassen.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --wnav-bg: #0d2233;     /* gleicher Marineton wie die Admin-Leiste */
    --wnav-mut: #8ba3b8;    /* gedämpfter Text darauf */
    --wnav-on: #0072A3;     /* MEWA-Blau: markiert den aktuellen Punkt */
}

/* ── Grundgerüst ──────────────────────────────────────────────────────
   Schmales Fenster = heutige Ansicht. Das Menü ist AUS, nicht nur schmal:
   Die Seiten haben unten keine eigene Navigation, aber ihren Zurück-Pfeil
   in der Leiste — der trägt die Bedienung wie bisher. */
.wnav { display: none; }
.wshell { min-height: 100vh; }
.wshell .ent-page,
.wshell .ent-page-light { min-height: 100vh; }

@media (min-width: 1000px) {

    .wshell { display: flex; align-items: stretch; }

    .wmain { flex: 1; min-width: 0; }

    /* ── Menüleiste ──────────────────────────────────────────────────
       sticky statt fixed: die Leiste bleibt beim Scrollen stehen, ohne
       dass der Inhalt einen Außenabstand braucht (fixed nimmt das
       Element aus dem Fluss und der Hauptteil rutscht darunter). */
    .wnav {
        display: flex;
        flex-direction: column;
        flex: none;
        width: 248px;
        position: sticky;
        top: 0;
        height: 100vh;
        background: var(--wnav-bg);
        color: #fff;
    }

    .wnav-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 20px 18px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .wnav-brand-sub {
        font-size: 10.5px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        color: var(--wnav-mut);
    }

    .wnav-list {
        flex: 1;
        padding: 12px 10px;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .wnav-sect {
        margin: 16px 12px 6px;
        font-size: 10px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--wnav-mut);
    }

    .wnav-item {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 12px;
        border-radius: 9px;
        font-size: 13.5px;
        font-weight: 500;
        color: #c9d6e2;
        text-decoration: none;
    }

        .wnav-item svg { width: 18px; height: 18px; flex: none; }

        .wnav-item:hover {
            background: rgba(255,255,255,.07);
            color: #fff;
        }

        /* Der aktuelle Punkt ist gefüllt, nicht nur heller — auf einer
           dunklen Leiste ist ein Helligkeitsunterschied allein zu leise. */
        .wnav-item.on {
            background: var(--wnav-on);
            color: #fff;
        }

    /* ── Fuß: Firma, Rolle, Ausgänge ───────────────────────────────── */
    .wnav-foot {
        padding: 14px 16px 16px;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .wnav-firma {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wnav-rolle {
        font-size: 11px;
        color: var(--wnav-mut);
        margin-top: 2px;
    }

    .wnav-foot-btns {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 10px;
    }

    .wnav-mini {
        background: none;
        border: none;
        padding: 4px 0;
        text-align: left;
        font: inherit;
        font-size: 11.5px;
        color: var(--wnav-mut);
        text-decoration: none;
        cursor: pointer;
    }

        .wnav-mini:hover { color: #fff; }

    /* ── Die Seitenleiste der Seite wird zum Web-Kopfbalken ──────────
       Dunkelblau + weiße Schrift ist die Handy-Ansicht. Im Browser sitzt
       darüber nichts mehr, was den Balken einrahmt — er wird weiß und
       trennt sich durch eine Linie, wie ein Seitenkopf. */
    .wshell .ent-appbar {
        background: #fff;
        color: #0d2233;
        border-bottom: 1px solid #e3eaf1;
        padding: 14px 28px;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .wshell .ent-appbar-title { font-size: 20px; }
    .wshell .ent-appbar-sub { font-size: 12px; color: #5f7387; opacity: 1; }

    /* Der Zurück-Pfeil ist der ERSTE Knopf in der Leiste. Im Browser
       ersetzt ihn das Menü — und ein Pfeil neben einem Menü führt in die
       Irre. Nur ausgeblendet, nicht entfernt: auf dem Handy trägt er
       weiter die Bedienung. */
    .wshell .ent-appbar > .ent-iconbtn:first-child { display: none; }

    .wshell .ent-iconbtn {
        background: #eef3f8;
        color: #0d2233;
    }

        .wshell .ent-iconbtn:hover { background: #dfe9f2; }

    /* ── Inhalt ──────────────────────────────────────────────────────
       Begrenzte Breite: über etwa 1200 px wird eine Textzeile unlesbar
       lang, und Karten würden zu Bändern auseinandergezogen. */
    .wshell .ent-body {
        padding: 24px 28px 40px;
        max-width: 1200px;
        gap: 16px;
    }

    /* Kacheln und Karten mehrspaltig — auf dem Handy ist untereinander
       richtig, im Browser verschenkt es die halbe Fläche. */
    .wshell .ent-tiles,
    .wshell .ent-mods {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }

    .wshell .ent-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
    }

    /* Zeigefinger statt Handfläche: Karten sind hier anklickbare Zeilen. */
    .wshell .ent-item-card { transition: box-shadow .12s, transform .12s; }

        .wshell .ent-item-card:hover {
            box-shadow: 0 4px 14px rgba(16,42,67,.13);
            transform: translateY(-1px);
        }

    /* ── ✨ 05.08.2026 — Fahrzeugliste als Tabelle ────────────────────
       Die GEGENSTÜCKE zu den beiden Grundregeln in ent.css: dort ist die
       Tabelle unumstösslich aus, hier — und nur hier, ab 1000 px im Web-
       Host — wird getauscht. Die Handy-App lädt diese Datei nicht.

       Warum überhaupt getauscht wird: Eine Karte je Fahrzeug ist auf dem
       Handy die richtige Form, im Browser aber eine Zeile mit viel Luft
       rechts. Ein Flottenchef vergleicht Kennzeichen, Papiere und
       Chauffeure UNTEREINANDER — dafür sind Spalten da. */
    .wshell .ent-fleet-cards { display: none; }

    .wshell .ent-fleet-table {
        display: block;
        /* Schmale Fenster zwischen 1000 px und der Tabellenbreite dürfen den
           Seitenkörper nicht seitlich schieben — es rollt die Tabelle. */
        overflow-x: auto;
    }

        .wshell .ent-fleet-table table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 1px 4px rgba(16,42,67,.08);
            font-size: 13.5px;
        }

        .wshell .ent-fleet-table th {
            text-align: left;
            padding: 12px 14px;
            border-bottom: 1px solid #E7EDF2;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: #7A8894;
            white-space: nowrap;
        }

        .wshell .ent-fleet-table td {
            padding: 11px 14px;
            border-top: 1px solid #F0F4F7;
            color: #16232D;
            vertical-align: middle;
        }

            .wshell .ent-fleet-table td.plate {
                font-weight: 700;
                white-space: nowrap;
            }

    /* Zwischenüberschrift „aktiv / ausgemustert" als eigene Zeile. */
    .wshell .ent-grouprow td {
        background: #F7FAFC;
        padding: 8px 14px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #7A8894;
    }

    .wshell .ent-trow { cursor: pointer; }

        .wshell .ent-trow:hover td { background: #F6FAFD; }

        /* Der Tastaturweg muss SICHTBAR sein, sonst nützt er niemandem. */
        .wshell .ent-trow:focus-visible td {
            background: #EAF5FA;
            outline: none;
        }

        .wshell .ent-trow.off td { color: #8A97A2; }

    /* Lackfarbe als Punkt. Unbekannte (frei eingetragene) Farbe ⇒ leerer,
       gestrichelter Ring — geraten wird nicht. */
    .wshell .ent-carcolor {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 8px;
        border: 1px solid rgba(16,42,67,.18);
        vertical-align: middle;
    }

        .wshell .ent-carcolor.unknown {
            background: transparent;
            border-style: dashed;
        }

    /* Papier- und Chauffeur-Zelle: Punkt/Text bzw. Name/Marke nebeneinander. */
    .wshell .ent-papzelle {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .wshell .ent-mut { color: #93A1AC; }

    /* ── ✨ 07.08.2026 — Fahrzeugblatt im Browser ─────────────────────
       Die GEGENSTÜCKE zu den Grundregeln in ent.css. Dort sind die
       Miniaturen unumstösslich aus und die Punkte an; hier — und nur
       hier, ab 1000 px im Web-Host — wird getauscht. Die Handy-App lädt
       diese Datei nicht und kann deshalb NICHT versehentlich auf eine
       Bedienung umschalten, die einen Mauszeiger voraussetzt.

       Warum überhaupt getauscht wird: Punkte sagen nur, WIE VIELE Bilder
       es gibt. Am Schreibtisch will man sehen, WELCHE — dafür sind
       Miniaturen da. Auf dem Handy wäre dieselbe Reihe ein Streifen
       Briefmarken unter dem Daumen. */
    .wshell .ent-carousel-dots { display: none; }

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

    /* Mehr Höhe für die grosse Ansicht: Am Schreibtisch ist Platz, und
       genau dort wird ein Schaden auf einem Foto begutachtet. */
    .wshell .ent-carousel-stage { height: 340px; }

    /* Auf dem Handy führt der Daumen; hier gibt es keinen Wischweg —
       die Pfeile werden deshalb deutlicher statt dezenter. */
    .wshell .ent-carousel-nav:hover { background: #fff; }

    /* Grössere Klassenkacheln: Das Referenzbild ist der ganze Sinn der
       Kachel, und 62 px hoch erkennt man ein „ConfortPlus" nicht. */
    .wshell .ent-classgrid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }

    .wshell .ent-classtile-img { height: 92px; }

    .wshell .ent-classtile:hover { border-color: #B9C6D1; }

    .wshell .ent-classtile.on:hover { border-color: var(--mewa); }

    /* Das Jahresraster bleibt VIER SPALTEN — die Form ist die
       Orientierung, nicht die Breite. Nur die Felder werden ruhiger. */
    .wshell .ent-yeargrid { max-width: 420px; }

    .wshell .ent-yearhead { max-width: 420px; }

    .wshell .ent-yearnone { max-width: 420px; }

    .wshell .ent-yearcell:hover { background: #EAF5FA; }

    .wshell .ent-yearcell.on:hover { background: var(--mewa); }

    /* Der Zeichenzähler steht am Schreibtisch neben einem breiten Feld —
       ohne Begrenzung klebte er ganz rechts am Fensterrand. */
    .wshell .ent-textarea { max-width: 720px; }

    .wshell .ent-notes-count { max-width: 720px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ✨ 07.08.2026 — FLOTTEN-LIVE-KARTE

   Diese Regeln stehen im WEB-HOST, nicht in der RCL: Die Seite gibt es nur
   hier, und die abgenommene Handy-App soll weder das CSS noch die 158 KB
   Leaflet mitschleppen, die sie nie braucht.

   Die Marker selbst gestaltet mewa-map.css (per Content-Verweis aus der
   Admin-Konsole) — hier steht nur der Rahmen darum.
   ══════════════════════════════════════════════════════════════════════ */

.ent-live-map-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #dde5ec;
    background: #eef2f5;
}

/* Feste Höhe statt Vollbild: Unter der Karte steht die Fahrzeugliste, und
   die trägt die Seite, wenn die Karte einmal nicht lädt. */
.ent-live-map {
    height: min(62vh, 640px);
    width: 100%;
}

/* Meldung ÜBER der Karte statt an ihrer Stelle: Der Kartenbehälter muss im
   Dokument bleiben, sonst verliert Leaflet seinen Anker und die Karte
   käme beim nächsten Laden nicht wieder. */
.ent-live-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 20px;
    background: #eef2f5;
    z-index: 500;
}

.ent-live-empty-t { font-size: 15px; font-weight: 700; color: #35566e; }
.ent-live-empty-s { font-size: 12.5px; color: #5f7387; max-width: 46ch; }

.ent-live-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ent-live-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    background: #fff;
    border: 1px solid #dde5ec;
    border-radius: 20px;
    padding: 5px 12px;
}

/* Bernstein, nicht rot: „wir sehen sie nicht" ist eine schwächere Aussage
   als eine Störung — ein Fahrer kann sein Telefon schlicht im Tunnel haben. */
.ent-live-stat.warn { border-color: #fcd34d; background: #fef3c7; }

.ent-live-num { font-size: 17px; font-weight: 700; color: #0d2233; font-variant-numeric: tabular-nums; }
.ent-live-lbl { font-size: 11.5px; color: #5f7387; }
.ent-live-upd { font-size: 11.5px; color: #8ba3b8; margin-left: auto; font-variant-numeric: tabular-nums; }

.ent-stale {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    border-radius: 12px;
    padding: 9px 12px;
    margin-bottom: 10px;
    font-size: 12.5px;
}

.ent-live-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* Ein Fahrzeug ohne Position lässt sich nicht anspringen — der Zeigefinger
   würde etwas versprechen, das der Klick nicht hält. */
.ent-live-list .ent-hit { cursor: pointer; }
.ent-live-list .ent-hit.off { cursor: default; opacity: .72; }