/* ==========================================================================
   Hiper E-Okul — Masaüstü kabuğu
   ==========================================================================

   Yön: "Karanlık oda konsolu". Panel bir web sayfası değil, bir baskı üretim
   konsolu gibi davranır:

     - Kabuk (başlık çubuğu, kenar çubuğu, durum çubuğu) her zaman grafit kalır.
       Lightroom, Capture One, Resolve gibi profesyonel foto araçları kabuğunu
       asla açık temaya çevirmez; çünkü ekrandaki rengi yargılayan göz, nötr
       koyu bir çerçeve ister.
     - Yalnızca içerik yüzeyi tema değiştirir: "ışık masası" (açık) veya
       "karanlık oda" (koyu).

   Vurgu rengi, karanlık oda emniyet lambasının kehribarı. Kırmızı yalnızca
   yıkıcı işlemler ve eksik fotoğraf için ayrıldı; hiçbir dekoratif yerde
   kullanılmaz, böylece göründüğü an anlam taşır.

   Bu dosya admin_style.css ve sayfa içi <style> bloğundan SONRA yüklenir.
   ========================================================================== */

/* ==========================================================================
   1. Jetonlar
   ========================================================================== */

:root {
    /* Kabuk — temadan bağımsız, her zaman grafit */
    --chrome-000: #0B0D10;
    --chrome-100: #101216;   /* başlık çubuğu */
    --chrome-200: #171A1F;   /* kenar çubuğu */
    --chrome-300: #1E2228;   /* yükseltilmiş kabuk yüzeyi */
    --chrome-400: #262B33;
    --chrome-line: #2B313A;
    --chrome-line-soft: #21262D;
    --chrome-text: #C6CCD6;
    --chrome-dim: #79818E;
    --chrome-faint: #545C68;

    /* Emniyet lambası kehribarı — birincil vurgu */
    --amber: #F0A32E;
    --amber-bright: #FFB84D;
    --amber-deep: #C97F14;
    --amber-wash: rgba(240, 163, 46, 0.12);
    --amber-line: rgba(240, 163, 46, 0.32);

    /* Register işareti camgöbeği — bilgi, ikincil vurgu */
    --cyan: #3FB6D8;
    --cyan-wash: rgba(63, 182, 216, 0.12);
    --cyan-line: rgba(63, 182, 216, 0.32);

    /* Sinyaller */
    --ok: #3EA96A;
    --ok-wash: rgba(62, 169, 106, 0.12);
    --ok-line: rgba(62, 169, 106, 0.32);
    --warn: #D9913B;
    --alert: #D9503B;
    --alert-wash: rgba(217, 80, 59, 0.12);
    --alert-line: rgba(217, 80, 59, 0.34);
    --violet: #8B7BD8;
    --violet-wash: rgba(139, 123, 216, 0.12);

    /* İçerik yüzeyi — ışık masası (varsayılan) */
    --surface: #E9ECEF;
    --panel: #FFFFFF;
    --panel-alt: #F4F6F8;
    --panel-sunken: #EDF0F3;
    --line: #D6DCE2;
    --line-soft: #E4E9ED;
    --ink: #171A1F;
    --ink-soft: #4B535E;
    --ink-dim: #737C88;
    --shadow-sm: 0 1px 2px rgba(16, 18, 22, 0.07);
    --shadow-md: 0 2px 8px rgba(16, 18, 22, 0.09);
    --shadow-lg: 0 12px 32px rgba(16, 18, 22, 0.16);

    /* Ölçüler — masaüstü yoğunluğu */
    --titlebar-h: 38px;
    --statusbar-h: 26px;
    --toolbar-h: 52px;
    --sidebar-w: 244px;
    --sidebar-w-min: 60px;

    /* Tipografi */
    --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --fs-xs: 10.5px;
    --fs-sm: 11.5px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 15px;
    --fs-title: 18px;
    --fs-display: 22px;

    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 9px;
    --r-xl: 12px;

    /* Elektron pencere düğmeleri için ayrılan yer (yalnızca Electron'da) */
    --win-controls: 0px;
}

/* Karanlık oda — yalnızca içerik yüzeyi değişir */
:root[data-surface="dark"] {
    --surface: #15181D;
    --panel: #1D2127;
    --panel-alt: #22272E;
    --panel-sunken: #191D22;
    --line: #2E343C;
    --line-soft: #262B32;
    --ink: #DFE4EA;
    --ink-soft: #A6AEBA;
    --ink-dim: #79818E;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   2. Kabuk iskeleti
   --------------------------------------------------------------------------
   Masaüstü hissinin tek en önemli kuralı: sayfa kaymaz. Yalnızca içerik
   bölmesi kayar; başlık, kenar ve durum çubukları sabit kalır.
   ========================================================================== */

html.app-html,
html.app-html body.app-body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body.app-body {
    display: flex;
    flex-direction: column;
    background: var(--chrome-000);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.app-shell {
    flex: 1;
    display: flex;
    min-height: 0;
    background: var(--chrome-200);
}

/* ==========================================================================
   3. Başlık çubuğu
   --------------------------------------------------------------------------
   Electron'da pencere gerçekten çerçevesizdir ve bu çubuk sürükleme alanıdır;
   pencere düğmelerini Electron'un kendi overlay'i çizer. Sahte CSS düğmesi yok:
   çalışmayan bir kapat düğmesi, hiç olmamasından kötüdür.
   ========================================================================== */

.app-titlebar {
    flex: 0 0 var(--titlebar-h);
    height: var(--titlebar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    padding-right: calc(10px + var(--win-controls));
    background: var(--chrome-100);
    border-bottom: 1px solid var(--chrome-line);
    user-select: none;
    position: relative;
    z-index: 60;
}

/* Electron'da pencere bu çubuktan da taşınabilir */
body.is-electron .app-titlebar {
    -webkit-app-region: drag;
}

body.is-electron .app-titlebar button,
body.is-electron .app-titlebar input,
body.is-electron .app-titlebar a,
body.is-electron .app-titlebar .tb-search {
    -webkit-app-region: no-drag;
}

/* Menü düğmesi her genişlikte durur ve iki iş yapar: geniş ekranda kenar
   çubuğunu daraltıp genişletir (Ctrl+B ile aynı), dar ekranda çekmeceyi açar.
   Eskiden burada `display: none` vardı ama hemen altındaki `.tb-btn` kuralı
   (aynı özgüllük, daha sonra geldiği için kazanıyor) onu eziyordu: düğme
   masaüstünde de görünüyor, tıklanınca hiçbir şey olmuyordu. */
.tb-burger { margin-right: 2px; }

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

/* Marka işareti `logo-small.svg` — plakayı, köşe yarıçapını ve rengi çizimin
   kendisi taşır, burada boyayacak bir şey yok. Bu ölçekte (20 px) ana çizim
   dağıldığı için sadeleştirilmiş varyant kullanılıyor; bkz. `logo-small.svg`. */
.tb-mark {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}

.tb-name {
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--chrome-text);
    white-space: nowrap;
}

.tb-sep {
    width: 1px;
    height: 16px;
    background: var(--chrome-line);
    flex-shrink: 0;
}

.tb-school {
    font-size: var(--fs-sm);
    color: var(--chrome-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
    flex-shrink: 1;
}

/* Komut paleti tetikleyicisi — başlık çubuğunun merkezi */
.tb-search {
    flex: 0 1 420px;
    margin: 0 auto;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    background: var(--chrome-000);
    border: 1px solid var(--chrome-line);
    border-radius: var(--r-md);
    color: var(--chrome-faint);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    cursor: text;
    transition: border-color 0.12s, color 0.12s;
    min-width: 0;
}

.tb-search:hover {
    border-color: var(--chrome-400);
    color: var(--chrome-dim);
}

.tb-search:focus-visible {
    outline: none;
    border-color: var(--amber-line);
    color: var(--chrome-text);
}

.tb-search span {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Başlık çubuğu ikon düğmeleri */
.tb-btn {
    width: 26px;
    height: 24px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--chrome-dim);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
}

.tb-btn:hover {
    background: var(--chrome-300);
    color: var(--chrome-text);
}

.tb-btn.is-danger:hover {
    background: var(--alert-wash);
    color: var(--alert);
}

.tb-user {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px 0 6px;
    height: 24px;
    border-radius: var(--r-sm);
    color: var(--chrome-dim);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.tb-user i {
    color: var(--chrome-faint);
    font-size: 11px;
}

kbd,
.kbd {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 1.5px 5px;
    border-radius: 3px;
    background: var(--chrome-300);
    border: 1px solid var(--chrome-line);
    border-bottom-width: 2px;
    color: var(--chrome-dim);
    line-height: 1.4;
    white-space: nowrap;
}

/* ==========================================================================
   4. Kenar çubuğu
   ========================================================================== */

.app-sidebar {
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--chrome-200);
    border-right: 1px solid var(--chrome-line);
    min-height: 0;
    z-index: 40;
    transition: flex-basis 0.16s ease, width 0.16s ease;
}

body.sidebar-collapsed .app-sidebar {
    flex-basis: var(--sidebar-w-min);
    width: var(--sidebar-w-min);
}

.sb-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0 4px;
}

.sb-group {
    margin-bottom: 14px;
}

.sb-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--chrome-faint);
    padding: 0 14px 6px;
    white-space: nowrap;
    overflow: hidden;
}

body.sidebar-collapsed .sb-label {
    opacity: 0;
    height: 8px;
    padding-bottom: 0;
}

/* Gezinme öğesi. Aktif durum solda kehribar bir kılavuz şeridiyle
   işaretlenir — film kenarındaki perforasyon işareti gibi. */
.sb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 14px;
    height: 34px;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    color: var(--chrome-dim);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: background 0.12s, color 0.12s;
}

.sb-item:hover {
    background: var(--chrome-300);
    color: var(--chrome-text);
}

.sb-item.active {
    background: var(--chrome-300);
    border-left-color: var(--amber);
    color: #FFFFFF;
}

.sb-item:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: -2px;
}

.sb-item .sb-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke-width: 1.9;
    color: var(--chrome-faint);
    transition: color 0.12s;
    display: grid;
    place-items: center;
    font-size: 13px;
}

.sb-item:hover .sb-icon { color: var(--chrome-dim); }
.sb-item.active .sb-icon { color: var(--amber); }

.sb-item .sb-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-item .sb-key {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--chrome-faint);
    opacity: 0;
    transition: opacity 0.12s;
}

.sb-item:hover .sb-key,
.sb-item.active .sb-key { opacity: 1; }

.sb-item .sb-count {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 20px;
    background: var(--chrome-400);
    color: var(--chrome-dim);
}

.sb-item .sb-count.is-alert {
    background: var(--alert-wash);
    color: var(--alert);
}

body.sidebar-collapsed .sb-item {
    padding: 0;
    justify-content: center;
}

body.sidebar-collapsed .sb-item .sb-text,
body.sidebar-collapsed .sb-item .sb-key,
body.sidebar-collapsed .sb-item .sb-count {
    display: none;
}

/* --------------------------------------------------------------------------
   İmza öğesi: kontak baskı sayacı
   --------------------------------------------------------------------------
   Bir kontak baskısındaki kareler gibi, her hücre öğrenci grubunu temsil eder.
   Dolu kareler çekilmiş, boş kareler eksik fotoğrafı gösterir. Yüzde okumaya
   gerek kalmadan üretimin ne kadarının bittiği tek bakışta görünür.
   -------------------------------------------------------------------------- */

