/* =====================================================================
   SmartMirror Yonetim Paneli — TASARIM TOKEN KATMANI (tokens.css)
   ---------------------------------------------------------------------
   Kaynak: docs/design/panel-tasarim-sartnamesi.md — A bolumu (A.1 - A.11)
   ve D bolumu (animasyon sure/easing degerleri).

   Bu dosya YALNIZCA degisken tanimlar. Bilesen gorunumu theme.css'tedir.
   Bootstrap 5.3 degiskenleri buradaki --sm-* tokenlarina baglanir; boylece
   tek kaynak korunur ve Bootstrap guncellemesinde kirilma olmaz.

   Koyu tema iki kapsamda birden tanimlanir:
     - @media (prefers-color-scheme: dark) → isletim sistemi ayari
     - :root[data-theme="dark"]            → kullanicinin tema anahtari
   :not(...) korumasi, OS koyu iken kullanicinin "acik" secimini kazandirir.

   Icindekiler:
     0. Inter font (self-host, latin + latin-ext)
     A.1  Notr skala          A.7  Tipografi olcegi
     A.2  Anlamsal yuzey/metin A.8  Bosluk skalasi
     A.3  Marka rengi          A.9  Kose yaricapi
     A.4  Anlamsal renkler     A.10 Golge katmanlari
     A.5  Veri-viz paleti      A.11 Yerlesim metrikleri
                              D    Hareket (sure + easing)
     Z.   Bootstrap koprusu + geriye donuk takma adlar
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. FONT — Inter, self-host, wwwroot/fonts/. CDN KULLANILMAZ.
   Turkce icin latin-ext alt kumesi ZORUNLUDUR (g, s, i, I, c, o, u).
   Indirilen dosyalar degisken font oldugu icin tek dosya 100-900
   agirlik araligini karsilar (agirlik basina ayri dosya gerekmez).
   --------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  /* latin-ext: Turkce g/s/i/I/c/o/u glifleri bu araliktadir */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* -------------------------------------------------------------------
     A.1 NOTR SKALA (Tailwind slate temelli)
     ------------------------------------------------------------------- */
  --sm-neutral-0: #ffffff;
  --sm-neutral-50: #f8fafc;
  --sm-neutral-100: #f1f5f9;
  --sm-neutral-200: #e2e8f0;
  --sm-neutral-300: #cbd5e1;
  --sm-neutral-400: #94a3b8;
  --sm-neutral-500: #64748b;
  --sm-neutral-600: #475569;
  --sm-neutral-700: #334155;
  --sm-neutral-800: #1e293b;
  --sm-neutral-900: #0f172a;
  --sm-neutral-950: #020617;

  /* -------------------------------------------------------------------
     A.2 ANLAMSAL YUZEY VE METIN
     ------------------------------------------------------------------- */
  --sm-bg-canvas: #f8fafc;
  --sm-bg-surface: #ffffff;
  --sm-bg-surface-raised: #ffffff;
  --sm-bg-subtle: #f1f5f9;
  --sm-bg-hover: #f1f5f9;
  --sm-bg-active: #e2e8f0;
  --sm-bg-overlay: rgba(15, 23, 42, 0.45);

  --sm-border-default: #e2e8f0;
  --sm-border-strong: #cbd5e1;

  --sm-text-primary: #0f172a;
  --sm-text-secondary: #475569;
  --sm-text-muted: #64748b;
  --sm-text-disabled: #94a3b8;
  --sm-text-on-brand: #ffffff;

  /* -------------------------------------------------------------------
     A.3 MARKA RENGI
     ------------------------------------------------------------------- */
  --sm-brand-50: #eff6ff;
  --sm-brand-100: #dbeafe;
  --sm-brand-200: #bfdbfe;
  --sm-brand-300: #93c5fd;
  --sm-brand-400: #60a5fa;
  --sm-brand-500: #3b82f6;
  --sm-brand-600: #2563eb;
  --sm-brand-700: #1d4ed8;
  --sm-brand-800: #1e40af;
  --sm-brand-900: #1e3a8a;

  /* Rol takma adlari — temaya gore adim degistirir (koyu temada 600 → 400) */
  --sm-brand: var(--sm-brand-600);
  --sm-brand-hover: var(--sm-brand-700);
  --sm-brand-active: var(--sm-brand-800);
  --sm-brand-surface: var(--sm-brand-50);
  --sm-brand-on: #ffffff;

  /* -------------------------------------------------------------------
     A.4 ANLAMSAL RENKLER — metin / dolgu / zemin / kenarlik
     ------------------------------------------------------------------- */
  --sm-success-text: #15803d;
  --sm-success-fill: #16a34a;
  --sm-success-bg: #dcfce7;
  --sm-success-border: #86efac;

  --sm-warning-text: #b45309;
  --sm-warning-fill: #d97706;
  --sm-warning-bg: #fef3c7;
  --sm-warning-border: #fcd34d;

  --sm-danger-text: #b91c1c;
  --sm-danger-fill: #dc2626;
  --sm-danger-bg: #fee2e2;
  --sm-danger-border: #fca5a5;

  --sm-info-text: #0369a1;
  --sm-info-fill: #0284c7;
  --sm-info-bg: #e0f2fe;
  --sm-info-border: #7dd3fc;

  /* -------------------------------------------------------------------
     A.5 VERI GORSELLESTIRME PALETI
     Kategorik: Wong/Okabe-Ito temelli, renk korlugu guvenli.
     SIRA SABITTIR; dondurulmez, degere gore atanmaz. Tavan 8 (ideal 6).
     ------------------------------------------------------------------- */
  --dv-1: #2563eb; /* mavi */
  --dv-2: #e69f00; /* turuncu */
  --dv-3: #009e73; /* yesil-turkuaz */
  --dv-4: #cc79a7; /* pembe */
  --dv-5: #56b4e9; /* gok mavisi */
  --dv-6: #d55e00; /* kizil-turuncu */
  --dv-7: #7c3aed; /* mor (yedek) */
  --dv-8: #64748b; /* notr — "Diger" */

  /* Sirali (tek yon; doluluk isi haritasi) */
  --dv-seq-1: #eff6ff;
  --dv-seq-2: #bfdbfe;
  --dv-seq-3: #60a5fa;
  --dv-seq-4: #2563eb;
  --dv-seq-5: #1e3a8a;

  /* Ayrisan — KIRMIZI-MAVI. Kirmizi-yesil ASLA kullanilmaz. */
  --dv-div-1: #b91c1c;
  --dv-div-2: #fca5a5;
  --dv-div-3: #f1f5f9;
  --dv-div-4: #93c5fd;
  --dv-div-5: #1d4ed8;

  /* Grafik altyapisi */
  --dv-surface: var(--sm-bg-surface); /* bitisik dolgular arasi bosluk rengi */
  --dv-track: #e2e8f0;                /* ilerleme/yigin bos kanali */
  --dv-grid: #e2e8f0;                 /* yalnizca yatay izgara */
  --dv-axis: #cbd5e1;                 /* taban cizgisi */
  --dv-target: #0f172a;               /* bullet hedef isareti */
  --dv-reference: #94a3b8;            /* kesikli referans cizgisi */

  /* -------------------------------------------------------------------
     A.7 TIPOGRAFI
     Yonetim panelinde govde varsayilani 16px degil 14px'tir (bilgi
     yogunlugu); 12px altina asla inilmez.
     ------------------------------------------------------------------- */
  --sm-font-sans: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --sm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --sm-fs-metric-xl: 2rem;      /* 32 / 36 · 700 */
  --sm-lh-metric-xl: 2.25rem;
  --sm-fs-metric-lg: 1.75rem;   /* 28 / 32 · 700 — KPI kart ana sayisi */
  --sm-lh-metric-lg: 2rem;
  --sm-fs-metric-md: 1.5rem;    /* 24 / 28 · 700 */
  --sm-lh-metric-md: 1.75rem;
  --sm-fs-metric-sm: 1rem;      /* 16 / 20 · 700 */
  --sm-lh-metric-sm: 1.25rem;

  --sm-fs-h1: 1.5rem;    --sm-lh-h1: 2rem;      /* 24 / 32 · 600 */
  --sm-fs-h2: 1.25rem;   --sm-lh-h2: 1.75rem;   /* 20 / 28 · 600 */
  --sm-fs-h3: 1rem;      --sm-lh-h3: 1.5rem;    /* 16 / 24 · 600 */
  --sm-fs-h4: 0.875rem;  --sm-lh-h4: 1.25rem;   /* 14 / 20 · 600 */

  --sm-fs-body-lg: 1rem;      --sm-lh-body-lg: 1.5rem;   /* 16 / 24 */
  --sm-fs-body: 0.875rem;     --sm-lh-body: 1.25rem;     /* 14 / 20 — VARSAYILAN */
  --sm-fs-body-sm: 0.8125rem; --sm-lh-body-sm: 1.25rem;  /* 13 / 20 */
  --sm-fs-caption: 0.75rem;   --sm-lh-caption: 1rem;     /* 12 / 16 */
  --sm-fs-label: 0.8125rem;   --sm-lh-label: 1rem;       /* 13 / 16 · 600 */
  --sm-fs-overline: 0.6875rem; --sm-lh-overline: 1rem;   /* 11 / 16 · 600 · 0.04em */
  --sm-fs-mono: 0.8125rem;    --sm-lh-mono: 1.25rem;     /* 13 / 20 */

  /* -------------------------------------------------------------------
     A.8 BOSLUK SKALASI — 4px taban, 8px ritmi
     ------------------------------------------------------------------- */
  --sm-space-0: 0;
  --sm-space-1: 2px;
  --sm-space-2: 4px;
  --sm-space-3: 6px;
  --sm-space-4: 8px;
  --sm-space-5: 12px;
  --sm-space-6: 16px;
  --sm-space-7: 20px;
  --sm-space-8: 24px;
  --sm-space-9: 32px;
  --sm-space-10: 40px;
  --sm-space-11: 48px;
  --sm-space-12: 64px;
  --sm-space-13: 80px;

  /* -------------------------------------------------------------------
     A.9 KOSE YARICAPI
     Karisim yasagi: kart 12px ise icindeki buton 8px olur; ters oran kurulmaz.
     ------------------------------------------------------------------- */
  --sm-radius-xs: 4px;
  --sm-radius-sm: 6px;
  --sm-radius-md: 8px;
  --sm-radius-lg: 12px;
  --sm-radius-xl: 16px;
  --sm-radius-full: 9999px;

  /* -------------------------------------------------------------------
     A.10 GOLGE KATMANLARI
     Kart varsayilani: shadow-xs + 1px kenarlik. Golge yalnizca gercekten
     katman ustunde duran ogelerde (dropdown, popover, modal, toast).
     ------------------------------------------------------------------- */
  --sm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sm-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sm-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --sm-shadow-lg: 0 12px 20px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --sm-shadow-xl: 0 24px 32px -8px rgba(15, 23, 42, 0.16);

  /* Odak: WCAG 2.4.11 — en az 2px kalinlik, 3:1 kontrast */
  --sm-focus-color: #2563eb;
  --sm-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* -------------------------------------------------------------------
     A.11 YERLESIM METRIKLERI
     ------------------------------------------------------------------- */
  --sm-sidebar-w: 256px;
  --sm-sidebar-collapsed-w: 64px;
  --sm-sidebar-item-h: 40px;
  --sm-sidebar-item-h-dense: 36px;
  --sm-topbar-h: 56px;
  --sm-content-pad: 24px;      /* >= 1200px */
  --sm-content-max: 1440px;
  --sm-grid-gutter: 24px;

  /* -------------------------------------------------------------------
     D. HAREKET — sartname D tablosundaki sure ve easing degerleri
     ------------------------------------------------------------------- */
  --sm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sm-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --sm-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --sm-ease-emph-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --sm-ease-emph-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  --sm-dur-80: 80ms;    /* buton active, menu item hover */
  --sm-dur-100: 100ms;  /* odak halkasi, tablo satiri hover, dropdown kapanma */
  --sm-dur-120: 120ms;  /* buton hover, tooltip, sekme degisimi */
  --sm-dur-150: 150ms;  /* checkbox, input odak, dropdown acilma, modal kapanma */
  --sm-dur-180: 180ms;  /* sidebar alt menu */
  --sm-dur-200: 200ms;  /* modal acilma, toast giris, accordion, sticky bar */
  --sm-dur-250: 250ms;  /* drawer acilma, grafik ilk cizim (yalnizca opacity) */
  --sm-dur-300: 300ms;  /* grafik veri guncelleme */
  --sm-dur-600: 600ms;  /* yeni kayit satir vurgusu (istisna: >500ms) */
  --sm-dur-shimmer: 1400ms;
}

