/* ZIP-Import-Tool — CSS für das ZIP-Import-Modal (frontend/js/zip-import-tool.js).
   .modal-tall (hohe Variante) liegt im Suite UI-Kit (css/ui-kit.css). */

.import-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-16);
    padding: var(--abstand-10) var(--abstand-14);
    background: var(--karte);
    border-radius: var(--rundung-mittel);
}

.import-status-row {
    display: flex;
    align-items: baseline;
    gap: var(--abstand-6);
}

.import-status-label {
    font-size: var(--schrift-xs);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-gedaempft);
}

.import-status-value {
    font-family: var(--schriftart-ui);
    font-size: var(--schrift-sm);
    color: var(--text);
}

.import-progress {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-6);
}

/* Eckig, keine runden Enden (Chris 05.08.2026, hausweit): Ein Balken zeigt
   einen Wert — eine gerundete Spitze macht den Endpunkt unscharf. */
.import-progress-track {
    height: 4px;
    background: var(--flaeche-gehoben);
    overflow: hidden;
    position: relative;
}

.import-progress-fill {
    height: 100%;
    background: var(--akzent);
    width: 0%;
    transition: width 120ms linear;
}

/* Indeterminate: ein wandernder Streifen, kein deterministisches Wachstum */
.import-progress.indeterminate .import-progress-fill {
    width: 30%;
    animation: import-indeterminate 1.2s ease-in-out infinite;
}

@keyframes import-indeterminate {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(440%); }
}

.import-progress.done .import-progress-fill {
    background: var(--ok);
}

/* Basis-Optik (Karte/Kopf/Zebra/Hover) kommt seit 03.07. aus dem Kit
   (.table-wrap + .table, »eine Zeilen-Sprache«) — hier nur noch Fachliches. */
.import-table-wrap {
    flex: 1;
    min-height: 200px;
}

/* Volle Höhe NUR im Empty-/Loading-Zustand setzen, damit die Empty-Zelle
   vertikal mittig im Wrap steht. Sobald echte Daten-Zeilen drin sind, lassen
   wir die Tabelle natürlich oben anwachsen — sonst würde eine einzelne
   gefilterte Zeile genau so mittig zentriert, was hässlich aussieht. */
.import-table:has(td.import-empty),
.import-table:has(td.import-loading) {
    height: 100%;
}

/* Lange Pfade/Gründe nicht umbrechen — Ellipsis statt Zeilen-Sprengung */
.import-table tbody td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.import-table .import-cell-file {
    max-width: 280px;
}

.import-table .import-cell-reason {
    max-width: 240px;
    color: var(--text-leise);
}

.import-table .import-num {
    text-align: right;
}

.import-row-ok       td { background: transparent; }
.import-row-skipped  td { background: rgba(202, 138, 4, 0.08); }
.import-row-error    td { background: rgba(239, 94, 110, 0.10); }

/* Zeilen-Status als Kit-Pille (.status status-ok/-warn/-err) — eigener
   Pillen-Eigenbau (.import-status-cell/-ok/…) am 03.07. entfernt. */

/* Empty-State: keine Trennlinie, Text vertikal + horizontal mittig in der
   verbleibenden Tabellen-Höhe. Höher spezifiziert als die Standard-td-Regel,
   damit der border-bottom dort sicher überschrieben wird. */
.import-table tbody td.import-empty,
.import-table tbody td.import-loading {
    padding: var(--abstand-20);
    text-align: center;
    vertical-align: middle;
    color: var(--text-leise);
    font-size: var(--schrift-sm);
    border-bottom: none;
    height: 100%;
}

.import-error-cell {
    color: var(--fehler);
}