/* admin-modern.css — Admin paneli için modern UX katmanı.
 *
 * Mevcut Bootstrap 3 + style.css'in ÜSTÜNE bindirilir; existing class'ları
 * override etmez (override yerine yeni utility class'lar). Eski view'lar
 * dokunulmadan çalışmaya devam eder.
 *
 * Yüklenir: interface/admin/view/head.php (admin-ux.js ile birlikte).
 */

:root {
    /* Renk kaynağı artık cdn/assets/css/tokens.css (kalem 9.1) — bu adlar
     * geriye dönük uyumluluk için kalır, değerleri token köprüsüdür, literal
     * hex DEĞİL. tokens.css'te RGB üçlüsü olarak yaşayan token'lar (bg-page,
     * bg-surface, border-default, brand-hover) rgb() ile sarılır; diğerleri
     * (eski hex blok, tokens.css ~satır 150+) zaten tam hex döner. */
    --adm-primary:        rgb(var(--brand-primary-rgb));
    --adm-primary-hover:  rgb(var(--brand-hover));
    --adm-bg:             rgb(var(--bg-page));
    --adm-card:           rgb(var(--bg-surface));
    --adm-text:           rgb(var(--text-primary));
    --adm-muted:          rgb(var(--text-muted-rgb));
    --adm-border:         rgb(var(--border-default));
    --adm-success:        rgb(var(--success-text));
    --adm-warn:           rgb(var(--warning-text));
    --adm-error:          rgb(var(--danger-text));
    --adm-radius:         8px;
    --adm-shadow-sm:      0 1px 3px rgba(0, 0, 0, .05);
    --adm-shadow-md:      0 4px 12px rgba(0, 0, 0, .08);
    /* Dokunma hedefi eşikleri — tek yerde (aşağıdaki "Dokunma hedefi" bölümü
     * bunları okur, sayı gömmez). Renk değil ölçü oldukları için dark blokta
     * override edilmezler. */
    --adm-tap:            44px;   /* WCAG 2.5.5 (AAA) + projenin el kabul kapısı */
    --adm-tap-aa:         24px;   /* WCAG 2.5.8 (AA) asgarisi — her işaretleyicide */
}

/* [data-theme="dark"] --adm-bg/--adm-card/--adm-text/--adm-muted/--adm-border
 * override'ı KALDIRILDI (kalem 9.1): yukarıdaki tanımlar artık tokens.css
 * değişkenlerine işaret ediyor ve o dosya kendi [data-theme="dark"] karşılığını
 * zaten taşıyor — burada tekrar sabit hex yazmak eski (yanlış) değeri geri
 * getirirdi. */

/* ===== Kök yazı boyutu (2026-10-01, i-20261001-0011) =====
 * Bootstrap 3 `html { font-size: 62.5% }` (bootstrap.css:298) kökü 10 px
 * yapıyordu. tailwind.min.css'in rem ölçüleri 16 px kök varsayar: admin'de
 * `text-sm` 8,75 px, `text-xs` 7,5 px, `h-11` 44 yerine 27,5 px çıkıyordu
 * (Playwright, 21 ekran × 2 genişlik; giriş düğmesi dahil).
 * Bootstrap 3, style.css ve bu dosya rem KULLANMAZ (px) — değişen yalnız
 * Tailwind'li ekranlar ve boxup.css'in Bootstrap-5 modal kuralları; o modal
 * da 16 px kök için yazılmıştı. Satıcı dosyasına dokunulmaz: bu dosya
 * bootstrap.css'ten SONRA yüklenir, aynı özgüllükte kazanır. `100%` sabit
 * 16 px değil — tarayıcıda yazı boyutunu büyüten kullanıcıya uyar. */
html { font-size: 100%; }

/* ===== Modern dashboard ===== */
.adm-dashboard {
    padding: 24px;
    background: var(--adm-bg);
    min-height: calc(100vh - 60px);
}
.adm-page-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.adm-page-head h1 {
    margin: 0; font-size: 22px; color: var(--adm-text); font-weight: 600;
}
.adm-page-head .adm-breadcrumb {
    color: var(--adm-muted); font-size: 13px;
}
.adm-page-head .adm-breadcrumb a { color: var(--adm-muted); text-decoration: none; }
.adm-page-head .adm-breadcrumb a:hover { color: var(--adm-primary); }

