/* =========================================================
   Lazzoni Call Center AI - Themeable UI (Light/Dark)
   Dark mode: html.dark
========================================================= */

:root{
  --bg: #f6f7fb;
  --surface: #ffffff;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #6b7280;
  --line: #e7eaf2;

  --shadow: 0 12px 26px rgba(15,23,42,.08);
  --shadow2: 0 10px 22px rgba(15,23,42,.10);

  --primary: #6d28d9;
  --primary2:#7c3aed;

  --danger:#ef4444;
  --success:#22c55e;
  --warn:#f59e0b;
  --info:#3b82f6;

  --sidebar-bg:#0f172a;
  --sidebar-card: rgba(255,255,255,.06);
  --sidebar-text:#e5e7eb;
  --sidebar-muted:#a7b0c0;

  --input-bg:#ffffff;
  --input-text:#0f172a;
  --input-line:#e7eaf2;

  --pill-bg:#f3f4f6;
  --pill-text:#111827;

  --focus: 0 0 0 4px rgba(109,40,217,.18);
}

html.dark{
  --bg:#0b1220;
  --surface:#0f172a;
  --card:#111b2d;
  --text:#e5e7eb;
  --muted:#9aa4b2;
  --line: rgba(255,255,255,.10);

  --shadow: 0 14px 30px rgba(0,0,0,.35);
  --shadow2: 0 12px 26px rgba(0,0,0,.35);

  --primary:#8b5cf6;
  --primary2:#a78bfa;

  --sidebar-bg:#070c16;
  --sidebar-card: rgba(255,255,255,.06);
  --sidebar-text:#e5e7eb;
  --sidebar-muted:#9aa4b2;

  --input-bg:#0b1220;
  --input-text:#e5e7eb;
  --input-line: rgba(255,255,255,.12);

  --pill-bg: rgba(255,255,255,.08);
  --pill-text:#e5e7eb;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: radial-gradient(1200px 600px at 25% -10%, rgba(109,40,217,.10), transparent 60%),
              radial-gradient(900px 500px at 85% 0%, rgba(59,130,246,.08), transparent 60%),
              var(--bg);
  color: var(--text);
}

/* Links */
a{ color:inherit; text-decoration:none; }

/* Generic */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(109,40,217,.10);
  border: 1px solid rgba(109,40,217,.25);
  color: var(--text);
  font-weight:800;
  font-size:12px;
}

/* Buttons / Inputs */
button{ font-family:inherit; }
.icon-btn{
  width:38px;height:38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow2);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn:active{ transform: translateY(0); }

input, select, textarea{
  outline:none;
  color: var(--input-text);
  background: var(--input-bg);
  border: 1px solid var(--input-line);
  border-radius: 12px;
}
input:focus, select:focus, textarea:focus{ box-shadow: var(--focus); border-color: rgba(139,92,246,.65); }

input::placeholder, textarea::placeholder{ color: rgba(154,164,178,.9); }

/* Layout */
.app{ display:flex; min-height:100vh; }
.sidebar{
  width: 260px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
              radial-gradient(800px 400px at 50% -10%, rgba(139,92,246,.18), transparent 60%),
              var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.brand{
  display:flex; align-items:center; gap:10px;
  padding:10px;
  border-radius:16px;
  background: var(--sidebar-card);
  border:1px solid rgba(255,255,255,.08);
}
.brand-logo{ width:38px; height:38px; object-fit:contain; }
.brand-title{ font-weight:900; font-size:14px; }
.brand-sub{ font-size:12px; color: var(--sidebar-muted); margin-top:2px; }

.nav{ display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.nav a{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius: 14px;
  color: var(--sidebar-text);
  background: transparent;
  border: 1px solid transparent;
}
.nav a:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
.nav a.active{
  background: rgba(139,92,246,.18);
  border-color: rgba(139,92,246,.35);
}
.nav .icon{ width:20px; text-align:center; opacity:.95; }

.sidebar-footer{ margin-top:auto; }
.logout{
  display:block;
  padding:12px 12px;
  border-radius: 14px;
  background: rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.25);
  color: var(--sidebar-text);
  font-weight:900;
  text-align:center;
}
.logout:hover{ filter: brightness(1.05); }

.main{ flex:1; padding: 14px 16px; }
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: sticky;
  top: 10px;
  z-index: 10;
}
.top-left{
  font-weight: 900;
  font-size: 16px;
}
.top-right{
  display:flex;
  align-items:center;
  gap: 12px;
  color: var(--muted);
}
.top-right b{ color: var(--text); }
.content{ margin-top: 14px; }

