/* ═══════════════════════════════════════════════════════════════════════════
 * TEKNOT — main.css
 *
 * KURAL: @import'lar EN ÜSTTE olmalı — araya herhangi bir kural girerse
 * tarayıcı sonraki tüm @import'ları yok sayar (CSS spec).
 *
 * Sıra:
 *   1. @import'lar (fonts + diğer CSS dosyaları)
 *   2. :root tokens (inline — ayrı HTTP round-trip olmasın)
 *   3. Reset (inline — fonts'tan sonra, body font-family için)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Font Face ───────────────────────────────────────────────────────────
   WHY: @font-face reset'ten önce gelmeli — body'deki font-family: Outfit
   çalışmadan önce tarayıcı fontu tanımış olmalı, aksi halde sisteme düşer
   ve font gelince layout yeniden hesaplanır (CLS). */
@import url("./fonts.css");

/* ─── 2. Component & Layout Imports ─────────────────────────────────────── */
@import url('../partials/sidebar/sidebar.css');
@import url('./animations.css');
@import url('./layout.css');
@import url('./glass.css');
@import url('./header.css');
@import url('./buttons.css');
@import url('./badges.css');
@import url('./cards.css');
@import url('./table.css');
@import url('./pagination.css');
@import url('./forms.css');
@import url('./modal.css');
@import url('./utils.css');

/* WHY: drawer.css sadece support-tickets sayfasında kullanılıyor.
   manifest.js support-tickets css[]'e taşındı — 42 sayfa gereksiz yüklemeden kurtuldu. */
@import url('./toast.css');
@import url('./tickets.css');
@import url('./content.css');

/* WHY: lock.css manifest settings-auth-security css[]'de zaten var — sadece 1 sayfaya lazım.
   Buradan kaldırıldı: 42 sayfa gereksiz yüklemeden kurtuldu. */
@import url('../partials/footer/footer.css');
@import url('./health-modal.css');
@import url('./api-status.css');
@import url('../partials/section-navbar/section-navbar.css');
@import url('./print.css');
@import url('./responsive.css');
@import url('./premium.css');
@import url('./kpi-cards.css');
@import url('./overrides.css');