.sb-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--chrome-line);
    padding: 12px 14px 14px;
    background: var(--chrome-100);
}

body.sidebar-collapsed .sb-foot { display: none; }

.contact-meter {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.cm-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cm-title {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--chrome-faint);
}

.cm-pct {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}

.cm-frames {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2px;
    margin-bottom: 9px;
}

.cm-frame {
    aspect-ratio: 3 / 4;
    border-radius: 1px;
    background: var(--chrome-300);
    box-shadow: inset 0 0 0 1px var(--chrome-line);
    transition: background 0.3s ease;
}

.cm-frame.is-shot {
    background: var(--amber);
    box-shadow: inset 0 0 0 1px var(--amber-deep);
}

.cm-frame.is-partial {
    background: linear-gradient(90deg, var(--amber) var(--fill, 50%), var(--chrome-300) var(--fill, 50%));
    box-shadow: inset 0 0 0 1px var(--chrome-line);
}

.cm-legend {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--chrome-faint);
    font-variant-numeric: tabular-nums;
}

.cm-legend b {
    font-weight: 600;
    color: var(--chrome-dim);
}

.cm-legend .is-alert { color: var(--alert); }
.cm-legend .is-ok { color: var(--ok); }

.contact-meter:hover .cm-title { color: var(--chrome-dim); }
.contact-meter:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* Genişlik sürükleme kenarı — kenar çubuğunun sağ sınırı */
.sb-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2px;
    width: 5px;
    cursor: col-resize;
    z-index: 41;
}

.sb-edge:hover { background: var(--amber-line); }

.app-sidebar { position: relative; }
body.sidebar-collapsed .sb-edge { display: none; }

/* Kenar çubuğu daraltma tutamağı */
.sb-collapse {
    flex: 0 0 auto;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--chrome-100);
    border: 0;
    border-top: 1px solid var(--chrome-line);
    color: var(--chrome-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}

.sb-collapse:hover {
    background: var(--chrome-300);
    color: var(--chrome-text);
}

.sb-collapse i { transition: transform 0.2s ease; }
body.sidebar-collapsed .sb-collapse i { transform: rotate(180deg); }
body.sidebar-collapsed .sb-collapse span { display: none; }

/* ==========================================================================
   5. Ana bölme — araç çubuğu + kayan içerik
   ========================================================================== */

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    min-height: 0;
}

.app-toolbar {
    flex: 0 0 var(--toolbar-h);
    height: var(--toolbar-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    z-index: 20;
}

.tbar-heading { min-width: 0; }

.tbar-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-dim);
    display: block;
    line-height: 1.2;
}

.tbar-title {
    font-size: var(--fs-title);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.app-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px;
    scroll-behavior: smooth;
}

/* ==========================================================================
   6. Durum çubuğu — üst LCD gibi okunur, hepsi mono
   ========================================================================== */

.app-statusbar {
    flex: 0 0 var(--statusbar-h);
    height: var(--statusbar-h);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 4px;
    background: var(--chrome-100);
    border-top: 1px solid var(--chrome-line);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--chrome-faint);
    user-select: none;
    z-index: 50;
}

.st-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 100%;
    white-space: nowrap;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
}

button.st-cell { cursor: pointer; }
button.st-cell:hover {
    background: var(--chrome-300);
    color: var(--chrome-text);
}

.st-cell + .st-cell { box-shadow: inset 1px 0 0 var(--chrome-line-soft); }
.st-cell b { font-weight: 600; color: var(--chrome-dim); }
.st-spacer { flex: 1; }

.st-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    flex-shrink: 0;
}

.st-dot.is-warn { background: var(--warn); }
.st-dot.is-alert { background: var(--alert); }
.st-dot.is-live { animation: st-pulse 2.4s ease-in-out infinite; }

@keyframes st-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.st-cell .is-ok { color: var(--ok); }
.st-cell .is-alert { color: var(--alert); }
.st-cell .is-amber { color: var(--amber); }

/* ==========================================================================
   7. Bölme geçişleri
   ========================================================================== */

.admin-tab-panel {
    display: none;
}

.admin-tab-panel.active {
    display: block;
    animation: panel-in 0.16s ease-out;
}

@keyframes panel-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   8. Komut paleti
   --------------------------------------------------------------------------
   Fuse.js ile gerçek bulanık arama yapar: araçlar, bölümler, sınıflar ve
   öğrenciler tek yerden erişilir. Masaüstü uygulamasında klavye birincil
   gezinme yoludur.
   ========================================================================== */

.cmdk {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    padding-top: 12vh;
    justify-content: center;
    align-items: flex-start;
    background: rgba(11, 13, 16, 0.55);
    backdrop-filter: blur(3px);
}

.cmdk.open { display: flex; }

.cmdk-box {
    width: min(620px, calc(100vw - 32px));
    max-height: 62vh;
    display: flex;
    flex-direction: column;
    background: var(--chrome-200);
    border: 1px solid var(--chrome-line);
    border-radius: var(--r-xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    animation: cmdk-in 0.13s ease-out;
}

@keyframes cmdk-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

.cmdk-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 48px;
    border-bottom: 1px solid var(--chrome-line);
    flex-shrink: 0;
}

.cmdk-head > i { color: var(--amber); font-size: 13px; }

.cmdk-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #FFFFFF;
    font-family: var(--font-ui);
    font-size: var(--fs-lg);
    min-width: 0;
}

.cmdk-input::placeholder { color: var(--chrome-faint); }

/* Odak göstergesi paletin kendisi; alanın etrafında ikinci bir çerçeve gereksiz */
.cmdk-input:focus-visible { outline: none; }

.cmdk-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
}

.cmdk-sec {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--chrome-faint);
    padding: 9px 10px 4px;
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--chrome-text);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

.cmdk-item[aria-selected="true"] {
    background: var(--chrome-400);
    color: #FFFFFF;
}

.cmdk-ico {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--chrome-300);
    color: var(--chrome-dim);
    font-size: 11px;
}

.cmdk-item[aria-selected="true"] .cmdk-ico {
    background: var(--amber-wash);
    color: var(--amber);
}

.cmdk-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdk-sub {
    display: block;
    font-size: var(--fs-xs);
    color: var(--chrome-faint);
}

.cmdk-kind {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--chrome-faint);
    flex-shrink: 0;
}

.cmdk-empty {
    padding: 28px 14px;
    text-align: center;
    color: var(--chrome-faint);
    font-size: var(--fs-base);
}

.cmdk-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    height: 34px;
    border-top: 1px solid var(--chrome-line);
    background: var(--chrome-100);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--chrome-faint);
}

.cmdk-foot span { display: flex; align-items: center; gap: 5px; }

/* ==========================================================================
   8b. Masaüstü iletişim kutusu
   --------------------------------------------------------------------------
   Sayfa içinde kayan bir kutu değil, kendi başlık ve alt eylem çubuğu olan
   sabit boyutlu bir pencere. Gövde kendi içinde kayar; başlık, ölçüm şeridi,
   süzgeç ve alt çubuk yerinde durur — masaüstü pencerelerinin davranışı bu.
   ========================================================================== */

.app-dialog {
    position: fixed;
    inset: 0;
    z-index: 2800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(11, 13, 16, 0.55);
    backdrop-filter: blur(3px);
}

.app-dialog[hidden] { display: none; }

.dlg-box {
    width: min(860px, 100%);
    height: min(620px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: dlg-in 0.14s ease-out;
}

@keyframes dlg-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.995); }
    to { opacity: 1; transform: none; }
}

/* Başlık — grafit, kabuğun kimliğiyle aynı */
.dlg-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 8px 0 14px;
    background: var(--chrome-100);
    border-bottom: 1px solid var(--chrome-line);
}

.dlg-head h2 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--chrome-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dlg-head h2 i { color: var(--amber); font-size: 12px; }

.dlg-close {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--chrome-dim);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.dlg-close:hover { background: var(--alert-wash); color: var(--alert); }

/* Ölçüm şeridi */
.dlg-meter {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--panel-alt);
}

.meter-figs { display: flex; gap: 18px; flex-shrink: 0; }

.meter-figs .fig {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.meter-figs .fig b {
    font-family: var(--font-mono);
    font-size: var(--fs-title);
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.meter-figs .fig span {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.meter-figs .fig.is-ok b { color: var(--ok); }
.meter-figs .fig.is-alert b { color: var(--alert); }

.meter-bar {
    flex: 1;
    min-width: 60px;
    height: 6px;
    border-radius: 3px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    background: var(--amber);
    transition: width 0.4s ease;
}

.meter-pct {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Süzgeç satırı */
.dlg-filters {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line-soft);
    flex-wrap: wrap;
}

.seg {
    display: flex;
    padding: 2px;
    border-radius: var(--r-md);
    background: var(--panel-sunken);
    border: 1px solid var(--line);
}

.seg-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-dim);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.seg-btn:hover { color: var(--ink); }

.seg-btn.active {
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.seg-n {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 0 4px;
    border-radius: 3px;
    background: var(--panel-alt);
    color: var(--ink-dim);
}

.seg-btn.active .seg-n { background: var(--amber-wash); color: var(--amber-deep); }
:root[data-surface="dark"] .seg-btn.active .seg-n { color: var(--amber); }

.dlg-search {
    flex: 1;
    min-width: 160px;
    position: relative;
    display: flex;
    align-items: center;
}

.dlg-search i {
    position: absolute;
    left: 9px;
    font-size: 11px;
    color: var(--ink-dim);
    pointer-events: none;
}

.dlg-search input {
    width: 100%;
    height: 28px;
    padding: 0 9px 0 28px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
}

.dlg-search input:focus {
    outline: 0;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-wash);
}

/* Gövde — tek kayan alan */
.dlg-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
}

.dlg-body:focus-visible { outline: none; }

.dlg-body::-webkit-scrollbar { width: 10px; }
.dlg-body::-webkit-scrollbar-track { background: var(--panel); }

.dlg-body::-webkit-scrollbar-thumb {
    background: var(--line);
    border: 3px solid var(--panel);
    border-radius: 10px;
}

/* Sınıf ayracı — listede nerede olduğunu kaybettirmez */
.row-group {
    position: sticky;
    top: -6px;
    z-index: 1;
    padding: 8px 10px 4px;
    background: var(--panel);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

/* Satır — kart değil satır: 400 öğrencilik listede kart taranmaz */
.stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 10px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: inherit;
    font-family: var(--font-ui);
    text-align: left;
    cursor: pointer;
}

.stat-row:hover { background: var(--panel-alt); }

.stat-row[aria-selected="true"] {
    background: var(--amber-wash);
    box-shadow: inset 0 0 0 1px var(--amber-line);
}

.row-thumb {
    width: 32px;
    height: 42px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--panel-sunken);
    border: 1px solid var(--line);
}

.row-thumb.is-empty {
    display: grid;
    place-items: center;
    color: var(--ink-dim);
    font-size: 12px;
}

/* Dosya sunucuda yoksa kırık görsel ikonu yerine boş kare kalsın */
.row-thumb.is-broken {
    object-fit: none;
    color: transparent;
    font-size: 0;
}