/* Auth/Login */
.auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.login-card{
  width: 420px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.login-header{ display:flex; align-items:center; gap:12px; }
.login-logo{ width:54px; height:54px; object-fit:contain; }
.login-title{ font-weight: 900; font-size: 18px; }
.login-sub{ color: var(--muted); margin-top:2px; font-size: 12px; }
.login-form{ margin-top: 12px; display:flex; flex-direction:column; gap:10px; }
.login-form label{ font-weight: 800; font-size: 12px; color: var(--muted); }
.login-form input{ padding: 12px; }
.login-form button{
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #fff;
  font-weight: 900;
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.alert{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.25);
  color: var(--text);
  font-weight: 800;
}

/* Stats row */
.stat-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.stat-card{
  padding: 14px 14px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.stat-title{ color: var(--muted); font-size: 12px; font-weight: 900; }
.stat-value{ font-size: 34px; font-weight: 900; margin-top: 6px; color: var(--text); }
.stat-card:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  opacity:.95;
}
.stat-card.b-purple:before{ background: var(--primary); }
.stat-card.b-blue:before{ background: var(--info); }
.stat-card.b-green:before{ background: var(--success); }
.stat-card.b-orange:before{ background: var(--warn); }

/* Chat layout */
.chat{
  display:grid;
  grid-template-columns: 360px 1fr 340px;
  gap: 12px;
  align-items: stretch;
}

/* Left */
.left{ overflow:hidden; }
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
}
.card-title{ font-weight: 900; }
.head-actions{ display:flex; align-items:center; gap:10px; }
.filter-form{ margin:0; }
.filter-select{ padding: 8px 10px; }

.search-wrap{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.search-wrap input{
  width:100%;
  padding: 10px 12px;
}

.inbox{
  padding: 10px;
  overflow:auto;
  height: calc(100vh - 260px);
}
.inbox-row{ margin-bottom: 10px; }
.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
a.item{ cursor:pointer; }
a.item:hover{ transform: translateY(-1px); }
a.item.active{
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 4px rgba(139,92,246,.12);
}

.item-left .t{ font-weight: 900; }
.item-left .s{ color: var(--muted); font-size: 12px; margin-top:4px; }

.item-right{ display:flex; align-items:center; gap:10px; }
.st-pill{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--line);
  background: var(--pill-bg);
  color: var(--pill-text);
}
.st-pill.open{ border-color: rgba(59,130,246,.35); color: var(--info); }
.st-pill.hold{ border-color: rgba(245,158,11,.40); color: var(--warn); }
.st-pill.closed{ border-color: rgba(34,197,94,.35); color: var(--success); }

.xbtn{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}
.xbtn:hover{ filter: brightness(1.05); }

