/* ── Vaka Sorumluları (CaseOfficers.razor) + Vaka Sorumlusu Detayı (CaseOfficerDetail.razor) ──
 *
 * Liste (Admin), VS kartı, yeni VS / aktarma modalları, tek seferlik geçici şifre paneli ve
 * detay sayfasının sekme içerikleri. Ortak parçalar (page-header, status-badge, tab-bar,
 * offender-avatar, row-action-btn, modal-form, ui-input-native) diğer dosyalarda; burada
 * yalnızca bu iki sayfaya özgü sınıflar. Tokens-only, inline style yok.
 * Per Docs/decisions/2026-06-01-css-mimari-tek-klasor.md.
 */

/* SmgButton'un ChildContent'i içinde doğrudan flex öğesi olarak durur (eski
   UiButton'daki .ui-btn__icon sarmalayıcısı yok): hizalamayı burada veriyoruz. */
.co-btn-icon { display: inline-flex; align-items: center; flex: none; line-height: 1; font-size: 16px; }
.co-sub-warn { color: var(--va-warning); }
.co-muted { color: var(--va-text-muted); font-size: 12px; }
.co-hint { font-size: 12px; color: var(--va-text-dim); margin: 0; line-height: 1.45; }

/* Ad hücresi: ad + kayıt tarihi */
.co-name-cell { display: flex; flex-direction: column; min-width: 0; }
.co-name { font-weight: 600; color: var(--va-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-name-sub { font-size: 11px; color: var(--va-text-muted); }

/* Yükümlü sayısı */
.co-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px;
    border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: color-mix(in oklab, var(--va-accent) 14%, transparent); color: var(--va-accent);
}
.co-count--zero { background: var(--va-elevated); color: var(--va-text-muted); font-weight: 500; }

/* Aktif vekâlet çipleri (grid hücresi): out = devretti, in = vekâlet aldı */
.co-deleg-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.co-deleg-chip {
    display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.co-deleg-chip .material-symbols-outlined { font-size: 13px; }
.co-deleg-chip--out { color: var(--va-warning); background: color-mix(in oklab, var(--va-warning) 12%, transparent); border-color: color-mix(in oklab, var(--va-warning) 35%, transparent); }
.co-deleg-chip--in  { color: var(--va-info);    background: color-mix(in oklab, var(--va-info)    12%, transparent); border-color: color-mix(in oklab, var(--va-info)    35%, transparent); }

/* Satır eylemi — vurgu (hesap oluştur) */
.row-action-btn--accent { color: var(--va-accent); border-color: color-mix(in oklab, var(--va-accent) 35%, transparent); }

/* Formlar (yeni / düzenle / vekâlet): iki sütun, dar ekranda tek */
.co-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--va-sp-4); }
.co-form-grid .form-row { display: flex; flex-direction: column; gap: 6px; }
.co-select { width: 100%; height: 36px; }
.co-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--va-text); cursor: pointer; }
.co-check input { accent-color: var(--va-accent); width: 16px; height: 16px; }
@media (max-width: 560px) { .co-form-grid { grid-template-columns: 1fr; } }

/* Akış adımları (Identity hazır / VS kaydı) */
.co-step {
    display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px;
    border: 1px solid var(--va-border); background: var(--va-elevated); color: var(--va-text);
}
.co-step .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.co-step--ok   { border-color: color-mix(in oklab, var(--va-success) 40%, transparent); }
.co-step--ok   .material-symbols-outlined { color: var(--va-success); }
.co-step--warn { border-color: color-mix(in oklab, var(--va-warning) 45%, transparent); background: color-mix(in oklab, var(--va-warning) 8%, transparent); }
.co-step--warn .material-symbols-outlined { color: var(--va-warning); }
.co-step-note { display: block; font-size: 12px; color: var(--va-text-dim); margin-top: 2px; }

/* Geçici şifre paneli — bir kez gösterilir */
.pwd-panel {
    display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 10px;
    border: 1px dashed color-mix(in oklab, var(--va-warning) 60%, transparent);
    background: color-mix(in oklab, var(--va-warning) 8%, transparent);
}
.pwd-panel__head { display: flex; gap: 10px; align-items: flex-start; }
.pwd-panel__icon { font-size: 22px; color: var(--va-warning); flex-shrink: 0; }
.pwd-panel__title { font-size: 13px; color: var(--va-text); }
.pwd-panel__warn { font-size: 12px; color: var(--va-warning); margin-top: 2px; line-height: 1.4; }
.pwd-panel__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pwd-panel__code {
    flex: 1 1 200px; padding: 8px 12px; border-radius: 8px; user-select: all;
    font-family: var(--va-font-mono); font-size: 16px; letter-spacing: 0.08em; font-weight: 600;
    background: var(--va-bg); color: var(--va-text); border: 1px solid var(--va-border-light);
}