.row-name {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-no {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
    flex-shrink: 0;
}

.row-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
    white-space: nowrap;
}

.row-tag.is-nophoto {
    background: var(--alert-wash);
    border: 1px solid var(--alert-line);
    color: var(--alert);
}

.row-tag.is-noface {
    background: var(--amber-wash);
    border: 1px solid var(--amber-line);
    color: var(--amber-deep);
}

:root[data-surface="dark"] .row-tag.is-noface { color: var(--amber); }

.row-go {
    font-size: 10px;
    color: var(--ink-dim);
    flex-shrink: 0;
}

.dlg-note {
    padding: 40px 16px;
    margin: 0;
    text-align: center;
    font-size: var(--fs-base);
    color: var(--ink-dim);
}

.dlg-note.is-ok { color: var(--ok); }
.dlg-note.is-alert { color: var(--alert); }
.dlg-note i { display: block; font-size: 22px; margin-bottom: 8px; }

/* Alt eylem çubuğu */
.dlg-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: var(--panel-alt);
}

.foot-hint {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
}

.foot-hint kbd {
    background: var(--panel-sunken);
    border-color: var(--line);
    color: var(--ink-dim);
}

.dlg-foot .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink-soft);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.dlg-foot .btn:hover { background: var(--panel-sunken); color: var(--ink); }

.dlg-foot .btn-primary {
    background: var(--amber);
    border-color: var(--amber-deep);
    color: #17130A;
}

.dlg-foot .btn-primary:hover { background: var(--amber-bright); color: #17130A; }

.dlg-box.is-wide { width: min(960px, 100%); height: min(680px, 100%); }

/* --------------------------------------------------------------------------
   Sihirbaz adımları
   --------------------------------------------------------------------------
   Numaralar burada gerçekten sıra taşıyor: akış geri alınamaz bir kayıtla
   bitiyor, kullanıcının nerede olduğunu bilmesi gerekiyor.
   -------------------------------------------------------------------------- */

.step-rail {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 10px 16px;
    list-style: none;
    border-bottom: 1px solid var(--line-soft);
    background: var(--panel-alt);
}

.step-rail li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 4px;
    border-radius: 20px;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-dim);
}

.step-rail li b {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.step-rail li + li::before {
    content: '';
    width: 14px;
    height: 1px;
    background: var(--line);
    margin-right: 6px;
    order: -1;
}

.step-rail li.active {
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.step-rail li.active b {
    background: var(--amber);
    border-color: var(--amber-deep);
    color: #17130A;
}

.step-rail li.done { color: var(--ok); }

.step-rail li.done b {
    background: var(--ok-wash);
    border-color: var(--ok-line);
    color: var(--ok);
}

.imp-step { display: none; padding: 14px 16px; }
.imp-step.active { display: block; }

/* Dosya bırakma */
.imp-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    border: 2px dashed var(--ink-dim);
    border-radius: var(--r-lg);
    background: var(--panel);
    transition: border-color 0.14s, background 0.14s;
}

.imp-drop:hover,
.imp-drop.dragover {
    border-color: var(--amber);
    background: var(--amber-wash);
    border-style: solid;
}

/* Odak ayrı gösterilir: klavyeyle gelindiğinde alan "dosya bırakılıyor" gibi
   görünmemeli. */
.imp-drop:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.imp-drop.has-file {
    border-style: solid;
    border-color: var(--ok);
    background: var(--ok-wash);
}

.imp-drop.has-file .drop-mark {
    background: var(--ok);
    border-color: var(--ok);
    color: #FFFFFF;
}

.imp-drop h4 { font-size: var(--fs-md); font-weight: 700; margin: 0; }
.imp-drop p { font-size: var(--fs-sm); color: var(--ink-dim); margin: 0; }

/* Biçim tarifi */
.imp-spec {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

.spec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--panel-alt);
    border-bottom: 1px solid var(--line-soft);
}

.spec-head h5 {
    flex: 1;
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
}

.spec-code {
    margin: 0;
    padding: 12px;
    background: var(--panel-sunken);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--ink-soft);
    overflow-x: auto;
    white-space: pre;
}

.spec-notes {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0;
    padding: 11px 12px;
}

.spec-notes dt {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.spec-notes dd {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

.spec-notes code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 1px 5px;
    margin-right: 3px;
    border-radius: 3px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-soft);
}

/* Önizleme */
.imp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.imp-chips .chip {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-dim);
}

.imp-chips .chip b { font-weight: 600; color: var(--ink); }
.imp-chips .chip.is-ok { background: var(--ok-wash); border-color: var(--ok-line); }
.imp-chips .chip.is-ok b { color: var(--ok); }
.imp-chips .chip.is-alert { background: var(--alert-wash); border-color: var(--alert-line); }
.imp-chips .chip.is-alert b { color: var(--alert); }
.imp-chips .chip.is-amber { background: var(--amber-wash); border-color: var(--amber-line); }
.imp-chips .chip.is-amber b { color: var(--amber-deep); }

:root[data-surface="dark"] .imp-chips .chip.is-amber b { color: var(--amber); }

.imp-issues { display: grid; gap: 8px; margin-bottom: 12px; }

.issue-block {
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--panel-sunken);
}

.issue-block.is-amber { background: var(--amber-wash); border-color: var(--amber-line); }
.issue-block.is-alert { background: var(--alert-wash); border-color: var(--alert-line); }

.issue-block h5 {
    margin: 0 0 5px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.issue-block p, .issue-block ul {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

.issue-block ul { padding-left: 18px; line-height: 1.6; }

/* Önizleme tablosu — yoğun, satır satır okunur */
.imp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.imp-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 7px 10px;
    background: var(--panel-alt);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.imp-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
}

.imp-table tbody tr:hover td { background: var(--panel-alt); }

.role-tag,
.cell-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-dim);
}

.issue-block .issue-why {
    margin-top: 5px;
    font-size: var(--fs-xs);
    color: var(--ink-dim);
}

/* Öğrenci içe aktarma: sınıf dağılımı ve satır süzgeci */
.stu-dist {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

.dist-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--panel-alt);
    border-bottom: 1px solid var(--line-soft);
}

.dist-head h5 {
    flex: 1;
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
}

/* Çok sınıflı okullarda grafik gövdeyi kaplıyordu. Grafiğin doğal yüksekliği
   korunuyor (çubuk üstündeki sayılar okunur kalsın), sınırlama dıştaki
   kaydırma katmanında yapılıyor. */
.dist-scroll {
    padding: 4px 8px 0;
    max-height: 232px;
    overflow-y: auto;
}

.dist-scroll::-webkit-scrollbar { width: 9px; }
.dist-scroll::-webkit-scrollbar-track { background: var(--panel); }

.dist-scroll::-webkit-scrollbar-thumb {
    background: var(--line);
    border: 3px solid var(--panel);
    border-radius: 10px;
}

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

.stu-toolbar .dlg-search { flex: 1; min-width: 180px; }

.stu-toolbar select {
    height: 28px;
    min-width: 150px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
}

.stu-toolbar .ts-wrapper { min-width: 170px; }

.stu-toolbar .ts-control {
    min-height: 28px;
    padding: 3px 24px 3px 8px;
    font-size: var(--fs-sm);
    box-shadow: none;
}

.stu-toolbar .ts-wrapper.single .ts-control::after {
    right: 9px;
    border-top: 4.5px solid var(--ink-dim);
}

.stu-toolbar .ts-dropdown {
    font-size: var(--fs-sm);
    margin-top: 4px;
}

.stu-shown {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
    white-space: nowrap;
}

.imp-table .td-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.imp-table .td-empty {
    padding: 18px 10px;
    text-align: center;
    color: var(--ink-dim);
    font-size: var(--fs-sm);
}

.cell-tag { margin-left: 5px; }
.cell-tag.is-ok { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok); }
.cell-tag.is-amber { background: var(--amber-wash); border-color: var(--amber-line); color: var(--amber-deep); }

:root[data-surface="dark"] .cell-tag.is-amber { color: var(--amber); }

@media (max-width: 720px) {
    .app-dialog { padding: 0; }
    .dlg-box, .dlg-box.is-wide { width: 100%; height: 100%; border-radius: 0; }
    .foot-hint { display: none; }
    .meter-figs { gap: 12px; }
    .step-rail li span { display: none; }
}

/* ==========================================================================
   8c. Yüz taraması penceresi
   --------------------------------------------------------------------------
   Tarama uzun sürüyor ve tek tek fotoğraf işliyor; pencere bu yüzden bir
   "iş kuyruğu" gibi kurulu: üstte sabit ölçüm şeridi (kaç tarandı, kaçında
   yüz var), ortada akan satır listesi, altta tek eylem.

   Sonuçlar kart değil satır: 400 öğrencilik bir okulda kart ızgarası
   taranamaz, satır taranır. Renk yalnızca sonucu taşır — kehribar "yüz
   bulunamadı", kırmızı "hata", yeşil "tamam".
   ========================================================================== */

/* Açılış ekranı — tarama başlamadan önce ne olacağını anlatır */
.scan-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 32px 24px;
}

.scan-intro-mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: var(--r-lg);
    background: var(--amber-wash);
    border: 1px solid var(--amber-line);
    color: var(--amber-deep);
    font-size: 20px;
}

:root[data-surface="dark"] .scan-intro-mark { color: var(--amber); }

.scan-intro h4 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
}

.scan-intro p {
    margin: 0;
    max-width: 52ch;
    font-size: var(--fs-base);
    color: var(--ink-dim);
    line-height: 1.55;
}

.scan-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.scan-facts li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-md);
    background: var(--panel-alt);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}

.scan-facts li i { color: var(--cyan); font-size: 10px; }

/* Sonuç listesi */
.scan-list { display: flex; flex-direction: column; gap: 2px; }

.scan-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: var(--r-md);
    border-left: 2px solid transparent;
    font-family: var(--font-ui);
    animation: scan-row-in 0.16s ease-out;
}

.scan-row:hover { background: var(--panel-alt); }
.scan-row[hidden] { display: none; }

@keyframes scan-row-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.scan-row.is-ok { border-left-color: var(--ok-line); }
.scan-row.is-miss { border-left-color: var(--amber-line); }
.scan-row.is-err { border-left-color: var(--alert-line); }

/* Sırada bekleyen satır dikkat çekmesin, işlenen satır çeksin */
.scan-row.is-live { background: var(--amber-wash); }

.scan-id {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.scan-sub {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
}

.row-tag.is-ok {
    background: var(--ok-wash);
    border: 1px solid var(--ok-line);
    color: var(--ok);
}

.row-tag.is-err {
    background: var(--alert-wash);
    border: 1px solid var(--alert-line);
    color: var(--alert);
}

.row-tag.is-pending {
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-dim);
}

.row-tag i { margin-right: 4px; }

/* Tarama sürerken ölçüm şeridi canlı olduğunu belli etsin */
.dlg-meter.is-live .meter-fill {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.28) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0.28) 75%, transparent 75%
    );
    background-size: 16px 16px;
    animation: meter-stripes 0.7s linear infinite;
}

@keyframes meter-stripes {
    to { background-position: 16px 0; }
}

