/* ==========================================================================
   Components — Seitenkopf, Karten, Sektionen, Kennzahlen, Badges,
   Leerzustände, Admin-Kacheln, Upload
   ========================================================================== */

/* ── Seitenkopf ──────────────────────────────────────────────────────── */
/* Gradient-Akzent (Streifen unten, Balken vor h1) spiegelt die Farbsprache
   der Sidebar (--sb-hue-1/2/3, aktiver Nav-Indikator) im hellen Content. */
.page-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.page-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-500), var(--accent));
    opacity: 0.55;
}

/* Titelblock: entweder h1 direkt in .page-header, oder h1 (+ Zurück-Button,
   + Subtitle) in einem umschließenden div — der Akzentbalken sitzt jeweils
   am äußersten Block, damit ein "Zurück"-Button nicht neben dem Balken
   hervorsteht. */
.page-header > h1,
.page-header > div:first-child:has(> h1) {
    position: relative;
    padding-left: var(--space-3);
}

.page-header > div:first-child:has(> h1) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.page-header > h1::before,
.page-header > div:first-child:has(> h1)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--accent), var(--brand-500));
    box-shadow: 0 0 10px rgba(82, 179, 55, 0.35);
}

.page-header > div:first-child:has(> h1) h1 {
    padding-left: 0;
}

.page-header h1 {
    font-size: var(--fs-28);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
}

.page-header .page-subtitle {
    margin-top: 0;
    font-size: var(--fs-14);
    color: var(--text-muted);
}

.page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Karte ───────────────────────────────────────────────────────────── */
.card {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.card-header h2,
.card-header h3 {
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
}

.card-body { min-width: 0; }

.card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* ── Sektion (Karte mit Kopf-/Körperzonen) ───────────────────────────── */
.section {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}
.section-header h2,
.section-header h3 {
    font-size: var(--fs-15);
    font-weight: var(--fw-semibold);
}

.section-subtitle {
    margin-left: var(--space-2);
    font-size: var(--fs-13);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
}

.section-body { padding: var(--space-5); }

.section-body-compact { padding: 0; }
.section-body-compact .table-container {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.section-divider {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: 0;
}

.section-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.section-group-title {
    margin-bottom: var(--space-1);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* ── Kennzahlen ──────────────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}
/* Steht das Raster frei über weiterem Inhalt (z. B. Support), braucht es
   Abstand nach unten; innerhalb einer Sektion ist es letztes Kind. */
.stat-grid:not(:last-child) { margin-bottom: var(--space-5); }

.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.stat-card:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-sm);
}

.stat-card .stat-label {
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.stat-card .stat-value {
    font-size: var(--fs-28);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.stat-card .stat-meta {
    font-size: var(--fs-12);
    color: var(--text-muted);
}

.stat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
}

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    white-space: nowrap;
}

.badge-primary {
    background: var(--brand-soft);
    border-color: transparent;
    color: var(--brand);
}
.badge-success {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-fg);
}
.badge-danger {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-fg);
}
.badge-warning {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-fg);
}
.badge-info {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-fg);
}
.badge-neutral {
    background: var(--surface-sunken);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
}

/* ── Leerzustand ─────────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-5);
    text-align: center;
    color: var(--text-muted);
}
.empty-state .icon,
.empty-state svg {
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-2);
    font-size: 40px;
    color: var(--text-disabled);
    opacity: 0.8;
}
.empty-state h3 {
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}
.empty-state p {
    font-size: var(--fs-14);
    max-width: 44ch;
}

/* ── Admin-Kacheln ───────────────────────────────────────────────────── */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.admin-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
a.admin-card:hover,
div.admin-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: inherit;
}

.admin-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.admin-card-icon svg { stroke: currentColor; }
.admin-card:hover .admin-card-icon {
    background: var(--brand-soft);
    color: var(--brand);
}

.admin-card-body { min-width: 0; }
.admin-card-body h3 {
    margin-bottom: var(--space-1);
    font-size: var(--fs-15);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
.admin-card-body p {
    margin: 0;
    font-size: var(--fs-13);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

/* ── Hinweisboxen ────────────────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: var(--fs-14);
    line-height: var(--lh-snug);
}
.alert .icon { flex-shrink: 0; margin-top: 1px; }
.alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-fg); }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-fg); }

/* ── Upload ──────────────────────────────────────────────────────────── */
.upload-hint {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    background: var(--info-bg);
    color: var(--info-fg);
    font-size: var(--fs-13);
}
.upload-hint .icon,
.upload-hint svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-7) var(--space-5);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-base);
    color: var(--text-muted);
    font-size: var(--fs-14);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.upload-zone:hover,
.upload-zone-dragover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
}
.upload-zone p { margin: 0; }
.upload-zone-hint {
    font-size: var(--fs-12);
    color: var(--text-muted);
}
.upload-picker.is-busy .upload-zone { pointer-events: none; opacity: 0.6; }

/* ── Gewählte Dateien (Vorschauliste) ────────────────────────────────── */
.upload-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.upload-file-list:empty { display: none; }

.upload-file {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-base);
}
.upload-file.is-done  { border-color: var(--success-border, var(--success)); }
.upload-file.is-error { border-color: var(--danger-border, var(--danger)); }

