/* EndpointGuard Panel — panele ozgu stiller (envanter bolumleri, siteden kayit/sihirbaz).
   Ortak kurallar shared/app.css'te (assets/shared/app.css); bu dosya onun ARDINDAN yuklenir. */

/* ---------------------------------------------------------------------------
   Envanter bolumleri (Oturum 9a) — device-sections.js
   --------------------------------------------------------------------------- */
.section-slot:not(:empty) {
    margin-top: 20px;
}

.section-meta,
.section-count {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.section-pending p {
    color: var(--text-muted);
}

/* Baslik altindaki ve Dashboard'daki uyari rozetleri. */
.section-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.section-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #fef3c7;
    color: var(--warning);
}

.section-flag .icon {
    width: 14px;
    height: 14px;
}

:root[data-theme="dark"] .section-flag {
    background: rgba(251, 191, 36, 0.16);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .section-flag {
        background: rgba(251, 191, 36, 0.16);
    }
}

/* agent 0.9.0: bayrak siddeti — kritik (kirmizi) ve bilgi (notr). Varsayilan (kehribar) uyaridir. */
.section-flag--critical {
    background: #fee2e2;
    color: var(--danger);
}

.section-flag--info {
    background: var(--chip-bg);
    color: var(--chip-text);
}

:root[data-theme="dark"] .section-flag--critical {
    background: rgba(248, 113, 113, 0.16);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .section-flag--critical {
        background: rgba(248, 113, 113, 0.16);
    }
}

/* "Son okuma: N dk once" — 30 dk'dan eskisi gri + uyari. */
.sec-freshness {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.sec-freshness.is-stale {
    color: var(--text-muted);
    font-style: italic;
}

.sec-stale {
    opacity: 0.6;
}

.fw-profile-table tr.is-muted td {
    color: var(--text-muted);
}

/* panel 0.20.3: kart icindeki alt basliklar ("Bekleyen guncellemeler",
   "Son 90 gun", olay gunlugu adlari) bolum basligiyla AYNI stil — buyuk harf,
   gri; tek sinif. */
.card-subtitle {
    margin: 20px 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* panel 0.20.2: istege bagli guncellemeler katlanmis gelir. 0.20.3: katlanir
   satir bir kart basligidir (cerceve + ok + hover) — tiklanabilirligi belli. */
.wu-optional {
    margin-top: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.wu-optional > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}

.wu-optional > summary::-webkit-details-marker {
    display: none;
}

.wu-optional > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 120ms ease;
}

.wu-optional[open] > summary::before {
    transform: rotate(90deg);
}

.wu-optional > summary:hover {
    background: var(--row-hover);
    color: var(--text);
}

.wu-optional > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Acikken icteki tablo karti kendi cercevesini birakir, baslikla tek kart olur. */
.wu-optional > .table-card {
    border: 0;
    border-top: 1px solid var(--divider);
    border-radius: 0;
}

.wu-table td.nowrap,
.nowrap {
    white-space: nowrap;
}

.wu-row--critical td:first-child {
    box-shadow: inset 3px 0 0 var(--warning);
}

.wu-row--overdue td:first-child {
    box-shadow: inset 3px 0 0 var(--danger);
}

.wu-hint {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    background: #fef3c7;
    color: var(--warning);
}

:root[data-theme="dark"] .wu-hint {
    background: rgba(251, 191, 36, 0.16);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wu-hint {
        background: rgba(251, 191, 36, 0.16);
    }
}

/* Cihaz detayi basligi (panel 0.20.0): 1. satir kimlik + sagda dugmeler,
   2. satir YALNIZ uyari/bilgi rozetleri — onem sirasina gore (CSS order;
   yuvalar display:contents oldugu icin rozetler tek flex satirinin
   ogeleridir). Paylasilan .detail-header'a DOKUNULMAZ (bkz. CLAUDE.md
   ".detail-header" dersi) — yeni siniflar yalniz cihaz detayindadir. */
.device-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.device-header__id {
    flex: 1 1 360px;
    min-width: 0;
}

.device-header__id .meta {
    margin-top: 4px;
}

.device-header__top .detail-header__actions {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .device-header__top .detail-header__actions {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

.device-header__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.device-header__badges:not(:has(.meta-flag, .section-flag, .badge, .inventory-refresh)) {
    display: none;
}

.device-header__slot,
.device-header__slot .section-flags {
    display: contents;
}

/* Ozgulluk esit: genelden ozele yazilir, sonraki kural kazanir. */
.device-header__badges .section-flag,
.device-header__badges .meta-flag--caution,
.device-header__badges .meta-flag--muted {
    order: 1;
}

.device-header__badges .section-flag--info,
.device-header__badges .meta-flag--info,
.device-header__badges .badge,
.device-header__badges .inventory-refresh {
    order: 2;
}

.device-header__badges .section-flag--critical,
.device-header__badges .meta-flag--warn {
    order: 0;
}

.device-header__badges .inventory-refresh--late {
    order: 1;
}

/* Bilgi duzeyi rozet (ör. agent hizmeti durdu ama kendiliginden toparlandi). */
.meta-flag--info {
    background: var(--chip-bg);
    color: var(--chip-text);
}

/* Bildirim kurali secenekleri (update_overdue). */
.notify-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.notify-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
}

.notify-option .form-check {
    flex-shrink: 0;
}

/* Cihaz listesi guvenlik rozeti + envanter yenileme gostergesi. */
.sec-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sec-badges.is-stale {
    opacity: 0.55;
}

.inventory-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.inventory-refresh--done {
    color: var(--success);
}

.inventory-refresh--late {
    color: var(--warning);
}

.section-flags--compact {
    margin-top: 0;
    flex-basis: 100%;
}

/* Dashboard satiri bayrak tasiyorsa rozetler ikinci satira iner (satirin
   geri kalani eskisi gibi tek satir/kirpmali kalir). */
.dashboard-card__row-main:has(.section-flags--compact) {
    flex-wrap: wrap;
}

/* Tablolar: genis bolum tablolari (ag bagdastiricilari, gorevler) dar
   ekranda sayfayi degil kendi kutusunu kaydirir. */
.table-scroll {
    overflow-x: auto;
}

/* panel 0.20.2 — tablo tasiyan bolumlerin ORTAK karti (format.js
   tableCardHtml). kv-card ile AYNI cerceve/zemin/yuvarlatma; alt bilgi
   ("N kayit · Alindi · not") kartin ICINDE, tek satir. Icindeki `.table`
   kendi cercevesini/zeminini birakir (cift cerceve olmasin); arama kutusu ve
   ozet satirlari bas seridindedir. Tarihce listesi de ayni kartin icindedir.

   panel 0.20.3 (NS-01/02/03): kartlar artik satir komsusuna gore UZAMAZ.
   0.20.2'de grid `stretch` + kartta `flex: 1` iki hata uretiyordu: (1) Windows
   Update gibi birden cok kart tasiyan govdede her kart bosluga gerilip altta
   ~400 px bos alan birakiyordu; (2) `overflow: hidden` flex ogesinin
   min-height'ini sifirladigi icin 10+ satirlik "Son 90 gun" karti KUCULUP son
   satiri ve alt bilgisini kesiyor, sonraki baslik ustune biniyordu. Kural:
   grid `align-items: start`, kart dogal yuksekliginde ve kuculmez. */
.field-groups {
    align-items: start;
}

.field-group__body > .kv-card {
    flex: 0 0 auto;
}

/* Grid izi `1fr` = minmax(auto, 1fr): genis bir tablonun min-content'i TUM
   sutunu (dolayisiyla her karti) genisletiyor, 375 px'te sayfa 509 px'e
   tasiyordu. Hucreler ize sigar; genis tablo kendi kutusunda kayar. */
.field-groups > .field-group,
.field-group__body {
    min-width: 0;
}

.table-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    min-width: 0;
}

/* Yalniz yatay kayar: alt-piksel yuvarlama dikey kaydirma cubugu cikarmasin. */
.table-card > .table-scroll {
    flex-shrink: 0;
    overflow-y: hidden;
}

/* Bos durum karti (format.js emptyCardHtml) ve grup govdesindeki her bos
   durum: kesikli cerceveli buyuk kutu yerine olagan, alcak (≤ 64 px) kart. */
.table-card__empty,
.field-group__body > .empty-state,
.event-log > .empty-state {
    margin: 0;
    padding: 12px 20px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: left;
}

.field-group__body > .empty-state,
.event-log > .empty-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.field-group__body > .empty-state p {
    margin: 0;
}

.field-group__body > .empty-state + .empty-state,
.field-group__body > .empty-state + .table-card,
.field-group__body > .table-card + .empty-state {
    margin-top: 12px;
}

.table-card + .table-card {
    margin-top: 12px;
}

.table-card .table,
.table-card .history-list {
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Kartin icindeki tablo kart genisligini doldurur (baslik zemini kartin
   sagina kadar uzanir); dar tabloda bos alan sutunlar arasinda kalir. */
.table-card .table {
    width: 100%;
}

.table-card__head {
    padding: 4px 20px;
    border-bottom: 1px solid var(--divider);
}

.table-card__head .search-box {
    margin: 8px 0;
}

/* Alt bilgi TEK satirdir: parcalar " · " ile ayrilir, dar ekranda kirilir
   (format.js footerHtml). */
.table-card__footer {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 2px;
    padding: 8px 20px;
    border-top: 1px solid var(--divider);
    font-size: 12px;
    color: var(--text-muted);
}

.table-card__footer .footer-sep {
    opacity: 0.6;
}

/* Bos kartta alt bilgi ayrac cizgisiz, mesajin hemen altinda (kart ≤ 64 px). */
.table-card--empty .table-card__empty:not(:last-child) {
    padding-bottom: 2px;
}

.table-card--empty .table-card__footer {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 10px;
}

/* Az sutunlu tablo (≤ 3 sutun, orn. Antivirus urunleri): sutunlar icerige
   gore, sola yasli; artan genislik SON sutuna gider ("Durum" saga kacmaz). */
.section-table--fit th:not(:last-child),
.section-table--fit td:not(:last-child) {
    width: 1%;
    white-space: nowrap;
}

/* Tek basina tam genislikte kalan etiket/deger karti (Zaman, Olaylar->Sistem,
   Windows Update ozeti, cikarilabilir disk politikasi): genis ekranda iki
   cift bir satirda — sag yari bos kalmaz. */
@media (min-width: 1200px) {
    .field-group--full > .field-group__body > .kv-card:not(.kv-card--single) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
    }

    .field-group--full > .field-group__body > .kv-card:not(.kv-card--single) > .kv-row:nth-child(2) {
        border-top: none;
        padding-top: 0;
    }

    .field-group--full > .field-group__body > .kv-card:not(.kv-card--single) > .kv-row > .kv-row__label {
        flex-basis: 180px;
    }
}

.section-table td {
    vertical-align: top;
}

.section-table .num,
.section-table th.num {
    text-align: right;
}

.muted {
    color: var(--text-muted);
}

.small {
    font-size: 12px;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

.break {
    word-break: break-all;
}

.section-body .hint {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Notr rozet (Wi-Fi profil adi, "sanal", "varsayilan") — .chip filtre
   dugmesidir ve tiklanabilir gorunur, burada KULLANILMAZ. */
.section-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--chip-bg);
    color: var(--chip-text);
}

.section-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Calisma zamani alt sekmeleri. */
.sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.sub-tab {
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

.sub-tab.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.sub-panel {
    display: none;
}

.sub-panel.is-active {
    display: block;
}

/* Doluluk / pil sagligi cubugu. */
.usage-bar {
    display: inline-block;
    width: 80px;
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    vertical-align: middle;
    overflow: hidden;
}

.usage-bar > span {
    display: block;
    height: 100%;
    background: var(--success);
}

.usage-bar--bad > span {
    background: var(--danger);
}

.event-log {
    margin-bottom: 16px;
}

.event-log .card-subtitle {
    margin-top: 0;
}

.event-log > p {
    margin: 0 0 8px;
}

/* Beklenmedik durma rozeti (Oturum 9a kapanisi): gecmiste olmus ve servis
   yeniden baslamis bir olaydir — kirmizi "ariza" tonu degil sari uyari. */
.meta-flag--caution {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: var(--warning);
}

:root[data-theme="dark"] .meta-flag--caution {
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.4);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .meta-flag--caution {
        background: rgba(251, 191, 36, 0.16);
        border-color: rgba(251, 191, 36, 0.4);
    }
}

/* ---------------------------------------------------------------------------
   Siteden dogrudan kayit + sihirbaz + deneme sayaci (feature/self-signup)
   --------------------------------------------------------------------------- */
.signup-page .login-page__form-pane {
    justify-content: flex-start;
    padding-top: 72px;
    padding-bottom: 32px;
}

.signup-card {
    max-width: 440px;
}

.login-card__title {
    margin: 0 0 6px;
    font-size: 22px;
}

.signup-benefits {
    margin: 24px 0 0;
    padding: 0 0 0 20px;
    max-width: 360px;
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.95;
}

.signup-referral {
    margin: -8px 0 16px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--chip-bg);
    color: var(--chip-text);
    font-size: 13px;
}