/* Durdur — yıkıcı değil ama geri dönüşü var, kırmızı çerçeveyle işaretli */
.dlg-foot .btn-stop {
    background: var(--alert-wash);
    border-color: var(--alert-line);
    color: var(--alert);
}

.dlg-foot .btn-stop:hover { background: var(--alert-wash); color: var(--alert); }

.dlg-foot .btn:disabled { opacity: 0.55; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    .scan-row { animation: none; }
    .dlg-meter.is-live .meter-fill { animation: none; }
}

/* ==========================================================================
   9. İçerik bileşenleri
   ========================================================================== */

.app-content h1, .app-content h2, .app-content h3,
.app-content h4, .app-content h5 {
    font-family: var(--font-ui);
    color: var(--ink);
    letter-spacing: -0.012em;
}

/* Bölüm — içerik yüzeyindeki temel kap */
.app-content .settings-section,
.app-content .admin-card,
.app-content .modern-settings-container > .settings-main-grid-full > .settings-section {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
    overflow: visible;
}

.app-content .modern-settings-container {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.app-content .settings-main-grid-full {
    display: block;
}

.app-content .section-header,
.app-content .admin-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    flex-wrap: wrap;
}

.app-content .section-header h3,
.app-content .admin-card-header .card-title {
    font-size: var(--fs-md);
    font-weight: 700;
    margin: 0;
    color: var(--ink);
}

.app-content .section-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--amber-wash);
    color: var(--amber);
    border: 1px solid var(--amber-line);
}

.app-content .section-icon svg {
    width: 15px;
    height: 15px;
}

.app-content .admin-card-body,
.app-content .settings-section > .tools-grid,
.app-content .settings-section > .corporate-modules-grid {
    padding: 16px;
}

/* --------------------------------------------------------------------------
   Araç kartları — kontak baskı kareleri gibi hizalanmış, eşit ağırlıkta.
   Her kartın kendi degradesi yok: renk yalnızca durum taşıdığında görünür.
   -------------------------------------------------------------------------- */

.app-content .tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 12px;
}

.app-content .tool-card {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}

.app-content .tool-card::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: var(--amber);
    opacity: 0;
    transition: opacity 0.14s;
}

.app-content .tool-card:hover {
    border-color: var(--amber-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.app-content .tool-card:hover::before { opacity: 1; }

.app-content .tool-card:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.app-content .tool-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.app-content .tool-icon svg { width: 17px; height: 17px; }

.app-content .tool-card:hover .tool-icon {
    background: var(--amber-wash);
    border-color: var(--amber-line);
    color: var(--amber);
}

.app-content .tool-content { min-width: 0; }

.app-content .tool-content h4 {
    font-size: var(--fs-base);
    font-weight: 700;
    margin: 4px 0 3px;
    color: var(--ink);
}

.app-content .tool-content p {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink-dim);
    margin: 0;
}

/* Etiket — teknik künye, mono */
.app-content .tool-tag,
.app-content .module-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1.5px 6px;
    border-radius: 3px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-dim);
}

.app-content .tool-tag i,
.app-content .module-tag i { font-size: 9px; }

/* --------------------------------------------------------------------------
   Araç kartının içi — künye, başlık, açıklama, eylem
   --------------------------------------------------------------------------
   Bu parçalar admin_style.css'te sabit `white` ve `--slate-*` değerleriyle
   yazılmıştı; o dosyada tek bir koyu tema kuralı yok. Karanlık odada künye
   rozetleri beyaz lekeler hâline geliyor, başlık ve açıklama da koyu panelin
   üstünde koyu kalıp okunmuyordu. Renkler artık yüzey jetonlarından geliyor,
   yani iki tema da tek tanımdan çıkıyor.

   Kart dikey akar: kabuğun `.tool-card` kuralı satır yönlü kurulmuştu (yan
   yana ikon + metin), ama buradaki işaretlemede ikon `.tool-head` içinde.
   Sütuna çevrilmezse künye ve açıklama ikonun yanına sıkışır.
   -------------------------------------------------------------------------- */

.app-content .tools-grid .tool-card {
    flex-direction: column;
    gap: 10px;
}

/* `flex-direction` açıkça yazılmalı: admin_style.css'in kap sorgusu
   (`@container (min-width: 1240px)`) bu satırı sütuna çeviriyor ve ikonu
   başlığın üstüne atıyor. Aynı ağırlıkta olduğumuz için sessizce
   devralınıyordu. */
.app-content .tool-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.app-content .tool-headings { min-width: 0; }

/* Sınıflandırma satırı — kartın hangi işin künyesi olduğunu söyler. Kabuğun
   her yerinde olduğu gibi teknik sınıflandırma mono ve versal. */
.app-content .tool-kicker {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.app-content .tool-headings h4 {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}

.app-content .tool-desc {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink-dim);
}

/* Künye rozetleri — `.tool-tag`in çoğul hâli, aynı kutu dili. Tek fark:
   bunlar kod değil cümle kurduğu için mono ve versal değiller; rozetin
   kendisi onları açıklamadan ayırmaya zaten yetiyor. Hap yerine köşeli
   kutu, çünkü kabuğun geri kalanı köşeli. */
.app-content .tool-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-content .tool-specs li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2.5px 7px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--panel-sunken);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.35;
}

.app-content .tool-specs li i {
    font-size: 9px;
    color: var(--ink-dim);
}

/* Eylem satırı — kehribar yalnızca burada ve yalnızca imleç kartın
   üstündeyken; kartın sol kenar rayıyla aynı anda yanar. */
.app-content .tool-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
    transition: color 0.14s;
}

.app-content .tool-cta i {
    font-size: 10px;
    transition: transform 0.14s;
}

.app-content .tool-card:hover .tool-cta { color: var(--amber); }
.app-content .tool-card:hover .tool-cta i { transform: translateX(3px); }

/* Birincil araç — rayı hep yanık durur. "Buradan başlayın"ı söylemenin
   kabuğa uygun yolu bu; ayrı bir degrade ve ayrı bir kenarlık rengi değil. */
.app-content .tool-card.primary-tool {
    background: var(--panel);
    border-color: var(--amber-line);
}

.app-content .tool-card.primary-tool::before { opacity: 1; }

.app-content .tool-card.primary-tool .tool-icon {
    background: var(--amber-wash);
    border-color: var(--amber-line);
    color: var(--amber);
}

@media (prefers-reduced-motion: reduce) {
    .app-content .tool-cta,
    .app-content .tool-cta i { transition: none; }
}

/* --------------------------------------------------------------------------
   Kurumsal bölüm
   --------------------------------------------------------------------------
   Sayaçlar ortalanmış iri kartlar yerine sola hizalı, yoğun satırlar olur:
   sayı önce ve mono gelir, çünkü okunacak şey sayının kendisi.
   -------------------------------------------------------------------------- */

.app-content .corporate-info-body-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 16px;
    align-items: start;
}

.app-content .corporate-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 10px;
}

.app-content .stat-card-unified {
    display: flex;
    flex-direction: row;   /* eski kural dikey ve ortalanmıştı */
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 11px 12px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-align: left;
    min-height: 0;
}

.app-content .stat-card-icon-unified {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    margin: 0;
    border-radius: var(--r-md);   /* eski kural daire yapıyordu */
}

.app-content .stat-card-icon-unified .icon,
.app-content .stat-card-icon-unified svg { width: 15px; height: 15px; }

.app-content .stat-card-info-unified { min-width: 0; text-align: left; }

.app-content .stat-card-info-unified .count {
    font-family: var(--font-mono);
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: 1.05;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.app-content .stat-card-info-unified .title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-dim);
}

.app-content .corporate-actions-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 232px;
    padding-left: 20px;
    border-left: 1px solid var(--line-soft);
}

.app-content .corporate-actions-container .btn { justify-content: flex-start; }

@media (max-width: 900px) {
    .app-content .corporate-info-body-grid { grid-template-columns: 1fr; }
    .app-content .corporate-actions-container {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--line-soft);
        padding-top: 14px;
    }
}

.app-content .corporate-executive-container { display: block; }

.app-content .hr-telemetry-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    flex-wrap: wrap;
}

.app-content .hr-telemetry-header h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    margin: 0;
}

.app-content .hr-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--ok-wash);
    border: 1px solid var(--ok-line);
    color: var(--ok);
}

/* Sayaç kutuları — sayı önce gelir, mono ve iri */
.app-content .hr-stats-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    padding: 16px;
}

.app-content .hr-stat-widget {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.app-content .hr-stat-icon-glow {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    font-size: 13px;
}

.app-content .hr-stat-info { min-width: 0; }

.app-content .hr-count {
    font-family: var(--font-mono);
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.app-content .hr-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
}

.app-content .hr-subtext {
    font-size: var(--fs-xs);
    color: var(--ink-dim);
}

.app-content .corporate-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 12px;
}

.app-content .corporate-module-card {
    display: flex;
    gap: 12px;
    padding: 14px;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-ui);
    transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}

.app-content .corporate-module-card:hover {
    border-color: var(--amber-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.app-content .module-icon-box {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    font-size: 14px;
}

.app-content .module-content-box { min-width: 0; }

.app-content .module-content-box h4 {
    font-size: var(--fs-base);
    font-weight: 700;
    margin: 4px 0 3px;
}

.app-content .module-content-box p {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink-dim);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Düğmeler — masaüstü ölçüsü, degradesiz
   -------------------------------------------------------------------------- */

.app-content .btn,
.app-toolbar .btn,
.tbar-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink-soft);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.app-content .btn:hover,
.tbar-actions .btn:hover {
    background: var(--panel-alt);
    border-color: var(--ink-dim);
    color: var(--ink);
}

.app-content .btn .icon,
.tbar-actions .btn .icon {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.app-content .btn-primary,
.tbar-actions .btn-primary {
    background: var(--amber);
    border-color: var(--amber-deep);
    color: #17130A;
}

.app-content .btn-primary:hover,
.tbar-actions .btn-primary:hover {
    background: var(--amber-bright);
    border-color: var(--amber);
    color: #17130A;
}

.app-content .btn-danger,
.tbar-actions .btn-danger {
    background: transparent;
    border-color: var(--alert-line);
    color: var(--alert);
}

.app-content .btn-danger:hover,
.tbar-actions .btn-danger:hover {
    background: var(--alert-wash);
    border-color: var(--alert);
    color: var(--alert);
}

.app-content .btn-sm {
    height: 26px;
    padding: 0 9px;
    font-size: var(--fs-xs);
}

.app-content .btn:focus-visible,
.tbar-actions .btn:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Form elemanları
   -------------------------------------------------------------------------- */

.app-content .form-control:not(.ts-wrapper):not(.ts-wrapper input):not(.search-input-wrapper input):not(.search-input-wrapper .form-control),
.app-content .form-select:not(.ts-wrapper),
.app-content input[type="text"]:not(.search-input-wrapper input),
.app-content input[type="search"]:not(.search-input-wrapper input),
.app-content input[type="number"],
.app-content select:not(.ts-wrapper select) {
    height: 30px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    transition: border-color 0.12s, box-shadow 0.12s;
}

.app-content .form-control:not(.ts-wrapper):focus,
.app-content .form-select:not(.ts-wrapper):focus,
.app-content select:not(.ts-wrapper):focus {
    outline: 0;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-wash);
}

.app-content label,
.app-content .control-group label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 4px;
    display: block;
}

