/* ===========================================================================
   EKG Geräte — Stylesheet der Geräte-App (/devices/)
   Gleiches Designsystem wie das Leitwarte-Dashboard (../app.css): neutrale
   Grautöne, Kirchen-Violett als einziger Akzent, Haarlinien statt Schatten.
   Statusfarben (grün/gelb/rot) nur dort, wo etwas Aufmerksamkeit braucht.

   Farbschema: html.theme-dark / html.theme-light (gleiche Wahl wie im
   Dashboard, siehe theme.js). Ohne Wahl entscheidet das System.
   Wichtig: Die CSP erlaubt keine style-Attribute — Sichtbarkeit läuft über
   das hidden-Attribut, nie über style="display:none".
   =========================================================================== */

:root {
    color-scheme: light;
    --bg: #f8f8fa;
    --surface: #ffffff;
    --surface2: #f4f4f6;
    --surface3: #ebebef;
    --border: #e6e6eb;
    --border-strong: #d5d5dc;
    --text: #17171c;
    --text-2: #3f3f48;
    --muted: #6b6b77;
    --subtle: #9e9eaa;

    --accent: #6d28d9;
    --accent-hover: #5b21b6;
    --accent-bg: #f4f0ff;
    --accent-border: #ddd3fd;
    --primary: #7c3aed;
    --primary-hover: #6d28d9;
    --ring: rgba(124, 58, 237, 0.32);

    --ok: #15803d;
    --ok-bg: #effaf3;
    --ok-border: #c8ecd5;
    --ok-dot: #22c55e;
    --warn: #b45309;
    --warn-bg: #fff8eb;
    --warn-border: #fbe2b5;
    --error: #dc2626;
    --error-bg: #fef3f2;
    --error-border: #fbd5d1;

    --scrim: rgba(12, 12, 18, 0.32);

    --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --shadow-xs: 0 1px 2px rgba(20, 20, 30, 0.05);
    --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.04), 0 2px 8px rgba(20, 20, 30, 0.04);
    --shadow-md: 0 1px 3px rgba(20, 20, 30, 0.05), 0 6px 16px rgba(20, 20, 30, 0.06);
    --shadow-lg: 0 2px 6px rgba(20, 20, 30, 0.06), 0 16px 40px rgba(20, 20, 30, 0.12);

    --radius-lg: 14px;
    --radius: 10px;
    --radius-sm: 8px;
    --radius-xs: 6px;

    --nav-hover: #efeff2;
    --nav-active: #e9e9ee;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 300ms;

    --bottom-nav-h: 64px;
}

/* Dunkles Schema — zweimal notiert, weil es sowohl per System als auch per
   ausdrücklicher Wahl (Dashboard-Schalter) greifen muss. */
html.theme-dark {
    color-scheme: dark;
    --bg: #0b0b0e;
    --surface: #131317;
    --surface2: #1a1a1f;
    --surface3: #232329;
    --border: #25252c;
    --border-strong: #34343d;
    --text: #ececf1;
    --text-2: #c6c6d0;
    --muted: #8e8e9b;
    --subtle: #62626d;
    --accent: #b5a0fc;
    --accent-hover: #cdbfff;
    --accent-bg: rgba(139, 92, 246, 0.14);
    --accent-border: rgba(139, 92, 246, 0.36);
    --primary: #7c3aed;
    --primary-hover: #8b5cf6;
    --ring: rgba(167, 139, 250, 0.45);
    --ok: #4ade80;
    --ok-bg: rgba(34, 197, 94, 0.1);
    --ok-border: rgba(34, 197, 94, 0.26);
    --warn: #fbbf24;
    --warn-bg: rgba(245, 158, 11, 0.1);
    --warn-border: rgba(245, 158, 11, 0.28);
    --error: #f87171;
    --error-bg: rgba(239, 68, 68, 0.1);
    --error-border: rgba(239, 68, 68, 0.3);
    --scrim: rgba(0, 0, 0, 0.55);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.5);
    --nav-hover: #18181d;
    --nav-active: #1f1f25;
}
@media (prefers-color-scheme: dark) {
    html:not(.theme-light):not(.theme-dark) {
        color-scheme: dark;
        --bg: #0b0b0e;
        --surface: #131317;
        --surface2: #1a1a1f;
        --surface3: #232329;
        --border: #25252c;
        --border-strong: #34343d;
        --text: #ececf1;
        --text-2: #c6c6d0;
        --muted: #8e8e9b;
        --subtle: #62626d;
        --accent: #b5a0fc;
        --accent-hover: #cdbfff;
        --accent-bg: rgba(139, 92, 246, 0.14);
        --accent-border: rgba(139, 92, 246, 0.36);
        --primary: #7c3aed;
        --primary-hover: #8b5cf6;
        --ring: rgba(167, 139, 250, 0.45);
        --ok: #4ade80;
        --ok-bg: rgba(34, 197, 94, 0.1);
        --ok-border: rgba(34, 197, 94, 0.26);
        --warn: #fbbf24;
        --warn-bg: rgba(245, 158, 11, 0.1);
        --warn-border: rgba(245, 158, 11, 0.28);
        --error: #f87171;
        --error-bg: rgba(239, 68, 68, 0.1);
        --error-border: rgba(239, 68, 68, 0.3);
        --scrim: rgba(0, 0, 0, 0.55);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.5);
        --nav-hover: #18181d;
        --nav-active: #1f1f25;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Grundlagen
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* hidden muss gegen Klassen mit display gewinnen (z. B. .btn-secondary).
   Ausnahme: das mobile Detail-Sheet (höhere Spezifität, siehe unten). */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}
body.login-active { padding-bottom: 0; overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-bg); color: var(--text); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

#app { padding-bottom: 8px; }

/* ---------------------------------------------------------------------------
   Login — Kirchenfoto oben, Formular-Sheet darunter (Desktop: Karte)
   --------------------------------------------------------------------------- */
