/* ÜRETİLMİŞ KOPYA — bu dosyayı modül içinde DÜZENLEME.
   Tek kaynak: repo kökündeki shared/app.css. Düzenle, sonra tools/sync-shared.ps1
   (veya .sh) çalıştır; smoke kopyaların shared/ ile birebir aynı olduğunu doğrular. */
/* EndpointGuard Panel — tek CSS dosyasi (framework yok).
   Tema: acik/koyu, CSS degiskenleriyle (Oturum 7b). Kaynak: JS
   (assets/js/theme.js) <html data-theme="light|dark"> attribute'unu yazar;
   attribute hic yoksa (ilk boya oncesi, bkz. partials/head.php'deki
   flash-onleme script'i) sistem tercihi (prefers-color-scheme) esas alinir. */

:root {
    --accent: #2563eb;
    --accent-dark: #1e40af;
    --accent-mark: #2563eb;
    --bg: #eef1f6;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --border: #d5dbe6;
    --text: #172033;
    --text-muted: #5c6779;
    --link: #1d4ed8;
    --danger: #b91c1c;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    /* Fix/light-theme: kenar cubugu HER IKI temada da AYNI koyu lacivert
       kalir (bkz. CLAUDE.md yeni token tablosu) — .sidebar/.sidebar__* bu
       degiskenleri kullanir, genel --surface/--text/--border'i DEGIL. Deger
       acik/koyu temada AYNI oldugu icin asagidaki dark bloklarinda tekrar
       TANIMLANMAZ (yalnizca gercekten farklilasan --sidebar-bg istisna). */
    --sidebar-bg: #0f1629;
    --sidebar-text: #cfd6e6;
    --sidebar-active-bg: #1b2a4d;
    --sidebar-active-text: #ffffff;
    --sidebar-border: #202a44;
    --header-bg: #ffffff;
    /* Kart/satir ayraci — kenarliktan (--border, kutu cizgisi) BILEREK
       AYRI: tablo/kart-ici ince cizgiler biraz daha soluk kalir. */
    --divider: #e6eaf1;
    --chip-bg: #e7eef9;
    --chip-text: #1d4ed8;
    --table-head-bg: #f4f6fa;
    --zebra: #f4f6fa;
    --row-hover: #e7eef9;
    /* Dashboard grafikleri (Fix/light-theme) — cizgi/alan rengi --accent'ten
       BILEREK AYRI tutulur (koyu temada deger farklidir, bkz. app.css'in
       basindaki dark bloklari), tek renk hem cizgi hem dolgu (alpha ile)
       icin kullanilir. */
    --chart-line: #2563eb;
    --chart-fill: rgba(37, 99, 235, 0.1);
    /* Yetki devri serit/rozetleri (Oturum 8a) — "baska bir musterinin
       verisindesiniz" bilgisi HER sayfada tek bakista fark edilmeli. */
    --acting-bg: #fff7ed;
    --acting-border: #fdba74;
    --acting-text: #9a3412;
    --scope-view-bg: #eff6ff;
    --scope-view-text: #1d4ed8;
    --scope-manage-bg: #fef3c7;
    --scope-manage-text: #92400e;
    --warning: #b45309;
    --warning-bg: #fffbeb;
    --warning-border: #fde68a;
    --success: #15803d;
    /* "Envanteri Yenile" dugmesi (fix/ui-batch-2) icin mavi renk ailesi —
       --accent'ten AYRI tutulur ki dugme rengi marka vurgusuyla degil,
       "restart" (kirmizi) / "USB" (kehribar) ile AYNI aile deseniyle
       (--X/--X-bg/--X-border) essiz kalsin. */
    --info: #1d4ed8;
    --info-bg: #eff6ff;
    --info-border: #bfdbfe;
    --overlay: rgba(15, 23, 42, 0.5);
    --radius: 8px;
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 64px;
    /* Sidebar marka alani ile header AYNI degiskeni paylasir (Oturum 7b
       ikinci tur duzeltmesi) ki alt kenarlari (border-bottom) her zaman
       ayni y'de hizali kalsin. */
    --topbar-h: 60px;
    /* Toolbar hizalama duzeltmesi (panel 0.7.2): ayni satirdaki TUM satir-ici
       kontroller (arama kutusu, <select>, dugme, acilir menu tetikleyicisi)
       bu TEK yukseklik degerini paylasir. Onceden her kontrol turu kendi
       padding/font-size kombinasyonuyla (input 10px/14px, select+status-filter
       8px/13px, arama kutusu 8px/13px) FARKLI bir dogal yukseklige
       ulasiyordu — ayni satirda goz ile fark edilir bir dikey kayma
       yaratiyordu (Personel/Cihazlar toolbar'larinda kullanici incelemesinde
       yakalandi). Kapsam BILEREK sinirlidir: `.btn`/`.btn--small` bu
       degiskeni KULLANMAZ, cunku hicbir mevcut toolbar'da arama/select ile
       AYNI satirda cikci bir `.btn` yoktur (Cihaz Ekle/Personel Ekle gibi
       dugmeler ayri bir `.detail-header__row`/`.page-header` satirindadir)
       — `.btn--small` ozellikle KOMPAKT kalmasi gereken tablo satiri
       eylemlerinde (Duzenle/Sil) yaygin kullanilir, onu da bu token'a
       baglamak o dugmeleri istenmeden buyuturdu. */
    --control-h: 38px;
    /* .form-select ok simgesi (Oturum 8 duzeltmesi): data-URI SVG icindeki
       renk CSS degiskeni/currentColor OKUYAMAZ (statik metindir), bu yuzden
       --text-muted'in HER IKI tema degerinin kodlanmis kopyasi burada tutulur
       ve digerleriyle AYNI iki yerde (asagidaki dark bloklari) yeniden
       tanimlanir — diger tum renk token'lariyla AYNI desen. */
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6779' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --accent: #3b82f6;
        --accent-dark: #2563eb;
        --accent-mark: #60a5fa;
        --bg: #0f1629;
        --surface: #141d33;
        --surface-raised: #1b2542;
        --border: #25314d;
        --text: #e6ebf5;
        --text-muted: #9aa6bd;
        --link: #60a5fa;
        --danger: #f87171;
        --danger-bg: #3f1d1d;
        --danger-border: #7f1d1d;
        --sidebar-bg: #0b1224;
        --sidebar-text: #cfd6e6;
        --sidebar-active-bg: #1b2a4d;
        --sidebar-active-text: #ffffff;
        --sidebar-border: #202a44;
        --header-bg: #0f1629;
        --divider: #25314d;
        --chip-bg: #1b2a4d;
        --chip-text: #93c5fd;
        --table-head-bg: #131c33;
        --zebra: #131c33;
        --row-hover: #1b2a4d;
        --chart-line: #60a5fa;
        --chart-fill: rgba(96, 165, 250, 0.14);
        --acting-bg: #431407;
        --acting-border: #9a3412;
        --acting-text: #fed7aa;
        --scope-view-bg: #172554;
        --scope-view-text: #bfdbfe;
        --scope-manage-bg: #451a03;
        --scope-manage-text: #fde68a;
        --warning: #fbbf24;
        --warning-bg: #451a03;
        --warning-border: #92400e;
        --success: #4ade80;
        --info: #93c5fd;
        --info-bg: #172554;
        --info-border: #1d4ed8;
        --overlay: rgba(0, 0, 0, 0.6);
        --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa6bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    }
}

:root[data-theme="dark"] {
    --accent: #3b82f6;
    --accent-dark: #2563eb;
    --accent-mark: #60a5fa;
    --bg: #0f1629;
    --surface: #141d33;
    --surface-raised: #1b2542;
    --border: #25314d;
    --text: #e6ebf5;
    --text-muted: #9aa6bd;
    --link: #60a5fa;
    --danger: #f87171;
    --danger-bg: #3f1d1d;
    --danger-border: #7f1d1d;
    --sidebar-bg: #0b1224;
    --sidebar-text: #cfd6e6;
    --sidebar-active-bg: #1b2a4d;
    --sidebar-active-text: #ffffff;
    --sidebar-border: #202a44;
    --header-bg: #0f1629;
    --divider: #25314d;
    --chip-bg: #1b2a4d;
    --chip-text: #93c5fd;
    --table-head-bg: #131c33;
    --zebra: #131c33;
    --row-hover: #1b2a4d;
    --chart-line: #60a5fa;
    --chart-fill: rgba(96, 165, 250, 0.14);
    --acting-bg: #431407;
    --acting-border: #9a3412;
    --acting-text: #fed7aa;
    --scope-view-bg: #172554;
    --scope-view-text: #bfdbfe;
    --scope-manage-bg: #451a03;
    --scope-manage-text: #fde68a;
    --warning: #fbbf24;
    --warning-bg: #451a03;
    --warning-border: #92400e;
    --success: #4ade80;
    --info: #93c5fd;
    --info-bg: #172554;
    --info-border: #1d4ed8;
    --overlay: rgba(0, 0, 0, 0.6);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa6bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Uygulama kabuğu (#app, yalnızca app.php'de vardır — login.php'de YOK,
   bu yüzden login sayfası bu kısıtlamadan bilerek ETKİLENMEZ) tam
   yükseklik zincirini kurar; asıl sabitleme ".shell" kuralındadır. */
#app {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    font-family: inherit;
}

svg {
    display: block;
}

/* ---- İkonlar (assets/js/icons.js) ------------------------------------- */

.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Marka (assets/js/brand.js SHIELD_MARK_SVG) ----------------------- */

.brand-mark {
    color: var(--accent-mark);
    display: inline-flex;
    flex-shrink: 0;
}

.brand-mark svg {
    width: 100%;
    height: 100%;
}

/* ---- Formlar / butonlar --------------------------------------------- */

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
}

