/* ---------------------------------------------------------------------
   MTS Speditionssystem

   Handgeschrieben, ohne Bauschritt: das Hosting hat kein Node, und ein
   Build-Prozess fuer ein paar hundert Zeilen CSS waere ein Werkzeugkasten
   mehr, den jemand pflegen muss.

   Gestaltung folgt der Arbeitsweise: die Anwender kommen von Access und
   arbeiten den ganzen Tag in Listen. Also dichte Tabellen, klare Kanten,
   ruhige Farben - und Zahlen konsequent rechtsbuendig mit Tabellenziffern.
   --------------------------------------------------------------------- */

:root {
    --grund:        #f6f7f9;
    --flaeche:      #ffffff;
    --flaeche-alt:  #f0f2f5;
    --rand:         #dde1e7;
    --rand-stark:   #c3c9d2;
    --text:         #1c2128;
    --text-leise:   #626d7d;
    --akzent:       #1f5fa9;
    --akzent-hell:  #e8f0fa;
    --gut:          #1a7f4b;
    --warnung:      #b46b00;
    --fehler:       #c0392b;
    --fehler-hell:  #fdecea;
    --radius:       6px;
    --schatten:     0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund:       #14171c;
        --flaeche:     #1b1f26;
        --flaeche-alt: #232830;
        --rand:        #2e343e;
        --rand-stark:  #3d4550;
        --text:        #e6e9ee;
        --text-leise:  #9aa4b2;
        --akzent:      #5c9ce6;
        --akzent-hell: #1c2c40;
        --gut:         #3fbf7f;
        --warnung:     #d99a2b;
        --fehler:      #ef6b5e;
        --fehler-hell: #33211f;
        --schatten:    0 1px 2px rgba(0, 0, 0, .4);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Grundgeruest --------------------------------------------------- */

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

.seitenleiste {
    width: 232px;
    flex: 0 0 232px;
    background: var(--flaeche);
    border-right: 1px solid var(--rand);
    display: flex;
    flex-direction: column;
}

.marke {
    padding: 16px 18px;
    border-bottom: 1px solid var(--rand);
}
.marke strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.marke span   { display: block; font-size: 12px; color: var(--text-leise); }

.navigation { padding: 10px 8px; flex: 1; overflow-y: auto; }
.navigation h4 {
    margin: 14px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-leise);
}
.navigation a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13.5px;
}
.navigation a:hover { background: var(--flaeche-alt); text-decoration: none; }
.navigation a.aktiv { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
.navigation svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .85; }

.benutzerleiste {
    border-top: 1px solid var(--rand);
    padding: 11px 14px;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.benutzerleiste .rolle { color: var(--text-leise); font-size: 11.5px; }

.inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.kopf {
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
    padding: 14px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.kopf h1 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.kopf .unterzeile { color: var(--text-leise); font-size: 12.5px; margin-top: 1px; }

.hauptteil { padding: 22px 26px; flex: 1; }

/* --- Karten und Kennzahlen ------------------------------------------ */

.karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 15px 17px;
    box-shadow: var(--schatten);
}
/* Anklickbare Kacheln fuehren auf die passend gefilterte Liste. */
a.karte {
    color: inherit;
    display: block;
    transition: border-color .12s, transform .12s;
}
a.karte:hover {
    text-decoration: none;
    border-color: var(--akzent);
    transform: translateY(-1px);
}
a.karte::after {
    content: "→";
    float: right;
    margin-top: -20px;
    opacity: 0;
    color: var(--akzent);
    transition: opacity .12s;
}
a.karte:hover::after { opacity: 1; }

.karte .titel { font-size: 12px; color: var(--text-leise); margin-bottom: 5px; }
.karte .wert {
    font-size: 23px;
    font-weight: 640;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.karte .zusatz { font-size: 12px; color: var(--text-leise); margin-top: 3px; }
.karte.betont .wert { color: var(--akzent); }
.karte.warnend .wert { color: var(--warnung); }

/* --- Tabellen ------------------------------------------------------- */

.tafel {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten);
    margin-bottom: 22px;
}
.tafel > h2 {
    margin: 0;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 640;
    border-bottom: 1px solid var(--rand);
    background: var(--flaeche-alt);
}
.tafel-rollbar { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 8px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rand);
    white-space: nowrap;
}
th {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-leise);
    background: var(--flaeche-alt);
    position: sticky;
    top: 0;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--flaeche-alt); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