.app-content .main-actions {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.app-content .control-group { min-width: 190px; }
.app-content .search-control-group { flex: 1; min-width: 220px; }

.app-content .action-group {
    display: flex;
    flex-direction: row;   /* eski kural düğmeleri alt alta ve tam genişlikte diziyordu */
    align-items: flex-end;
    gap: 8px;
    margin-left: auto;
}

.app-content .action-group .btn { width: auto; flex: 0 0 auto; }

.app-content .secondary-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* Arama Kutusu & İkon Hizalama Düzeltmesi */
.app-content .search-input-wrapper,
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.app-content .search-input-wrapper .search-icon,
.search-input-wrapper .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--ink-dim);
    pointer-events: none;
    z-index: 2;
    transition: color 0.2s ease, transform 0.2s ease;
}

.app-content .search-input-wrapper:focus-within .search-icon,
.search-input-wrapper:focus-within .search-icon {
    color: var(--amber);
    transform: translateY(-50%) scale(1.08);
}

.app-content .search-input-wrapper input,
.app-content .search-input-wrapper .form-control,
.search-input-wrapper #student-search-input,
.search-input-wrapper input[type="text"] {
    padding-left: 36px !important; /* İkon ve yazı örtüşmesini tamamen keser */
    padding-right: 12px !important;
    width: 100%;
    height: 34px !important;       /* Yanındaki Tom Select kutusuyla tam eşit yükseklik */
    min-height: 34px !important;
    border-radius: var(--r-md);
    line-height: normal;
}

/* --------------------------------------------------------------------------
   Fotoğraf yükleme bölümü
   -------------------------------------------------------------------------- */

.app-content .photo-upload-container { display: block; }

.app-content .upload-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.app-content .upload-title h2 {
    font-size: var(--fs-md);
    font-weight: 700;
    margin: 0;
}

.app-content .upload-title p {
    font-size: var(--fs-sm);
    color: var(--ink-dim);
    margin: 2px 0 0;
}

.app-content .upload-actions { margin-left: auto; }

.app-content .upload-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.app-content .method-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.app-content .method-header {
    display: block;      /* eski kural başlık ve alt başlığı yan yana yayıyordu */
    text-align: left;    /* ve alt başlığı ortalıyordu */
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
}

.app-content .method-header h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.app-content .method-header h3 i { color: var(--amber); font-size: 12px; }

.app-content .method-header p {
    font-size: var(--fs-sm);
    color: var(--ink-dim);
    margin: 2px 0 0;
}

.app-content .method-content { padding: 16px; }

/* Bırakma alanı — kesikli çerçeve, film penceresi gibi */
.app-content .photo-upload-zone,
.app-content .folder-upload-zone {
    border: 1.5px dashed var(--line);
    border-radius: var(--r-md);
    background: var(--panel-sunken);
    padding: 26px 16px;
    text-align: center;
    transition: border-color 0.14s, background 0.14s;
}

.app-content .photo-upload-zone:hover,
.app-content .folder-upload-zone:hover,
.app-content .photo-upload-zone.dragover,
.app-content .folder-upload-zone.dragover {
    border-color: var(--amber);
    background: var(--amber-wash);
}

.app-content .upload-icon {
    font-size: 26px;
    color: var(--ink-dim);
    margin-bottom: 8px;
    display: block;
}

.app-content .upload-zone-content h4 {
    font-size: var(--fs-base);
    font-weight: 700;
    margin: 0 0 3px;
}

.app-content .upload-zone-content p {
    font-size: var(--fs-sm);
    color: var(--ink-dim);
    margin: 0 0 10px;
}

.app-content .instruction-card {
    background: var(--cyan-wash);
    border: 1px solid var(--cyan-line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.app-content .instruction-card h5 {
    font-size: var(--fs-sm);
    font-weight: 700;
    margin: 0 0 7px;
}

.app-content .instruction-card ul {
    margin: 0;
    padding-left: 17px;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: 1.65;
}

/* İlerleme */
.app-content .progress-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    overflow: hidden;
}

.app-content .progress-fill {
    height: 100%;
    background: var(--amber);
    transition: width 0.25s ease;
}

.app-content .progress-text {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
    font-variant-numeric: tabular-nums;
}

.app-content .processing-area {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   İlk kurulum ekranı
   --------------------------------------------------------------------------
   Okul yeni kurulduğunda öğrenci yönetiminde gösterilir. Boş bir ekran, ne
   yapılacağını söyleyen bir davettir; burada davetin önünde bir ön koşul var
   ve uyarı o yüzden eylemden önce geliyor.
   -------------------------------------------------------------------------- */

.app-content .first-run {
    max-width: 620px;
    margin: 6vh auto 0;
    text-align: center;
    padding: 0 16px 32px;
}

.app-content .fr-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: var(--r-lg);
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 22px;
    box-shadow: var(--shadow-sm);
}

.app-content .first-run h2 {
    font-size: var(--fs-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--ink);
}

.app-content .fr-lead {
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--ink-dim);
    margin: 0 0 20px;
}

/* Uyarı — ekranın ağırlık merkezi */
.app-content .fr-warn {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: var(--r-lg);
    background: var(--amber-wash);
    border: 1px solid var(--amber-line);
}

.app-content .fr-warn > i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 16px;
    color: var(--amber-deep);
}

:root[data-surface="dark"] .app-content .fr-warn > i { color: var(--amber); }

.app-content .fr-warn strong {
    display: block;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.app-content .fr-warn p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-soft);
}

.app-content .fr-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.app-content .fr-actions .btn { height: 34px; padding: 0 16px; font-size: var(--fs-base); }

.app-content .fr-note {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-dim);
}

.app-content .fr-note code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Öğrenci ızgarası
   -------------------------------------------------------------------------- */

.app-content .students-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
}

/* Kart bir kontak baskı karesi gibi kurulur: üstte 3:4 fotoğraf, altında
   künye. Eylemler kartın üstünde durmaz, üzerine gelince belirir — 30 kartlık
   bir ızgarada 60 sürekli görünen düğme, fotoğrafların kendisinden daha çok
   yer kaplıyordu. */
.app-content .student-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 2px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.14s, box-shadow 0.14s;
}

.app-content .student-card:hover {
    border-color: var(--amber-line);
    border-top-color: var(--amber);
    box-shadow: var(--shadow-md);
}

/* Eski kural her kartın üstüne 4px mavi degrade şerit çiziyordu. Üst şerit
   artık durum taşıyor (border-top), dekoratif olan gidiyor. */
.app-content .student-card::before { content: none; }

/* Durumlar üst şeritte okunur: eksik bilgi, yüz tespiti yok, katılmıyor */
.app-content .student-card.incomplete { border-top-color: var(--alert); }
.app-content .student-card.no-face-detected { border-top-color: var(--warn); }
.app-content .student-card.non-participating { opacity: 0.62; }
.app-content .student-card.non-participating:hover { opacity: 1; }

.app-content .student-card .student-avatar,
.app-content .student-card .student-avatar-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--panel-sunken);
}

.app-content .student-card .student-avatar-placeholder {
    display: grid;
    place-items: center;
    color: var(--ink-dim);
}

.app-content .student-card .student-avatar-placeholder .icon {
    width: 30px;
    height: 30px;
}

.app-content .student-card .student-name {
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    padding: 8px 9px 0;
    margin: 0;
}

.app-content .student-card .student-class {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
    padding: 1px 9px 0;
    margin: 0;
}

.app-content .student-card .student-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 7px 9px 9px;
    margin: 0;
}

.app-content .student-card .student-order,
.app-content .student-card .student-school-no {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    width: auto;
    display: inline-block;
}

/* Eksik alanlar ve uyarı rozetleri */
.app-content .student-card .student-missing-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    padding: 0 9px 9px;
    font-size: var(--fs-xs);
}

.app-content .student-card .missing-label {
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.app-content .student-card .missing-item {
    font-family: var(--font-mono);
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--alert-wash);
    border: 1px solid var(--alert-line);
    color: var(--alert);
}

.app-content .student-card .face-detection-warning,
.app-content .student-card .student-badge.non-participant {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 9px 9px;
    padding: 3px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    background: var(--amber-wash);
    border: 1px solid var(--amber-line);
    color: var(--amber-deep);
}

:root[data-surface="dark"] .app-content .student-card .face-detection-warning,
:root[data-surface="dark"] .app-content .student-card .student-badge.non-participant {
    color: var(--amber);
}

.app-content .student-card .student-badge.non-participant .icon { width: 11px; height: 11px; }
.app-content .student-card .student-card-badges { margin: 0; }

/* Düzenle / sil — fotoğrafın üstünde, üzerine gelince */
.app-content .student-card .student-edit-badge,
.app-content .student-card .student-delete-badge {
    position: absolute;
    top: 6px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: var(--r-sm);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(16, 18, 22, 0.72);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.14s, background 0.14s;
}

.app-content .student-card .student-edit-badge { right: 34px; }
.app-content .student-card .student-delete-badge { right: 6px; }

.app-content .student-card:hover .student-edit-badge,
.app-content .student-card:hover .student-delete-badge,
.app-content .student-card .student-edit-badge:focus-visible,
.app-content .student-card .student-delete-badge:focus-visible { opacity: 1; }

.app-content .student-card .student-edit-badge:hover { background: var(--amber); color: #17130A; }
.app-content .student-card .student-delete-badge:hover { background: var(--alert); }

/* Sıra ve fotoğraf kaydırma okları — fotoğrafın alt kenarında */
.app-content .student-card .student-order-controls,
.app-content .student-card .student-photo-swap-controls {
    position: absolute;
    display: flex;
    gap: 3px;
    left: 6px;
    top: 6px;
    opacity: 0;
    transition: opacity 0.14s;
}

.app-content .student-card .student-photo-swap-controls { left: auto; right: 6px; top: 36px; }

.app-content .student-card:hover .student-order-controls,
.app-content .student-card:hover .student-photo-swap-controls { opacity: 1; }

.app-content .student-card .order-arrow {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: var(--r-sm);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(16, 18, 22, 0.72);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    font-size: 9px;
    cursor: pointer;
    transition: background 0.14s;
}

.app-content .student-card .order-arrow:hover:not(:disabled) { background: var(--amber); color: #17130A; }
.app-content .student-card .order-arrow:disabled { opacity: 0.32; cursor: not-allowed; }

/* Sürükle-bırak sıralama geri bildirimi (Sortable.js) */
.app-content .student-card.sortable-ghost {
    opacity: 0.4;
    border-style: dashed;
    border-color: var(--amber);
}

.app-content .student-card.sortable-chosen {
    box-shadow: var(--shadow-lg);
    border-color: var(--amber);
}

.app-content .students-grid.is-sorting .student-card { cursor: grab; }

/* ==========================================================================
   9b. Çekim yönetimi
   --------------------------------------------------------------------------
   Ekranın işi tek bir şey: sahadan dönen ZIP'i içeri almak. Uygulamayı
   indirmek sezonda bir kez yapılır, o yüzden üstte tek satırlık sessiz bir
   şerit. Bırakma alanı ekranın kalanını doldurur — masaüstü içe aktarma
   pencerelerindeki gibi, boşluğu hedefe çevirir.
   ========================================================================== */

.admin-tab-content { height: 100%; }

.app-content .admin-tab-panel#shooting-panel.active {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    min-height: 460px;
}

/* Saha hazırlığı şeridi */
.app-content .shoot-prep {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.app-content .prep-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 15px;
}

.app-content .prep-text { min-width: 220px; flex: 1; }

.app-content .prep-text h3 {
    font-size: var(--fs-base);
    font-weight: 700;
    margin: 0;
}

.app-content .prep-text p {
    font-size: var(--fs-sm);
    color: var(--ink-dim);
    margin: 1px 0 0;
}

.app-content .prep-meta {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.app-content .prep-stat {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    white-space: nowrap;
}

.app-content .prep-stat b { font-weight: 600; color: var(--ink); }
.app-content .prep-stat.is-alert { background: var(--alert-wash); border-color: var(--alert-line); }
.app-content .prep-stat.is-alert b { color: var(--alert); }
.app-content .prep-stat.is-ok { background: var(--ok-wash); border-color: var(--ok-line); }
.app-content .prep-stat.is-ok b { color: var(--ok); }

.app-content .prep-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Sahne: solda içe aktarma, sağda çekilecekler listesi */
.app-content .shoot-stage {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
}

.app-content .shoot-main {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Çekilecekler — bu ekranın hedefi: daha kimin fotoğrafı yok */
.app-content .shoot-todo {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.app-content .todo-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-soft);
}

.app-content .todo-head h4 {
    font-size: var(--fs-base);
    font-weight: 700;
    margin: 0;
}

.app-content .todo-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--alert-wash);
    border: 1px solid var(--alert-line);
    color: var(--alert);
}

