/* ── OffenderDetail page — de-scoped styles ───────────────────────────
 *
 * Former OffenderDetail.razor.css, minus the shared .page-title (now in
 * page-chrome.css) and the .status-badge block (now in badges.css). All other
 * classes are unique to this page and stay global. Classes at the bottom
 * replace former inline style="" attributes in OffenderDetail.razor.
 * Per Docs/decisions/2026-06-01-css-mimari-tek-klasor.md.
 */

/* Back link + header */
.detail-header {
    margin-bottom: var(--va-sp-4);
}

/* ── Tab bar ──────────────────────────────────────────────────────── */
.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--va-border);
    margin-bottom: var(--va-sp-5);
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px var(--va-sp-4);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--va-text-dim);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;   /* overlap the bar's bottom border */
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--va-text);
}

.tab-btn--active {
    color: var(--va-accent);
    border-bottom-color: var(--va-accent);
    font-weight: 600;
}

/* ── Bölgeler tab ─────────────────────────────────────────────────── */
.bolgeler-tab {
    display: flex;
    flex-direction: column;
    gap: var(--va-sp-4);
}

.bolgeler-toolbar {
    display: flex;
    align-items: center;
    gap: var(--va-sp-3);
    flex-wrap: wrap;
}

/* Zone type badge */
.zone-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.zone-type-badge--success {
    background: color-mix(in oklab, var(--va-accent)   12%, transparent);
    color: var(--va-accent);
}
.zone-type-badge--danger  {
    background: color-mix(in oklab, var(--va-danger)   15%, transparent);
    color: var(--va-danger);
}
.zone-type-badge--warning {
    background: color-mix(in oklab, var(--va-warning)  15%, transparent);
    color: var(--va-warning);
}

/* Vertex count cell */
.zone-vertex-count {
    font-size: 0.8125rem;
    color: var(--va-text-dim);
}

/* Action buttons cluster */
.zone-actions {
    display: flex;
    align-items: center;
    gap: var(--va-sp-1);
    justify-content: flex-end;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--va-text-dim);
    text-decoration: none;
    margin-bottom: var(--va-sp-3);
    transition: color 140ms ease;
}
.back-link:hover { color: var(--va-accent); }
.back-link .material-symbols-outlined { font-size: 16px; }

.detail-title-row {
    display: flex;
    align-items: center;
    gap: var(--va-sp-3);
    flex-wrap: wrap;
}

/* ── Responsive grid ──────────────────────────────────────────────── */
.detail-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--va-sp-4);
    align-items: start;
}

@media (max-width: 900px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

.detail-col-left {
    display: flex;
    flex-direction: column;
    gap: var(--va-sp-4);
}

.detail-col-right {
    display: flex;
    flex-direction: column;
    gap: var(--va-sp-4);
}

/* Bottom 2-col inside right column */
.detail-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--va-sp-4);
}

@media (max-width: 700px) {
    .detail-bottom-row { grid-template-columns: 1fr; }
}

/* ── Profile card ─────────────────────────────────────────────────── */
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profile-photo-wrap {
    position: relative;
    margin-bottom: var(--va-sp-3);
}

.profile-photo {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid color-mix(in oklab, var(--va-accent) 30%, var(--va-border));
    display: block;
}

.profile-photo--initials {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--va-accent) 20%, var(--va-elevated));
    color: var(--va-accent);
    font-size: 2rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}

.profile-status-dot {
    position: absolute;
    bottom: 4px; right: 4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--va-card);
}
.profile-status-dot--success { background: var(--va-success); }
.profile-status-dot--danger  { background: var(--va-danger);  }
.profile-status-dot--warning { background: var(--va-warning); }

.profile-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--va-text);
    margin: 0 0 4px;
}

.profile-tc {
    font-size: 0.75rem;
    font-family: var(--va-font-mono, monospace);
    color: var(--va-text-dim);
    background: var(--va-elevated);
    padding: 2px 10px;
    border-radius: 999px;
    margin: 0;
}

.profile-divider {
    width: 100%;
    height: 1px;
    background: var(--va-border);
    margin: var(--va-sp-4) 0;
}

.profile-meta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--va-sp-3);
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.meta-label { color: var(--va-text-dim); }
.meta-value { color: var(--va-text); font-weight: 500; }
.meta-mono  { font-family: var(--va-font-mono, monospace); font-size: 0.75rem; }

/* ── Card section title ────────────────────────────────────────────── */
.card-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--va-text);
    margin-bottom: var(--va-sp-4);
}
.card-section-title .material-symbols-outlined {
    font-size: 18px;
    color: var(--va-accent);
}

/* ── Battery ───────────────────────────────────────────────────────── */
.battery-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.battery-track {
    width: 56px; height: 6px;
    background: var(--va-elevated);
    border-radius: 999px;
    overflow: hidden;
}
.battery-fill {
    height: 100%;
    border-radius: 999px;
}
.battery-fill--success { background: var(--va-success); }
.battery-fill--warning { background: var(--va-warning); }
.battery-fill--danger  { background: var(--va-danger);  }
.battery-label { font-size: 0.8125rem; font-weight: 600; }
.battery-label--success { color: var(--va-success); }
.battery-label--warning { color: var(--va-warning); }
.battery-label--danger  { color: var(--va-danger);  }

/* ── Map card header ───────────────────────────────────────────────── */
.map-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--va-sp-4) var(--va-sp-5);
    border-bottom: 1px solid var(--va-border);
}
.map-location-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--va-text-dim);
}