/* Mid */
.mid{ display:flex; flex-direction:column; overflow:hidden; }
.chat-head{
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  font-weight: 900;
  text-align:center; /* üst üste binen başlık hissini azaltır */
}
.chat-body{
  padding: 14px 14px;
  overflow:auto;
  flex: 1;
  min-height: 420px;
  background:
    radial-gradient(900px 420px at 20% -10%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(900px 420px at 80% 0%, rgba(59,130,246,.07), transparent 60%);
}
.msg{ margin-bottom: 12px; }
.msg .meta{ color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.msg .bubble{
  display:inline-block;
  max-width: 80%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow2);
}
.msg.agent{ text-align:right; }
.msg.agent .bubble{
  background: rgba(139,92,246,.14);
  border-color: rgba(139,92,246,.28);
}
.msg.customer .bubble{
  background: rgba(255,255,255,.06);
}

/* Composer */
.compose{
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.compose input{
  flex:1;
  padding: 12px 12px;
}
.compose button{
  padding: 12px 14px;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow: var(--shadow2);
}

/* Right */
.right{ overflow:hidden; }
.right-top{ padding: 12px; border-bottom: 1px solid var(--line); }
.start{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border:0;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.right-body{ padding: 12px; display:flex; flex-direction:column; gap: 10px; }
.pill{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.btn{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
}
.btn.green{ border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.10); }
.btn.gray{ border-color: rgba(148,163,184,.25); background: rgba(148,163,184,.10); }
.btn.red{ border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.10); }
.status{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(148,163,184,.35);
  color: var(--muted);
  background: rgba(255,255,255,.03);
}
/* =========================================================
   REPORTS ONLY (minimal + safe)
   - Sadece rapor sayfasında inline beyazlıkları düzeltir
   - Globali bozmaz
========================================================= */

html.dark .reports-wrap [style*="background:#fff"],
html.dark .reports-wrap [style*="background: #fff"],
html.dark .reports-wrap [style*="background:#ffffff"],
html.dark .reports-wrap [style*="background: #ffffff"],
html.dark .reports-wrap [style*="background:white"],
html.dark .reports-wrap [style*="background: white"],
html.dark .reports-wrap [style*="background-color:#fff"],
html.dark .reports-wrap [style*="background-color: #fff"],
html.dark .reports-wrap [style*="background-color:#ffffff"],
html.dark .reports-wrap [style*="background-color: #ffffff"]{
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}

html.dark .reports-wrap [style*="color:#111"],
html.dark .reports-wrap [style*="color:#111827"],
html.dark .reports-wrap [style*="color:#0f172a"],
html.dark .reports-wrap [style*="color:#000"]{
  color: var(--text) !important;
}

/* Temsilci Performansı + Müşteri Memnuniyeti alt kutular */
html.dark .reports-wrap [class*="kpi"],
html.dark .reports-wrap [class*="score"],
html.dark .reports-wrap [class*="rate"],
html.dark .reports-wrap [class*="perform"],
html.dark .reports-wrap [class*="memnun"]{
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}
/* =========================================================
   REPORTS TOKENS (panel/panel-2) - eksik değişkenleri tamamla
   (style.css en alta veya reports_content.php içindeki en son style bloğunun en üstüne)
========================================================= */
:root{
  --panel: var(--surface);
  --panel-2: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
}

html.dark{
  --panel: var(--card);
  --panel-2: color-mix(in srgb, var(--card) 88%, #ffffff 12%);
}

/* =========================================================
   REPORTS: Chart başlıkları + rapor içi inline renkleri dark'ta düzelt
   (Sohbeti etkilemez)
========================================================= */

/* Chart kartlarındaki başlık ve küçük açıklamalar */
html.dark .reports-wrap .chartTitle h3,
html.dark .reports-wrap .chartTitle small{
  color: var(--text) !important;
}

/* Rapor içinde inline yazılmış koyu renkleri token'a bağla (sadece reports-wrap) */
html.dark .reports-wrap [style*="color:#111827"],
html.dark .reports-wrap [style*="color:#0f172a"],
html.dark .reports-wrap [style*="color:#000"],
html.dark .reports-wrap [style*="color:#334155"],
html.dark .reports-wrap [style*="color:#475569"],
html.dark .reports-wrap [style*="color:#64748b"],
html.dark .reports-wrap [style*="color:#94a3b8"]{
  color: var(--text) !important;
}

/* Alt açıklama/metinler için biraz daha yumuşak ton */
html.dark .reports-wrap .pill,
html.dark .reports-wrap .reports-title p,
html.dark .reports-wrap .kpi .lbl,
html.dark .reports-wrap .mini .m1{
  color: var(--muted) !important;
}
/* =========================================================
   TEK RENK KAYNAĞI (Açık / Beklemede / Tamamlandı + KPI)
   style.css EN ALT
========================================================= */

:root{
  --st-open:  var(--info);    /* Açık = mavi */
  --st-hold:  var(--warn);    /* Beklemede = turuncu */
  --st-closed:var(--success); /* Tamamlandı = yeşil */
  --st-total: var(--primary); /* Toplam = mor */
}

/* 1) DURUM PILL'LERİ — sohbet + raporlar dahil HER YERDE */
.st-pill{
  border: 1px solid var(--line);
  background: var(--pill-bg);
  color: var(--pill-text);
}

/* Açık */
.st-pill.open{
  border-color: rgba(59,130,246,.35) !important;
  color: var(--st-open) !important;
}
/* Beklemede */
.st-pill.hold{
  border-color: rgba(245,158,11,.40) !important;
  color: var(--st-hold) !important;
}
/* Tamamlandı */
.st-pill.closed{
  border-color: rgba(34,197,94,.35) !important;
  color: var(--st-closed) !important;
}

/* 2) GENEL KPI (Toplam / Açık / Tamamlanan / Beklemede) — sadece raporlar içinde
   Not: reports_content.php’de bunlar inline border-left ile geliyor; biz burada ezip aynı renge bağlıyoruz.
*/
.reports-wrap .cards4 .kpi:nth-child(1){
  border-left-color: var(--st-total) !important;   /* Toplam Görüşme */
}
.reports-wrap .cards4 .kpi:nth-child(2){
  border-left-color: var(--st-open) !important;    /* Açık Çağrılar */
}
.reports-wrap .cards4 .kpi:nth-child(3){
  border-left-color: var(--st-closed) !important;  /* Tamamlanan */
}
.reports-wrap .cards4 .kpi:nth-child(4){
  border-left-color: var(--st-hold) !important;    /* Beklemeye Alınan */
}

/* KPI değer yazısı da aynı renk olsun (istersen kapatabilirsin) */
.reports-wrap .cards4 .kpi:nth-child(1) .val{ color: var(--st-total) !important; }
.reports-wrap .cards4 .kpi:nth-child(2) .val{ color: var(--st-open) !important; }
.reports-wrap .cards4 .kpi:nth-child(3) .val{ color: var(--st-closed) !important; }
.reports-wrap .cards4 .kpi:nth-child(4) .val{ color: var(--st-hold) !important; }
/* =========================================================
   REPORTS: SAT BADGE (daha canlı)
   - Agent tablosu "Ort. Memnuniyet"
   - CSAT "Problemli Görüşmeler" Memnuniyet
========================================================= */

.reports-wrap .sat-badge{
  font-weight: 900;
  border-width: 1px;
  /* biraz daha tok görünüm */
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* Daha canlı arkaplan + daha güçlü border + yazı rengi de canlı */
.reports-wrap .sat-badge.sat-hi{
  background: color-mix(in srgb, var(--success) 50%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--success) 70%, var(--line)) !important;
  color: var(--success) !important;
}
.reports-wrap .sat-badge.sat-good{
  background: color-mix(in srgb, var(--info) 50%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--info) 70%, var(--line)) !important;
  color: var(--info) !important;
}
.reports-wrap .sat-badge.sat-mid{
  background: color-mix(in srgb, var(--warn) 50%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--warn) 70%, var(--line)) !important;
  color: var(--warn) !important;
}
.reports-wrap .sat-badge.sat-bad{
  background: color-mix(in srgb, var(--danger) 50%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--danger) 70%, var(--line)) !important;
  color: var(--danger) !important;
}
/* =========================================================
   CHAT: fontları küçült (raporlara dokunmaz)
========================================================= */

