/* ── Bildirimler: Bildirim Ayarları sayfası (Notifications.razor) + NotificationPrefsForm (.np-*) ─────────
 *
 * Genel ayarlar / test gönder kartları, istatistik çipleri, günlük filtreleri ve grid hücreleri; vaka sorumlusu
 * bildirim tercihleri formu (CaseOfficers modalı + VS kartı). Kanal / durum / eskalasyon çipleri
 * (.notif-channel, .notif-status, .notif-escalation) offender-detail.css'te; tablo (.notif-table) alarms.css'te.
 * Ortak parçalar (page-header, ver-label, ver-chip, ver-stat, ver-notice, audit-filter-grid, ui-input-native)
 * diğer dosyalarda. Tokens-only, inline style yok. Per Docs/decisions/2026-06-01-css-mimari-tek-klasor.md.
 */

/* Başlık bağlantısı (Vaka sorumlusu tercihleri) */
.nf-link {
    display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 500;
    color: var(--va-text-dim); text-decoration: none; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--va-border);
}
.nf-link:hover { color: var(--va-accent); border-color: var(--va-accent); }

/* İstatistik çipleri */
.nf-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--va-sp-4); }
.nf-stat-icon { font-size: 14px; }
.nf-stats-note { align-self: center; }
.ver-stat--escalation { color: var(--va-high); border-color: color-mix(in oklab, var(--va-high) 35%, transparent); background: color-mix(in oklab, var(--va-high) 10%, transparent); }
.ver-stat--escalation .ver-stat-num { color: inherit; }

/* Genel ayarlar + test: iki sütun, dar ekranda tek */
.nf-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--va-sp-4); margin-bottom: var(--va-sp-4); align-items: start; }
@media (max-width: 1000px) { .nf-grid { grid-template-columns: 1fr; } }

.nf-settings { display: flex; flex-direction: column; gap: 14px; }
.nf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nf-field--grow { flex: 1 1 220px; }
.nf-num { width: 140px; flex: 0 0 auto; }
.nf-select { width: 200px; flex: 0 0 auto; }
.nf-textarea { height: auto; min-height: 56px; padding: 8px 10px; resize: vertical; line-height: 1.45; width: 100%; font-family: var(--va-font-mono); font-size: 12px; }
.nf-quiet-row { display: flex; align-items: center; gap: 8px; }
.nf-time { width: 120px; flex: 0 0 auto; }
.nf-quiet-sep { color: var(--va-text-muted); }
.nf-test { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }

/* Günlük filtreleri + grid satırı (eskalasyon vurgulu) */
.nf-log-filters { margin-bottom: var(--va-sp-4); }
/* Eskalasyon satırı (SmgGrid). SmgGrid gerçek bir <table> çizer ve RowClass'ı doğrudan <tr>'ye yazar
 * (taban bir satır sınıfı yoktur), bu yüzden vurgu tablo kabıyla birlikte hedeflenir.
 * Hücreler saydam bırakılır: hem sol şerit görünür hem de alarms.css'teki genel
 * `.notif-row--escalation td` kuralıyla tonlama iki kez binmez. */
.smg-grid .smg-data-table tbody tr.notif-row--escalation {
    --nf-escalation-accent: var(--va-high);
    --nf-escalation-tint: 7%;
    --nf-escalation-bar: 3px;
    background: color-mix(in oklab, var(--nf-escalation-accent) var(--nf-escalation-tint), transparent);
    box-shadow: inset var(--nf-escalation-bar) 0 0 var(--nf-escalation-accent);
}
.smg-grid .smg-data-table tbody tr.notif-row--escalation > td { background: transparent; }
.nf-filter-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.nf-recipient { display: flex; flex-direction: column; min-width: 0; }
.nf-recipient-to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-subject { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── NotificationPrefsForm (.np-*) ──────────────────────────────────────────── */
.np-form { display: flex; flex-direction: column; gap: 12px; }
.np-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.np-label { font-size: 0.75rem; font-weight: 600; color: var(--va-text-dim); }
.np-channels { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.np-ch-icon { font-size: 16px; color: var(--va-text-dim); }
.np-select { width: 100%; max-width: 280px; }
.np-input { width: 100%; }
.np-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.np-hint { font-size: 0.6875rem; line-height: 1.4; color: var(--va-text-muted); }
.np-warn { font-size: 0.75rem; color: var(--va-warning); }
@media (max-width: 720px) { .np-grid { grid-template-columns: 1fr; } }