/* Program kodu kutusu (feature/referral-program): ?promo=KOD ile gelinen
   kayit formunda programin kosullari + gercek kontenjan. */
.signup-program {
    margin: -8px 0 16px;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--chip-bg);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

.signup-program p {
    margin: 4px 0 0;
}

.signup-program--bad {
    border-color: var(--danger-border, var(--danger));
    background: var(--danger-bg, var(--chip-bg));
}

#signup-promo[readonly] {
    background: var(--chip-bg);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Bot tuzagi: ekran disinda, erisilebilirlik agacindan gizli. */
.signup-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.signup-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.45;
}

.signup-check .form-check {
    flex: 0 0 auto;
    margin-top: 2px;
}

.signup-turnstile {
    margin: 12px 0;
    min-height: 65px;
}

.signup-done__title {
    margin: 0 0 8px;
    font-size: 18px;
}

.signup-login-link {
    margin: 20px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.signup-login-link a {
    color: var(--link);
}

/* Deneme sayaci (ust bar + dashboard seridi) */
.topbar-trial {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--chip-text);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.topbar-trial--soon {
    background: var(--acting-bg);
    color: var(--acting-text);
}

.topbar-trial:not(:has(.btn)) {
    padding-right: 10px;
}

.trial-strip--active {
    background: var(--chip-bg);
    border-color: var(--border);
    color: var(--text);
}

.trial-strip--active.trial-strip--soon {
    background: var(--acting-bg);
    border-color: var(--acting-border);
    color: var(--acting-text);
}

/* Bos durum: henuz cihaz yok */
.empty-setup-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px dashed var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
}

.empty-setup-card__icon {
    flex: 0 0 auto;
    color: var(--accent);
}

.empty-setup-card__icon .icon {
    width: 32px;
    height: 32px;
}

.empty-setup-card__body {
    flex: 1 1 auto;
}

.empty-setup-card__body h2 {
    margin: 0 0 4px;
    font-size: 16px;
}

.empty-setup-card__body p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* Ilk giris sihirbazi */
.wizard-steps {
    list-style: none;
    margin: 12px 0 8px;
    padding: 0;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--divider);
}

.wizard-step:first-child {
    border-top: 0;
}

.wizard-step__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--chip-bg);
    color: var(--chip-text);
    font-size: 13px;
    font-weight: 700;
}

.wizard-step--done .wizard-step__badge {
    background: transparent;
    color: var(--success);
}

.wizard-step--skipped {
    opacity: 0.7;
}