/* Sol inbox (müşteri adları + alt satır) */
.chat .item-left .t{
  font-size: 13px;
  line-height: 1.2;
}
.chat .item-left .s{
  font-size: 11px; /* zaten 12px'ti, biraz daha sıkı */
}

/* Durum pill (açık/beklemede/tamamlandı) */
.chat .st-pill{
  font-size: 11px;
  padding: 5px 9px;
}

/* Mesaj balonları */
.chat .msg .bubble{
  font-size: 13px;
  line-height: 1.35;
}

/* Orta başlık */
.chat .chat-head{
  font-size: 13px;
}

/* =========================================================
   RIGHT PANEL CALL BUTTONS: st-pill ile aynı (mat, dolu değil)
   (Selector'lar bilerek geniş: yakalamazsa bile artık yakalar)
========================================================= */

/* Sağ paneldeki tüm .btn’ler (Arama Başlat/Beklet/Sonlandır) */
.right .btn.green,
.right .btn.gray,
.right .btn.red,
.right-body .btn.green,
.right-body .btn.gray,
.right-body .btn.red{
  background: var(--pill-bg) !important;
  border: 2px solid var(--line) !important;
  color: var(--pill-text) !important;
  box-shadow: var(--shadow2) !important;
}

/* Açık (mavi) */
.right .btn.green,
.right-body .btn.green{
  border-color: rgba(59,130,246,.55) !important;
  color: var(--info) !important;
}