/* ═══════════════════════════════════════════════════════════════════════════
 * 2b. Page-Scoped Token Overrides
 *
 * Global token'ları belirli sayfalarda override eder.
 * :root token'larının hemen altında gelir — sayfa açılmadan önce
 * doğru renk cascade'e girmeli, aksi halde yanlış renk render edilir
 * sonra düzelir (görsel sıçrama).
 *
 * WHY: login.css manifest üzerinden geç yükleniyor — bootstrap.js inject
 *      gecikmesi nedeniyle body token override'ları ilk render'a yetişemez.
 *      html:has() selector ile page-id meta tag'ine göre scope'landı,
 *      diğer sayfaları etkilemez.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 * 3. Design Token Registry
 *
 * Kimseye bağımlı değil. Herkes buna bağımlı.
 * Cascade'in sıfır noktası — tüm var(--x) buradan çözülür.
 *
 * ⚠️  Bu bloğu @import ile dışarı TAŞIMA — ayrı HTTP round-trip olur,
 *     tokenlar geç gelirse tüm cascade renksiz render eder.
 *
 * Düzenlemek için bu dosyayı aç: client/styles/main.css (bu satırlar)
 * tokens.css artık sadece yönlendirme dosyasıdır — içi boş.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ─── Brand Colors ─────────────────────────────────────────────────────── */
  --accent-cyan: #00f2fe;
  --accent-cyan-rgb: 0, 242, 254;
  --accent-blue: #4facfe;
  --accent-green: #10b981;
  --accent-red: #ef4444;
  --accent-yellow: #f59e0b;
  --accent-blue-500: #3b82f6;
  --accent-purple: #8b5cf6;
  --accent-violet: var(--accent-purple);
  --accent-telegram: #08c;
  --accent: var(--accent-cyan);

  /* ─── Brand Color Variants ─────────────────────────────────────────────── */
  --accent-cyan-light: #00d2ff;
  --accent-purple-light: #c4b5fd;
  --accent-purple-lighter: #d8b4fe;
  --accent-purple-text: #a78bfa;
  --accent-blue-text: #93c5fd;
  --accent-green-light: #6ee7b7;
  --accent-green-lighter: #34d399;
  --accent-green-dark: #059669;
  --accent-yellow-light: #fcd34d;
  --accent-yellow-dark: #d97706;
  --accent-red-dark: #b91c1c;
  --accent-red-light: #fca5a5;

  /* ─── Alpha Variants (bg + border çiftleri) ────────────────────────────── */
  --accent-cyan-bg: rgb(0, 242, 254, 0.1);
  --accent-cyan-border: rgb(0, 242, 254, 0.2);
  --accent-blue-bg: rgb(59, 130, 246, 0.1);
  --accent-blue-border: rgb(59, 130, 246, 0.2);
  --accent-green-bg: rgb(16, 185, 129, 0.1);
  --accent-green-border: rgb(16, 185, 129, 0.2);
  --accent-red-bg: rgb(239, 68, 68, 0.1);
  --accent-red-border: rgb(239, 68, 68, 0.2);
  --accent-yellow-bg: rgb(245, 158, 11, 0.1);
  --accent-yellow-border: rgb(245, 158, 11, 0.2);
  --accent-purple-bg: rgb(139, 92, 246, 0.1);
  --accent-purple-border: rgb(139, 92, 246, 0.2);

  /* ─── Background Scale ─────────────────────────────────────────────────── */
  --bg-color: #18181b;

  /* zinc-900 — body */
  --bg-dark-1: #1f1f23;

  /* surface — drawers, well sections */
  --bg-dark-2: #27272a;

  /* elevated — modals, select options */
  --bg-dark-3: #141417;

  /* below body — terminals, code blocks */
  --bg-dark-4: #303035;

  /* high elevation — tickets, highlighted rows */
  --bg-dark-5: #0f0f12;

  /* deepest — abyss log backgrounds */

  /* ─── Text Scale ───────────────────────────────────────────────────────── */
  --text-main: #fff;
  --text-light: #e2e8f0;
  --text-lighter: #f1f5f9;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --text-disabled: rgb(255, 255, 255, 0.3);
  --text-muted-border: rgb(148, 163, 184, 0.2);

  /* ─── Surface Scale ─────────────────────────────────────────────────────── */
  --glass-bg: #212126;

  /* card surface */
  --glass-bg-faint: #1c1c1f;

  /* faint fill */
  --glass-bg-hover: #28282d;

  /* hover state */
  --glass-bg-light: #212126;

  /* alias — same as glass-bg */
  --glass-border: rgb(255, 255, 255, 0.1);
  --glass-border-faint: rgb(255, 255, 255, 0.05);

  /* ─── Overlay Scale ────────────────────────────────────────────────────── */
  --overlay-light: rgb(0, 0, 0, 0.2);
  --overlay-medium: rgb(0, 0, 0, 0.3);
  --overlay-heavy: rgb(0, 0, 0, 0.6);

  /* ─── Border Radius Scale ──────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ─── Spacing Scale ────────────────────────────────────────────────────── */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* ─── Font Size Scale ──────────────────────────────────────────────────── */
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.75rem;
  --font-size-md: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;

  /* ─── Z-Index Scale ────────────────────────────────────────────────────── */
  --z-below: -1;

  /* arka plan şekilleri, bg layers          */
  --z-flat: 0;

  /* dekoratif eleman base                   */
  --z-base: 1;

  /* local stacking context içinde hafif üst */
  --z-raised: 2;

  /* aktif tab, slider knob, sticky header   */
  --z-dropdown: 5;

  /* blur overlay, dropdown                  */
  --z-above: 10;

  /* input icon overlay (password field)     */
  --z-input-icon: 11;

  /* label, hover pop-up, badge              */
  --z-overlay: 20;

  /* section lock overlay                    */
  --z-sticky: 90;

  /* .glass-header sticky                    */
  --z-popup: 100;

  /* floating panel, section overlay         */
  --z-sidebar: 200;

  /* sidebar nav                             */
  --z-sb-backdrop: 199;

  /* sidebar backdrop scrim (below sidebar)  */
  --z-sb-topbar: 210;

  /* mobile topbar (above sidebar)           */
  --z-float: 300;

  /* floating action button                  */
  --z-drawer-backdrop: 1000;

  /* drawer backdrop scrim                   */
  --z-drawer: 1001;

  /* side drawer                             */
  --z-nav-mobile: 9999;

  /* mobile nav backdrop                     */
  --z-top-bar: 10000;

  /* top progress bar (above mobile nav)     */
  --z-modal: 10001;

  /* modal overlay                           */
  --z-toast: 10002;

  /* toast (modal üstünde)                   */

  /* ─── Misc ─────────────────────────────────────────────────────────────── */
  --color-gold: #ffd700;
  --color-indigo: #818cf8;
  --color-indigo-500: rgb(99, 102, 241);
  --color-teal: rgb(6, 182, 212);
  --print-border: #ccc;

  /* ─── Security Log Accent Tokens ───────────────────────────────────────────
     WHY: pit (red) ve abyss (yellow) log modal'larında tema rengi dinamik
          değişiyor — scoped class yerine token olarak tutuldu çünkü
          security-layer.css bu token'ları iki farklı selector'dan kullanır. */
  --log-pit-header-bg: rgb(239, 68, 68, 0.08);
  --log-pit-header-border: rgb(239, 68, 68, 0.10);
  --log-pit-modal-border: rgb(239, 68, 68, 0.20);
  --log-pit-summary-bg: rgb(239, 68, 68, 0.03);
  --log-pit-info-bg: rgb(239, 68, 68, 0.08);
  --log-pit-leak-border: rgb(239, 68, 68, 0.30);
  --log-pit-save-hover-bg: rgb(239, 68, 68, 0.20);
  --log-abyss-color: #f59e0b;
  --log-abyss-header-bg: rgb(245, 158, 11, 0.05);
  --log-abyss-header-border: rgb(245, 158, 11, 0.10);
  --log-abyss-modal-border: rgb(245, 158, 11, 0.20);
  --log-abyss-summary-bg: rgb(245, 158, 11, 0.03);
  --log-abyss-info-bg: rgb(245, 158, 11, 0.08);
  --log-abyss-leak-border: rgb(245, 158, 11, 0.30);
  --log-abyss-save-hover-bg: rgb(245, 158, 11, 0.20);

  /* ─── Responsive Layout Design Tokens (desktop ≥ 1025px defaults) ──────── */

  /* WHY: Centralised here so component CSS never writes @media — only var().  */

  /* Layout */
  --dashboard-ml:     var(--sb-width);
  --page-px:          2rem;
  --page-pt:          2rem;

  /* Glass card padding tiers */
  --card-pad-hero:    2.5rem;
  --card-pad-section: 2rem;
  --card-pad:         1.5rem;
  --card-pad-sm:      1rem;

  /* Chart heights */
  --chart-h:          420px;

  /* Typography */
  --page-title-fs:     1.8rem;
  --page-title-icon-s: 32px;
  --stat-val-fs:       2.2rem;

  /* Nav link vertical density (height-aware) */
  --nav-link-py: 0.55rem;
}