#login-screen {
    position: fixed; inset: 0; z-index: 2000;
    display: flex;
    background: var(--surface);
}
.login-layout {
    width: 100%; height: 100%; min-height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--surface);
}
.login-hero {
    position: relative;
    flex: 0 0 40%;
    min-height: 240px;
    padding: max(20px, env(safe-area-inset-top)) 28px 56px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background:
        linear-gradient(180deg, rgba(46, 16, 94, 0) 30%, rgba(46, 16, 94, 0.62) 100%),
        url('/devices/assets/kirche.jpg') center 22% / cover no-repeat;
    background-color: #3b1a74;
    overflow: hidden;
}
.login-hero-content { position: relative; z-index: 1; }
.login-hero-org {
    margin: 0 0 6px;
    font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.78);
}
.login-hero-title {
    margin: 0; max-width: 18ch;
    font-size: clamp(1.5rem, 6vw, 1.85rem);
    font-weight: 600; line-height: 1.2; letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 1px 12px rgba(30, 8, 60, 0.35);
}
/* Sanfte Welle am Fuß des Fotos — sitzt im Hero, damit das Sheet sie nicht abschneidet */
.login-wave {
    position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
    width: 100%; height: 36px; display: block;
}
.login-wave path { fill: var(--surface); }

.login-sheet {
    flex: 1;
    padding: 20px 28px max(28px, env(safe-area-inset-bottom));
    background: var(--surface);
    position: relative; z-index: 2;
    overflow-y: auto;
}
.login-sheet-inner { max-width: 400px; }
.login-title {
    margin: 0 0 6px;
    font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
    color: var(--text);
}
.login-sub { margin: 0 0 24px; font-size: 14px; color: var(--muted); line-height: 1.5; }
#login-error {
    display: none;
    margin: 0 0 16px; padding: 10px 12px;
    font-size: 13px; line-height: 1.45; color: var(--error);
    background: var(--error-bg); border: 1px solid var(--error-border); border-radius: var(--radius-sm);
}
.login-form { display: flex; flex-direction: column; }
.login-field-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.login-field {
    position: relative; display: flex; align-items: center; margin-bottom: 16px;
    height: 46px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.login-field:hover { border-color: var(--border-strong); }
.login-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.login-field-icon { flex: none; width: 40px; text-align: center; color: var(--subtle); font-size: 13px; }
.input-login {
    flex: 1; min-width: 0; height: 100%; padding: 0 10px 0 0;
    border: none; background: transparent; font-size: 16px; color: var(--text);
    -webkit-appearance: none;
}
.input-login:focus { outline: none; }
.input-login::placeholder { color: var(--subtle); }
.login-eye {
    flex: none; width: 44px; height: 44px; border: none; background: transparent;
    color: var(--subtle); cursor: pointer; font-size: 14px; display: grid; place-items: center;
}
.login-eye:hover { color: var(--text); }
.btn-login {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 46px; margin-top: 8px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--primary); color: #fff;
    font-size: 15px; font-weight: 500; cursor: pointer;
    box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background var(--dur-fast) var(--ease-out);
}
.btn-login:hover { background: var(--primary-hover); }
.btn-login:active { transform: scale(0.99); }

@media (min-width: 520px) {
    #login-screen { align-items: center; justify-content: center; padding: 24px; background: var(--bg); }
    .login-layout {
        max-width: 420px; max-height: min(720px, 92dvh);
        /* min-height gewinnt sonst gegen max-height — die Karte bliebe fensterhoch */
        height: auto; min-height: 0;
        border-radius: 18px; overflow: hidden;
        border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    }
    .login-hero { flex: 0 0 220px; min-height: 220px; }
    .login-sheet { padding: 20px 32px 32px; }
}

/* ---------------------------------------------------------------------------
   Formularelemente & Buttons
   --------------------------------------------------------------------------- */
.input {
    width: 100%; height: 44px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
    font-size: 16px; /* < 16 px zoomt iOS beim Fokussieren */
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    -webkit-appearance: none; appearance: none;
}
.input:hover { border-color: var(--border-strong); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.input::placeholder { color: var(--subtle); }
select.input {
    padding-right: 34px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
input[type="date"].input { line-height: 42px; }
.textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; font-size: 15px; line-height: 1.5; }
.select-sm { flex-shrink: 0; }

.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 44px; padding: 0 16px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--primary); color: #fff;
    font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
    box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { transform: scale(0.99); }
.btn-primary i { font-size: 13px; }

.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 16px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--muted);
    font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-secondary:hover { color: var(--error); background: var(--error-bg); border-color: var(--error-border); }
.btn-secondary i { font-size: 13px; }

.btn-sm {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-2);
    font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-sm i { font-size: 12px; color: var(--muted); transition: color var(--dur-fast) var(--ease-out); }
.btn-sm:hover { background: var(--surface2); border-color: var(--border-strong); color: var(--text); }
.btn-sm:hover i { color: var(--text-2); }
.btn-icon-sm { width: 32px; padding: 0; }

/* „Zurück“ / „Abbrechen“: ruhiger Text-Button */
.btn-back {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 10px 0 6px; margin-left: -6px;
    border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--accent);
    font-size: 15px; font-weight: 500; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.btn-back:hover { background: var(--accent-bg); }
.btn-back i { font-size: 13px; }

/* ---------------------------------------------------------------------------
   Kopf, Suche, Filter (App-Ansicht)
   --------------------------------------------------------------------------- */
.app-header { padding: max(20px, calc(env(safe-area-inset-top) + 12px)) 20px 12px; }
.header-greeting { min-width: 0; }
.header-hello {
    margin: 0 0 2px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted);
}
.header-title { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; color: var(--text); }
.header-date { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

.filter-bar { padding: 0 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.search-wrap { position: relative; }
.search-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--subtle); font-size: 13px; pointer-events: none;
}
.search-input { padding-left: 38px; }
.search-input::-webkit-search-cancel-button { cursor: pointer; }
.search-kbd { display: none; }

/* Zähler als ruhige Zeile statt großer Kacheln */
.stats-bar { display: flex; align-items: baseline; gap: 0 9px; order: 3; padding: 0 2px; }
.stat-mini { display: inline-flex; align-items: baseline; gap: 5px; }
.stat-mini + .stat-mini::before { content: '·'; margin-right: 9px; color: var(--subtle); }
.stat-mini-n { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-mini-label { font-size: 13px; color: var(--muted); }
.stat-mini--accent .stat-mini-n { color: var(--accent); }

.chip-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -20px; padding: 0 20px;
}
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-row { display: flex; flex-wrap: nowrap; gap: 6px; }
.chip {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    height: 34px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-2);
    font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip i { font-size: 12px; color: var(--muted); }
