/* ── Alarms page — de-scoped styles ───────────────────────────────────
 *
 * Former Alarms.razor.css, minus the shared page-header chrome (now in
 * page-chrome.css) and the .status-badge block (now in badges.css). The
 * remaining classes are unique to this page. Per
 * Docs/decisions/2026-06-01-css-mimari-tek-klasor.md.
 */

/* Severity filter chips */
.severity-filter-row {
    display: flex;
    gap: var(--va-sp-2);
    flex-wrap: wrap;
}

.sev-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    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;
}
.sev-btn:hover { color: var(--va-text); background: var(--va-card); }

.sev-btn--danger  { border-color: color-mix(in oklab, var(--va-danger)  25%, transparent); color: var(--va-danger);  background: color-mix(in oklab, var(--va-danger)  12%, transparent); }
.sev-btn--high    { border-color: color-mix(in oklab, var(--va-high) 25%, transparent);           color: var(--va-high);            background: color-mix(in oklab, var(--va-high) 12%, transparent); }
.sev-btn--medium  { border-color: color-mix(in oklab, var(--va-warning) 25%, transparent); color: var(--va-warning); background: color-mix(in oklab, var(--va-warning) 12%, transparent); }
.sev-btn--low     { border-color: var(--va-border);                                        color: var(--va-text-dim); background: var(--va-elevated); }

.sev-btn--danger.sev-btn--active  { background: color-mix(in oklab, var(--va-danger)  25%, transparent); border-color: var(--va-danger);  }
.sev-btn--high.sev-btn--active    { background: color-mix(in oklab, var(--va-high) 25%, transparent);           border-color: var(--va-high); }
.sev-btn--medium.sev-btn--active  { background: color-mix(in oklab, var(--va-warning) 25%, transparent); border-color: var(--va-warning); }
.sev-btn--low.sev-btn--active     { background: var(--va-card); border-color: var(--va-border-light); color: var(--va-text); }

/* Severity badges in grid */
.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);   }

/* ── Durum filtresi çubuğu (sunucu ?status=) + kapsam (mine) ─────────────
   .status-chip temel/success/danger/warning offenders.css'te; muted/neutral tonları burada. */
.alarm-status-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--va-sp-3);
    flex-wrap: wrap; margin-bottom: var(--va-sp-4);
}
.alarm-status-right { display: flex; align-items: center; gap: var(--va-sp-3); }
.alarm-chip-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px;
    border-radius: 999px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: color-mix(in oklab, currentColor 18%, transparent);
}
.status-chip--muted   { border-color: var(--va-border); color: var(--va-text-dim); background: var(--va-elevated); }
.status-chip--neutral { border-color: var(--va-border); color: var(--va-text-dim); background: var(--va-elevated); }
.status-chip--muted.status-chip--active,
.status-chip--neutral.status-chip--active { background: var(--va-card); border-color: var(--va-border-light); color: var(--va-text); }
.alarm-sub-error { color: var(--va-danger); }

/* Yükümlü adı → detay bağlantısı */
.alarm-offender-link { color: var(--va-text); }
.alarm-offender-link:hover { color: var(--va-accent); text-decoration: none; }