/* Metin girisi ortak sinifi (fix/invite-form) — `.form-select`/`.form-check`
   ile AYNI desen: `.field input`in `.field` sarmalayicisina bagimli olmasi,
   o sarmalayici DISINDAKI alanlari (ör. Ayarlar > Profil "Ad Soyad" —
   `.settings-row__input` yalnizca max-width tasiyordu) tarayici
   varsayilanina dusuruyordu (kullanici incelemesinde yakalandi). `.form-input`
   `.field` GEREKTIRMEDEN her yerde kullanilabilir; `.field input` geriye
   donuk uyumluluk icin (mevcut `.field` govdeleri class eklenmeden de dogru
   gorunsun diye) AYNI kuralla birlikte tutulur. */
.field input,
.form-input {
    width: 100%;
    height: var(--control-h);
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
}

/* `<textarea class="form-input">` (personel notu, lisans notu) TEK satirlik
   bir kontrol degildir — `--control-h` YALNIZCA input/select/button gibi
   tek-satirlik kontroller icindir. Element+sinif secicisi (0,1,1) sinif
   secicisinden (0,1,0) daha ozgul oldugu icin kaynak sirasindan BAGIMSIZ
   olarak yukaridaki `height`i geri alir; `rows` attribute'u dogal
   yuksekligi belirlemeye devam eder. */
textarea.form-input {
    height: auto;
    padding: 10px 12px;
}

.field input:focus,
.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Bir alanin altina yazilan kucuk, notr ipucu (ör. sifre politikasi) veya
   kirmizi hata metni — `.form-error` (asagida) kutulu/arka planli bir banner,
   bu ikisi TEK bir alana bagli, govde OLMAYAN satir-ici metindir. */
.field-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.field-error {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--danger);
}

/* Davet formundaki salt-okunur "Hesap: ..." satiri (fix/invite-form) —
   formu doldurmadan once davet edilen e-postayi gosterir. */
.invite-account {
    margin: 0 0 20px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 13px;
}

.invite-account strong {
    color: var(--text);
}

/* Ozel <select> gorunumu (Oturum 8 duzeltmesi) — tarayici varsayilan
   kutusu/oku tema ile UYUSMUYORDU (ozellikle koyu temada beyaz/gri native
   kutu). appearance:none native kutuyu/oku kaldirir; ok --select-chevron
   degiskeninden gelir (yukaridaki :root'a bkz. — data-URI icindeki renk
   CSS'i OKUYAMADIGI icin iki tema kopyasi diger renk token'lariyla AYNI
   yerlerde tutulur). Panelde HER <select> bu sinifi tasimalidir — bkz.
   CLAUDE.md "Form kontrolleri tema token'lariyla stillendirilir".
   .status-filter gibi ozel-boyut siniflari BUNUNLA BIRLIKTE (ek sinif
   olarak) kullanilir, yerine gecmez. */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Genislik BILEREK zorlanmaz: bu sinif hem `.field` icindeki (modal)
       selectlerde HEM DE toolbar/onay govdesi gibi satir-ici baglamlarda
       (status-filter, restart-delay) kullanilir; ikincisinde width:100%
       flex-basis'e donusup toolbar duzenini bozardi. `.field` icindeki
       selectler asagidaki `.field .form-select` kurali ile tam genislik alir. */
    height: var(--control-h);
    padding: 0 34px 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    background-color: var(--surface);
    color: var(--text);
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.field .form-select {
    width: 100%;
}

/* Ozel checkbox/radio gorunumu (Oturum 8 duzeltmesi) — AYNI gerekce:
   native kutu tema ile uyusmuyordu. appearance:none + kendi kutumuz;
   isaret (checkbox: tik, radio: nokta) ::after ile currentColor DEGIL
   sabit beyazdir (kutu zaten --accent ile doluyor, beyaz her iki temada
   da okunur — checkbox'in KENDISI zaten tema token'iyla renklendigi icin
   burada iki-tema sorunu YOKTUR, --select-chevron'daki data-URI kisitindan
   FARKLI bir durum). */
.form-check {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    position: relative;
    cursor: pointer;
}

.form-check[type="radio"] {
    border-radius: 50%;
}

.form-check:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.form-check:checked::after {
    content: "";
    position: absolute;
}

.form-check:not([type="radio"]):checked::after {
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-check[type="radio"]:checked::after {
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    transform: translate(-50%, -50%);
}

.form-check:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-check:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* `.field input` (asagida, metin alanlari icin) width:100%/padding YAZAR ve
   `.field .form-check` (0,2,1) onun `.field input`'inden (0,1,1) daha
   YUKSEK ozguldukte oldugu icin bunu GERI ALIR — aksi halde bir `.field`
   icine yerlesmis checkbox/radio (ornegin kullanici davet modalindeki
   "Uzaktan Erişim") 18x18 kutu yerine tam genislikte, yassı bir cubuk
   olarak cizilir (Oturum 8 duzeltmesinde canli olarak gozlemlendi). */
.field .form-check {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 4px;
}

.field .form-check[type="radio"] {
    border-radius: 50%;
}

.field-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Plan kilidi (Oturum 8) — free planda can_remote alani devre disi + kilit
   simgesiyle gosterilir (bkz. users-list.js canRemoteFieldHtml). */
.field-checkbox.is-disabled {
    color: var(--text-faint, var(--text-muted));
    cursor: not-allowed;
}

.field-checkbox.is-disabled .icon {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 2px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface);
    color: var(--text);
}

/* `.btn`in kendi `display: inline-flex`i tarayicinin `[hidden] { display:
   none }` varsayilanini EZER (author-stilleri UA-stilinden onceliklidir,
   ozgüllük ESIT olsa bile) — bu yuzden `hidden` ATANMIS bir `.btn` gorunur
   KALIYORDU (fix/invite-form, davet/sifirlama "gecersiz" sayfasindaki
   sartli "Girişe git" dugmesinde canli olarak yakalandi). `.user-menu__panel
   [hidden]`/`.tag-dropdown__panel[hidden]` ile AYNI desen — `hidden`
   tasiyabilecek her `.btn` icin GENEL bir kural. */
.btn[hidden] {
    display: none;
}

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn--primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.btn--primary:disabled {
    opacity: 0.6;
    cursor: default;
}

.btn--block {
    width: 100%;
}

.btn--link {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 4px 8px;
}

.btn--link:hover {
    color: var(--text);
    text-decoration: underline;
}

.btn--small {
    padding: 5px 10px;
    font-size: 13px;
}

.btn--ghost {
    background: none;
    border-color: transparent;
}

.btn--ghost:hover {
    background: var(--bg);
}

.form-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 13px;
    margin: 0 0 16px;
}

/* ---- Giris sayfasi (iki bolmeli, Oturum 7b) ---------------------------- */

.login-page {
    display: flex;
    /* html/body `height:100%` (sabit kabuk) govdeyi goruntu alani yuksekligine
       kilitler; form uzayinca sol marka paneli o kilitli yukseklikte kalip
       altta zemin rengi gorunuyordu. Giris tipi sayfalar icerikle buyur. */
    height: auto;
    min-height: 100vh;
}

.login-page__brand-pane {
    flex: 1 1 45%;
    background: var(--accent);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
}

.login-page__brand-pane .brand-mark {
    color: #fff;
}

.login-page__brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.login-page__brand-lockup .brand-mark {
    width: 32px;
    height: 32px;
}

.login-page__brand-lockup span {
    font-size: 26px;
    font-weight: 700;
}

.login-page__tagline {
    font-size: 15px;
    max-width: 360px;
    opacity: 0.92;
    margin: 0;
}

.login-page__form-pane {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
}

.login-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    padding: 8px;
}

.login-card__brand {
    display: none;
}

.login-card__subtitle {
    color: var(--text-muted);
    margin: 0 0 24px;
    font-size: 13px;
}

.login-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.login-card__forgot {
    font-size: 13px;
}

.login-page__top-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 860px) {
    .login-page {
        flex-direction: column;
    }

    .login-page__brand-pane {
        flex: 0 0 auto;
        padding: 32px 24px;
    }

    .login-page__tagline {
        display: none;
    }
}

.lang-toggle {
    display: flex;
    gap: 4px;
}

.lang-toggle__btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

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