/* ── Tablet 768–1024px ────────────────────────────────────────────────────── */
@media (width >=768px) and (width <=1024px) {
  :root {
    --dashboard-ml: var(--sb-collapsed);
    --page-px: 1.5rem;
  }
}

/* ── Mobile ≤ 767px ───────────────────────────────────────────────────────── */
@media (width <=767px) {
  :root {
    --dashboard-ml: var(--sb-collapsed);
    --page-px: 0.75rem;
    --page-pt: calc(var(--sb-topbar-h) + 1rem);
    --card-pad-hero: 2rem;
    --card-pad-section: 1.5rem;
    --card-pad: 1.25rem;
    --card-pad-sm: 0.75rem;
    --chart-h: 280px;
    --page-title-fs: 1.4rem;
    --page-title-icon-s: 24px;
    --stat-val-fs: 1.8rem;
  }
}

/* ── Small ≤ 480px ────────────────────────────────────────────────────────── */
@media (width <=480px) {
  :root {
    --page-px: 0.5rem;
    --card-pad-hero: 1.5rem;
    --card-pad-section: 1.25rem;
    --card-pad: 1rem;
    --card-pad-sm: 0.6rem;
    --chart-h: 240px;
    --page-title-fs: 1.25rem;
    --stat-val-fs: 1.6rem;
  }
}

/* ── Yükseklik tabanlı nav yoğunluğu (1920×1080 gibi kısa ekranlar) ──────── */
@media (height <=900px) {
  :root {
    --nav-link-py: 0.4rem;
  }
}