.wizard-step__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wizard-step__desc {
    color: var(--text-muted);
    font-size: 12px;
}

.wizard-step__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* "Bir daha gosterme": sol altta metin baglantisi (kalici); "Daha sonra" sagda kalir. */
.wizard-never {
    margin-right: auto;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--link);
    text-decoration: underline;
    cursor: pointer;
}

.wizard-never:hover {
    color: var(--text);
}

.quote-line {
    margin: 4px 0 8px;
    font-weight: 600;
}

@media (max-width: 560px) {
    .wizard-step {
        flex-wrap: wrap;
    }

    .wizard-step__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .empty-setup-card {
        flex-wrap: wrap;
    }

    .topbar-trial__label {
        display: none;
    }

    .signup-page .login-page__form-pane {
        padding-top: 64px;
    }
}

@media (min-width: 861px) {
    /* Sol panel flex satirinda tam boy gerilir; form uzayip sayfa kayarsa da
       mavi zemin bitmez. Icerik ustte durur (sticky/100vh zemini kesiyordu). */
    .signup-page .login-page__brand-pane {
        align-self: stretch;
        justify-content: flex-start;
        padding-top: 72px;
    }
}

@media (max-width: 860px) {
    .signup-benefits {
        display: none;
    }

    .signup-page .login-page__brand-pane {
        padding: 24px 24px 20px;
    }
}

/* ===== IP Pinger (Oturum 9) ===== */
/* Network grubundaki alt menu ogesi artik tiklanabilir (IP Pinger ozeti);
   aktif sayfa vurgusu ana menudeki .sidebar__link.is-active ile ayni token'lar. */
.sidebar__sublink.is-active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    opacity: 1;
}

/* Baglanti kodu: elle yazilacagi icin buyuk ve aralikli; suresi dolunca ustu cizili. */
.pinger-code code {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
}

.pinger-code code.is-expired {
    text-decoration: line-through;
    opacity: 0.5;
}

/* =============================================================================
   IP Pinger ekranlari (Oturum 10) — liste, detay, saf SVG grafikler.
   Renkler yalniz token'lardan (--success/--warning/--danger/--chart-*);
   hex renk YAZILMAZ ki iki temada da dogru gorunsun.
   ============================================================================= */
.status-dot--up { background: var(--success); }
.status-dot--degraded { background: var(--warning); }
.status-dot--down { background: var(--danger); }
.status-dot--unknown { background: var(--text-muted); opacity: 0.55; }

.pg-limit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: var(--radius);
    background: var(--warning-bg);
    border: 1px solid var(--warning-border, var(--border));
    color: var(--warning);
    font-size: 13px;
}
.pg-limit > span { flex: 1 1 auto; }
.pg-limit--full { background: var(--danger-bg); border-color: var(--danger-border, var(--border)); color: var(--danger); }

.pg-tab-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.pg-table code { font-size: 12px; }
.pg-table td { vertical-align: middle; white-space: nowrap; }