.chip-count { font-size: 12px; color: var(--subtle); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
.chip.active i, .chip.active .chip-count { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Geräteliste (App) — eine gruppierte Karte mit Haarlinien
   --------------------------------------------------------------------------- */
.device-list {
    margin: 0 16px calc(var(--bottom-nav-h) + 24px);
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden;
}
.device-list:empty { display: none; }

.device-row {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 64px; padding: 10px 14px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.device-row + .device-row::before {
    content: ''; position: absolute; top: 0; right: 0; left: 66px;
    border-top: 1px solid var(--border);
}
.device-row:hover { background: var(--surface2); }
.device-row:active { background: var(--surface3); }

.device-row-icon {
    width: 40px; height: 40px; border-radius: var(--radius); flex: none;
    display: grid; place-items: center; font-size: 15px;
    background: var(--surface2); color: var(--text-2);
    box-shadow: inset 0 0 0 1px var(--border);
}
.device-row-main { flex: 1; min-width: 0; }
.device-row-name {
    font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.device-row-sub {
    margin-top: 1px; font-size: 13px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.device-row-meta { flex: none; display: flex; align-items: center; gap: 10px; }
/* Punkt: Gerät ist an eine Person ausgegeben */
.device-row-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--ok-dot); box-shadow: 0 0 0 3px var(--ok-bg);
}
.device-row-chevron { font-size: 11px; color: var(--subtle); }
.device-row:hover .device-row-chevron { color: var(--muted); }

/* ---------------------------------------------------------------------------
   Leerer Zustand
   --------------------------------------------------------------------------- */
.empty-state { text-align: center; padding: 48px 24px 120px; color: var(--muted); }
.empty-state-icon {
    width: 56px; height: 56px; margin: 0 auto 14px;
    display: grid; place-items: center; font-size: 20px;
    border-radius: var(--radius-lg); background: var(--surface2); color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--border);
}
.empty-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.empty-hint { margin: 6px auto 0; max-width: 32ch; font-size: 14px; line-height: 1.5; color: var(--muted); }
.empty-state .btn-sm { margin-top: 16px; }

/* ---------------------------------------------------------------------------
   Untere Navigation (App)
   --------------------------------------------------------------------------- */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 12px env(safe-area-inset-bottom, 0px);
    display: flex; align-items: stretch; justify-content: space-around;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--border);
}
.bottom-nav-item {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
    padding: 0 4px 10px; border: none; background: transparent;
    color: var(--muted); cursor: pointer;
    font-size: 11px; font-weight: 500;
    transition: color var(--dur-fast) var(--ease-out);
}
.bottom-nav-item i { font-size: 19px; line-height: 1; }
.bottom-nav-item:hover { color: var(--text); }
.bottom-nav-item.is-active { color: var(--accent); }
.bottom-nav-item:active i, .bottom-nav-item:active .bottom-nav-scan-btn { transform: scale(0.92); }

/* Mittlerer Scan-Button: ragt leicht über die Leiste, ohne Glow */
.bottom-nav-scan { color: var(--text-2); }
.bottom-nav-scan-btn {
    width: 52px; height: 52px; margin-top: -22px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--primary); color: #fff;
    border: 4px solid var(--bg);
    box-shadow: 0 4px 14px rgba(109, 40, 217, 0.32);
    transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-out);
}
.bottom-nav-scan-btn i { font-size: 20px; }
.bottom-nav-scan:hover .bottom-nav-scan-btn { background: var(--primary-hover); }

/* ---------------------------------------------------------------------------
   Detail als Bottom-Sheet (nur mobile App-Ansicht)
   --------------------------------------------------------------------------- */
.sheet-handle { display: none; }
#detail-scrim { display: none; }

body:not(.layout-desktop) #view-detail {
    position: fixed; left: 0; right: 0; top: max(40px, calc(env(safe-area-inset-top) + 12px)); bottom: 0; z-index: 260;
    display: flex !important; flex-direction: column;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(12, 12, 18, 0.18);
    transform: translateY(110%);
    visibility: hidden; overflow: hidden; will-change: transform;
    /* Sichtbarkeit erst NACH dem Zufahren umschalten, damit die Animation läuft */
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
body:not(.layout-desktop) #view-detail.sheet-open {
    transform: translateY(0); visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}
body:not(.layout-desktop) #view-detail .form-header {
    position: static; border-radius: 16px 16px 0 0; touch-action: none;
    border-bottom: none; padding-top: 6px;
}
body:not(.layout-desktop) #view-detail #detail-content {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: 4px;
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 24px);
}
body:not(.layout-desktop) .sheet-handle {
    display: block; flex: none; width: 36px; height: 4px; margin: 8px auto 0;
    border-radius: 999px; background: var(--border-strong); touch-action: none;
}
body:not(.layout-desktop) #detail-scrim {
    display: block; position: fixed; inset: 0; z-index: 255;
    background: var(--scrim);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
body:not(.layout-desktop) #detail-scrim.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* ---------------------------------------------------------------------------
   Aktions-Sheet („Mehr“)
   --------------------------------------------------------------------------- */
.action-sheet-bg {
    position: fixed; inset: 0; z-index: 2500;
    background: var(--scrim);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.action-sheet-bg.open { opacity: 1; visibility: visible; pointer-events: auto; }
.action-sheet {
    width: 100%; max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border); border-bottom: none;
    border-radius: 16px 16px 0 0;
    padding: 6px 10px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform var(--dur-slow) var(--ease-out);
}
.action-sheet-bg.open .action-sheet { transform: none; }
.action-sheet-grip { width: 36px; height: 4px; margin: 4px auto 8px; border-radius: 999px; background: var(--border-strong); }
.action-sheet-item {
    width: 100%; display: flex; align-items: center; gap: 14px;
    min-height: 50px; padding: 0 14px; border: none; background: transparent;
    font-size: 15px; font-weight: 500; color: var(--text);
    cursor: pointer; border-radius: var(--radius); text-align: left;
    transition: background var(--dur-fast) var(--ease-out);
}
.action-sheet-item i { width: 20px; text-align: center; font-size: 15px; color: var(--muted); }
.action-sheet-item:hover, .action-sheet-item:active { background: var(--surface2); }
.action-sheet-item--danger, .action-sheet-item--danger i { color: var(--error); }
.action-sheet-cancel {
    width: 100%; height: 48px; margin-top: 6px;
    border: 1px solid var(--border); background: var(--surface2); border-radius: var(--radius);
    font-size: 15px; font-weight: 500; color: var(--text-2); cursor: pointer;
}

