/* =====================================================================
   KALEIDO — shadcn/ui görünüm katmanı
   ---------------------------------------------------------------------
   shadcn/ui (https://ui.shadcn.com) React + Tailwind bileşen kitaplığıdır;
   KALEIDO arayüzü ise Python'dan üretilen düz HTML'dir. Bu dosya shadcn'in
   "neutral" temasını (renk değişkenleri, --radius, Geist yazı tipi) ve
   bileşen görünümlerini (Button, Card, Input, Select, Table, Badge, Tabs,
   Sidebar) mevcut sınıf adlarına uygular — HTML/JS mantığına dokunmadan.

   YÜKLEME SIRASI: <head>'in EN SONUNDA, sayfanın satır-içi <style>'ından
   SONRA gelir; eşit özgüllükteki çakışmalarda bu dosya kazanır.
   W3Admin style.css'in `!important` kurallarını yenmek gereken yerlerde
   (kenar çubuğu ön ayarları) `!important` bilinçli olarak kullanıldı.
   ===================================================================== */

:root,
body[data-primary] {
  /* shadcn neutral teması (ui.shadcn.com/docs/theming, 2026-10) */
  --radius: 0.625rem;
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --sh-primary: #171717;
  --sh-primary-foreground: #fafafa;
  --sh-secondary: #f5f5f5;
  --sh-secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #e7000b;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --sidebar: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-accent: #f5f5f5;
  --sidebar-border: #e5e5e5;
  --success: #16a34a;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;

  /* KALEIDO marka değişkenlerinin shadcn karşılıkları. --violet metin ve
     vurgu rengi olarak her yerde kullanılıyor → birincil (siyah) ton;
     --ink → ön plan; --bg → arka plan. Grafik renkleri (--teal, --coral,
     --gold, --blue) veri rengi olarak KORUNUR. */
  --ink: #0a0a0a;
  --violet: #171717;
  --bg: #fafafa;

  /* W3Admin'in birincil değişkenleri (menü, seçim, sayfalama vb.) */
  --primary: #171717;
  --primary-light: #f5f5f5;
  --primary-hover: #262626;
  --primary-dark: #0a0a0a;
  --secondary: #171717;
  --rgba-primary-1: rgba(23,23,23,0.04);
  --rgba-primary-2: rgba(23,23,23,0.08);
  --rgba-primary-3: rgba(23,23,23,0.12);
  --rgba-primary-4: rgba(23,23,23,0.2);
  --rgba-primary-5: rgba(23,23,23,0.3);
  --rgba-primary-6: rgba(23,23,23,0.45);
  --rgba-primary-7: rgba(23,23,23,0.6);
  --rgba-primary-8: rgba(23,23,23,0.75);
  --rgba-primary-9: rgba(23,23,23,0.9);
}

/* ------------------------------------------------------------- temel */
html, body { -webkit-font-smoothing: antialiased; }
body, body[data-typography] {
  font-family: var(--font-sans) !important;
  background: var(--bg) !important;
  color: var(--foreground);
  font-size: 14px;
  letter-spacing: -0.003em;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); letter-spacing: -0.015em; }
