/* =========================================================================
   Seiten-CSS: Ansprechpartner – Liste, Formular, Sync-Banner (contacts/*.ejs)
   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-contacts …

   Inhalt
   1. Kopfleiste: Zähler „x/40 aktiv“ als Fortschrittsanzeige
   2. Sync-Banner (_sync_banner.ejs) – ruhige Statusmeldung je Zustand
   3. Suche & Filter (Toolbar)
   4. Tabelle: Person (Avatar, Anrede, Varianten, Namenshinweise),
      Durchwahl, Status, Aktionen – mobil als Karten (.table-stack)
   5. Formular (form.ejs): Abschnitte, Feldraster, haftende Aktionsleiste,
      Seitenspalte (Details, Löschen)
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. Kopfleiste: Zähler als Fortschrittsanzeige
   --------------------------------------------------------------------- */
.page-contacts .contacts-meter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 188px;
    min-width: 0;
    padding: 0 4px;
}

.page-contacts .contacts-meter-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--text-xs);
    line-height: 1.2;
}

.page-contacts .contacts-meter-label {
    color: var(--color-text-tertiary);
}

.page-contacts .contacts-meter-value {
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    white-space: nowrap;
}

.page-contacts .contacts-meter.counter-full .contacts-meter-value {
    color: var(--danger-fg);
}

.page-contacts .contacts-meter .progress {
    height: 5px;
}

/* Schmalere Kopfleiste: nur „x/40 aktiv“ über dem Balken (Beschriftung steckt im title) */
@media (min-width: 640px) and (max-width: 1279.98px) {
    .page-contacts .contacts-meter {
        width: 112px;
    }

    .page-contacts .contacts-meter-row {
        justify-content: flex-end;
    }

    .page-contacts .contacts-meter-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 639.98px) {
    .page-contacts .topbar-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .page-contacts .contacts-meter {
        width: auto;
        padding: 0;
    }
}

/* ---------------------------------------------------------------------
   2. Sync-Banner: weiße Fläche, Ton nur in Icon-Kachel und Pill
   (Klasse „sync-banner sync-<kind>“ wird von Tests geprüft)
   --------------------------------------------------------------------- */
.page-contacts .sync-banner {
    --sync-bg: var(--neutral-bg);
    --sync-fg: var(--neutral-fg);
    --sync-border: var(--neutral-border);
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.page-contacts .sync-tone-success { --sync-bg: var(--success-bg); --sync-fg: var(--success-fg); --sync-border: var(--success-border); }
.page-contacts .sync-tone-info { --sync-bg: var(--info-bg); --sync-fg: var(--info-fg); --sync-border: var(--info-border); }
.page-contacts .sync-tone-warning { --sync-bg: var(--warning-bg); --sync-fg: var(--warning-fg); --sync-border: var(--warning-border); }
.page-contacts .sync-tone-danger { --sync-bg: var(--danger-bg); --sync-fg: var(--danger-fg); --sync-border: var(--danger-border); }

.page-contacts .sync-banner.sync-error {
    border-color: var(--danger-border);
}

.page-contacts .sync-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    background: var(--sync-bg);
    box-shadow: inset 0 0 0 1px var(--sync-border);
    color: var(--sync-fg);
}

.page-contacts .sync-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-top: 1px;
}

.page-contacts .sync-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.page-contacts .sync-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    color: var(--color-text);
}

.page-contacts .sync-text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

.page-contacts .sync-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

.page-contacts .sync-meta li {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.page-contacts .sync-meta .icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--gray-400);
}

.page-contacts .sync-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: var(--text-sm);
    color: var(--warning-text);
}

.page-contacts .sync-warning .icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--warning-fg);
}