.fab-legacy { display: none !important; }

/* ---------------------------------------------------------------------------
   Formular & Detail: Kopfzeile
   --------------------------------------------------------------------------- */
.form-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: 8px 16px;
    padding-top: max(8px, env(safe-area-inset-top));
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.form-header h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.detail-actions { display: flex; gap: 8px; }

/* Das Formular ersetzt auf dem Handy die Liste und steht auf der Seitenfläche */
#view-form { background: var(--bg); min-height: 100dvh; }
body:not(.layout-desktop) #view-form .form-header { background: color-mix(in srgb, var(--bg) 90%, transparent); }

.device-form { padding: 20px 20px calc(var(--bottom-nav-h) + 24px); max-width: 640px; margin: 0 auto; }
.form-label { display: block; margin: 18px 0 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.form-label small { font-weight: 400; color: var(--muted); }
.form-label:first-of-type { margin-top: 0; }

/* Typ-Kacheln */
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
@media (min-width: 420px) { .type-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 560px) { .type-grid { grid-template-columns: repeat(6, 1fr); } }
.type-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 68px; padding: 10px 4px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--muted);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.type-tile:hover { border-color: var(--border-strong); color: var(--text); }
.type-tile.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.type-tile i { font-size: 17px; }
.type-tile span { font-size: 12px; font-weight: 500; }

/* Foto */
.photo-preview {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 96px; padding: 20px; text-align: center;
    border: 1px dashed var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--muted); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.photo-preview:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.photo-preview i { font-size: 20px; }
.photo-preview span { font-size: 13px; }
.photo-preview img { max-width: 100%; max-height: 200px; border-radius: var(--radius-sm); object-fit: contain; }

/* Seriennummer + Scan-Knopf */
.input-with-btn { display: flex; gap: 8px; }
.input-with-btn .input { flex: 1; }
.btn-scan {
    width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 16px;
    display: grid; place-items: center; box-shadow: var(--shadow-xs);
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-scan:hover { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-border); }

/* Netzwerk-Zuordnungen im Formular */
.form-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.form-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.form-section-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.net-row {
    position: relative;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 10px; padding: 12px; padding-right: 48px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.net-row .net-select { grid-column: 1 / -1; }
.net-row .input { height: 40px; font-size: 15px; }
.net-row-remove {
    position: absolute; top: 12px; right: 8px; width: 32px; height: 32px;
    border: none; border-radius: var(--radius-sm); background: transparent;
    color: var(--muted); cursor: pointer; font-size: 14px;
    display: grid; place-items: center;
}
.net-row-remove:hover { color: var(--error); background: var(--error-bg); }

.form-actions { display: flex; gap: 10px; margin-top: 28px; padding-bottom: 12px; }
.form-actions .btn-primary { flex: 1; }

/* ---------------------------------------------------------------------------
   Gerätedetail
   --------------------------------------------------------------------------- */
#detail-content { padding: 16px 20px calc(var(--bottom-nav-h) + 24px); max-width: 640px; margin: 0 auto; }
.detail-photo {
    display: block; width: 100%; max-height: 280px; object-fit: contain;
    margin-bottom: 16px; border-radius: var(--radius-lg);
    background: var(--surface2); border: 1px solid var(--border);
}

.dsheet-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.dsheet-head-icon {
    width: 48px; height: 48px; border-radius: 12px; flex: none;
    display: grid; place-items: center; font-size: 19px;
    background: var(--accent-bg); color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent-border);
}
.dsheet-head-main { min-width: 0; flex: 1; }
.dsheet-head-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dsheet-head-name {
    font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dsheet-copy {
    flex: none; width: 28px; height: 28px; border: none; border-radius: var(--radius-xs);
    background: transparent; color: var(--subtle); cursor: pointer; font-size: 12px;
    display: grid; place-items: center;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dsheet-copy:hover { background: var(--surface2); color: var(--text); }
.dsheet-head-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status-Zeilen (Zuweisung, Garantie) */
.dsheet-status, .dsheet-warranty {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 14px; line-height: 1.4;
}
.dsheet-status i, .dsheet-warranty i { font-size: 13px; margin-top: 3px; width: 14px; text-align: center; }
.dsheet-status strong { font-weight: 600; }
.dsheet-status.is-out { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.dsheet-status.is-in { background: var(--surface2); color: var(--text-2); }
.dsheet-status.is-in i { color: var(--muted); }
.dsheet-warranty.is-ok      { background: var(--ok-bg);    border-color: var(--ok-border);    color: var(--ok); }
.dsheet-warranty.is-soon    { background: var(--warn-bg);  border-color: var(--warn-border);  color: var(--warn); }
.dsheet-warranty.is-expired { background: var(--error-bg); border-color: var(--error-border); color: var(--error); }
.dsheet-warranty.is-unknown { background: var(--surface2); color: var(--muted); }
.dsheet-warranty + .dsheet-section, .dsheet-status + .dsheet-section { margin-top: 16px; }

/* Kompaktes Garantie-Label in Liste und Tabelle */
.warranty-badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 12px; font-weight: 500; white-space: nowrap;
    border: 1px solid transparent;
}
.warranty-badge i { font-size: 10px; }
.warranty-badge--ok      { background: var(--ok-bg);    color: var(--ok);    border-color: var(--ok-border); }
.warranty-badge--soon    { background: var(--warn-bg);  color: var(--warn);  border-color: var(--warn-border); }
.warranty-badge--expired { background: var(--error-bg); color: var(--error); border-color: var(--error-border); }
.warranty-badge--unknown { background: var(--surface2); color: var(--muted); border-color: var(--border); }
/* In der App-Liste nur ein Hinweis, wo Handlungsbedarf besteht — „alles gut“ bleibt still */
.device-row .warranty-badge--ok, .device-row .warranty-badge--unknown { display: none; }
@media (max-width: 430px) {
    .device-row .warranty-badge { width: 22px; padding: 0; justify-content: center; }
    .device-row .warranty-badge-text { display: none; }
}

/* Abschnitte mit Titel */
.dsheet-section { margin-bottom: 16px; }
.dsheet-section-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 8px; }
.dsheet-section-head i { font-size: 12px; color: var(--muted); }
.dsheet-section-head h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }

