/* ============================================================================
   Copyright (c) 2026 OpenMissile
   SEAM Design Language — DASHBOARD TEMASI (2026-07-24 re-skin).
   Dashboard/index.html'in token paleti, animasyonları ve yüzey dilini SEAM'e taşır.
   SALT-CSS katmanı: Tailwind sınıflarını tokenlara eşler, HTML/JS'e dokunmaz.
   Yüklenme: tailwind.css'ten SONRA (override). Geri almak: bu <link>'i kaldır.

   Tokenlar Dashboard ile BİREBİR aynı adlarla da yayınlanır (--surface, --border,
   --muted…) → dashboard.js'teki grafik teması bunları getComputedStyle ile okur.
   ========================================================================== */

/* ── AÇIK TEMA (varsayılan) — Dashboard [data-theme="light"] ile birebir ── */
:root {
  --om-red:     rgb(255,0,74);
  --om-red-2:   rgb(214,0,62);
  --om-red-rgb: 255,0,74;

  --bg:       #f4f5f9;
  --bg-grad1: #ffe9ef;
  --bg-grad2: #f4f5f9;
  --surface:  #ffffff;
  --surface2: #f1f3f8;
  --surface3: #e4e8f1;
  --border:   #dfe3ec;
  --text:     #0d1220;
  --muted:    #5b6479;
  --muted2:   #8a93a8;
  --accent:   rgb(255,0,74);
  --accent2:  rgb(214,0,62);
  --danger:   #ef4444;
  --warn:     #f59e0b;
  --info:     #3b82f6;
  --purple:   #8b5cf6;
  --cyan:     #06b6d4;
  --ok:       #22c55e;
  --shadow-sm: 0 2px 8px rgba(20,30,60,0.06);
  --shadow-md: 0 10px 30px rgba(20,30,60,0.10);
  --shadow-lg: 0 24px 64px rgba(20,30,60,0.14);
  --glow:      0 0 0 1px rgba(255,0,74,0.15), 0 0 22px rgba(255,0,74,0.12);
  --radius:    12px;

  /* Geriye dönük uyum: eski --seam-* adları (bileşen kuralları bunları kullanıyor) */
  --seam-bg: var(--bg);
  --seam-surface: var(--surface);
  --seam-surface-2: var(--surface2);
  --seam-border: var(--border);
  --seam-border-strong: var(--surface3);
  --seam-accent: var(--accent);
  --seam-accent-soft: rgba(255, 0, 74, .08);
  --seam-sh-1: var(--shadow-sm);
  --seam-sh-2: var(--shadow-md);
}

/* ── KOYU TEMA — Dashboard :root (varsayılan koyu) ile birebir ── */
html.dark {
  --bg:       #0a0a0f;   /* rgb(10,10,15) — kullanıcı talebi 2026-07-24 */
  --bg-grad1: #14040e;
  --bg-grad2: #0a0a0f;
  --surface:  #0d0f17;
  --surface2: #161a26;
  --surface3: #232838;
  --border:   #262b3a;
  --text:     #f5f6fa;
  --muted:    #98a0b4;
  --muted2:   #636b80;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.6);
  --glow:      0 0 0 1px rgba(255,0,74,0.18), 0 0 26px rgba(255,0,74,0.16);
  --seam-accent-soft: rgba(255, 0, 74, .16);
}

/* ── TİPOGRAFİ + TEMEL (Dashboard: Fira Sans / Fira Code) ── */
body { font-family: 'Fira Sans', 'Inter', sans-serif !important; }
.font-mono, code, pre, .tabular-nums, [class*="font-mono"] { font-family: 'Fira Code', ui-monospace, monospace !important; }

/* Dashboard'ın yumuşak tema geçişi */
html { transition: background 400ms ease; }
body { transition: background 400ms ease, color 300ms ease; }
.bg-white, .dark\:bg-slate-800, .bg-slate-50, .bg-slate-100,
header.h-16, #mainNav, .rounded-2xl, .rounded-xl {
  transition: background-color 350ms ease, border-color 250ms ease,
              color 250ms ease, box-shadow 250ms ease, transform 220ms ease;
}

/* İnce scrollbar (Dashboard) */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--surface3); }