.theme-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.theme-toggle__btn {
    background: var(--surface);
    border: none;
    padding: 5px 8px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.theme-toggle__btn.is-active {
    background: var(--accent);
    color: #fff;
}

.theme-toggle__btn .icon {
    width: 15px;
    height: 15px;
}

/* ---- Uygulama kabugu (sidebar + topbar) ------------------------------ */

/* SABIT KABUK (Oturum 7b kapanışı): ilk turda "yapıldı" denip
   uygulanmamıştı — .shell yalnızca min-height:100vh idi, yani sayfa
   toplam yüksekliği içerik kadar büyüyor ve TÜM belge (header/sidebar/
   footer dahil) birlikte kayıyordu. Artık .shell TAM viewport
   yüksekliğinde ve overflow:hidden — kayan TEK yer aşağıdaki
   ".content"tir (bkz. o kural). */
.shell {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Fix/light-theme: kenar cubugu HER IKI temada da AYNI koyu lacivert kalir
   (--sidebar-* token'lari, bkz. app.css basindaki :root) — acik temada da
   --surface/--text KULLANILMAZ, aksi halde acik temada beyaz bir sidebar
   ortaya cikardi ki tasarim onayi bunun tam TERSINI istiyor. */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    overflow-y: auto;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    transition: width 0.15s ease;
}

.shell.is-collapsed .sidebar {
    width: var(--sidebar-width-collapsed);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--topbar-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar__brand .brand-mark {
    width: 22px;
    height: 22px;
}

.sidebar__brand-label {
    font-weight: 700;
    font-size: 15px;
    color: var(--sidebar-active-text);
    white-space: nowrap;
    overflow: hidden;
}

/* DUZELTME (Oturum 7b kapanisi): daha once ".sidebar__brand span" generik
   secicisi kullaniliyordu — bu, wordmark'i degil SVG mark'i saran
   "<span class="brand-mark">" ogesini de eslestirip mark'i da gizliyordu
   (mark neden span'a sarili: currentColor'un CSS "color"'unu miras almasi
   icin, bkz. docs/brand.md). Secici artik yalnizca wordmark'in KENDI
   class'ini hedefliyor. */
.shell.is-collapsed .sidebar__brand-label,
.shell.is-collapsed .sidebar__link span,
.shell.is-collapsed .sidebar__link .badge {
    display: none;
}

/* Masaustunde her zaman gizli — yalnizca <768px medya sorgusunda
   (mobil cekmece acikken) gorunur olur. Buradaki taban kural olmadan bu
   bos <div>, .shell'in (display:flex) UCUNCU bir flex ogesi olarak
   masaustu duzenine karisirdi. */
.sidebar-backdrop {
    display: none;
}

.sidebar__toggle {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: 4px;
    display: flex;
    border-radius: var(--radius);
}

.sidebar__toggle:hover {
    background: var(--sidebar-active-bg);
}

.shell.is-collapsed .sidebar__toggle {
    margin-left: 0;
}

.shell.is-collapsed .sidebar__brand {
    justify-content: center;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: var(--sidebar-text);
    font-weight: 500;
    border-left: 3px solid transparent;
    white-space: nowrap;
}

.shell.is-collapsed .sidebar__link {
    justify-content: center;
    padding: 10px 0;
}

.sidebar__link:hover {
    background: var(--sidebar-active-bg);
    text-decoration: none;
}

.sidebar__link.is-active {
    border-left-color: var(--accent-mark);
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}

.sidebar__link.is-disabled {
    color: var(--sidebar-text);
    opacity: 0.55;
    cursor: default;
}

.sidebar__link.is-disabled:hover {
    background: none;
}

.sidebar__link span {
    flex: 1;
}

/* Sol menudeki "yakinda" rozeti HER IKI temada da AYNI (dark) sidebar
   zemini uzerinde durur — genel `.badge` kuralindan (icerik alaninda
   kullanilir, --border/--text-muted'a gore renklenir) BILEREK AYRI. */
.sidebar__link .badge,
.sidebar__sublink .badge {
    background: rgba(255, 255, 255, 0.12);
    color: var(--sidebar-text);
}

.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--border);
    color: var(--text-muted);
}

.badge--soon {
    background: #eef2ff;
    color: var(--accent);
}

:root[data-theme="dark"] .badge--soon {
    background: rgba(59, 130, 246, 0.18);
}

.shell__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-h);
    padding: 0 24px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.topbar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Yalnizca mobilde gorunur (bkz. <768px medya sorgusu) — sol menu
   cekmecesini acar/kapatir. */
.topbar__mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.topbar__tenant {
    font-weight: 600;
}

.topbar__last-login {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 12px;
    font-weight: 400;
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Kullanici menusu (Oturum 7b) -------------------------------------- */

.user-menu {
    position: relative;
}

.user-menu__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 10px 4px 4px;
    cursor: pointer;
    color: var(--text);
}

.user-menu__trigger:hover {
    background: var(--bg);
}

.user-menu__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-menu__email {
    font-size: 13px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 12px;
    z-index: 40;
}

.user-menu__panel[hidden] {
    display: none;
}

.user-menu__header {
    padding: 4px 8px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.user-menu__header-email {
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu__header-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.user-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px;
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.user-menu__item:hover {
    background: var(--bg);
}

.user-menu__item.is-danger {
    color: var(--danger);
}

.user-menu__section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 8px 8px 4px;
}

.user-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 8px;
}

/* Sayfada kayan TEK bolge burasidir — header/sidebar/footer sabit kalir. */
.content {
    flex: 1;
    min-height: 0;
    padding: 24px;
    overflow-y: auto;
}

.footer {
    flex-shrink: 0;
    padding: 12px 24px;
    color: var(--text-muted);
    font-size: 12px;
    border-top: 1px solid var(--border);
    background: var(--header-bg);
}

.page-title {
    font-size: 20px;
    margin: 0 0 16px;
}

/* Baslik + eylem dugmesi (Oturum 8 — Kullanicilar/Lisanslar sayfalari,
   "+ X Ekle" dugmesiyle AYNI satirda). */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.page-header .page-title {
    margin-bottom: 0;
}

/* Tablo satirlarindaki islem dugmeleri (Duzenle/Sil), son sutunda, TEK
   satirda, saga yasli (Oturum 8 duzeltmesi — GENEL KURAL, tum tablolar
   icin gecerlidir).
   `display:flex` DEGIL: bir <td>'yi flex container yapmak onu tablonun
   sutun genislik hesabindan (auto table-layout) COPARIR, komsu sutunlar
   (ozellikle uzun icerikli olanlar) onu sikistirdiginda dugmeler alt
   satira KIRILIR — Lisanslar tablosunda canli olarak gozlemlendi. Bunun
   yerine duz satir-ici akis + kardes elemanlar arasi margin kullanilir;
   `white-space: nowrap` dugmelerin ASLA sarmalanmamasini garanti eder. */
.table__actions {
    text-align: right;
    white-space: nowrap;
}

.table__actions > * + * {
    margin-left: 6px;
}

/* Ayarlar sayfasindaki serbest metin girisi (ornegin "ad" — Oturum 8);
   .settings-row__value ile AYNI hizada ama duzenlenebilir. Genislik disindaki
   TUM gorsel stil (border/bg/renk) artik `.form-input`den gelir (JS tarafinda
   class="form-input settings-row__input" olarak birlikte kullanilir) — bu
   sinif ONCEDEN yalniz max-width tasiyordu ve alan tarayici varsayilanina
   (temasiz beyaz kutu) dusuyordu (fix/invite-form, kullanici incelemesinde
   yakalandi). */
.settings-row__input {
    max-width: 280px;
}

/* Plan kullanim cubuklari (Oturum 8 — Ayarlar → Plan). */
.plan-usage {
    margin: 10px 0;
}

.plan-usage__label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 4px;
}

.plan-usage__track {
    height: 8px;
    border-radius: 4px;
    background: var(--border);
    overflow: hidden;
}

.plan-usage__fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
}

/* Limit asildiginda (admin/bayi/beta plan cubuklari) — kirmizi dolgu. */
.plan-usage__fill--over {
    background: var(--danger);
}

/* ---- Genel yardimcilar ------------------------------------------------ */

.loading {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

.empty-state {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
}

.empty-state h2 {
    color: var(--text);
    margin: 0 0 8px;
}

/* ---- Cihaz listesi: KPI seridi + toolbar (Oturum 7b ikinci tur) -------- */

/* SABIT sutun sayisi (Oturum 8 duzeltmesi) — `auto-fit` KULLANILMAZ: 7.
   kart (Oturum 8'de "Biten lisans") eklenince, orta genislikte auto-fit'in
   HESAPLADIGI sutun sayisi karti tam bolmuyor ve son satirdaki kartlar
   1fr ile digerlerinden DAHA GENIS gerilerek sikismis/dengesiz gorunuyordu.
   Sabit 7/4/2 sutun, her satirdaki kartlarin genisligini birbirine EŞİT
   tutar; 1280px genislikte 7'si TEK satirda, dar ekranda 2 satira (4+3)
   kontrollu sekilde kirilir. */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* Bayi Dashboard'u (fix/ui-batch) 5 kart tasir — sabit 7 sutunda bunlar sola
   yaslanip 2 sutunluk bos alan birakirdi. AYNI gerekce (auto-fit degil,
   sabit sutun sayisi): 5 tam olarak 5'e boluniyor. Kaynak sirasi bilerek
   media sorgularindan ONCE — dar ekranda genel 4/2 kirilma KURALI (asagida)
   hala kazanir, bu yalnizca GENIS ekran sutun sayisini degistirir. */
.kpi-strip--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 860px) {
    .kpi-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* KPI kutulari (Fix/light-theme): renkli zemin + yuvarlak ikon rozeti +
   sayi rengi UCU birlikte bir "ton" tanimlar (--kpi-bg/--kpi-border/
   --kpi-icon-bg/--kpi-value). Tonsuz (eski) kullanim (yalnizca
   `.kpi-tile__value--ok/warn/bad` metin rengi, sarmalayicida ton class'i
   YOK — bkz. admin/tenant-detail.js, reseller/customer-detail.js basit
   online/stale/offline ucluleri) geriye donuk calismaya devam eder: bu
   durumda kutu `--surface`/`--border` varsayilanina duser, yalnizca metin
   renklenir. */
.kpi-tile {
    background: var(--kpi-bg, var(--surface));
    border: 1px solid var(--kpi-border, var(--border));
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kpi-tile__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--kpi-icon-bg, var(--border));
    color: var(--kpi-value, var(--text-muted));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-tile__icon .icon {
    width: 16px;
    height: 16px;
}

.kpi-tile__value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--kpi-value, var(--text));
}

.kpi-tile__value--ok {
    color: var(--success);
}

.kpi-tile__value--warn {
    color: var(--warning);
}

.kpi-tile__value--bad {
    color: var(--danger);
}

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

.kpi-tile--total {
    --kpi-bg: #f4f6fa;
    --kpi-border: #d5dbe6;
    --kpi-icon-bg: #e3e8f1;
    --kpi-value: #172033;
}

.kpi-tile--ok {
    --kpi-bg: #f1faf3;
    --kpi-border: #c9e7d1;
    --kpi-icon-bg: #dcf2e2;
    --kpi-value: #15803d;
}

.kpi-tile--warn {
    --kpi-bg: #fdf7ee;
    --kpi-border: #eed7b6;
    --kpi-icon-bg: #f8e8cf;
    --kpi-value: #b45309;
}