/* ── Timeline ──────────────────────────────────────────────────────── */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 16px;
    border-left: 2px solid var(--va-border);
}
.timeline-item {
    position: relative;
    padding: 0 0 var(--va-sp-5) var(--va-sp-4);
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
    position: absolute;
    left: -9px; top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid var(--va-card);
}
.timeline-dot--success { background: var(--va-success); }
.timeline-dot--danger  { background: var(--va-danger);  }

.timeline-body { display: flex; flex-direction: column; gap: 3px; }
.timeline-row  { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.timeline-type { font-size: 0.875rem; font-weight: 500; color: var(--va-text); }
.timeline-time { font-size: 0.75rem; color: var(--va-text-dim); white-space: nowrap; }
.timeline-result { font-size: 0.75rem; font-weight: 600; }
.timeline-result--success { color: var(--va-success); }
.timeline-result--danger  { color: var(--va-danger);  }

/* ── Geofence rules ────────────────────────────────────────────────── */
.rules-list {
    display: flex;
    flex-direction: column;
    gap: var(--va-sp-3);
}
.rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--va-sp-3);
}
.rule-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.rule-icon {
    font-size: 16px;
    color: var(--va-text-dim);
    flex-shrink: 0;
}
.rule-name {
    font-size: 0.8125rem;
    color: var(--va-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rule-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.rule-badge--success { background: color-mix(in oklab, var(--va-success) 15%, transparent); color: var(--va-success); }
.rule-badge--danger  { background: color-mix(in oklab, var(--va-danger)  15%, transparent); color: var(--va-danger);  }

/* ── Alarm list (Genel sekmesi) ────────────────────────────────────── */
.alarm-list {
    display: flex;
    flex-direction: column;
    gap: var(--va-sp-3);
    margin-top: var(--va-sp-2);
}
/* Satır: ana satır (.alarm-item-main) + isteğe bağlı Bildirimler bölümü alt alta */
.alarm-item {
    display: flex;
    flex-direction: column;
    gap: var(--va-sp-2);
    padding: var(--va-sp-3) var(--va-sp-4);
    border-radius: var(--va-radius-md, 8px);
    background: var(--va-elevated);
    border-left: 3px solid transparent;
}
.alarm-item-main {
    display: flex;
    align-items: center;
    gap: var(--va-sp-3);
}
/* Cihaz güvenliği türleri: Kritik kırmızı zemin, Cihaz değişikliği turuncu, Geliştirici modu uyarı */
.alarm-item--devsec    { border-left-color: var(--va-danger); background: color-mix(in oklab, var(--va-danger) 9%, var(--va-elevated)); }
.alarm-item--devchange { border-left-color: var(--va-high);   background: color-mix(in oklab, var(--va-high)   8%, var(--va-elevated)); }
.alarm-item--devmode   { border-left-color: var(--va-warning); }
.alarm-type-icon { font-size: 15px; vertical-align: -3px; margin-inline-end: 2px; }
.alarm-type-icon--devsec    { color: var(--va-danger); }
.alarm-type-icon--devchange { color: var(--va-high); }
.alarm-type-icon--devmode   { color: var(--va-warning); }
.row-action-btn--on { color: var(--va-accent); border-color: color-mix(in oklab, var(--va-accent) 45%, transparent); background: color-mix(in oklab, var(--va-accent) 10%, transparent); }

/* Bildirimler (alarm satırı altı): kanal çipi · alıcı · eskalasyon · durum · zaman */
.alarm-notifs { padding: 8px 10px 4px; border-top: 1px dashed var(--va-border); }
.alarm-notifs-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--va-text); margin-bottom: 6px; }
.alarm-notifs-title .material-symbols-outlined { font-size: 16px; color: var(--va-accent); }
.alarm-notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.alarm-notif {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 8px; border-radius: 6px;
    font-size: 12px; background: var(--va-card); border: 1px solid var(--va-border);
}
.alarm-notif--escalation { border-color: color-mix(in oklab, var(--va-high) 50%, transparent); background: color-mix(in oklab, var(--va-high) 8%, var(--va-card)); }
.alarm-notif-to { color: var(--va-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.alarm-notif-time { margin-inline-start: auto; color: var(--va-text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Kanal / durum / eskalasyon çipleri (Bildirimler sayfası ve Alarm modalı da kullanır) */
.notif-channel {
    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;
}
.notif-channel .material-symbols-outlined { font-size: 13px; }
.notif-channel--email { color: var(--va-info);    background: color-mix(in oklab, var(--va-info)    12%, transparent); border-color: color-mix(in oklab, var(--va-info)    30%, transparent); }
.notif-channel--sms   { color: var(--va-accent);  background: color-mix(in oklab, var(--va-accent)  12%, transparent); border-color: color-mix(in oklab, var(--va-accent)  30%, transparent); }
.notif-channel--push  { color: var(--va-warning); background: color-mix(in oklab, var(--va-warning) 12%, transparent); border-color: color-mix(in oklab, var(--va-warning) 30%, transparent); }
.notif-channel--other { color: var(--va-text-dim); background: var(--va-elevated); border-color: var(--va-border); }
.notif-status { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.notif-status--sent   { color: var(--va-success); background: color-mix(in oklab, var(--va-success) 14%, transparent); }
.notif-status--failed { color: var(--va-danger);  background: color-mix(in oklab, var(--va-danger)  14%, transparent); }
.notif-status--other  { color: var(--va-text-dim); background: var(--va-elevated); border: 1px solid var(--va-border); }
.notif-escalation {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--va-high);
    background: color-mix(in oklab, var(--va-high) 16%, transparent); border: 1px solid color-mix(in oklab, var(--va-high) 45%, transparent);
}

/* ── Cihaz geçmişi (cihaz kartı altı) ──────────────────────────────── */
.devhist { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: start; }
.devhist-title { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--va-text); }
.devhist-title .material-symbols-outlined { font-size: 16px; color: var(--va-accent); }
.devhist-empty { font-size: 12px; color: var(--va-text-dim); }
.devhist-list { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--va-border); display: flex; flex-direction: column; gap: 10px; }
.devhist-item { position: relative; padding-left: 10px; }
.devhist-dot { position: absolute; left: -15px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--va-text-muted); border: 2px solid var(--va-card); }
.devhist-item--current .devhist-dot { background: var(--va-accent); }
.devhist-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.devhist-model { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--va-text); }
.devhist-platform { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--va-text-dim); padding: 0 5px; border-radius: 4px; background: var(--va-elevated); border: 1px solid var(--va-border); }
.devhist-current { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--va-accent); padding: 0 6px; border-radius: 999px; background: color-mix(in oklab, var(--va-accent) 14%, transparent); }
.devhist-id { font-size: 11px; color: var(--va-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devhist-range { font-size: 11px; color: var(--va-text-dim); }
.devhist-reason { font-size: 11px; color: var(--va-high); }
.devhist-more { align-self: flex-start; background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--va-accent); cursor: pointer; }
.devhist-more:hover { text-decoration: underline; }

/* ── Bölgeler sekmesi: kural özeti hücresi ─────────────────────────── */
.zone-rule-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zone-note { font-size: 11px; color: var(--va-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.zone-type-badge--muted { background: var(--va-elevated); color: var(--va-text-dim); border: 1px solid var(--va-border); }

/* ── GPS Geçmişi: aykırı noktalar ──────────────────────────────────── */
.gps-outlier-toggle { white-space: nowrap; }
.gps-quality { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; white-space: nowrap; }
.gps-quality .material-symbols-outlined { font-size: 15px; }
.gps-quality--outlier { color: var(--va-danger); font-weight: 600; }
.gps-quality--ok { color: var(--va-text-muted); }
/* SmgGrid satırı: kök sınıf .smg-data-table tbody tr; :hover kuralını geçmesi için
   aynı özgüllükte yazılır (bu dosya smg-*.css'ten SONRA yüklenir). */
.smg-data-table tbody tr.gps-row--outlier { background: color-mix(in oklab, var(--va-danger) 7%, transparent); }
.ver-stat--outlier { color: var(--va-danger); border-color: color-mix(in oklab, var(--va-danger) 35%, transparent); border-style: dashed; background: color-mix(in oklab, var(--va-danger) 6%, transparent); }
.ver-stat--outlier .ver-stat-num { color: inherit; }
.alarm-item--danger  { border-left-color: var(--va-danger);  }
.alarm-item--high    { border-left-color: var(--va-high);            }
.alarm-item--warning { border-left-color: var(--va-warning); }
.alarm-item--low     { border-left-color: var(--va-accent);  }

.alarm-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.alarm-dot--danger  { background: var(--va-danger);  }
.alarm-dot--high    { background: var(--va-high);            }
.alarm-dot--warning { background: var(--va-warning); }
.alarm-dot--low     { background: var(--va-accent);  }

.alarm-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.alarm-type { font-size: 0.8125rem; font-weight: 500; color: var(--va-text); }
.alarm-time { font-size: 0.75rem; color: var(--va-text-dim); }

/* Severity badge (reuses same style as Alarms page) */
.sev-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.sev-badge--danger  { background: color-mix(in oklab, var(--va-danger)  15%, transparent); color: var(--va-danger);  }
.sev-badge--high    { background: color-mix(in oklab, var(--va-high) 15%, transparent);           color: var(--va-high);            }
.sev-badge--warning { background: color-mix(in oklab, var(--va-warning) 15%, transparent); color: var(--va-warning); }
.sev-badge--low     { background: color-mix(in oklab, var(--va-accent)  12%, transparent); color: var(--va-accent);   }

/* ── Alarms empty state ────────────────────────────────────────────── */
.alarms-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--va-sp-5);
    border: 1px dashed var(--va-border);
    border-radius: var(--va-radius-lg, 10px);
    background: color-mix(in oklab, var(--va-success) 4%, transparent);
    margin-top: var(--va-sp-2);
}
.alarms-empty-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--va-success) 12%, transparent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--va-sp-3);
}
.alarms-empty-icon .material-symbols-outlined { font-size: 24px; color: var(--va-success); }
.alarms-empty-title { font-size: 0.875rem; font-weight: 600; color: var(--va-text); margin: 0 0 4px; }
.alarms-empty-sub   { font-size: 0.75rem; color: var(--va-text-dim); margin: 0; }