/* Beklemede (turuncu) */
.right .btn.gray,
.right-body .btn.gray{
  border-color: rgba(245,158,11,.60) !important;
  color: var(--warn) !important;
}

/* Sonlandır (kırmızı) */
.right .btn.red,
.right-body .btn.red{
  border-color: rgba(239,68,68,.55) !important;
  color: var(--danger) !important;
}

.right .btn.green:hover,
.right .btn.gray:hover,
.right .btn.red:hover,
.right-body .btn.green:hover,
.right-body .btn.gray:hover,
.right-body .btn.red:hover{
  filter: brightness(1.16);
  transform: translateY(-1px);
}
/* =========================================================
   RIGHT PANEL CALL BUTTONS: daha parlak + biraz daha kalın çerçeve
========================================================= */

.right .btn.green,
.right .btn.gray,
.right .btn.red,
.right-body .btn.green,
.right-body .btn.gray,
.right-body .btn.red{
  background: var(--pill-bg) !important;
  border: 2px solid var(--line) !important;   /* <-- kalınlık */
  color: var(--pill-text) !important;
  box-shadow: var(--shadow2) !important;
}

/* Açık (mavi) */
.right .btn.green,
.right-body .btn.green{
  border-color: rgba(59,130,246,.70) !important;  /* <-- daha canlı */
  color: var(--info) !important;
  box-shadow: var(--shadow2), 0 0 0 1px rgba(59,130,246,.20) !important; /* <-- hafif parlaklık */
}

/* Beklemede (turuncu) */
.right .btn.gray,
.right-body .btn.gray{
  border-color: rgba(245,158,11,.75) !important;
  color: var(--warn) !important;
  box-shadow: var(--shadow2), 0 0 0 1px rgba(245,158,11,.20) !important;
}

/* Sonlandır (kırmızı) */
.right .btn.red,
.right-body .btn.red{
  border-color: rgba(239,68,68,.70) !important;
  color: var(--danger) !important;
  box-shadow: var(--shadow2), 0 0 0 1px rgba(239,68,68,.20) !important;
}

/* hover: biraz daha canlı */
.right .btn.green:hover,
.right .btn.gray:hover,
.right .btn.red:hover,
.right-body .btn.green:hover,
.right-body .btn.gray:hover,
.right-body .btn.red:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}
/* RIGHT PANEL CALL BUTTONS (force) */
.callbtn{
  background: var(--pill-bg) !important;
  border: 2px solid var(--line) !important;     /* çerçeve kalın */
  color: var(--pill-text) !important;
  box-shadow: var(--shadow2) !important;
}

.callbtn.callbtn-open{
  border-color: rgba(59,130,246,.75) !important;
  color: var(--info) !important;
  box-shadow: var(--shadow2), 0 0 0 1px rgba(59,130,246,.22) !important;
}
.callbtn.callbtn-hold{
  border-color: rgba(245,158,11,.80) !important;
  color: var(--warn) !important;
  box-shadow: var(--shadow2), 0 0 0 1px rgba(245,158,11,.22) !important;
}
.callbtn.callbtn-end{
  border-color: rgba(239,68,68,.75) !important;
  color: var(--danger) !important;
  box-shadow: var(--shadow2), 0 0 0 1px rgba(239,68,68,.22) !important;
}

.callbtn:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}
/* =========================================================
   CHAT RIGHT PANEL - Call Buttons (TEK KAYNAK)
   Arama Başlat = YEŞİL, Beklet = TURUNCU, Sonlandır = KIRMIZI
   - içi dolu değil
   - çerçeve biraz kalın + biraz parlak
========================================================= */

/* sağ paneldeki 3 butonu kesin yakala */
.chat .right .right-body .btn.green,
.chat .right .right-body .btn.gray,
.chat .right .right-body .btn.red{
  background: transparent !important;           /* içi dolu olmasın */
  border-width: 3px !important;                /* kalınlık (2 -> 3) */
  border-style: solid !important;
  box-shadow: none !important;                 /* mat dursun */
}

/* ARAMA BAŞLAT = YEŞİL */
.chat .right .right-body .btn.green{
  border-color: rgba(34,197,94,.85) !important; /* daha parlak çerçeve */
  color: var(--success) !important;
}