.kpi-tile--bad {
    --kpi-bg: #fdf2f2;
    --kpi-border: #eec4c4;
    --kpi-icon-bg: #f8dcdc;
    --kpi-value: #b91c1c;
}

.kpi-tile--pending {
    --kpi-bg: #f3f3fc;
    --kpi-border: #cfcff0;
    --kpi-icon-bg: #e4e4f7;
    --kpi-value: #4338ca;
}

.kpi-tile--changes {
    --kpi-bg: #effaf8;
    --kpi-border: #bfe6e1;
    --kpi-icon-bg: #d8f0ec;
    --kpi-value: #0f766e;
}

.kpi-tile--licenses {
    --kpi-bg: #f8f3fd;
    --kpi-border: #dfc9f0;
    --kpi-icon-bg: #eddff7;
    --kpi-value: #7e22ce;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .kpi-tile--total {
        --kpi-bg: #131c33; --kpi-border: #25314d; --kpi-icon-bg: #1b2542; --kpi-value: #e6ebf5;
    }
    :root:not([data-theme="light"]) .kpi-tile--ok {
        --kpi-bg: #10261c; --kpi-border: #1d4a33; --kpi-icon-bg: #173c2a; --kpi-value: #4ade80;
    }
    :root:not([data-theme="light"]) .kpi-tile--warn {
        --kpi-bg: #2a1f0f; --kpi-border: #5a4116; --kpi-icon-bg: #3d2d10; --kpi-value: #fbbf24;
    }
    :root:not([data-theme="light"]) .kpi-tile--bad {
        --kpi-bg: #2a1414; --kpi-border: #5a2222; --kpi-icon-bg: #3d1818; --kpi-value: #f87171;
    }
    :root:not([data-theme="light"]) .kpi-tile--pending {
        --kpi-bg: #191a33; --kpi-border: #33356b; --kpi-icon-bg: #25264d; --kpi-value: #a5b4fc;
    }
    :root:not([data-theme="light"]) .kpi-tile--changes {
        --kpi-bg: #0f2624; --kpi-border: #1a4f49; --kpi-icon-bg: #143c38; --kpi-value: #2dd4bf;
    }
    :root:not([data-theme="light"]) .kpi-tile--licenses {
        --kpi-bg: #231533; --kpi-border: #4a2a6b; --kpi-icon-bg: #361f4d; --kpi-value: #c084fc;
    }
}

:root[data-theme="dark"] .kpi-tile--total {
    --kpi-bg: #131c33; --kpi-border: #25314d; --kpi-icon-bg: #1b2542; --kpi-value: #e6ebf5;
}

:root[data-theme="dark"] .kpi-tile--ok {
    --kpi-bg: #10261c; --kpi-border: #1d4a33; --kpi-icon-bg: #173c2a; --kpi-value: #4ade80;
}

:root[data-theme="dark"] .kpi-tile--warn {
    --kpi-bg: #2a1f0f; --kpi-border: #5a4116; --kpi-icon-bg: #3d2d10; --kpi-value: #fbbf24;
}

:root[data-theme="dark"] .kpi-tile--bad {
    --kpi-bg: #2a1414; --kpi-border: #5a2222; --kpi-icon-bg: #3d1818; --kpi-value: #f87171;
}

:root[data-theme="dark"] .kpi-tile--pending {
    --kpi-bg: #191a33; --kpi-border: #33356b; --kpi-icon-bg: #25264d; --kpi-value: #a5b4fc;
}

:root[data-theme="dark"] .kpi-tile--changes {
    --kpi-bg: #0f2624; --kpi-border: #1a4f49; --kpi-icon-bg: #143c38; --kpi-value: #2dd4bf;
}

:root[data-theme="dark"] .kpi-tile--licenses {
    --kpi-bg: #231533; --kpi-border: #4a2a6b; --kpi-icon-bg: #361f4d; --kpi-value: #c084fc;
}

.list-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

/* Duzeltme (panel 0.7.2): `.search-box.list-toolbar__search` (0,2,0)
   yaziliyordu — `.search-box`'un kendi `margin-bottom:12px`'i (asagida,
   AYNI ozguluk 0,1,0 ama kaynakta bu kuraldan SONRA gelir) kaynak sirasi
   geregi bunu EZIYORDU. Sonuc: arama kutusunun flex-item MARGIN kutusu
   toolbar satirindan 12px daha uzundu ve `align-items:center` bu ekstra
   payi SIMETRIK DEGIL yalnizca alta ekleyerek dagitiyordu — arama kutusu
   satirin USTUNE yapisik kalirken yanindaki select'ler satirda ORTALANMIS
   goruntuye cikiyordu (harness ile olculdu: 6px dikey kayma). Sinif
   birlesimi (0,2,0) artik ozgulluk sirasindan BAGIMSIZ olarak kazanir. */
.search-box.list-toolbar__search {
    margin-bottom: 0;
    flex: 0 1 280px;
}

/* Duzeltme (panel 0.7.2): `.status-filter` onceden burada `.form-select`in
   TUMUYLE AYNI ozelliklerini (padding/border/font-size/arka plan/renk) daha
   KUCUK degerlerle tekrar taniyordu; ayni ozgulukte (0,1,0) ama kaynakta
   `.form-select`den SONRA geldigi icin HER ZAMAN KAZANIYORDU — sonuc,
   `class="status-filter form-select"` tasiyan HER filtre selectinin
   (durum/departman/grupla/gizlilik) toolbar'daki arama kutusundan/diger
   kontrollerden FARKLI bir yukseklikte cikmasiydi. Kural KALDIRILDI; tum
   gorunum (yukseklik dahil, `--control-h`) artik yalnizca `.form-select`den
   gelir. Sinif JS tarafinda (devices-list.js/personnel-list.js/settings.js)
   SILINMEDI ki ileride bu selectlere ozgu bir kisitlama (ör. min-width)
   gerekirse tek bir CSS kuraliyla eklenebilsin. */

.list-toolbar__meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}

/* ---- Cihaz listesi tablosu -------------------------------------------- */

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Sutunlar icerik genisliginde (Oturum 7b ikinci tur) — cihaz listesi
   genis ekranda gereksiz yere gerilmesin. */
.table--auto {
    width: auto;
    min-width: 60%;
    table-layout: auto;
}

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

.table th, .table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
    font-size: 13px;
    transition: background-color 120ms ease;
}

.table th {
    /* panel 0.21 (kabuk karari): baslik --text-muted yerine --text'in hafif
       soluk hali ve 650 kalinlik — soluk basliklar sutun taramasini zorlastiriyordu. */
    color: var(--text);
    opacity: 1;
    font-weight: 650;
    background: var(--table-head-bg);
    border-bottom-color: var(--border);
}

/* Yogunluk (panel 0.21): <html data-density="compact"> kullanici tercihidir
   (users.preferences.density). Yalniz hucre boslugu degisir, duzen degismez.
   Rahat (varsayilan) bugunku olcudur. */
:root[data-density="compact"] .table th,
:root[data-density="compact"] .table td {
    padding: 6px 10px;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Zebra (Fix/light-theme) — cift satirlar hafifce farkli zeminde; tekli
   satirlar `.table`'in kendi (--surface) zeminini korur. `tbody` ile
   sinirli: `.table th` zaten kendi (--table-head-bg) rengini tasir. */
.table tbody tr:nth-child(even) td {
    background: var(--zebra);
}

/* Hover, zebra'nin USTUNE gecer (asagida tanimlandigi icin ayni ozgulukte
   CASCADE ile kazanir) ve sol 3px'lik vurgu ile mevcut "tikla" davranisini
   (bkz. .device-row) gorsel olarak da belirtir.
   Duzeltme (fix/ui-batch): vurgu ONCEDEN HER `td`ye ayri ayri uygulaniyordu —
   `inset 3px 0 0` her hucrenin KENDI sol kenarini boyadigi icin satir
   uzerindeyken sutunlar arasinda koyu dikey cizgiler goruluyordu (canlida
   yakalandi). Vurgu artik yalnizca satirin GERCEK sol kenari olan ILK
   hucreye uygulanir; diger hucreler yalnizca zemin rengini degistirir. */
.table tbody tr:hover td {
    background: var(--row-hover);
}

.table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

.device-row {
    cursor: pointer;
}

.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.status-dot--online {
    background: var(--success);
}

.status-dot--stale {
    background: var(--warning);
}

.status-dot--offline {
    background: var(--danger);
}

/* ---- Cihaz detayi ------------------------------------------------------ */

.detail-header {
    margin-bottom: 16px;
}

/* Baslik + "Cihazı Sil" dugmesi (Oturum 8) AYNI satirda, birbirinden
   uzakta; .meta ise KENDI satirinda kalir (bkz. eski tek-flex-satir
   davranisi — dugme eklenince ikisi AYNI flex satirinda sikismasin diye
   ayri bir sarmalayiciya alindi). */
.detail-header__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-header h1 {
    margin: 0;
    font-size: 20px;
}

.detail-header .meta {
    color: var(--text-muted);
    font-size: 13px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 13px;
}

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tab-btn {
    position: relative;
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease;
}

/* Hover'da alt cizgi KAYARAK belirir (fix/ui-batch-2) — gercek border yerine
   ayri bir ::after kullanilir ki aktif sekmenin (asagida) sabit border'iyla
   karismasin; scaleX(0) -> scaleX(1) gecisi "kayma" izlenimini verir. */
.tab-btn::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -2px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 150ms ease;
}

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

.tab-btn:hover::after {
    transform: scaleX(1);
}

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

.tab-panel {
    display: none;
}

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

/* ---- Alan grupları (Oturum 7b; fix/ui-batch-2'de sütun bazlı yığın, artık
   ELLE tanımlı 12 sütunlu bir grid) — bkz. panel/public/assets/js/layouts/ -- */