/* =====================================================================
   KOYU TEMA
   Kural: saf siyah kullanilmaz. Taban #0F172A; her katman %5-8 aydinlik
   artisiyla yukselir. Yukseklik golgeyle degil, yuzey acikligi + kenarlikla
   ifade edilir.
   ===================================================================== */

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --sm-bg-canvas: #0f172a;
    --sm-bg-surface: #1e293b;
    --sm-bg-surface-raised: #273449;
    --sm-bg-subtle: #172033;
    --sm-bg-hover: #243044;
    --sm-bg-active: #2e3b52;
    --sm-bg-overlay: rgba(2, 6, 23, 0.65);

    --sm-border-default: #334155;
    --sm-border-strong: #475569;

    --sm-text-primary: #f1f5f9;
    --sm-text-secondary: #cbd5e1;
    --sm-text-muted: #94a3b8;
    --sm-text-disabled: #64748b;

    --sm-brand: var(--sm-brand-400);
    --sm-brand-hover: var(--sm-brand-300);
    --sm-brand-active: var(--sm-brand-500);
    --sm-brand-surface: rgba(96, 165, 250, 0.12);
    --sm-brand-on: #0f172a;

    --sm-success-text: #4ade80; --sm-success-fill: #22c55e;
    --sm-success-bg: #0f2a1a;   --sm-success-border: #166534;
    --sm-warning-text: #fbbf24; --sm-warning-fill: #f59e0b;
    --sm-warning-bg: #2a1f06;   --sm-warning-border: #92400e;
    --sm-danger-text: #f87171;  --sm-danger-fill: #ef4444;
    --sm-danger-bg: #2a1213;    --sm-danger-border: #991b1b;
    --sm-info-text: #38bdf8;    --sm-info-fill: #0ea5e9;
    --sm-info-bg: #08243a;      --sm-info-border: #075985;

    --dv-1: #60a5fa;
    --dv-2: #f5b942;
    --dv-3: #34d399;
    --dv-4: #e39bc4;
    --dv-5: #7dd3fc;
    --dv-6: #fb7c3c;
    --dv-7: #a78bfa;
    --dv-8: #94a3b8;
    --dv-track: #334155;
    --dv-grid: #334155;
    --dv-axis: #475569;
    --dv-target: #f1f5f9;
    --dv-reference: #64748b;
    --dv-div-3: #334155;

    /* Koyu temada golge neredeyse gorunmez; yukselti yuzey + kenarlikla verilir */
    --sm-shadow-xs: none;
    --sm-shadow-sm: none;
    --sm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
    --sm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);
    --sm-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.60);

    --sm-focus-color: #60a5fa;
    --sm-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.40);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --sm-bg-canvas: #0f172a;
  --sm-bg-surface: #1e293b;
  --sm-bg-surface-raised: #273449;
  --sm-bg-subtle: #172033;
  --sm-bg-hover: #243044;
  --sm-bg-active: #2e3b52;
  --sm-bg-overlay: rgba(2, 6, 23, 0.65);

  --sm-border-default: #334155;
  --sm-border-strong: #475569;

  --sm-text-primary: #f1f5f9;
  --sm-text-secondary: #cbd5e1;
  --sm-text-muted: #94a3b8;
  --sm-text-disabled: #64748b;

  --sm-brand: var(--sm-brand-400);
  --sm-brand-hover: var(--sm-brand-300);
  --sm-brand-active: var(--sm-brand-500);
  --sm-brand-surface: rgba(96, 165, 250, 0.12);
  --sm-brand-on: #0f172a;

  --sm-success-text: #4ade80; --sm-success-fill: #22c55e;
  --sm-success-bg: #0f2a1a;   --sm-success-border: #166534;
  --sm-warning-text: #fbbf24; --sm-warning-fill: #f59e0b;
  --sm-warning-bg: #2a1f06;   --sm-warning-border: #92400e;
  --sm-danger-text: #f87171;  --sm-danger-fill: #ef4444;
  --sm-danger-bg: #2a1213;    --sm-danger-border: #991b1b;
  --sm-info-text: #38bdf8;    --sm-info-fill: #0ea5e9;
  --sm-info-bg: #08243a;      --sm-info-border: #075985;

  --dv-1: #60a5fa;
  --dv-2: #f5b942;
  --dv-3: #34d399;
  --dv-4: #e39bc4;
  --dv-5: #7dd3fc;
  --dv-6: #fb7c3c;
  --dv-7: #a78bfa;
  --dv-8: #94a3b8;
  --dv-track: #334155;
  --dv-grid: #334155;
  --dv-axis: #475569;
  --dv-target: #f1f5f9;
  --dv-reference: #64748b;
  --dv-div-3: #334155;

  --sm-shadow-xs: none;
  --sm-shadow-sm: none;
  --sm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --sm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);
  --sm-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.60);

  --sm-focus-color: #60a5fa;
  --sm-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.40);
}