/* Stats grid */
.adm-stats {
    display: grid; gap: 14px; margin-bottom: 24px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.adm-stat-card {
    background: var(--adm-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    padding: 18px;
    box-shadow: var(--adm-shadow-sm);
    transition: transform .15s, box-shadow .15s;
}
.adm-stat-card:hover { transform: translateY(-2px); box-shadow: var(--adm-shadow-md); }
.adm-stat-card .label {
    color: var(--adm-muted); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.adm-stat-card .value {
    color: var(--adm-text); font-size: 28px; font-weight: 700; line-height: 1.1;
}
.adm-stat-card .delta {
    margin-top: 6px; font-size: 12px; font-weight: 600;
}
.adm-stat-card .delta.up   { color: var(--adm-success); }
.adm-stat-card .delta.down { color: var(--adm-error); }
.adm-stat-card .icon {
    float: right; font-size: 28px; opacity: .25; color: var(--adm-primary);
}

/* Quick actions grid */
.adm-quick-actions {
    display: grid; gap: 12px; margin-bottom: 24px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.adm-action-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--adm-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    text-decoration: none;
    color: var(--adm-text);
    transition: border-color .15s, transform .15s;
}
.adm-action-card:hover {
    border-color: var(--adm-primary);
    transform: translateY(-1px);
    text-decoration: none; color: var(--adm-text);
}
.adm-action-card .ico {
    width: 36px; height: 36px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(79, 70, 229, .1); color: var(--adm-primary);
    font-size: 16px; flex-shrink: 0;
}
.adm-action-card .body { flex: 1; min-width: 0; }
.adm-action-card .ttl { font-weight: 600; font-size: 14px; margin: 0; }
.adm-action-card .sub { font-size: 12px; color: var(--adm-muted); margin: 2px 0 0; }

/* Recent activity panel */
.adm-panel {
    background: var(--adm-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    box-shadow: var(--adm-shadow-sm);
    margin-bottom: 18px;
}
.adm-panel-head {
    padding: 14px 18px; border-bottom: 1px solid var(--adm-border);
    display: flex; justify-content: space-between; align-items: center;
}
.adm-panel-head h2 {
    margin: 0; font-size: 15px; font-weight: 600; color: var(--adm-text);
}
.adm-panel-head .more { font-size: 13px; color: var(--adm-primary); text-decoration: none; }
.adm-panel-body { padding: 4px 0; }
.adm-activity-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--adm-border);
}
.adm-activity-item:last-child { border-bottom: 0; }
.adm-activity-item .dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--adm-success); flex-shrink: 0;
}
.adm-activity-item .dot.warn { background: var(--adm-warn); }
.adm-activity-item .dot.error { background: var(--adm-error); }
.adm-activity-item .body { flex: 1; min-width: 0; }
.adm-activity-item .when { font-size: 12px; color: var(--adm-muted); flex-shrink: 0; }
.adm-activity-item code {
    font-family: ui-monospace, SF Mono, monospace;
    font-size: 12px; padding: 1px 6px;
    background: var(--adm-bg); color: var(--adm-text);
    border-radius: 4px;
}

/* ===== Toast notification system ===== */
.adm-toast-stack {
    position: fixed; right: 20px; bottom: 20px; z-index: 9000;
    display: flex; flex-direction: column-reverse; gap: 10px; max-width: 380px;
}
.adm-toast {
    background: var(--adm-card);
    border: 1px solid var(--adm-border);
    border-left: 4px solid var(--adm-primary);
    border-radius: var(--adm-radius);
    box-shadow: var(--adm-shadow-md);
    padding: 12px 16px;
    display: flex; gap: 10px; align-items: flex-start;
    animation: adm-toast-in .25s ease-out;
    color: var(--adm-text);
}
.adm-toast.success { border-left-color: var(--adm-success); }
.adm-toast.warn    { border-left-color: var(--adm-warn); }
.adm-toast.error   { border-left-color: var(--adm-error); }
.adm-toast .ttl   { font-weight: 600; font-size: 14px; margin: 0 0 2px; }
.adm-toast .msg   { font-size: 13px; color: var(--adm-muted); margin: 0; }
.adm-toast .close {
    background: none; border: 0; color: var(--adm-muted); cursor: pointer;
    font-size: 18px; padding: 0 4px; line-height: 1;
}
@keyframes adm-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Cmd+K command palette ===== */
.adm-cmdk-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 9100;
    display: none; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.adm-cmdk-backdrop.open { display: flex; }