/* Label → Wert-Zeilen */
.dsheet-rows, .dsheet-nets {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0 14px;
}
.dsheet-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--border);
}
.dsheet-row:last-child { border-bottom: none; }
.dsheet-row-label { font-size: 14px; color: var(--muted); flex: none; }
.dsheet-row-val { font-size: 14px; font-weight: 500; color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.dsheet-row-val.mono { font-family: var(--mono); font-size: 13px; }

.dsheet-net { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.dsheet-net:last-child { border-bottom: none; }
.dsheet-net-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 7px; background: var(--accent); }
.dsheet-net-main { min-width: 0; }
.dsheet-net-name { font-weight: 500; font-size: 14px; }
.dsheet-net-meta { margin-top: 1px; font-size: 12px; color: var(--muted); font-family: var(--mono); overflow-wrap: anywhere; }

.dsheet-note {
    margin: 0; padding: 12px 14px; white-space: pre-wrap;
    font-size: 14px; line-height: 1.55; color: var(--text-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}

/* ---------------------------------------------------------------------------
   Dialoge
   --------------------------------------------------------------------------- */
.modal-bg {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: var(--scrim);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
}
.modal-bg.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal {
    width: min(520px, 100%); max-height: min(88dvh, 860px);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--shadow-lg);
    transform: translateY(12px) scale(0.98); opacity: 0;
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.modal-bg.open .modal { transform: none; opacity: 1; }
.modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.modal-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.modal-close {
    width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--muted); cursor: pointer; font-size: 15px;
    display: grid; place-items: center;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.modal-close:hover { background: var(--surface3); color: var(--text); }
.modal-body-inner { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.modal-body-inner--flush { padding: 0; }
.modal-hint { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.modal-hint strong { color: var(--text-2); font-weight: 600; }

/* Auf dem Handy als Sheet von unten */
@media (max-width: 600px) {
    .modal-bg:not(#qr-scan-modal-bg) { align-items: flex-end; padding: 0; padding-top: max(24px, env(safe-area-inset-top)); }
    .modal-bg:not(#qr-scan-modal-bg) .modal {
        width: 100%; max-height: 100%; border-radius: 16px 16px 0 0; border-bottom: none;
        transform: translateY(40px); padding-bottom: env(safe-area-inset-bottom);
    }
    .modal-bg.open:not(#qr-scan-modal-bg) .modal { transform: none; }
}

/* QR-Labels */
.label-location-filter { margin-bottom: 12px; }
.label-select-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.label-device-list {
    max-height: 300px; overflow-y: auto; margin-bottom: 16px;
    border: 1px solid var(--border); border-radius: var(--radius); padding: 0 12px;
}
.label-device-list .modal-hint { margin: 12px 0; }
.label-device-item {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; border-bottom: 1px solid var(--border);
    font-size: 14px; cursor: pointer;
}
.label-device-item:last-child { border-bottom: none; }
.label-device-item i { width: 16px; text-align: center; font-size: 12px; color: var(--muted); }
.label-device-item input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }

/* ---------------------------------------------------------------------------
   Scanner
   --------------------------------------------------------------------------- */
.qr-scan-modal { width: min(420px, 100%); }
.qr-scan-modal .modal-body-inner { background: #000; }
#qr-scan-reader { width: 100%; min-height: 300px; }
#qr-scan-reader video { width: 100% !important; }
#qr-scan-reader img { display: none !important; }

#scanner-container {
    margin: 8px 0 0; border-radius: var(--radius); overflow: hidden;
    min-height: 240px; background: #000; position: relative;
}
#scanner-container video { width: 100% !important; }
#scanner-container img { display: none !important; }
.scanner-hint {
    position: absolute; top: 10px; left: 12px; right: 60px; z-index: 10; margin: 0;
    font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); pointer-events: none;
}
.scanner-stop-btn {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 10;
    height: 36px; padding: 0 18px;
    background: rgba(0, 0, 0, 0.6); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.scanner-controls {
    position: absolute; top: 10px; right: 10px; z-index: 10;
    display: flex; flex-direction: column; gap: 8px;
}
.scanner-ctrl-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.55); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 13px; font-weight: 600; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: grid; place-items: center;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.scanner-ctrl-btn:hover, .scanner-ctrl-btn.active { background: rgba(124, 58, 237, 0.85); border-color: rgba(196, 181, 253, 0.9); }
.scanner-ctrl-btn i { font-size: 15px; }

.scan-wrap { position: relative; }
.scan-overlay {
    position: absolute; inset: 0; z-index: 8;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.scan-frame { position: relative; width: 62%; max-width: 260px; aspect-ratio: 1 / 1; }
.scan-frame--wide { width: 86%; max-width: 340px; aspect-ratio: 5 / 2; }
.scan-frame > span {
    position: absolute; width: 26px; height: 26px;
    border: 3px solid rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
}
.scan-frame > span:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 8px; }
.scan-frame > span:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 8px; }
.scan-frame > span:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 8px; }
.scan-frame > span:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 8px; }
.scan-laser {
    position: absolute; left: 6%; right: 6%; height: 2px; top: 8%;
    background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.95), transparent);
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.8);
    animation: scan-move 2.2s ease-in-out infinite;
}
@keyframes scan-move { 0% { top: 8%; } 50% { top: 92%; } 100% { top: 8%; } }

/* ---------------------------------------------------------------------------
   Toasts (geteilt mit dem Dashboard via toaster.js)
   --------------------------------------------------------------------------- */
