/*
 * Layout (Kern K9): Seitenleiste, untere Leiste, Meilensteine, Bestellung in drei Spalten, Kacheln und Auftragskarten.
 * Nur Darstellung nach der Klick-Demo (Desktop/Lieferanten Portal/Klick-Demo); Farben und Maße kommen aus tokens.css.
 * Wird nach app.css geladen und überschreibt dort nur das, was das neue Gerüst betrifft. Kein Inline-Stil, kein JavaScript nötig.
 *
 * Gliederung: 1 Gerüst und Seitenleiste, 2 untere Leiste (Lieferanten am Handy), 3 Meilensteine, 4 Bestellung in drei Spalten,
 *             5 Startseiten und Kacheln, 6 Auftragskarten des Lieferanten, 7 Feinschliff
 */
:root {
    --sb-breite: 14rem;
    --sb-breite-zu: 4.25rem;
    --tab-hoehe: 3.5rem;
    --inhalt-max: 90rem;
    --sb-bg: #1f1f1f;
    --sb-text: #cfd4da;
}

/* Testbetrieb ohne Mailversand (Kern K12): Hinweis ganz oben auf jeder Seite */
.testbetrieb-hinweis {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--status-gelb-bg);
    color: var(--status-gelb-text);
    border-bottom: 2px solid var(--status-gelb-stark);
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
}

/* ================================================================================================
   1. Gerüst und Seitenleiste
   ================================================================================================ */
.shell {
    display: block;
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
}

.shell-rechts {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

.shell-rechts > .site-main {
    flex: 1 0 auto;
    min-width: 0;
}

.sidebar {
    display: none;
}

.tabbar {
    display: none;
}

/* Unter 1024 px: Kopfzeile oben (bleibt beim Scrollen sichtbar), Hauptnavigation im Menü */
@media (max-width: 63.99rem) {
    .shell-intern .site-header,
    .shell-lief .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .shell-intern .main-nav,
    .shell-lief .main-nav {
        display: none;
    }

    .shell-intern .menu-hauptnav,
    .shell-lief .menu-hauptnav {
        display: block;
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--color-border);
    }
}

.menu-hauptnav a,
.user-menu-links a {
    gap: var(--space-2);
}

@media (min-width: 64rem) {
    .shell-intern,
    .shell-lief {
        display: grid;
        grid-template-columns: var(--sb-breite) minmax(0, 1fr);
        align-items: start;
    }

    .shell-intern.sb-zu,
    .shell-lief.sb-zu {
        grid-template-columns: var(--sb-breite-zu) minmax(0, 1fr);
    }

    .shell-intern .site-header,
    .shell-lief .site-header {
        display: none;
    }

    .sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        position: sticky;
        top: 0;
        height: 100vh;
        padding: var(--space-4) var(--space-3);
        background: var(--sb-bg);
        color: var(--sb-text);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .sb-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-2) var(--space-3);
        background: #ffffff;
        border-radius: var(--radius-m);
        color: var(--color-text);
        text-decoration: none;
    }

    .sb-brand img {
        display: block;
        width: auto;
        height: 2.25rem;
        max-width: 100%;
        object-fit: contain;
    }

    .sb-toggle {
        display: none;
        align-items: center;
        gap: var(--space-2);
        min-height: 2rem;
        padding: 0 var(--space-3);
        color: var(--sb-text);
        background: transparent;
        border: 1px solid #3a3a3a;
        border-radius: var(--radius-m);
        font: inherit;
        font-size: var(--font-size-s);
        cursor: pointer;
    }

    .js .sb-toggle {
        display: flex;
    }

    .sb-toggle:hover {
        background: #2e2e2e;
        color: #ffffff;
    }

    .sb-nav ul {
        display: grid;
        gap: var(--space-1);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sb-nav a,
    .sb-glocke {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-height: 2.75rem;
        padding: 0 var(--space-3);
        color: var(--sb-text);
        text-decoration: none;
        border-radius: var(--radius-m);
    }

    .sb-nav a:hover,
    .sb-glocke:hover {
        background: #2e2e2e;
        color: #ffffff;
    }

    .sb-nav a[aria-current="page"] {
        background: var(--brand-primary);
        color: var(--brand-on-primary);
        font-weight: 600;
    }

    .sidebar :focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 1px;
    }

    .nav-ic {
        flex: 0 0 auto;
        display: inline-block;
        width: 1.5rem;
        text-align: center;
    }

    .sb-user {
        position: relative;
        display: grid;
        gap: var(--space-1);
        margin-top: auto;
    }

    .sb-user-toggle {
        width: 100%;
        gap: var(--space-2);
        padding: 0 var(--space-2);
        color: #ffffff;
        background: #2b2b2b;
        border: 1px solid #3a3a3a;
    }

    .sb-user-toggle:hover,
    .sb-user-menu[open] > .sb-user-toggle {
        background: #353535;
    }

    .sb-avatar {
        flex: 0 0 auto;
        display: inline-grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: var(--brand-primary);
        color: #ffffff;
        font-weight: 700;
    }

    .sb-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sb-user-panel {
        top: auto;
        bottom: calc(100% + var(--space-1));
        left: 0;
        right: auto;
        width: calc(var(--sb-breite) - 1.5rem);
        max-width: 100%;
    }

    /* eingeklappt: nur Symbole */
    .sb-zu .sidebar {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .sb-zu .nav-label,
    .sb-zu .sb-toggle-text,
    .sb-zu .sb-glocke .glocke-zahl {
        display: none;
    }

    .sb-zu .sb-brand img {
        height: 1.75rem;
    }

    .sb-zu .sb-brand {
        padding: var(--space-1);
    }

    .sb-zu .sb-nav a,
    .sb-zu .sb-glocke {
        justify-content: center;
        padding: 0;
    }

    .sb-zu .sb-toggle {
        justify-content: center;
        padding: 0;
    }

    .sb-zu .sb-toggle-pfeil {
        transform: rotate(180deg);
    }

    .sb-zu .sb-user-toggle {
        justify-content: center;
        padding: 0;
    }

    .sb-zu .sb-user-panel {
        width: 14rem;
    }

    .shell-intern .site-main,
    .shell-lief .site-main {
        max-width: var(--inhalt-max);
        padding: var(--space-6) var(--space-5);
    }
}

