/* CRMEST AI Admin Panel — Tailwind v4 + Preline overrides */

/* ── Material Symbols (new, Outlined) — tüm UI ikonlarının tek kaynağı ──────
   Kullanım: <span class="material-symbols-outlined">search</span>
   Renk: currentColor (text-* / style=color) · Boyut: font-size (em/px)
   Doluluk: .ms-fill (FILL 1) · Kalınlık: --ms-wght · Optik boy opsz=font-size */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' var(--ms-fill, 0), 'wght' var(--ms-wght, 400), 'GRAD' var(--ms-grad, 0), 'opsz' var(--ms-opsz, 24);
  font-size: 1.25em;          /* metin satırına gömülürken makul varsayılan */
  vertical-align: middle;
  user-select: none;
  flex-shrink: 0;
}
.material-symbols-outlined.ms-fill { --ms-fill: 1; }
.material-symbols-outlined.ms-bold { --ms-wght: 600; }
.material-symbols-outlined.ms-light { --ms-wght: 300; }

/* ── İkon-rayı sidebar (80×80 kutular + flyout alt-menüler) ─────────────── */

/* Ray kutusu: ikon sabit üstte, etiket altta iki-satır yüksekliğinde ortalı */
.nav-rail-ico {
  margin-top: 12px;          /* ikon sabit konum (kutu üstünden) */
  font-size: 24px;
}
.nav-rail-label {
  margin-top: 5px;
  height: 28px;              /* iki satır yüksekliği — tek satır da bu alanda ortalı */
  display: flex;
  align-items: center;       /* dikey ortala (tek satırlık etiket iki-satır alanın ortasında) */
  justify-content: center;
  text-align: center;
  font-size: 11px;
  line-height: 1.15;
  padding: 0 2px;
  overflow: hidden;
}

/* Tema switch — uiverse "lovely-treefrog" uyarlaması (güneş↔ay), sidebar 80px
   kapsülüne sığacak şekilde küçültülmüş (orijinal 110×50 → 56×26). Dark state
   peer-checked yerine html.dark ile sürülür; JS aynı toggleDarkMode'u çağırır. */