.upload-file-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    cursor: pointer;
}
.upload-file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.upload-file-ext {
    font-size: var(--fs-11);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.upload-file-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.upload-file-meta {
    font-size: var(--fs-12);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-file-main .upload-progress-bar { width: 100%; }

.upload-file-status {
    flex-shrink: 0;
    width: 70px;
    font-size: var(--fs-12);
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.upload-file-remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.upload-file-remove:hover { background: var(--surface-sunken); color: var(--danger); }
.upload-file-remove:disabled { opacity: 0.4; cursor: default; }

/* Miniaturbild in der Dokumententabelle */
.doc-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font-size: var(--fs-10, 10px);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
}
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.upload-progress-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.upload-progress-item:last-child { border-bottom: 0; }

.upload-progress-name {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-13);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-progress-bar {
    flex-shrink: 0;
    width: 110px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
}
.upload-progress-fill {
    height: 100%;
    width: 0;
    border-radius: var(--radius-pill);
    background: var(--brand);
    transition: width var(--duration-slow) var(--ease-out);
}
.upload-progress-success .upload-progress-fill { background: var(--success); }
.upload-progress-error   .upload-progress-fill { background: var(--danger); }

.upload-progress-status {
    flex-shrink: 0;
    width: 76px;
    font-size: var(--fs-12);
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Vollflächige Drop-Zone beim Ziehen über das Fenster */
.header-dropzone {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--surface-overlay);
    backdrop-filter: blur(2px);
}
.header-dropzone-content {
    padding: var(--space-10) var(--space-12);
    border: 2px dashed var(--brand);
    border-radius: var(--radius-xl);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    color: var(--text-secondary);
    text-align: center;
}
.header-dropzone-content svg,
.header-dropzone-content .icon {
    margin: 0 auto var(--space-3);
    stroke: var(--brand);
    color: var(--brand);
}
.header-dropzone-content p {
    margin: 0;
    font-size: var(--fs-18);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}

/* ── ActionMenu: Zeilenaktionen als aufklappbares Menü ───────────────── */
.action-menu {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    text-align: left;
}
.btn.action-menu-toggle { gap: var(--space-1); }
.action-menu-chevron {
    font-size: 14px;
    transition: transform var(--duration-base) var(--ease-out);
}
.action-menu.open .action-menu-chevron { transform: rotate(180deg); }

/* Desktop: Liste liegt geschlossen unsichtbar im Panel und wird beim
   Öffnen als schwebendes Element an <body> gehängt (siehe action-menu.js). */
.action-menu-panel { display: none; }

.action-menu-list.is-floating {
    position: fixed;
    z-index: var(--z-dropdown);
    padding: var(--space-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    transform-origin: top right;
    animation: actionMenuSlideDown var(--duration-base) var(--ease-out);
}
.action-menu-list.is-floating.is-above {
    transform-origin: bottom right;
    animation-name: actionMenuSlideUp;
}
.action-menu-item { white-space: nowrap; }

@keyframes actionMenuSlideDown {
    from { opacity: 0; transform: translateY(-6px) scaleY(0.92); }
    to   { opacity: 1; transform: none; }
}
@keyframes actionMenuSlideUp {
    from { opacity: 0; transform: translateY(6px) scaleY(0.92); }
    to   { opacity: 1; transform: none; }
}

/* Icon-Variante (⋯) */
.btn.action-menu-toggle-icon { color: var(--text-muted); }
.btn.action-menu-toggle-icon:hover,
.action-menu.open .btn.action-menu-toggle-icon { color: var(--text-primary); background: var(--surface-sunken); }

/* Mobil: Menü gleitet in der Karte auf und schiebt den Inhalt darunter
   (nicht bei .action-menu-float, die bleibt schwebend). */
@media (max-width: 640px) {
    .action-menu:not(.action-menu-float) { display: block; width: 100%; }
    .action-menu:not(.action-menu-float) .btn.action-menu-toggle {
        width: 100%;
        justify-content: space-between;
        min-height: 40px;
    }

    .action-menu:not(.action-menu-float) .action-menu-panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--duration-slow) var(--ease-out);
    }
    .action-menu.open:not(.action-menu-float) .action-menu-panel { grid-template-rows: 1fr; }

    .action-menu-list:not(.is-floating) {
        min-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: visibility 0s linear var(--duration-slow);
    }
    .action-menu.open .action-menu-list:not(.is-floating) {
        visibility: visible;
        transition-delay: 0s;
    }
    .action-menu-list:not(.is-floating)::before {
        content: '';
        display: block;
        height: var(--space-2);
    }
    .action-menu-item {
        min-height: 44px;
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-14);
    }
    .action-menu-list:not(.is-floating) .action-menu-item + .action-menu-item { border-top: 1px solid var(--border-subtle); border-radius: 0; }
}

/* ── Smartphone: Seitenkopf, Sektionen, Kennzahlen ───────────────────── */
@media (max-width: 640px) {
    .page-header {
        gap: var(--space-3);
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
    }
    .page-header h1 { font-size: var(--fs-22); }
    .page-header .page-subtitle { font-size: var(--fs-13); }

    /* Aktionen füllen die Zeile gleichmäßig statt als loser Haufen */
    .page-header > .page-actions,
    .page-header > .btn {
        width: 100%;
    }
    .page-header > .page-actions > .btn,
    .page-header > .page-actions > .form-select,
    .page-header > .page-actions > .form-input {
        flex: 1 1 auto;
    }

    .section { margin-bottom: var(--space-4); }
    .section-header { padding: var(--space-3) var(--space-4); }
    .section-header > .section-subtitle {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: calc(-1 * var(--space-2));
        font-size: var(--fs-12);
    }
    .section-body { padding: var(--space-4); }
    .section-body-compact { padding: 0; }
    .section-body-compact .table-container { padding: var(--space-3); }

    /* Kennzahlen: zwei Spalten statt je Kachel eine volle Zeile */
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }
    .stat-card {
        gap: var(--space-1);
        padding: var(--space-3);
    }
    .stat-card .stat-label { font-size: var(--fs-11); letter-spacing: 0.04em; }
    .stat-card .stat-value { font-size: var(--fs-22); }
    .stat-card-icon { width: 28px; height: 28px; }

    .empty-state { padding: var(--space-8) var(--space-4); }
}