/* ================================================================================================
   2. Untere Leiste (nur Lieferanten, unter 768 px)
   ================================================================================================ */
@media (max-width: 47.99rem) {
    .tabbar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tabbar ul {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .tabbar li {
        flex: 1 1 0;
        min-width: 0;
    }

    .tabbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: var(--tab-hoehe);
        padding: var(--space-1);
        color: var(--color-muted);
        font-size: 0.72rem;
        text-decoration: none;
        text-align: center;
    }

    .tabbar a[aria-current="page"] {
        color: var(--brand-primary-dark);
        font-weight: 700;
    }

    .tabbar a:focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: -3px;
    }

    .tabbar .nav-ic {
        position: relative;
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .tabbar .nav-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tab-zahl {
        position: absolute;
        top: -0.25rem;
        right: -0.6rem;
        min-width: 1.1rem;
        padding: 0 0.25rem;
        border-radius: 999px;
        background: var(--status-rot-stark);
        color: var(--status-rot-auf);
        font-size: 0.65rem;
        font-weight: 700;
        line-height: 1.1rem;
    }

    .shell-lief {
        padding-bottom: calc(var(--tab-hoehe) + env(safe-area-inset-bottom));
    }
}

/* ================================================================================================
   3. Meilenstein-Leiste
   ================================================================================================ */
.meilensteine {
    display: grid;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.ms {
    --ms-farbe: var(--status-grau);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-1) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 6px solid var(--ms-farbe);
    border-radius: var(--radius-s);
    font-size: var(--font-size-s);
}

.ms-punkt {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--ms-farbe);
}