.app-content .todo-count.is-done {
    background: var(--ok-wash);
    border-color: var(--ok-line);
    color: var(--ok);
}

.app-content .todo-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
}

.app-content .todo-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
}

.app-content .todo-row + .todo-row { box-shadow: inset 0 1px 0 var(--line-soft); }

.app-content .todo-name {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-sm);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-content .todo-class {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
    flex-shrink: 0;
}

/* Fotoğrafı var ama yüz bulunamadıysa ayrı bir durum: yeniden çekmek yerine
   önce yüz taraması denenebilir. */
.app-content .todo-row .todo-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 0 4px;
    border-radius: 2px;
    background: var(--amber-wash);
    border: 1px solid var(--amber-line);
    color: var(--amber-deep);
    flex-shrink: 0;
}

:root[data-surface="dark"] .app-content .todo-row .todo-tag { color: var(--amber); }

.app-content .todo-empty {
    padding: 24px 12px;
    margin: 0;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--ink-dim);
}

.app-content .todo-export {
    flex: 0 0 auto;
    margin: 0;
    border-radius: 0;
    border-width: 1px 0 0;
    justify-content: center;
    height: 34px;
}

@media (max-width: 1100px) {
    .app-content .shoot-stage { grid-template-columns: 1fr; }
    .app-content .shoot-todo { max-height: 260px; }
}

.app-content .shoot-drop {
    flex: 1;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    /* Çerçeve panel zeminine göre yeterince koyu olmalı; --line beyaz üstünde
       kayboluyor ve alan kocaman boş bir kutu gibi duruyordu. */
    border: 2px dashed var(--ink-dim);
    border-radius: var(--r-lg);
    background: var(--panel);
    transition: border-color 0.14s, background 0.14s;
}

.app-content .shoot-drop:hover,
.app-content .shoot-drop.dragover {
    border-color: var(--amber);
    background: var(--amber-wash);
    border-style: solid;
}

.app-content .shoot-drop:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

/* Kapsam bilerek geniş: hem çekim panelinde hem içe aktarma penceresinde
   kullanılıyor, pencere .app-content'in dışında yaşıyor. */
.drop-mark {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: var(--r-lg);
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 22px;
    transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.14s;
}

.app-content .shoot-drop:hover .drop-mark,
.app-content .shoot-drop.dragover .drop-mark,
.imp-drop:hover .drop-mark,
.imp-drop.dragover .drop-mark {
    background: var(--amber);
    border-color: var(--amber-deep);
    color: #17130A;
    transform: translateY(-2px);
}

.app-content .shoot-drop h4 {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0;
}

.app-content .shoot-drop > p {
    font-size: var(--fs-sm);
    color: var(--ink-dim);
    margin: 0;
}

.app-content .drop-hint {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
}

.app-content .drop-hint code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    color: var(--ink-soft);
}

/* Aktarım */
.app-content .shoot-run {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.app-content .run-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.app-content .run-head h4 {
    font-size: var(--fs-md);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.app-content .run-head h4 i { color: var(--amber); font-size: 13px; }

.app-content .run-status {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
}

.app-content .run-save { margin-left: auto; }

/* Önizleme ızgarası — kontak baskı kareleri */
.app-content .shoot-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    grid-auto-rows: min-content;
    gap: 8px;
    margin-top: 12px;
    overflow-y: auto;
}

.app-content .shoot-card {
    margin: 0;
    background: var(--panel-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.app-content .shoot-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.app-content .shoot-card figcaption {
    padding: 5px 7px 7px;
    display: grid;
    gap: 1px;
}

.app-content .shoot-name {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-content .shoot-class {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
}

@media (max-width: 760px) {
    .app-content .prep-meta, .app-content .prep-text p { display: none; }
}

/* ==========================================================================
   10. Grafikler
   ========================================================================== */

.chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;   /* kartlar birbirini uzatmasın */
    gap: 16px;
    margin-bottom: 16px;
}

.chart-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
}

.chart-head h3 {
    font-size: var(--fs-base);
    font-weight: 700;
    margin: 0;
}

.chart-note {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-dim);
}

.chart-body { padding: 8px 8px 4px; }

/* ==========================================================================
   11. Eklenti temaları
   --------------------------------------------------------------------------
   Kullanılan eklentiler kendi görünümlerini getirir; hepsini aynı jetonlara
   bağlamazsak uygulama beş ayrı tasarımın toplamı gibi görünür.
   ========================================================================== */

/* Toastify */
.toastify {
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    font-weight: 500;
    padding: 11px 14px;
    border-radius: var(--r-md);
    background: var(--chrome-300);
    border: 1px solid var(--chrome-line);
    border-left: 3px solid var(--chrome-faint);
    color: var(--chrome-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    max-width: 380px;
}

.toastify.tst-success { border-left-color: var(--ok); }
.toastify.tst-error { border-left-color: var(--alert); }
.toastify.tst-warning { border-left-color: var(--warn); }
.toastify.tst-info { border-left-color: var(--cyan); }

.toastify .tst-title {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--chrome-faint);
    margin-bottom: 2px;
}

.toastify .toast-close {
    color: var(--chrome-faint);
    opacity: 1;
    padding-left: 10px;
    font-size: 17px;
}

/* SweetAlert2 */

/* Onay kutusu her zaman en üstte durmalı: iletişim kutularının içinden de
   çağrılıyor (.app-dialog z-index 2800) ve eklentinin varsayılan 1060'ı
   pencerenin arkasında kalıyordu — kullanıcı görünmeyen bir onayı bekliyordu. */
.swal2-container { z-index: 3200; }

.swal2-popup.swal-desktop {
    font-family: var(--font-ui);
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 22px;
}

.swal2-popup.swal-desktop .swal2-title {
    font-size: var(--fs-title);
    font-weight: 700;
    color: var(--ink);
}

.swal2-popup.swal-desktop .swal2-html-container {
    font-size: var(--fs-md);
    color: var(--ink-soft);
    margin-top: 6px;
}

.swal2-popup.swal-desktop .swal2-actions { gap: 8px; margin-top: 18px; }

.swal2-popup.swal-desktop .swal2-styled {
    height: 32px;
    padding: 0 15px;
    border-radius: var(--r-md);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    font-weight: 600;
    box-shadow: none;
    margin: 0;
}

.swal2-popup.swal-desktop .swal2-confirm {
    background: var(--amber);
    color: #17130A;
    border: 1px solid var(--amber-deep);
}

.swal2-popup.swal-desktop .swal2-confirm.swal2-styled:focus { box-shadow: 0 0 0 3px var(--amber-wash); }

.swal2-popup.swal-desktop.swal-destructive .swal2-confirm {
    background: var(--alert);
    border-color: var(--alert);
    color: #FFFFFF;
}

.swal2-popup.swal-desktop .swal2-cancel {
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--line);
}

.swal2-container.swal2-backdrop-show { background: rgba(11, 13, 16, 0.55); }

/* NProgress — kehribar bir üretim şeridi, araç çubuğunun altında */
#nprogress .bar {
    background: var(--amber);
    height: 2px;
    z-index: 2500;
}

#nprogress .peg { box-shadow: 0 0 10px var(--amber), 0 0 5px var(--amber); }
#nprogress .spinner { display: none; }

/* Tom Select - Modern Denetim ve Açılır Menü (Dropdown) Tasarımı */

/* 1. Sarmalayıcı (Wrapper) Sifirlaması ve Genel Ayarlar */
.ts-wrapper,
.ts-wrapper.form-control,
.ts-wrapper.form-select,
.app-content .ts-wrapper,
.app-content .ts-wrapper.form-control,
.app-content .ts-wrapper.form-select {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

/* 2. Ana Denetim Alanı (.ts-control) */
.ts-wrapper .ts-control,
.app-content .ts-wrapper .ts-control {
    min-height: 34px;
    padding: 5px 32px 5px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ts-wrapper .ts-control input,
.app-content .ts-wrapper .ts-control input {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    line-height: inherit;
    min-width: 4px;
}

/* Hover & Focus Durumları */
.ts-wrapper:not(.disabled) .ts-control:hover,
.app-content .ts-wrapper:not(.disabled) .ts-control:hover {
    border-color: var(--amber);
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control,
.app-content .ts-wrapper.focus .ts-control,
.app-content .ts-wrapper.dropdown-active .ts-control {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-wash), var(--shadow-sm);
    background: var(--panel);
}

/* 3. Özel Açılır Ok (Chevron) Tasarımı */
.ts-wrapper.single .ts-control,
.app-content .ts-wrapper.single .ts-control {
    position: relative;
    cursor: pointer;
}

.ts-wrapper.single .ts-control::after,
.app-content .ts-wrapper.single .ts-control::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--ink-dim);
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-top-color 0.15s ease;
}

.ts-wrapper.single:hover .ts-control::after,
.app-content .ts-wrapper.single:hover .ts-control::after {
    border-top-color: var(--amber);
}

.ts-wrapper.single.dropdown-active .ts-control::after,
.app-content .ts-wrapper.single.dropdown-active .ts-control::after {
    transform: rotate(180deg);
    border-top-color: var(--amber);
}

/* 4. Açılır Menü (.ts-dropdown) - Premium Masaüstü Menü Deneyimi */
.ts-dropdown,
.app-content .ts-dropdown {
    position: absolute;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 16px 40px rgba(11, 13, 16, 0.22), var(--shadow-lg);
    color: var(--ink);
    font-size: var(--fs-base);
    margin-top: 6px;
    overflow: hidden;
    z-index: 9999;
    padding: 5px;
    animation: tsDropdownFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tsDropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ts-dropdown .ts-dropdown-content,
.app-content .ts-dropdown .ts-dropdown-content {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 2px;
}

.ts-dropdown .ts-dropdown-content::-webkit-scrollbar,
.app-content .ts-dropdown .ts-dropdown-content::-webkit-scrollbar { width: 8px; }

.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-track,
.app-content .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-track { background: transparent; }

.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb,
.app-content .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
    background: var(--line);
    border: 2px solid var(--panel);
    border-radius: 8px;
}