td.leise { color: var(--text-leise); }
.umbruch { white-space: normal; }

/* --- Kleinteile ----------------------------------------------------- */

.plakette {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--flaeche-alt);
    color: var(--text-leise);
    border: 1px solid var(--rand);
}
.plakette.gut     { background: color-mix(in srgb, var(--gut) 12%, transparent);     color: var(--gut);     border-color: transparent; }
.plakette.warnend { background: color-mix(in srgb, var(--warnung) 14%, transparent); color: var(--warnung); border-color: transparent; }
.plakette.fehler  { background: var(--fehler-hell); color: var(--fehler); border-color: transparent; }
.plakette.ruhig   { background: var(--akzent-hell); color: var(--akzent); border-color: transparent; }

.knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--rand-stark);
    background: var(--flaeche);
    color: var(--text);
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
}
.knopf:hover { background: var(--flaeche-alt); text-decoration: none; }
.knopf.haupt {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
}
.knopf.haupt:hover { filter: brightness(1.08); }

/* --- Formulare ------------------------------------------------------ */

label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=date], input[type=number], select, textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--akzent) 45%, transparent);
    outline-offset: -1px;
    border-color: var(--akzent);
}

.feld { margin-bottom: 14px; }
.feldfehler { color: var(--fehler); font-size: 12.5px; margin-top: 4px; }

.meldung {
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13.5px;
}
.meldung.fehler  { background: var(--fehler-hell); color: var(--fehler); }
.meldung.hinweis { background: var(--akzent-hell); color: var(--akzent); }

/* --- Anmeldeseite --------------------------------------------------- */

.anmeldung {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--grund);
}
.anmeldung .kasten {
    width: 100%;
    max-width: 366px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 9px;
    padding: 30px;
    box-shadow: var(--schatten);
}
.anmeldung h1 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; }
.anmeldung .unterzeile { color: var(--text-leise); font-size: 13px; margin-bottom: 22px; }
.anmeldung .knopf { width: 100%; justify-content: center; margin-top: 4px; }
.merkzeile { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 12px 0 4px; }
.merkzeile input { width: auto; }
.merkzeile label { margin: 0; font-weight: 400; }

/* --- Fahrzeugsymbole ------------------------------------------------ */

.fahrzeug {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.fahrzeug svg { width: 21px; height: 21px; }

.leerhinweis {
    padding: 34px 20px;
    text-align: center;
    color: var(--text-leise);
    font-size: 13.5px;
}

@media (max-width: 860px) {
    .rahmen { flex-direction: column; }
    .seitenleiste { width: 100%; flex: none; border-right: none; border-bottom: 1px solid var(--rand); }
    .navigation { display: flex; flex-wrap: wrap; gap: 3px; }
    .navigation h4 { width: 100%; }
    .hauptteil, .kopf { padding-left: 16px; padding-right: 16px; }
}

/* --- Blaettern ------------------------------------------------------ */

.blaettern {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin: -8px 0 22px;
}
.blaettern .knopf { padding: 5px 11px; min-width: 36px; justify-content: center; }
.blaettern .knopf.aktuell {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
    font-weight: 600;
}
.blaettern .knopf.gesperrt { opacity: .38; cursor: default; }
.blaettern-info {
    margin-right: auto;
    font-size: 12.5px;
    color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}
.blaettern-luecke { padding: 0 3px; color: var(--text-leise); }

/* --- Formulare: Raster und dynamische Zeilen ------------------------ */

.raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 15px;
}

.zeile {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    padding: 7px 0;
    border-bottom: 1px dashed var(--rand);
}
.zeile:last-child { border-bottom: none; }
.zeile input, .zeile select { padding: 6px 9px; font-size: 13.5px; }
.zeile .knopf { padding: 6px 11px; }

.hinweiszeile {
    margin-top: 11px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--flaeche-alt);
    font-size: 13px;
    color: var(--text-leise);
}
.hinweiszeile.betont { background: var(--akzent-hell); color: var(--akzent); }
.hinweiszeile.warnend { background: var(--fehler-hell); color: var(--fehler); }