#toast-host {
    position: fixed; bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 16px); left: 50%; z-index: 4000;
    width: min(380px, calc(100vw - 32px)); height: 0;
    transform: translateX(-50%); pointer-events: none;
}
.toast {
    position: absolute; bottom: 0; left: 0; width: 100%;
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 14px; font-weight: 500; line-height: 1.4;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--scale, 1));
    transform-origin: bottom center;
    touch-action: pan-y;
    transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
}
.toast.toast-dragging { transition: none; cursor: grab; }
.toast.toast-in { transform: translate3d(0, 16px, 0) scale(0.96); opacity: 0; }
.toast.toast-out { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); opacity: 0 !important; transform: translate3d(var(--x, 0px), 16px, 0) scale(0.96); }
.toast-icon { font-size: 15px; line-height: 1.4; flex-shrink: 0; }
.toast-msg { min-width: 0; word-break: break-word; }
.toast.toast-ok .toast-icon { color: var(--ok); }
.toast.toast-err { border-color: var(--error-border); }
.toast.toast-err .toast-icon { color: var(--error); }
.toast.toast-warn { border-color: var(--warn-border); }
.toast.toast-warn .toast-icon { color: var(--warn); }
.toast.toast-info .toast-icon { color: var(--accent); }

/* RBAC: Schreib-Steuerelemente für Anseher ausblenden (Backend erzwingt per 403) */
body.role-readonly .write-only { display: none !important; }

/* ==========================================================================
   Desktop-Ansicht (body.layout-desktop)
   Dieselbe App, anderes Gerüst: Sidebar + Tabelle + Detail-Panel.
   Ohne die Klasse bleibt alles die mobile App — die Wrapper sind per
   `display: contents` unsichtbar, die Desktop-Bausteine ausgeblendet.
   ========================================================================== */
.pc-body, .pc-content, .pc-panel { display: contents; }
.pc-sidebar, .pc-table-wrap, .pc-panel-close, .pc-panel-empty { display: none; }

body.layout-desktop { padding-bottom: 0; overflow: hidden; }
body.layout-desktop #app {
    display: grid; grid-template-columns: 248px minmax(0, 1fr);
    height: 100vh; height: 100dvh; padding-bottom: 0;
}
body.layout-desktop .pc-body { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden; }
/* Das Panel belegt nur Platz, wenn wirklich etwas ausgewählt ist */
body.layout-desktop.panel-open .pc-body { grid-template-columns: minmax(0, 1fr) var(--pc-panel-w, 420px); }
body.layout-desktop .pc-content { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
body.layout-desktop .pc-panel { display: none; }
body.layout-desktop.panel-open .pc-panel {
    display: flex; flex-direction: column; position: relative;
    background: var(--surface); border-left: 1px solid var(--border);
    overflow-y: auto; overflow-x: hidden;
    animation: panel-in var(--dur-slow) var(--ease-out);
}
@keyframes panel-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

body.layout-desktop .bottom-nav,
body.layout-desktop .fab,
body.layout-desktop .chip-scroll { display: none !important; }

/* --- Sidebar (wie im Dashboard) --- */
body.layout-desktop .pc-sidebar {
    display: flex; flex-direction: column; gap: 14px;
    padding: 14px 12px 12px; background: var(--bg);
    border-right: 1px solid var(--border); overflow-y: auto;
}
.pc-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 6px; min-height: 44px; }
.pc-brand-icon { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; }
.pc-brand-icon img { width: 32px; height: 32px; border-radius: 9px; display: block; }
.pc-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pc-brand-text strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.pc-brand-text small { font-size: 12px; color: var(--muted); margin-top: 1px; }

.pc-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 34px; padding: 0 10px;
    font-size: 14px; font-weight: 500; text-align: left;
    color: var(--text-2); background: transparent;
    border: none; border-radius: var(--radius-sm); cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pc-btn i { width: 16px; text-align: center; font-size: 13px; color: var(--muted); }
.pc-btn:hover { background: var(--nav-hover); color: var(--text); }
.pc-btn:hover i { color: var(--text-2); }
.pc-btn--primary {
    justify-content: center; min-height: 36px;
    background: var(--primary); color: #fff;
    border: 1px solid transparent;
    box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pc-btn--primary i { color: #fff; }
.pc-btn--primary:hover { background: var(--primary-hover); color: #fff; }
.pc-btn--primary:hover i { color: #fff; }

.pc-section-label {
    margin: 0 0 2px; padding: 0 10px;
    font-size: 12px; font-weight: 500; color: var(--subtle);
}

.pc-types { display: flex; flex-direction: column; gap: 2px; }
.pc-type {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 34px; padding: 0 10px;
    font-size: 14px; font-weight: 500; text-align: left;
    color: var(--text-2); background: none; border: none; border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pc-type i { width: 16px; text-align: center; font-size: 13px; color: var(--muted); }
.pc-type-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-type-count { font-size: 12px; color: var(--subtle); font-variant-numeric: tabular-nums; }
.pc-type:hover { background: var(--nav-hover); color: var(--text); }
.pc-type.is-active { background: var(--nav-active); color: var(--text); font-weight: 600; }
.pc-type.is-active i { color: var(--accent); }
.pc-type:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.pc-type--empty { color: var(--subtle); }
.pc-type--empty i { color: var(--subtle); }

.pc-sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 10px; }
.pc-sidebar-foot .theme-seg { margin-top: 10px; }

.theme-seg {
    display: flex; gap: 2px; padding: 3px;
    border-radius: var(--radius-sm); background: var(--surface2);
    box-shadow: inset 0 0 0 1px var(--border);
}
.theme-seg-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 28px; border: none; border-radius: var(--radius-xs);
    background: transparent; color: var(--muted);
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.theme-seg-btn i { font-size: 11px; }
.theme-seg-btn:hover { color: var(--text); }
.theme-seg-btn.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs), 0 0 0 1px var(--border); }

.pc-user {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 2px 0 6px; margin-top: 10px;
    border-top: 1px solid var(--border);
}
.pc-user-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--accent-bg); color: var(--accent);
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.pc-user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pc-user-meta strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-user-meta small { font-size: 12px; color: var(--muted); }
.pc-logout {
    width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--muted); cursor: pointer;
    display: grid; place-items: center; font-size: 13px;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pc-logout:hover { color: var(--error); background: var(--error-bg); }

/* --- Kopf und Werkzeugleiste --- */
body.layout-desktop .app-header {
    display: flex; align-items: center;
    min-height: 64px; padding: 12px 32px;
    border-bottom: 1px solid var(--border);
}
body.layout-desktop .header-hello { display: none; }
body.layout-desktop .header-title { font-size: 18px; letter-spacing: -0.015em; line-height: 1.25; }
body.layout-desktop .header-date { margin-top: 0; font-size: 13px; }

body.layout-desktop .filter-bar {
    flex-direction: row; align-items: center; gap: 10px;
    padding: 16px 32px; flex-wrap: wrap;
}
body.layout-desktop .search-wrap { flex: 1 1 320px; min-width: 240px; max-width: 520px; }
body.layout-desktop .input { height: 36px; font-size: 14px; }
body.layout-desktop .select-sm { width: auto; min-width: 180px; margin: 0; }
body.layout-desktop .search-kbd {
    display: block; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--muted);
    background: var(--surface2); border: 1px solid var(--border); border-bottom-width: 2px;
    border-radius: 5px; padding: 0 6px; line-height: 16px; pointer-events: none;
}
body.layout-desktop .search-input:focus + .search-kbd,
body.layout-desktop .search-input:not(:placeholder-shown) + .search-kbd { display: none; }
body.layout-desktop .stats-bar { order: 0; margin-left: auto; }