/* ARAMA BEKLET = TURUNCU */
.chat .right .right-body .btn.gray{
  border-color: rgba(245,158,11,.88) !important;
  color: var(--warn) !important;
}

/* ARAMA SONLANDIR = KIRMIZI */
.chat .right .right-body .btn.red{
  border-color: rgba(239,68,68,.85) !important;
  color: var(--danger) !important;
}

/* hover: çok hafif canlılık */
.chat .right .right-body .btn.green:hover,
.chat .right .right-body .btn.gray:hover,
.chat .right .right-body .btn.red:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.chat .right .right-body .btn.green,
.chat .right .right-body .btn.gray,
.chat .right .right-body .btn.red{
  background: transparent !important;
  border-width: 3px !important;
  border-style: solid !important;
  box-shadow: none !important;
}

/* ARAMA BAŞLAT = YEŞİL */
.chat .right .right-body .btn.green{
  border-color: rgba(34,197,94,.95) !important; /* parlaklık */
  color: var(--success) !important;
  box-shadow: 0 0 0 1px rgba(34,197,94,.25) !important; /* glow */
}

/* ARAMA BEKLET = TURUNCU */
.chat .right .right-body .btn.gray{
  border-color: rgba(245,158,11,.95) !important;
  color: var(--warn) !important;
  box-shadow: 0 0 0 1px rgba(245,158,11,.25) !important;
}

/* ARAMA SONLANDIR = KIRMIZI */
.chat .right .right-body .btn.red{
  border-color: rgba(239,68,68,.95) !important;
  color: var(--danger) !important;
  box-shadow: 0 0 0 1px rgba(239,68,68,.25) !important;
}
/* === FINAL OVERRIDE: Right panel call buttons (EN ALTTA KALSIN) === */
.right .btn.green,
.right .btn.gray,
.right .btn.red,
.right-body .btn.green,
.right-body .btn.gray,
.right-body .btn.red{
  background: transparent !important;                 /* içi dolu olmasın */
  border: 3px solid var(--line) !important;           /* kalınlık */
  box-shadow: none !important;
}

/* Yeşil = Arama Başlat */
.right .btn.green,
.right-body .btn.green{
  border-color: rgba(34,197,94, 1) !important;        /* parlaklık (en yüksek) */
  color: var(--success) !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.28) !important; /* glow (parlaklık) */
}

/* Turuncu = Arama Beklet */
.right .btn.gray,
.right-body .btn.gray{
  border-color: rgba(245,158,11, 1) !important;
  color: var(--warn) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.28) !important;
}

/* Kırmızı = Arama Sonlandır */
.right .btn.red,
.right-body .btn.red{
  border-color: rgba(239,68,68, 1) !important;
  color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.28) !important;
}

.right .btn.green:hover,
.right .btn.gray:hover,
.right .btn.red:hover,
.right-body .btn.green:hover,
.right-body .btn.gray:hover,
.right-body .btn.red:hover{
  filter: brightness(1.10);
  transform: translateY(-1px);
}
/* === Logout (Çıkış) daha canlı kırmızı === */
.logout{
  background: rgba(239,68,68,.22) !important;   /* .12 -> .22 daha canlı */
  border-color: rgba(239,68,68,.55) !important; /* .25 -> .55 daha belirgin */
  color: #fff !important;                       /* daha kontrast / canlı */
  box-shadow: 0 0 0 2px rgba(239,68,68,.18) !important; /* hafif parlaklık */
}

.logout:hover{
  filter: brightness(1.10);
}
/* Son Görüşmeler - butonlar asla genişlemesin */
.reports-wrap .recentbar .btn{
  width:auto !important;
  min-width:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
}
/* =========================================
   USERS PAGE - Dark mode readability fix
   ========================================= */

/* Kullanıcılar sayfası kart/tabloda metinleri aç */
html.dark .users-page,
html.dark .users-page .card,
html.dark .users-page table,
html.dark .users-page td,
html.dark .users-page th{
  color: var(--text) !important;
}