/* =====================================================================
   Z. BOOTSTRAP KOPRUSU + GERIYE DONUK TAKMA ADLAR
   Bootstrap 5.3 tum bilesenlerde CSS degiskeni okur; asagidaki baglama ile
   tek oznitelik degisimi (data-bs-theme) tum bilesenleri yeniden temalandirir.
   ===================================================================== */

:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  /* Bootstrap govde + kenarlik */
  --bs-body-bg: var(--sm-bg-canvas);
  --bs-body-color: var(--sm-text-primary);
  --bs-body-font-family: var(--sm-font-sans);
  --bs-body-font-size: var(--sm-fs-body);
  --bs-body-line-height: 1.4286;
  --bs-border-color: var(--sm-border-default);
  --bs-border-radius: var(--sm-radius-md);
  --bs-border-radius-sm: var(--sm-radius-sm);
  --bs-border-radius-lg: var(--sm-radius-lg);
  --bs-border-radius-xl: var(--sm-radius-xl);
  --bs-secondary-color: var(--sm-text-muted);
  --bs-emphasis-color: var(--sm-text-primary);
  --bs-link-color: var(--sm-brand);
  --bs-link-hover-color: var(--sm-brand-hover);
  --bs-primary: var(--sm-brand-600);
  --bs-danger: var(--sm-danger-fill);
  --bs-success: var(--sm-success-fill);
  --bs-warning: var(--sm-warning-fill);
  --bs-info: var(--sm-info-fill);

  /* --- Geriye donuk takma adlar (1. tur sinif/degisken adlari) ---
     Eski isimler yeni tokenlara baglanir; boylece mevcut ekranlar
     kirilmadan yeni palete gecer. Yeni kod bu adlari KULLANMAZ. */
  --sm-plane: var(--sm-bg-canvas);
  --sm-surface: var(--sm-bg-surface);
  --sm-surface-2: var(--sm-bg-subtle);
  --sm-surface-hover: var(--sm-bg-hover);
  --sm-ink: var(--sm-text-primary);
  --sm-ink-2: var(--sm-text-secondary);
  --sm-ink-muted: var(--sm-text-muted);
  --sm-ink-on-dark: #f1f5f9;
  --sm-border: var(--sm-border-default);
  --sm-grid: var(--dv-grid);
  --sm-axis: var(--dv-axis);
  --sm-accent: var(--sm-brand);
  --sm-accent-ink: var(--sm-text-on-brand);
  --sm-accent-soft: var(--sm-brand-surface);
  --sm-focus: var(--sm-focus-color);
  --sm-good: var(--sm-success-fill);
  --sm-good-ink: var(--sm-success-text);
  --sm-warning: var(--sm-warning-fill);
  --sm-critical: var(--sm-danger-fill);
  --sm-critical-ink: var(--sm-danger-text);
  --sm-radius: var(--sm-radius-md);
  --sm-radius-pill: var(--sm-radius-full);
  --sm-shadow-1: var(--sm-shadow-xs);
  --sm-shadow-2: var(--sm-shadow-md);
  --sm-shadow-3: var(--sm-shadow-lg);

  /* Grafik slotlari: cizici --viz-N okur, kaynak A.5 paletidir */
  --viz-1: var(--dv-1);
  --viz-2: var(--dv-2);
  --viz-3: var(--dv-3);
  --viz-4: var(--dv-4);
  --viz-5: var(--dv-5);
  --viz-6: var(--dv-6);
  --viz-7: var(--dv-7);
  --viz-8: var(--dv-8);
  --viz-surface: var(--dv-surface);
  --viz-track: var(--dv-track);
}