.adm-cmdk-panel {
    background: var(--adm-card); border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .25);
    width: 100%; max-width: 540px; overflow: hidden;
}
.adm-cmdk-panel input {
    width: 100%; padding: 16px 20px; border: 0;
    font-size: 16px; outline: none;
    background: transparent; color: var(--adm-text);
    border-bottom: 1px solid var(--adm-border);
}
.adm-cmdk-panel input::placeholder { color: var(--adm-muted); }
.adm-cmdk-list { max-height: 60vh; overflow-y: auto; padding: 6px 0; }
.adm-cmdk-item {
    padding: 10px 20px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    color: var(--adm-text); text-decoration: none;
    border-left: 3px solid transparent;
}
.adm-cmdk-item:hover, .adm-cmdk-item.selected {
    background: var(--adm-bg); border-left-color: var(--adm-primary);
}
.adm-cmdk-item .label { display: flex; align-items: center; gap: 10px; }
.adm-cmdk-item .group {
    font-size: 11px; color: var(--adm-muted);
    background: var(--adm-bg); padding: 2px 8px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.adm-cmdk-empty { padding: 24px; text-align: center; color: var(--adm-muted); font-size: 14px; }
.adm-cmdk-foot {
    padding: 8px 20px; border-top: 1px solid var(--adm-border);
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 11px; color: var(--adm-muted);
}
.adm-cmdk-foot kbd {
    background: var(--adm-bg); border: 1px solid var(--adm-border);
    border-radius: 4px; padding: 1px 6px; font-family: inherit; font-size: 11px;
}

/* ===== Top bar enhancements ===== */
.adm-topbar-extra {
    /* `float`/`padding` adminShellOpen.php'de satır içi stildi (i-20261007-0002-ap):
     * satır içi stil medya sorgusuyla ezilemez; dar ekran kuralı aşağıda. */
    float: right; padding: 10px 0;
    display: flex; align-items: center; gap: 12px; margin-right: 16px;
}
.adm-topbar-search {
    position: relative;
}
.adm-topbar-search input {
    width: 240px; padding: 7px 12px 7px 32px;
    border: 1px solid var(--adm-border); border-radius: 6px;
    font-size: 13px; outline: none; background: var(--adm-card); color: var(--adm-text);
}
.adm-topbar-search input:focus { border-color: var(--adm-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.adm-topbar-search::before {
    content: "⌕"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--adm-muted); font-size: 14px;
}
.adm-topbar-search .kbd-hint {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: var(--adm-bg); border: 1px solid var(--adm-border); border-radius: 4px;
    padding: 1px 5px; font-size: 10px; color: var(--adm-muted);
}
.adm-icon-btn {
    background: transparent; border: 0; cursor: pointer; padding: 8px; border-radius: 6px;
    color: var(--adm-muted); position: relative; font-size: 16px;
}
.adm-icon-btn:hover { background: var(--adm-bg); color: var(--adm-text); }
.adm-icon-btn .badge {
    position: absolute; top: 4px; right: 4px;
    background: var(--adm-error); color: rgba(255,255,255,1);
    font-size: 9px; font-weight: 700; min-width: 14px; height: 14px;
    padding: 0 3px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ===== Yönetici zili (#200 / A16, 2026-09-23) =====
 * `<details>` tabanlı — panelde jQuery/Bootstrap dropdown'ı `ul.nav` ister,
 * bu kap flex bir `div`; JS eklenmedi. Rozet için ayrı sınıf AÇILMADI,
 * yukarıdaki `.adm-icon-btn .badge` zaten tam bu iş için vardı. */
.adm-bell { position: relative; }
.adm-bell > summary { list-style: none; font-size: 13px; }
.adm-bell > summary::-webkit-details-marker { display: none; }
.adm-bell > summary:focus-visible { outline: 2px solid var(--adm-primary); outline-offset: 1px; }
.adm-bell-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 1050;
    width: 320px; max-height: 60vh; overflow-y: auto;
    background: var(--adm-card); border: 1px solid var(--adm-border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.adm-bell-item {
    display: block; padding: 10px 12px; border-bottom: 1px solid var(--adm-border);
    color: var(--adm-text); text-decoration: none; font-size: 13px;
}
.adm-bell-item:last-child { border-bottom: 0; }
.adm-bell-item:hover, .adm-bell-item:focus-visible { background: var(--adm-bg); color: var(--adm-text); }
.adm-bell-item strong { display: block; font-weight: 600; margin-bottom: 2px; }
.adm-bell-item span { display: block; color: var(--adm-muted); font-size: 12px; }
.adm-bell-empty { padding: 12px; color: var(--adm-muted); font-size: 12px; text-align: center; }

/* ===== Üst çubuk — dar ekran (i-20261007-0002-ap, N-4) =====
 *
 * ÖLÇÜLEN (375 px, Playwright): `.adm-topbar-extra` 400 px genişliğindeydi (240 px
 * arama + zil + iki düğme + boşluklar) ve `float:right` olduğundan SOLDAN taşıyordu —
 * arama kutusu x = −41'de başlıyor, yer tutucu "ızlı ara" diye kesiliyordu. Zil menüsü
 * (320 px) zile sağdan hizalı olduğu için de 36 px ekran dışında kalıyordu.
 *
 * ÇÖZÜM: satır tam genişlik (`float:none`), arama kutusu kalan yeri alır
 * (`flex:1 1 9rem; min-width:0`), sığmayan öğe alt satıra sarılır (`flex-wrap`; 320 px'te
 * taşma yok). ⌘K rozeti klavye ipucudur — dokunmatikte anlamsız ve yer kaplar, gizlenir.
 * Zil menüsü zile değil SATIRA hizalanır (`.adm-bell` statik, satır `relative`).
 * 768 px ve üstü DEĞİŞMEZ. */
@media (max-width: 767px) {
    .adm-topbar-extra { float: none; flex-wrap: wrap; gap: 8px; margin: 0; padding: 8px 12px; position: relative; }
    .adm-topbar-search { flex: 1 1 9rem; min-width: 0; }
    .adm-topbar-search input { width: 100%; }
    .adm-topbar-search .kbd-hint { display: none; }
    .adm-bell { position: static; }
    .adm-bell-menu { left: 12px; right: 12px; width: auto; }
}
/* Dokunma hedefi: üst çubuk denetimleri 25×40 / 73×36'ydı. Eşik "Dokunma hedefi"
 * bölümündekiyle AYNI sorgu (`pointer: coarse` + dar viewport). */
@media (pointer: coarse), (max-width: 768px) {
    .adm-topbar-search input { min-height: var(--adm-tap); }
    .adm-icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: var(--adm-tap); min-height: var(--adm-tap);
    }
}

/* ===== Sidebar search ===== */
.adm-sidebar-search {
    padding: 10px 14px;
}
.adm-sidebar-search input {
    width: 100%; padding: 6px 10px; border: 1px solid rgba(255,255,255,.15);
    border-radius: 4px; background: rgba(0,0,0,.2); color: rgba(255,255,255,.85);
    font-size: 12px; outline: none;
}
.adm-sidebar-search input::placeholder { color: rgba(255,255,255,.5); }
/* Kenar çubuğu arama kutusu: `outline: none` sıfırlaması klavye odağını da
 * siliyordu (tur yeniden ölçümü 2026-09-16: outlineStyle none, boxShadow none).
 * Koyu zeminde marka rengi yerine kutunun kendi açık kenarlığı kalınlaştırılır. */
.adm-sidebar-search input:focus-visible {
    outline: 2px solid rgba(255,255,255,.85);
    outline-offset: 1px;
}

/* ===== Mobil menü düğmesi (kalem 9.1) — `_icon.php` kayıt defterinde
 * hamburger/bars karşılığı yok (ORTAK dosya, genişletilmedi); FontAwesome
 * `fa fa-bars` yerine üç `<span>` çubuğu, token dışı ama sabit hex değil
 * (sidebar zemini `style.css`te hâlâ tokenize edilmemiş sabit mor). ===== */
.adm-hamburger {
    display: none; flex-direction: column; justify-content: center; align-items: center;
    gap: 4px; width: var(--adm-tap); height: var(--adm-tap); background: rgba(0,0,0,.15);
    border: 0; border-radius: 3px; position: absolute; right: 15px; top: 14px; cursor: pointer;
}
.adm-hamburger span { display: block; width: 18px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.9); }
@media (max-width: 767px) { .adm-hamburger { display: flex; } }

/* ===== Sol menü sayaç rozeti (kalem 9.1) — yalnız `items[].badge` doluysa
 * basılır (admin_nav.php şemasında henüz alan yok, uydurma sayı yok). ===== */
.adm-nav-badge {
    margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 999px;
    background: rgb(var(--brand-soft)); color: rgb(var(--brand-primary-rgb)); font-weight: 600;
}

/* ===== Sidebar item hidden by search filter ===== */
.cl-vnavigation li.adm-sb-hidden { display: none !important; }

/* ===== Keyboard shortcut overlay ===== */
.adm-shortcut-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9050;
    display: none; align-items: center; justify-content: center;
}
.adm-shortcut-modal.open { display: flex; }
.adm-shortcut-card {
    background: var(--adm-card); border-radius: var(--adm-radius);
    padding: 24px; max-width: 480px; width: 90%;
    box-shadow: var(--adm-shadow-md);
}
.adm-shortcut-card h2 {
    margin: 0 0 16px; font-size: 17px; color: var(--adm-text);
}
.adm-shortcut-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.adm-shortcut-card dt { color: var(--adm-text); }
.adm-shortcut-card dt kbd {
    background: var(--adm-bg); border: 1px solid var(--adm-border);
    border-radius: 4px; padding: 2px 8px; font-family: ui-monospace, monospace; font-size: 12px;
}
.adm-shortcut-card dd { color: var(--adm-muted); margin: 0; font-size: 13px; }
.adm-shortcut-card .close {
    margin-top: 18px; padding: 7px 16px; background: var(--adm-primary);
    color: rgb(var(--on-brand)); border: 0; border-radius: 6px; cursor: pointer; font-size: 13px;
    width: 100%; font-weight: 600;
}

/* ===== Dark mode top-bar kontrast ===== */
[data-theme="dark"] #cl-wrapper { background: var(--adm-bg) !important; }
[data-theme="dark"] #pcont { background: var(--adm-bg) !important; }
/* 2026-08-12 — ölçülen iki eksik halka. `#cl-wrapper`/`#pcont` koyuydu ama
 * ARALARINDAKİ `.cl-mcont` ve en alttaki `body` `rgb(240,240,240)` kalmıştı:
 * kartlar koyu, kartların arası beyaz — sayfa şeritli görünüyordu. `body`
 * ayrıca içerik viewport'tan kısa olduğunda ve overscroll'da doğrudan
 * görünüyor. (Ata zinciri tarayıcıda ölçüldü, tahmin değil.) */
[data-theme="dark"] .cl-mcont { background: var(--adm-bg) !important; }
[data-theme="dark"] body { background: var(--adm-bg); }
[data-theme="dark"] #head-nav { background: var(--adm-card) !important; border-color: var(--adm-border) !important; }
[data-theme="dark"] .block-flat { background: var(--adm-card) !important; color: var(--adm-text) !important; }
[data-theme="dark"] .block-flat .header h3,
[data-theme="dark"] .block-flat .content { color: var(--adm-text); }
[data-theme="dark"] .panel, [data-theme="dark"] .panel-default { background: var(--adm-card) !important; }
[data-theme="dark"] .table { color: var(--adm-text); }
[data-theme="dark"] .form-control { background: var(--adm-bg); color: var(--adm-text); border-color: var(--adm-border); }

/* ===== Dark mode TABLO satır zemini — 2026-08-12
 *
 * ÖLÇÜLEN KUSUR: `/integrationSecrets` (40 anahtarlık API-anahtar ekranı) dark
 * modda satırlarının YARISINDA okunmuyordu. Hesaplanan stiller:
 *     zemin  rgb(248,248,248)   ← style.css:4906  `table tr:nth-child(2n)`
 *     metin  rgb(243,244,246)   ← yukarıdaki `.table { color: var(--adm-text) }`
 * yani kontrast ≈ 1:1. Sebep, yukarıdaki satırın YARIM olması: dark blok metin
 * rengini devraldı, zemini devralmadı. `style.css`'in kuralı ÇIPLAK bir eleman
 * seçicisi (`table tr:…`) olduğu için ekrana özel değil — admin'deki HER tablo
 * aynı durumda; bu yüzden düzeltme de ekrana özel değil.
 *
 * NEDEN `style.css` DÜZELTİLMEDİ: orası açık temanın (Bootstrap 3 tema paketi)
 * dosyası; oraya dokunmak açık temayı da değiştirirdi. Dark override'ların SSoT'u
 * bu dosya (dosya başlığı: "mevcut class'ları override etmez" — dark bloğu bu
 * kuralın bilinçli istisnası, `#cl-wrapper`/`.block-flat` satırları emsal).
 *
 * NEDEN `!important` YOK: `[data-theme="dark"] table tr:nth-child(2n)` özgüllüğü
 * (0,2,2) > `table tr:nth-child(2n)` (0,1,2); ayrıca bu dosya head.php'de
 * style.css'ten SONRA yükleniyor. İki sebep de tek başına yeterli.
 *
 * KAPSAM (aynı kusur sınıfının tamamı — Kural 20 impact analysis):
 *   1. `table tr:nth-child(2n)`  #f8f8f8  → style.css:4906  (raporlanan kusur)
 *   2. `.table-striped`          #f9f9f9  → bootstrap.css:1471
 *   3. `.table-hover  tr:hover`  #f5f5f5  → bootstrap.css:1476 — bu ekranın
 *      tablosu `table-hover` taşıyor, yani HER satır fareyle üzerine gelindiğinde
 *      aynı 1:1 kontrasta düşüyordu. Raporda yok çünkü hover denenmemişti.
 *   4. `table thead th span { color:#333 }` → style.css:4868 — koyu kart üstünde
 *      koyu başlık metni; aynı kusurun başlık satırındaki hâli.
 */
[data-theme="dark"] {
    /* --adm-card/--adm-text artık tokens.css köprüsü (kalem 9.1) — sabit hex
     * yerine yüzey token'ı: --bg-raised card'dan (--bg-surface) bir adım açık
     * (ayırt edilebilir), --border-strong-rgb ondan bir adım daha açık (hover). */
    --adm-row-alt: rgb(var(--bg-raised));
    --adm-row-hover: rgb(var(--border-strong-rgb));
}
[data-theme="dark"] table tr:nth-child(2n),
[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > td,
[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > th { background: var(--adm-row-alt); }

[data-theme="dark"] .table-hover > tbody > tr:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > th { background: var(--adm-row-hover); }

[data-theme="dark"] table thead th span { color: var(--adm-text); }
[data-theme="dark"] table td,
[data-theme="dark"] table thead th { border-color: var(--adm-border); }

/* ===== Satır eylemi + süzgeç denetimi — dokunma hedefi (2026-08-12; i-20261007-0002-ba, N-8) =====
 *
 * ÖLÇÜLEN (375 px, yan menüdeki 67 sayfanın 47'si): satır eylemleri 24–26 px
 * ("Detay" 53×26, "Düzenle" 64×24, "Sil" 35×26), süzgeç alanı 297×34, "Filtrele" 74×36.
 * Önceki kural `table td .btn.btn-xs` arıyordu; `admActionButton()` düğmeyi
 * `admBtnClassCss()` ile token sınıfına çevirdiğinden (`.btn` yok) kural hiçbir
 * düğmeye uğramıyordu ve kaldırıldı. Düğme artık sabit `adm-row-act` işaretini taşır.
 *
 * NEDEN İKİ KADEME, NEDEN HER YERDE 44 DEĞİL: fare olan yerde 24 px zaten WCAG 2.5.8 (AA)
 * karşılar ve 40 satırlık tabloyu 44 px'e çıkarmak sayfayı uzatır (`INFORMATION_DENSITY`);
 * 44 px'e ihtiyaç duyan PARMAK. Eşik `pointer: coarse` ve dar viewport'tur — 1280 px fareli
 * masaüstünde hiçbir şey DEĞİŞMEZ.
 *
 * NEDEN ŞEFFAF `::after` İLE HİT ALANI BÜYÜTÜLMEDİ: yan yana küçük düğmelerde 44 px'lik
 * görünmez alanlar ÜST ÜSTE BİNER, DOM'da sonra gelen öndekinin tıklamasını çalar. Bu
 * yüzden gerçek kutu büyür ve aralarına boşluk konur (çakışma yok).
 *
 * Süzgeç: `<form method="get">` içindeki alan, seçim ve düğmeler. Kutu işaretleri ve
 * gizli alanlar (`filterFormIdentity.php`) dışarıda; satır atlayan alanların dikey
 * komşuluğu için alt boşluk. */
@media (pointer: coarse), (max-width: 768px) {
    .adm-row-act {
        min-height: var(--adm-tap);
        min-width: var(--adm-tap);
        justify-content: center;
        margin: 2px 4px 2px 0;
    }
    #pcont form[method="get"] :is(select, textarea, input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="file"]), .btn, button, a.btn) {
        min-height: var(--adm-tap);
        margin-bottom: 4px;
    }
    #pcont form[method="get"] :is(.btn, button, a.btn) {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: var(--adm-tap);
    }
}

/* ===== Dokunma hedefi — genel yardımcı + tablo hücresi bağlantısı (i-20261007-0002-ap, N-7) =====
 *
 * ÖLÇÜLEN (375 px): "Kayıt defterlerine dön" 136×26, "Dışa Aktar (bu sayfa)" 157×36 (her
 * `dataTable.php` ekranında), içerik işleri satırındaki "Konu yok" bağlantısı 28×34.
 * Eski `.btn.btn-xs` kuralı bunlara hiç uğramıyordu: ne `.btn` sınıfı taşıyorlar ne
 * tablo hücresindeler (satır aksiyon düğmeleri `admBtnClassCss()` ile token sınıfına
 * çevrildi; onların kuralı yukarıdaki `.adm-row-act`).
 *
 * `.adm-tap` bir EŞİK yardımcısıdır, boyut değil: dokunmatik/dar ekranda `--adm-tap`,
 * fare olan masaüstünde elemanın kendi boyutu (1280 px'te hiçbir şey DEĞİŞMEZ). Eşik, üstteki
 * düğme kuralıyla AYNI sorgu — viewport genişliği tek başına yanıltıcı, ama dar pencere
 * parmakla da kullanılır.
 *
 * Tablo hücresinin TEK öğesi olan düz metin bağlantısı (ad/konu → ayrıntı) gerçek kutu
 * olarak büyütülür; şeffaf `::after` hit alanı bilerek KULLANILMADI (yukarıdaki not:
 * komşu hedeflerin tıklamasını çalar). Düğme gibi çizilen bağlantılar (`inline-flex`,
 * `btn`) ve blok bağlantılar kendi boyutunu taşır, dışarıda bırakıldı. Genişlik de
 * eşiğe çekilir: dar sütunda iki satıra kırılan "Konu yok" 28 px genişlikteydi. */
@media (pointer: coarse), (max-width: 768px) {
    .adm-tap { min-height: var(--adm-tap); }
    #pcont table td > a:only-child:not(.inline-flex):not(.flex):not(.block):not(.btn) {
        display: inline-flex; align-items: center;
        min-width: var(--adm-tap); min-height: var(--adm-tap);
    }
}

/* ===== Tablet yatay taşması (768–1199px) =====
 *
 * ÖLÇÜM (2026-08-08, Playwright, gerçek oturum, 32 admin rotası):
 * 768px'te 13 rota sayfa gövdesini yatay kaydırıyordu — /help/get +1126px,
 * /users/index +670px, /sales/get +634px ... En dar taşma /mailTemplates +47px.
 *
 * KÖK NEDEN (DOM'dan okundu, CSS'ten tahmin edilmedi):
 * `style.css:1214` → `#cl-wrapper { display: table; width: 100% }`, ve
 * `table-layout` varsayılanı `auto`. Otomatik yerleşimde `width:100%` bir
 * TAVAN değil TABANDIR: tablo, hücrelerinin max-content genişliğine kadar
 * büyür. `#pcont` bir `table-cell` ve içinde 1708px'lik bir veri tablosu var →
 * hücre 1818px'e, sarmalayıcı 1894px'e çıkıyor, sayfa taşıyor.
 *
 * `.table-responsive`'in `overflow-x: scroll`u BU YÜZDEN işe yaramıyordu:
 * kaydırma kabı, kaydırması gereken içerik kadar genişlemişti. Yani kusur
 * "kaydırma kabı yok" değil, "kabın genişliği sınırlanmamış".
 *
 * ÖLÇÜLEN İKİNCİ BELİRTİ: kenar çubuğu da bozuluyordu. Otomatik yerleşimde
 * belirtilen genişlik oransal olarak ölçekleniyor → 768px'te `.cl-sidebar`
 * 55px yerine 76px, 980px'te 280px yerine 159px hesaplanıyordu.
 *
 * ÇÖZÜM: `table-layout: fixed`. Belirtilen hücre genişlikleri artık aynen
 * uygulanır, tablo kabını aşmaz, ve taşan içerik kendi `overflow-x` kabında
 * kaydırılır. `.cl-sidebar` her kırılma noktasında AÇIK genişliğe sahip
 * (style.css:857 → 280px, :986 → 55px, :6231 → 55px, :977 → 70px), bu yüzden
 * `fixed` yerleşimde ölçüsüz kalan hücre yok.
 *
 * ⚠ `≤767px`'te `#cl-wrapper` zaten `display: block` (style.css:6271) — orada
 * bu kural etkisizdir ve mobil düzen DEĞİŞMEZ (ölçüldü: 375/767px öncesi ve
 * sonrası birebir aynı).
 *
 * Kural neden style.css'e değil buraya yazıldı: style.css satıcı kaynaklı
 * legacy tema dosyası; düzeltmeler en son yüklenen bu katmanda yaşıyor ki
 * tema güncellemesi geri almasın. `!important` GEREKMEZ — aynı seçici
 * özgüllüğünde sonra geldiği için kazanır. */
#cl-wrapper {
    table-layout: fixed;
}