/* 5. Liste Öğeleri (.option) */
.ts-dropdown .option,
.app-content .ts-dropdown .option {
    padding: 8px 12px;
    border-radius: var(--r-md);
    margin-bottom: 2px;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.4;
}

.ts-dropdown .option:last-child,
.app-content .ts-dropdown .option:last-child {
    margin-bottom: 0;
}

/* İmleç / klavye ile üzerine gelindiğinde */
.ts-dropdown .option:hover,
.ts-dropdown .active,
.ts-dropdown .option.active,
.app-content .ts-dropdown .option:hover,
.app-content .ts-dropdown .active,
.app-content .ts-dropdown .option.active {
    background: var(--amber-wash);
    color: var(--amber-deep);
    font-weight: 600;
}

/* Seçili öğe (selected) */
.ts-dropdown .selected,
.ts-dropdown .option.selected,
.app-content .ts-dropdown .selected,
.app-content .ts-dropdown .option.selected {
    background: var(--panel-alt);
    color: var(--ink);
    font-weight: 600;
}

/* Hem seçili hem üzerine gelinmişse */
.ts-dropdown .selected.active,
.ts-dropdown .option.selected.active,
.ts-dropdown .selected:hover,
.app-content .ts-dropdown .selected.active,
.app-content .ts-dropdown .option.selected.active,
.app-content .ts-dropdown .selected:hover {
    background: var(--amber-wash);
    color: var(--amber-deep);
}

/* Seçili öğenin sağ tarafına zarif onay işareti (✓) */
.ts-dropdown .option.selected::after,
.ts-dropdown .selected::after,
.app-content .ts-dropdown .option.selected::after,
.app-content .ts-dropdown .selected::after {
    content: '✓';
    font-weight: 700;
    color: var(--amber);
    margin-left: 8px;
    font-size: 14px;
    flex-shrink: 0;
}

/* Sonuç Bulunamadı (.no-results) tasarımı */
.ts-dropdown .no-results,
.app-content .ts-dropdown .no-results {
    padding: 16px 12px;
    text-align: center;
    color: var(--ink-dim);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-style: italic;
    background: transparent;
}

.ts-dropdown .optgroup-header,
.app-content .ts-dropdown .optgroup-header {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-dim);
    background: var(--panel-alt);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    margin: 4px 0 2px 0;
    font-weight: 700;
    cursor: default;
}

/* SimpleBar / yerel kaydırma çubukları — ince, masaüstü ölçüsü */
.simplebar-scrollbar::before {
    background: var(--ink-dim);
    border-radius: 20px;
}

.sb-scroll::-webkit-scrollbar,
.app-content::-webkit-scrollbar,
.cmdk-list::-webkit-scrollbar { width: 10px; height: 10px; }

.sb-scroll::-webkit-scrollbar-track,
.cmdk-list::-webkit-scrollbar-track { background: var(--chrome-200); }

.app-content::-webkit-scrollbar-track { background: var(--surface); }

.sb-scroll::-webkit-scrollbar-thumb,
.cmdk-list::-webkit-scrollbar-thumb {
    background: var(--chrome-400);
    border: 3px solid var(--chrome-200);
    border-radius: 10px;
}

.app-content::-webkit-scrollbar-thumb {
    background: var(--line);
    border: 3px solid var(--surface);
    border-radius: 10px;
}

.app-content::-webkit-scrollbar-thumb:hover { background: var(--ink-dim); }

/* Split.js tutamağı */
.gutter {
    background: var(--chrome-line);
    cursor: col-resize;
    transition: background 0.12s;
}

.gutter:hover { background: var(--amber); }

/* ApexCharts */
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark {
    background: var(--chrome-300) !important;
    border: 1px solid var(--chrome-line) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--chrome-text) !important;
    font-family: var(--font-ui) !important;
}

.apexcharts-tooltip-title {
    background: var(--chrome-200) !important;
    border-bottom: 1px solid var(--chrome-line) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--fs-xs) !important;
}

.apexcharts-text tspan { font-family: var(--font-mono) !important; }

/* Bootstrap ipuçları */
.tooltip.bs-tooltip-auto .tooltip-inner,
.tooltip .tooltip-inner {
    background: var(--chrome-300);
    border: 1px solid var(--chrome-line);
    color: var(--chrome-text);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    padding: 4px 8px;
    border-radius: var(--r-sm);
}

.tooltip .tooltip-arrow::before { border-top-color: var(--chrome-300); }
.tooltip { --bs-tooltip-opacity: 1; }

/* ==========================================================================
   12. Eski kabuk kalıntılarını bastır
   --------------------------------------------------------------------------
   Sayfa içi <style> bloğu hâlâ web düzenine ait kuralları taşıyor.
   Masaüstü kabuğu bunları devralır.
   ========================================================================== */

body.app-body .modern-header,
body.app-body .admin-tabs-nav,
body.app-body .page-header { display: none !important; }

/* admin_style.css, .admin-tab-btn'e üst sekme çubuğu için yatay bir
   gösterge çizgisi ekliyor. Kenar çubuğunda gösterge sol taraftaki kehribar
   ray; yatay çizgi öğelerin arasında asılı kalıyordu. */
body.app-body .sb-item.admin-tab-btn::before { content: none; }

/* Aynı yerden gelen ikinci kalıntı: eski sekme şeridi dar ekranda yerden
   kazanmak için `.admin-tab-btn` içindeki bütün <span>'leri gizliyordu.
   Kenar çubuğu öğeleri o sınıfı taşıdığı için menü düğmesiyle açılan çekmece
   isimsiz bir ikon sütununa dönüşüyordu. Bu bant çekmece kipinin içinde
   kaldığından `sidebar-collapsed` ile çakışma yok: daraltma yalnızca geniş
   ekranda uygulanıyor. */
@media (max-width: 768px) {
    body.app-body .sb-item.admin-tab-btn span { display: inline; }
}

body.app-body .container {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
}

body.app-body .admin-tab-content { display: block; }

/* Geri düğmesi kabukta zaten var */
body.app-body #backButton,
body.app-body .back-button-container { display: none !important; }

/* ==========================================================================
   13. Uyarlanabilirlik ve erişilebilirlik
   ========================================================================== */

@media (max-width: 1080px) {
    :root { --sidebar-w: 196px; }
    .tb-school { max-width: 150px; }
    .tb-search { flex-basis: 280px; }
}

/* Dar ekranda kenar çubuğu çekmeceye döner. Kural bilerek `:has(.tb-burger)`
   ile sınırlı: çekmeceyi açacak düğmesi olmayan bir sayfada (süper yönetici
   paneli) kenar çubuğu ekran dışına kayar ve geri getirmenin yolu kalmazdı;
   orada akışta durup daralması doğrusu. */
@media (max-width: 860px) {
    .tb-search { display: none; }
    body:has(.tb-burger) .app-sidebar {
        position: absolute;
        top: var(--titlebar-h);
        bottom: var(--statusbar-h);
        left: 0;
        z-index: 45;
        transform: translateX(-100%);
        transition: transform 0.18s ease;
        box-shadow: var(--shadow-lg);
    }
    body.sidebar-open:has(.tb-burger) .app-sidebar { transform: none; }

    /* Çekmecede daraltma tutamağının işi yok: çekmece ya açık ya kapalı,
       60 px'lik ikon şeridi diye bir ara durum yok. Tutamak bırakılsaydı
       tıklandığında hiçbir şey olmayan bir düğme olurdu. */
    body:has(.tb-burger) .sb-collapse { display: none; }

    .st-cell.is-optional { display: none; }
}

:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* Tom Select'in sardığı <select>'e ve onu taşıyan .select-container'a eski
   admin_style.css kuralları basmaya çalışıyordu (ağır padding, büyük font,
   görünmez "⌄" oku). Tom Select bağlandığı an bunları sessize alıyoruz. */
