/* ═══════════════════════════════════════════════════════════════
   StarshipOS — Frachtdeck (logistics/cargo)

   Eine Seite, drei Layouts nach dem Breakpoint-Vertrag aus
   responsive-v2.css:
     >= 1024 px  Buchten zweispaltig, Stellplatz-Panel als feste Spalte
     600–1023    Buchten zweispaltig, Panel als Seitenleiste mit Abdunklung
     <=  599 px  Buchtwahl B1–B4, eine Bucht, Panel als Bottom-Sheet

   Panel, Abdunklung und Meldung liegen ueber dem unteren Dock (z-index 900/901),
   solange ein Stellplatz offen ist.

   Alle Regeln sind mit .cargo-deck praefixiert — so setzen sie sich
   gegen die globalen Station-Regeln durch, ohne !important.
   ═══════════════════════════════════════════════════════════════ */

.cargo-deck {
    --cg-bg: var(--bg-primary, #080b12);
    --cg-panel: var(--bg-secondary, #141c28);
    --cg-sunken: var(--bg-panel, #101825);
    --cg-raised: var(--bg-raised, #1b2533);
    --cg-line: var(--border-color, #2a3648);
    --cg-line-strong: var(--border-strong, #5b6f8c);
    --cg-text: var(--text-primary, #f0f4ff);
    --cg-text-2: var(--text-secondary, #b6c2d6);
    --cg-muted: var(--text-muted, #8c9bb3);
    --cg-accent: #cbd5e1;
    --cg-focus: var(--focus-ring, #7dd3fc);
    --cg-hazmat: #fbbf24;
    --cg-fragile: #60a5fa;
    --cg-classified: #c4b5fd;
    --cg-system: #2dd4bf;
    --cg-ok: #10b981;
    --cg-warn: #f59e0b;
    --cg-crit: #ef4444;

    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 24px;
    box-sizing: border-box;
    color: var(--cg-text);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}
.cargo-deck *, .cargo-deck *::before, .cargo-deck *::after { box-sizing: border-box; }

.cargo-deck .cargo-icon { width: 16px; height: 16px; flex: none; color: var(--cg-text-2); }
.cargo-deck .cargo-icon-lg { width: 28px; height: 28px; color: var(--cg-accent); }
.cargo-deck .cargo-h2 { margin: 0; font-size: 0.9375rem; letter-spacing: 0.12em; text-transform: uppercase; }
.cargo-deck .cargo-h3 { margin: 0; font-size: 0.9375rem; letter-spacing: 0.12em; text-transform: uppercase; }
.cargo-deck .cargo-label { font-size: 0.75rem; font-weight: 600; color: var(--cg-text-2); letter-spacing: 0.06em; }
.cargo-deck .cargo-hint { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--cg-muted); }
.cargo-deck .cargo-empty { margin: 0; padding: 16px; color: var(--cg-muted); font-size: 0.8125rem; }

/* ── Reiter + Gesamtstand ─────────────────────────────────────── */
.cargo-deck .cargo-tabbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 -24px 16px; padding: 8px 24px;
    background: var(--cg-sunken); border-bottom: 1px solid var(--cg-line);
}
.cargo-deck .cargo-tabs { display: flex; gap: 4px; overflow-x: auto; min-width: 0; }
.cargo-deck .cargo-tab {
    flex: none; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--cg-line); border-radius: 4px; background: transparent; color: var(--cg-text-2);
    font: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap; cursor: pointer;
}
.cargo-deck .cargo-tab.is-active { background: var(--cg-accent); border-color: var(--cg-accent); color: #06131c; }
.cargo-deck .cargo-tab:focus-visible, .cargo-deck button:focus-visible, .cargo-deck .cargo-input:focus-visible {
    outline: 2px solid var(--cg-focus); outline-offset: 2px;
}
.cargo-deck .cargo-tab-short { display: none; }
.cargo-deck .cargo-totals { display: flex; gap: 12px; font-size: 0.75rem; color: var(--cg-text-2); letter-spacing: 0.06em; white-space: nowrap; }
.cargo-deck .cargo-totals strong { color: var(--cg-text); }

/* ── Grundgerüst: Inhalt + Stellplatz-Spalte ──────────────────── */
.cargo-deck .cargo-main { display: flex; gap: 24px; align-items: flex-start; }
.cargo-deck .cargo-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cargo-deck .cargo-view { display: none; flex-direction: column; gap: 16px; }
.cargo-deck .cargo-view.is-active { display: flex; }

/* ── Suche + Filter ───────────────────────────────────────────── */
.cargo-deck .cargo-filterbar { display: flex; flex-direction: column; gap: 10px; }
.cargo-deck .cargo-search, .cargo-deck .cargo-input {
    width: 100%; max-width: none; min-height: 44px; padding: 0 12px;
    background: var(--cg-sunken); border: 1px solid var(--cg-line-strong); border-radius: 5px;
    color: var(--cg-text); font: inherit; font-size: 0.875rem;
}
.cargo-deck .cargo-search { background: var(--cg-panel); }
.cargo-deck .cargo-search::placeholder, .cargo-deck .cargo-input::placeholder { color: var(--cg-muted); }
.cargo-deck .cargo-search-inline { max-width: 320px; }
.cargo-deck .cargo-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.cargo-deck .cargo-chip {
    flex: none; min-height: 36px; padding: 0 12px;
    border: 1px solid var(--cg-line); border-radius: 4px; background: transparent; color: var(--cg-text-2);
    font: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap; cursor: pointer;
}
.cargo-deck .cargo-chip.is-active { border-color: var(--cg-accent); background: rgba(203, 213, 225, 0.12); color: var(--cg-accent); }
.cargo-deck .cargo-chip.chip-hazmat.is-active { border-color: var(--cg-hazmat); background: rgba(251, 191, 36, 0.14); color: var(--cg-hazmat); }
.cargo-deck .cargo-chip.chip-fragile.is-active { border-color: var(--cg-fragile); background: rgba(96, 165, 250, 0.14); color: var(--cg-fragile); }
.cargo-deck .cargo-chip.chip-classified.is-active { border-color: var(--cg-classified); background: rgba(196, 181, 253, 0.14); color: var(--cg-classified); }
.cargo-deck .cargo-matches { font-size: 0.75rem; color: var(--cg-text-2); letter-spacing: 0.06em; }

/* ── Buchten ──────────────────────────────────────────────────── */
.cargo-deck .cargo-baypicker { display: none; }
.cargo-deck .cargo-bays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cargo-deck .cargo-bay {
    min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px;
    background: var(--cg-panel); border: 1px solid var(--cg-line); border-left: 3px solid var(--cg-accent); border-radius: 5px;
}
.cargo-deck .cargo-bay-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cargo-deck .cargo-bay-name { margin: 0; font-size: 0.9375rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.cargo-deck .cargo-bay-meta { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 0.75rem; color: var(--cg-text-2); letter-spacing: 0.06em; }
.cargo-deck .cargo-bay-hits:empty, .cargo-deck .cargo-baychip-hits:empty { display: none; }
.cargo-deck .cargo-bay-hits, .cargo-deck .cargo-baychip-hits { color: var(--cg-focus); font-weight: 700; }
.cargo-deck .cargo-bay-load { display: flex; flex-direction: column; gap: 6px; }
.cargo-deck .cargo-bay-mass { display: flex; justify-content: space-between; gap: 8px; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--cg-text-2); }
.cargo-deck .cargo-bay-mass span:first-child { color: var(--cg-text); }
.cargo-deck .cargo-bay-mass .is-low { color: var(--cg-hazmat); }

.cargo-deck .cargo-bar { display: block; width: 100%; height: 8px; background: #0a0f18; border: 1px solid var(--cg-line); border-radius: 3px; overflow: hidden; }
.cargo-deck .cargo-bar-segs { display: flex; gap: 1px; }
.cargo-deck .cargo-bar-thin { height: 4px; border: 0; border-radius: 2px; }
.cargo-deck .cargo-bar-seg, .cargo-deck .cargo-bar-fill { display: block; height: 100%; background: var(--cg-ok); }
.cargo-deck .tone-ok { background: var(--cg-ok); }
.cargo-deck .tone-warn { background: var(--cg-warn); }
.cargo-deck .tone-crit { background: var(--cg-crit); }

.cargo-deck .cargo-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cargo-deck .cargo-tile {
    min-width: 0; min-height: 118px; padding: 10px 10px 10px 12px;
    display: flex; flex-direction: column; gap: 6px; text-align: left;
    background: var(--cg-raised); color: var(--cg-text);
    border: 1px solid var(--cg-line); border-left: 3px solid var(--cg-accent); border-radius: 5px;
    font: inherit; cursor: pointer; transition: border-color 0.15s, opacity 0.15s;
}
.cargo-deck .cargo-tile:hover { border-color: var(--cg-line-strong); }
.cargo-deck .cargo-tile.stripe-hazmat { border-left-color: var(--cg-hazmat); }
.cargo-deck .cargo-tile.stripe-classified { border-left-color: var(--cg-classified); }
.cargo-deck .cargo-tile.stripe-fragile { border-left-color: var(--cg-fragile); }
.cargo-deck .cargo-tile.is-empty { background: transparent; border: 1px dashed #3a4a60; border-left: 3px dashed var(--cg-line); }
.cargo-deck .cargo-tile.is-dim { opacity: 0.25; }
.cargo-deck .cargo-tile.is-selected { outline: 2px solid var(--cg-focus); outline-offset: 1px; }
.cargo-deck .cargo-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cargo-deck .cargo-tile-label { font-size: 0.75rem; color: var(--cg-muted); letter-spacing: 0.08em; }
.cargo-deck .cargo-tile-name {
    font-size: 0.875rem; font-weight: 700; line-height: 1.25; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cargo-deck .cargo-tile-meta { font-size: 0.75rem; color: var(--cg-text-2); }
.cargo-deck .cargo-tile-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.cargo-deck .cargo-tile-free { margin: auto 0; font-size: 0.75rem; color: var(--cg-muted); letter-spacing: 0.08em; }

/* Kennzeichen */
.cargo-deck .flag-badge {
    display: inline-block; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--cg-accent);
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--cg-accent); background: transparent;
}
.cargo-deck .flag-hazmat { border-color: var(--cg-hazmat); color: var(--cg-hazmat); background: rgba(251, 191, 36, 0.14); }
.cargo-deck .flag-fragile { border-color: var(--cg-fragile); color: var(--cg-fragile); background: rgba(96, 165, 250, 0.14); }
.cargo-deck .flag-classified { border-color: var(--cg-classified); color: var(--cg-classified); background: rgba(196, 181, 253, 0.14); }
.cargo-deck .flag-system { border-color: var(--cg-system); color: var(--cg-system); background: rgba(45, 212, 191, 0.12); }
.cargo-deck .flag-info { border-color: var(--cg-fragile); color: var(--cg-fragile); background: rgba(96, 165, 250, 0.1); }

/* ── Karten (Manifest, Vorräte, Frachtbuch) ───────────────────── */
.cargo-deck .cargo-card {
    background: var(--cg-panel); border: 1px solid var(--cg-line); border-left: 3px solid var(--cg-accent); border-radius: 5px;
}
.cargo-deck .cargo-card-list { overflow: hidden; }
.cargo-deck .cargo-card-head {
    display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid var(--cg-line);
}
.cargo-deck .cargo-block-pad { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.cargo-deck .cargo-block-pad > .cargo-card-head { margin-bottom: 0; }
.cargo-deck .cargo-block-pad > :not(.cargo-card-head) { margin: 0 16px; }
.cargo-deck .cargo-stores { display: flex; flex-direction: column; gap: 16px; }
.cargo-deck .cargo-block { display: flex; flex-direction: column; gap: 10px; }
.cargo-deck .cargo-list-count { margin: 0; padding: 8px 16px; font-size: 0.75rem; color: var(--cg-text-2); border-bottom: 1px solid #1f2a3a; }

.cargo-deck .cargo-man-row {
    width: 100%; display: grid; grid-template-columns: minmax(0, 2.4fr) 1fr 0.8fr 0.8fr 1.2fr; gap: 4px 16px; align-items: center;
    padding: 10px 16px; border: 0; border-bottom: 1px solid #1f2a3a; background: transparent; color: var(--cg-text);
    font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
}
.cargo-deck .cargo-man-row:hover { background: var(--cg-raised); }
.cargo-deck .cargo-man-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cargo-deck .cargo-man-text { display: flex; flex-direction: column; min-width: 0; }
.cargo-deck .cargo-man-cat, .cargo-deck .cargo-man-kg { font-size: 0.75rem; color: var(--cg-text-2); }
.cargo-deck .cargo-man-slot { font-size: 0.8125rem; color: var(--cg-accent); letter-spacing: 0.06em; }
.cargo-deck .cargo-man-flags { display: flex; gap: 4px; flex-wrap: wrap; }

.cargo-deck .cargo-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cargo-deck .cargo-stat-card {
    display: flex; flex-direction: column; gap: 4px; padding: 12px;
    background: var(--cg-panel); border: 1px solid var(--cg-line); border-left: 3px solid var(--cg-accent); border-radius: 5px;
}
.cargo-deck .cargo-stat-card[data-cat="NAHRUNG"], .cargo-deck .cargo-stat-card[data-cat="GETRAENKE"] { border-left-color: #34d399; }
.cargo-deck .cargo-stat-card[data-cat="MEDIZIN"] { border-left-color: #2dd4bf; }
.cargo-deck .cargo-stat-card[data-cat="TREIBSTOFF"] { border-left-color: var(--cg-hazmat); }
.cargo-deck .cargo-stat-card[data-cat="ERSATZTEILE"], .cargo-deck .cargo-stat-card[data-cat="MATERIAL"] { border-left-color: #22d3ee; }
.cargo-deck .cargo-stat-label { font-size: 0.75rem; color: var(--cg-text-2); letter-spacing: 0.06em; text-transform: uppercase; }
.cargo-deck .cargo-stat-value { font-size: 1.0625rem; font-weight: 700; }
.cargo-deck .cargo-stat-card.is-empty .cargo-stat-value { color: #f87171; }
.cargo-deck .cargo-stat-meta { font-size: 0.75rem; color: var(--cg-muted); }

.cargo-deck .cargo-system-list { display: flex; flex-direction: column; }
.cargo-deck .cargo-system-row {
    display: grid; grid-template-columns: minmax(0, 2fr) 1fr minmax(0, 1.5fr); gap: 4px 16px; align-items: baseline;
    padding: 8px 0; border-bottom: 1px solid #1f2a3a; font-size: 0.875rem;
}
.cargo-deck .cargo-system-name { display: flex; gap: 8px; flex-wrap: wrap; }
.cargo-deck .cargo-system-name span { color: var(--cg-text-2); font-size: 0.75rem; }
.cargo-deck .cargo-system-where { color: var(--cg-accent); font-size: 0.8125rem; }
.cargo-deck .cargo-system-row.is-missing .cargo-system-qty { color: #f87171; }

.cargo-deck .cargo-tanks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.cargo-deck .cargo-tank { display: flex; flex-direction: column; gap: 4px; }
.cargo-deck .cargo-tank-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8125rem; }
.cargo-deck .cargo-tank-amount { color: var(--cg-text-2); }

.cargo-deck .cargo-ledger-row {
    display: grid; grid-template-columns: 80px minmax(0, 1fr) 80px 80px; gap: 4px 16px; align-items: baseline;
    padding: 10px 16px; border-bottom: 1px solid #1f2a3a;
}
.cargo-deck .cargo-ledger-time { font-size: 0.75rem; color: var(--cg-muted); }
.cargo-deck .cargo-ledger-text { display: flex; flex-direction: column; min-width: 0; font-size: 0.875rem; }
.cargo-deck .cargo-ledger-text span { font-size: 0.75rem; color: var(--cg-text-2); }
.cargo-deck .cargo-ledger-delta { text-align: right; font-weight: 700; font-size: 0.875rem; }
.cargo-deck .cargo-ledger-row.is-out .cargo-ledger-delta { color: #f87171; }
.cargo-deck .cargo-ledger-row.is-in .cargo-ledger-delta { color: #34d399; }
.cargo-deck .cargo-ledger-rest { text-align: right; font-size: 0.75rem; color: var(--cg-text-2); }

/* ── Stellplatz-Panel ─────────────────────────────────────────── */
.cargo-deck .cargo-detail {
    flex: none; width: 380px; position: sticky; top: 0; max-height: calc(100vh - 24px); overflow-y: auto;
    display: flex; flex-direction: column;
    background: var(--cg-panel); border: 1px solid var(--cg-line); border-radius: 5px;
}
.cargo-deck[data-tab]:not([data-tab="buchten"]) .cargo-detail { display: none; }
/* Ohne gewählten Stellplatz keine leere Spalte: die Buchten bekommen die volle Breite. */
.cargo-deck:not(.is-detail-open) .cargo-detail { display: none; }
.cargo-deck .cargo-sheet-grip { display: none; }
.cargo-deck .cargo-detail-empty { padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cargo-deck .cargo-detail-empty p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--cg-text-2); }
.cargo-deck .cargo-detail-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 16px; border-bottom: 1px solid var(--cg-line);
}
.cargo-deck .cargo-detail-where { font-size: 0.75rem; color: var(--cg-accent); letter-spacing: 0.1em; }
.cargo-deck .cargo-close {
    min-width: 44px; min-height: 44px; border: 1px solid var(--cg-line); border-radius: 5px;
    background: var(--cg-raised); color: var(--cg-text); font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer;
}
.cargo-deck .cargo-detail-inner { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.cargo-deck .cargo-msg {
    margin: 0; padding: 8px 12px; border-radius: 5px; font-size: 0.8125rem; line-height: 1.4;
    border: 1px solid var(--cg-line); border-left-width: 3px;
}
.cargo-deck .cargo-msg.is-ok { border-color: #34d399; color: #a7f3d0; background: rgba(52, 211, 153, 0.1); }
.cargo-deck .cargo-msg.is-warn { border-color: var(--cg-hazmat); color: #fde68a; background: rgba(251, 191, 36, 0.12); }
.cargo-deck .cargo-item-head { display: flex; flex-direction: column; gap: 8px; }
.cargo-deck .cargo-item-cat { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--cg-text-2); letter-spacing: 0.06em; text-transform: uppercase; }
.cargo-deck .cargo-item-name { margin: 0; font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.cargo-deck .cargo-item-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.cargo-deck .cargo-sub { font-size: 0.8125rem; color: var(--cg-text-2); }
.cargo-deck .cargo-stats {
    margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--cg-line); border: 1px solid var(--cg-line); border-radius: 5px; overflow: hidden;
}
.cargo-deck .cargo-stats > div { background: var(--cg-sunken); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cargo-deck .cargo-stats dt { font-size: 0.75rem; color: var(--cg-muted); letter-spacing: 0.06em; }
.cargo-deck .cargo-stats dd { margin: 0; font-size: 0.875rem; }
.cargo-deck .cargo-stats dd.is-big { font-size: 1.0625rem; font-weight: 700; }
.cargo-deck .cargo-pieces { display: flex; flex-direction: column; gap: 8px; }
.cargo-deck .cargo-pieces ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cargo-deck .cargo-pieces li { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 44px; gap: 8px; align-items: center; font-size: 0.8125rem; }
.cargo-deck .cargo-piece-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cargo-deck .cargo-piece-pct { text-align: right; color: var(--cg-text-2); }

.cargo-deck .cargo-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cargo-deck .cargo-form-sep { padding-top: 12px; border-top: 1px solid var(--cg-line); }
.cargo-deck .cargo-row { display: flex; gap: 6px; }
.cargo-deck .cargo-row > .cargo-btn { flex: 1; min-width: 0; }
.cargo-deck .cargo-stepper { display: flex; gap: 6px; align-items: stretch; }
.cargo-deck .cargo-step {
    width: 48px; min-height: 48px; flex: none; border: 1px solid var(--cg-line-strong); border-radius: 5px;
    background: var(--cg-raised); color: var(--cg-text); font: inherit; font-size: 1.0625rem; font-weight: 700; cursor: pointer;
}
.cargo-deck .cargo-input-big { flex: 1; min-width: 0; min-height: 48px; text-align: center; font-size: 1.0625rem; font-weight: 700; }
.cargo-deck .cargo-input-narrow { width: 96px; flex: none; }
.cargo-deck .cargo-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.cargo-deck .cargo-quick-btn {
    min-height: 36px; padding: 0 10px; border: 1px solid var(--cg-line); border-radius: 4px;
    background: transparent; color: var(--cg-text-2); font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer;
}
.cargo-deck .cargo-btn {
    min-height: 44px; padding: 0 16px; border-radius: 5px; border: 1px solid var(--cg-accent);
    font: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.cargo-deck .cargo-btn-primary { min-height: 48px; background: var(--cg-accent); color: #06131c; }
.cargo-deck .cargo-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.cargo-deck .cargo-btn-outline { background: transparent; color: var(--cg-accent); }
.cargo-deck .cargo-btn-danger-outline { background: transparent; border-color: #f87171; color: #f87171; width: 100%; }
.cargo-deck .cargo-btn-danger { background: #ef4444; border-color: #ef4444; color: #fff; }
.cargo-deck .cargo-confirm { display: flex; flex-direction: column; gap: 8px; }
.cargo-deck .cargo-confirm[hidden] { display: none; }
.cargo-deck .cargo-confirm-text { font-size: 0.8125rem; color: #f87171; }
.cargo-deck .cargo-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 0.75rem; font-weight: 600; color: var(--cg-text-2); letter-spacing: 0.06em; }
.cargo-deck .cargo-field[hidden] { display: none; }
.cargo-deck .cargo-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cargo-deck select.cargo-input:disabled, .cargo-deck input.cargo-input:disabled { opacity: 0.55; }
.cargo-deck .cargo-flag-toggles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cargo-deck .cargo-flag-toggle {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px;
    border: 1px solid var(--cg-line); border-radius: 4px; color: var(--cg-text-2);
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
}
.cargo-deck .cargo-flag-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cargo-deck .cargo-flag-toggle:focus-within { outline: 2px solid var(--cg-focus); outline-offset: 2px; }
.cargo-deck .toggle-hazmat:has(input:checked) { border-color: var(--cg-hazmat); color: var(--cg-hazmat); background: rgba(251, 191, 36, 0.14); }
.cargo-deck .toggle-fragile:has(input:checked) { border-color: var(--cg-fragile); color: var(--cg-fragile); background: rgba(96, 165, 250, 0.14); }
.cargo-deck .toggle-classified:has(input:checked) { border-color: var(--cg-classified); color: var(--cg-classified); background: rgba(196, 181, 253, 0.14); }
.cargo-deck .cargo-mass-preview:empty { display: none; }
.cargo-deck .cargo-mass-preview {
    font-size: 0.8125rem; color: var(--cg-text-2); padding: 8px 12px; border: 1px solid var(--cg-text-2); border-radius: 5px;
}
.cargo-deck .cargo-mass-preview.is-over { color: var(--cg-hazmat); border-color: var(--cg-hazmat); background: rgba(251, 191, 36, 0.14); }

.cargo-deck .cargo-scrim { position: fixed; inset: 0; z-index: 1090; background: rgba(8, 11, 18, 0.72); }
.cargo-deck .cargo-scrim[hidden] { display: none; }
.cargo-deck .cargo-toast {
    position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 1150;
    max-width: calc(100% - 24px); padding: 10px 14px; border-radius: 5px;
    background: var(--cg-sunken); border: 1px solid #34d399; border-left-width: 3px; color: var(--cg-text);
    font-size: 0.8125rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.cargo-deck .cargo-toast.is-warn { border-color: var(--cg-hazmat); }
.cargo-deck .cargo-toast[hidden] { display: none; }

/* ═══ Tablet + Phone ═══════════════════════════════════════════ */
@media (max-width: 1023px) {
    .cargo-deck { padding: 0 16px 16px; }
    .cargo-deck .cargo-tabbar { margin: 0 -16px 16px; padding: 8px 16px; }
    .cargo-deck .cargo-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══ Bis 1279 px (Tablets quer, kleine Laptops): Panel als Überlagerung ═══
   Eine feste 380-px-Spalte frisst hier ein Drittel der Breite; die Buchten brauchen sie. */
@media (max-width: 1279px) {
    .cargo-deck[data-tab]:not([data-tab="buchten"]) .cargo-detail,
    .cargo-deck .cargo-detail {
        display: none; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100;
        width: 400px; max-width: 100%; max-height: none; border-radius: 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
    }
    .cargo-deck.is-detail-open .cargo-detail { display: flex; }
}

/* ═══ Phone ════════════════════════════════════════════════════ */
@media (max-width: 599px) {
    .cargo-deck { padding: 0 12px 12px; }
    .cargo-deck .cargo-tabbar { margin: 0 -12px 12px; padding: 8px 12px; }
    .cargo-deck .cargo-tabs { flex: 1; }
    .cargo-deck .cargo-tab { flex: 1 1 0; min-width: 0; padding: 0 6px; }
    .cargo-deck .cargo-tab-long, .cargo-deck .cargo-totals-occ { display: none; }
    .cargo-deck .cargo-tab-short { display: inline; }
    .cargo-deck .cargo-tabbar { flex-wrap: wrap; }
    .cargo-deck .cargo-totals { width: 100%; justify-content: flex-end; }

    .cargo-deck .cargo-baypicker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
    .cargo-deck .cargo-baychip {
        min-height: 64px; padding: 8px; display: flex; flex-direction: column; gap: 6px; text-align: left;
        border: 1px solid var(--cg-line); border-radius: 5px; background: var(--cg-panel); color: var(--cg-text);
        font: inherit; cursor: pointer;
    }
    .cargo-deck .cargo-baychip.is-active { border-color: var(--cg-accent); background: var(--cg-raised); }
    .cargo-deck .cargo-baychip-top { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; }
    .cargo-deck .cargo-baychip-occ { font-size: 0.75rem; color: var(--cg-text-2); }
    .cargo-deck .cargo-bays { grid-template-columns: 1fr; }
    .cargo-deck .cargo-bay:not(.is-picked) { display: none; }
    .cargo-deck .cargo-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cargo-deck .cargo-tile { min-height: 112px; }

    .cargo-deck .cargo-search-inline { max-width: none; }
    .cargo-deck .cargo-man-row { grid-template-columns: minmax(0, 1fr) auto; }
    .cargo-deck .cargo-man-kg, .cargo-deck .cargo-man-flags:empty { display: none; }
    .cargo-deck .cargo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cargo-deck .cargo-tanks { grid-template-columns: 1fr; }
    .cargo-deck .cargo-system-row { grid-template-columns: minmax(0, 1fr) auto; }
    .cargo-deck .cargo-system-where { grid-column: 1 / -1; }
    .cargo-deck .cargo-ledger-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
    .cargo-deck .cargo-ledger-rest { display: none; }

    /* Bottom-Sheet */
    .cargo-deck[data-tab]:not([data-tab="buchten"]) .cargo-detail,
    .cargo-deck .cargo-detail {
        top: auto; left: 0; width: 100%; max-height: 84dvh;
        border-radius: 10px 10px 0 0; padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .cargo-deck .cargo-sheet-grip { display: flex; justify-content: center; padding-top: 8px; }
    .cargo-deck .cargo-sheet-grip span { width: 40px; height: 4px; border-radius: 2px; background: var(--cg-line-strong); }
}