/* İKİNCİ VE BAĞIMSIZ KUSUR — `.table-responsive` 768px ÜSTÜNDE kaydırmıyordu.
 *
 * CSSOM'dan okundu (tahmin değil): tek eşleşen kural
 *   bootstrap.css  @media (max-width: 768px)
 *   .table-responsive { width:100%; margin-bottom:15px; overflow: scroll hidden; ... }
 * Yani "responsive" sınıfı yalnızca ≤768px'te kaydırıyor — Bootstrap 3'ün
 * bilinen sınırı. Ölçüm bunu doğruladı:
 *    768px → overflow-x: scroll   (kap 605px, tablo 1708px, sayfa taşmıyor)
 *    900px → overflow-x: visible  (kap 737px, tablo 834px, sayfa +42px taşıyor)
 *    980px → overflow-x: visible  (kap 592px, tablo 834px, sayfa +187px taşıyor)
 *
 * Bu yüzden yalnız `table-layout: fixed` YETMEDİ: 768'i düzeltti ama 883–1199
 * bandını açıkta bıraktı — hatta 980px'te taşmayı +121'den +187'ye ÇIKARDI,
 * çünkü kenar çubuğu artık hak ettiği 280px'i alıyor ve içeriğe daha az yer
 * kalıyor. Ölçmeden "düzeldi" denseydi bu bant gözden kaçardı.
 *
 * Çözüm Bootstrap 4/5 semantiği: `.table-responsive` HER genişlikte kaydırır.
 * `auto` (scroll değil) — tablo sığdığında kaydırma çubuğu hiç çıkmaz. */
