/* =========================================================================
   Seiten-CSS: Admin – Übersicht, Benutzer, Formulare (admin/*.ejs)
   und die Kontakt-Sync-Karte (partials/syncStatus.ejs, nur auf /admin).
   Nur seitenspezifische Ergänzungen. Zuerst das Vokabular aus DESIGN.md
   verwenden (Komponenten, .stack/.cluster/.grid). Ausschließlich Tokens
   (var(--…)) verwenden, keine Hex-Werte, keine Redefinition von Basis-
   Klassen (.btn, .card, .table, .badge, .muted, .pagination …).
   Selektoren mit einer Seitenklasse präfixen, z. B. .page-admin …
   ========================================================================= */

/* --- Übersicht: Kartenraster -------------------------------------------- */
.page-admin .admin-overview > .card,
.page-admin .admin-side > .card {
    display: flex;
    flex-direction: column;
}

.page-admin .admin-overview > .card > .card-body,
.page-admin .admin-side > .card:last-child > .card-body {
    flex: 1;
}

.page-admin .admin-side > .card:last-child {
    flex: 1;
}

/* Zwischenüberschriften in Karten: .eyebrow (components.css) */

/* --- Kennzahlen innerhalb von Karten (dl > div > dt + dd) --------------- */
.page-admin .admin-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
    gap: 10px;
    margin: 0;
}

.page-admin .admin-kpis > div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

.page-admin .admin-kpis dt {
    overflow-wrap: break-word;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.35;
    color: var(--color-text-tertiary);
}