/* Toplu atama — seçilenler */
.co-selected-list { display: flex; flex-wrap: wrap; gap: 6px; }
.co-selected-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px;
    background: color-mix(in oklab, var(--va-accent) 12%, transparent); color: var(--va-text); border: 1px solid color-mix(in oklab, var(--va-accent) 35%, transparent);
}
.co-selected-chip__from { color: var(--va-text-dim); font-size: 11px; }

/* Vekâlet düzenleyici (Admin modalı + VS kartı ortak) */
.co-deleg-form { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--va-border); }
.co-deleg-form-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.co-deleg-form-grid .form-row { display: flex; flex-direction: column; gap: 6px; }
.co-deleg-form-grid .form-label { font-size: 0.8125rem; font-weight: 500; color: var(--va-text-dim); }
.co-deleg-form-grid .ui-input-native { width: 100%; }
.co-deleg-reason { grid-column: 1 / -1; }
.co-deleg-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.co-inline-notice { margin: 0; }
@media (max-width: 640px) { .co-deleg-form-grid { grid-template-columns: 1fr; } }

.co-deleg-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.co-deleg-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--va-border); background: var(--va-elevated);
}
.co-deleg-item--active { border-color: color-mix(in oklab, var(--va-warning) 45%, transparent); background: color-mix(in oklab, var(--va-warning) 6%, transparent); }
.co-deleg-item--ended { opacity: 0.7; }
.co-deleg-item-icon { font-size: 18px; color: var(--va-text-dim); flex-shrink: 0; }
.co-deleg-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.co-deleg-item-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--va-text); }
.co-deleg-item-sub { font-size: 12px; color: var(--va-text-dim); }

/* VS kartı: profil + (vekâletler + bildirim tercihleri) yan yana, dar ekranda alt alta */
.co-me-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--va-sp-5); align-items: start; }
.co-me-right { display: flex; flex-direction: column; gap: var(--va-sp-5); min-width: 0; }
.co-me-avatar { width: 72px; height: 72px; font-size: 1.5rem; margin-bottom: 8px; }
@media (max-width: 900px) { .co-me-grid { grid-template-columns: 1fr; } }

/* Bildirim tercihleri: grid hücresi özeti + kaydet satırı */
.co-notif-cell { display: inline-flex; align-items: center; gap: 4px; }
.co-notif-ch { display: inline-flex; color: var(--va-text-muted); opacity: 0.45; }
.co-notif-ch .material-symbols-outlined { font-size: 16px; }
.co-notif-ch--on { color: var(--va-accent); opacity: 1; }
.co-notif-sev { font-size: 11px; font-weight: 700; color: var(--va-text-dim); padding: 0 6px; border-radius: 999px; background: var(--va-elevated); border: 1px solid var(--va-border); white-space: nowrap; }
.co-notif-esc { font-size: 16px; color: var(--va-high); }
.co-prefs-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.co-dirty { color: var(--va-warning); }

/* ── Detay sayfası (CaseOfficerDetail.razor) ─────────────────────────────── */

/* Grid içinde yükümlü adı: satır tıklamasıyla yarışmayan açık bağlantı */
.co-row-link { color: var(--va-text); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-row-link:hover { color: var(--va-accent); text-decoration: underline; }

/* Sekme altındaki açıklama satırı (tablo ile aynı hizada dursun) */
.co-tab-hint { margin-top: var(--va-sp-3); }

/* Bilgiler sekmesi: kimlik formu + durum/pasifleştirme kartı yan yana */
.co-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--va-sp-5); align-items: start; }
@media (max-width: 1000px) { .co-detail-grid { grid-template-columns: 1fr; } }

/* Geri alınabilir ama sonucu ağır işlem alanı — karttan görsel olarak ayrılır */
.co-danger-zone {
    margin-top: var(--va-sp-5);
    padding-top: var(--va-sp-4);
    border-top: 1px solid var(--va-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}