/* --- Fahrzeugkategorie als Symbolauswahl ---------------------------- */

.kategoriewahl { display: flex; flex-wrap: wrap; gap: 8px; }

.kategorie {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 108px;
    padding: 10px 6px 8px;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    background: var(--flaeche);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 500;
    text-align: center;
    line-height: 1.25;
    color: var(--text-leise);
}
.kategorie input { position: absolute; opacity: 0; pointer-events: none; }
.kategorie span { color: var(--kf); }
.kategorie strong {
    position: absolute;
    top: 4px;
    left: 7px;
    font-size: 10.5px;
    color: var(--text-leise);
}
.kategorie:hover { background: var(--flaeche-alt); }
.kategorie:has(input:checked) {
    border-color: var(--kf);
    background: color-mix(in srgb, var(--kf) 10%, transparent);
    color: var(--text);
    font-weight: 600;
}
.kategorie:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 1px; }


/* --- Symbole in Beschriftungen ------------------------------------- */

.karte .titel svg,
.tafel > h2 svg,
.knopf svg {
    vertical-align: -2px;
    margin-right: 1px;
    opacity: .7;
}
.karte.betont .titel svg,
.karte.warnend .titel svg { opacity: 1; }
.knopf.haupt svg { opacity: .95; }

/* --- Zeilen unterscheidbar machen ----------------------------------- */

/* Wer den ganzen Tag in Listen arbeitet, verliert ohne Streifen die
   Zeile - besonders bei breiten Tabellen, die waagerecht rollen. */
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--flaeche-alt) 55%, transparent); }
tbody tr:hover           { background: var(--akzent-hell); }

/* Ganze Zeile anklickbar, nicht nur die Nummer in der ersten Spalte.
   Der Link bleibt trotzdem im Markup: fuer Tastatur, Vorlesesoftware
   und "in neuem Tab oeffnen". */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }

/* Verweise klar als solche kennzeichnen - im Fliesstext unterstrichen,
   in Tabellen erst beim Zeigen, sonst flimmert die Liste. */
td a { color: var(--akzent); font-weight: 500; }
td a:hover { text-decoration: underline; }
.tafel td a[href]::after { content: ""; }

/* --- Belege am Datensatz -------------------------------------------- */

.belegliste { display: flex; flex-direction: column; gap: 1px; }
.beleg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--rand);
}
.beleg:last-child { border-bottom: none; }
.beleg .name { flex: 1; min-width: 0; word-break: break-word; }
.beleg .groesse { color: var(--text-leise); font-size: 12px; white-space: nowrap; }
.beleg svg { color: var(--text-leise); flex: 0 0 auto; }

.ablegeflaeche {
    border: 2px dashed var(--rand-stark);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
    color: var(--text-leise);
    font-size: 13.5px;
    transition: border-color .12s, background .12s;
}
.ablegeflaeche.bereit {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    color: var(--akzent);
}

/* --- Rechnungsversand ------------------------------------------------
   Der Versandzustand steht ueber der Rechnung, nicht in einer Spalte
   irgendwo: "ist das raus?" ist die haeufigste Frage zu einem Beleg. */

.versandfeld { padding: 14px 16px; margin-bottom: 16px; }

.versand-kopf {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin-bottom: 10px;
}

.versand-marke {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 600;
    padding: 3px 9px; border-radius: 20px;
    background: var(--flaeche-alt); color: var(--text-leise);
}
.versand-marke.versendet { background: color-mix(in srgb, var(--gut) 12%, transparent);     color: var(--gut); }
.versand-marke.fehler    { background: var(--fehler-hell);                                   color: var(--fehler); }
.versand-marke.gedruckt  { background: color-mix(in srgb, var(--warnung) 14%, transparent); color: var(--warnung); }

.versand-form {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.versand-form input[type=email] { margin: 0; }

.klein { font-size: 12.5px; }

/* Erklaerung unter einem Feld. Die Masken sollen sagen, was ein Feld
   bewirkt - eine Anleitung daneben liest niemand. */
.feldhinweis {
    font-size: 11.5px; color: var(--text-leise);
    margin-top: 4px; line-height: 1.4;
}

/* --- Belegart waehlen -------------------------------------------------
   Zwei Kacheln statt einer Auswahlliste: der Belegtyp entscheidet ueber
   das Vorzeichen. Wer sich hier vertut, stellt eine Forderung statt
   einer Gutschrift - das darf keine Zeile in einem Klappmenue sein. */

.belegwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
             gap: 12px; padding: 16px; }