/* ── ANİMASYONLAR (Dashboard'dan birebir) ── */
@keyframes glowPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: .8 }
  50%     { transform: translate(-50%,-50%) scale(1.18); opacity: 1  }
}
@keyframes pulse-dot { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes slideIn   { from { transform: translateX(16px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
@keyframes spin      { to { transform: rotate(360deg) } }
@keyframes seamRise  { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

/* Canlı durum noktası — Dashboard'ın nabız efekti */
.seam-dot, .status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 8px var(--ok);
  animation: pulse-dot 2s infinite; display: inline-block;
}
.seam-dot--accent { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.seam-dot--warn   { background: var(--warn);   box-shadow: 0 0 8px var(--warn); }

/* Yükleniyor çemberi */
.seam-spinner {
  width: 18px; height: 18px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 600ms linear infinite; display: inline-block; vertical-align: middle;
}

/* ── SAYFA GEÇİŞ ANİMASYONU (Dashboard'ın fadeInUp'ının karşılığı) ──
   showPage() hedef sayfaya .seam-page-enter ekler/çıkarır → animasyon yeniden oynar.
   ⚠ Bitiş karesi transform:none — kalıcı transform, içindeki position:fixed öğelerin
   kapsayıcı bloğunu değiştirip modal/panel konumunu bozardı. */
@keyframes seamPageIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes seamCardIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.seam-page-enter { animation: seamPageIn 300ms cubic-bezier(.22,.61,.36,1) both; }
.seam-page-enter > * { animation: seamCardIn 340ms cubic-bezier(.22,.61,.36,1) both; }
.seam-page-enter > *:nth-child(1) { animation-delay: 20ms }
.seam-page-enter > *:nth-child(2) { animation-delay: 60ms }
.seam-page-enter > *:nth-child(3) { animation-delay: 100ms }
.seam-page-enter > *:nth-child(4) { animation-delay: 140ms }
.seam-page-enter > *:nth-child(n+5) { animation-delay: 170ms }

@media (prefers-reduced-motion: reduce) {
  .seam-page-enter, .seam-page-enter > * { animation: none !important; }
}

/* Giriş ekranı: Dashboard'ın nabız atan kırmızı halesi.
   ⚠ position AYARLAMA — HTML'de `.fixed inset-0` var; ID seçici (özgüllük 100)
   Tailwind'in .fixed'ini (10) ezer, katman akışa girer ve TÜM arayüzü aşağı iter. */
#loginScreen, #login-screen {
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, var(--bg-grad1) 0%, var(--bg-grad2) 62%) !important;
}
#loginScreen::before, #login-screen::before {
  content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--om-red-rgb),.16) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: glowPulse 6s ease-in-out infinite; pointer-events: none; z-index: 0;
}
#loginScreen > *, #login-screen > * { position: relative; z-index: 1; }

/* ── SAYFA ZEMİNİ ── */
body.bg-slate-100 { background-color: var(--bg) !important; }
html.dark body.bg-slate-900 { background-color: var(--bg) !important; }

/* TÜM sayfalar AYNI zemini kullanır. Markup'ta 4 farklı zemin vardı:
   dashboard=(yok) · production=dark:bg-[#0d0f14] · personnel=bg-slate-50/50 (saydam)
   · diğerleri=bg-slate-900. Attribute seçici + !important hepsini eşitler ve
   ileride eklenecek page-* sayfaları da otomatik kapsar.
   ⚠ YALNIZ background — ID/attribute seçiciyle position/display AYARLAMA (düzeni bozar). */
div[id^="page-"] { background-color: var(--bg) !important; }

/* ── AÇIK TEMA yüzey eşlemesi ── */
.bg-slate-50  { background-color: var(--surface2) !important; }
.bg-slate-100 { background-color: var(--surface2) !important; }
.border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--border) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--shadow-md) !important; }

/* ── KOYU TEMA yüzey eşlemesi (yalnız html.dark → açık temaya risk yok) ── */
html.dark .bg-white,
html.dark .dark\:bg-slate-800 { background-color: var(--surface) !important; }
html.dark .dark\:bg-slate-700,
html.dark .dark\:bg-slate-600 { background-color: var(--surface2) !important; }
html.dark .dark\:bg-slate-900,
html.dark .dark\:bg-slate-950 { background-color: var(--bg) !important; }
html.dark .dark\:border-slate-600,
html.dark .dark\:border-slate-700,
html.dark .dark\:border-slate-800 { border-color: var(--border) !important; }
html.dark .dark\:text-slate-400,
html.dark .dark\:text-slate-500,
html.dark .dark\:text-slate-600 { color: var(--muted) !important; }
html.dark .dark\:text-slate-100,
html.dark .dark\:text-slate-200,
html.dark .dark\:text-slate-300,
html.dark .dark\:text-white { color: var(--text) !important; }

/* ── KART CİLASI — Dashboard'ın yüzey dili (radius 12 + hover kalkışı) ── */
.rounded-2xl { border-radius: var(--radius) !important; }
#page-dashboard .bg-white.rounded-2xl:hover,
#page-dashboard .dark\:bg-slate-800.rounded-2xl:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

/* ── SOL MENÜ (#mainNav) ── */
#mainNav { background-color: var(--surface) !important; border-right-color: var(--border) !important; }
#mainNav > button, #mainNav button[id^="nav-btn-"] { border-radius: var(--radius) !important; }
/* Aktif nav butonu — accent-soft zemin + sol accent şeridi + hafif hale */
#mainNav button[id^="nav-btn-"][class*="fff0f4"] {
  position: relative;
  background-color: var(--seam-accent-soft) !important;
  box-shadow: var(--glow);
}
#mainNav button[id^="nav-btn-"][class*="fff0f4"]::before {
  content: '';
  position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 99px; background: var(--accent);
}
.nav-section { color: var(--muted2) !important; letter-spacing: .06em; }