/* --- Tabelle --- */
body.layout-desktop #device-cards { display: none; }
body.layout-desktop .pc-table-wrap { display: block; flex: 1; overflow: auto; padding: 0 32px 28px; }
body.layout-desktop.list-empty .pc-table-wrap { flex: none; }
/* Bei offenem Panel fehlen die Spalten Netze/Modell — beides steht im Panel */
body.layout-desktop.panel-open .pc-table th:nth-child(5),
body.layout-desktop.panel-open .pc-table td:nth-child(5),
body.layout-desktop.panel-open .pc-table th:nth-child(6),
body.layout-desktop.panel-open .pc-table td:nth-child(6) { display: none; }
body.layout-desktop #view-list { display: flex !important; flex-direction: column; min-height: 0; flex: 1; }

.pc-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.pc-table th {
    position: sticky; top: 0; z-index: 2; text-align: left;
    padding: 9px 14px; font-size: 12px; font-weight: 500; color: var(--muted);
    background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.pc-table th:first-child { border-top-left-radius: var(--radius-lg); padding-left: 18px; }
.pc-table th:last-child { border-top-right-radius: var(--radius-lg); }
.pc-sortable { cursor: pointer; user-select: none; }
.pc-sortable i { margin-left: 4px; font-size: 9px; opacity: 0.35; }
.pc-sortable:hover { color: var(--text); }
.pc-sortable[aria-sort] { color: var(--text); }
.pc-sortable[aria-sort] i { opacity: 1; color: var(--accent); }
.pc-table td { padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.pc-table td:first-child { min-width: 200px; padding-left: 18px; }
.pc-table tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.pc-table tbody tr:hover td { background: var(--surface2); }
.pc-table tbody tr:focus-visible { outline: none; }
.pc-table tbody tr:focus-visible td { background: var(--accent-bg); }
.pc-table tbody tr.is-selected td { background: var(--accent-bg); }
.pc-table tbody tr.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.pc-table tbody tr:last-child td { border-bottom: none; }
.pc-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.pc-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg); }
.pc-cell-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pc-cell-icon {
    width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--surface2); color: var(--muted); font-size: 12px;
    box-shadow: inset 0 0 0 1px var(--border);
}
.pc-table tbody tr.is-selected .pc-cell-icon { background: var(--surface); color: var(--accent); }
.pc-type-badge {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
    background: var(--surface2); color: var(--text-2); border: 1px solid var(--border);
}
.pc-mono { font-family: var(--mono); font-size: 13px; color: var(--text-2); }
.pc-muted { color: var(--subtle); }
.pc-net-count { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pc-net-count i { font-size: 11px; }

/* --- Detail-/Formular-Panel --- */
body.layout-desktop .pc-panel-close {
    display: grid; place-items: center;
    position: absolute; top: 12px; right: 12px; z-index: 60; /* über der sticky .form-header */
    width: 32px; height: 32px;
    border: none; border-radius: var(--radius-sm); background: transparent; color: var(--muted);
    font-size: 15px; cursor: pointer;
}
body.layout-desktop .pc-panel-close:hover { background: var(--surface3); color: var(--text); }
body.layout-desktop .pc-panel-empty { display: none; }

body.layout-desktop .pc-panel .form-header {
    min-height: 56px; padding: 12px 56px 12px 20px; background: var(--surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.layout-desktop .pc-panel .btn-back { display: none; }
body.layout-desktop .pc-panel #view-detail .form-header { justify-content: flex-end; }
body.layout-desktop #view-form { background: transparent; min-height: 0; }
body.layout-desktop .device-form { padding: 20px 20px 0; max-width: none; }
body.layout-desktop .pc-panel #detail-content { padding: 20px 20px 24px; }
body.layout-desktop .detail-photo { max-height: 200px; }
body.layout-desktop .form-actions {
    position: sticky; bottom: 0; z-index: 5;
    margin: 24px -20px 0; padding: 12px 20px;
    background: var(--surface); border-top: 1px solid var(--border);
}
body.layout-desktop .pc-panel .type-grid { grid-template-columns: repeat(4, 1fr); }
body.layout-desktop .btn-primary, body.layout-desktop .btn-secondary { height: 38px; }
body.layout-desktop .btn-scan { width: 36px; height: 36px; font-size: 14px; }
body.layout-desktop .net-row .input { height: 34px; font-size: 13px; }

@media (max-width: 1180px) {
    body.layout-desktop .pc-body { --pc-panel-w: 360px; }
    body.layout-desktop #app { grid-template-columns: 220px minmax(0, 1fr); }
    body.layout-desktop .app-header, body.layout-desktop .filter-bar { padding-left: 24px; padding-right: 24px; }
    body.layout-desktop .pc-table-wrap { padding: 0 24px 24px; }
}

/* ==========================================================================
   Mitarbeitende (Dienstgeräte-Empfänger:innen)
   ========================================================================== */
.staff-modal { width: min(920px, 100%); }
.staff-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.staff-toolbar .modal-hint { margin: 0; flex: 1; min-width: 220px; }
.staff-toolbar .btn-primary { width: auto; height: 36px; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.staff-card {
    display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.staff-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.staff-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.staff-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--accent-bg); color: var(--accent);
    font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
}
.staff-avatar--lg { width: 52px; height: 52px; font-size: 17px; }
.staff-card-name { font-size: 15px; font-weight: 600; color: var(--text); }
.staff-card-funktion { font-size: 13px; color: var(--muted); margin-top: -4px; }
.staff-card-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px;
}
.staff-card-foot .staff-devcount { color: var(--muted); }
.staff-card-foot .staff-devcount i { font-size: 11px; margin-right: 4px; }
.staff-card-open { color: var(--accent); font-weight: 500; }
.staff-card-open i { font-size: 11px; margin-left: 2px; transition: transform var(--dur-fast) var(--ease-out); }
.staff-card:hover .staff-card-open i { transform: translateX(2px); }

.staff-badge {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid transparent;
}
.staff-badge--ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.staff-badge--warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.staff-badge--missing { background: var(--error-bg); color: var(--error); border-color: var(--error-border); }
.staff-devcount { font-size: 13px; color: var(--muted); }
.staff-empty { text-align: center; color: var(--muted); padding: 16px 0; margin: 0; font-size: 14px; }

.staff-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.staff-row-main { flex: 1; min-width: 0; }
.staff-row-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.staff-row-sub { font-size: 13px; color: var(--muted); }

.staff-check { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; cursor: pointer; font-size: 14px; line-height: 1.45; }
.staff-check input[type="checkbox"],
.staff-check input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); }
.staff-check small { color: var(--muted); }
.staff-check.is-disabled { cursor: not-allowed; opacity: .55; }

