/* ═══════════════════════════════════════════════════════════════════════
   Wollf CRM — tasarim sistemi

   Yuzeyler notr grafit; mavi tonlama yok. Yapiyi golge degil sac teli
   cizgiler kurar, boylece uzun mesai boyunca bakilan ekran sakin kalir.
   Degradeler yalnizca gercekten derinlik gereken yerde (yok denecek kadar az).

   Renkler goz karariyla secilmedi: seri ve durum renkleri panel yuzeyine
   (#14181d) karsi dogrulandi, buton dolgu/yazi ciftleri WCAG ile olculdu.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Yuzeyler */
  --bg-root: #0d0f12;
  --bg-app: #0f1216;
  --bg-panel: #14181d;
  --bg-panel-2: #191e24;
  --bg-elevated: #1f252d;
  --bg-input: #10141a;
  --bg-hover: rgba(255, 255, 255, 0.04);

  /* Cizgiler */
  --line: #262c35;
  --line-soft: #1d232b;
  --line-strong: #333b47;

  /* Metin — kontrast panel yuzeyine gore: 15.0 / 7.1 / 5.0 */
  --text: #e8ecf1;
  --text-dim: #9aa5b4;
  --text-faint: #7d8896;

  /* Vurgu ve durumlar. *-ink degerleri beyaz yazi tasiyan dolgular icindir. */
  /* Kisisel vurgu rengi — temsilci kendi secer (bkz. renk paletleri).
     Yalnizca menu, buton, odak halkasi gibi dekoratif yerlerde kullanilir. */
  --accent: #3987e5;
  --accent-ink: #2563b8;
  --accent-soft: rgba(57, 135, 229, 0.12);
  --accent-line: rgba(57, 135, 229, 0.32);

  /* "Gorusmede" rengi herkeste ayni kalmali: kisisel renk buna karisirsa
     durum tahtasinda Hazir/Gorusmede/Molada birbirine girer. */
  --oncall: #3987e5;
  --oncall-soft: rgba(57, 135, 229, 0.12);
  --oncall-line: rgba(57, 135, 229, 0.32);

  --success: #0ca30c;
  --success-ink: #0f7a12;
  --success-soft: rgba(12, 163, 12, 0.12);
  --success-line: rgba(12, 163, 12, 0.3);

  --warn: #fab219;
  --warn-soft: rgba(250, 178, 25, 0.12);
  --warn-line: rgba(250, 178, 25, 0.28);

  --serious: #ec835a;
  --serious-soft: rgba(236, 131, 90, 0.12);
  --serious-line: rgba(236, 131, 90, 0.28);

  --danger: #d03b3b;
  --danger-ink: #b8302f;
  --danger-soft: rgba(208, 59, 59, 0.12);
  --danger-line: rgba(208, 59, 59, 0.3);

  --violet: #9085e9;
  --violet-soft: rgba(144, 133, 233, 0.12);
  --violet-line: rgba(144, 133, 233, 0.3);

  /* Grafik serileri — mavi/aqua cifti korluk simulasyonunda dogrulandi */
  --series-1: #3987e5;
  --series-2: #199e70;
  --grid: #232932;
  --axis: #333b47;

  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;

  /* Golge yalnizca gercekten yuzen katmanlarda: modal, bildirim. */
  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 3px rgba(57, 135, 229, 0.35);

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
}

/* ── Kisisel renk paletleri ────────────────────────────────────────────────
   Secim kok ogeye data-renk olarak yazilir; boylece sayfa acilirken tek satirla
   uygulanir ve varsayilan renk bir an gorunup degismez. Her rengin buton
   dolgusu (*-ink) beyaz yazi ile en az 4.5:1, vurgu tonu panel yuzeyinde en az
   3:1 kontrast verecek sekilde olculdu.                                      */