@media (max-width: 639.98px) {
    .page-contacts .sync-banner {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .page-contacts .sync-icon {
        width: 32px;
        height: 32px;
    }
}

/* ---------------------------------------------------------------------
   3. Suche & Filter
   --------------------------------------------------------------------- */
.page-contacts .contacts-filters {
    flex: 1 1 auto;
}

/* Ab 640 px: Suche, Status und „Suchen“ bleiben in einer Zeile; bei
   mittleren Breiten rutscht der Zähler darunter */
@media (min-width: 640px) {
    .page-contacts .contacts-filters {
        flex-wrap: nowrap;
    }

    .page-contacts .contacts-toolbar .toolbar-search {
        flex: 1 1 220px;
    }
}

@media (min-width: 640px) and (max-width: 1099.98px) {
    .page-contacts .contacts-toolbar .toolbar-meta {
        flex: 1 1 100%;
    }
}

/* Suchfeld/Status: .toolbar-search und .toolbar-select; Zurücksetzen mobil nur
   als Icon: .btn-icon-mobile + .visually-hidden-sm (components.css, utilities.css) */

/* ---------------------------------------------------------------------
   4. Tabelle
   --------------------------------------------------------------------- */
.page-contacts .contacts-table td {
    vertical-align: top;
}

/* Aktionen auf die erste Textzeile ausrichten (Zellen oben ausgerichtet) */
.page-contacts .contacts-table td.col-actions .row-actions {
    margin-block: -6px;
}

/* Spaltenbreiten: Name bekommt eine Vorgabe, der Rest verteilt sich auf Funktion & Co. */
.page-contacts .contacts-table th:first-child {
    width: 24%;
}

.page-contacts .contacts-table td.contact-dept-col {
    white-space: nowrap;
}

/* Spalten je Breite – die Tabelle passt ab 768 px ohne horizontales Scrollen:
   ≥ 1440 px   Name · Funktion · Bereich · Durchwahl · Status · Aktionen
   1280–1439   Bereich als zweite Zeile unter der Funktion, Durchwahl ohne Icon
   768–1279    Funktion · Bereich als zweite Zeile unter dem Namen
   < 768 px    Karten (.table-stack) mit beschrifteten Feldern */
.page-contacts .contact-dept-inline,
.page-contacts .contact-role-inline {
    display: none;
}

@media (min-width: 768px) and (max-width: 1439.98px) {
    .page-contacts .contacts-table .contact-dept-col,
    .page-contacts .contact-phone .icon {
        display: none;
    }

    .page-contacts .contact-dept-inline {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
    .page-contacts .contacts-table .contact-function-col {
        display: none;
    }

    .page-contacts .contacts-table th:first-child {
        width: 40%;
    }

    .page-contacts .contact-role-inline:not(:empty) {
        display: block;
        margin-top: -4px;
    }
}

/* Inaktive Zeilen nicht ausgrauen (nach dem Import ist zunächst jeder Kontakt
   inaktiv): den Zustand zeigen der graue Avatar und die Pill „inaktiv“ */
.page-contacts .contacts-table .row-muted td {
    color: var(--color-text-secondary);
}

.page-contacts .contacts-table .row-muted a.cell-title,
.page-contacts .contacts-table .row-muted .contact-phone-number {
    color: var(--color-text);
}

.page-contacts .contacts-table .row-muted a.cell-title:hover {
    color: var(--color-link);
}

/* Person: Avatar + Name (+ Anrede), darunter Varianten und Namenshinweise */
.page-contacts .contact-person {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.page-contacts .contact-avatar {
    margin-top: -5px;
}

.page-contacts .contact-ident {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.page-contacts .contact-link {
    line-height: 1.45;
}

.page-contacts .contact-salutation {
    font-weight: var(--weight-regular);
    color: var(--color-text-tertiary);
}

.page-contacts .contact-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.page-contacts .contact-chips .tag {
    background: var(--gray-75);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-text-secondary);
}

/* Namenshinweis als Warn-Chip (details/summary, ohne JS bedienbar) */
.page-contacts .contact-warn > summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 6px 0 7px;
    border-radius: var(--radius-full);
    background: var(--warning-bg);
    box-shadow: inset 0 0 0 1px var(--warning-border);
    color: var(--warning-fg);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
}

.page-contacts .contact-warn > summary::-webkit-details-marker {
    display: none;
}

.page-contacts .contact-warn > summary:hover {
    color: var(--warning-text);
}

.page-contacts .contact-warn > summary:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.page-contacts .contact-warn-chevron {
    transition: transform var(--duration) var(--ease-out);
}

.page-contacts .contact-warn[open] {
    flex-basis: 100%;
}

.page-contacts .contact-warn[open] .contact-warn-chevron {
    transform: rotate(180deg);
}

.page-contacts .contact-warn-list {
    max-width: 440px;
    margin: 8px 0 0;
    padding: 8px 10px;
    list-style: none;
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-md);
    background: var(--warning-bg);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--warning-text);
}