.page-admin .admin-kpis dd {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: var(--tracking-tighter);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.page-admin .admin-kpi-of {
    margin-left: 1px;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    letter-spacing: 0;
    color: var(--color-text-tertiary);
}

.page-admin .admin-kpis > .is-warning {
    border-color: var(--warning-border);
    background: var(--warning-bg);
}

.page-admin .admin-kpis > .is-warning dd,
.page-admin .admin-kpis > .is-warning dt {
    color: var(--warning-fg);
}

.page-admin .admin-kpis > .is-danger {
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

.page-admin .admin-kpis > .is-danger dd,
.page-admin .admin-kpis > .is-danger dt {
    color: var(--danger-fg);
}

/* Schmale Karten (Telefon): drei Werte als 2 + 1, damit lange Beschriftungen
   („Passwortwechsel offen“) nicht mitten im Wort umbrechen */
@container (max-width: 419.98px) {
    .page-admin .admin-kpis:not(.admin-kpis-5) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-admin .admin-kpis:not(.admin-kpis-5) > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Fünf Werte (E-Mail-Versand): 3 + 2 (Problemfälle breiter), in breiten Karten eine Zeile */
@container (min-width: 260px) {
    .page-admin .admin-kpis-5 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .page-admin .admin-kpis-5 > div {
        grid-column: span 2;
    }

    .page-admin .admin-kpis-5 > div:nth-child(n + 4) {
        grid-column: span 3;
    }
}

@container (min-width: 680px) {
    .page-admin .admin-kpis-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .page-admin .admin-kpis-5 > div,
    .page-admin .admin-kpis-5 > div:nth-child(n + 4) {
        grid-column: auto;
    }
}

/* --- Worker-Jobs ---------------------------------------------------------- */
.page-admin .admin-jobs > li {
    flex-wrap: nowrap;
    gap: 12px;
}

.page-admin .admin-job-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--success-solid);
    box-shadow: 0 0 0 3px var(--success-bg);
}

.page-admin .admin-job-dot.is-stale {
    background: var(--warning-solid);
    box-shadow: 0 0 0 3px var(--warning-bg);
}

.page-admin .admin-job-dot.is-failing {
    background: var(--danger-solid);
    box-shadow: 0 0 0 3px var(--danger-bg);
}

.page-admin .admin-job-main {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    min-width: 0;
}

.page-admin .admin-job-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.page-admin .admin-job-meta {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

@container (min-width: 420px) {
    .page-admin .admin-job-meta {
        margin-left: auto;
    }
}

.page-admin .admin-empty {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

/* --- E-Mail-Problemfälle -------------------------------------------------- */
.page-admin .admin-problem-link {
    font-weight: var(--weight-medium);
}

/* Hinweise mit Icon: .note.icon-text bzw. .field-help.icon-text (components.css) */

/* --- Notschalter: Warnrahmen + Auswahlkarten ---------------------------- */
.page-admin .admin-switches {
    border-color: var(--warning-border);
}

.page-admin .admin-switches > .card-header {
    border-bottom-color: var(--warning-border);
    border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0;
    background: var(--warning-bg);
}

.page-admin .admin-switches > .card-header .card-icon {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--warning-border);
    color: var(--warning-fg);
}

.page-admin .admin-switches > .card-header .card-subtitle {
    color: var(--warning-text);
}

.page-admin .admin-choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    max-width: 1120px;
}

@container (min-width: 440px) {
    .page-admin .admin-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 960px) {
    .page-admin .admin-choices {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.page-admin .admin-choice {
    height: 100%;
    cursor: pointer;
}

.page-admin .admin-choice:hover {
    border-color: var(--color-border-strong);
}

.page-admin .admin-choice:has(input:checked) {
    border-color: var(--navy-300);
    box-shadow: 0 0 0 1px var(--navy-300);
}

.page-admin .admin-choice:has(input:focus-visible) {
    border-color: var(--color-focus);
    box-shadow: var(--focus-ring);
}

.page-admin .admin-choice .check-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.page-admin .admin-choice-title {
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

/* --- Kontakt-Sync-Karte (partials/syncStatus.ejs) ----------------------- */
.sync-status .sync-runs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 14px 20px 10px;
}

.sync-status .sync-runs .table-wrap {
    border-top: 1px solid var(--color-border-subtle);
}

.sync-status .sync-run-badge {
    max-width: 290px;
}

@media (min-width: 1024px) {
    .sync-status .sync-runs td.sync-run-status {
        min-width: 17rem;
    }
}

/* Agent-Version je Lauf erst ab 1600 px als Spalte (.col-from-2xl; darunter als Tooltip an der Laufnummer, mobil in der Karte) */

.sync-status .sync-runs .table thead th:first-child,
.sync-status .sync-runs .table thead th:last-child {
    border-radius: 0;
}

.sync-status .sync-facts {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.sync-diff {
    display: inline-flex;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.sync-diff .is-add {
    color: var(--success-fg);
}

.sync-diff .is-del {
    color: var(--danger-fg);
}

.sync-diff .is-mod {
    color: var(--info-fg);
}

.sync-diff .is-zero {
    color: var(--color-text-tertiary);
}

.sync-status .sync-version {
    display: block;
    max-width: 40ch;
    overflow: hidden;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sync-status .sync-meta {
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .sync-status .sync-runs td.sync-run-status {
        grid-column: 1 / -1;
    }

    .sync-status .sync-version {
        max-width: none;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .sync-status .sync-runs .table-wrap {
        border-top: 0;
    }

    .sync-status .sync-runs-head {
        padding-bottom: 0;
    }
}

/* --- Benutzerliste (admin/users.ejs) ------------------------------------ */
.page-admin .admin-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.page-admin .admin-user .avatar {
    flex-shrink: 0;
}

.page-admin .admin-user-text {
    min-width: 0;
}

@media (min-width: 768px) {
    .page-admin .admin-users-table .admin-user-text {
        min-width: 13rem;
    }
}

/* „Angelegt“ erst ab 1600 px (.col-from-2xl; darunter reicht der Platz nicht neben den Zeilenaktionen) */

.page-admin .admin-user-email {
    overflow-wrap: anywhere;
}

.page-admin .admin-self {
    margin-left: 4px;
    vertical-align: 1px;
}

/* --- Formulare (admin/user_form.ejs, admin/user_password.ejs) ----------- */
.page-admin .admin-roles {
    grid-template-columns: minmax(0, 1fr);
}

.page-admin .admin-roles > dt {
    padding-bottom: 2px;
    border-bottom: 0;
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.page-admin .admin-roles > dd {
    padding-top: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.page-admin .admin-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: admin-step;
}

.page-admin .admin-steps > li {
    position: relative;
    padding-left: 32px;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
    counter-increment: admin-step;
}

.page-admin .admin-steps > li::before {
    content: counter(admin-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--brand-bg);
    color: var(--brand-fg);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

@container (max-width: 359.98px) {
    .page-admin .admin-kpis {
        gap: 8px;
    }

    .page-admin .admin-kpis > div {
        padding: 8px 10px;
    }
}

@media (min-width: 1600px) {
    .page-admin .admin-users-table .admin-user-email {
        overflow-wrap: normal;
        white-space: nowrap;
    }
}