/* ── ÜST BAR (header) ── */
header.h-16 {
  background-color: var(--surface) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: none !important;
}

.seam-avatar {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--accent);
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow: var(--glow);
}

/* ── Birleşik Asistan + Analiz paneli ── */
#assistantPanel { width: 44rem; height: calc(100vh - 6rem); box-shadow: var(--shadow-lg) !important; }

/* Asistan cevabı — okunabilir format (başlık/madde/metrik) */
.asst-formatted { font-size: 13px; line-height: 1.55; }
.asst-formatted .asst-h { font-weight: 700; margin: 12px 0 5px; }
.asst-formatted .asst-h:first-child { margin-top: 0; }
.asst-formatted .asst-p { margin: 3px 0; }
.asst-formatted .asst-gap { height: 6px; }
.asst-formatted .asst-li { display: flex; gap: 7px; padding: 3px 0; align-items: flex-start; }
.asst-formatted .asst-mk { color: var(--accent); font-weight: 700; flex: none; }
.asst-formatted .asst-lt { min-width: 0; flex: 1; }
.asst-formatted .asst-lbl { margin-bottom: 3px; }
.asst-formatted .asst-metrics { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.asst-formatted .asst-chip {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 7px; padding: 1px 8px; font-size: 12px; font-variant-numeric: tabular-nums;
}

/* Genel Rapor sağ paneli: üst-sağ toggle YALNIZ panel kapalıyken görünür (açmak için) */
#page-dashboard:not(.dash-panel-collapsed) #dashPanelToggleBtn { display: none; }
.seam-assistant-body { display: flex; min-height: 0; }
.seam-assistant-chat { flex: 1 1 0; }
.seam-assistant-risks { width: 20rem; flex: 0 0 20rem; }

@media (max-width: 767px) {
  #assistantPanel { width: calc(100vw - 2rem); }
  .seam-assistant-body { flex-direction: column; overflow-y: auto; }
  .seam-assistant-chat { min-height: 20rem; flex: 0 0 20rem; }
  .seam-assistant-risks {
    width: 100%;
    flex: 0 0 auto;
    min-height: 14rem;
    border-left: 0 !important;
    border-top: 1px solid var(--border);
  }
}

/* ── Genel Rapor ızgarası: sağdaki model paneli biraz daraltıldı ──
   Markup 12 kolonlu (main col-span-9 = %75, panel col-span-3 = %25). 12'lik ızgara
   çok kaba olduğu için açık şablona geçiyoruz: main esner, panel SABİT 20rem.
   ⚠ col-span-* sınıfları artık geçerli olmadığından çocukların grid-column'u
   AÇIKÇA verilmeli — aksi halde öğeler yanlış kolona düşer. */
#page-dashboard { grid-template-columns: 1fr 20rem !important; }
#page-dashboard > #dashMainSection { grid-column: 1 !important; }
#page-dashboard > #dashRightPanel  { grid-column: 2 !important; }

/* Panel kapalıyken tek kolon */
#page-dashboard.dash-panel-collapsed { grid-template-columns: 1fr !important; }
#page-dashboard.dash-panel-collapsed #dashRightPanel { display: none !important; }
#page-dashboard.dash-panel-collapsed #dashMainSection { grid-column: 1 !important; }
#page-dashboard.dash-panel-collapsed #dashPanelToggleIcon { transform: rotate(180deg); }

/* ── Buton/kart cilası ── */
.bg-\[\#ff004b\] {
  transition: filter 120ms ease, background-color .12s ease, box-shadow 200ms ease, transform 100ms ease;
}
.bg-\[\#ff004b\]:hover { filter: brightness(.93); box-shadow: var(--glow); }
.bg-\[\#ff004b\]:active { transform: translateY(1px); }

/* Odak halkası — Dashboard'ın accent glow'u */
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--om-red-rgb), .12) !important;
  outline: none;
}

/* ── GRAFİK KAPSAYICILARI — ApexCharts'ın Dashboard görünümü ── */
.apexcharts-tooltip {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
}
.apexcharts-tooltip-title {
  background: var(--surface3) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: 'Fira Sans', sans-serif !important;
}
.apexcharts-legend-text { color: var(--muted) !important; font-family: 'Fira Sans', sans-serif !important; }
.apexcharts-gridline { stroke: var(--border) !important; opacity: .45; }
.apexcharts-xaxis-label, .apexcharts-yaxis-label { fill: var(--muted) !important; }
.apexcharts-datalabel-label { fill: var(--muted) !important; }
.apexcharts-datalabel-value { fill: var(--text) !important; }