#pcont .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== Yığılan tablo — dar ekran (i-20261007-0002-ap, N-6) =====
 *
 * ÖLÇÜLEN (375 px, `/registries/show/video_automation`): dört sütunlu alan tablosu 595 px,
 * kap 297 px; ilk "Değiştir" x = 559–620 yani görünür genişliğin (375) DIŞINDA, kaydırma
 * ipucu da yok. Yalnız ipucu bu ekranda yetmez: operatör değeri görmeden de eyleme
 * ulaşabilmeli.
 *
 * `table.adm-stack` dar ekranda satır başına bir KART olur: alan adı üstte, Değer ve
 * Varsayılan kendi etiketleriyle alt alta, eylem düğmeleri en altta — hepsi ilk
 * görünümde. Etiket başlık hücresinden değil `td[data-label]`den gelir (`attr()`); `thead`
 * gizlenir ama her hücre kendi etiketini taşıdığı için okuma sırası anlamını korur.
 * 768 px ve üstü DEĞİŞMEZ (tablo olarak kalır). */
@media (max-width: 767px) {
    table.adm-stack, .adm-stack tbody, .adm-stack tr, .adm-stack td { display: block; width: auto; }
    .adm-stack thead { display: none; }
    .adm-stack tr { padding: 8px 0; border-bottom: 1px solid var(--adm-border); }
    .adm-stack td { padding: 4px 12px; border: 0; overflow-wrap: anywhere; }
    /* Bootstrap `code { white-space: nowrap }`: en uzun alan anahtarı
     * (`exceptions.etkinlik-organizasyon.client_edit`) kartı 13 px taşırıyordu. */
    .adm-stack code { white-space: normal; }
    .adm-stack td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
        color: var(--adm-muted);
    }
}