.theme-switch {
  display: inline-flex;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.theme-switch-track {
  position: relative;
  width: 56px;
  height: 26px;
  border-radius: 9999px;
  background: #ffffff;                          /* açık tema: beyaz ray */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: background 0.3s ease;
}
html.dark .theme-switch-track { background: #71717a; }   /* zinc-500 (koyu tema) */

/* Sabit ikonlar: güneş solda, ay sağda — knob hangisini örtmüyorsa o görünür */
.theme-switch-sun,
.theme-switch-moon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  z-index: 1;
  pointer-events: none;
}
.theme-switch-sun  { left: 6px;  color: #ffffff; z-index: 3;}                 /* açık temada knob örter */
html.dark .theme-switch-sun  { opacity: 0.6; }                     /* koyu temada görünür */
.theme-switch-moon { right: 6px; color: #000000; opacity: 0.6; }   /* açık temada görünür */
html.dark .theme-switch-moon { color: #ffffff; opacity: 0.7; z-index: 3;} /* görünmüyodu hayvan */

/* Knob = güneş (turuncu→sarı gradyan) → koyu ay dairesi (zinc-900) */
.theme-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: linear-gradient(to right, #f97316, #facc15);   /* orange-500 → yellow-400 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
html.dark .theme-switch-knob {
  background: #18181b;                                       /* zinc-900 (ay) */
  transform: translateX(30px);                              /* 56 - 3(sol) - 20(knob) - 3(sağ) */
}

/* Flyout alt-menü paneli (body'ye taşınır, fixed konumlanır) */
.nav-flyout {
  position: fixed;
  z-index: 60;
  min-width: 210px;
  max-width: 260px;
  margin-left: 6px;
  padding: 8px;
  border-radius: 12px;
  background: #1e293b;                         /* slate-800 */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
}
.nav-flyout-title {
  padding: 4px 12px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;                              /* slate-500 */
}

/* System-prompt textarea: monospace font */
textarea.system-prompt {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.81rem;
  min-height: 280px;
  resize: vertical;
}

/* Toast container: pointer-events geçişi için */
#toast-container {
  pointer-events: none;
}
#toast-container > * {
  pointer-events: auto;
}

/* Indeterminate progress bar (ads snapshot refresh) */
.ec-progress {
  position: relative;
  height: 3px;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(59, 130, 246, 0.15);
}
.ec-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 9999px;
  background: #3b82f6;
  animation: ec-progress-slide 1.1s ease-in-out infinite;
}
@keyframes ec-progress-slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* Date range picker — mobile bottom-sheet slide-up (desktop unaffected) */
@media (max-width: 767px) {
  [data-drp-pop] {
    transform: translateY(100%);
    transition: transform 0.22s ease;
  }
  [data-drp-pop].drp-open {
    transform: translateY(0);
  }
}

/* ── Brand identity ─────────────────────────────────────────────────── */

/* Logo chip: gradient background + glow + ripple origin */
.brand-logo-chip {
  position: relative;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 4px 14px -4px rgba(37, 99, 235, .55);
  overflow: visible;
}

/* Marka wordmark "heropiks": hub animasyonuyla aynı tipografi (system-ui bold) +
   tek renk dolgu — light = logo/i-nokta mavisi #2563eb, dark = beyaz. Login başlığı
   + topbar gibi statik yerlerde kullanılır → her yerde aynı renk/görünüm. */
.brand-wordmark {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #2563eb;
}
.dark .brand-wordmark { color: #ffffff; }
/* "i" harfinin noktası — heropiks.com ile aynı (noktasız ı + ayrı açık mavi nokta) */
.brand-wordmark .il { position: relative; display: inline-block; }
.brand-wordmark .il .dot {
  position: absolute;
  top: 0.35em;
  left: 0.12em;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: #b1b1ff;
}

/* Ripple ring: expands and fades on hover */
.brand-logo-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(99, 102, 241, .6);
  opacity: 0;
  pointer-events: none;
}
a:hover > .brand-logo-chip::after,
.brand-logo-chip:hover::after {
  animation: brand-ping 0.9s ease-out;
}
@keyframes brand-ping {
  0%   { transform: scale(1);   opacity: .65; }
  100% { transform: scale(2.1); opacity: 0;   }
}

/* Content area: very subtle dot-grid texture (echoes the login screen) */
.app-bg {
  position: relative;
}
.app-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 28px 28px;
  color: #475569;
  opacity: .028;
}
.dark .app-bg::before {
  color: #94a3b8;
  opacity: .038;
}

/* Brand watermark: large faded icon, bottom-right (letterhead style) */
.brand-watermark {
  position: fixed;
  right: -50px;
  bottom: -50px;
  width: 480px;
  height: 480px;
  pointer-events: none;
  z-index: 0;
  opacity: .045;
  color: #1e293b;
}
.brand-watermark svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.dark .brand-watermark {
  color: #cbd5e1;
  opacity: .055;
}
@media (max-width: 767px) {
  .brand-watermark {
    width: 260px;
    height: 260px;
    right: -30px;
    bottom: -30px;
    opacity: .035;
  }
}

/* ── Nabla hub başlığı: sabit (orta-ince) kalınlık + mavi tonlarda renk geçişi ── */
/* Kalınlaşma/incelme (EDPT/EHLT) animasyonu YOK; bunun yerine iki mavi palet
   arasında palette-mix ile yumuşak renk geçişi (kaplama renkleri oynar). */
@font-palette-values --ec-nabla-b1 {   /* açık: cyan → mavi */
  font-family: Nabla;
  override-colors:
    0 #a5f3fc, 1 #67e8f9, 2 #22d3ee, 3 #38bdf8,
    4 #0ea5e9, 5 #3b82f6, 6 #2563eb, 7 #1d4ed8,
    8 #1e40af, 9 #38bdf8, 10 #2563eb, 11 #1e3a8a;
}
@font-palette-values --ec-nabla-b2 {   /* koyu: mavi → indigo */
  font-family: Nabla;
  override-colors:
    0 #c7d2fe, 1 #a5b4fc, 2 #818cf8, 3 #6366f1,
    4 #4f46e5, 5 #4338ca, 6 #3730a3, 7 #312e81,
    8 #1e1b4b, 9 #818cf8, 10 #4f46e5, 11 #312e81;
}
@property --nabla-mix {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@keyframes nabla-hue {
  0%, 100% { --nabla-mix: 0%; }
  50%      { --nabla-mix: 100%; }
}
.nabla-title {
  font-family: 'Nabla', system-ui, sans-serif;
  font-weight: 400;
  font-variation-settings: 'EDPT' 80, 'EHLT' 10;   /* sabit orta-ince kalınlık */
  font-palette: --ec-nabla-b2;                       /* palette-mix desteklenmezse fallback */
  font-palette: palette-mix(in oklab, --ec-nabla-b1, --ec-nabla-b2 var(--nabla-mix));
  animation: nabla-hue 8s ease-in-out infinite;
  will-change: font-palette;
}

/* Journey "Lead Süreci" collapse (native <details>) — varsayılan dikey aç/kapa.
   Marker gizle + açıkken chevron'u döndür. */
details.j-lt > summary { list-style: none; }
details.j-lt > summary::-webkit-details-marker { display: none; }
details.j-lt[open] .j-lt-chev { transform: rotate(90deg); }