/* İşlem hücresi: kim aldı / kapattı + not */
.alarm-action-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.alarm-action-line { display: inline-flex; align-items: center; gap: 4px; color: var(--va-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alarm-action-line .material-symbols-outlined { font-size: 15px; color: var(--va-text-dim); }
.alarm-note { color: var(--va-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kapat butonu — hover'da başarı rengi */
.row-action-btn--success:hover {
    color: var(--va-success);
    border-color: color-mix(in oklab, var(--va-success) 40%, transparent);
    background: color-mix(in oklab, var(--va-success) 10%, transparent);
}

/* Onay diyaloğu içi not alanı */
.alarm-confirm-body { margin: 0 0 10px; }
.alarm-confirm-label { display: block; text-align: start; font-size: 12px; font-weight: 500; color: var(--va-text-dim); margin-bottom: 4px; }
.alarm-note-input { width: 100%; height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; line-height: 1.45; text-align: start; }

/* ── Cihaz güvenliği alarm türleri ──────────────────────────────────────────
   Cihaz Güvenliği (Kritik: root/jailbreak, sahte konum, tamper) = kırmızı; Cihaz Değişikliği (Yüksek) = turuncu;
   Geliştirici modu = uyarı. Satır zemini (SmgGrid RowClass) + tür çipi.

   SmgGrid satırları gerçek <tr> öğeleridir (.smg-data-table tbody tr); dar ekranda aynı satır
   CSS ile karta döner, ayrı bir kart DOM'u yoktur. Seçiciler kütüphanenin
   .smg-data-table tbody tr:hover kuralını yenecek özgüllükte tutuldu.
   Sol kenar şeridi ilk hücreye verilir: border-collapse:collapse olan bir tabloda
   <tr> üzerindeki box-shadow tarayıcıya göre çizilmeyebilir. */
.smg-grid .smg-data-table tbody tr.alarm-row--devsec    { background-color: color-mix(in oklab, var(--va-danger) 9%, transparent); }
.smg-grid .smg-data-table tbody tr.alarm-row--devchange { background-color: color-mix(in oklab, var(--va-high)   8%, transparent); }

.smg-grid .smg-data-table tbody tr.alarm-row--devsec    > td:first-child { box-shadow: inset 3px 0 0 var(--va-danger); }
.smg-grid .smg-data-table tbody tr.alarm-row--devchange > td:first-child { box-shadow: inset 3px 0 0 var(--va-high); }
.smg-grid .smg-data-table tbody tr.alarm-row--devmode   > td:first-child { box-shadow: inset 3px 0 0 var(--va-warning); }

/* Kart kipi: satır blok kutuya döndüğü için şerit ve kenarlık kartın kendisine gelir. */
@media (max-width: 767.98px) {
    .smg-grid .smg-data-table tbody tr.alarm-row--devsec    > td:first-child,
    .smg-grid .smg-data-table tbody tr.alarm-row--devchange > td:first-child,
    .smg-grid .smg-data-table tbody tr.alarm-row--devmode   > td:first-child { box-shadow: none; }

    .smg-grid .smg-data-table tbody tr.alarm-row--devsec    { box-shadow: inset 3px 0 0 var(--va-danger);  border-bottom-color: color-mix(in oklab, var(--va-danger) 45%, transparent); }
    .smg-grid .smg-data-table tbody tr.alarm-row--devchange { box-shadow: inset 3px 0 0 var(--va-high);    border-bottom-color: color-mix(in oklab, var(--va-high)   45%, transparent); }
    .smg-grid .smg-data-table tbody tr.alarm-row--devmode   { box-shadow: inset 3px 0 0 var(--va-warning); }
}

.alarm-type-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
}
.alarm-type-chip .material-symbols-outlined { font-size: 14px; }
.alarm-type-chip--devsec    { color: var(--va-danger);  background: color-mix(in oklab, var(--va-danger)  15%, transparent); border-color: color-mix(in oklab, var(--va-danger)  40%, transparent); }
.alarm-type-chip--devchange { color: var(--va-high);    background: color-mix(in oklab, var(--va-high)    15%, transparent); border-color: color-mix(in oklab, var(--va-high)    40%, transparent); }
.alarm-type-chip--devmode   { color: var(--va-warning); background: color-mix(in oklab, var(--va-warning) 15%, transparent); border-color: color-mix(in oklab, var(--va-warning) 40%, transparent); }

/* ── Ayrıntı modalı: Bildirimler tablosu (Notifications sayfası da aynı tabloyu kullanır) ── */
.alarm-notif-panel { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.notif-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.notif-table th {
    text-align: start; font-weight: 600; color: var(--va-text-dim); padding: 6px 8px; border-bottom: 1px solid var(--va-border);
    white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
}
.notif-table td { padding: 7px 8px; border-bottom: 1px solid var(--va-border); color: var(--va-text); vertical-align: top; }
.notif-table tr:last-child td { border-bottom: none; }
.notif-table td .notif-escalation { margin-inline-start: 6px; }
.notif-row--escalation td { background: color-mix(in oklab, var(--va-high) 7%, transparent); }
.notif-cell-to, .notif-cell-subject { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-cell-time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--va-text-dim); }
.notif-error { display: block; font-size: 11px; color: var(--va-danger); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* İşlem yapılan satır vurgusu: incelemeye al / kapat sonrası 2,5 sn yeşil parlar (2026-08-26). */
.smg-grid .smg-data-table tbody tr.alarm-row--flash {
    animation: alarm-row-flash 2.5s ease-out;
}
@keyframes alarm-row-flash {
    0%   { background-color: color-mix(in oklab, var(--va-success) 35%, transparent); }
    60%  { background-color: color-mix(in oklab, var(--va-success) 18%, transparent); }
    100% { background-color: transparent; }
}