/* ── Not found ─────────────────────────────────────────────────────── */
.not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--va-sp-3);
    padding: 80px 24px;
    text-align: center;
    color: var(--va-text-dim);
}

/* ── Ex-inline helpers (replace former style="" in OffenderDetail.razor) ── */

/* Large person_off icon in the "not found" state */
.not-found-icon { font-size: 48px; color: var(--va-text-dim); }

/* Initials fallback starts hidden; the <img onerror> handler flips it to flex */
.profile-photo--hidden { display: none; }

/* Device-card profile-meta gets a small top gap under the section title */
.profile-meta--device { margin-top: var(--va-sp-3); }

/* Section title used flush (no bottom margin) inside the map-card header */
.card-section-title--flush { margin: 0; }

/* "place" pin icon next to the location label */
.map-location-icon { font-size: 14px; }

/* Leaflet map inside the detail location card */
#offenderDetailMap {
    height: 280px;
    border-radius: 0 0 var(--va-radius-xl) var(--va-radius-xl);
    z-index: 0;
}

/* Toolbar primary-action icon (Bölgeler tab) */
.zone-toolbar-icon { font-size: 18px; }

/* Pentagon icon in the vertex-count grid cell */
.zone-vertex-icon { font-size: 13px; vertical-align: -2px; }