@media (height <=750px) {
  :root {
    --nav-link-py: 0.3rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 4. Reset — Browser Default Sıfırlama
 *
 * Tüm browser'ların kendi default stillerini sıfırlar.
 * Fonts'tan hemen sonra gelir — body'de font-family kullanmak için
 * @font-face'in tanımlanmış olması şart.
 *
 * Kural: sadece sıfırlama. Tasarım kararı yok, renk yok, layout yok.
 * ═══════════════════════════════════════════════════════════════════════════ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Outfit, 'Outfit Fallback', 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Android Emoji', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 5. Scrollbar — Global Scrollbar Stili
 *
 * Tüm sayfalarda geçerli. Reset'ten sonra gelir — body hazır olmalı.
 * Scoped override'lar kendi dosyalarında kalır (örn: sidebar.css).
 *
 * WHY: -webkit-scrollbar non-standard ama tüm Chromium tabanlı tarayıcılar
 *      destekler — panel sadece modern desktop browser'larda çalışır.
 * ═══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(255, 255, 255, 0.02);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgb(255, 255, 255, 0.12);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 6. Icons — Lucide CLS Fix
 *
 * Lucide ikonları JS tarafından <i data-lucide="x"> → <svg> olarak replace
 * edilir. Replace öncesinde boyut tanımlanmazsa SVG gelince çevre içerik
 * kayar (CLS — Cumulative Layout Shift).
 *
 * WHY: 24×24 alan JS çalışmadan önce reserve edilir — replace anında
 *      layout değişmez, CLS sıfır kalır.
 *
 * Scoped override'lar kendi dosyalarında kalır
 * (örn: .page-title-icon { width: 32px }).
 * ═══════════════════════════════════════════════════════════════════════════ */
i[data-lucide] {
  display: inline-flex;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 7. Material Symbols — Kullanım Kuralları
 *
 * @font-face fonts.css'te tanımlandı — bu katman fontu nasıl kullanacağını
 * söyler: boyut, satır yüksekliği, yön, render modu.
 *
 * WHY: Lucide'den sonra gelir — iki ikon sistemi aynı katmanda olmalı,
 *      biri tanımlanıp diğeri tanımlanmadan layout hesaplanmamalı.
 *
 * Kullanım: <span class="material-symbols-outlined">search</span>
 * ═══════════════════════════════════════════════════════════════════════════ */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  overflow-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}



/* ═══════════════════════════════════════════════════════════════════════════
 * 8. Spinners
 * ═══════════════════════════════════════════════════════════════════════════ */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Spinner used by loader-spinner, sec-loader, and .spin icon class */
.loader-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgb(255, 255, 255, 0.1);
  border-top: 3px solid var(--accent-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.sec-loader {
  width: 32px;
  height: 32px;
  border: 3px solid rgb(255, 255, 255, 0.1);
  border-top: 3px solid var(--accent-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spin {
  animation: spin 1s linear infinite;
}

.hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 9. Utility Classes
 *
 * Ölçülmüş tekrar (≥10 kullanım) → class.
 * layout.css'tekiler (.text-muted, .text-error, .text-success, .flex-*) burada tekrarlanmaz.
 *
 * .mono          → font-family:monospace ×120 (developer, security, geo sayfaları)
 * .ico-14/.ico-16/.ico-20/.ico-32 → Lucide ikon boyutları ×200+ inline
 * .flex-center   → display:flex; align-items:center ×80+ (gap hariç — gap site'a özel)
 * .mb-2          → margin-bottom:2rem ×42
 * ═══════════════════════════════════════════════════════════════════════════ */
.mono {
  font-family: monospace;
}

.ico-12 {
  width: 12px;
  height: 12px;
}

.ico-14 {
  width: 14px;
  height: 14px;
}

.ico-16 {
  width: 16px;
  height: 16px;
}

.ico-18 {
  width: 18px;
  height: 18px;
}

.ico-20 {
  width: 20px;
  height: 20px;
}

.ico-24 {
  width: 24px;
  height: 24px;
}

.ico-32 {
  width: 32px;
  height: 32px;
}

.flex-center {
  display: flex;
  align-items: center;
}

.mb-2 {
  margin-bottom: 2rem;
}

/* ─── Page Loader ─────────────────────────────────────────────────────────── */
#tek-top-bar {
  position:       fixed;
  top:            0;
  left:           0;
  right:          0;
  height:         3px;
  z-index:        var(--z-top-bar, 9999);
  pointer-events: none;
}

#tek-top-bar-fill {
  height:           100%;
  background:       #28a745;
  transform-origin: left center;
  transform:        scaleX(0);
}

body.page-loading #tek-top-bar-fill {
  animation: tek-progress 8s ease-out forwards;
}

body.page-loading-done #tek-top-bar-fill {
  transform:  scaleX(1) !important;
  transition: transform 280ms ease-out, opacity 300ms ease-out 280ms;
  opacity:    0;
}

@keyframes tek-progress {
  0%   { transform: scaleX(0); }
  30%  { transform: scaleX(.28); }
  50%  { transform: scaleX(.5); }
  75%  { transform: scaleX(.72); }
  100% { transform: scaleX(.9); }
}