.pg-spark { display: block; }
.pg-spark--empty { color: var(--text-muted); }
.pg-spark__line { fill: none; stroke: var(--chart-line); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.pg-spark__down { fill: var(--danger); }

.pg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.pg-meta__item { display: inline-flex; align-items: center; gap: 6px; }
.pg-meta__item .icon { width: 14px; height: 14px; }

.pg-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.pg-range { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.pg-range__btn {
    background: none; border: 0; border-right: 1px solid var(--border);
    padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.pg-range__btn:last-child { border-right: 0; }
.pg-range__btn:hover { color: var(--accent); background: var(--row-hover); }
.pg-range__btn.is-active { background: var(--accent); color: #fff; }

.pg-summary { margin-bottom: 14px; }
.kpi-tile__sub { font-size: 11px; color: var(--text-muted); }
.pg-summary .kpi-tile__value { font-size: 20px; word-break: break-word; }

.pg-charts { position: relative; display: grid; gap: 14px; }
.pg-card .dashboard-card__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.pg-legends { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.pg-legend { display: inline-flex; align-items: center; gap: 5px; }
.pg-legend__sw { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 2px; }
.pg-legend__sw--band { background: var(--chart-fill); border: 1px solid var(--chart-line); }
.pg-legend__sw--avg { background: var(--chart-line); height: 3px; }
.pg-legend__sw--p95 { background: var(--warning); height: 3px; }
.pg-legend__sw--up { background: var(--success); }
.pg-legend__sw--degraded { background: var(--warning); }
.pg-legend__sw--down { background: var(--danger); }

.pg-svg { display: block; width: 100%; height: auto; cursor: crosshair; }
.pg-grid { stroke: var(--divider); stroke-width: 1; }
.pg-axis { fill: var(--text-muted); font-size: 11px; }
.pg-axis--unit { font-size: 10px; }
.pg-band { fill: var(--chart-fill); stroke: none; }
.pg-avg { fill: none; stroke: var(--chart-line); stroke-width: 1.8; stroke-linejoin: round; }
.pg-avg-dot { fill: var(--chart-line); }
.pg-p95 { fill: none; stroke: var(--warning); stroke-width: 1.3; stroke-dasharray: 4 3; }
.pg-p95-dot { fill: var(--warning); }
.pg-loss { fill: var(--warning); }
.pg-loss--high { fill: var(--danger); }
.pg-state-track { fill: var(--divider); }
.pg-state--up { fill: var(--success); }
.pg-state--degraded { fill: var(--warning); }
.pg-state--down { fill: var(--danger); }
.pg-cross { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }

.pg-tip {
    position: absolute; z-index: 20; min-width: 230px; max-width: 320px; pointer-events: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); padding: 8px 10px; font-size: 12px; color: var(--text);
}
.pg-tip[hidden] { display: none; }
.pg-tip__time { font-weight: 700; margin-bottom: 4px; }
.pg-tip__row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
.pg-tip__row > span { color: var(--text-muted); }
.pg-arrow .icon { width: 14px; height: 14px; vertical-align: middle; color: var(--text-muted); }
/* pinger-dns: IP degisimi olayi (eski -> yeni) tek satirda kalir. */
.pg-ipchange { white-space: nowrap; }

.pg-check { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 14px; }
.pg-color { width: 56px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; }
.pg-import__text { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; resize: vertical; }
.pg-import__summary { font-weight: 600; margin: 10px 0 4px; }
.pg-import__errors { margin: 0 0 8px; padding-left: 18px; font-size: 12px; color: var(--danger); max-height: 140px; overflow: auto; }
.field-hint--bad { color: var(--danger); }

.pinger-strip {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 16px;
    border-radius: var(--radius); background: var(--chip-bg); border: 1px solid var(--border);
    color: var(--text); font-size: 13px; text-decoration: none;
}
.pinger-strip > span { flex: 1 1 auto; font-weight: 600; }
.pinger-strip:hover { border-color: var(--accent); }
.pinger-strip--bad { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

@media (max-width: 760px) {
    .pg-toolbar { justify-content: stretch; }
    .pg-range { width: 100%; }
    .pg-range__btn { flex: 1 1 0; padding: 8px 4px; }
    .pg-tip { min-width: 190px; }
}

.pg-summary { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.breadcrumb a { display: inline-flex; align-items: center; gap: 4px; }

/* Pinger baglanti kodu modali — SHA-256 dar ekranda modal disina tasmaz (fix/site-beta-3). */
.pinger-download .agent-download__meta {
    display: block;
    flex-basis: 100%;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.pinger-download .agent-download__meta code {
    word-break: break-all;
}

/* ---------------------------------------------------------------------------
   Destek talepleri (Oturum 12h-1) — liste, detay, dashboard karti.
   Renkler yalnizca tema token'lariyla; .btn--info/.btn--warn ailesi mevcut.
   --------------------------------------------------------------------------- */
.modal--wide { max-width: 640px; }
.detail-header__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.detail-header__meta { display: flex; gap: 12px; align-items: center; margin-top: 6px; }

.ticket-tabs { margin-bottom: 12px; flex-wrap: wrap; }
.ticket-tabs .count-badge { margin-left: 6px; }
.count-badge--muted { background: var(--chip-bg); color: var(--chip-text); }
.ticket-toolbar { flex-wrap: wrap; }
.ticket-code { font-weight: 700; color: var(--link); text-decoration: none; white-space: nowrap; }
.ticket-title-cell { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table--clickable tr.is-clickable { cursor: pointer; }

.ticket-priority { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ticket-priority__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto; }
.ticket-priority__dot--normal { background: var(--info); }
.ticket-priority__dot--high { background: var(--danger); }
.ticket-priority__dot--low { background: var(--text-muted); opacity: 0.6; }

.ticket-chip {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 4px 10px;
    border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); font-size: 13px;
}
.ticket-chip__x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.ticket-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; color: var(--text-muted); font-size: 13px; }

.ticket-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ticket-form textarea { resize: vertical; }

.ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ticket-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ticket-card, .ticket-form-card, .ticket-side {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
}
.ticket-card__meta { color: var(--text-muted); font-size: 12px; margin-bottom: 8px; }
.ticket-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.ticket-readonly { color: var(--text-muted); font-size: 13px; margin: 0; }
.ticket-org { color: var(--text-muted); font-weight: 400; }

.ticket-thread { display: flex; flex-direction: column; gap: 10px; }
.ticket-thread__title { font-size: 14px; margin: 0; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ticket-thread__empty { color: var(--text-muted); font-size: 13px; margin: 0; }
.ticket-comment { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.ticket-comment header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.ticket-comment header time { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.ticket-comment--internal { background: var(--warning-bg); border-color: var(--warning-border); }
.ticket-badge-internal {
    padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
    color: var(--warning); border: 1px solid var(--warning-border);
}
.ticket-event {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius);
    background: var(--chip-bg); color: var(--text-muted); font-size: 12.5px;
}
.ticket-event .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.ticket-event time { margin-left: auto; white-space: nowrap; }

.ticket-attachments { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-attachment {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12.5px; cursor: pointer;
}
.ticket-attachment:hover { border-color: var(--accent); }
.ticket-attachment .icon { width: 14px; height: 14px; }
.ticket-attachment__size { color: var(--text-muted); }

.ticket-form-card textarea { width: 100%; resize: vertical; }
.ticket-form-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.ticket-form-card__row .btn { margin-left: auto; }
.ticket-form-card .field-hint { margin: 8px 0 0; }

.ticket-side { display: flex; flex-direction: column; gap: 14px; }
.ticket-side__label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.ticket-side__value { font-size: 14px; overflow-wrap: anywhere; }
.ticket-side__value .form-select { width: 100%; }
.ticket-rustdesk { margin-top: 8px; display: inline-flex; }

.ticket-summary {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px;
    border-radius: var(--radius); background: var(--chip-bg); color: var(--text); text-decoration: none;
}
.ticket-summary:hover { box-shadow: inset 3px 0 0 var(--accent); }
.ticket-summary--high { background: var(--danger-bg); color: var(--danger); }
.ticket-summary__count { font-size: 24px; font-weight: 700; line-height: 1; }
.ticket-summary__text { flex: 1 1 auto; font-weight: 600; font-size: 13px; }

@media (max-width: 900px) {
    .ticket-layout { grid-template-columns: 1fr; }
    .ticket-form__grid { grid-template-columns: 1fr; }
    .detail-header__actions { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
   Cihaz gruplari + toplu komut (feature/device-groups, panel 0.18.0)
   ------------------------------------------------------------------------- */

/* Cihazlar | Gruplar alt sekmeleri — sekme basliklari (.tab-btn) ile ayni dil:
   aktif sekme kalin + vurgu alt cizgisi. */
.subtabs {
    display: flex;
    gap: 4px;
    margin-top: 12px;
    border-bottom: 1px solid var(--border);
}
.subtabs__item {
    padding: 8px 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 500;
}
.subtabs__item:hover { color: var(--text); }
.subtabs__item.is-active {
    color: var(--text);
    font-weight: 700;
    border-bottom-color: var(--accent);
}

/* Coklu secim: ilk sutun dar, satir secilince vurgulanir. */
.table .select-cell {
    width: 32px;
    padding-right: 0;
}
.table tbody tr.is-selected td { background: var(--row-hover); }

.selection-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}
.selection-bar__count { font-weight: 600; }
.selection-bar__spacer { flex: 1 1 auto; }
.selection-bar__command,
.groups-table__command {
    width: auto;
    min-width: 170px;
    height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.875rem;
}
.groups-table__command { display: inline-block; vertical-align: middle; }
.groups-table__desc { color: var(--text-muted); max-width: 360px; white-space: normal; }
.groups-intro { margin: 12px 0 16px; }

/* Toplu komut onayi: ilk 10 cihaz adi. */
.batch-preview {
    margin: 8px 0 12px;
    padding: 8px 12px 8px 28px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    font-size: 0.875rem;
}
.batch-preview__more { list-style: none; margin-left: -16px; color: var(--text-muted); }
.batch-preview__warn { color: var(--danger); font-size: 0.875rem; margin: 0 0 8px; }

.batch-meta { margin-top: 6px; }
.batch-table-wrap { overflow-x: auto; }
.batch-result { width: 320px; min-width: 200px; color: var(--text-muted); }
.batch-result__text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal; overflow-wrap: anywhere;
}
.batch-updated { text-align: right; white-space: nowrap; width: 1%; }
@media (max-width: 480px) { .batch-result { width: 200px; } }
.section-title#batches { margin-top: 28px; }

/* ---------------------------------------------------------------------------
   Ayarlar -> Bildirimler (feature/notifications) — notifications.js
   --------------------------------------------------------------------------- */
.notify-table-wrap {
    overflow-x: auto;
    margin-top: 8px;
}

.notify-table td {
    vertical-align: middle;
}

.notify-table .form-select {
    min-width: 120px;
}

.notify-rule__name {
    font-weight: 600;
}

.notify-recipients {
    min-width: 200px;
}

.notify-recipients__text {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 13px;
    word-break: break-word;
}

.notify-userlist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.notify-userlist__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}
/* --- Son kullanici destek formu (feature/helpdesk-enduser) ---------------- */
/* "Son kullanici" rozeti: talep girissiz formdan geldi (liste, detay, yorum). */
.enduser-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    margin-right: 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--chip-bg);
    color: var(--chip-text);
}
.ticket-comment header .enduser-badge { margin: 0 0 0 4px; }
/* Tepsi uygulamasi kaynakli talep (Oturum 12h-2): bilgi tonu — son kullanici
   rozetinden (notr cip) ayirt edilsin. */
.enduser-badge--tray {
    background: var(--info-bg, var(--chip-bg));
    color: var(--info, var(--chip-text));
}
/* Talep ekran goruntusu onizlemesi (Oturum 12h-2) — blob adresinden. */
.ticket-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ticket-shot {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    cursor: zoom-in;
    overflow: hidden;
}
.ticket-shot img { display: block; max-width: 320px; max-height: 200px; }
.tray-settings__actions { margin: 12px 0 4px; }
/* Ayarlar -> Destek formu */
/* Destek formu → Erisim kisitlari (fix/helpdesk-abuse). */
.support-restrict { display: grid; gap: 6px; max-width: 560px; }
.support-restrict__label { font-weight: 600; font-size: 13px; }
.support-restrict__check { margin-top: 6px; }
.support-restrict .field-hint, .support-restrict .form-error { margin: 0; }
.support-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.support-link__input { flex: 1 1 320px; min-width: 0; font-family: Consolas, "Courier New", monospace; font-size: 13px; }
.support-link__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.support-qr { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 12px 0 4px; }
.support-qr__img {
    width: 148px; height: 148px; flex: none;
    background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px;
}
.support-qr__img svg { width: 100%; height: 100%; display: block; }
.support-qr__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.support-requesters { overflow-x: auto; }

/* Maskotlu bos durum (panel 0.19.5, assets/js/empty-state.js). Maskot seffaf PNG/WebP'dir,
   zemin --surface oldugu icin acik/koyu temada ayni dosya kullanilir; dar ekranda ust uste. */
.empty-state--mascot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 24px 28px;
    text-align: left;
}
.empty-state__mascot {
    flex: 0 0 auto;
    width: 240px;
    max-width: 40%;
}
.empty-state__mascot img {
    display: block;
    width: 100%;
    height: auto;
}
.empty-state__text {
    max-width: 440px;
}
.empty-state__text p {
    margin: 0 0 16px;
}
@media (max-width: 640px) {
    .empty-state--mascot {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .empty-state__mascot {
        width: 180px;
        max-width: 60%;
    }
}

/* =============================================================================
   panel 0.21 — Alt 1 "Yogun operasyon" kabugu + Cihazlar listesi (A)
   Tasarim: docs/backlog/panel-0.21-shell.md, panel-0.21-a.md. Renkler YALNIZ
   mevcut token'lardan; saglikli durum sessizdir (gri), sorun renk + harf +
   ipucu ile gosterilir (yalniz renk erisilebilir degildir).
   ============================================================================= */

/* Icerik genisligi: tam genislik, en cok 1800 px (genis ekranda ortalanir). */
.content > * {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Ust cubuk: arama yer tutucusu + ozet rozetler + yogunluk ---- */
.topbar__left {
    flex: 1;
    gap: 12px;
}
.topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 280px;
    max-width: 440px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-muted);
}
.topbar-search .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.topbar-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    outline: none;
}
.topbar-summary {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.summary-pill .icon {
    width: 14px;
    height: 14px;
}
.summary-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
}
.summary-pill--warn {
    color: var(--warning);
    background: var(--warning-bg);
    border-color: var(--warning-border);
}
.summary-pill--bad {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: var(--danger-border);
}
.summary-pill--ok {
    color: var(--text-muted);
}
.density-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.density-toggle__btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
}
.density-toggle__btn.is-active {
    background: var(--chip-bg);
    color: var(--chip-text);
    font-weight: 600;
}
/* panel 0.22 (G): ucuncu rozet ("N acik uyari") geldi — EN'de "Last login: …" 1440 px'te iki satira
   kiriliyordu; son giris yalniz genis ekranda ve tek satirda. */
.topbar__last-login { white-space: nowrap; }
@media (max-width: 1600px) {
    .topbar__last-login {
        display: none;
    }
}
@media (max-width: 1100px) {
    .topbar-summary .summary-pill:first-child {
        display: none;
    }
}
@media (max-width: 900px) {
    .topbar-search,
    .topbar-summary,
    .density-toggle {
        display: none;
    }
}

/* ---- Cihazlar listesi ---- */
.page-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 2px;
}
.dev-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 14px;
}
.dev-strip__box {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 12px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.dev-strip__box:hover {
    border-color: var(--accent);
}
.dev-strip__box.is-active {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.dev-strip__label,
.dev-strip__sub {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dev-strip__value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.dev-strip__box--ok .dev-strip__value { color: var(--success); }
.dev-strip__box--warn .dev-strip__value { color: var(--warning); }
.dev-strip__box--bad .dev-strip__value { color: var(--danger); }

.list-toolbar__spacer {
    flex: 1;
}
.dev-toolbar__filters {
    display: none;
}
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: -2px 0 12px;
}
.filter-chips:empty {
    display: none;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    padding: 3px 10px;
    background: var(--chip-bg);
    color: var(--chip-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.filter-chip span {
    opacity: 0.7;
}

.col-picker {
    position: relative;
}
.col-picker__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    width: 270px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 6px 0;
}
.col-picker__panel[hidden] {
    display: none;
}
.col-picker__title {
    font-weight: 700;
    padding: 6px 14px 8px;
    border-bottom: 1px solid var(--divider);
}
.col-picker__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px 3px 14px;
    font-size: 13px;
}
.col-picker__label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.col-picker__move {
    display: inline-flex;
}
.col-picker__footer {
    border-top: 1px solid var(--divider);
    margin-top: 4px;
    padding: 6px 14px 2px;
}

.dev-table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}
.table--devices {
    width: 100%;
}
.table--devices th,
.table--devices td {
    white-space: nowrap;
    vertical-align: middle;
}
.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
}
.th-sort.is-active {
    color: var(--accent);
}
.th-sort__arrow {
    font-size: 10px;
}
.device-row {
    cursor: pointer;
}
.device-row.is-inactive td {
    opacity: 0.6;
}
.device-link {
    font-weight: 650;
    color: var(--text);
    text-decoration: none;
}
.device-link:hover {
    color: var(--link);
}
.cell-sub {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}
.cell-why--critical { color: var(--danger); }
.cell-why--warning { color: var(--warning); }
.why-icon {
    display: none;
    margin-left: 6px;
    vertical-align: -2px;
}
.why-icon .icon { width: 14px; height: 14px; }
.why-icon--critical { color: var(--danger); }
.why-icon--warning { color: var(--warning); }
:root[data-density="compact"] .why-icon { display: inline-flex; }
:root[data-density="compact"] .table--devices .cell-sub { display: none; }

.os-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 650;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--chip-bg);
    color: var(--chip-text);
    border: 1px solid transparent;
}
.os-badge--eol {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning-border);
}
.os-badge--esu {
    background: transparent;
    color: var(--info);
    border-color: var(--info-border);
}