/* Per-row action icons in the zones grid */
.zone-action-icon { font-size: 16px; }
.zone-action-icon--danger { font-size: 16px; color: var(--va-danger); }

/* ── Vaka sorumlusu ata / devir (profil kartı) ──────────────────────── */
.case-officer-assign { display: flex; flex-direction: column; gap: 8px; }
.case-officer-label { font-size: 12px; color: var(--va-text-dim); font-weight: 500; }
.case-officer-row { display: flex; gap: 8px; align-items: center; }
.case-officer-msg { font-size: 12px; color: var(--va-accent); margin: 2px 0 0; }
/* Aranabilir seçici (SmgSelect) ham <select> yerine geldi; dar profil kartında satırı doldurur. */
.case-officer-select { flex: 1 1 auto; min-width: 0; }
/* SmgSelect'te Size parametresi yok; yanındaki "Ata" düğmesiyle (sm) aynı boyda dursun. */
.case-officer-select .smg-select__trigger { height: var(--smg-control-h-sm); }
/* Başarı tonu (--ok) taban sınıfın kendisidir; sunucu gerekçesi (pasif sorumluya atama,
   "atamayı yalnızca yönetici kaldırabilir") tehlike tonuna geçer. */
.case-officer-msg--error { color: var(--va-danger); }

/* ── Native input/select (token-styled) ─────────────────────────────── */
.ui-select-native,
.ui-input-native {
    flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 10px;
    border: 1px solid var(--va-border); border-radius: 8px;
    background: var(--va-bg); color: var(--va-text);
    font-size: 13px; font-family: inherit;
}
.ui-input-native::placeholder { color: var(--va-text-muted); }
.ui-select-native:focus,
.ui-input-native:focus {
    outline: none; border-color: var(--va-accent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--va-accent) 25%, transparent);
}

/* ── İzinli dönemler tab ────────────────────────────────────────────── */
.izinli-tab { display: flex; flex-direction: column; gap: 16px; }
.izinli-hint { font-size: 13px; color: var(--va-text-dim); margin: 0 0 12px; }
.izinli-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.izinli-field { display: flex; flex-direction: column; gap: 4px; }
.izinli-field--grow { flex: 1 1 220px; }
.izinli-msg { font-size: 12px; color: var(--va-warning); margin: 10px 0 0; }
.izinli-empty { font-size: 13px; color: var(--va-text-dim); padding: 8px 2px; }
.izinli-list { display: flex; flex-direction: column; gap: 8px; }
.izinli-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--va-border); border-radius: 10px; background: var(--va-bg);
}
.izinli-item--active {
    border-color: color-mix(in oklab, var(--va-warning) 50%, transparent);
    background: color-mix(in oklab, var(--va-warning) 8%, transparent);
}
.izinli-item-icon { font-size: 20px; color: var(--va-text-dim); }
.izinli-item--active .izinli-item-icon { color: var(--va-warning); }
.izinli-item-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.izinli-range { font-size: 13px; font-weight: 600; color: var(--va-text); }
.izinli-reason { font-size: 12px; color: var(--va-text-dim); }
.izinli-active-badge {
    font-size: 11px; font-weight: 600; color: var(--va-warning);
    background: color-mix(in oklab, var(--va-warning) 14%, transparent);
    padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}

