/* ==========================================================================
   Dashboard — Begrüßung, Installationshinweis, Kennzahlen-Leiste und
   Listen-Sektionen. Mobile first: eine Spalte, große Touch-Ziele; ab
   1100px zwei Spalten.
   ========================================================================== */

/* ── Kopf ─────────────────────────────────────────────────────────── */
.dash-header #dash-date:empty { display: none; }
.dash-header #dash-date::first-letter { text-transform: uppercase; }

/* ── Installationshinweis (PWA) ───────────────────────────────────── */
.dash-install {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(95, 132, 189, 0.18), transparent 60%),
        radial-gradient(120% 140% at 100% 100%, rgba(167, 139, 250, 0.14), transparent 60%),
        var(--surface-raised);
    box-shadow: var(--shadow-sm);
    animation: dash-fade-in var(--duration-slow) var(--ease-out);
}
[data-theme="dark"] .dash-install { border-color: rgba(142, 170, 212, 0.35); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dash-install { border-color: rgba(142, 170, 212, 0.35); }
}

.dash-install-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.dash-install-body strong {
    display: block;
    font-size: var(--fs-15);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
.dash-install-body p {
    margin: 2px 0 0;
    font-size: var(--fs-13);
    line-height: var(--lh-snug);
    color: var(--text-secondary);
}
.dash-install-body .icon {
    vertical-align: -2px;
    color: var(--brand);
}

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

@keyframes dash-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ── Kennzahlen-Leiste ────────────────────────────────────────────── */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.dash-kpi {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon  value"
        "label label";
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
    color: var(--text-primary);
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.dash-kpi:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
.dash-kpi:active { transform: scale(0.98); }
.dash-kpi:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.dash-kpi-icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
}
.dash-kpi-value {
    grid-area: value;
    justify-self: end;
    font-size: var(--fs-28);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.dash-kpi-label {
    grid-area: label;
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}

.dash-kpi-danger  { border-color: var(--danger-border); }
.dash-kpi-danger  .dash-kpi-icon  { background: var(--danger-bg);  color: var(--danger); }
.dash-kpi-danger  .dash-kpi-value { color: var(--danger); }
.dash-kpi-warning { border-color: var(--warning-border); }
.dash-kpi-warning .dash-kpi-icon  { background: var(--warning-bg); color: var(--warning); }
.dash-kpi-warning .dash-kpi-value { color: var(--warning); }
.dash-kpi-calm    .dash-kpi-icon  { background: var(--success-bg); color: var(--success); }

/* ── Raster der Sektionen ─────────────────────────────────────────── */
.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}
.dash-grid > .section { margin-bottom: 0; }

/* Breit: Checklisten rechts über zwei Zeilen, links Abweichungen und QR
   untereinander – vermeidet Lücken, wenn die Sektionen ungleich hoch sind. */
@media (min-width: 1100px) {
    .dash-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "deviations managed"
            "qr         managed"
            "stats      stats";
    }
    #dash-deviations  { grid-area: deviations; }
    #dash-managed     { grid-area: managed; }
    #dash-accident-qr { grid-area: qr; }
    #dash-admin-stats { grid-area: stats; }
}

.dash-section { scroll-margin-top: calc(var(--header-h) + var(--space-3)); }

.dash-section-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dash-section-title h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.dash-section-title .section-subtitle { margin-left: 0; }
.dash-count:empty { display: none; }

/* ── Listen (Checklisten, Abweichungen) ───────────────────────────── */
.dash-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-subtle);
}
.dash-item:first-child { border-top: 0; }

/* Status-Streifen links */
.dash-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--space-2);
    bottom: var(--space-2);
    width: 3px;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    background: transparent;
}
.dash-item-overdue::before,
.dash-item-deviation::before { background: var(--danger); }
.dash-item-due::before       { background: var(--warning); }
.dash-item-ok::before        { background: var(--success); }
.dash-item-overdue           { background: linear-gradient(90deg, var(--danger-bg), transparent 55%); }

.dash-item-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.dash-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.dash-item-title {
    min-width: 0;
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.dash-item-date {
    flex-shrink: 0;
    font-size: var(--fs-12);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.dash-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    font-size: var(--fs-12);
    color: var(--text-muted);
}
.dash-item-meta > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}
.dash-item-meta .icon { opacity: 0.75; }

.dash-item-note {
    margin: var(--space-1) 0 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font-size: var(--fs-13);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.dash-item-action { flex-shrink: 0; }

.dash-item-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-2);
}

/* Eingeklappt: nur die ersten 5 Einträge */
.dash-list.is-collapsed > .dash-item:nth-child(n + 6) { display: none; }

.dash-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
    min-height: 44px;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-link);
    font: inherit;
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    cursor: pointer;
}
.dash-more:hover { background: var(--surface-sunken); }
.dash-more .icon { transition: transform var(--duration-base) var(--ease-out); }
.dash-more.is-open .icon { transform: rotate(180deg); }

/* ── Systemzahlen ─────────────────────────────────────────────────── */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
}

.dash-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon  value"
        "label label";
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.dash-stat-icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
}
.dash-stat-value {
    grid-area: value;
    justify-self: end;
    font-size: var(--fs-22);
    font-weight: var(--fw-semibold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.dash-stat-label {
    grid-area: label;
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}

/* ── Smartphone ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .dash-header { margin-bottom: var(--space-4); padding-bottom: var(--space-3); }
    .dash-header h1 { font-size: var(--fs-22); }

    .dash-install {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-3);
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }
    .dash-install-icon { width: 40px; height: 40px; border-radius: 10px; }
    .dash-install-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }
    .dash-install-actions .btn { min-height: 44px; justify-content: center; }

    /* Kennzahlen: immer in einer Reihe, kompakt */
    .dash-kpis {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }
    .dash-kpi {
        grid-template-columns: 1fr;
        grid-template-areas: "icon" "value" "label";
        justify-items: start;
        gap: var(--space-1);
        padding: var(--space-3);
    }
    .dash-kpi-icon { width: 28px; height: 28px; margin-bottom: var(--space-1); }
    .dash-kpi-value { justify-self: start; font-size: var(--fs-22); }
    .dash-kpi-label { font-size: var(--fs-12); line-height: var(--lh-tight); }

    .dash-grid { gap: var(--space-4); }

    .dash-section .section-header { padding: var(--space-3) var(--space-4); }
    .dash-section .section-body:not(.section-body-compact) { padding: var(--space-4); }
    .dash-section-title .section-subtitle { font-size: var(--fs-12); }

    .dash-item { padding: var(--space-3) var(--space-4); }
    .dash-item-action { width: 44px; height: 44px; }

    /* Abweichungen: Aktionen als volle Button-Reihe unter dem Inhalt */
    .dash-item-deviation {
        flex-direction: column;
        align-items: stretch;
    }
    .dash-item-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dash-item-actions .btn { min-height: 44px; justify-content: center; }

    .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .dash-stat { padding: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
    .dash-install { animation: none; }
    .dash-kpi:active { transform: none; }
}

@media print {
    .dash-install,
    .dash-kpis,
    .dash-header { display: none !important; }
}