/* Detail einer Person */
.staff-detail-head { display: flex; align-items: center; gap: 14px; margin: 14px 0 18px; flex-wrap: wrap; }
.staff-detail-head .btn-primary { flex: 0 0 auto; width: auto; height: 36px; }
.staff-detail-id { flex: 1; min-width: 160px; }
.staff-detail-id h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.staff-detail-id p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
#staff-detail-back { margin-left: -6px; }

.staff-agreement, .staff-section {
    margin-top: 14px; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.staff-agreement-head, .staff-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.staff-agreement-head h3, .staff-section-head h3 { font-size: 15px; font-weight: 600; margin: 0; color: var(--text); }
.staff-agreement-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-agreement-sub {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px;
}
.staff-agreement-sub small { color: var(--muted); }
.staff-agreement-hint { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; }

.assign-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 0; border-bottom: 1px solid var(--border);
}
.assign-row:last-child { border-bottom: none; padding-bottom: 0; }
.assign-row:first-child { padding-top: 0; }
.assign-row-main { min-width: 0; }
.assign-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Eingeblendete Arbeitsflächen: Dokument erstellen / Gerät zuweisen */
.assign-panel {
    margin-top: 14px; padding: 16px;
    border: 1px solid var(--accent-border); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent-bg) 60%, var(--surface));
}
.assign-panel .staff-section-head { margin-bottom: 12px; }
.assign-panel .form-actions { margin-top: 16px; padding-bottom: 0; }
.assign-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 360px; overflow-y: auto; }
.assign-pick { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.assign-pick:has(.assign-cb:checked) { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border); }
.assign-pick .staff-check { margin: 4px 0; }
.assign-fields { display: flex; gap: 8px; margin: 4px 0 4px 28px; flex-wrap: wrap; }
.assign-pick:not(:has(.assign-cb:checked)) .assign-fields { display: none; }
.input-sm { height: 36px; padding: 0 10px; font-size: 14px; flex: 1; min-width: 140px; }
.assign-search { margin-top: 0; }
.assign-count { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.assign-pick.is-hidden { display: none; }

.doc-opts { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--accent-border); }
.doc-opts .form-label { margin-top: 0; }
#sd-fee-fields { margin: 4px 0 0 28px; }
.annex-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.annex-grid > * { flex: 1; min-width: 180px; }
.annex-sub { margin: 10px 0 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }

@media (max-width: 600px) {
    .staff-detail-head .btn-primary { width: 100%; }
    .staff-toolbar .btn-primary { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Upload-Dialog (Drag & Drop + Fortschritt)
   --------------------------------------------------------------------------- */
.upload-modal { width: min(520px, 100%); }
.upload-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.upload-head-icon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius);
    display: grid; place-items: center;
    background: var(--accent-bg); color: var(--accent); font-size: 16px;
    box-shadow: inset 0 0 0 1px var(--accent-border);
}
.upload-head-txt { flex: 1; min-width: 0; }
.upload-head-txt h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.upload-head-txt p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.upload-head .modal-close { flex: 0 0 auto; }

.upload-drop {
    margin: 20px 20px 6px; padding: 28px 20px; text-align: center;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
    background: var(--surface2);
    transition: border-color var(--dur-base), background var(--dur-base);
}
.upload-drop.is-dragover { border-color: var(--accent); background: var(--accent-bg); }
.upload-btn {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
    height: 36px; padding: 0 16px; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    font-size: 14px; font-weight: 500; box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.upload-btn i { color: var(--muted); }
.upload-btn:hover { border-color: var(--border-strong); background: var(--surface2); }
.upload-drop-main { margin: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.upload-drop-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.upload-files { padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.upload-files:empty { padding-bottom: 14px; }
.upload-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.upload-card.is-done { border-color: var(--ok-border); }
.upload-card.is-error { border-color: var(--error-border); }
.upload-card-icon {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-sm);
    display: grid; place-items: center;
    background: var(--surface2); color: var(--muted); font-size: 15px;
}
.upload-card.is-error .upload-card-icon { background: var(--error-bg); color: var(--error); }
.upload-card-body { flex: 1; min-width: 0; }
.upload-card-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-card-meta { margin-top: 2px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.upload-card-state { display: inline-flex; align-items: center; gap: 5px; }
.upload-card.is-done .upload-card-state { color: var(--ok); font-weight: 500; }
.upload-card-meta--err { color: var(--error); font-weight: 500; }
.upload-bar { margin-top: 8px; height: 4px; border-radius: 999px; background: var(--surface3); overflow: hidden; }
.upload-bar-fill {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: var(--primary);
    transition: width 0.2s var(--ease-out);
}
.upload-card.is-done .upload-bar-fill { background: var(--ok-dot); }
.upload-card-pct { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.upload-card.is-done .upload-card-pct { color: var(--ok); }