.sec-chips {
    display: inline-flex;
    gap: 3px;
}
.sec-chips.is-stale {
    opacity: 0.55;
}
.sec-chip {
    min-width: 30px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid var(--divider);
    color: var(--text-muted);
}
.sec-chip--ok {
    opacity: 0.75;
}
.sec-chip--na {
    border-style: dashed;
    opacity: 0.6;
}
.sec-chip--warn {
    color: var(--warning);
    background: var(--warning-bg);
    border-color: var(--warning-border);
}
.sec-chip--bad {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}
:root[data-theme="dark"] .sec-chip--bad {
    color: #1a0b0b;
}
.sec-chip--info {
    color: var(--info);
    background: var(--info-bg);
    border-color: var(--info-border);
}

.usage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.usage__track {
    width: 56px;
    height: 6px;
    border-radius: 3px;
    background: var(--divider);
    overflow: hidden;
}
.usage__fill {
    display: block;
    height: 100%;
    background: var(--success);
}
.usage--mid .usage__fill { background: #d97706; }
.usage--hi .usage__fill { background: var(--danger); }
.usage__pct {
    width: 36px;
    text-align: right;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.usage--mid .usage__pct { color: var(--warning); font-weight: 600; }
.usage--hi .usage__pct { color: var(--danger); font-weight: 700; }
.usage__cap {
    font-size: 12px;
    color: var(--text-muted);
}
/* panel 0.24.0 — disk dolum tahmini (liste ikonu, detay satiri ve mini grafik) */
.disk-forecast-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    cursor: help;
}
.disk-forecast-icon .icon { width: 14px; height: 14px; }
.disk-forecast-icon--bad { color: var(--danger); }
.disk-forecast-icon--warn { color: var(--warning); }
.disk-forecast-icon--info { color: var(--text-muted); }
.disk-forecast-line { font-size: 13px; }
.disk-forecast-line .icon { width: 14px; height: 14px; vertical-align: -2px; }
.disk-forecast-line--bad { color: var(--danger); }
.disk-forecast-line--warn { color: var(--warning); }
.disk-forecast-line--info { color: var(--text); }
.disk-forecast-line--none { color: var(--text-muted); }
.disk-forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 400px));
    gap: 12px;
}
.disk-forecast-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}
.disk-forecast-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    margin-bottom: 6px;
}
.disk-trend { display: block; width: 100%; height: auto; }
.disk-trend__line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.disk-trend__dot { fill: var(--chart-line); }
.disk-trend__cap { stroke: var(--border); stroke-dasharray: 3 3; }
.disk-trend__cap-label, .disk-trend__label { fill: var(--text-muted); font-size: 10px; }
.disk-trend__proj { fill: none; stroke-width: 2; stroke-dasharray: 5 4; }
.disk-trend__proj--bad { stroke: var(--danger); }
.disk-trend__proj--warn { stroke: var(--warning); }
.disk-trend__proj--info { stroke: var(--text-muted); }
.agent-old {
    color: var(--warning);
    font-weight: 650;
}
.alert-counts { display: inline-flex; gap: 4px; text-decoration: none; }
.alert-count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.alert-count--critical { background: var(--danger-bg); color: var(--danger); }
.alert-count--high { background: var(--chip-bg); color: var(--high); }
.alert-count--warning { background: var(--warning-bg); color: var(--warning); }
.agent-beta {
    color: var(--info);
    font-weight: 650;
}
.agent-beta .icon,
.agent-old .icon {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}
.dev-strip__box--info .dev-strip__value { color: var(--info); }
.dash-ind--info .dash-ind__n { color: var(--info); }
.agent-old .icon {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}
.link-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}
.link-icon .icon {
    width: 14px;
    height: 14px;
}