.ms-name {
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ms-zustand {
    color: var(--color-muted);
    text-align: right;
    overflow-wrap: anywhere;
}

.ms-fertig { --ms-farbe: var(--status-gruen-stark); }
.ms-laeuft { --ms-farbe: var(--status-blau-stark); }
.ms-knapp { --ms-farbe: var(--status-gelb-stark); }
.ms-rot { --ms-farbe: var(--status-rot-stark); }
.ms-rot .ms-zustand { color: var(--status-rot-text); font-weight: 700; }
.ms-fertig .ms-zustand { color: var(--status-gruen-text); }
.ms-laeuft .ms-zustand { color: var(--status-blau-text); }
.ms-knapp .ms-zustand { color: var(--status-gelb-text); }
.ms-offen,
.ms-ungeplant { --ms-farbe: var(--status-grau); }

/* ohne Plan, aber schon versendet: neutral, wirkt nicht wie ein Mangel */
.ms-ohneplan {
    --ms-farbe: var(--color-border);
    background: transparent;
    border-style: dashed;
    color: var(--color-muted);
}

.ms-ohneplan .ms-name {
    font-weight: 400;
}

/* ab 40 rem: eine Leiste mit fünf Abschnitten nebeneinander, farbiger Balken oben */
@media (min-width: 40rem) {
    .meilensteine {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .ms {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 2px;
        padding: var(--space-2) var(--space-3);
        border-left: 1px solid var(--color-border);
        border-top: 6px solid var(--ms-farbe);
    }

    .ms-punkt {
        display: none;
    }

    .ms-zustand {
        text-align: left;
    }
}

/* in Karten (Auftragsliste) immer kompakt untereinander */
.feed-karte .meilensteine {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    margin: 0;
}

.feed-karte .ms {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 2px var(--space-2);
    border-left: 6px solid var(--ms-farbe);
    border-top: 1px solid var(--color-border);
}

.feed-karte .ms-punkt {
    display: block;
}

.feed-karte .ms-zustand {
    text-align: right;
}

/* ================================================================================================
   4. Bestellung in drei Spalten (intern)
   ================================================================================================ */
.bst-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.bst-3 > * {
    min-width: 0;
}

/* schmal: Fortschritt zuerst, dann Stammdaten, dann Dokumente */
.bst-3 .bst-haupt { order: 1; }
.bst-3 .bst-links { order: 2; }
.bst-3 .bst-rechts { order: 3; }

@media (min-width: 64rem) {
    .bst-3 {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    }

    .bst-3 .bst-links { order: 1; }
    .bst-3 .bst-haupt { order: 2; }
    .bst-3 .bst-rechts {
        order: 3;
        grid-column: 1 / -1;
    }
}

@media (min-width: 90rem) {
    .bst-3 {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) minmax(0, 22rem);
    }

    .bst-3 .bst-rechts {
        grid-column: auto;
    }
}

.bst-3 .card {
    min-width: 0;
    padding: var(--space-4);
    overflow-wrap: anywhere;
}

.bst-3 .card summary {
    cursor: pointer;
    list-style-position: inside;
}

.bst-3 .card summary h2 {
    display: inline;
    margin: 0;
}

.bst-3 .card details[open] > summary {
    margin-bottom: var(--space-3);
}

/* Karten in Karten (Dokumentbereiche) ohne zweiten Rahmen */
.bst-dokumente .card {
    margin: 0 0 var(--space-3);
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.bst-3 .table-wrap,
.bst-3 table {
    max-width: 100%;
}

.bst-3 .table-wrap {
    overflow-x: auto;
}

/* ================================================================================================
   5. Startseiten, Kacheln
   ================================================================================================ */
.start-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}

.start-kachel a {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-height: var(--touch-min);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 6px solid var(--status-blau-stark);
    border-radius: var(--radius-m);
}

.start-kachel a:hover {
    background: var(--color-surface-alt);
}

.start-kachel-warnung a { border-left-color: var(--status-rot-stark); }
.start-kachel-pruefen a { border-left-color: var(--status-gelb-stark); }

.start-kachel-zahl {
    font-size: var(--font-size-xxl);
    line-height: 1;
}

.aufgaben-warnung {
    border-left: 6px solid var(--status-rot-stark);
}

.aufgaben-pruefen {
    border-left: 6px solid var(--status-gelb-stark);
}

.aufgaben-weitergeleitet {
    border-left: 6px solid var(--status-blau-stark);
}

.kacheln {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
}

@media (min-width: 40rem) {
    .kacheln {
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    }
}

.kachel {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    height: 100%;
    padding: var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--brand-primary);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-s);
}

.kachel:hover {
    box-shadow: var(--shadow-m);
}

.kachel-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-m);
    background: var(--brand-primary-soft);
    color: var(--brand-primary-dark);
    font-size: 1.25rem;
}

.kachel-text {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    overflow-wrap: anywhere;
}

.kachel-titel {
    color: var(--brand-primary-dark);
}

/* ================================================================================================
   6. Auftragskarten des Lieferanten (Kartenfeed)
   ================================================================================================ */
.feed-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .feed-raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 80rem) {
    .feed-raster {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.feed-karte {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: var(--space-4);
    border-left: 6px solid var(--status-gruen-stark);
    overflow-wrap: anywhere;
}

.feed-gelb { border-left-color: var(--status-gelb-stark); }
.feed-rot { border-left-color: var(--status-rot-stark); }
.feed-blau { border-left-color: var(--status-blau-stark); }

.feed-karte p {
    margin: 0;
}

.feed-aktion {
    margin-top: auto;
    padding-top: var(--space-2);
}

.btn-gross {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    font-size: 1.05rem;
    text-align: center;
}

/* Angaben in der Karte zweispaltig: Bezeichnung links, Wert rechts (spart Höhe am Handy) */
.feed-karte .facts {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: 2px var(--space-3);
    margin: 0;
}

.feed-karte .facts dd {
    margin: 0;
}

/* Am Handy zeigt die untere Leiste die Glocke: oben nicht doppelt */
@media (max-width: 47.99rem) {
    .shell-lief .site-header .glocke {
        display: none;
    }
}

/* Aufgaben des Lieferanten ebenfalls als Karten mit Farbstreifen */
.shell-lief .aufgaben-liste > li {
    border-left: 6px solid var(--status-blau-stark);
}

.shell-lief .aufgaben-liste .aufgabe-ueberfaellig,
.shell-lief .aufgaben-liste .aufgabe-rot {
    border-left-color: var(--status-rot-stark);
}

/* ================================================================================================
   7. Feinschliff: nie seitlich scrollen
   ================================================================================================ */
.site-main {
    overflow-wrap: break-word;
}

.site-main img,
.site-main video {
    max-width: 100%;
    height: auto;
}

@media (max-width: 47.99rem) {
    .shell-lief .site-footer {
        margin-bottom: 0;
    }
}

@media print {
    .sidebar,
    .tabbar,
    .site-header,
    .site-footer {
        display: none;
    }
}