h2 { color: var(--foreground); font-size: 1.05rem; font-weight: 600; margin: 0 0 0.85rem; }
h3 { color: var(--foreground); font-size: 0.9rem; font-weight: 600; margin: 1rem 0 0.45rem; }
a { color: var(--foreground); }
::selection { background: #e5e5e5; color: var(--foreground); }
.hint { color: var(--muted-foreground); font-size: 0.8rem; line-height: 1.5; }
.ok { color: var(--success); font-weight: 500; }
.err { color: var(--destructive); font-weight: 500; }
code, pre, .namelist { font-family: var(--font-mono); }
hr { border: 0; border-top: 1px solid var(--border); opacity: 1; }

/* -------------------------------------------------------------- Card */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.card .card { box-shadow: none; }
.sum { color: var(--foreground); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; }

/* ------------------------------------------------------------ Button */
.act, .btn, button.nav, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 2.25rem; padding: 0 1rem; margin: 2px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  font: 500 0.84rem/1 var(--font-sans);
  background: var(--sh-primary); color: var(--sh-primary-foreground);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.act:hover, .btn-primary:hover, button.nav:hover { background: #262626; color: #fafafa; filter: none; }
a.act:hover { filter: none; }
.act:focus-visible, .btn:focus-visible, button.nav:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(161,161,161,0.5);
}
/* varyantlar: teal = varsayılan, gold = secondary, ghost/lite = outline,
   coral = destructive */
.act.teal { background: var(--sh-primary); color: var(--sh-primary-foreground); }
.act.gold, .act.violet {
  background: var(--sh-secondary); color: var(--sh-secondary-foreground);
  box-shadow: none;
}
.act.gold:hover, .act.violet:hover { background: #e5e5e5; color: #171717; }
.act.ghost, .btn-ghost, .act.lite {
  background: var(--background); color: var(--foreground);
  border-color: var(--border);
}
.act.ghost:hover, .btn-ghost:hover, .act.lite:hover { background: var(--accent); color: var(--accent-foreground); }
.act.coral { background: var(--destructive); color: #fff; }
.act.coral:hover { background: #c10007; color: #fff; }
button.act:disabled, button.nav:disabled, .btn:disabled {
  background: var(--sh-primary) !important; color: var(--sh-primary-foreground) !important;
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
button.act.ghost:disabled { background: var(--background) !important; color: var(--foreground) !important; }
button.nav { height: 2.5rem; padding: 0 1.4rem; font-size: 0.875rem; }
.btn-solid { background: var(--sh-primary); color: var(--sh-primary-foreground); }

/* ------------------------------------------------------ Input/Select */
input[type=number], input[type=text], input[type=password], input[type=email],
input[type=search], input[type=date], select, textarea, .form-control, .agfld {
  height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--input) !important;
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  color: var(--foreground);
  font: 400 0.875rem/1.4 var(--font-sans);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color .15s, box-shadow .15s;
}
textarea, textarea.form-control, textarea.agfld { height: auto; min-height: 4.5rem; }
select[multiple] { height: auto; }
input:focus, select:focus, textarea:focus, .form-control:focus, .agfld:focus {
  outline: none;
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px rgba(161,161,161,0.35);
}
input[type=checkbox], input[type=radio] { accent-color: var(--sh-primary); }
label.chk {
  background: var(--background); border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px); padding: 5px 10px; font-size: 0.84rem;
}
label.chk:has(input:checked) { border-color: var(--foreground); background: var(--accent); }
.aglbl, .lbl, .sec-label {
  color: var(--foreground); font-size: 0.8rem; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}

/* ------------------------------------------------------------- Table */
table { font-size: 0.84rem; color: var(--foreground); }
th, td { border-bottom: 1px solid var(--border); padding: 0.6rem 0.75rem; }
th { color: var(--muted-foreground); font-weight: 500; white-space: nowrap; }
tbody tr { transition: background-color .12s; }
tbody tr:hover { background: rgba(245,245,245,0.6); }
table.dataTable thead th, table.dataTable thead td { border-bottom: 1px solid var(--border) !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--border) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate span .paginate_button {
  border-radius: calc(var(--radius) - 2px) !important;
  border: 1px solid transparent !important;
  background: transparent !important; color: var(--foreground) !important;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button.current {
  background: var(--background) !important; color: var(--foreground) !important;
  border-color: var(--border) !important; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { margin-left: 0.5rem; }
.dataTables_wrapper .dataTables_info { color: var(--muted-foreground) !important; font-size: 0.8rem; }

/* ------------------------------------------------------- Badge/Chip */
.badge {
  display: inline-flex; align-items: center;
  border-radius: calc(var(--radius) - 4px);
  padding: 2px 8px; font-size: 0.72rem; font-weight: 500; line-height: 1.4;
  border: 1px solid transparent;
}
.badge.done { background: #dcfce7; color: #166534; }
.badge.running { background: #dbeafe; color: #1e40af; }
.badge.queued { background: var(--sh-secondary); color: var(--sh-secondary-foreground); }
.badge.failed { background: #fee2e2; color: #991b1b; }
.badge.truba { background: #fef3c7; color: #92400e; }
.badge.truba-cancel { background: var(--sh-secondary); color: var(--muted-foreground); }
.chip { border-radius: calc(var(--radius) - 4px); font-weight: 500; padding: 2px 8px; }
.chip.lite {
  background: var(--sh-secondary); color: var(--sh-secondary-foreground);
  border: 1px solid var(--border);
}
.mock {
  background: var(--sh-secondary); color: var(--foreground);
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
  font-weight: 500; letter-spacing: 0.02em;
}

/* -------------------------------------------------------------- Tabs */
/* shadcn Tabs/Toggle: pasif = saydam + soluk metin, aktif = beyaz zemin,
   ince kenarlık, hafif gölge. Anlamlı renk `--tab-color` noktası olarak
   kalır (bkz. static/js/shadcn.js). */
.condtab {
  display: inline-flex !important; align-items: center; gap: 7px;
  background: transparent !important; color: var(--muted-foreground) !important;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
  padding: 6px 12px; font-size: 0.84rem; font-weight: 500;
  opacity: 1 !important; box-shadow: none !important;
  transition: background-color .15s, color .15s;
}
.condtab:hover { background: var(--accent) !important; color: var(--foreground) !important; }
.condtab.active {
  background: var(--background) !important; color: var(--foreground) !important;
  border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}
.condtab.has-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; flex: none;
  background: var(--tab-color);
}
.condtab b { font-weight: 600; color: inherit; }

/* ----------------------------------------------- seçilebilir kartlar */
.dscard, .masacard, .masatile, .agentcard {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.dscard:hover, .masacard:hover, .masatile:hover, .agentcard:hover {
  border-color: #a3a3a3 !important; background: var(--card);
}
.dscard.selected, .masacard.active, .masatile.active, .agentcard.selected {
  border-color: var(--foreground) !important; background: var(--accent);
  box-shadow: 0 0 0 1px var(--foreground);
}
.dscard b, .masacard b, .masatile b, .agentcard b { color: var(--foreground); }

/* ------------------------------------------------------ konuşma/log */
.turblock { border-left: 2px solid var(--border); background: transparent; border-radius: 0; }
.utt {
  border: 1px solid var(--border); box-shadow: none; border-radius: var(--radius);
  background: var(--card);
}
.utt .who { color: var(--foreground); font-weight: 600; }
.utt .ord { background: var(--sh-primary); }
pre.log {
  background: #0a0a0a; color: #e5e5e5; border-radius: var(--radius);
  border: 1px solid #262626; font-family: var(--font-mono);
}
.namelist { background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.tooltip {
  background: var(--popover) !important; color: var(--foreground) !important;
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); font-size: 0.75rem;
}
svg .gridline { stroke: #f0f0f0; }

/* =========================================================== KABUK */
/* Kenar çubuğu → shadcn Sidebar (açık zemin, ince kenarlık) */
.deznav {
  background: var(--sidebar) !important;
  border-right: 1px solid var(--sidebar-border);
  box-shadow: none !important;
}
.deznav .metismenu > li > a {
  color: var(--sidebar-foreground) !important;
  font-size: 0.875rem; font-weight: 400;
  border-radius: calc(var(--radius) - 2px);
  margin: 1px 0.75rem; padding: 0.5rem 0.65rem !important;
  display: flex; align-items: center; gap: 0.6rem;
  transition: background-color .12s;
}
.deznav .metismenu > li > a:hover {
  background: var(--sidebar-accent) !important;
  color: var(--sidebar-foreground) !important;
}
.deznav .metismenu > li > a .menu-icon {
  background: transparent !important;
  width: 1.25rem !important; height: 1.25rem !important; min-width: 1.25rem;
  margin: 0 !important; border-radius: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.deznav .metismenu > li > a .menu-icon i,
.deznav .metismenu > li > a i {
  color: var(--muted-foreground) !important; font-size: 0.9rem !important;
}
.deznav .metismenu > li > a.active,
.deznav .metismenu > li.mm-active > a {
  background: var(--sidebar-accent) !important;
  color: var(--sidebar-foreground) !important;
  font-weight: 500;
}
.deznav .metismenu > li > a.active .menu-icon { background: transparent !important; }
.deznav .metismenu > li > a.active .menu-icon i { color: var(--sidebar-foreground) !important; }
.deznav .metismenu > li > a .nav-text { color: inherit !important; }
.deznav .kld-foot { color: var(--muted-foreground); border-top: 1px solid var(--sidebar-border); }

/* Logo alanı + üst çubuk → shadcn site başlığı */
.nav-header {
  background: var(--sidebar) !important;
  border-right: 1px solid var(--sidebar-border);
  border-bottom: 1px solid var(--sidebar-border);
}
.nav-header .kld-brand-title { color: var(--foreground); font-weight: 700; letter-spacing: 0.08em; }
.nav-header .kld-brand-sub { color: var(--muted-foreground); }
.nav-control .hamburger .line { background: var(--foreground) !important; }
.nav-control { background: transparent !important; }
.header {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
}
.header .nav-link, .header .nav-link i { color: var(--foreground) !important; font-size: 0.875rem; }
.header .nav-link {
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  padding: 0.4rem 0.8rem !important; background: var(--background);
}
.header .nav-link:hover { background: var(--accent); }
.content-body { background: var(--bg) !important; }

/* ===================================================== GİRİŞ SAYFASI */
.authincation { background: var(--bg); }
.login-form {
  background: var(--card); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px); box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  padding: 1.75rem !important; max-width: 400px; margin: 0 auto;
}
.login-form .title { font-size: 1.25rem; font-weight: 600; color: var(--foreground); }
.login-form label, .login-form .form-label { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.login-form .btn-primary, .login-form .btn-block {
  width: 100%; height: 2.25rem; margin: 0.5rem 0 0;
  background: var(--sh-primary) !important; color: var(--sh-primary-foreground) !important;
  border: 0 !important;
}
.login-form .show-pass { color: var(--muted-foreground); }
.alert-danger {
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
  border-radius: calc(var(--radius) - 2px); font-size: 0.85rem;
}

/* ================================================= İstatistik kartı */
.kpi-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.85rem 1rem; min-width: 150px; flex: 1 1 150px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.kpi-label {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.kpi-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.kpi-value { color: var(--foreground); font-size: 1.75rem; font-weight: 600;
  letter-spacing: -0.02em; margin-top: 0.25rem; line-height: 1.1; }

/* ============================ W3Admin dış çerçevesi (outer/inner-body) */
.outer-body { background: var(--sidebar) !important; }
.inner-body {
  background: var(--bg) !important;
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Satır-içi renkli `button.nav`lar (ör. Panel kısayolları): shadcn'de
   ikincil eylemler "outline" düğmedir. İlk/renksiz düğme birincil kalır. */
button.nav[style*="background"] {
  background: var(--background) !important; color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}
button.nav[style*="background"]:hover { background: var(--accent) !important; }

/* ============================================ Sihirbaz adım göstergesi */
/* stepbar() durum renklerini satır-içi --primary değişkenleriyle veriyor
   (testle kilitli). W3Admin'in `.form-wizard .nav-wizard li .nav-link`
   kuralları daha özgül olduğu için tüm kurallar `#stepbar` ile başlar.
   Görünüm: shadcn "stepper" — 2rem daire, 1px bağlantı çizgisi;
   bekleyen = beyaz + kenarlık, tamamlanan = birincil dolgu,
   aktif = birincil dolgu + halka. */
#stepbar .form-wizard { padding-bottom: 2rem !important; }
#stepbar .form-wizard .nav-wizard { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; }
#stepbar .form-wizard .nav-wizard li { flex: 1 1 0; min-width: 0; list-style: none; }
#stepbar .form-wizard .nav-wizard li .nav-link {
  position: relative; display: block; padding: 0 !important;
  background: transparent !important; border: 0 !important;
  text-align: center;
}
#stepbar .form-wizard .nav-wizard li .nav-link span {
  position: relative; z-index: 1;
  display: flex !important; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin: 0 auto;
  border-radius: 999px; line-height: 1;
  border: 1px solid var(--border) !important;
  background: var(--background) !important;
  color: var(--muted-foreground) !important;
  font: 500 0.82rem/1 var(--font-sans);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background-color .15s, color .15s, box-shadow .15s;
}
#stepbar .form-wizard .nav-wizard li .nav-link:hover span { border-color: #a3a3a3 !important; color: var(--foreground) !important; }
#stepbar .form-wizard .nav-wizard li .nav-link.done span,
#stepbar .form-wizard .nav-wizard li .nav-link.active span {
  background: var(--sh-primary) !important;
  border-color: var(--sh-primary) !important;
  color: var(--sh-primary-foreground) !important;
}
#stepbar .form-wizard .nav-wizard li .nav-link.active span {
  box-shadow: 0 0 0 4px rgba(23,23,23,0.12);
}
/* bağlantı çizgisi: dairenin sağ kenarından bir sonraki dairenin sol kenarına */
#stepbar .form-wizard .nav-wizard li .nav-link::after {
  content: "" !important; position: absolute; z-index: 0;
  top: 1rem; left: calc(50% + 1.25rem); width: calc(100% - 2.5rem);
  height: 1px; transform: none;
  background: var(--border) !important;
}
#stepbar .form-wizard .nav-wizard li .nav-link.done::after { background: var(--sh-primary) !important; }
#stepbar .form-wizard .nav-wizard li:last-child .nav-link::after { content: none !important; }
#stepbar .form-wizard .nav-wizard li .nav-link div {
  margin-top: 0.5rem !important; padding: 0 2px;
  color: var(--muted-foreground) !important; font-size: 0.72rem !important;
}
#stepbar .form-wizard .nav-wizard li .nav-link.done div { color: var(--foreground) !important; }
#stepbar .form-wizard .nav-wizard li .nav-link.active div { color: var(--foreground) !important; font-weight: 600; }