/* ── Biyometri (enrollment) sekmesi ─────────────────────────────────── */
.bio-tab { display: flex; flex-direction: column; gap: 16px; }
.bio-status-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.bio-hint { font-size: 12px; color: var(--va-text-dim); margin: 0 0 12px; }
.bio-empty { font-size: 13px; color: var(--va-text-dim); padding: 8px 2px; }
.bio-progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bio-progress-track {
    flex: 1 1 160px; height: 8px; border-radius: 999px;
    background: color-mix(in oklab, var(--va-text) 10%, transparent); overflow: hidden;
}
.bio-progress-fill { height: 100%; border-radius: 999px; background: var(--va-warning); transition: width .3s ease; }
.bio-progress-fill--ok { background: var(--va-accent); }
.bio-progress-label { font-size: 13px; color: var(--va-text); white-space: nowrap; }
.bio-badge {
    font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.bio-badge--ok { color: var(--va-accent); background: color-mix(in oklab, var(--va-accent) 14%, transparent); }
.bio-badge--pending { color: var(--va-warning); background: color-mix(in oklab, var(--va-warning) 14%, transparent); }
.bio-face-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.bio-face-item { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bio-face-img {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
    border: 1px solid var(--va-border); background: var(--va-bg);
}
.bio-face-cap { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--va-text-dim); }
.bio-voice-list { display: flex; flex-direction: column; gap: 8px; }
.bio-voice-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--va-border); border-radius: 10px; background: var(--va-bg); flex-wrap: wrap;
}
.bio-voice-icon { font-size: 22px; color: var(--va-accent); }
.bio-voice-meta { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.bio-voice-name { font-size: 13px; font-weight: 600; color: var(--va-text); }
.bio-voice-sub { font-size: 11px; color: var(--va-text-dim); }
.bio-audio { flex: 1 1 240px; height: 34px; min-width: 200px; }

/* ── Doğrulamalar (doğrulama geçmişi) sekmesi ───────────────────────── */
.ver-tab { display: flex; flex-direction: column; gap: 16px; }

/* Araç çubuğu: sol grup tarih aralığı + hızlı seçim, sağ grup yenile + anlık istek.
   Dar ekranda gruplar alt alta sarar. */
.ver-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 12px 16px;
}
.ver-toolbar-group { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ver-field { display: flex; flex-direction: column; gap: 4px; }
.ver-label { font-size: 12px; font-weight: 500; color: var(--va-text-dim); }
.ver-date { flex: 0 0 auto; width: 150px; }
.ver-quick { display: flex; align-items: center; gap: 6px; min-height: 36px; }   /* girdilerle aynı hizada */
.ver-request-row { display: flex; align-items: center; gap: 8px; }
.ver-type-select { flex: 0 0 auto; width: 130px; }
.ver-btn-icon { font-size: 16px; }

/* Hızlı aralık çipleri (7 / 30 / 90 gün) */
.ver-chip {
    display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; background: var(--va-elevated); color: var(--va-text-dim);
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.ver-chip:hover { color: var(--va-text); background: var(--va-card); }
.ver-chip--active {
    color: var(--va-accent); border-color: var(--va-accent);
    background: color-mix(in oklab, var(--va-accent) 14%, transparent);
}

/* Satır içi bildirim (istek sonucu / yükleme hatası) */
.ver-notice {
    font-size: 12px; margin: 12px 0 0; padding: 8px 10px; border-radius: 8px;
    border: 1px solid transparent;
}
.ver-notice--ok {
    color: var(--va-success); border-color: color-mix(in oklab, var(--va-success) 35%, transparent);
    background: color-mix(in oklab, var(--va-success) 10%, transparent);
}
.ver-notice--info {
    color: var(--va-warning); border-color: color-mix(in oklab, var(--va-warning) 35%, transparent);
    background: color-mix(in oklab, var(--va-warning) 10%, transparent);
}
.ver-notice--error {
    color: var(--va-danger); border-color: color-mix(in oklab, var(--va-danger) 35%, transparent);
    background: color-mix(in oklab, var(--va-danger) 10%, transparent);
}

/* Seçili aralık özeti (sayaç çipleri) */
.ver-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.ver-stat {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 500; color: var(--va-text-dim);
    background: var(--va-elevated); border: 1px solid var(--va-border);
}
.ver-stat-num { font-weight: 700; color: var(--va-text); font-variant-numeric: tabular-nums; }
.ver-stat--success { color: var(--va-success); border-color: color-mix(in oklab, var(--va-success) 30%, transparent); background: color-mix(in oklab, var(--va-success) 10%, transparent); }
.ver-stat--danger  { color: var(--va-danger);  border-color: color-mix(in oklab, var(--va-danger)  30%, transparent); background: color-mix(in oklab, var(--va-danger)  10%, transparent); }
.ver-stat--missed  { color: var(--va-danger);  border-color: color-mix(in oklab, var(--va-danger)  30%, transparent); background: color-mix(in oklab, var(--va-danger)   5%, transparent); border-style: dashed; }
.ver-stat--pending { color: var(--va-warning); border-color: color-mix(in oklab, var(--va-warning) 30%, transparent); background: color-mix(in oklab, var(--va-warning) 10%, transparent); }
.ver-stat--success .ver-stat-num,
.ver-stat--danger  .ver-stat-num,
.ver-stat--missed  .ver-stat-num,
.ver-stat--pending .ver-stat-num { color: inherit; }

/* Durum çipi (grid hücresi): Başarılı / Başarısız / Kaçırıldı / Gönderildi / Planlandı */
.ver-status {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.ver-status--success { color: var(--va-success); background: color-mix(in oklab, var(--va-success) 15%, transparent); }
.ver-status--danger  { color: var(--va-danger);  background: color-mix(in oklab, var(--va-danger)  15%, transparent); }
.ver-status--missed  { color: var(--va-danger);  background: color-mix(in oklab, var(--va-danger)   6%, transparent); border-color: color-mix(in oklab, var(--va-danger) 45%, transparent); border-style: dashed; }
.ver-status--warning { color: var(--va-warning); background: color-mix(in oklab, var(--va-warning) 15%, transparent); }
.ver-status--muted   { color: var(--va-text-dim); background: var(--va-elevated); border-color: var(--va-border); }

/* Grid: SmgGrid kendi .smg-grid__table-wrap kabında yatay kaydırır (overflow:auto) — ek kap gerekmez. */
.ver-footnote { font-size: 12px; color: var(--va-text-muted); margin: 0; }

/* ── Profil kartı ekleri (fotoğraf değiştir, telefon/not) ─────────────── */
.profile-photo-change {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 8px; padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; font-family: inherit; cursor: pointer;
    color: var(--va-text-dim); background: transparent; border: 1px dashed var(--va-border);
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.profile-photo-change:hover {
    color: var(--va-accent); border-color: var(--va-accent);
    background: color-mix(in oklab, var(--va-accent) 8%, transparent);
}
.profile-photo-change .material-symbols-outlined { font-size: 14px; }
.profile-notes {
    width: 100%; margin: 0; padding: 8px 10px; text-align: start;
    font-size: 12px; line-height: 1.45; color: var(--va-text-dim);
    background: var(--va-elevated); border-radius: 8px; white-space: pre-line;
}

/* Kart başlığı sağında küçük sayaç ("son 10") */
.card-section-count {
    margin-inline-start: auto; font-size: 11px; font-weight: 500; color: var(--va-text-muted);
}

/* ── Cihaz olayları mini paneli (Genel sekmesi) ─────────────────────── */
.devev-empty { font-size: 13px; color: var(--va-text-dim); padding: 8px 2px; }
.devev-list { display: flex; flex-direction: column; gap: 6px; }
.devev-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 8px; background: var(--va-elevated); border: 1px solid transparent;
}
.devev-chip {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;
    border: 1px solid transparent;
}
.devev-chip--danger  { color: var(--va-danger);  background: color-mix(in oklab, var(--va-danger)  15%, transparent); }
.devev-chip--warning { color: var(--va-warning); background: color-mix(in oklab, var(--va-warning) 15%, transparent); }
.devev-chip--success { color: var(--va-success); background: color-mix(in oklab, var(--va-success) 15%, transparent); }
.devev-chip--muted   { color: var(--va-text-dim); background: var(--va-card); border-color: var(--va-border); }
.devev-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.devev-time { font-size: 12px; color: var(--va-text); }
.devev-details {
    font-size: 11px; color: var(--va-text-dim); font-family: var(--va-font-mono, monospace);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.devev-alarm { display: inline-flex; color: var(--va-warning); flex-shrink: 0; }
.devev-alarm .material-symbols-outlined { font-size: 18px; }

/* ── Biyometri: web'den örnek yükleme ───────────────────────────────── */
.bio-upload-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.bio-upload { display: flex; flex-direction: column; gap: 6px; }
.bio-upload .form-label { font-size: 0.8125rem; font-weight: 500; color: var(--va-text-dim); }
.bio-upload-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.bio-upload-progress .bio-progress-track { flex: 1 1 200px; }
.bio-upload-progress .bio-progress-fill { background: var(--va-accent); }

/* ── GPS Geçmişi sekmesi ─────────────────────────────────────────────── */
.gps-tab { display: flex; flex-direction: column; gap: 16px; }
.gps-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 12px 16px;
}
.gps-toolbar-group { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.gps-dt { flex: 0 0 auto; width: 200px; }
.gps-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.gps-map { height: 380px; border-radius: 0 0 var(--va-radius-xl) var(--va-radius-xl); z-index: 0; }
.gps-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 220px; padding: 24px; text-align: center; color: var(--va-text-dim);
}
.gps-empty .material-symbols-outlined { font-size: 40px; color: var(--va-text-muted); margin-bottom: 6px; }
.gps-empty p { margin: 0; font-size: 13px; }
.gps-empty .gps-empty-title { font-weight: 600; color: var(--va-text); }
.gps-empty .gps-empty-sub   { font-size: 12px; color: var(--va-text-muted); }

@media (max-width: 700px) {
    .gps-dt { width: 100%; }
    .gps-map { height: 280px; }
}

/* ── Tanımlama Geçmişi (biyometrik deneme zaman çizelgesi) ──────────── */
.tan-tab { display: flex; flex-direction: column; gap: 16px; }
.tan-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
}
/* Zaman filtresi satırı (Doğrulamalar sekmesiyle ortak alanlar) durum çiplerinin üstünde durur. */
.tan-toolbar--range {
    justify-content: flex-start; align-items: flex-end;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--va-border);
}
.tan-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tan-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tan-stat-icon { font-size: 15px; }
.tan-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 32px 16px; text-align: center; color: var(--va-text-dim); font-size: 13px;
}
.tan-empty .material-symbols-outlined { font-size: 40px; color: var(--va-text-muted); }
.tan-empty p { margin: 0; }