/* ===== Yatay kaydırma ipucu (i-20261007-0002-ap, N-6) =====
 *
 * Dokunmatik ekranda kaydırma çubuğu gizli: taşan tablonun sağında kalan sütunlar
 * (durum, ayrıntı, eylem) hiçbir işaret olmadan ekran dışında kalıyordu (`/videoReview`,
 * `/contentJobs`, her `dataTable.php` ekranı). `admin-ux.js` `#pcont` içindeki TAŞAN
 * `.overflow-x-auto` / `.table-responsive` kutularına `adm-xs-more` (sağda içerik var) ve
 * `adm-xs-less` (soldan kaydırıldı) yazar; kutunun ilgili kenarı solar. METİN eklenmedi
 * (dil dosyasına dokunulmaz) — kesik sütun + solma ipucu yeter. `mask-image` kutunun KENDİ
 * kenarına uygulanır, içerikle kaymaz; tablo satırları opak olduğundan gölge/arka plan
 * tekniği (`background-attachment: local`) burada ÇALIŞMAZ. */
@media (pointer: coarse), (max-width: 768px) {
    .adm-xs-more:not(.adm-xs-less) {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    }
    .adm-xs-less:not(.adm-xs-more) {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
    }
    .adm-xs-more.adm-xs-less {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    }
}