/* Sabit genislik: dort slot (Baglan, Yenile, Talep, ⋯) her satirda ayni yerde;
   Baglan yoksa yeri bos kalir, digerleri kaymaz. 4 x 28 + 3 x 2 = 118 px. */
.row-actions-cell {
    width: 134px;
    min-width: 134px;
    text-align: right;
}
.row-actions {
    display: inline-grid;
    grid-template-columns: repeat(4, 28px);
    gap: 2px;
    justify-content: end;
}
.row-action--ph {
    visibility: hidden;
    pointer-events: none;
}
.row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.row-action:hover:not(:disabled) {
    background: var(--chip-bg);
    color: var(--chip-text);
}
.row-action:disabled {
    opacity: 0.4;
    cursor: default;
}
.row-action .icon {
    width: 16px;
    height: 16px;
}
/* Satir eylemleri HER ZAMAN gorunur: soluk gri, ustune gelince renkli (fix/panel-0.23.2). */
.row-actions .row-action {
    opacity: 0.5;
    transition: opacity 120ms, color 120ms, background-color 120ms;
}
.row-actions .row-action:hover:not(:disabled),
.row-actions .row-action:focus-visible {
    opacity: 1;
    color: var(--accent);
    background: var(--chip-bg);
}
.row-actions .row-action--ph {
    opacity: 0;
}

#devices-page {
    position: relative;
}
.row-menu {
    position: absolute;
    z-index: 40;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 4px 0;
}
.row-menu[hidden] {
    display: none;
}
.row-menu__item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: none;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    padding: 7px 14px;
    cursor: pointer;
}
.row-menu__item:hover:not(:disabled) {
    background: var(--row-hover);
}
.row-menu__item:disabled {
    color: var(--text-muted);
    cursor: default;
}
.row-menu__item .icon {
    width: 14px;
    height: 14px;
}
.row-menu__item.is-danger {
    color: var(--danger);
}
.row-menu__sep {
    height: 1px;
    background: var(--divider);
    margin: 4px 0;
}
.list-footer {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 2px;
}
.list-footer__ok {
    color: var(--success);
}

/* Kart gorunumu (375 px) — tablo gizlenir. */
.device-cards {
    display: none;
}
.device-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--text);
    text-decoration: none;
}
.device-card + .device-card {
    margin-top: 8px;
}
.device-card.is-inactive {
    opacity: 0.6;
}
.device-card__status {
    text-align: right;
    font-size: 13px;
}
.device-card__who {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--text-muted);
}
.device-card__why {
    grid-column: 1 / -1;
    font-size: 12px;
}
.device-card__disk {
    text-align: right;
}

@media (max-width: 1280px) {
    .dev-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .dev-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dev-toolbar .list-toolbar__search {
        flex: 1 1 100%;
    }
    .dev-toolbar__filters {
        display: inline-flex;
    }
    .dev-toolbar .dev-toolbar__more,
    .dev-toolbar .list-toolbar__spacer {
        display: none;
    }
    .dev-toolbar.is-expanded .dev-toolbar__more {
        display: block;
    }
    .dev-table {
        display: none;
    }
    .device-cards {
        display: block;
    }
    #selection-bar-slot {
        display: none;
    }
}

/* Cihaz listesi ince ayar (ilk gercek ekran goruntusunden sonra). */
.dev-toolbar {
    gap: 8px;
}
.dev-toolbar .search-box.list-toolbar__search {
    flex: 0 1 240px;
}
.dev-toolbar .form-select {
    width: auto;
    max-width: 200px;
}
.col-picker__group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 10px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 4px;
}
.col-picker__group-label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.col-picker__group .form-select {
    flex: 1;
}
.table--devices th,
.table--devices td {
    padding: 8px 12px;
}
/* 1920 px'te (menu 232 px acik, IP + Son envanter sutunlari dahil) tablo 1620 px
   icerige sigar: yalniz Durum/OS/Agent/eylem sabit; Cihaz ve Kisi sutunlari esnek,
   Disk hucresi daralir. Yatay kaydirma yalniz 1280 altinda (asagida). */
.table--devices th,
.table--devices td {
    padding: 8px 10px;
}
.table--devices td.cell-name,
.table--devices td.cell-person {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 130px;
}
.table--devices .cell-why {
    white-space: normal;
    max-width: 300px;
}
.table--devices .usage { gap: 5px; }
.table--devices .usage__track { width: 48px; }
.table--devices .usage__pct { width: 32px; }
.table--devices .usage__cap { white-space: nowrap; }
@media (max-width: 1280px) {
    .table--devices { min-width: 1100px; }
}
.table--devices .icon {
    display: inline-block;
}

/* Ekran okuyucuya acik, gorsel olarak gizli metin (tablo eylem sutunu basligi). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* =============================================================================
   panel 0.21 / G — Güvenlik uyarıları (security-alerts.js)
   ========================================================================== */