.tan-timeline {
    list-style: none; margin: 0; padding: 4px 0 0 16px;
    border-left: 2px solid var(--va-border);
    display: flex; flex-direction: column; gap: 0;
}
.tan-item { position: relative; padding: 0 0 20px 18px; }
.tan-item:last-child { padding-bottom: 4px; }
.tan-dot {
    position: absolute; left: -9px; top: 6px; width: 12px; height: 12px;
    border-radius: 50%; border: 2px solid var(--va-card); background: var(--va-text-muted);
}
.tan-dot--success { background: var(--va-success); }
.tan-dot--danger  { background: var(--va-danger); }
.tan-dot--missed  { background: var(--va-danger); opacity: 0.6; }
.tan-dot--warning { background: var(--va-warning); }
.tan-dot--muted   { background: var(--va-text-muted); }

.tan-body {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--va-elevated); border: 1px solid var(--va-border);
}
/* Hatalı girişler (Başarısız / Kaçırıldı) vurgulu */
.tan-item--failed .tan-body {
    border-color: color-mix(in oklab, var(--va-danger) 45%, transparent);
    background: color-mix(in oklab, var(--va-danger) 7%, var(--va-elevated));
}
.tan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tan-type { font-size: 13px; font-weight: 600; color: var(--va-text); }
.tan-time { font-size: 12px; color: var(--va-text-dim); margin-inline-start: auto; white-space: nowrap; }
.tan-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--va-text-dim); }
.tan-meta strong { color: var(--va-text); font-weight: 600; }