.page-contacts .contact-warn-list li + li {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--warning-border);
}

/* Durchwahl / Nummer */
.page-contacts .contact-phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.page-contacts .contact-phone .icon {
    flex-shrink: 0;
    color: var(--gray-400);
}

.page-contacts .contact-phone-number {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: var(--color-text);
}

.page-contacts .contact-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.page-contacts .contact-phone-cell .contact-badges {
    margin-top: 6px;
    padding-left: 21px;
}

@media (max-width: 1439.98px) {
    /* Telefon-Icon ist hier ausgeblendet → Pills bündig unter der Nummer */
    .page-contacts .contact-phone-cell .contact-badges {
        padding-left: 0;
    }
}

/* Umschalter: gleiche Breite für Aktivieren/Deaktivieren */
.page-contacts .contact-toggle {
    min-width: 98px;
}

/* Bearbeiten: am Desktop nur als Stift-Icon (der Name ist bereits ein Link
   zum Bearbeiten), „Bearbeiten“ bleibt für Screenreader; mobil mit Text */
@media (min-width: 768px) {
    .page-contacts .contact-edit {
        width: var(--control-h-sm);
        padding: 0;
    }

    .page-contacts .contact-edit-icon {
        margin: 0;
    }

    .page-contacts .contact-edit-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Mobile Kartenansicht (< 768 px): kompakte Karte
     Avatar · Name / „Funktion · Bereich“ / Varianten   |  Status-Pills
     Telefonnummer (eine Zeile)
     [Bearbeiten] [Aktivieren]  (zwei gleich breite Buttons) */
@media (max-width: 767.98px) {
    .page-contacts .contacts-table tr:not(.table-empty) {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
    }

    .page-contacts .contacts-table td.contact-cell {
        grid-column: 1;
        grid-row: 1;
    }

    .page-contacts .contacts-table td.contact-status-cell {
        grid-column: 2;
        grid-row: 1;
    }

    .page-contacts .contacts-table td.contact-function-col,
    .page-contacts .contacts-table td.contact-dept-col {
        display: none;
    }

    .page-contacts .contacts-table td.contact-status-cell::before,
    .page-contacts .contacts-table td.contact-phone-cell::before {
        content: none;
    }

    .page-contacts .contact-status-cell .contact-badges {
        flex-direction: column;
        align-items: flex-end;
    }

    .page-contacts .contact-avatar {
        margin-top: 0;
    }

    .page-contacts .contact-ident {
        gap: 4px;
    }

    .page-contacts .contact-link {
        font-size: var(--text-md);
    }

    .page-contacts .contact-role-inline:not(:empty) {
        display: block;
        margin-top: 0;
        -webkit-hyphens: manual;
        hyphens: manual;
    }

    .page-contacts .contacts-table td.contact-phone-cell {
        grid-column: 1 / -1;
        padding-left: 44px;
    }

    .page-contacts .contact-phone-cell .contact-badges {
        margin-top: 6px;
        padding-left: 0;
    }

    .page-contacts .contacts-table td.col-actions {
        padding-top: 10px;
    }

    .page-contacts .contacts-table td.col-actions .row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-block: 0;
    }

    .page-contacts .contacts-table td.col-actions .row-actions .inline-form {
        display: flex;
    }

    .page-contacts .contacts-table td.col-actions .row-actions .btn {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
   5. Formular (form.ejs)
   Hauptspalte: Hinweise + Formular-Karte mit vier Abschnitten und
   haftender Aktionsleiste; Seitenspalte (.split): Details und
   Löschen bzw. Hinweise beim Anlegen. Mobil einspaltig.
   --------------------------------------------------------------------- */
.page-contact-form .contact-form-body {
    padding: 4px 20px;
}

.page-contact-form .contact-form-body > .form-section {
    padding-block: 24px;
}

.page-contact-form .contact-form-body > * + * {
    margin-top: 0;
}

/* Abschnittskopf: Icon-Kachel + Titel/Beschreibung */
.page-contact-form .contact-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.page-contact-form .contact-section-head .form-section-title {
    line-height: 1.4;
}

.page-contact-form .contact-section-head .form-section-desc {
    line-height: var(--leading-normal);
}

/* Felder eines Abschnitts sind Container für das Feldraster */
.page-contact-form .contact-section-fields {
    container-type: inline-size;
    min-width: 0;
}

/* Person: Anrede schmal, Vor-/Nachname breit */
@container (min-width: 520px) {
    .page-contact-form .contact-name-grid {
        grid-template-columns: minmax(120px, 160px) repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 360px) and (max-width: 519.98px) {
    .page-contact-form .contact-name-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-contact-form .contact-name-grid > .field:first-child {
        grid-column: 1 / -1;
        max-width: 200px;
    }
}

/* Status: Auswahlkarte mit Zähler-Balken */
.page-contact-form .contact-active {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    padding: 14px 16px;
}

.page-contact-form .contact-active > input {
    margin-top: 3px;
}

.page-contact-form .contact-active > .progress {
    grid-column: 2;
    max-width: 320px;
    height: 5px;
}

.page-contact-form .contact-active:has(input:checked) .progress {
    background: var(--color-surface);
}

/* Hinweise (Kollisionen, Nummern) */
.page-contact-form .contact-warning-list {
    margin: 4px 0 0;
    padding-left: 18px;
}

.page-contact-form .contact-warning-list li + li {
    margin-top: 2px;
}

/* Haftende Aktionsleiste am unteren Rand. Per Tab fokussierte Felder dürfen
   nicht unter ihr verschwinden: Scroll-Abstand unten = Höhe der Leiste */
html:has(.page-contact-form .contact-form-actions) {
    scroll-padding-bottom: 96px;
}

/* Haftende Aktionsleiste am unteren Rand */
.page-contact-form .contact-form-actions {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    padding: 12px 20px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-surface-subtle) 92%, transparent);
    box-shadow: var(--shadow-sticky-bottom);
    -webkit-backdrop-filter: saturate(1.6) blur(8px);
    backdrop-filter: saturate(1.6) blur(8px);
}

.page-contact-form .contact-form-actions .card-footer-meta .field-required {
    margin-right: 2px;
}

/* Seitenspalte (Details: .dl, Löschen: .card-icon.tone-danger, .note.icon-text) */
.page-contact-form .contact-hints > li {
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

.page-contact-form .contact-hints > li:first-child {
    padding-top: 10px;
}

.page-contact-form .contact-hints .icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-text-tertiary);
}

@media (max-width: 639.98px) {
    .page-contact-form .contact-form-body {
        padding: 0 16px;
    }

    .page-contact-form .contact-form-body > .form-section {
        padding-block: 20px;
    }

    .page-contact-form .contact-form-actions {
        padding-inline: 16px;
    }

    .page-contact-form .contact-form-actions .card-footer-meta {
        display: none;
    }

    .page-contact-form .contact-form-actions .form-actions {
        flex: 1;
    }

    .page-contact-form .contact-form-actions .form-actions > * {
        flex: 1;
    }
}

/* Mobile Karten: Trefferflächen von Name und Namenshinweis überlappen nicht –
   der Name wächst nach oben (Kartenrand), der Hinweis nach unten
   (Tabellenansicht mit Touch: Standard, mittig – components.css) */
@media (max-width: 767.98px) {
    .page-contacts .contacts-table a.contact-link::after {
        top: auto;
        bottom: 0;
        height: auto;
        min-height: var(--touch-min);
        transform: none;
    }

    .page-contacts .contact-warn > summary.hit-area::after {
        top: 0;
        height: auto;
        min-height: var(--touch-min);
        transform: none;
    }
}