:root[data-renk="mor"] {
  --accent: #9b8bf0; --accent-ink: #6a4fd0;
  --accent-soft: rgba(155, 139, 240, 0.13); --accent-line: rgba(155, 139, 240, 0.34);
}
:root[data-renk="cam"] {
  --accent: #3fa06a; --accent-ink: #137a41;
  --accent-soft: rgba(63, 160, 106, 0.13); --accent-line: rgba(63, 160, 106, 0.34);
}
:root[data-renk="turkuaz"] {
  --accent: #2ba39c; --accent-ink: #0a7a74;
  --accent-soft: rgba(43, 163, 156, 0.13); --accent-line: rgba(43, 163, 156, 0.34);
}
:root[data-renk="amber"] {
  --accent: #e0a02a; --accent-ink: #8a5f00;
  --accent-soft: rgba(224, 160, 42, 0.13); --accent-line: rgba(224, 160, 42, 0.34);
}
:root[data-renk="gul"] {
  --accent: #e8748f; --accent-ink: #b23a5c;
  --accent-soft: rgba(232, 116, 143, 0.13); --accent-line: rgba(232, 116, 143, 0.34);
}
:root[data-renk="grafit"] {
  --accent: #8c9bad; --accent-ink: #4a5766;
  --accent-soft: rgba(140, 155, 173, 0.13); --accent-line: rgba(140, 155, 173, 0.34);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-root);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.011em; }

::selection { background: rgba(57, 135, 229, 0.3); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2b323d;
  border-radius: 8px;
  border: 3px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover { background: #3a4351; }

/* ── Kart ve panel ─────────────────────────────────────────────────────── */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.card-head h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: 12px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Butonlar ──────────────────────────────────────────────────────────────
   Hiyerarsi renkle degil dolgu agirligiyla kurulur: birincil eylem dolu,
   ikincil eylem cizgili, ucuncul eylem cerceve siz. Hover'da buton yerinden
   oynamaz — sik tiklanan bir panelde hareket yorucu olur.                  */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
}

.btn:hover { background: #262d37; border-color: #3d4653; }
.btn:active { background: #1c222a; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--bg-elevated); border-color: var(--line-strong); }

.btn-primary { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn-primary:hover { background: #2b6fc9; border-color: #2b6fc9; }
.btn-primary:active { background: #1f579f; }
.btn-primary:disabled:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn-success { background: var(--success-ink); border-color: var(--success-ink); color: #fff; }
.btn-success:hover { background: #128c15; border-color: #128c15; }
.btn-success:disabled:hover { background: var(--success-ink); border-color: var(--success-ink); }

.btn-danger { background: var(--danger-ink); border-color: var(--danger-ink); color: #fff; }
.btn-danger:hover { background: #c83736; border-color: #c83736; }
.btn-danger:disabled:hover { background: var(--danger-ink); border-color: var(--danger-ink); }

.btn-warn { background: var(--warn); border-color: var(--warn); color: #241a02; font-weight: 600; }
.btn-warn:hover { background: #ffbe33; border-color: #ffbe33; }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-dim);
}
.btn-ghost:hover { background: var(--bg-hover); border-color: transparent; color: var(--text); }

.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-block { width: 100%; }

/* ── Form ──────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }

.field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
}

input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.14s ease;
}

input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

/* ── Rozetler ──────────────────────────────────────────────────────────────
   Durum rengi tek basina anlam tasimaz; her rozet metin etiketiyle gelir.  */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.badge-neutral { background: rgba(154, 165, 180, 0.1); color: #a7b2c0; border-color: rgba(154, 165, 180, 0.2); }
/* Durum rozeti — kisisel renkten etkilenmez (Gorusmede / Araniyor / Anonsta). */
.badge-accent { background: var(--oncall-soft); color: #7cb0f0; border-color: var(--oncall-line); }
.badge-success { background: var(--success-soft); color: #4cc24c; border-color: var(--success-line); }
.badge-warn { background: var(--warn-soft); color: #f0be55; border-color: var(--warn-line); }
.badge-serious { background: var(--serious-soft); color: #f09b78; border-color: var(--serious-line); }
.badge-danger { background: var(--danger-soft); color: #e57373; border-color: var(--danger-line); }
.badge-violet { background: var(--violet-soft); color: #aba2ef; border-color: var(--violet-line); }

.pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Tablo ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--bg-panel-2);
  text-align: left;
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  z-index: 1;
}

tbody td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
tbody tr:hover { background: var(--bg-hover); }
tbody tr:last-child td { border-bottom: none; }
.table-empty { padding: 36px; text-align: center; color: var(--text-faint); }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 11, 0.66);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
}

.modal {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-float);
}

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ── Bildirim ──────────────────────────────────────────────────────────── */
#toasts {
  position: fixed;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 80;
}

.toast {
  min-width: 260px;
  max-width: 380px;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-float);
  animation: slide-in 0.2s ease;
  font-size: 13px;
  line-height: 1.45;
}

.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warn); }

@keyframes slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.hidden { display: none !important; }