/* Tablo başlıkları (İsim Soyisim / Kullanıcı Adı / E-posta) */
html.dark .users-page thead th{
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* Satır içerikleri */
html.dark .users-page tbody td{
  color: #ffffff !important;
}

/* Kullanıcı adı linki mor kalsın */
html.dark .users-page a,
html.dark .users-page a:visited{
  color: var(--primary) !important; /* mor */
  font-weight: 900 !important;
}
html.dark .users-page a:hover{
  text-decoration: underline;
}

/* Eğer kullanıcı adı ayrı bir span/class ise yakala */
html.dark .users-page .username,
html.dark .users-page .user-username{
  color: var(--primary) !important;
  font-weight: 900 !important;
}

/* E-posta bazen link oluyor: email linklerini beyaz yap */
html.dark .users-page a[href^="mailto:"]{
  color: #ffffff !important;
  font-weight: 700 !important;
}
/* Raporlar alt menü ikonları */
.subnav a{
  display:flex;
  align-items:center;
  gap:10px;
}

.subnav a .sicon{
  width:18px;
  display:inline-flex;
  justify-content:center;
  opacity:.9;
}
/* KPI renkleri (Temsilci Performansı üst 6 kutu) */
/* NOT: dark mode sizde html.dark, .dark değil */
.card.kpi{
  /* inline border:1px geldiği için sol şeridi zorla kalın yapıyoruz */
  border-left-width: 4px !important;
  border-left-style: solid !important;
  border-left-color: rgba(148,163,184,.25);
}

/* LIGHT */
.card.kpi.b-purple{ border-left-color: var(--primary) !important; }
.card.kpi.b-blue  { border-left-color: var(--info) !important; }
.card.kpi.b-orange{ border-left-color: var(--warn) !important; }
.card.kpi.b-green { border-left-color: var(--success) !important; }
.card.kpi.b-cyan  { border-left-color: #06b6d4 !important; }
.card.kpi.b-indigo{ border-left-color: #6366f1 !important; }

/* DARK (html.dark!) */
html.dark .card.kpi.b-purple{ border-left-color:#8b5cf6 !important; }
html.dark .card.kpi.b-blue  { border-left-color:#3b82f6 !important; }
html.dark .card.kpi.b-orange{ border-left-color:#f59e0b !important; }
html.dark .card.kpi.b-green { border-left-color:#22c55e !important; }
html.dark .card.kpi.b-cyan  { border-left-color:#06b6d4 !important; }
html.dark .card.kpi.b-indigo{ border-left-color:#6366f1 !important; }

/* =========================================================
   FINAL FIX — CSAT (Reports) badges + İncele button
   BUNU style.css EN ALTA KOY
========================================================= */

/* Memnuniyet rozetleri: soft + düzgün (Problemli Görüşmeler dahil) */
html.dark .reports-wrap .sat-badge,
.reports-wrap .sat-badge{
  all: unset !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width: 38px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html.dark .reports-wrap .sat-badge.sat-hi,
.reports-wrap .sat-badge.sat-hi{
  border-color: rgba(34,197,94,.55) !important;
  color: #22c55e !important;
}
html.dark .reports-wrap .sat-badge.sat-good,
.reports-wrap .sat-badge.sat-good{
  border-color: rgba(59,130,246,.55) !important;
  color: #3b82f6 !important;
}
html.dark .reports-wrap .sat-badge.sat-mid,
.reports-wrap .sat-badge.sat-mid{
  border-color: rgba(245,158,11,.60) !important;
  color: #f59e0b !important;
}
html.dark .reports-wrap .sat-badge.sat-bad,
.reports-wrap .sat-badge.sat-bad{
  border-color: rgba(239,68,68,.55) !important;
  color: #ef4444 !important;
}

/* İncele butonu: kesin mor pill */
html.dark .reports-wrap button.rcPreviewBtn,
.reports-wrap button.rcPreviewBtn{
  all: unset !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  background: rgba(109,40,217,.26) !important;
  border: 1px solid rgba(109,40,217,.40) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html.dark .reports-wrap button.rcPreviewBtn:hover,
.reports-wrap button.rcPreviewBtn:hover{
  filter: brightness(1.10) !important;
  transform: translateY(-1px) !important;
}
/* KPI sol renk çizgisi */
.kpi{ position:relative; }
.kpi:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  border-radius:14px 0 0 14px;
  opacity:.95;
}
.kpi-purple:before{ background:#6d28d9; }
.kpi-blue:before{ background:#3b82f6; }
.kpi-green:before{ background:#10b981; }
.kpi-orange:before{ background:#f59e0b; }