/* ===== Klavye odağı (9.10 turu, 2026-09-16) =====
 * style.css `a { outline: 0 none }` + `a:focus { outline: 0 none }` tema
 * sıfırlaması fare odağındaki halkayı gizlemek içindi ama klavyeyi de kör
 * bırakıyordu: kenar çubuğu bağlantılarında ve üst çubuk logosunda Tab
 * odağı görünmüyordu (outline none, box-shadow none). `:focus-visible`
 * yalnız klavye/odak-gösterir durumda çizer; fare tıklamasında halka çıkmaz.
 * Özgüllük (0,1,2) `a:focus` (0,1,1) sıfırlamasını geçer; form alanları
 * kendi kenarlık/gölge halkasını taşıdığı için kapsam dışı. */
body a:focus-visible,
body button:focus-visible,
body [tabindex]:focus-visible {
    outline: 2px solid var(--adm-primary);
    outline-offset: 2px;
}
/* Kenar çubuğu logosu: boş satır içi <a> 0×0 kutuydu — Tab ilk ona gidiyor
 * ama odak görünmüyordu. Blok yapılıp logo alanını (64px − 2×15px) kaplar. */
.cl-sidebar .sidebar-logo .logo a {
    display: block;
    height: 34px;
}

/* ===== Pano özet kartı başlığı + menü ayracı (i-20261021-0041) =====
 * `class="label"` Bootstrap 3 rozetidir (beyaz yazı, inline, kalın): beyaz kartta
 * başlık görünmüyordu. Sınıf adı test çıpası olduğu için değişmez; kapsamlı
 * ezme burada. Ayraç: boş `<li class="divider">` yan menü alt listesinde ve
 * profil açılırında sıfır yükseklikteydi; görünür 1px çizgi + boşluk. */
.adm-kpi-grid .label {
    display: block; padding: 0; margin: 0 0 4px;
    color: var(--adm-muted); font-size: 12px; font-weight: 600; line-height: 1.4;
    text-align: left; white-space: normal; border-radius: 0;
}
.cl-sidebar .sub-menu > li.divider,
#head-nav .dropdown-menu > li.divider {
    display: block; height: 1px; margin: 6px 12px; padding: 0; overflow: hidden;
    background: var(--adm-border); list-style: none;
}

/* ===== Print: temiz çıktı ===== */
@media print {
    .cl-sidebar, #head-nav, .adm-toast-stack, .adm-cmdk-backdrop { display: none !important; }
    #pcont { margin-left: 0 !important; }
}