.belegkachel { display: block; cursor: pointer; margin: 0; }
.belegkachel input { position: absolute; opacity: 0; pointer-events: none; }

.belegkachel-inhalt {
    display: block; padding: 12px 14px;
    border: 1.5px solid var(--rand); border-radius: 10px;
    background: var(--flaeche); transition: border-color .12s, background .12s;
}
.belegkachel:hover .belegkachel-inhalt { border-color: var(--akzent); }
.belegkachel input:checked + .belegkachel-inhalt {
    border-color: var(--akzent); background: var(--akzent-hell);
}
.belegkachel input:focus-visible + .belegkachel-inhalt { outline: 2px solid var(--akzent); outline-offset: 2px; }

.belegkachel-kopf {
    display: flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: 14.5px; margin-bottom: 3px;
}

/* --- Storno ---------------------------------------------------------- */

.stornofeld { padding: 0; margin-bottom: 16px; }
.stornofeld > summary {
    padding: 11px 16px; cursor: pointer; font-size: 13.5px; font-weight: 600;
    color: var(--warnung); display: flex; align-items: center; gap: 7px;
    list-style: none;
}
.stornofeld > summary::-webkit-details-marker { display: none; }
.stornofeld > summary::after { content: '▾'; margin-left: auto; font-weight: 400; }
.stornofeld[open] > summary::after { content: '▴'; }
.stornoform { padding: 0 16px 16px; }

.knopf.warnend { background: var(--warnung); border-color: var(--warnung); color: #fff; }
.knopf.warnend:hover { filter: brightness(1.08); }

/* Eine Zeile Formular ueber der Liste - zum Anlegen ohne Seitenwechsel. */
.kontozeile {
    display: flex; align-items: center; gap: 9px;
    flex-wrap: wrap; padding: 14px 16px;
}
.kontozeile input, .kontozeile select { margin: 0; }

/* --- Reiter ----------------------------------------------------------
   Was fachlich zusammengehoert, steht nebeneinander statt als vier
   Eintraege in der Seitenleiste. */

.reiter {
    display: flex; gap: 2px; flex-wrap: wrap;
    border-bottom: 1px solid var(--rand);
    margin-bottom: 16px;
}

.reiter a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; font-size: 13.5px; font-weight: 500;
    color: var(--text-leise); text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; white-space: nowrap;
}
.reiter a:hover { color: var(--text); background: var(--flaeche-alt); }
.reiter a.aktiv {
    color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 600;
}

/* --- Scan-Posteingang ------------------------------------------------ */

.scanraster {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.scankachel { padding: 14px 16px; margin: 0; }
.scankachel-kopf {
    display: flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: 13.5px; margin-bottom: 3px;
    overflow-wrap: anywhere;
}
.knopf.klein { font-size: 12px; padding: 4px 10px; }


/* --- Scan-Posteingang und Einrichtung -------------------------------- */

.scanraster {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.scankachel { padding: 14px 16px; margin: 0; }
.scankachel-kopf {
    display: flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: 13.5px; margin-bottom: 3px;
    overflow-wrap: anywhere;
}
.knopf.klein { font-size: 12px; padding: 4px 10px; }

/* Befehl oder Schluessel zum Abtippen bzw. Kopieren. */
.befehl {
    display: block; padding: 9px 12px; margin: 0;
    background: var(--flaeche-alt); border: 1px solid var(--rand);
    border-radius: 6px; font-family: Menlo, Consolas, monospace;
    font-size: 12.5px; overflow-x: auto; overflow-wrap: anywhere;
}
.ablauf { margin: 0; padding-left: 20px; line-height: 1.6; }
.ablauf li { margin-bottom: 7px; }

/* Was aus einem eingegangenen Beleg gelesen wurde. */
.erkannt {
    padding: 8px 10px; margin-bottom: 10px;
    background: var(--akzent-hell); border-radius: 6px;
    font-size: 13px; line-height: 1.45;
}