/*
 * Designs mit eigenem Aufbau. Farben und Schrift kommen aus tokens.css,
 * hier steht nur, was Cockpit und Leitstand an Anordnung und Darstellung ändern.
 */

/* ===== Cockpit: Seitenleiste links, kompakte Listen ===== */

/* Symbole in der Navigation (Seitenleiste am PC, untere Leiste am Handy) */
[data-design="cockpit"] .haupt-nav a::before {
    content: "";
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    background: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}
[data-design="cockpit"] .haupt-nav a[href="/"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
[data-design="cockpit"] .haupt-nav a[href="/wareneingang"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14h4l2 3h4l2-3h4M4 14l2-9h12l2 9v6H4zM12 4v7M9 8l3 3 3-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14h4l2 3h4l2-3h4M4 14l2-9h12l2 9v6H4zM12 4v7M9 8l3 3 3-3'/%3E%3C/svg%3E"); }
[data-design="cockpit"] .haupt-nav a[href="/lager"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v16H3zM3 10h18M3 15h18M9 4v16M15 4v16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v16H3zM3 10h18M3 15h18M9 4v16M15 4v16'/%3E%3C/svg%3E"); }
[data-design="cockpit"] .haupt-nav a[href="/bereitstellung"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4zM4 10h16M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4zM4 10h16M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E"); }
[data-design="cockpit"] .haupt-nav a[href="/radsaetze"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E"); }
[data-design="cockpit"] .haupt-nav a[href="/teilenummer"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h4v12H4zM10 6h2v12h-2zM14 6h1v12h-1zM17 6h3v12h-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h4v12H4zM10 6h2v12h-2zM14 6h1v12h-1zM17 6h3v12h-3z'/%3E%3C/svg%3E"); }
[data-design="cockpit"] .haupt-nav a[href="/admin"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1M15 4v4M9 10v4M17 16v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1M15 4v4M9 10v4M17 16v4'/%3E%3C/svg%3E"); }

/* Listen wie eine Tabelle: Zeilen mit Trennlinien statt einzelner Karten */
[data-design="cockpit"] .satzliste {
    gap: 0;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    overflow: hidden;
}
[data-design="cockpit"] .satzkarte {
    padding: var(--abstand-2) var(--abstand-4);
    border: 0;
    border-bottom: 1px solid var(--farbe-linie);
    border-radius: 0;
}
[data-design="cockpit"] .satzkarte:last-child { border-bottom: 0; }
[data-design="cockpit"] .satzkarte__kennzeichen { font-size: var(--schrift-normal); }
[data-design="cockpit"] .satzkarte__zeit strong { font-size: var(--schrift-normal); }
[data-design="cockpit"] .lagerort { font-size: var(--schrift-normal); }
[data-design="cockpit"] .karte { padding: var(--abstand-4); }
[data-design="cockpit"] .kachel__wert, [data-design="cockpit"] .kennzahlen dd { font-size: 1.5rem; }
[data-design="cockpit"] .tabelle th, [data-design="cockpit"] .tabelle td { padding: var(--abstand-2) var(--abstand-3); }
[data-design="cockpit"] .kopf { padding-block: var(--abstand-2); }

@media (min-width: 56.01rem) {
    [data-design="cockpit"] body:has(.haupt-nav) { padding-left: var(--leiste-breite); }
    [data-design="cockpit"] body:has(.haupt-nav) .kopf__marke { display: none; }
    [data-design="cockpit"] .haupt-nav {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 20;
        width: var(--leiste-breite);
        flex-direction: column;
        gap: 2px;
        padding: var(--abstand-4) var(--abstand-3);
        background: var(--leiste);
        border: 0;
        overflow-y: auto;
    }
    [data-design="cockpit"] .haupt-nav::before {
        content: "Räderlogistik";
        padding: var(--abstand-1) var(--abstand-3) var(--abstand-4);
        color: #ffffff;
        font-size: 1.125rem;
        font-weight: var(--schrift-gewicht-titel);
    }
    [data-design="cockpit"] .haupt-nav a {
        gap: var(--abstand-3);
        min-height: 2.5rem;
        padding: 0 var(--abstand-3);
        color: var(--leiste-text);
        border: 0;
        border-radius: var(--radius-klein);
    }
    [data-design="cockpit"] .haupt-nav a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
    [data-design="cockpit"] .haupt-nav a[aria-current="page"] { color: var(--farbe-akzent-text); background: var(--farbe-akzent); font-weight: var(--schrift-gewicht-fett); }
    [data-design="cockpit"] .haupt-nav a:focus-visible { outline-color: #ffffff; }
    /* Verwaltung unten in der Leiste */
    [data-design="cockpit"] .haupt-nav__verwaltung { margin-top: auto; }
}

@media (max-width: 56rem) {
    [data-design="cockpit"] .haupt-nav a { flex-direction: column; gap: 2px; }
}

/* ===== Leitstand: dunkle Anzeigetafel ===== */

[data-design="leitstand"] h1, [data-design="leitstand"] h2,
[data-design="leitstand"] .kopf__marke, [data-design="leitstand"] .haupt-nav a,
[data-design="leitstand"] .knopf, [data-design="leitstand"] .marke,
[data-design="leitstand"] .satzkarte__kennzeichen, [data-design="leitstand"] legend {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
[data-design="leitstand"] .kopf__marke { letter-spacing: 0.12em; }

/* Zeilen wie auf einer Abfahrtstafel */
[data-design="leitstand"] .satzliste {
    gap: 0;
    border-top: 1px solid var(--farbe-linie);
}
[data-design="leitstand"] .satzkarte {
    padding: var(--abstand-3) var(--abstand-2);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--farbe-linie);
    border-radius: 0;
}
[data-design="leitstand"] .satzkarte--erledigt { opacity: 0.55; background: transparent; }
[data-design="leitstand"] .satzkarte__kennzeichen { font-size: 1.5rem; }
[data-design="leitstand"] .satzkarte__zeit strong { font-size: 1.5rem; color: var(--farbe-text); }

/* Lagerplätze als leuchtende Felder */
[data-design="leitstand"] .lagerort {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    color: var(--farbe-akzent);
    background: var(--farbe-flaeche-2);
    border-radius: var(--radius-klein);
    letter-spacing: 0.04em;
}
/* Nur Textlinks hellblau; Knöpfe, Platzfelder, Kacheln und Marken behalten ihre eigenen Farben */
[data-design="leitstand"] a:not([class]) { color: var(--leitstand-link, var(--farbe-akzent)); }
[data-design="leitstand"] .kopf__marke { color: var(--farbe-kopf-text); }
[data-design="leitstand"] .haupt-nav a, [data-design="leitstand"] .knopf, [data-design="leitstand"] .kachel { color: inherit; }
[data-design="leitstand"] .knopf:not(.knopf--still):not(.knopf--gefahr) { color: var(--farbe-akzent-text); }
[data-design="leitstand"] .knopf--still { color: var(--farbe-text); }
[data-design="leitstand"] .kopf__konto a { color: var(--farbe-text); }
[data-design="leitstand"] .kachel { border-left-color: var(--farbe-akzent); }
[data-design="leitstand"] .kachel__wert { color: var(--farbe-akzent); }
[data-design="leitstand"] .kachel--warnung .kachel__wert { color: var(--farbe-fehler); }
[data-design="leitstand"] .karte, [data-design="leitstand"] .kachel,
[data-design="leitstand"] .kennzahlen > div, [data-design="leitstand"] .tabelle-rahmen { background: var(--farbe-flaeche); }
[data-design="leitstand"] .haupt-nav { background: var(--farbe-grund); }
[data-design="leitstand"] .haupt-nav a[aria-current="page"] { color: var(--farbe-akzent); }

/* Cockpit: alle fünf Kennzahlen in einer Reihe, wenn Platz ist */
[data-design="cockpit"] .kacheln { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }

/* Leitstand am Handy: untere Leiste ohne Versalien, damit alle Wörter ungetrennt passen */
@media (max-width: 56rem) {
    [data-design="leitstand"] .haupt-nav a { text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
}