/* Steckbrief-Layout der Fuhrpark-Seiten (Transportfahrzeug, Gespann) — Claude-Design „Transportfahrzeug
   Varianten“ 1b. Global statt CSS-Isolation, weil beide Seiten dieselben vd-*-Klassen nutzen. */
.vd-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #1F2340;
}

/* ---- Kopf mit Kennzeichen-Schild ---- */
.vd-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.vd-plate {
    flex: none;
    display: flex;
    align-items: stretch;
    height: 40px;
    border: 2px solid #1F2340;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

.vd-plate-eu {
    width: 20px;
    background: #1F48A8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 3px;
}

.vd-plate-text {
    padding: 0 10px;
    display: flex;
    align-items: center;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 19px;
    letter-spacing: .04em;
    color: #1F2340;
    white-space: nowrap;
}

.vd-head-main {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vd-title {
    margin: 0;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
    color: #171B3C;
    text-wrap: pretty;
}

.vd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vd-chip {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #EEF0F6;
    color: #4A4F6A;
}

.vd-chip.vd-st-success { background: #E3F2EA; color: #2E7D57; font-weight: 500; }
.vd-chip.vd-st-warning { background: #FDEBDD; color: #A4480A; font-weight: 500; }
.vd-chip.vd-st-error { background: #FDE4E2; color: #B03A2E; font-weight: 500; }

/* ---- Kennzahlen ---- */
.vd-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: #E3E5EE;
    border: 1px solid #E3E5EE;
    border-radius: 8px;
    overflow: hidden;
}

.vd-fact {
    background: var(--mud-palette-surface, #fff);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.vd-fact-label {
    font-size: 11px;
    color: #8A8FA8;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.vd-fact-value {
    font-size: 20px;
    font-weight: 500;
    color: #171B3C;
}

.vd-fact-sub {
    font-size: 12px;
    color: #8A8FA8;
    min-height: 1em;
}

/* ---- Karten ---- */
.vd-card {
    background: var(--mud-palette-surface, #fff);
    border: 1px solid #E3E5EE;
    border-radius: 8px;
    min-width: 0;
}

.vd-pad {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vd-label {
    font-size: 12px;
    color: #5F6480;
}

.vd-hint {
    margin: 0;
    font-size: 12px;
    color: #5F6480;
}

.vd-missing {
    color: #A4480A !important;
}

.vd-mono {
    font-family: 'Roboto Mono', ui-monospace, monospace;
}

/* ---- Schnellauswahl Status / Eigenschaften ---- */
.vd-quick {
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    align-items: center;
}

.vd-quick-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 300px;
}

.vd-segments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.vd-segment {
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 8px;
    min-height: 44px;
    border-radius: 6px;
    border: 1px solid #D5D8E3;
    background: #fff;
    color: #4A4F6A;
    cursor: pointer;
}

.vd-segment:disabled { cursor: default; }
.vd-segment:focus-visible { outline: 2px solid #171B3C; outline-offset: 2px; }
.vd-segment.on.vd-st-success { background: #E3F2EA; color: #2E7D57; border-color: #2E9B6A; }
.vd-segment.on.vd-st-warning { background: #FDEBDD; color: #A4480A; border-color: #F2791E; }
.vd-segment.on.vd-st-error { background: #FDE4E2; color: #B03A2E; border-color: #D3343A; }

.vd-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---- Abschnitte (Lesen / Bearbeiten) ---- */
.vd-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.vd-section.editing {
    border-color: #171B3C;
}

.vd-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #EEF0F5;
    min-height: 52px;
}

.vd-sec-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #171B3C;
}

.vd-section > .vd-hint {
    padding: 10px 16px 0;
}

.vd-sec-body {
    padding: 8px 16px 16px;
}

.vd-read {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 0;
    padding: 14px 16px 16px;
}

.vd-read-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vd-read-field.wide {
    grid-column: 1 / -1;
}

.vd-read-field dt {
    font-size: 11px;
    color: #8A8FA8;
}

.vd-read-field dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.vd-empty {
    color: #8A8FA8;
}

/* ---- Ladungscheck & Kilometergeld ---- */
.vd-extras {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.vd-load-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.vd-load-head .vd-sec-title {
    flex: none;
}

.vd-load-search {
    flex: 1 1 240px;
    min-width: 0;
}

.vd-bed-wrap {
    padding: 6px 16% 6px 0;
}

.vd-bed {
    position: relative;
    width: 100%;
    background-color: #E2E5EE;
    background-image: linear-gradient(90deg, rgba(23, 27, 60, .13) 1px, transparent 1px);
    border: 2px solid #9CA2BB;
    border-radius: 3px;
}

.vd-bed-item {
    position: absolute;
    left: 0;
    background: rgba(23, 27, 60, .86);
    border-radius: 2px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;
}

.vd-bed-item span {
    font-size: 11px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vd-bed-over {
    position: absolute;
    left: 100%;
    background: repeating-linear-gradient(45deg, #F2791E 0 5px, #F7B98A 5px 10px);
}

.vd-bed-front {
    position: absolute;
    left: -2px;
    top: -2px;
    bottom: -2px;
    width: 6px;
    background: #5F6480;
    border-radius: 2px;
}

.vd-bed-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: #5F6480;
    font-family: 'Roboto Mono', ui-monospace, monospace;
}

.vd-payload {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vd-payload-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #5F6480;
}

.vd-bar {
    height: 8px;
    border-radius: 4px;
    background: #E2E5EE;
    overflow: hidden;
}

.vd-bar-fill {
    height: 100%;
    transition: width .25s;
}

.vd-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
}

.vd-checks li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.4;
}

.vd-check-icon {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vd-check-key {
    color: #5F6480;
}

.vd-tone-ok { background: #2E9B6A; }
.vd-tone-warn { background: #F2791E; }
.vd-tone-bad { background: #D3343A; }

.vd-alert {
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #FDE4E2;
    color: #B03A2E;
}

.vd-km-big {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.vd-km-value {
    font-size: 28px;
    font-weight: 500;
    color: #171B3C;
}

.vd-km-unit {
    font-size: 13px;
    color: #5F6480;
}

.vd-km input[type=range] {
    width: 100%;
    accent-color: #F2791E;
}

.vd-km-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: #5F6480;
}

.vd-km-total {
    border-top: 1px solid #EEF0F5;
    padding-top: 10px;
}

.vd-km-cost {
    font-size: 20px;
    font-weight: 700;
    color: #171B3C;
}

/* ---- Fußleiste ---- */
.vd-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 -16px;
    background: var(--mud-palette-surface, #fff);
    border-top: 1px solid #E3E5EE;
}

.vd-status-dirty { font-size: 13px; color: #A4480A; }
.vd-status-saved { font-size: 13px; color: #2E7D57; }
.vd-status-idle { font-size: 13px; color: #8A8FA8; }

/* ---- Gespann: Zusammensetzung in Fahrtrichtung ---- */
.vd-units {
    list-style: none;
    margin: 0;
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
}

.vd-unit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 10px 0;
    border-top: 1px solid #EEF0F5;
}

.vd-unit:first-child {
    border-top: 0;
}

.vd-unit-role {
    flex: none;
    width: 92px;
    font-size: 11px;
    color: #8A8FA8;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.vd-unit-name {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 14px;
}

.vd-unit-data {
    flex: 1 1 260px;
    font-size: 12px;
    color: #5F6480;
}

.vd-unit-actions {
    flex: none;
    display: flex;
    gap: 2px;
}

.vd-unit-add {
    padding: 0 16px 16px;
}

/* ---- Responsiv ---- */
@media (max-width: 959.98px) {
    .vd-sections,
    .vd-extras {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599.98px) {
    .vd-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vd-fact-value {
        font-size: 17px;
    }

    .vd-title {
        font-size: 17px;
    }

    .vd-plate {
        height: 34px;
    }

    .vd-plate-eu {
        width: 16px;
    }

    .vd-plate-text {
        font-size: 16px;
    }

    .vd-read,
    .vd-checks {
        grid-template-columns: minmax(0, 1fr);
    }

    .vd-unit-role {
        width: 100%;
    }

    .vd-quick,
    .vd-pad {
        padding: 16px;
    }

    .vd-save {
        flex: 1 1 100%;
    }
}