/* Duzeltme (fix/device-detail-layout): `column-count` masonry'si (ve ondan
   ONCEKI `grid-template-columns: 1fr 1fr`) grubun GENISLIGINE hicbir zaman
   karar VERMIYORDU — kisa/uzun kartlar rastgele bir sutuna dusuyor, DAR bir
   tablo (orn. "Antivirüs Ürünleri") `<table>` icerdigi icin OTOMATIK tam
   genislik aliyor ve icerigi dar oldugundan kartin SAGINDA buyuk bir bosluk
   birakiyordu; YARIM kalan bir kv-card (orn. "Pil") ise masonry'nin hangi
   sutuna dustugune bagli olarak YANINDA ESLESECEK bir kart bulamayip o
   satirin sagini BOS birakabiliyordu. Artik genislik OTOMATIK degil: her
   grup, cagiran tarafin (bkz. layouts/<tab>.js — sabit {key, span, titleKey}
   dizisi) ELLE verdigi `span` (6 = yarim, 12 = tam) ile gelir ve DOM sirasi
   zaten o dizideki NIHAI gorsel sirdir — CSS'in tahmin etmesi gereken hicbir
   sey kalmaz. Yarim genislikteki gruplar HER ZAMAN ikiser ikiser art arda
   gelecek sekilde diziye yazilir (tek kalan yarim grup varsa ya sirada bir
   sonraki yarim grup ona cekilir ya da grup TAM genislige alinir) — bu
   yuzden grid'de bos bir hucre HICBIR ZAMAN olusmaz.
   `align-items: stretch` (grid'in zaten varsayilani, burada acikca yazildi)
   ayni satirdaki iki karti ESIT YUKSEKLIGE getirir; `.field-group` ve
   `.field-group__body`'nin flex-column olmasi, kisa icerigin ALTINDA kalan
   bosluğun (kartin kendisi degil) govdenin SONUNA itilmesini saglar —
   "kart ortalanmis" degil "kart yukarida, bosluk altta" gorunumu budur. */
.field-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
}

.field-group {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1200px) {
    .field-groups {
        grid-template-columns: repeat(12, 1fr);
    }

    .field-group--half {
        grid-column: span 6;
    }

    .field-group--full {
        grid-column: span 12;
    }
}

.field-group__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
}

.field-group__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Yalnizca kv-card'i (etiket/deger listesi olan GORSEL kart) satir
   yuksekligine kadar GERCEKTEN geren kural — tablo/politika-listesi gibi
   kendi govdesi olmayan icerikler dogal yuksekliginde kalir (bkz. yukaridaki
   ust yorum: bir tablonun "kart sinirini" zorlamasi asil duzeltilen hataydi). */
.field-group__body > .kv-card {
    flex: 1;
}

/* Ayarlar->Profil kartıyla AYNI bileşen (Oturum 7b ikinci tur): etiket
   solda, değer sağda, satırlar ince ayraçla ayrılır — bkz. `.settings-row`
   paylaşımlı kuralı asağıda. `.kv-card` yalnızca dış kutuyu (kv-grid'in
   eski arka plan/border/padding'i) sağlar. */
.kv-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 20px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-pill--ok {
    background: #dcfce7;
    color: var(--success);
}

.status-pill--warn {
    background: #fef3c7;
    color: var(--warning);
}

.status-pill--bad {
    background: #fee2e2;
    color: var(--danger);
}

.status-pill--unknown {
    background: var(--border);
    color: var(--text-muted);
}

:root[data-theme="dark"] .status-pill--ok {
    background: rgba(74, 222, 128, 0.16);
}

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

:root[data-theme="dark"] .status-pill--bad {
    background: rgba(248, 113, 113, 0.16);
}

/* E-posta gonderilemedi rozeti (fix/invite-form, Kullanicilar tablosu) —
   davet/yeniden gonderme yaniti email_sent=false donerse o satirda gosterilir.
   EPHEMERAL bir istemci durumudur: sunucu "son gonderim basarili mi"yi kalici
   olarak SAKLAMAZ (bkz. users-list.js emailFailedUserIds), bu yuzden yalnizca
   o eylemin ceyaninda ve sayfa yeniden yuklenene kadar gorunur kalir. Sebep
   detayi (SMTP yaniti) istemciye hic gonderilmez (bkz. Mailer::send doc
   bloğu) — tooltip yalnizca genel bir aciklama tasir. */
.mail-warning-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    border-radius: 50%;
    background: #fef3c7;
    color: var(--warning);
    cursor: help;
    vertical-align: middle;
}

.mail-warning-badge .icon {
    width: 13px;
    height: 13px;
}

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

.license-key-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Lisanslar tablosundaki "Lisans Anahtari" hucresi (Oturum 8 duzeltmesi) —
   `.license-key-row`'u BIREBIR kullanmaz: o sinif device-detail.js'teki
   kv-grid degeri icin `flex-wrap:wrap` ile tasarlanmisti, bir <td> icinde
   ayni davranis anahtar+dugmeyi alt satira sarardi (islem dugmeleriyle
   AYNI kok neden). Burada TEK SATIR garanti edilir. */
.license-key-cell {
    white-space: nowrap;
}

.license-key-cell .btn {
    margin-left: 8px;
    vertical-align: middle;
}

.disks-table {
    margin-top: 20px;
}

.search-box {
    margin-bottom: 12px;
}

/* Duzeltme (panel 0.7.2): bu kural onceden padding/font-size/border/arka
   plan/renk gibi `.form-input`in ZATEN sagladigi her seyi TEKRAR
   tanimliyordu — ve `.search-box input` (0,1,1) `.form-input` (0,1,0)'dan
   DAHA OZGUL oldugu icin bu kopyalar kaynak sirasindan BAGIMSIZ olarak
   KAZANIYORDU (8px/13px), boylece arama kutusu ayni satirdaki
   `.form-select`den (9px/14px) FARKLI bir yukseklikte cikiyordu. Artik
   yalnizca bu sarmalayicinin kendine ozgu genislik sinirini tasir; yukseklik/
   padding/font `.form-input`den (`--control-h`) gelir. */
.search-box input {
    max-width: 320px;
}

/* ---- Uzaktan komutlar (Oturum 7 / 7b) ---------------------------------- */

/* Yeniden Baslat (kirmizi/danger), USB (kehribar/warn) ve Envanteri Yenile
   (mavi/info) dugmeleri AYNI kaliptaki uc renk ailesidir (fix/ui-batch-2):
   kendi --X/--X-bg/--X-border ucluleri + hover'da brightness(0.97) + 120ms
   gecis. Onceden yalnizca danger'da bu dolgu vardi, USB/Envanter duz `.btn`
   (notr gri) kaliyordu ve hover'da hicbir gecis animasyonu olmadan (transition
   tanimsizdi) aninda degisiyordu. */
.btn--danger,
.btn--warn,
.btn--info {
    transition: background-color 120ms ease, border-color 120ms ease, filter 120ms ease;
}

.btn--danger {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}

.btn--danger:hover {
    filter: brightness(0.97);
}

.btn--danger:disabled {
    opacity: 0.5;
    cursor: default;
}

.btn--warn {
    border-color: var(--warning-border);
    background: var(--warning-bg);
    color: var(--warning);
}

.btn--warn:hover {
    filter: brightness(0.97);
}

.btn--warn:disabled {
    opacity: 0.5;
    cursor: default;
}

.btn--info {
    border-color: var(--info-border);
    background: var(--info-bg);
    color: var(--info);
}

.btn--info:hover {
    filter: brightness(0.97);
}

.btn--info:disabled {
    opacity: 0.5;
    cursor: default;
}

.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.toolbar__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 8px;
}

.toolbar__hint {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Komut sonucu/hatasi icin gecici bildirim seridi. */
.command-notice {
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: var(--success);
}

:root[data-theme="dark"] .command-notice {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.3);
}

.command-notice--error {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger);
}

.command-section {
    margin-top: 28px;
}

.section-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
}

/* Sonuc metni uzun olabilir (msiexec ciktisi); satiri tasirmasin ama
   tamami da okunabilsin. Ozet (Oturum 7b ikinci tur) birincil satirdir,
   agent'in ham satiri altinda kucuk/gri ikincil metindir. */
.commands-table .command-result {
    max-width: 320px;
    font-size: 13px;
    word-break: break-word;
}

.command-result__raw {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    word-break: break-word;
}

.command-target {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ---- Modal (assets/js/modal.js, Oturum 7b) ----------------------------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 100;
}

.modal {
    background: var(--surface-raised);
    border-radius: 12px;
    max-width: 440px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.25);
}

.modal--danger .modal__icon {
    color: var(--danger);
    background: var(--danger-bg);
}

.modal__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.modal__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
}

.modal__body {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px;
    line-height: 1.6;
}

.modal__body strong {
    color: var(--text);
}

.modal__confirm-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    background: var(--surface);
    color: var(--text);
    margin-bottom: 16px;
}

.modal__field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text);
}

.modal__field select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal__custom-body {
    font-size: 13px;
    color: var(--text);
}

/* ---- "+ Cihaz Ekle" modalı (Oturum 7b ikinci tur) ---------------------- */

.add-device-steps {
    margin: 0 0 16px;
    padding-left: 20px;
    color: var(--text-muted);
    line-height: 1.7;
}

.install-command {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 16px;
}

.install-command code {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
}

/* ---- Agent MSI indirme + yasam dongusu isaretleri (Oturum 11) ----------- */

.agent-download {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

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

.agent-download__hash {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-bottom: 16px;
}

.agent-download__hash-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.agent-download__hash code {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
}

.agent-download__warn {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    font-size: 12px;
}

.agent-download__warn .icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 1px;
}

.add-device-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

/* "Yeni surum var" — bilgi (vurgu rengi), uyari DEGIL: otomatik guncelleme
   yoktur, eski surum calismaya devam eder. */