/* Skor çubukları (yüz / ses, 0–100) */
.tan-scores { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tan-score { display: flex; align-items: center; gap: 8px; min-width: 220px; }
.tan-score-icon { font-size: 16px; color: var(--va-text-dim); }
.tan-score-label { font-size: 12px; color: var(--va-text-dim); width: 28px; }
.tan-score-track {
    flex: 1 1 100px; height: 6px; border-radius: 999px; overflow: hidden;
    background: color-mix(in oklab, var(--va-text) 10%, transparent);
}
.tan-score-fill { height: 100%; border-radius: 999px; }
.tan-score-fill--ok  { background: var(--va-success); }
.tan-score-fill--mid { background: var(--va-warning); }
.tan-score-fill--low { background: var(--va-danger); }
.tan-score-val { font-size: 12px; font-weight: 700; color: var(--va-text); font-variant-numeric: tabular-nums; width: 40px; text-align: end; }

/* Gönderilen örnekler: küçük yüz görseli + ses oynatıcı */
.tan-media { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tan-thumb-link { display: inline-flex; border-radius: 8px; }
.tan-thumb {
    width: 72px; height: 72px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--va-border); background: var(--va-bg);
}
.tan-audio { height: 32px; min-width: 200px; flex: 1 1 220px; max-width: 360px; }
.tan-nomedia { font-size: 12px; color: var(--va-text-muted); font-style: italic; }
.tan-note { margin: 0; font-size: 12px; color: var(--va-text-dim); white-space: pre-line; }
.tan-more { display: flex; justify-content: center; padding-top: 12px; }

/* ── Genel sekmesi: alarm listesi işlemleri (İncelemeye al / Kapat) ─────────── */
.alarm-item--closed { opacity: 0.72; }
.alarm-code { font-size: 11px; color: var(--va-text-muted); font-family: var(--va-font-mono); margin-inline-start: 6px; }
.alarm-item-note { display: block; font-size: 11px; color: var(--va-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.alarm-item-actions { margin-inline-start: 4px; flex-shrink: 0; }
.alarm-item .status-badge { flex-shrink: 0; }

/* ── Doğrulamalar sekmesi: politika formu + sunucu istatistik ekleri ─────────── */
.policy-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.policy-num { width: 90px; flex: 0 0 auto; }
.policy-time { width: 120px; flex: 0 0 auto; }
.policy-type { width: 170px; flex: 0 0 auto; }
.policy-dirty { font-size: 12px; color: var(--va-warning); align-self: center; }
.policy-hint { margin-top: 10px; }
.ver-stat--rate { color: var(--va-accent); border-color: color-mix(in oklab, var(--va-accent) 30%, transparent); background: color-mix(in oklab, var(--va-accent) 10%, transparent); }
.ver-stat--rate .ver-stat-num { color: inherit; }

/* ── Harita nokta lejantı ─────────────────────────────────────────────
   Haritadaki işaretlerin ne anlama geldiği yazıyla da durur (renk tek başına
   anlam taşımaz). Kart içinde, haritanın hemen altında akar. */
.map-dot-legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--va-sp-4);
    padding: 10px 16px;
    border-top: 1px solid var(--va-border);
}
.map-dot-legend .legend-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; color: var(--va-text-dim);
}
.map-dot-legend .legend-dot {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
    border: 2px solid var(--va-bg);
    box-shadow: 0 0 0 1px var(--va-border);
}
.map-dot-legend .legend-dot--accent { background: var(--va-accent); }
.map-dot-legend .legend-dot--muted { background: var(--va-text-dim); }
.map-dot-legend .legend-note {
    margin-inline-start: auto; font-size: 0.6875rem; color: var(--va-text-muted);
}

/* Alarm kartı: başlık satırı + "daha fazla" düğmesi */
.card-section-title--row { display: flex; align-items: center; justify-content: space-between; gap: var(--va-sp-3); }
.card-section-title-text { display: inline-flex; align-items: center; gap: 8px; }
.alarm-count-note { font-size: 0.75rem; color: var(--va-text-muted); display: inline-flex; gap: 8px; align-items: baseline; }
.alarm-count-note .alarms-header-link { color: var(--va-accent); text-decoration: none; }
.alarm-more-btn {
    margin-top: 10px; width: 100%; padding: 10px 12px;
    border: 1px solid var(--va-border); border-radius: var(--va-radius);
    background: transparent; color: var(--va-text-dim);
    font-size: 0.8125rem; cursor: pointer;
}
.alarm-more-btn:hover { background: var(--va-elevated); color: var(--va-text); }
.map-dot-legend .legend-dot--warning { background: var(--va-warning); }
.map-dot-legend .legend-dot--danger { background: var(--va-danger); }

/* ── Doğrulama: motor skoru + canlılık rozetleri (InsightFace entegrasyonu) ── */
.ver-score { font-variant-numeric: tabular-nums; font-weight: 600; }
.ver-score--ok  { color: var(--va-success); }
.ver-score--low { color: var(--va-danger); }

