/* ============================================================================================
   Telefonkönyv (2026-09-29) — the central phonebook page, its contact card, import and vocabulary
   dialogs, and the mailbox's contact chips. Colours come ONLY from the app tokens (light + dark
   themes follow automatically); chips reuse the canonical .ms-chip look with --chip-color.
   ============================================================================================ */

.pb-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* The list's place while the user's rights and the tab counts load (the grid is drawn after them). */
.pb-loading { padding: 2rem; text-align: center; color: var(--accent); font-size: 1.5rem; }

/* Category tabs with counts; the active tab takes the category's colour. */
.pb-tabs { flex-wrap: wrap; row-gap: .25rem; }
.pb-tabs .tab-btn { display: inline-flex; align-items: center; gap: .35rem; }
.pb-tabs .tab-btn.active { border-bottom-color: var(--chip-color, var(--accent)); }
.pb-tab-icon { color: var(--chip-color, var(--accent)); }
.pb-count {
    display: inline-block; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px;
    font-size: .72rem; line-height: 1.3rem; text-align: center; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--chip-color, var(--accent)) 14%, transparent);
    color: var(--text-secondary);
}

.pb-filter-help { flex: 1; align-self: center; color: var(--text-muted); font-size: .8rem; }

/* Selection bar above the grid. */
.pb-bulkbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .5rem .9rem; border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.pb-bulk-count { font-weight: 600; margin-right: .25rem; }

/* Grid cells. */
.pb-grid .pb-col-check { width: 2.2rem; }
.pb-nick { margin-left: .35rem; color: var(--text-muted); font-style: italic; }
.pb-private { margin-left: .35rem; color: var(--text-muted); font-size: .75rem; }
.pb-chips { display: inline-flex; gap: .25rem; flex-wrap: nowrap; overflow: hidden; }
.pb-chip { font-size: .72rem; padding: .05rem .5rem; white-space: nowrap; }
.pb-email { margin-right: .35rem; }
.pb-nl { font-size: .7rem; }
.pb-consent { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; }
.pb-consent-granted { color: var(--success); }
.pb-consent-denied { color: var(--danger); }
.pb-consent-unknown { color: var(--text-muted); }
.pb-danger, .pb-danger i { color: var(--danger); }

/* Contact card. */
.pb-card-body { min-height: min(60vh, 620px); }
.pb-muted { color: var(--text-muted); font-size: .85rem; margin: 0; }
.pb-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.pb-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--text-muted); font-size: .8rem; }
.pb-dups ul { margin: .35rem 0 0 1.1rem; padding: 0; }

.pb-channels { display: flex; flex-direction: column; gap: .4rem; }
.pb-ch-head, .pb-ch-row {
    display: grid; align-items: center; gap: .5rem;
    grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 2fr) minmax(7rem, 1fr) 4.5rem minmax(8rem, 1fr) minmax(8rem, 1.4fr) 2rem;
}
.pb-ch-head { font-size: .7rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: .02em; }
.pb-ch-row .gratis-check { justify-self: center; }
.pb-ch-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .25rem; }

.pb-links { display: flex; flex-direction: column; gap: .4rem; }
.pb-link-row {
    display: grid; align-items: center; gap: .5rem;
    grid-template-columns: 7rem minmax(10rem, 2fr) minmax(8rem, 1.4fr) minmax(8rem, 1.4fr) 2rem;
}
.pb-link-kind { font-size: .75rem; color: var(--text-muted); }
.pb-link-title { font-weight: 600; }

.pb-notes { display: flex; flex-direction: column; gap: .5rem; }
.pb-note { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .75rem; background: var(--surface); }
.pb-note.pinned { border-color: color-mix(in srgb, var(--warning) 60%, var(--border)); }
.pb-note-meta { font-size: .72rem; color: var(--text-muted); margin-bottom: .2rem; }
.pb-note-text { white-space: pre-wrap; }

/* Import dialog. */
.pb-drop {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 5rem; padding: 1rem; border: 2px dashed var(--border-strong); border-radius: var(--radius);
    color: var(--text-secondary); cursor: pointer; text-align: center;
}
.pb-drop:hover, .pb-drop.has-file { border-color: var(--accent); color: var(--text-primary); }
.pb-drop i { font-size: 1.6rem; color: var(--accent); }
/* The file input covers the whole zone, so dropping a file anywhere on it works without script. */
.pb-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pb-paste { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82rem; }
.pb-parse { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.pb-preview { font-size: .8rem; border-left: 3px solid var(--accent); padding: .25rem .6rem; background: var(--surface-alt); }
.pb-section { margin: .25rem 0 0; font-weight: 600; }
.pb-progress { position: relative; height: 1.6rem; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.pb-progress-bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 45%, transparent); transition: width .3s; }
.pb-progress span { position: relative; display: block; text-align: center; line-height: 1.6rem; font-size: .8rem; font-variant-numeric: tabular-nums; }

/* Vocabulary (categories / tags). */
.pb-vocab { display: flex; flex-direction: column; gap: .45rem; }
.pb-vocab-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pb-vocab-row .pb-chip { min-width: 9rem; }
.pb-vocab-name { flex: 1; min-width: 10rem; }
.pb-vocab-new { padding-top: .5rem; border-top: 1px dashed var(--border); }

/* Mailbox: the message's people as phonebook chips. */
.mailbox-contacts { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .5rem; }
.mailbox-contacts-label { font-size: .75rem; color: var(--text-muted); margin-right: .25rem; }
.mailbox-contacts .mail-chip { cursor: pointer; border: 1px solid var(--border); }
.mailbox-contacts .mailbox-contact-known { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
.mailbox-contacts .mailbox-contact-known i { color: var(--success); }

@media (max-width: 900px) {
    .pb-ch-head { display: none; }
    .pb-ch-row, .pb-link-row { grid-template-columns: 1fr 1fr; }
}