.badge--update {
    background: var(--chip-bg);
    color: var(--chip-text);
    white-space: nowrap;
    vertical-align: middle;
}

/* "Kaldirildi" — notr: kaldirma bilincli bir islemdir, alarm degil. */
.badge--uninstalled {
    white-space: nowrap;
    vertical-align: middle;
}

.meta-flag--muted {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

/* ---- Ayarlar sayfası (Oturum 7b) --------------------------------------- */

.settings-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
}

.settings-section__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
}

.settings-section__desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px;
}

/* Tanim listesi deseni (Oturum 7b kapanışı): etiket SABİT genişlikte,
   değer hemen yanında SOLA yaslı — önceki "justify-content: space-between"
   etiket/değeri ekranın iki ucuna yasladığı için (geniş ekranlarda) çirkin
   bir boşluk bırakıyordu. */
.settings-row, .kv-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.settings-row:first-of-type, .kv-row:first-of-type {
    border-top: none;
    padding-top: 0;
}

.settings-row__label, .kv-row__label {
    flex: 0 0 240px;
    font-size: 13px;
    font-weight: 600;
}

.settings-row__value, .kv-row__value {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 560px) {
    .settings-row, .kv-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .settings-row__label, .kv-row__label {
        flex-basis: auto;
    }
}

.settings-section--soon {
    opacity: 0.7;
}

.option-group {
    display: flex;
    gap: 8px;
}

.option-group__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 12px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

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

/* ---- Mobil ------------------------------------------------------------- */

/* ---- Mobil (<768px): sol menü sabit-konumlu bir ÇEKMECEYE dönüşür ------
   (Oturum 7b kapanışı). Önceki tasarım sidebar'ı yatay, sarmalanan bir ikon
   ızgarasına çeviriyordu (flex-direction:row + flex-wrap) — daraltma/ikon
   özellikleri eklenince bu düzen bozuk görünüyordu. Tam mobil optimizasyon
   bu oturumun kapsamı DEĞİLDİR; hedef yalnızca "bozuk görünmesin"dir. */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 240px;
        max-width: 80vw;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 200;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);
    }

    /* Masaustu daraltma durumu localStorage'dan gelebilir; mobilde
       ÇEKMECE her zaman TAM genişlikte açılır (daraltılmış ikon-only hali
       yalnızca masaustu icindir) — genişlik VE etiketler/rozetler geri
       getirilir, aksi halde localStorage'da "daraltılmış" işaretliyken
       çekmece geniş ama içeriği ikon-only kalırdı. */
    .shell.is-collapsed .sidebar {
        width: 240px;
        max-width: 80vw;
    }

    .shell.is-collapsed .sidebar__brand-label,
    .shell.is-collapsed .sidebar__link span,
    .shell.is-collapsed .sidebar__link .badge {
        display: inline;
    }

    .shell.is-mobile-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--overlay);
        z-index: 199;
    }

    .shell.is-mobile-open .sidebar-backdrop {
        display: block;
    }

    .sidebar__toggle {
        display: none;
    }

    .topbar__mobile-toggle {
        display: flex;
    }

    .topbar__tenant {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .topbar__last-login {
        display: none;
    }

    .content {
        padding: 16px;
    }

    .table {
        display: block;
        overflow-x: auto;
    }

    .user-menu__email {
        display: none;
    }
}

@media (max-width: 768px) {
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .commands-table .command-result {
        max-width: none;
    }
}

/* ---------------------------------------------------------------------------
   Cihaz detayi: "Politikalar" grubu (Oturum 7c)
   --------------------------------------------------------------------------- */
/* Envanter alanlari kv-card icinde etiket/deger ikilisidir; politika satiri
   UCLUDUR (ad+aciklama / rozet / dugme) ve bir EYLEM tasir, bu yuzden kv-card
   yerine kendi duzeni vardir. */
.policy-list {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.policy-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.policy-row:last-child {
    border-bottom: none;
}

.policy-row__name {
    font-weight: 600;
    margin-bottom: 2px;
}

.policy-row__desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.policy-row__updated {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.policy-row__action .btn {
    white-space: nowrap;
}

/* Dar ekranda uclu izgara tek sutuna duser; rozet ve dugme alt satirda yan
   yana kalir (ikisi de kisadir, alt alta almak gereksiz yer kaplardi). */
@media (max-width: 640px) {
    .policy-row {
        grid-template-columns: 1fr auto;
    }

    .policy-row__main {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------------------
   Cihaz detayi: "Tarihce" sekmesi (Oturum 7c)
   --------------------------------------------------------------------------- */
.history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

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

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

.chip--active:hover {
    color: #fff;
}

.chip .icon {
    width: 14px;
    height: 14px;
}

.history-day {
    margin-bottom: 22px;
}

.history-day__title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.history-row {
    display: grid;
    grid-template-columns: 28px 56px 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.history-row:last-child {
    border-bottom: none;
}

.history-row__icon {
    /* Ikon stroke tabanlidir ve rengini currentColor'dan alir; satir
       metninden daha sonuk durmasi kategoriyi bir "etiket" gibi okutur. */
    color: var(--text-muted);
    align-self: center;
}

.history-row__icon .icon {
    width: 18px;
    height: 18px;
    display: block;
}

.history-row__time {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.history-row__text {
    line-height: 1.5;
    word-break: break-word;
}

.history-row__hint {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.history-row__meta {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.history-more {
    display: flex;
    justify-content: center;
    padding: 4px 0 12px;
}

@media (max-width: 640px) {
    .history-row {
        grid-template-columns: 24px 1fr;
    }

    .history-row__time {
        grid-column: 2;
        order: -1;
    }

    .history-row__meta {
        grid-column: 2;
        white-space: normal;
    }
}

/* ---------------------------------------------------------------------------
   Cihaz basligindaki "USB kapali" isareti (Oturum 7c)
   --------------------------------------------------------------------------- */
.meta-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.meta-flag .icon {
    width: 13px;
    height: 13px;
}

.meta-flag--warn {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
}

/* ---------------------------------------------------------------------------
   Etiketler/departmanlar + atanmis kisi (Oturum 7f)
   --------------------------------------------------------------------------- */

.field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    resize: vertical;
}

.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.empty-state__inline {
    color: var(--text-muted);
    font-size: 13px;
    margin: 4px 0;
}

/* Rozet — cihaz listesi/detayi/tarihce filtresinde etiketi TEMSIL eder.
   Renk kullanicinin sectigi HEX'tir; metin rengi JS'te (tags.js
   readableTextColor) parlaklik hesabina gore siyah/beyaz secilir. */
.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

/* Departman rozeti (Oturum 8p) — tag-badge'in AYNI govdesi ama RENKSIZ:
   departmanin kullanicinin sectigi bir rengi yoktur (bkz. CLAUDE.md
   "Personel modülü — departman ayrımı"), bu yuzden tek, notr "chip" stili
   kullanilir (Fix/light-theme: --chip-bg/--chip-text). */
.dept-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--chip-text);
    background: var(--chip-bg);
}

.tag-badge-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Kaldirilabilir rozet — etiket acilir menusundeki (tag-dropdown.js) secili
   etiket cip'i. .tag-badge ile AYNI govde, yalnizca "x" dugmesi eklenir. */
.tag-badge--removable {
    gap: 5px;
    padding-right: 5px;
}

.tag-badge__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.tag-badge__remove:hover {
    background: rgba(255, 255, 255, 0.45);
}

/* ---------------------------------------------------------------------------
   Etiket acilir menusu (Oturum 7f — kullanici incelemesi, bkz. tag-dropdown.js)
   --------------------------------------------------------------------------- */
.tag-dropdown {
    position: relative;
    display: inline-block;
}

.tag-dropdown__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.tag-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px dashed var(--border);
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.tag-dropdown__trigger:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

.tag-dropdown__trigger .icon {
    width: 13px;
    height: 13px;
}

/* Toolbar varyanti (panel 0.7.2 duzeltmesi) — cihaz listesindeki etiket
   FILTRESI (bkz. devices-list.js `mountTagDropdown(..., {toolbar: true})`)
   `.list-toolbar` icinde arama kutusu/selectlerle AYNI satirdadir; varsayilan
   kucuk-cip gorunumu (4px/12px, kesikli cerceve) o kontrollerin yaninda
   goz ile fark edilir sekilde KISA duruyordu. Bu varyant tetikleyiciyi
   diger toolbar kontrolleriyle AYNI `--control-h`ye ve kutu (dashed DEGIL
   duz cerceve) gorunumune tasir; cihaz Genel kartindaki normal kullanim
   (`toolbar` bayragi GECILMEZ) bu kuraldan ETKILENMEZ. */
.tag-dropdown--toolbar .tag-dropdown__trigger {
    height: var(--control-h);
    padding: 0 14px;
    border-style: solid;
    border-radius: var(--radius);
    font-size: 14px;
}

.tag-dropdown__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 260px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 10px;
    z-index: 40;
}

.tag-dropdown__panel[hidden] {
    display: none;
}

.tag-dropdown__search {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
    margin-bottom: 8px;
}

.tag-dropdown__search:focus {
    outline: none;
    border-color: var(--accent);
}

.tag-dropdown__list {
    max-height: 220px;
    overflow-y: auto;
}

.tag-dropdown__option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 7px 6px;
    border: none;
    border-radius: var(--radius);
    background: none;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
}

.tag-dropdown__option:hover {
    background: var(--bg);
}

.tag-dropdown__option:disabled {
    opacity: 0.6;
    cursor: default;
}

.tag-dropdown__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--accent);
}

.tag-dropdown__check .icon {
    width: 14px;
    height: 14px;
}

.tag-dropdown__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

.tag-dropdown__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-dropdown__empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 6px;
    margin: 0;
}

.tag-dropdown__divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

.tag-dropdown__create-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: 7px 6px;
    margin-top: 4px;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
    font-size: 13px;
    font-family: inherit;
    color: var(--accent);
    cursor: pointer;
}