:root {
    --high: #c2410c;
    --high-bg: #fff7ed;
    --high-border: #fed7aa;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --high: #fb923c; --high-bg: rgba(251, 146, 60, .12); --high-border: rgba(251, 146, 60, .35); }
}
:root[data-theme="dark"] { --high: #fb923c; --high-bg: rgba(251, 146, 60, .12); --high-border: rgba(251, 146, 60, .35); }

.sev-chip {
    display: inline-block;
    min-width: 24px;
    padding: 2px 0;
    border-radius: 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
}
.sev-chip--critical { background: var(--danger); }
.sev-chip--high { background: var(--high); }
.sev-chip--warning { background: var(--warning); }
:root[data-theme="dark"] .sev-chip { color: #1a0b0b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sev-chip { color: #1a0b0b; } }

.status-pill--info { background: var(--info-bg, #e0ecff); color: var(--info, var(--accent)); }
.summary-pill--high { color: var(--high); background: var(--high-bg); border-color: var(--high-border); }
.dev-strip__box--high .dev-strip__value { color: var(--high); }
.alerts-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.alerts-tabs { margin-bottom: 12px; }
.cell-sub-inline { color: var(--text-muted); font-size: 12px; margin-left: 4px; }

/* Menü sayacı (açık kritik + yüksek). Daraltılmış rayda simge üzerinde nokta. */
.sidebar__link { position: relative; }
.nav-count {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--high);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.nav-count--bad { background: var(--danger); }
.nav-count[hidden] { display: none; }
.shell.is-collapsed .sidebar__link .nav-count:not([hidden]) {
    display: block;
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 0;
    padding: 0 4px;
    font-size: 9px;
    line-height: 14px;
}

.table--alerts .col-sev { width: 52px; }
.table--alerts td .cell-sub { display: block; }
.table--alerts tr.is-current td { background: var(--row-hover); }
.table--alerts tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.table--alerts .table__actions .btn + .btn { margin-left: 6px; }
.alerts-empty,
.device-alerts-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
}
.alerts-empty { display: flex; gap: 12px; align-items: center; padding: 20px; }
.alerts-empty .icon { width: 28px; height: 28px; color: var(--success); flex: none; }

.alerts-wrap.has-drawer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 16px;
    align-items: start;
}
.alert-drawer {
    position: sticky;
    top: 0;
    max-height: calc(100vh - var(--topbar-h, 56px) - 40px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.alert-drawer[hidden] { display: none; }
.alert-drawer__head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 1px solid var(--divider);
}
.alert-drawer__title { font-weight: 700; font-size: 15px; }
.alert-drawer__close {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.alert-drawer__body { padding: 8px 16px 12px; }
.alert-drawer__sec {
    margin: 14px 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.alert-drawer__p { margin: 0; font-size: 13px; line-height: 1.5; }
.alert-drawer__foot { padding: 12px 16px 16px; border-top: 1px solid var(--divider); }
.alert-drawer__buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.alert-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 8px 0 0; font-size: 13px; }
.alert-kv dt { color: var(--text-muted); }
.alert-kv dd { margin: 0; }
.alert-tl { list-style: none; margin: 0; padding: 4px 0 0 18px; font-size: 13px; }
.alert-tl li { position: relative; padding: 0 0 10px; }
.alert-tl .tl__dot {
    position: absolute;
    left: -16px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-muted);
}
.alert-tl .tl__dot--opened, .alert-tl .tl__dot--reopened { background: var(--high); }
.alert-tl .tl__dot--resolved, .alert-tl .tl__dot--auto_resolved { background: var(--success); }
.alert-tl .tl__dot--acknowledged { background: var(--accent); }
.alert-note {
    margin-top: 4px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--bg);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.alert-accepted {
    display: flex;
    gap: 10px;
    margin: 8px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--warning-border);
    border-radius: 8px;
    background: var(--warning-bg);
    font-size: 13px;
}
.alert-accepted .icon { width: 18px; height: 18px; color: var(--warning); flex: none; }

.alert-cards { display: grid; gap: 10px; }
.alert-card {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
    cursor: pointer;
}
.alert-card__head { display: flex; gap: 8px; align-items: flex-start; }
.alert-card__title { flex: 1; min-width: 0; }
.alert-card__status { text-align: right; font-size: 11px; }
.alert-card__device { margin-top: 6px; }
.alert-card__actions { display: flex; gap: 8px; margin-top: 8px; }

/* Cihaz detayı → Güvenlik: bu cihazın uyarıları */
.device-alerts-slot:empty { display: none; }
.device-alerts-card { padding: 14px 16px; margin-bottom: 16px; }
.alert-card-head { display: flex; align-items: baseline; gap: 12px; }
.alert-card-head__title { margin: 0; font-size: 14px; font-weight: 700; }
.alert-card-head__link { margin-left: auto; font-size: 13px; }
.device-alerts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.device-alert { display: flex; gap: 10px; align-items: flex-start; }
.device-alerts--muted { opacity: .8; }
.card-empty-line { margin: 8px 0 0; font-size: 13px; }

@media (max-width: 1100px) {
    .alerts-wrap.has-drawer { grid-template-columns: 1fr; }
    .alert-drawer { position: static; max-height: none; }
}
@media (max-width: 760px) {
    .alerts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .alerts-strip .dev-strip__box:last-child { grid-column: span 2; }
    .alerts-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .alerts-tabs .tab-btn { white-space: nowrap; }
    .alerts-wrap.has-drawer .alert-drawer {
        position: fixed;
        inset: 0;
        z-index: 60;
        max-height: none;
        border-radius: 0;
    }
    body.alert-drawer-open { overflow: hidden; }
}

/* =============================================================================
   panel 0.21 / I — Dashboard (dashboard.js)
   Izgara masonry'dir: kart icerik yuksekligi kadar 4 px'lik satir kaplar
   (layoutMasonry), grid-auto-flow: dense ile kisa kartin altindaki bosluk dolar.
   Sutun sayisi Alt 1 kabuk kuralidir: 4 (>= 1600) / 3 (>= 1100) / 2 (>= 760) / 1.
   ========================================================================== */
.dash-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-head .page-title { margin: 0; }
.dash-head__sub { margin: 2px 0 0; color: var(--text-muted); font-size: 13px; }
.dash-head__actions { margin-left: auto; position: relative; }
.dash-edit { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 320px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 8px 0; }
.dash-edit[hidden] { display: none; }
.dash-edit__title { margin: 0; padding: 4px 14px 8px; font-weight: 700; border-bottom: 1px solid var(--divider); }
.dash-edit__list { list-style: none; margin: 0; padding: 4px 0; }
.dash-edit__row { display: flex; align-items: center; gap: 8px; padding: 4px 14px; }
.dash-edit__label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 14px; cursor: pointer; }
.dash-edit__note { color: var(--text-muted); font-size: 12px; }
.dash-edit__arrows { display: inline-flex; gap: 2px; }
.dash-edit__arrow { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface);
    color: var(--text-muted); font-size: 11px; cursor: pointer; }
.dash-edit__arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.dash-edit__arrow:disabled { opacity: .35; cursor: default; }
.dash-edit__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--divider); padding: 8px 14px 2px; margin-top: 4px; }