.app-content .select-container:has(.ts-wrapper) select,
.select-container:has(.ts-wrapper) select,
.select-wrapper:has(.ts-wrapper) select {
    padding: 0 !important;
    margin: 0 !important;
    width: 1px !important;
    height: 100% !important;
    border: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-content .select-container:has(.ts-wrapper)::after,
.select-container:has(.ts-wrapper)::after,
.select-wrapper:has(.ts-wrapper)::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   Electron.js & Masaüstü Uygulaması: Konsol Modalları ve Kompakt Girdi Alanları
   ========================================================================== */

/* 1. Modal Arkaplanı ve Örtü (Dark Room Dialog Overlay) */
.modal-overlay,
.large-photo-overlay,
.save-modal {
    background: rgba(11, 13, 16, 0.80) !important;
    backdrop-filter: blur(6px);
    z-index: 9999 !important;
}

/* 2. Modal Ana Kutu (Console Dialog Surface) */
.modal-overlay .modal-content,
.modal-content,
.download-modal-content,
#saved-pages-modal .modal-content,
.student-selector-modal .modal-content {
    background: var(--panel, #171B21) !important;
    color: var(--ink, #ECEEF2) !important;
    border: 1px solid var(--line, #2B313A) !important;
    border-radius: var(--r-lg, 9px) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    padding: 20px 24px !important;
    font-family: var(--font-ui, 'Archivo', sans-serif);
    font-size: var(--fs-base, 13px);
    animation: modalConsoleAppear 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 620px;
}

@keyframes modalConsoleAppear {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 3. Modal Başlıkları (Desktop Window Title Typography) */
.modal-content .modal-header,
.modal-content header {
    padding: 0 36px 12px 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--line, #2B313A) !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-content h2,
.modal-content h3,
.edit-modal-content h3,
.modal-content .card-title {
    font-family: var(--font-ui, 'Archivo', sans-serif);
    font-size: var(--fs-title, 17px) !important;
    font-weight: 600 !important;
    color: var(--ink, #ECEEF2) !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.modal-content p,
.modal-content .subtext,
.modal-content .description {
    font-size: var(--fs-sm, 11.5px);
    color: var(--ink-soft, #B0B7C3);
    line-height: 1.5;
    margin-bottom: 10px;
}

/* 4. Masaüstü Kapatma Butonu (Dialog Close Box) */
.modal-overlay .modal-close,
.modal-content .modal-close,
.modal-close {
    z-index: 1000 !important;
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    width: 26px !important;
    height: 26px !important;
    background: var(--panel-alt, #1D222B) !important;
    color: var(--ink-dim, #717A8A) !important;
    border: 1px solid var(--line, #2B313A) !important;
    border-radius: var(--r-md, 6px) !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.modal-overlay .modal-close:hover,
.modal-content .modal-close:hover {
    background: var(--alert-wash, rgba(230, 80, 80, 0.15)) !important;
    color: var(--alert, #F25A5A) !important;
    border-color: var(--alert, #F25A5A) !important;
    transform: none !important;
    box-shadow: 0 0 8px rgba(242, 90, 90, 0.2);
}

/* 5. Kompakt ve İdeal Masaüstü Metin Kutuları & Girdiler (Textboxes & Selects) */
/* Daha önce min-height: 150px veya dev padding alan girdiler kilitleniyor */
.modal-content input[type="text"]:not(.ts-wrapper input),
.modal-content input[type="password"]:not(.ts-wrapper input),
.modal-content input[type="email"]:not(.ts-wrapper input),
.modal-content input[type="number"]:not(.ts-wrapper input),
.modal-content input[type="date"]:not(.ts-wrapper input),
.modal-content input[type="search"]:not(.ts-wrapper input),
.modal-content input.edit-modal-textarea,
.modal-content select.edit-modal-textarea,
.modal-content .form-control:not(.ts-wrapper):not(.ts-wrapper input),
.modal-content .form-select:not(.ts-wrapper),
.modal-content .staff-form-input,
.modal-content .staff-form-select,
.edit-modal-content input,
.edit-modal-content select,
.modal-content input {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 10px !important;
    font-family: var(--font-ui, 'Archivo', sans-serif) !important;
    font-size: var(--fs-base, 13px) !important;
    font-weight: 500 !important;
    color: var(--ink, #ECEEF2) !important;
    background: var(--panel-sunken, #10141A) !important;
    border: 1px solid var(--line, #2B313A) !important;
    border-radius: var(--r-md, 6px) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    resize: none !important;
    line-height: 30px !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease !important;
    box-sizing: border-box !important;
}

/* Tom Select bileşenlerinin modallarda aşırı şişmesini engelle */
.modal-content .ts-wrapper .ts-control {
    background: var(--panel-sunken, #10141A) !important;
    border-color: var(--line, #2B313A) !important;
    min-height: 32px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Textarea (Çok satırlı alanlar için ideal esneklik) */
.modal-content textarea,
.modal-content textarea.edit-modal-textarea,
.edit-modal-content textarea {
    width: 100% !important;
    min-height: 90px !important;
    max-height: 250px !important;
    padding: 8px 10px !important;
    font-family: var(--font-ui, 'Archivo', sans-serif) !important;
    font-size: var(--fs-base, 13px) !important;
    color: var(--ink, #ECEEF2) !important;
    background: var(--panel-sunken, #10141A) !important;
    border: 1px solid var(--line, #2B313A) !important;
    border-radius: var(--r-md, 6px) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    line-height: 1.4 !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}

/* Girdi Odaklanma ve Hover (Kehribar Vurgu) */
.modal-content input:hover:not(:disabled):not(.ts-wrapper input),
.modal-content select:hover:not(:disabled),
.modal-content textarea:hover:not(:disabled),
.edit-modal-content input:hover:not(:disabled),
.edit-modal-content select:hover:not(:disabled),
.edit-modal-content textarea:hover:not(:disabled) {
    border-color: var(--ink-dim, #717A8A) !important;
}

.modal-content input:focus:not(.ts-wrapper input),
.modal-content select:focus,
.modal-content textarea:focus,
.edit-modal-content input:focus,
.edit-modal-content select:focus,
.edit-modal-content textarea:focus {
    outline: none !important;
    border-color: var(--amber, #F0A32E) !important;
    box-shadow: 0 0 0 3px var(--amber-wash, rgba(240, 163, 46, 0.15)), inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    background: var(--panel, #171B21) !important;
}

/* Modal Etiketleri ve Satır Araları */
.modal-content label:not(.logo-placeholder):not(.photo-upload-label),
.edit-modal-content label:not(.logo-placeholder):not(.photo-upload-label),
.modal-content .form-label {
    font-family: var(--font-ui, 'Archivo', sans-serif);
    font-size: var(--fs-sm, 13px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: #FFFFFF !important;
    margin: 8px 0 4px 0 !important;
    display: block;
}

.edit-modal-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* 6. Aksiyon Butonları (Console Button Palette) */
.modal-content .edit-modal-actions,
.modal-content .modal-actions,
.modal-content .action-group,
.modal-content .button-group {
    margin-top: 20px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--line, #2B313A) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
}

.modal-content .btn,
.modal-content button:not(.modal-close):not(.btn-icon) {
    height: 32px !important;
    padding: 0 16px !important;
    font-family: var(--font-ui, 'Archivo', sans-serif) !important;
    font-size: var(--fs-sm, 12px) !important;
    font-weight: 600 !important;
    border-radius: var(--r-md, 6px) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.12s ease !important;
    box-sizing: border-box !important;
}

.modal-content .btn-secondary,
.modal-content button[data-dismiss="modal"],
.modal-content button.cancel-btn {
    background: var(--panel-alt, #1D222B) !important;
    border: 1px solid var(--line, #2B313A) !important;
    color: var(--ink, #ECEEF2) !important;
}

.modal-content .btn-secondary:hover,
.modal-content button[data-dismiss="modal"]:hover {
    background: var(--line-soft, #333945) !important;
    border-color: var(--ink-dim, #717A8A) !important;
}

.modal-content .btn-primary,
.modal-content .btn-success,
.modal-content button[type="submit"],
.modal-content .btn:not(.btn-secondary):not(.btn-danger):not(.modal-close):not(.btn-icon) {
    background: var(--amber, #F0A32E) !important;
    color: #0B0D10 !important;
    border: 1px solid var(--amber-deep, #D4891A) !important;
    font-weight: 700 !important;
}

.modal-content .btn-primary:hover,
.modal-content .btn-success:hover,
.modal-content button[type="submit"]:hover,
.modal-content .btn:not(.btn-secondary):not(.btn-danger):not(.modal-close):not(.btn-icon):hover {
    background: var(--amber-bright, #FFB43A) !important;
    box-shadow: 0 2px 8px rgba(240, 163, 46, 0.3) !important;
}

.modal-content .btn-danger {
    background: var(--alert-wash, rgba(230, 80, 80, 0.15)) !important;
    color: var(--alert, #F25A5A) !important;
    border: 1px solid var(--alert-line, #A33A3A) !important;
}

.modal-content .btn-danger:hover {
    background: var(--alert, #F25A5A) !important;
    color: #0B0D10 !important;
}

/* ==========================================================================
   Staff List Modal Kapatma Butonu Görünürlük Düzeltmesi & Logo Ortalama
   ========================================================================== */

/* Personel Listesi Modalının Kapatma Butonu Görünürlüğü ve Sticky Header Ayarı */
.modal-content:has(.staff-list-modal),
.staff-list-modal {
    background: var(--panel, #171B21) !important;
    color: var(--ink, #ECEEF2) !important;
}

/* Satır sonundaki üç eylem düğmesi ikon ölçüsündedir. Yukarıdaki
   `.modal-content .btn { padding: 0 16px !important }` kuralı bu düğmelerde
   ikona yer bırakmıyor, düğmeler içi boş renkli kareler gibi görünüyordu.
   Burada kare ölçü ve sıfır boşluk veriyoruz; üçü aynı kutuda olduğu için
   satırlar arasında da hizalı duruyorlar. Seçicinin uzunluğu bilinçli:
   yukarıdaki `.modal-content button:not(.modal-close):not(.btn-icon)` kuralı
   da !important taşıyor ve ondan daha belirgin olmak gerekiyor. */
.modal-content .staff-list-modal .staff-list-actions > .btn,
.modal-content .staff-list-modal .staff-list-actions > label.btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}
.modal-content .staff-list-modal .staff-list-actions > .btn svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}

.modal-content .staff-list-header,
.staff-list-header {
    background: var(--panel, #171B21) !important;
    border-bottom: 1px solid var(--line, #2B313A) !important;
    padding: 18px 56px 0 20px !important; /* Kapatma butonunun üstünü örtmemesi için sağa 56px güvenli boşluk */
    z-index: 10 !important;
}

/* Okul Logosu Yükleme Alanı ve İkon Tam Ortalama Düzeltmesi */
.modal-content .logo-preview-container,
.logo-preview-container {
    position: relative !important;
    width: 100% !important;
    min-height: 180px !important;
    aspect-ratio: 1 / 1;
    background: var(--panel-sunken, #10141A) !important;
    border: 2px dashed var(--line, #2B313A) !important;
    border-radius: var(--r-lg, 12px) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

.modal-content .logo-preview-container:hover,
.logo-preview-container:hover {
    border-color: var(--amber, #F0A32E) !important;
    background: var(--panel-alt, #1D222B) !important;
}

/* Logo yükle yazısını ve ikonunu kutu içinde mükemmel hizayla merkezle */
.modal-content label.logo-placeholder,
.edit-modal-content label.logo-placeholder,
label.logo-placeholder,
.logo-placeholder {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: var(--ink-soft, #94a3b8) !important;
    gap: 12px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: var(--font-ui, sans-serif) !important;
}

.logo-placeholder svg,
.logo-placeholder .icon {
    width: 46px !important;
    height: 46px !important;
    color: var(--amber, #F0A32E) !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    display: block !important;
    transition: transform 0.2s ease !important;
}

.logo-preview-container:hover .logo-placeholder svg {
    transform: scale(1.1) !important;
}

.logo-placeholder span {
    font-size: var(--fs-md, 14px) !important;
    font-weight: 600 !important;
    color: var(--ink, #ECEEF2) !important;
    display: block !important;
    text-align: center !important;
    line-height: 1.4 !important;
    margin: 0 auto !important;
}

/* ==========================================================================
   YÜKSEK KONTRAST VE OKUNABİLİRLİK
   --------------------------------------------------------------------------
   Bu blok karanlık oda için yazılmıştı ve renkleri sabit koyu değerlerle
   dayatıyordu. Ama yüzey ayrımı yapmadığı için açık temada da geçerliydi:
   sınıf listesi beyaz açılır menüde beyaz yazıyla görünmüyor, arama kutusu
   beyaz kartın ortasında siyah bir blok olarak duruyordu. Renkler artık
   yüzey jetonlarından geliyor; ikisi de iki temada okunur.
   ========================================================================== */

/* Modal ve panel içindeki silik yardımcı yazılar */
.modal-content p, .modal-content .subtext, .modal-content .description,
.text-muted, small.text-muted, .form-text {
    color: var(--ink-soft) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

/* Form girdileri ve select menüleri */
.modal-content input, .modal-content select, .modal-content textarea,
.form-control, .form-select, select option {
    color: var(--ink) !important;
    background-color: var(--panel-sunken) !important;
    border-color: var(--line) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

/* Kabuk her iki temada grafit kalıyor; oradaki girdilerin ipucu yazısı
   yüzey jetonuna bağlanmaz, sabit açık gri kalır. */
input::placeholder {
    color: #94A0B2;
    opacity: 1;
}

.modal-content input::placeholder, .modal-content textarea::placeholder,
.form-control::placeholder, .app-content input::placeholder {
    color: var(--ink-dim) !important;
    opacity: 1 !important;
}

/* TS-Dropdown açılır menü öğeleri */
.ts-dropdown .option, .app-content .ts-dropdown .option {
    color: var(--ink) !important;
    font-size: 13.5px !important;
}

.ts-dropdown .option:hover, .ts-dropdown .active, .ts-dropdown .option.active,
.app-content .ts-dropdown .option:hover, .app-content .ts-dropdown .active, .app-content .ts-dropdown .option.active {
    background: var(--amber, #F0A32E) !important;
    color: #000000 !important;
    font-weight: 700 !important;
}