.tag-dropdown__create-toggle:hover {
    color: var(--accent-dark);
}

.tag-dropdown__create-toggle .icon {
    width: 14px;
    height: 14px;
}

.tag-dropdown__create {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tag-dropdown__create-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
}

.tag-dropdown__create-color {
    width: 30px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    flex: none;
}

.tag-dropdown__error {
    margin: 8px 0 0;
    padding: 6px 8px;
    font-size: 12px;
}

.device-row__assigned {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.detail-header__assigned {
    font-size: 0.6em;
    font-weight: 400;
    color: var(--text-muted);
    vertical-align: middle;
}

.tag-create {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tag-create__name {
    flex: 1 1 180px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
}

.tag-create__color {
    width: 36px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}

/* Ayarlar > Etiketler listesi — her satir ayni cip/renk mantigini
   DUZENLENEBILIR girdiler olarak tekrarlar (bkz. settings.js tagRowHtml). */
.settings-tag-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.settings-tag-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.tag-row__color {
    width: 32px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    flex: none;
}

.tag-row__name {
    flex: 1 1 auto;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 14px;
    background: transparent;
    color: var(--text);
}

.tag-row__name:hover,
.tag-row__name:focus {
    border-color: var(--border);
    background: var(--bg);
    outline: none;
}

.tag-row__count {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Cihaz listesi — "Etikete gore grupla" acikken (Oturum 7f) */
.device-group {
    margin-bottom: 22px;
}

.device-group__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
}

.device-group__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

.device-group__count {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 12px;
}

/* "Etikete gore grupla" (Oturum 7f) etiket sarmalayicisi — kutunun kendisi
   .form-check ile stillenir (Oturum 8 duzeltmesi: burada onceden yalnizca
   accent-color ile boyutlandirilmis bir native kutu vardi, kutunun
   GOVDESI/kenarligi hala tarayici varsayilanindaydi). */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

/* "Genel" karti (Oturum 7f) — sekmelerin USTUNDE, katlanabilir. */
.general-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.general-card__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
}

.general-card__chevron {
    transition: transform 0.15s ease;
}

.general-card.is-collapsed .general-card__chevron {
    transform: rotate(-90deg);
}

.general-card.is-collapsed .general-card__body {
    display: none;
}

.general-card__body {
    padding: 0 16px 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 900px) {
    .general-card__body {
        grid-template-columns: 1fr 1fr;
    }
}

.general-card__section {
    min-width: 0;
}

.general-card__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 10px;
}

.general-card__meta {
    font-size: 12px;
    color: var(--text-muted);
    margin: 6px 0 10px;
}

/* "Genel" karti — atanmis kisi bos/dolu durumu (Oturum 8p). */
.general-card__empty {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 10px;
}

.general-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* Personel secici modali (Oturum 8p) — tag-dropdown__option/panel ile AYNI
   gorsel dilde, ama kendi govdesi (modal icinde, absolute konumlanmis bir
   panel DEGIL) icin. */
.personnel-picker__list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 8px 0;
}

.personnel-picker__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: none;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
}

.personnel-picker__option:last-child {
    border-bottom: none;
}

.personnel-picker__option:hover {
    background: var(--bg);
}

.personnel-picker__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personnel-picker__empty {
    padding: 14px 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.personnel-picker__divider {
    height: 1px;
    background: var(--border);
    margin: 10px 0;
}

/* Sol menu — acilir/kapanir grup (Oturum 8p, "Network"). */
.sidebar__group {
    display: flex;
    flex-direction: column;
}

.sidebar__group-toggle {
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.sidebar__group-chevron {
    margin-left: auto;
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform 0.15s ease;
}

.sidebar__group-chevron.is-open {
    transform: rotate(180deg);
}

.sidebar__subnav {
    display: flex;
    flex-direction: column;
}

.sidebar__subnav.is-collapsed {
    display: none;
}

.sidebar__sublink {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 8px 52px;
    font-size: 13px;
    color: var(--sidebar-text);
    opacity: 0.85;
    white-space: nowrap;
}

.sidebar__sublink:hover {
    background: var(--sidebar-active-bg);
    opacity: 1;
    text-decoration: none;
}

.sidebar__sublink.is-disabled {
    cursor: default;
}

.sidebar__sublink.is-disabled:hover {
    background: none;
}

.sidebar__sublink span {
    flex: 1;
}

/* Daraltilmis menude alt ogeler/grup govdesi gizlenir — grubun varligi
   yalnizca ikonu + title tooltip'iyle anlasilir (bkz. layout.js
   navGroupHtml doc bloğu). */
.shell.is-collapsed .sidebar__subnav,
.shell.is-collapsed .sidebar__group-chevron {
    display: none;
}

/* Daraltilmis menu — ipucu + yuzen alt liste (fix/pinger-ui-polish,
   shared/sidebar.js). Ikisi de <body>'ye `position: fixed` eklenir
   (`.sidebar` icerigi kirpar). Kenar cubugu HER IKI temada koyu oldugu icin
   (bkz. CLAUDE.md "Acik tema token seti") kutular da --sidebar-* token'larini
   kullanir — menunun devami gibi gorunurler. */
.sidebar-tip,
.sidebar-flyout {
    position: fixed;
    z-index: 1200;
    background: var(--sidebar-bg);
    color: var(--sidebar-active-text);
    border: 1px solid var(--sidebar-border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.sidebar-tip {
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}

.sidebar-tip[hidden] {
    display: none;
}

.sidebar-flyout {
    min-width: 190px;
    padding: 6px 0;
}

.sidebar-flyout__title {
    padding: 4px 14px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sidebar-text);
    opacity: 0.7;
}

.sidebar-flyout__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--sidebar-text);
    white-space: nowrap;
}

.sidebar-flyout__item span {
    flex: 1;
}

.sidebar-flyout__item:hover,
.sidebar-flyout__item:focus-visible {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    text-decoration: none;
    outline: none;
}

.sidebar-flyout__item.is-active {
    color: var(--sidebar-active-text);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-flyout__item.is-disabled {
    cursor: default;
    opacity: 0.6;
}

.sidebar-flyout__item.is-disabled:hover {
    background: none;
}

.sidebar-flyout .badge {
    background: rgba(255, 255, 255, 0.12);
    color: var(--sidebar-text);
}

.shell.is-collapsed .sidebar__group-toggle.is-flyout-open {
    background: var(--sidebar-active-bg);
}

/* Dashboard sayfasi (Oturum 8p). */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
}

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

.dashboard-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    min-width: 0;
}

/* Dashboard grafikleri (Fix/light-theme) — KPI seridinin altinda, kart
   listesinin (.dashboard-grid) USTUNDE, 2fr/1fr. `.dashboard-card`in AYNI
   govdesini kullanir, yalnizca icerigi degisir. */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
}