.dash-health { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 24px; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.dash-health__label { position: relative; display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.dash-info { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-muted); background: transparent; color: var(--text-muted);
    font-family: inherit; font-size: 11px; font-weight: 800; line-height: 1; font-style: italic; cursor: pointer; padding: 0; }
.dash-info:hover, .dash-info[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.dash-tip { position: absolute; left: 0; top: 26px; z-index: 40; width: 380px; max-width: calc(100vw - 48px); background: #111827; color: #f3f4f6;
    font-size: 12.5px; font-weight: 400; line-height: 1.5; padding: 10px 14px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.dash-tip[hidden] { display: none; }
.dash-tip p { margin: 0 0 6px; }
.dash-tip p:last-child { margin: 0; }
.dash-tip ul { margin: 0 0 6px; padding-left: 18px; }
.dash-health__value { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.dash-health__pct { font-size: 42px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.dash-health__pct--ok { color: var(--success); }
.dash-health__pct--warn { color: var(--warning); }
.dash-health__pct--bad { color: var(--danger); }
.dash-health__verdict { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.dash-health__verdict svg { width: 14px; height: 14px; }
.dash-health__verdict--ok { color: var(--success); background: var(--success-bg); }
.dash-health__verdict--warn { color: var(--warning); background: var(--warning-bg); }
.dash-health__verdict--bad { color: var(--danger); background: var(--danger-bg); }
.dash-health__ratio { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; }
.dash-seg { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--divider); }
.dash-seg__part { display: block; height: 100%; }
.dash-seg__part--ok { background: var(--success); }
.dash-seg__part--critical { background: var(--danger); }
.dash-seg__part--high { background: var(--high); }
.dash-seg__part--other { background: var(--warning); }
.dash-seg__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; color: var(--text-muted); font-size: 12px; }
.dash-seg__key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.dash-inds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.dash-ind { display: block; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; color: inherit; text-decoration: none; min-width: 0; }
.dash-ind:hover { border-color: var(--accent); background: var(--row-hover); }
.dash-ind__n { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-ind__l { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-ind--bad .dash-ind__n { color: var(--danger); }
.dash-ind--high .dash-ind__n { color: var(--high); }
.dash-ind--warn .dash-ind__n { color: var(--warning); }

.dash-grid { --dash-gap: 16px; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 4px; grid-auto-flow: row dense;
    column-gap: var(--dash-gap); align-items: start; }
@media (min-width: 760px) {
    .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-card--wide { grid-column: span 2; }
}
@media (min-width: 1100px) { .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .dash-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dash-card { min-width: 0; }
.dash-card__inner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dash-card__head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--divider); }
.dash-card__titles { min-width: 0; flex: 1; }
.dash-card__title { margin: 0; font-size: 15px; font-weight: 700; }
.dash-card__sub { margin: 2px 0 0; color: var(--text-muted); font-size: 12px; }
.dash-card__more { white-space: nowrap; font-size: 13px; }
.dash-card__foot { margin: 0; padding: 8px 16px; border-top: 1px solid var(--divider); color: var(--text-muted); font-size: 12px; }
.dash-card .dashboard-card__list { margin: 0; }
.dash-card .dashboard-card__row { margin: 0; padding: 8px 16px; }
.dash-card .dashboard-card__empty { padding: 12px 16px; margin: 0; }
.dash-allgood { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 16px; color: var(--success); font-weight: 600; }
.dash-allgood svg { width: 18px; height: 18px; }

/* Satir rozeti = en ciddi nedenin onemi; renkler uyari kutusuyla (sev-chip) AYNI. */
.lvl-badge { flex-shrink: 0; display: inline-block; min-width: 76px; text-align: center; padding: 2px 6px; border-radius: 4px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: #fff; }
.lvl-badge--critical { background: var(--danger); }
.lvl-badge--high { background: var(--high); }
.lvl-badge--warning { background: var(--warning); }
.lvl-badge--connection { background: var(--chip-bg); color: var(--chip-text); }
.lvl-badge--disk { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
:root[data-theme="dark"] .lvl-badge--critical,
:root[data-theme="dark"] .lvl-badge--high,
:root[data-theme="dark"] .lvl-badge--warning { color: #1a0b0b; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lvl-badge--critical,
    :root:not([data-theme="light"]) .lvl-badge--high,
    :root:not([data-theme="light"]) .lvl-badge--warning { color: #1a0b0b; }
}
.dash-attn__row { align-items: center; gap: 10px; }
.dash-attn__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-attn__top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dash-attn__top .dashboard-card__device { white-space: nowrap; flex-shrink: 0; color: inherit; }
.dash-attn__why { min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
a.dash-attn__why:hover { color: var(--link); }
.dash-attn__ack { font-size: 11px; color: var(--info, var(--accent)); font-weight: 600; }
.dash-attn__more { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash-dist { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 12px 16px 8px; }
.dash-dist__part { display: block; height: 100%; }
.dash-dist__part--critical { background: var(--danger); }
.dash-dist__part--high { background: var(--high); }
.dash-dist__part--warning { background: var(--warning); }
.dash-sevlinks { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; border-bottom: 1px solid var(--divider); }
.dash-sevlink { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px 2px 3px;
    font-size: 12px; color: inherit; text-decoration: none; }
.dash-sevlink:hover { border-color: var(--accent); }
.dash-sevlink b { font-variant-numeric: tabular-nums; }
.dash-act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-act__cell { padding: 10px 16px; border-bottom: 1px solid var(--divider); }
.dash-act__cell:nth-child(odd) { border-right: 1px solid var(--divider); }
.dash-act__cell:nth-last-child(-n+2) { border-bottom: none; }
.dash-act__cell b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.dash-act__cell span { font-size: 12px; color: var(--text-muted); }
.dash-card .online-trend { padding: 12px 16px; box-sizing: border-box; }
@media (max-width: 1100px) { .dash-inds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .dash-card .density-toggle.dash-range { display: inline-flex; } }
@media (max-width: 760px) {
    .dash-health { grid-template-columns: 1fr; gap: 12px; }
    .dash-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-edit { width: min(320px, calc(100vw - 32px)); }
    .dash-tip { width: min(340px, calc(100vw - 48px)); }
    .lvl-badge { min-width: 0; }
}

/* Yogunluk (panel 0.23.1): Rahat/Siki anahtari yalniz tablo hucresini degil
   Dashboard, uyari kutusu ve cihaz detayini da yonetir. Olcu maketten:
   liste satiri 44 px (rahat) / 34 px (siki). Degiskenler :root'ta, kurallar
   asagida — yeni bir liste/kart bu degiskenleri okur, ayri kural yazmaz. */
:root {
    --row-h: 44px;
    --card-py: 12px;
    --card-px: 16px;
    --block-pad: 16px;
    --block-gap: 16px;
    --kv-py: 12px;
    --ind-py: 7px;
}
:root[data-density="compact"] {
    --row-h: 34px;
    --card-py: 8px;
    --card-px: 12px;
    --block-pad: 10px;
    --block-gap: 10px;
    --kv-py: 7px;
    --ind-py: 4px;
}
.dash-card .dashboard-card__row { min-height: var(--row-h); box-sizing: border-box; padding: 4px var(--card-px); }
.dash-card__head { padding: var(--card-py) var(--card-px); }
.dash-card__foot { padding: calc(var(--card-py) - 4px) var(--card-px); }
.dash-card .dashboard-card__empty { padding: var(--card-py) var(--card-px); }
.dash-act__cell { padding: calc(var(--card-py) - 2px) var(--card-px); }
.dash-card .online-trend { padding: var(--card-py) var(--card-px); }
.dash-health { padding: var(--block-pad); margin-bottom: var(--block-gap); }
.dash-health__pct { font-size: 42px; }
:root[data-density="compact"] .dash-health__pct { font-size: 32px; }
:root[data-density="compact"] .dash-health__ratio { margin-top: 4px; }
:root[data-density="compact"] .dash-inds { margin-top: 8px; gap: 6px; }
.dash-ind { padding: var(--ind-py) 10px; }
.dash-grid { --dash-gap: var(--block-gap); }
.table--devices td, .table--alerts td { height: var(--row-h); }
.kv-row, .settings-row { padding-top: var(--kv-py); padding-bottom: var(--kv-py); }
.kv-row:first-of-type, .settings-row:first-of-type { padding-top: 0; }
:root[data-density="compact"] .kv-card { padding-top: 2px; padding-bottom: 2px; }
.alert-drawer__body { padding: var(--card-py) var(--block-pad); }
.alert-card { padding: var(--card-py) var(--card-px); }
.dash-card .dash-attn__row { padding-top: 2px; padding-bottom: 2px; }
:root[data-density="compact"] .dash-attn__main { line-height: 1.25; }

/* --- agent 0.9.2: guvenlik duvari komutu + kaldirma korumasi (panel 0.25.0) --- */
.fw-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.fw-actions__override {
    font-size: 12px;
    color: var(--danger);
}
.fw-profile-checks {
    border: 0;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.fw-profile-checks legend {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
    width: 100%;
}
.uninstall-code {
    margin: 8px 0 14px;
    padding: 10px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: Consolas, Menlo, monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-align: center;
    user-select: all;
}
.copy-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.copy-row .form-input {
    flex: 1;
    min-width: 0;
    font-family: Consolas, Menlo, monospace;
    font-size: 12px;
}
/* CPU/RAM sutunlari (panel 0.25.0): disk cubugundan dar — tablo 1440 px'te tasmasin. */
.usage--compact { gap: 4px; }
.usage--compact .usage__track { width: 28px; }
.usage--compact .usage__pct { width: 30px; }

/* panel 0.25.1: bekleyen guvenlik duvari komutu — gri hap + saat ikonu; rozet yuvasi
   baslik rozet siralamasini (CSS order) bozmasin diye kutu uretmez. */
.fw-pending-pill .icon { width: 12px; height: 12px; flex: none; }
.fw-badge-slot { display: contents; }