.ver-live {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--va-radius-sm);
  font-size: 12px;
  font-weight: 600;
}
.ver-live--ok    { color: var(--va-success); background: rgba(34, 197, 94, 0.15); }
.ver-live--spoof { color: var(--va-danger);  background: rgba(239, 68, 68, 0.15); }

/* ── Biyometri: motor kaydı kartı ── */
.bio-engine-actions {
  display: flex;
  gap: var(--va-sp-3);
  align-items: center;
  margin-bottom: var(--va-sp-3);
}
.bio-face-img--none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--va-text-muted);
  background: var(--va-elevated);
}

/* ── Mesajlar sekmesi (VS → yükümlü push) ── */
.msg-tab { display: flex; flex-direction: column; gap: var(--va-sp-4); }
.msg-form { display: flex; flex-direction: column; gap: var(--va-sp-3); max-width: 560px; }
.msg-form-actions { display: flex; align-items: center; gap: var(--va-sp-3); }

/* ── Tanımlama: deneme dökümü (başarısız denemeler de fotoğraf + skorla) ── */
.tan-attempts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tan-attempt { border: 1px solid var(--va-border); border-radius: 10px; padding: 8px 10px; background: var(--va-card); }
.tan-attempt--failed { border-color: color-mix(in oklab, var(--va-danger) 45%, var(--va-border)); }
.tan-attempt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tan-attempt-no { font-weight: 700; font-size: 12.5px; }
.tan-attempt-body { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; }
.tan-attempt-scores { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tan-attempt-note { font-size: 12px; color: var(--va-text-dim); }
.tan-thumb--sm { width: 56px; height: 56px; }

/* ── GPS geçmişi: bölge kıyası hücresi ── */
.gps-zone { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.gps-zone .material-symbols-outlined { font-size: 15px; }
.gps-zone--ok { color: var(--va-success); }
.gps-zone--violation { color: var(--va-danger); }
.gps-zone--none { color: var(--va-text-dim); font-weight: 400; }
.gps-row--zone-violation td { background: color-mix(in oklab, var(--va-danger) 6%, transparent); }

/* Şarj takılı rozeti (cihaz bilgisi kartı, pil satırı) */
.battery-charging {
    margin-left: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--va-success);
    white-space: nowrap;
}

/* Konum sıklığı seçici (cihaz kartı, 2026-08-26) */
.gps-interval-select {
    padding: 4px 8px; font-size: 0.8125rem;
    background: var(--va-elevated); color: var(--va-text);
    border: 1px solid var(--va-border); border-radius: var(--va-radius);
}

/* İmza sekmesi + şablon seçici (2026-08-26) */
.imza-tab { display: flex; flex-direction: column; gap: 16px; }
.sig-form { display: flex; flex-direction: column; gap: 14px; }
.sig-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sig-label { min-width: 130px; font-size: 0.8125rem; font-weight: 600; color: var(--va-text-dim); }
.sig-days { display: flex; gap: 6px; flex-wrap: wrap; }
.sig-day { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--va-border); background: transparent; color: var(--va-text-dim); font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.sig-day--on { background: color-mix(in oklab, var(--va-accent) 18%, transparent); color: var(--va-accent); border-color: color-mix(in oklab, var(--va-accent) 45%, var(--va-border)); }
.sig-window { display: flex; align-items: center; gap: 8px; }
.sig-window input, .sig-place { padding: 6px 10px; background: var(--va-elevated); border: 1px solid var(--va-border); border-radius: var(--va-radius); color: var(--va-text); font-size: 0.875rem; }
.sig-place { min-width: 320px; }
.sig-enabled { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--va-text); }
.sig-status { padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.sig-status--success { background: color-mix(in oklab, var(--va-success) 15%, transparent); color: var(--va-success); }
.sig-status--danger  { background: color-mix(in oklab, var(--va-danger) 15%, transparent);  color: var(--va-danger); }
.sig-status--muted   { background: color-mix(in oklab, var(--va-text) 8%, transparent);     color: var(--va-text-dim); }
.tpl-form { display: flex; flex-direction: column; gap: 12px; }
.tpl-kinds { display: flex; gap: 8px; }
.tpl-empty { padding: 10px; }
.tpl-selected {
    background: color-mix(in oklab, var(--va-accent) 18%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--va-accent);
    font-weight: 700;
}
.tpl-selected > span:first-child { color: var(--va-accent); }
.tpl-preview-wrap { position: relative; }
.tpl-preview-hint {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in oklab, var(--va-bg) 65%, transparent);
    color: var(--va-text-dim); font-size: 0.8125rem; font-weight: 600;
    border-radius: var(--va-radius); pointer-events: none;
}

/* Şablon önizleme mini haritası */
.tpl-preview { height: 260px; border-radius: var(--va-radius); overflow: hidden; border: 1px solid var(--va-border); }

/* UYAP yer tutucu + imza tanıtım (2026-08-26) */
.uyap-placeholder { text-align: center; padding: 32px 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.uyap-icon { font-size: 44px; color: var(--va-text-muted); }
.sig-intro { margin-bottom: 4px; }

/* Cihaz sağlığı (sürüm/pil muafiyeti) uyarı değeri */
.meta-value.devhealth--warn { color: var(--va-warning, #F59E0B); font-weight: 600; }