@media (min-width: 900px) {
    .charts-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.online-trend {
    display: block;
    width: 100%;
    height: auto;
}

.online-trend__grid {
    stroke: var(--divider);
    stroke-width: 1;
}

.online-trend__fill {
    fill: var(--chart-fill);
    stroke: none;
}

.online-trend__line {
    fill: none;
    stroke: var(--chart-line);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.online-trend__dot {
    fill: var(--surface);
    stroke: var(--chart-line);
    stroke-width: 2;
}

.online-trend__label {
    font-size: 11px;
    fill: var(--text-muted);
}

.status-donut {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.status-donut__svg {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.status-donut__track {
    fill: none;
    stroke: var(--bg);
}

.status-donut__arc {
    fill: none;
}

.status-donut__arc--ok {
    stroke: var(--success);
}

.status-donut__arc--warn {
    stroke: var(--warning);
}

.status-donut__arc--bad {
    stroke: var(--danger);
}

.status-donut__total {
    font-size: 26px;
    font-weight: 700;
    fill: var(--text);
}

.status-donut__total-label {
    font-size: 12px;
    fill: var(--text-muted);
}

.status-donut__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 120px;
}

.status-donut__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.status-donut__legend-item strong {
    margin-left: auto;
    color: var(--text);
    font-weight: 700;
}

.status-donut__swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-donut__swatch--ok {
    background: var(--success);
}

.status-donut__swatch--warn {
    background: var(--warning);
}

.status-donut__swatch--bad {
    background: var(--danger);
}

.dashboard-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px;
}

.dashboard-card__empty {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.dashboard-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dashboard-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
}

.dashboard-card__row:last-child {
    border-bottom: none;
}

/* Duzeltme (fix/ui-batch): dashboard listeleri artik tablolarla AYNI zebra +
   hover kalibini kullanir (bkz. ".table tbody tr:nth-child(even)/:hover td")
   — cift satir --zebra zemini, hover --row-hover + sol 3px vurgu. Satirlar
   `<li>` oldugu icin (tabloda oldugu gibi coklu `<td>` yok) vurgu dogrudan
   satirin kendisine uygulanabilir, ayri bir "ilk hucre" kuralina gerek
   yoktur. `margin: 0 -10px` + genisletilmis yatay padding, zebra zemininin
   kartin ic kenarlarina kadar uzanmasini saglar (aksi halde --zebra/--row-hover
   yalniz metnin kapladigi dar alanda gorunurdu). */
.dashboard-card__row:nth-child(even) {
    background: var(--zebra);
}

.dashboard-card__row:hover {
    background: var(--row-hover);
    box-shadow: inset 3px 0 0 var(--accent);
}

.dashboard-card__row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.dashboard-card__device {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.dashboard-card__desc {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-card__time {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    flex: none;
}

/* Departman secici + "yeni departman" hizli ekleme dugmesi (Oturum 8p) —
   cihaz Genel karti ve personel formunda AYNI govde (bkz. device-general.js/
   personnel-list.js). Asagidaki acilir satir icin .tag-create YENIDEN
   kullanilir (Oturum 7f'deki etiket hizli olusturma formuyla AYNI govde). */
.dept-picker {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dept-picker .form-select {
    flex: 1;
}

.dept-picker .btn {
    flex: none;
    padding: 6px 8px;
}


/* =====================================================================
   Yetki devri (Oturum 8a) — musteri degistirici, baglam seridi, "Tum
   Musterilerim" kartlari, Ayarlar → Yetkili Kuruluslar.
   ===================================================================== */

/* Musteri degistirici POPOVER'dir (disari tiklayinca kapanir) — kullanici
   menusuyle ayni gorsel dil. */
.tenant-switcher {
    position: relative;
    display: inline-block;
}

.tenant-switcher__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 10px;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tenant-switcher__trigger:hover {
    border-color: var(--accent);
}

.tenant-switcher__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    max-width: calc(100vw - 32px);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 8px;
    z-index: 40;
    font-weight: 400;
}

.tenant-switcher__panel[hidden] {
    display: none;
}

.tenant-switcher__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 8px 8px 4px;
}

.tenant-switcher__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: 0;
    border-radius: 6px;
    padding: 8px;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tenant-switcher__item:hover {
    background: var(--bg);
}

.tenant-switcher__item.is-active {
    font-weight: 600;
    color: var(--accent);
}

.tenant-switcher__meta {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.tenant-switcher__all {
    display: block;
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding: 8px 8px 2px;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}

.acting-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 24px;
    background: var(--acting-bg);
    border-bottom: 1px solid var(--acting-border);
    color: var(--acting-text);
    font-size: 14px;
    font-weight: 500;
}

.acting-banner .icon {
    flex-shrink: 0;
}

.acting-banner__exit {
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .acting-banner {
        padding: 8px 16px;
        flex-wrap: wrap;
    }
}

.scope-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.scope-badge--view {
    background: var(--scope-view-bg);
    color: var(--scope-view-text);
}

.scope-badge--manage {
    background: var(--scope-manage-bg);
    color: var(--scope-manage-text);
}

.page-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.customer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.customer-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.customer-card:hover,
.customer-card.is-active {
    border-color: var(--accent);
}

.customer-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.customer-card__name {
    font-weight: 600;
    font-size: 16px;
}

.customer-card__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.customer-card__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.customer-card__value {
    font-size: 20px;
    font-weight: 700;
}

.customer-card__value--bad {
    color: var(--danger);
}

.customer-card__value--warn {
    color: var(--warning);
}

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

.customer-card__open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--accent);
}

.settings-subtitle {
    font-size: 14px;
    font-weight: 600;
    margin: 20px 0 8px;
}

.settings-section__note {
    font-size: 13px;
    color: var(--text-muted);
    border-left: 3px solid var(--border);
    padding-left: 10px;
    margin: 0 0 14px;
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

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

.empty-state--compact {
    padding: 12px 0;
}

/* Onay bekleyen yetki istekleri (8a kapanisi, panel 0.8.1) — kirmizi sayi
   rozeti (Ayarlar menu ogesi + avatar kosesi) ve Dashboard'daki uyari karti.
   Rozet --danger kullanir: her iki temada da tanimli token. */
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.user-menu__avatar {
    position: relative;
}

.user-menu__avatar-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    border: 2px solid var(--surface);
}

.user-menu__item-badge {
    margin-left: auto;
}

.notice-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--acting-bg);
    border: 1px solid var(--acting-border);
    border-radius: var(--radius);
    color: var(--acting-text);
    font-weight: 600;
    text-decoration: none;
}

.notice-card:hover {
    border-color: var(--danger);
}

.notice-card__text {
    flex: 1;
}

/* =========================================================================
   Oturum 8c (panel 0.9.0) — istege bagli iki adimli dogrulama, deneme
   bitti seridi, giris ekrani surum satiri. admin/ ve reseller/ app.css
   kopyalarinda da AYNI blok vardir (admin.css/reseller.css'teki eski TOTP
   kurallari bununla ayni degerlerdedir).
   ========================================================================= */

.login-step__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
}

.login-step__desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.login-step__link {
    display: block;
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    margin-top: 12px;
    text-decoration: none;
    text-align: left;
}

/* QR her iki temada da beyaz zemin uzerinde durur (authenticator
   uygulamalari koyu zeminli QR'i okuyamayabilir). */
.totp-qr {
    display: flex;
    justify-content: center;
    padding: 12px;
    margin: 0 auto 12px;
    width: fit-content;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.totp-qr svg {
    display: block;
    width: 200px;
    height: 200px;
}

.totp-secret {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    word-break: break-all;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    margin-bottom: 16px;
    user-select: all;
}

.backup-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 16px;
    padding: 0;
    list-style: none;
}

.backup-codes li {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 15px;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    user-select: all;
}

.code-input {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 20px;
    letter-spacing: 0.3em;
    text-align: center;
}

/* Giris ekranlarinin altindaki surum satiri: "<modul> v<x> · api v<y>".
   Form bolmesi dikey dizilir ki satir kartin ALTINDA dursun (ust kontroller
   zaten mutlak konumludur). */
.login-page__form-pane {
    flex-direction: column;
}

.login-version {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* Dashboard: deneme bitti, Free'ye gecildi seridi. */
.trial-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--radius);
    background: var(--acting-bg);
    border: 1px solid var(--acting-border);
    color: var(--acting-text);
    font-size: 13px;
    text-decoration: none;
}

.trial-strip > span {
    flex: 1 1 auto;
}

.trial-strip .icon {
    flex: 0 0 auto;
}


/* =============================================================================
   Raporlar (Oturum 9r) — shared/report-ui.js. Yalniz tema token'lari; tablo
   zebra/hover/sol vurgu kurallari mevcut .table'dan gelir. Iki sutun: sol
   sablon listesi, sag filtre + tablo. 5+ sutunlu rapor tablosu tam genislik
   ve yatay kaydirilabilir (kayan tek bolge .content degil .rpt-table-wrap).
   ============================================================================= */
.rpt-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.rpt-nav {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    position: sticky;
    top: 0;
}

.rpt-nav__group + .rpt-nav__group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--divider);
}

.rpt-nav__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.rpt-nav__count {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.rpt-nav__item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 7px 8px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 120ms ease;
}

.rpt-nav__item:hover {
    background: var(--row-hover);
}

.rpt-nav__item.is-active,
.rpt-nav__saved.is-active > .rpt-nav__item {
    background: var(--chip-bg);
    color: var(--chip-text);
    font-weight: 600;
}

.rpt-nav__saved {
    display: flex;
    align-items: center;
    gap: 2px;
}

.rpt-nav__empty {
    margin: 4px 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Kuyruktaki buyuk PDF'ler (feature/notifications) — "Hazirlanan dosyalar". */
.rpt-file {
    padding: 6px 8px;
    border-radius: 6px;
}

.rpt-file + .rpt-file {
    border-top: 1px solid var(--divider, var(--border));
}

.rpt-file__name {
    font-size: 13px;
    word-break: break-word;
}

.rpt-file__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.rpt-icon-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 6px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 0;
}

.rpt-icon-btn:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

.rpt-main {
    min-width: 0;
}

.rpt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.rpt-title {
    margin: 0;
    font-size: 18px;
}

.rpt-sub,
.rpt-desc {
    font-size: 12px;
    color: var(--text-muted);
}

.rpt-desc,
.rpt-note {
    margin: 0 0 10px;
}

.rpt-note {
    font-size: 12px;
    color: var(--info);
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: var(--radius);
    padding: 8px 12px;
}

.rpt-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rpt-popover {
    position: relative;
}

.rpt-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 200px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    padding: 6px;
}

.rpt-menu__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.rpt-menu__item:hover {
    background: var(--row-hover);
}

.rpt-menu__item.is-locked {
    color: var(--text-muted);
}

.rpt-menu__check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
}

.rpt-menu__check.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.rpt-menu__warn {
    margin: 2px 10px 6px;
    font-size: 11px;
    color: var(--warning);
}

.rpt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.rpt-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
    min-width: 150px;
}

.rpt-filter .form-input,
.rpt-filter .form-select {
    width: 100%;
}

.rpt-filter__num {
    max-width: 120px;
}

.rpt-filter--check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--text);
    min-width: 0;
}

.rpt-filter--multi {
    border: 0;
    padding: 0;
    margin: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.rpt-filter--multi legend {
    float: left;
    margin-right: 8px;
    padding: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.rpt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text);
    background: var(--chip-bg);
    border-radius: 999px;
    padding: 3px 10px;
    cursor: pointer;
}

.rpt-msg {
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
}

.rpt-msg--error {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.rpt-msg--warn {
    color: var(--warning);
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

.rpt-msg--info {
    color: var(--info);
    background: var(--info-bg);
    border-color: var(--info-border);
}

.rpt-msg--ok {
    color: var(--success);
}

.rpt-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
}

.rpt-table {
    min-width: 100%;
}

.rpt-groupbar {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    margin: 0 0 6px;
    font-size: 13px;
}

.rpt-link {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--link);
    cursor: pointer;
}

.rpt-link:hover {
    text-decoration: underline;
}

/* Gruplu tablo: cihaz basligi satiri (daraltilabilir). */
.table tbody tr.rpt-group td {
    background: var(--table-head-bg);
    border-top: 1px solid var(--border);
    padding: 0;
}

.rpt-group__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 8px 12px;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.rpt-group__chev {
    width: 1em;
    color: var(--text-muted);
}

.rpt-th {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.rpt-th:hover {
    color: var(--text);
}

.rpt-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.rpt-table tbody tr.rpt-row--flag td {
    background: var(--danger-bg);
    color: var(--danger);
}

.rpt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.rpt-footer__pager {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rpt-size {
    width: auto;
}

@media (max-width: 900px) {
    .rpt-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .rpt-nav {
        position: static;
    }
}