/**
 * TelAsistan - "Retell Dokusu" Tema
 * Kurumsal Renk: #35398C (yalnız vurgu — buton, link, aktif durum) / #EB6A5C (Coral, ikincil vurgu)
 * Fokus: Retell.ai benzeri sade doku — nötr zinc yüzeyler, 1px ince kenarlıklar,
 * düz (flat) bileşenler, kompakt tipografi (Inter), bölüm etiketli sidebar.
 * Gradient / cam efekti / parlayan gölge KULLANILMAZ.
 */

/* ─── 1. KRİTİK LAYOUT ─── */
.content-wrapper .navbar {
  z-index: auto;
}

/* Header gizli olduğunda padding kaldır (Retell tarzı) */
.layout-navbar-hidden .layout-page {
  padding-top: 0 !important;
}

/* ─── 2. TASARIM TOKENLERI ─── */
:root,
[data-bs-theme="light"] {
  --t-bg-page: #fafafa;
  /* Retell tarzı nötr zemin — mavi tonu yok */
  --t-bg-card: #ffffff;
  --t-bg-sidebar: #fbfbfb;
  --t-bg-sidebar-hover: #f0f0f1;
  --t-bg-navbar: rgba(255, 255, 255, 0.9);
  --t-border: #ececee;
  --t-border-strong: #e0e0e2;
  --t-text: #18181b;
  /* Near-black (zinc-900) */
  --t-text-muted: #71717a;
  --t-accent: #232329;
  /* Retell monokrom: aksiyon rengi near-siyah */
  --t-accent-rgb: 35, 35, 41;
  --t-coral: #EB6A5C;
  --t-coral-rgb: 235, 106, 92;

  --t-accent-soft: rgba(35, 35, 41, 0.06);
  --t-accent-soft-hover: rgba(35, 35, 41, 0.1);

  /* Seçili/bakılan tablo satırı — HOVER'DAN BELİRGİN ŞEKİLDE KOYU olmalı
     (hover: --t-bg-sidebar-hover). Aksi halde "seçili" işareti fark edilmez. */
  --t-row-selected: #e2e2e6;
  --t-row-selected-hover: #d8d8dd;

  --t-shadow-soft: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --t-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --t-shadow-premium: 0 8px 24px -8px rgba(0, 0, 0, 0.12);

  --t-radius: 10px;
  --t-radius-sm: 8px;
  --bs-border-radius: 10px;
  --t-sidebar-width: 15.75rem;
}

[data-bs-theme="dark"] {
  --t-bg-page: #101014;
  --t-bg-card: #17171c;
  --t-bg-sidebar: #131317;
  --t-bg-sidebar-hover: #1f1f25;
  --t-bg-navbar: rgba(23, 23, 28, 0.85);
  --t-border: #26262c;
  --t-border-strong: #35353c;
  --t-text: #f4f4f5;
  --t-text-muted: #a1a1aa;
  --t-accent: #d4d4d8;
  /* Koyu zeminde monokrom açık vurgu */
  --t-accent-rgb: 212, 212, 216;
  --t-accent-soft: rgba(212, 212, 216, 0.1);
  --t-accent-soft-hover: rgba(212, 212, 216, 0.16);

  /* Karanlıkta seçili satır AÇILARAK ayrışır (hover #1f1f25'ten belirgin fark). */
  --t-row-selected: #2c2c34;
  --t-row-selected-hover: #34343d;
}

:root {
  --bs-body-bg: var(--t-bg-page);
  --bs-card-bg: var(--t-bg-card);
  --bs-card-border-color: var(--t-border);
}

/* ─── 3. SAYFA ─── */
body {
  background: var(--t-bg-page);
  color: var(--t-text);
  font-family: 'Inter', 'Public Sans', sans-serif;
  font-size: 0.8125rem;
  /* Retell yoğunluğu: 13px taban */
  letter-spacing: -0.006em;
}

.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper {
  background: var(--t-bg-page);
}

.container-p-y {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

/* Kompakt başlık ölçeği (Retell yoğunluğu — kurumsal, gösterişsiz) */
h4, .h4 {
  font-size: 1.25rem;
}

h5, .h5 {
  font-size: 1.0625rem;
}

h6, .h6 {
  font-size: 0.9375rem;
}

/* ─── 4. SIDEBAR (Premium Side Navigation) ─── */
#layout-menu.layout-menu {
  --bs-menu-bg: var(--t-bg-sidebar);
  --bs-menu-color: var(--t-text);
  --bs-menu-hover-bg: var(--t-bg-sidebar-hover);
  --bs-menu-hover-color: var(--t-text);
  --bs-menu-active-bg: var(--t-accent-soft);
  --bs-menu-active-color: var(--t-accent);
  --bs-menu-sub-active-bg: var(--t-accent-soft);
  --bs-menu-sub-active-color: var(--t-accent);
  --bs-menu-width: var(--t-sidebar-width);
  --bs-menu-box-shadow: none;
  background: var(--t-bg-sidebar);
  border-inline-end: 1px solid var(--t-border);
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#layout-menu .app-brand {
  background: var(--t-bg-sidebar); /* Solid background to prevent menu overlap on scroll */
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

/* Retell tarzı - kompakt brand */
.layout-menu-retell .retell-app-brand {
  padding: 1.25rem 1.25rem;
  border-bottom: none;
}

.layout-menu-retell .retell-app-brand .app-brand-logo img {
  height: 36px;
}

.layout-menu-retell .retell-app-brand .app-brand-text img {
  width: 85px;
  max-height: 28px;
}

#layout-menu .menu-inner {
  padding: 1.5rem 0.75rem;
}

#layout-menu .menu-item {
  margin-bottom: 0.125rem;
}

#layout-menu .menu-link,
#layout-menu .menu-toggle {
  border-radius: var(--t-radius-sm) !important;
  margin: 0 !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
  color: var(--t-text-muted) !important;
}

#layout-menu .menu-link:hover,
#layout-menu .menu-toggle:hover {
  background: var(--t-bg-sidebar-hover) !important;
  color: var(--t-text) !important;
  transform: none !important;
  /* Fix: Remove horizontal shift */
}

#layout-menu .menu-toggle::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 1.25rem !important;
  display: block !important;
  width: 0.45rem !important;
  height: 0.45rem !important;
  border-top: 1.5px solid currentColor !important;
  border-right: 1.5px solid currentColor !important;
  transform: translateY(-50%) rotate(45deg) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  opacity: 0.6 !important;
  background-color: transparent !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

#layout-menu .menu-item.open>.menu-toggle::after {
  transform: translateY(-50%) rotate(135deg) !important;
  opacity: 1 !important;
}

:dir(rtl) #layout-menu .menu-toggle::after {
  right: auto !important;
  left: 1.25rem !important;
  transform: translateY(-50%) rotate(-135deg) !important;
}

#layout-menu .menu-sub .menu-toggle::after {
  right: 1rem !important;
}

#layout-menu .menu-item.active>.menu-link:not(.menu-toggle) {
  background: var(--t-accent-soft) !important;
  color: var(--t-accent) !important;
  box-shadow: none !important;
  /* Retell tarzı: yumuşak zemin + vurgu rengi metin (gradient yok) */
  font-weight: 600;
}

#layout-menu .menu-item.active>.menu-toggle {
  color: var(--t-accent) !important;
  font-weight: 600;
}

#layout-menu .menu-icon {
  margin-right: 0.625rem;
  font-size: 1.125rem;
}

/* Menü sayaç rozeti (ör. Sistem Bildirimleri okunmamış sayısı): kenara İTİLMEZ —
   markup'taki ms-auto ezilir, sayaç menü metninin hemen SAĞ ÜSTÜNDE süperskript pill olarak
   durur (Gmail/Twitter bildirim kalıbı; kullanıcı tercihi). GenerateMenus 'text-bg-danger'
   verir; normalize burada — markup değişmeden tüm menü rozetleri kapsanır. */
#layout-menu .menu-link .badge {
  margin-left: 0.3rem !important; /* ms-auto'yu ezer: metnin bitişiğinde, kenara yapışmaz */
  margin-right: 0;
  flex-shrink: 0;
  align-self: center;
  position: relative;
  top: -0.5em; /* süperskript: metnin sağ üstü */
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.45;
  padding: 0.08rem 0.38rem !important;
  min-width: 1.2rem;
  text-align: center;
  border-radius: 999px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Belirgin sayaç: dolu kırmızı + beyaz rakam (soluk soft-zemin okunmuyordu — kullanıcı bildirimi);
   sidebar zemininde ince halka rozeti yüzeyden ayırır (app-icon badge kalıbı). */
#layout-menu .menu-link .badge.text-bg-danger {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 0 0 2px var(--t-bg-sidebar, #fbfbfb);
}

[data-bs-theme="dark"] #layout-menu .menu-link .badge.text-bg-danger {
  background: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px var(--t-bg-sidebar, #131317);
}

#layout-menu .menu-sub {
  background: transparent !important;
  padding-left: 1.25rem;
}

#layout-menu .menu-sub .menu-link {
  font-size: 0.875rem;
  padding: 0.5rem 1rem !important;
}

#layout-menu .menu-sub .menu-link::before {
  display: none !important;
}

#layout-menu .menu-header {
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
  padding: 0.25rem 0.75rem;
}

#layout-menu .menu-item+.menu-header {
  /* Bölümler arası nefes payı */
  margin-top: 1.75rem;
}

#layout-menu .menu-header-text {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-text-muted);
  opacity: 0.85;
}

/* ─── 4b. RETELL TARZI SIDEBAR FOOTER ─── */
.layout-menu-retell {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}

.layout-menu-retell .menu-retell-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layout-menu-retell .menu-retell-inner .menu-inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem !important;
  /* Slightly more compact padding */
}

.layout-menu-retell .menu-retell-footer {
  flex-shrink: 0;
  padding: 1rem;
  border-top: 1px solid var(--t-border);
  background: var(--t-bg-sidebar);
}

.retell-user-card {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--t-radius-sm);
  color: var(--t-text);
  text-decoration: none;
  transition: all 0.2s ease;
}

.retell-user-card:hover {
  background: var(--t-bg-sidebar-hover);
  color: var(--t-text);
}

.retell-user-card .avatar-initial {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
  background: var(--t-accent) !important;
}

.retell-user-email {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--t-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retell-footer-item .dropdown-menu {
  min-width: 240px;
  padding: 0.5rem;
  border: 1px solid var(--t-border-strong);
  box-shadow: var(--t-shadow-premium);
}

.retell-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

.retell-footer-actions .navbar-nav {
  flex-direction: row;
  gap: 0;
}

.retell-footer-actions .nav-link,
.retell-footer-actions .btn-icon {
  padding: 0.35rem !important;
  color: var(--t-text-muted);
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.retell-footer-actions .nav-link:hover,
.retell-footer-actions .btn-icon:hover {
  color: var(--t-accent);
  background: var(--t-accent-soft);
  border-radius: 8px;
}

/* Fix for notification dropdown inside compact footer */
.retell-footer-actions .navbar-nav {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.retell-footer-actions .dropdown-notifications {
  display: block;
}

/* Sidebar içindeki bildirim dropdown - kompakt */
.menu-retell-footer .dropdown-notifications-item {
  padding: 0.5rem 0.75rem;
}

.menu-retell-footer .dropdown-menu {
  margin-inline-start: 1rem !important;
  margin-bottom: 0.5rem !important;
}

/* ─── 5. NAVBAR (Floating Glass Design) ─── */
.layout-navbar {
  background: var(--t-bg-navbar) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none !important;
  border-bottom: 1px solid var(--t-border) !important;
  box-shadow: var(--t-shadow-soft);
  padding: 0.5rem 1.5rem;
}

.layout-navbar .nav-link {
  border-radius: var(--t-radius-sm);
  transition: all 0.2s ease;
}

.layout-navbar .nav-link:hover {
  background: var(--t-accent-soft);
  color: var(--t-accent) !important;
}

/* ─── 6. KARTLAR (Elevated Design) ─── */
.card {
  background: var(--t-bg-card);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow-soft);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Kart hover efekti kaldırıldı - divler sabit kalsın */

/* Card Header — Retell kalıbı (panel geneli): ŞERİT VE ÇİZGİ YOK.
   Başlık, kartın kendi yüzeyinde bir başlık bölgesidir; içerik altına
   ferah boşlukla akar (Bootstrap "gri şeritli panel" görünümü YASAK).
   Sayfalardaki h4/h5/h6 + renkli ikon + büyük buton kalıbı otomatik normalize olur. */
.card-header {
  background: transparent;
  border-bottom: none;
  padding: 1.125rem 1.25rem 0.25rem;
  color: var(--t-text);
  font-weight: 600;
  font-size: 0.875rem;
  position: relative;
}

/* Eski markup'lardaki border-bottom/bg-light utility'leri kalıbı bozamaz (tek dil) */
.card-header.border-bottom {
  border-bottom: 0 !important;
}

.card-header.bg-light {
  background: transparent !important;
}

/* Başlık ile içerik arası nefes payı */
.card-header+.card-body {
  padding-top: 0.875rem;
}

.card-header+.table-responsive,
.card-header+table {
  margin-top: 0.625rem;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header .card-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin-bottom: 0;
  color: var(--t-text);
}

/* Başlık ikonları: renk bağırmaz, başlıkla aynı sessiz tonda */
.card-header h4 i, .card-header h5 i, .card-header h6 i,
.card-header .card-title i {
  color: var(--t-text-muted) !important;
  font-size: 1rem !important;
  vertical-align: -1px;
}

/* Header içindeki aksiyonlar: her zaman kompakt (sayfa btn-lg yazsa bile) */
.card-header .btn {
  padding: 0.25rem 0.625rem !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
}

.card-title {
  color: var(--t-text);
  margin-bottom: 0;
}

/* Yeni sayfalar için bölüm başlığı yardımcıları */
.section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--t-text);
  line-height: 1.3;
}

.section-desc {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--t-text-muted);
  margin-top: 2px;
}

.card-body {
  padding: 1.125rem 1.25rem;
}

.card-footer {
  padding: 0.75rem 1.25rem;
}

/* ─── 7. TABLOLAR (Elegant Minimalism) ─── */
.table-responsive {
  border-radius: var(--t-radius-sm);
  background: var(--t-bg-card);
  border: 1px solid var(--t-border);
}

.table {
  width: 100%;
  margin-bottom: 0;
}

.table thead th {
  background: var(--t-bg-page) !important;
  color: var(--t-text-muted);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--t-border-strong) !important;
  padding: 0.5625rem 1rem;
}

.table tbody td {
  padding: 0.625rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--t-border);
  color: var(--t-text);
  font-size: 0.8125rem;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr {
  transition: background-color 0.15s ease;
}

.table tbody tr:hover {
  background-color: var(--t-bg-sidebar-hover) !important;
}

/* ─── SEÇİLİ / BAKILAN SATIR (.ts-row-viewed) ───
   Detay paneli kapatıldıktan sonra da hangi kayda bakıldığı belli kalsın: sol kenarda
   accent çizgi + KOYU zemin. Zemin `tr` DEĞİL `td` üzerine verilir — `tr:hover` kuralı
   `!important` taşıdığı için satır zemini hover'da eziliyor; hücre zemini üstte kalır ve
   seçim hover sırasında da görünür. Sınıfı JS ekler (liste sayfaları paylaşır). */
.table tbody tr.ts-row-viewed > td {
  background-color: var(--t-row-selected) !important;
}
.table tbody tr.ts-row-viewed:hover > td {
  background-color: var(--t-row-selected-hover) !important;
}
/* Sol accent şeridi: kenarlık yerine inset gölge — kolon genişliklerini kaydırmaz. */
.table tbody tr.ts-row-viewed > td:first-child {
  box-shadow: inset 3px 0 0 var(--t-accent, #232329);
}

/* ─── 8. BUTONLAR & FORMLAR ─── */
.btn {
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--t-radius-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  /* Retell tarzı: düz dolgu, gradient ve parlayan gölge yok */
  background: var(--t-accent);
  border: 1px solid var(--t-accent);
  box-shadow: none;
}

.btn-primary:hover {
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--t-accent) 88%, black);
  border-color: color-mix(in srgb, var(--t-accent) 88%, black);
}

/* Karanlıkta monokrom birincil: açık buton + koyu metin (Retell dark kalıbı) */
[data-bs-theme="dark"] .btn-primary {
  background: var(--t-accent);
  border-color: var(--t-accent);
  color: #18181b !important;
}

[data-bs-theme="dark"] .btn-primary:hover {
  background: #fafafa;
  border-color: #fafafa;
  color: #18181b !important;
}

[data-bs-theme="dark"] .pagination .page-item.active .page-link,
[data-bs-theme="dark"] .dashboard-icon-wrap,
[data-bs-theme="dark"] .retell-user-card .avatar-initial {
  color: #18181b !important;
}

.btn-label-primary {
  background: var(--t-accent-soft);
  color: var(--t-accent);
  border: none;
}

.btn-label-primary:hover {
  background: var(--t-accent-soft-hover);
  color: var(--t-accent);
}

/* --- BUTTON & ICON FIXES (Phase 17) --- */
.btn-icon {
  width: 2.3rem !important;
  height: 2.3rem !important;
  padding: 0 !important;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-sm.btn-icon {
  width: 1.875rem !important;
  height: 1.875rem !important;
}

.btn-text-primary {
  background: transparent !important;
  color: var(--t-accent) !important;
  border: none !important;
}

.btn-text-primary:hover {
  background: var(--t-accent-soft) !important;
  color: var(--t-accent) !important;
}

.btn-text-secondary {
  background: transparent !important;
  color: #8e9ba5 !important;
  border: none !important;
}

.btn-text-secondary:hover {
  background: rgba(142, 155, 165, 0.1) !important;
  color: #5e6871 !important;
}

.btn-text-danger {
  background: transparent !important;
  color: #ea5455 !important;
  border: none !important;
}

.btn-text-danger:hover {
  background: rgba(234, 84, 85, 0.1) !important;
  color: #ea5455 !important;
}

/* Icon Base & Centering */
.icon-base {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 1.25rem;
  pointer-events: none; /* Prevent icon from capturing clicks */
}

.btn-sm .icon-base {
  font-size: 1.125rem !important;
}

.btn-icon i,
.btn-icon .icon-base {
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Boş-durum ikonu güvenlik ağı: .ti bir mask KUTUSUDUR (glif/metin değil) — `d-block` yapılınca
   1em'lik kutu sola yaslanır ve parent'ın text-center'ı onu ORTALAYAMAZ (içinde metin yok).
   Ortalanmış kapsayıcıdaki blok ikon otomatik ortalanır; markup'ta ayrıca mx-auto önerilir. */
.text-center > .ti.d-block {
  margin-inline: auto;
}

.icon-22px {
  font-size: 22px !important;
}

/* DataTable Action Cell Fix */
.table td .btn {
  margin: 0 0.125rem;
}

/* İmza dokunuş: form alanları GRİ DOLGULU başlar, odaklanınca beyaza döner
   (Stripe/Linear kalıbı) — kurumsal ve metalcollar'dan ayrışan görünüm */
.form-control,
.form-select {
  padding: 0.4375rem 0.75rem !important;
  font-size: 0.8125rem;
  border-radius: var(--t-radius-sm);
  border: 1px solid var(--t-border-strong);
  background: var(--t-bg-page);
  color: var(--t-text);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
  height: auto !important;
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
  border-color: var(--t-text-muted);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--t-accent) !important;
  box-shadow: 0 0 0 2px var(--t-accent-soft) !important;
  /* Thinner, more subtle focus ring */
  background-color: var(--t-bg-card) !important;
}

.input-group-text {
  background: var(--t-bg-page);
  border-color: var(--t-border-strong);
  color: var(--t-text-muted);
  font-size: 0.8125rem;
}

/* Renk seçici (input[type=color].form-control-color) — üstteki genel .form-control
   dolgusu (!important) renk örneğini ince bir şeride sıkıştırıyordu (randevu Takvimler
   kartında görüldü). Kompakt kare swatch: dolgu daraltılır, sabit boyut, gri dolgu yok. */
input[type="color"].form-control-color {
  padding: 3px !important;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 31px !important;
  background: var(--t-bg-card);
  cursor: pointer;
}

input[type="color"].form-control-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"].form-control-color::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

input[type="color"].form-control-color::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

/* Switch / checkbox / radio / range: marka vurgusu */
.form-check-input:checked {
  background-color: var(--t-accent);
  border-color: var(--t-accent);
}

.form-check-input:focus {
  border-color: var(--t-accent);
  box-shadow: 0 0 0 2px var(--t-accent-soft);
}

.form-range::-webkit-slider-thumb {
  background: var(--t-accent);
}

.form-range::-moz-range-thumb {
  background: var(--t-accent);
}

/* ─── 9. BADGES ─── */
.badge {
  padding: 0.5em 0.85em;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.bg-label-primary {
  background-color: var(--t-accent-soft) !important;
  color: var(--t-accent) !important;
}

.bg-label-success {
  background-color: rgba(40, 199, 111, 0.12) !important;
  color: #28c76f !important;
}

/* ─── 9b. ROL ATAMA: İZİN BÖLÜM ETİKETİ (sidebar bölümleriyle hizalı) ─── */
.perm-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-text-muted);
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--t-border);
}

.permission-groups .perm-section-label:first-child {
  margin-top: 0;
}

/* ─── 10. AVATARS ─── */
.avatar {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
}

.avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-weight: 600;
}

/* ─── 11. FOOTER ─── */
.footer {
  padding: 1.5rem 0;
  border-top: 1px solid var(--t-border);
  color: var(--t-text-muted);
  font-size: 0.875rem;
}

/* ─── 12. SPECIAL WIDGETS ───
   NOT: Eski ".bg-label-primary.card → dolu accent + beyaz metin" kuralı KALDIRILDI.
   bg-label-* HER YERDE aynı anlama gelir: yumuşak zemin + vurgu rengi metin.
   Dolu renkli kart isteniyorsa bilinçli olarak bg-primary + text-white kullan. */

/* ============================================================
   12b. İÇERİK ALANI — RETELL DOKUSU (global normalize katmanı)
   Sayfa-içi <style> bloklarındaki abartılı radius/gölge/hover-lift
   değerlerini sade dokuya çeker. Yeni sayfa yazarken bu katmana
   güven; sayfa-özel "premium" stil ekleme.
   ============================================================ */

/* Kartlar: tek tip radius + 1px kenarlık, gölgesiz-e-yakın, zıplama yok.
   Bilinçli renkli kenarlıklar (border-warning vb.) korunur. */
.card,
.agent-card,
.card-corporate,
.premium-hero-card {
  border-radius: var(--t-radius) !important;
  box-shadow: var(--t-shadow-soft) !important;
}

.card:not([class*="border-"]),
.agent-card,
.card-corporate {
  border: 1px solid var(--t-border-strong) !important;
}

.card:hover,
.agent-card:hover,
.kpi-card-hover:hover {
  transform: none !important;
  box-shadow: var(--t-shadow-soft) !important;
}

/* Buton hover'da zıplama yok (sayfa-içi .btn-manage vb. dahil) */
.btn:hover,
.btn-manage:hover,
.quick-action-btn:hover,
.btn-glass-primary:hover,
.btn-glass-white:hover {
  transform: none !important;
}

/* Başlık tipografisi: kompakt ve koyu */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--t-text);
  letter-spacing: -0.01em;
}

.form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--t-text);
  margin-bottom: 0.375rem;
}

/* Tablolar: zebra ve iç ızgara çizgileri yok — yalnız ince satır ayracı */
.table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-bg-type: transparent;
}

.table-bordered> :not(caption)>* ,
.table-bordered> :not(caption)>*>* {
  border-width: 0;
}

.table> :not(caption)>*>* {
  border-bottom-width: 1px;
  border-bottom-color: var(--t-border);
}

/* DataTables kontrolleri: kompakt arama/uzunluk + sade sayfalama */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--t-border-strong);
  border-radius: var(--t-radius-sm);
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  background: var(--t-bg-card);
  color: var(--t-text);
}

.dataTables_wrapper .dataTables_info {
  color: var(--t-text-muted);
  font-size: 0.75rem;
}

/* Boyutlar Bootstrap'ın kendi CSS değişkenlerinden gelir (Vuexy: 15px yazı,
   0.48rem dolgu, 50% daire) — değişkenler kökten kompakta çekilir */
.pagination {
  --bs-pagination-padding-x: 0.4375rem;
  --bs-pagination-padding-y: 0.125rem;
  --bs-pagination-font-size: 0.75rem;
  --bs-pagination-bg: transparent;
  --bs-pagination-border-width: 0;
  --bs-pagination-border-radius: 6px;
  --bs-pagination-color: var(--t-text-muted);
  --bs-pagination-hover-bg: var(--t-bg-sidebar-hover);
  --bs-pagination-hover-color: var(--t-text);
  --bs-pagination-active-bg: var(--t-accent);
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-color: var(--t-text-muted);
  margin-bottom: 0;
}

.pagination .page-link,
.pagination button.page-link,
.dt-paging .page-link,
.dt-paging button.page-link {
  border: none !important;
  border-radius: 6px !important;
  margin: 0 1px;
  padding: 0.125rem 0.4375rem !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  width: auto !important;
  min-width: 26px;
  height: auto !important;
  min-height: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: none !important;
}

/* datatables.bootstrap5.css yüksek özgüllükle padding: .4809rem / 15px basar —
   aynı özgüllükte kompakta sabitlenir (İlk/Önceki/numara/Sonraki/Son dahil) */
div.dt-container div.dt-paging ul.pagination .page-link,
div.dt-container div.dt-paging ul.pagination .page-item .first.page-link,
div.dt-container div.dt-paging ul.pagination .page-item .last.page-link,
div.dt-container div.dt-paging ul.pagination .page-item .next.page-link,
div.dt-container div.dt-paging ul.pagination .page-item .previous.page-link {
  padding: 0.125rem 0.4375rem !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  min-width: 26px;
  border-radius: 6px !important;
}

.pagination .page-link:hover {
  background: var(--t-bg-sidebar-hover) !important;
  color: var(--t-text);
}

.pagination .page-item.active .page-link {
  background: var(--t-accent) !important;
  color: #fff;
}

.pagination .page-item.disabled .page-link {
  background: transparent !important;
  color: var(--t-text-muted);
  opacity: 0.45;
}

/* Soft badge seti (Retell tag görünümü) */
.bg-label-secondary {
  background-color: var(--t-bg-sidebar-hover) !important;
  color: var(--t-text-muted) !important;
}

.bg-label-info {
  background-color: rgba(3, 195, 236, 0.12) !important;
  color: #039be5 !important;
}

.bg-label-warning {
  background-color: rgba(255, 159, 67, 0.14) !important;
  color: #b26a00 !important;
}

.bg-label-danger {
  background-color: rgba(234, 84, 85, 0.12) !important;
  color: #d43f3f !important;
}

[data-bs-theme="dark"] .bg-label-warning {
  color: #ffb968 !important;
}

[data-bs-theme="dark"] .bg-label-danger {
  color: #f1918f !important;
}

/* Select2: form-control ile aynı doku (gri dolgu, odakta beyaz) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--t-border-strong) !important;
  border-radius: var(--t-radius-sm) !important;
  background: var(--t-bg-page) !important;
  min-height: 38px;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  background: var(--t-bg-card) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--t-accent) !important;
  box-shadow: 0 0 0 2px var(--t-accent-soft) !important;
}

.select2-dropdown {
  border: 1px solid var(--t-border-strong) !important;
  border-radius: var(--t-radius-sm) !important;
  box-shadow: var(--t-shadow-premium) !important;
  background: var(--t-bg-card) !important;
}

/* Modal / Offcanvas / Dropdown: ince kenarlık + tek yumuşak gölge, kompakt dolgu */
.modal-content {
  border-radius: var(--t-radius) !important;
  border: 1px solid var(--t-border-strong);
  box-shadow: var(--t-shadow-premium);
}

.modal-header {
  padding: 0.75rem 1.25rem;
  background: var(--t-bg-page);
  border-bottom: 1px solid var(--t-border);
}

/* Başlık dili TEK: kart/modal/offcanvas/akordeon hepsi aynı ölçek ve tonda */
.modal-title,
.offcanvas-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--t-text);
}

.modal-title i,
.offcanvas-title i {
  color: var(--t-text-muted) !important;
  font-size: 1rem !important;
}

.offcanvas-header {
  padding: 0.75rem 1.25rem;
  background: var(--t-bg-page);
  border-bottom: 1px solid var(--t-border) !important;
}

.accordion-button {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--t-text);
}

.accordion-button:focus {
  box-shadow: 0 0 0 2px var(--t-accent-soft);
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  padding: 0.75rem 1.25rem;
}

.offcanvas {
  border-inline-start: 1px solid var(--t-border-strong) !important;
}

.dropdown-menu {
  border-radius: var(--t-radius-sm);
  border: 1px solid var(--t-border-strong);
  box-shadow: var(--t-shadow-premium);
  font-size: 0.8125rem;
}

/* Sekmeler: sade, aktif = vurgu rengi (Vuexy'nin aktif gölgesi bastırılır) */
.nav-tabs .nav-link,
.nav-pills .nav-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--t-text-muted);
}

.nav-pills .nav-link.active {
  background: var(--t-accent-soft);
  color: var(--t-accent);
  box-shadow: none !important;
}

/* shadow-sm/shadow utility'li kartlar da flat gölgeye çekilir (Bootstrap !important kullanır) */
.card.shadow-sm,
.card.shadow,
.card.shadow-lg {
  box-shadow: var(--t-shadow-soft) !important;
}

.nav-tabs .nav-link.active {
  color: var(--t-accent);
}

/* Alert: köşe ve dolgu sadeleşir */
.alert {
  border-radius: var(--t-radius-sm);
  font-size: 0.8125rem;
}

/* SweetAlert2 popup dokusu */
.swal2-popup {
  border-radius: var(--t-radius) !important;
  border: 1px solid var(--t-border-strong);
}

/* ============================================================
   12b-2. ORTAK SOL AYAR NAVİGASYONU (.settings-nav-*)
   Agent detay + Entegrasyonlar (ve gelecekteki ayar sayfaları)
   AYNI bileşeni kullanır — sayfa-içi kopya stil yazma.
   Flat: kutu yok; öğe = ikon + başlık (+ opsiyonel açıklama satırı).
   !important'lar Vuexy .nav-link ortalamasını ezmek içindir.
   ============================================================ */
.settings-nav-label {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--t-text-muted);
  padding: 0 .625rem;
  margin-bottom: .5rem;
}

.settings-nav-item {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: start !important;
  gap: .625rem;
  width: 100%;
  padding: .5rem .625rem !important;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--t-text-muted);
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color .15s ease, color .15s ease;
  margin-bottom: .125rem;
}

.settings-nav-item:hover:not(.active) {
  background: var(--t-bg-sidebar-hover);
  color: var(--t-text);
}

.settings-nav-item.active {
  background: var(--t-accent-soft) !important;
  color: var(--t-accent) !important;
  font-weight: 600;
  /* Vuexy nav-pills aktif öğeye gölge basar — flat dokuda gölge yok */
  box-shadow: none !important;
}

.settings-nav-item>i,
.settings-nav-item .settings-nav-icon {
  font-size: 1.0625rem;
  margin-top: 1px;
  flex-shrink: 0;
  width: auto;
  text-align: start;
}

.settings-nav-title {
  display: block;
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.3;
}

.settings-nav-desc {
  display: block;
  font-size: .6875rem;
  font-weight: 400;
  opacity: .65;
  line-height: 1.3;
  margin-top: 1px;
}

/* ============================================================
   12c. KARANLIK MOD NORMALİZE
   Sayfa-içi bg-white / bg-light / table-light / text-dark
   utility'leri karanlık temada BEYAZ kalıyordu; hepsi global
   olarak tema token'larına bağlanır. Yeni sayfada bu utility'ler
   yerine token/var kullan — bu katman güvenlik ağıdır.
   ============================================================ */

/* Arama dökümü (transcript) satırları — show_offcanvas + detay sayfası ortak.
   Zemin token'dan gelir: gece modunda beyaz kalmaz. */
.transcript-line--agent {
  background: var(--t-bg-page);
}

.transcript-line--customer {
  background: var(--t-accent-soft);
}

/* Randevu ayarları → Takvimler: birim (oda/araç) katalog detay satırı.
   Zemin token'dan gelir; `bg-light`/`bg-lighter` utility'si gece modunda beyaz kalırdı. */
.res-detail-row > td {
  background: var(--t-bg-page);
}

[data-bs-theme="dark"] .bg-white {
  background-color: var(--t-bg-card) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--t-bg-sidebar-hover) !important;
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light>th,
[data-bs-theme="dark"] .table-light th {
  --bs-table-bg: var(--t-bg-page);
  --bs-table-color: var(--t-text-muted);
  background-color: var(--t-bg-page) !important;
  color: var(--t-text-muted) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-heading {
  color: var(--t-text) !important;
}

[data-bs-theme="dark"] .input-group-text {
  background-color: var(--t-bg-card);
  border-color: var(--t-border-strong);
  color: var(--t-text-muted);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--t-bg-page);
  border-color: var(--t-border-strong);
  color: var(--t-text);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--t-bg-card) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--t-text-muted);
  opacity: .7;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered {
  color: var(--t-text) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--t-text);
}

[data-bs-theme="dark"] .list-group-item {
  background-color: var(--t-bg-card);
  border-color: var(--t-border);
  color: var(--t-text);
}

[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--t-bg-card);
  color: var(--t-text);
}

[data-bs-theme="dark"] .dropdown-item {
  color: var(--t-text);
}

[data-bs-theme="dark"] code:not([class]) {
  color: #e8b3e8;
}

/* Kartların içindeki beyaz zeminli küçük kutular (border + rounded kalıbı) */
[data-bs-theme="dark"] .card .border.rounded,
[data-bs-theme="dark"] .card .border.rounded-3 {
  border-color: var(--t-border) !important;
}

/* ============================================================
   12d. DE-BOOTSTRAP KATMANI
   Klasik Bootstrap görünümlü kalan bileşenler Retell diline çekilir:
   renkli alert kutuları → nötr yüzey + ince sol vurgu; renkli outline
   butonlar → nötr gri çerçeve; kutu sekmeler → alt çizgi; kalın
   progress → ince ray; toastr → koyu nötr bildirim.
   ============================================================ */

/* Alert: nötr yüzey + 3px sol vurgu (renk yalnız vurguda, kutuda değil) */
.alert,
.alert-primary, .alert-secondary, .alert-success, .alert-danger,
.alert-warning, .alert-info, .alert-light, .alert-dark {
  background: var(--t-bg-card) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border) !important;
  border-left-width: 3px !important;
  padding: 0.625rem 0.875rem;
}

.alert-primary { border-left-color: var(--t-accent) !important; }
.alert-success { border-left-color: #28c76f !important; }
.alert-danger { border-left-color: #ea5455 !important; }
.alert-warning { border-left-color: #ff9f43 !important; }
.alert-info { border-left-color: #03a9f4 !important; }
.alert-secondary, .alert-light, .alert-dark { border-left-color: var(--t-border-strong) !important; }

/* Alert ikon kutusu: Vuexy'nin düz renkli karesi nötrlenir. Renkli karenin
   üstünde text-* utility'si glifi aynı renge boyayınca ikon görünmez oluyordu;
   nötr alert yüzeyinde ikon rengini yalnız text-* utility'si verir. */
.alert .alert-icon {
  background: transparent !important;
  color: inherit;
  block-size: auto;
  inline-size: auto;
  box-shadow: none !important;
  font-size: 1.125rem;
}

/* Outline butonlar: renkli çerçeve yerine nötr gri (Retell ghost buton) */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info {
  color: var(--t-text) !important;
  border-color: var(--t-border-strong) !important;
  background: var(--t-bg-card) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:focus {
  background: var(--t-bg-sidebar-hover) !important;
  border-color: var(--t-text-muted) !important;
  color: var(--t-text) !important;
}

/* Seçilebilir çip (btn-check + outline label): seçili durum monokrom dolgu.
   Yukarıdaki ghost normalize'ı !important taşıdığından Bootstrap'in
   .btn-check:checked stili eziliyordu — seçili gün çipleri seçilmemiş görünüyordu. */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-info {
  background: var(--t-accent) !important;
  border-color: var(--t-accent) !important;
  color: #fff !important;
}

.btn-check:checked + .btn-outline-primary:hover,
.btn-check:checked + .btn-outline-secondary:hover,
.btn-check:checked + .btn-outline-info:hover {
  background: color-mix(in srgb, var(--t-accent) 88%, black) !important;
  border-color: color-mix(in srgb, var(--t-accent) 88%, black) !important;
  color: #fff !important;
}

/* Karanlıkta accent açık renk olduğundan metin koyu (btn-primary dark kalıbıyla aynı) */
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-primary,
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-secondary,
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-info {
  color: #18181b !important;
}

[data-bs-theme="dark"] .btn-check:checked + .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-info:hover {
  background: #fafafa !important;
  border-color: #fafafa !important;
  color: #18181b !important;
}

/* Yatay sekmeler (nav-tabs): kutu yok — aktifte 2px alt çizgi */
.nav-tabs {
  border-bottom: 1px solid var(--t-border);
  gap: 0.25rem;
}

.nav-tabs .nav-link {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0.5rem 0.75rem;
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--t-accent) !important;
  color: var(--t-text) !important;
  font-weight: 600;
}

/* Progress: ince ray */
.progress {
  height: 6px;
  background: var(--t-bg-sidebar-hover);
  border-radius: 999px;
}

.progress-bar {
  background-color: var(--t-accent);
}

/* Breadcrumb: küçük, sessiz */
.breadcrumb {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.breadcrumb-item a {
  color: var(--t-text-muted);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--t-text);
}

/* Rozet: kompakt */
.badge {
  font-size: 0.6875rem;
}

/* Form yardımcı metni */
.form-text {
  font-size: 0.75rem;
  color: var(--t-text-muted);
}

/* Tooltip: küçük, yumuşak köşe */
.tooltip-inner {
  border-radius: 6px;
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem;
}

/* Toastr: koyu nötr bildirim (renk yalnız sol vurguda) */
#toast-container>div {
  background-color: #18181b !important;
  color: #f4f4f5 !important;
  border-radius: 10px !important;
  box-shadow: var(--t-shadow-premium) !important;
  opacity: 1 !important;
  font-size: 0.8125rem;
}

#toast-container>.toast-success { border-left: 3px solid #28c76f !important; }
#toast-container>.toast-error { border-left: 3px solid #ea5455 !important; }
#toast-container>.toast-warning { border-left: 3px solid #ff9f43 !important; }
#toast-container>.toast-info { border-left: 3px solid #03a9f4 !important; }

/* ============================================================
   12e. DATATABLES — profesyonel & kompakt (Bootstrap görünümü yok)
   Tüm panel: kontroller küçük, sıralama tek sade ok, satırlar ince,
   responsive genişletme düğmesi nötr, export butonları sessiz.
   ============================================================ */

/* Tablo hücre yoğunluğu (dataTable özel) */
table.dataTable tbody td {
  padding: 0.5625rem 1rem;
  font-size: 0.8125rem;
}

table.dataTable {
  margin-block: 0 !important;
}

/* Kontroller: küçük etiket + kompakt input/select */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: 0.75rem;
  color: var(--t-text-muted);
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.dataTables_wrapper .dataTables_length select {
  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
  font-size: 0.75rem;
  width: auto;
}

.dataTables_wrapper .dataTables_filter input {
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  min-width: 200px;
  background: var(--t-bg-page);
}

.dataTables_wrapper .dataTables_filter input:focus {
  background: var(--t-bg-card);
  border-color: var(--t-accent);
  outline: none;
  box-shadow: 0 0 0 2px var(--t-accent-soft);
}

/* Sıralama: çift ok yığını yerine yalnız aktif yönün oku */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_asc_disabled::before,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::before,
table.dataTable thead .sorting_desc_disabled::after {
  opacity: 0 !important;
}

table.dataTable thead .sorting:hover::after {
  opacity: 0.45 !important;
}

table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after {
  opacity: 0.9 !important;
}

/* Responsive satır-genişletme düğmesi: yeşil daire yerine nötr çip */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control::before {
  background-color: var(--t-bg-sidebar-hover) !important;
  color: var(--t-text-muted) !important;
  border: 1px solid var(--t-border-strong) !important;
  box-shadow: none !important;
  font-weight: 600;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control::before {
  background-color: var(--t-accent) !important;
  color: var(--t-bg-card) !important;
  border-color: var(--t-accent) !important;
}

/* Açılan alt satır (child) zemin ayrımı */
table.dataTable>tbody>tr.child {
  background: var(--t-bg-page);
}

table.dataTable>tbody>tr.child ul.dtr-details>li {
  border-bottom: 1px solid var(--t-border);
  padding: 0.375rem 0;
  font-size: 0.8125rem;
}

/* Bilgi metni + boş durum */
.dataTables_wrapper .dataTables_info {
  font-size: 0.75rem;
  color: var(--t-text-muted);
  padding-top: 0.75rem;
}

table.dataTable td.dataTables_empty {
  padding: 2.5rem 1rem;
  color: var(--t-text-muted);
  font-size: 0.8125rem;
}

/* Export / dt-buttons: sessiz ghost butonlar */
.dt-buttons .btn {
  padding: 0.3125rem 0.75rem !important;
  font-size: 0.75rem !important;
  background: var(--t-bg-card) !important;
  border: 1px solid var(--t-border-strong) !important;
  color: var(--t-text) !important;
  box-shadow: none !important;
}

.dt-buttons .btn:hover {
  background: var(--t-bg-sidebar-hover) !important;
  border-color: var(--t-text-muted) !important;
}

/* card içindeki datatable sarmalayıcısı: tablo karta tam oturur */
.card .card-datatable {
  border-top: 1px solid var(--t-border);
}

.card .card-datatable table.dataTable {
  border-bottom: none;
}

/* İşleniyor göstergesi */
div.dataTables_processing {
  background: var(--t-bg-card);
  border: 1px solid var(--t-border-strong);
  border-radius: var(--t-radius-sm);
  box-shadow: var(--t-shadow-premium);
  color: var(--t-text-muted);
  font-size: 0.8125rem;
}

/* ── DataTables 2.x (dt-*) sınıf şeması — PAKETİMİZ BUNU KULLANIR.
      Yukarıdaki dataTables_* kuralları eski şema içindir; ikisi de kalır. ── */

/* Arama + uzunluk: küçük etiket, kompakt gri-dolgulu kontroller */
div.dt-container div.dt-search,
div.dt-container div.dt-length {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

div.dt-container div.dt-search label,
div.dt-container div.dt-length label {
  font-size: 0.75rem;
  color: var(--t-text-muted);
  margin: 0;
  font-weight: 500;
}

div.dt-container div.dt-search input {
  padding: 0.3125rem 0.625rem !important;
  font-size: 0.75rem !important;
  min-width: 220px;
  background: var(--t-bg-page) !important;
  border: 1px solid var(--t-border-strong) !important;
  border-radius: var(--t-radius-sm) !important;
  color: var(--t-text);
}

div.dt-container div.dt-search input:focus {
  background: var(--t-bg-card) !important;
  border-color: var(--t-accent) !important;
  box-shadow: 0 0 0 2px var(--t-accent-soft) !important;
  outline: none;
}

div.dt-container div.dt-length select {
  padding: 0.25rem 1.375rem 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  width: auto !important;
  min-width: 64px;
  max-width: 84px;
  height: auto !important;
  background-color: var(--t-bg-page) !important;
  background-size: 14px 10px !important;
  background-position: right 0.4rem center !important;
  border: 1px solid var(--t-border-strong) !important;
  border-radius: var(--t-radius-sm) !important;
  color: var(--t-text);
}

/* dt-container içindeki select — select2 OLSA DA OLMASA DA aynı kompakt görünüm.
   (select2 hâli: hücreyi kaplamaz, native ile birebir aynı doku) */
div.dt-container .select2-container {
  width: auto !important;
  min-width: 70px;
  max-width: 90px;
}

div.dt-container .select2-container .select2-selection--single {
  min-height: 30px !important;
  height: 30px !important;
  background: var(--t-bg-page) !important;
  border: 1px solid var(--t-border-strong) !important;
  border-radius: var(--t-radius-sm) !important;
}

div.dt-container .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 28px !important;
  font-size: 0.75rem;
  padding: 0 1.375rem 0 0.5rem;
  color: var(--t-text) !important;
}

div.dt-container .select2-container .select2-selection--single .select2-selection__arrow {
  height: 28px !important;
  width: 1.25rem;
}

div.dt-container div.dt-info {
  font-size: 0.75rem;
  color: var(--t-text-muted);
  padding: 0;
}

table.dataTable td.dt-empty {
  padding: 2.5rem 1rem;
  color: var(--t-text-muted);
  font-size: 0.8125rem;
}

div.dt-processing {
  background: var(--t-bg-card);
  border: 1px solid var(--t-border-strong);
  border-radius: var(--t-radius-sm);
  box-shadow: var(--t-shadow-premium);
  color: var(--t-text-muted);
  font-size: 0.8125rem;
}

/* Sıralama (DT2): çift ok yerine yalnız aktif yönün oku */
table.dataTable span.dt-column-order::before,
table.dataTable span.dt-column-order::after {
  opacity: 0 !important;
}

table.dataTable thead th:hover span.dt-column-order::after {
  opacity: 0.45 !important;
}

table.dataTable thead th.dt-ordering-asc span.dt-column-order::before {
  opacity: 0.9 !important;
}

table.dataTable thead th.dt-ordering-desc span.dt-column-order::after {
  opacity: 0.9 !important;
}

/* DT2 varsayılan layout satırları: kart içinde simetrik kompakt şerit */
div.dt-container .dt-layout-row:not(.dt-layout-table) {
  margin: 0 !important;
  padding: 0.75rem 1.25rem;
}

div.dt-container .dt-layout-row.dt-layout-table {
  margin: 0 !important;
}

/* YERLEŞİM CSS İLE ZORLANMAZ — tek kaynak app-layout'taki global
   DataTable.defaults.layout config'idir (arama solda, kayıt seçici sağda,
   bilgi solda, sayfalama sağda). Buradaki eski display:contents/flex
   zorlamaları select'i kartın dışına taşırdığı için GERİ ALINDI. */
div.dt-container div.dt-paging .pagination {
  margin-bottom: 0;
}

/* ─── 13. RESPONSIVE ADJUSTMENTS ─── */
@media (max-width: 1199.98px) {
  #layout-menu.layout-menu {
    --bs-menu-width: 18rem;
    left: -18rem;
  }

  .layout-menu-expanded #layout-menu.layout-menu {
    left: 0;
  }
}

/* ─── 14. ANIMATIONS ─── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--t-accent-rgb), 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(var(--t-accent-rgb), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--t-accent-rgb), 0);
  }
}

.container-p-y>* {
  animation: fadeIn 0.4s ease forwards;
}

/* ─── 15. PREMIUM SCROLLBAR ─── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--t-bg-page);
}

::-webkit-scrollbar-thumb {
  background: var(--t-border);
  border-radius: 10px;
  border: 2px solid var(--t-bg-page);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--t-text-muted);
}

#layout-menu ::-webkit-scrollbar-thumb {
  background: rgba(var(--t-accent-rgb), 0.2);
}

#layout-menu ::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--t-accent-rgb), 0.4);
}

/* ─── 16. MICRO-INTERACTIONS ─── */
.card,
.btn,
.menu-link,
.nav-link {
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Kart hover zoom/transform kaldırıldı */

.btn:active {
  transform: scale(0.98);
}

/* ─── 17. GLASS SEARCH FOCUS ─── */
.aa-DetachedSearchButton {
  border: 1px solid var(--t-border) !important;
  background: var(--t-bg-card) !important;
  transition: all 0.3s ease !important;
}

.aa-DetachedSearchButton:hover {
  border-color: var(--t-accent) !important;
  box-shadow: 0 0 0 4px var(--t-accent-soft) !important;
}

/* ─── 18. KPI CARD GLOW ─── */
.kpi-card-premium {
  position: relative;
  overflow: hidden;
}

.kpi-card-premium::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(var(--t-accent-rgb), 0.05) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* ─── 19. PROFILE & NOTIFICATION POLISH ─── */
.nobleui-user-menu {
  animation: fadeIn 0.3s ease-out;
}

.dropdown-item:hover {
  background-color: var(--t-accent-soft) !important;
  color: var(--t-accent) !important;
}

.dropdown-item i {
  transition: transform 0.2s ease;
}


.dropdown-item:hover i {
  transform: translateX(3px);
}

/* ─── 20. DASHBOARD PREMIUM COMPONENTS ─── */
.dashboard-icon-wrap {
  width: 44px;
  height: 44px;
  background: var(--t-accent);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(var(--t-accent-rgb), 0.15);
}

.dashboard-icon-wrap i {
  font-size: 1.5rem;
  line-height: 1;
}

.premium-hero-card {
  border: 1px solid var(--t-border-strong);
  border-radius: 12px;
  background: var(--t-bg-card) !important;
  box-shadow: var(--t-shadow-card);
  position: relative;
  overflow: hidden;
}

.hero-bg-accent {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.btn-glass-primary {
  background: rgba(var(--t-accent-rgb), 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-glass-primary:hover {
  background: rgba(var(--t-accent-rgb), 0.4);
  color: #fff;
  transform: translateY(-2px);
}

.btn-glass-white {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-glass-white:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateY(-2px);
}

.hero-visual-icon {
  font-size: 8rem;
  color: rgba(255, 255, 255, 0.1);
  transform: rotate(-15deg);
  margin-right: -2rem;
}

.dash-glow-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.shadow-minimal {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.kpi-card-hover:hover {
  border-color: var(--t-accent) !important;
  box-shadow: 0 4px 12px rgba(var(--t-accent-rgb), 0.08) !important;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none !important;
  color: inherit !important;
  border: 1px solid var(--t-border);
  background: var(--t-bg-card);
  margin-bottom: 0.5rem;
}

.quick-action-btn:hover {
  background: var(--t-bg-page);
  border-color: var(--t-border-strong);
  box-shadow: var(--t-shadow-soft);
  transform: translateY(-2px);
}

.quick-action-btn .icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.875rem;
  background: var(--t-bg-page);
  border: 1px solid var(--t-border);
  flex-shrink: 0;
}

/* Master Fix for Tabler Icons - Ensuring visibility and centering */
.quick-action-btn .icon-box i {
  font-size: 1.25rem;
  line-height: 1;
  display: block;
}

.avatar-hero-custom {
  width: 80px;
  height: 80px;
  background: var(--t-accent-soft);
  color: var(--t-accent);
  border-radius: 20px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Global Centering for Avatar Icons */
.avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.avatar i {
  line-height: 1 !important;
  display: block !important;
}

.avatar-hero-custom i {
  font-size: 3rem;
  line-height: 1;
}

.quick-action-btn .text-box span {
  display: block;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--t-text);
  line-height: 1.2;
}

.quick-action-btn .text-box small {
  display: block;
  font-size: 0.75rem;
  color: var(--t-text-muted);
}

.activity-timeline {
  position: relative;
  padding-left: 1rem;
}

.activity-item {
  position: relative;
  padding-left: 1.5rem;
  padding-bottom: 1.5rem;
}

.activity-marker {
  position: absolute;
  left: -5px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  z-index: 1;
  box-shadow: 0 0 0 1px var(--t-border);
}

.activity-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 0;
  width: 1px;
  background: var(--t-border);
}

.ls-n1 {
  letter-spacing: -1px;
}

.ls-1 {
  letter-spacing: 1px;
}

.fw-extra-bold {
  font-weight: 800;
}

.uppercase {
  text-transform: uppercase;
}

.fs-tiny {
  font-size: 0.7rem;
}

.bg-white-10 {
  background: rgba(255, 255, 255, 0.1);
}

.border-white-10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- PREMIUM UI UTILITIES (Phase 16) --- */

.premium-hero-card {
    position: relative;
    border-radius: 1.5rem !important;
}

.hero-bg-accent {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--bs-primary) 0%, transparent 70%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.btn-glass-white {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    transition: all 0.3s ease;
}

.btn-glass-white:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.shadow-premium {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

.shadow-minimal {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.fw-black { font-weight: 900 !important; }

.dashboard-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.bg-primary-subtle { background-color: rgba(var(--bs-primary-rgb), 0.1) !important; }
.bg-success-subtle { background-color: rgba(var(--bs-success-rgb), 0.1) !important; }
.bg-info-subtle { background-color: rgba(var(--bs-info-rgb), 0.1) !important; }
.bg-danger-subtle { background-color: rgba(var(--bs-danger-rgb), 0.1) !important; }
.bg-warning-subtle { background-color: rgba(var(--bs-warning-rgb), 0.1) !important; }

/* CORPORATE LIGHT THEME UTILITIES */
.card-corporate {
    border-radius: 1.25rem !important;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.04) !important;
}

.badge-corporate-blue {
    background: #e0e7ff;
    color: #4338ca;
    font-weight: 700;
}

.bg-glass-corporate {
    background: var(--bs-body-bg) !important;
    backdrop-filter: blur(8px);
    border: 1px solid var(--bs-border-color) !important;
}

.border-corporate {
    border: 1px solid var(--bs-border-color) !important;
}
/* ============================================================
   12e-2. TABLO İŞLEM BUTONLARI — tüm liste ekranlarında TEK görünüm
   Sayfalar ne yazarsa yazsın (btn-text-secondary/primary/danger vb.)
   tablo hücresindeki .btn-icon butonları belirgin, kenarlıklı,
   eşit boyutlu ve aynı hizada render edilir (Retell ghost kalıbı).
   ============================================================ */
.table td .btn-icon,
table.dataTable td .btn-icon {
  width: 1.875rem !important;
  height: 1.875rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle;
  margin: 0 0.1875rem !important;
  border: 1px solid var(--t-border-strong, #e0e0e2) !important;
  border-radius: 0.4375rem !important;
  background: var(--t-bg-card, #fff) !important;
  color: var(--t-text-muted, #71717a) !important;
  box-shadow: var(--t-shadow-soft) !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.table td .btn-icon i,
table.dataTable td .btn-icon i {
  font-size: 0.9375rem !important;
  line-height: 1 !important;
}

.table td .btn-icon:hover,
table.dataTable td .btn-icon:hover {
  border-color: var(--t-accent, #232329) !important;
  color: var(--t-accent, #232329) !important;
  background: var(--t-bg-page, #fafafa) !important;
}

/* Yıkıcı aksiyon (sil) her zaman kırmızı kimlikli kalır. */
.table td .btn-icon.btn-text-danger,
.table td .btn-icon.btn-outline-danger,
table.dataTable td .btn-icon.btn-text-danger,
table.dataTable td .btn-icon.btn-outline-danger {
  color: #ea5455 !important;
}

.table td .btn-icon.btn-text-danger:hover,
.table td .btn-icon.btn-outline-danger:hover,
table.dataTable td .btn-icon.btn-text-danger:hover,
table.dataTable td .btn-icon.btn-outline-danger:hover {
  border-color: #ea5455 !important;
  background: rgba(234, 84, 85, 0.08) !important;
  color: #ea5455 !important;
}

/* ============================================================
   Pricing / Plan Cards — ortak bileşen (billing.plan-card)
   ============================================================ */
.plan-grid { display:flex; flex-wrap:wrap; gap:1.25rem; justify-content:center; align-items:stretch; }
.plan-card-col { flex:1 1 250px; max-width:290px; display:flex; }
.plan-card {
  position:relative; display:flex; flex-direction:column; width:100%;
  background:var(--bs-card-bg, #fff);
  border:1px solid var(--bs-border-color, #e6e8ec);
  border-radius:18px; padding:1.75rem 1.5rem;
  box-shadow:0 2px 10px rgba(16,24,40,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan-card:hover { transform:translateY(-6px); box-shadow:0 16px 34px rgba(16,24,40,.10); border-color:var(--bs-primary); }
.plan-card--featured { border-width:2px; border-color:var(--bs-primary); box-shadow:0 18px 38px rgba(78,115,223,.16); }
.plan-card--dashed { border-style:dashed; }
.plan-card__ribbon {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  padding:.32rem .9rem; border-radius:999px; white-space:nowrap; box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.plan-card__ribbon--primary { background:var(--bs-primary); }
.plan-card__ribbon--success { background:var(--bs-success, #10b981); }
.plan-card__ribbon--purple  { background:#8b5cf6; }
.plan-card__head { text-align:center; }
.plan-card__icon { width:52px; height:52px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font-size:1.55rem; margin-bottom:.75rem; }
.plan-card__name { font-weight:800; margin:0 0 .15rem; color:var(--bs-heading-color, var(--bs-body-color)); }
.plan-card__desc { color:var(--bs-secondary-color, #6b7280); font-size:.8rem; line-height:1.35; min-height:2.3em; margin:0; }
.plan-card__price { text-align:center; padding:1rem 0; margin:1rem 0; border-top:1px solid var(--bs-border-color, #eef0f3); border-bottom:1px solid var(--bs-border-color, #eef0f3); }
.plan-card__price-main { display:flex; align-items:baseline; justify-content:center; gap:.25rem; }
.plan-card__amount { font-size:2.2rem; font-weight:900; letter-spacing:-1px; line-height:1; color:var(--bs-heading-color, var(--bs-body-color)); }
.plan-card__period { color:var(--bs-secondary-color, #6b7280); font-size:.85rem; font-weight:600; }
.plan-card__price-sub { color:var(--bs-secondary-color, #6b7280); font-size:.72rem; margin-top:.35rem; }
.plan-card__features { list-style:none; padding:0; margin:0 0 1.5rem; flex-grow:1; }
.plan-card__features li { display:flex; align-items:flex-start; gap:.55rem; font-size:.82rem; color:var(--bs-body-color); margin-bottom:.6rem; }
.plan-card__features li i { color:var(--bs-success, #10b981); background:rgba(16,185,129,.12); border-radius:50%; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; flex-shrink:0; margin-top:1px; }
.plan-card__cta { margin-top:auto; }
.plan-card__cta-note { text-align:center; font-size:.75rem; font-weight:700; color:var(--bs-success, #10b981); margin-bottom:.5rem; }

/* ============================================================
   12g. MOBİL BAŞLIK / AKSİYON DÜZENİ (≤575.98px)
   Başlık + buton/filtre taşıyan üst bölgeler mobilde tam genişlik
   dikey yığına döner — sağa yaslı dağınık sarma yok. Sayfaya özel
   mobil başlık CSS'i YAZMA; bu katman tek kaynaktır.
   ============================================================ */
@media (max-width: 575.98px) {
  /* A) dashboard-header kalıbı (kampanya/anket edit-show vb.):
     ikon + başlık üstte kalır; buton taşıyan .col-auto'lar tam genişlik alt alta */
  .dashboard-header .row.align-items-center > .col-auto:has(.btn) {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 0.5rem;
  }
  .dashboard-header .row.align-items-center > .col-auto .btn {
    width: 100%;
    justify-content: center;
  }
  .dashboard-header .row.align-items-center > .col-auto form { width: 100%; }
  .dashboard-header h2, .dashboard-header .h3 { font-size: 1.25rem; }
  .dashboard-header { margin-bottom: 1.5rem !important; }

  /* B) Liste sayfası başlığı (calls/campaign/survey/appointments/callbacks):
     sağa yaslı d-flex aksiyon kolonu TAM SATIRA düşer (sm'siz .col-auto'lar mobilde
     yan yana kalıp taşıyordu) ve dikey yığına döner, her öğe tam genişlik */
  .container-p-y .row.align-items-center.mb-4 > [class*="col-"].d-flex {
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin-top: 0.75rem;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .container-p-y .row.align-items-center.mb-4 > [class*="col-"].d-flex > * { width: 100%; }
  .container-p-y .row.align-items-center.mb-4 > [class*="col-"].d-flex .btn {
    width: 100%;
    justify-content: center;
  }
  .container-p-y .row.align-items-center.mb-4 > [class*="col-"].d-flex form { width: 100%; }
  .container-p-y .row.align-items-center.mb-4 > [class*="col-"].d-flex [style*="min-width"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Tarih-aralığı grubu taşıyan bağımsız filtre formları tam genişlik (callbacks vb.) */
  form:has(> .ts-dp-range) { width: 100%; margin-left: 0 !important; }

  /* Genel yardımcı: buton kümesi taşıyan herhangi bir d-flex konteynere `ts-mobile-stack`
     verilirse mobilde tam-genişlik dikey yığına döner (kart içi aksiyon kümeleri +
     rapor araç çubuğu gibi karma kontrol grupları için). */
  .ts-mobile-stack { flex-direction: column !important; align-items: stretch !important; }
  .ts-mobile-stack > * { width: 100%; }
  .ts-mobile-stack .btn { width: 100%; justify-content: center; }
  .ts-mobile-stack form { width: 100%; flex-wrap: wrap !important; }
  .ts-mobile-stack [style*="min-width"] { width: 100% !important; min-width: 0 !important; }
  .ts-mobile-stack .seg { display: flex; }
  .ts-mobile-stack .seg a, .ts-mobile-stack .seg span { flex: 1 1 0; text-align: center; }
}

/* ── WhatsApp Şablon Önizlemesi (kampanya + agent detay havuz sekmesi ortak) ──
   Kaynak: campaign/_template_content_fields; iki sayfada da kullanılsın diye temaya taşındı. */
.wa-tpl-stage { background: #efeae2; border: 1px solid var(--t-border, #e5e5e5); border-radius: .5rem; padding: 1.25rem 1rem; }
.wa-tpl-bubble { position: relative; background: #fff; border-radius: .5rem; border-top-left-radius: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); padding: .5rem .6rem .375rem; max-width: 340px; font-size: .8125rem; color: #111b21; }
.wa-tpl-bubble::before { content: ''; position: absolute; top: 0; left: -8px; border: 8px solid transparent; border-top-color: #fff; border-right-color: #fff; border-left-width: 0; }
.wa-tpl-doc { display: flex; align-items: center; gap: .5rem; background: #f5f6f6; border-radius: .375rem; padding: .625rem .625rem; margin-bottom: .5rem; }
.wa-tpl-doc-icon { color: #d3453c; font-size: 1.25rem; line-height: 1; }
.wa-tpl-doc-name { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.wa-tpl-doc-dl { color: #8696a0; font-size: 1.1rem; line-height: 1; }
.wa-tpl-loc { border-radius: .375rem; overflow: hidden; margin-bottom: .5rem; background: #dfe4e6; }
.wa-tpl-loc-map { height: 92px; display: flex; align-items: center; justify-content: center; color: #ff5a5f; font-size: 1.6rem; background: repeating-linear-gradient(45deg, #e9edee, #e9edee 10px, #dfe4e6 10px, #dfe4e6 20px); }
.wa-tpl-loc-meta { padding: .4rem .6rem; background: #f5f6f6; }
.wa-tpl-loc-name { font-weight: 600; font-size: .78rem; }
.wa-tpl-loc-addr { font-size: .72rem; color: #667781; }
.wa-tpl-header { font-weight: 600; margin-bottom: .25rem; }
.wa-tpl-body { white-space: pre-wrap; word-break: break-word; }
.wa-tpl-var { background: rgba(0, 92, 75, .08); border-radius: .25rem; padding: 0 .2rem; font-weight: 500; }
.wa-tpl-time { text-align: right; font-size: .6875rem; color: #8696a0; margin-top: .25rem; }
[data-bs-theme="dark"] .wa-tpl-stage { background: #0b141a; }
[data-bs-theme="dark"] .wa-tpl-bubble,
[data-bs-theme="dark"] .wa-tpl-bubble::before { border-top-color: #202c33; border-right-color: #202c33; }
[data-bs-theme="dark"] .wa-tpl-bubble { background: #202c33; color: #e9edef; }
[data-bs-theme="dark"] .wa-tpl-doc, [data-bs-theme="dark"] .wa-tpl-loc-meta { background: #1d282f; }
[data-bs-theme="dark"] .wa-tpl-loc-map { background: repeating-linear-gradient(45deg, #182229, #182229 10px, #1d282f 10px, #1d282f 20px); }
[data-bs-theme="dark"] .wa-tpl-var { background: rgba(134, 197, 181, .15); }

/* ============================================================
   12f. TARİH/SAAT SEÇİCİ (flatpickr) — merkezi skin
   Panel geneli TEK tarih/saat standardı: data-datepicker attribute'lu
   inputları telasistan-datepicker.js kurar; görünüm buradan gelir.
   Monokrom/flat Retell dokusu + karanlık mod. Sayfaya özel takvim
   stili YAZMA — bu katman tek kaynaktır.
   ============================================================ */

/* Takvim kutusu */
.flatpickr-calendar {
  background: var(--t-bg-card, #fff);
  border: 1px solid var(--t-border-strong, #e0e0e2);
  border-radius: var(--t-radius, 10px);
  box-shadow: var(--t-shadow-premium, 0 8px 24px -8px rgba(0, 0, 0, 0.12));
  font-family: inherit;
}

/* Modal İÇİNDEKİ tarih alanları: vendor takvim z-index'i (1074) bu paketin modal
   z-index'inin (--bs-modal-zindex: 1090) ALTINDA kalır — takvim body'ye eklendiğinden
   modal açıkken hiç görünmüyordu (randevu modalı, canlı bildirim 2026-08-03). */
.flatpickr-calendar.open {
  z-index: 1095 !important;
}
/* Ok üçgenleri kaldırıldı — flat görünüm */
.flatpickr-calendar:before,
.flatpickr-calendar:after { display: none; }

/* ── Başlık: klasik düzen — SOL ok · ay+yıl ORTADA · SAĞ ok ──
   Vendor (Vuexy) başlığı okları sağ-üstte MUTLAK konumlandırıp ay/yıl alanının üstüne
   bindiriyordu (canlı hata 2026-07-17) — başlık yerleşimi burada TÜMÜYLE devralınır. */
.flatpickr-calendar .flatpickr-months {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 10px 4px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month {
  flex: 1 1 auto;
  position: relative;
  overflow: visible;
  background: transparent;
  block-size: 32px;
  color: var(--t-text, #18181b);
  fill: var(--t-text, #18181b);
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  position: static;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  background: transparent;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
  background: var(--t-accent-soft, rgba(35, 35, 41, 0.06));
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
  inline-size: 0.7rem;
  fill: var(--t-text-muted, #71717a);
  stroke: var(--t-text-muted, #71717a);
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--t-accent, #232329);
  stroke: var(--t-accent, #232329);
}

/* Ay + yıl ortada; ay NATIVE <select> kalır (select2 bilinçle hariç — app-layout shouldSkip) */
.flatpickr-calendar .flatpickr-current-month {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  gap: 2px;
  color: var(--t-text, #18181b);
  font-size: 0.875rem;
  font-weight: 600;
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  -webkit-appearance: none;
  block-size: 30px;
  padding: 0 22px 0 8px;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 11px;
  color: var(--t-text, #18181b);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background-color: var(--t-accent-soft, rgba(35, 35, 41, 0.06));
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: var(--t-bg-card, #fff);
  color: var(--t-text, #18181b);
  font-weight: 500;
}
.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
  display: inline-block;
  inline-size: 3.4rem;
  block-size: 30px;
  border-radius: 8px;
}
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  block-size: 30px;
  margin: 0;
  padding: 0 0 0 4px;
  color: var(--t-text, #18181b);
  font-size: 0.875rem;
  font-weight: 600;
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.numInputWrapper span { border-color: var(--t-border, #ececee); }
.numInputWrapper span:hover { background: var(--t-accent-soft, rgba(35,35,41,0.06)); }
.numInputWrapper span.arrowUp:after { border-bottom-color: var(--t-text-muted, #71717a); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--t-text-muted, #71717a); }

/* ── Gövde: vendor'ın --bs-paper-bg bantları (karanlıkta lacivert) nötrlenir —
   takvim tek yüzeyde (--t-bg-card) yaşar. Vendor kuralları .flatpickr-calendar
   .flatpickr-days .flatpickr-day.x (0,4,0) özgüllüğünde — override AYNI özgüllükle yazılır,
   düşük özgüllüklü kısa seçici sessizce ezilir (canlı hata 2026-07-17). ── */
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-weekdays span.flatpickr-weekday,
.flatpickr-calendar .flatpickr-days { background: transparent; }

/* Haftanın günleri başlığı */
.flatpickr-calendar .flatpickr-weekdays span.flatpickr-weekday {
  color: var(--t-text-muted, #71717a);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Günler */
.flatpickr-calendar .flatpickr-days .flatpickr-day {
  color: var(--t-text, #18181b);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.flatpickr-calendar .flatpickr-days .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day:focus,
.flatpickr-calendar .flatpickr-days .flatpickr-day.prevMonthDay:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day.nextMonthDay:hover {
  background: var(--t-accent-soft-hover, rgba(35, 35, 41, 0.1));
  border-color: transparent;
  color: var(--t-text, #18181b);
}
.flatpickr-calendar .flatpickr-days .flatpickr-day.today {
  background: transparent;
  border-color: var(--t-accent, #232329);
  color: var(--t-text, #18181b);
}
.flatpickr-calendar .flatpickr-days .flatpickr-day.today:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day.today:focus {
  background: var(--t-accent-soft-hover, rgba(35, 35, 41, 0.1));
  border-color: var(--t-accent, #232329);
  color: var(--t-text, #18181b);
}
.flatpickr-calendar .flatpickr-days .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-days .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-days .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-days .flatpickr-day.selected.inRange,
.flatpickr-calendar .flatpickr-days .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day.endRange:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day.selected:focus,
.flatpickr-calendar .flatpickr-days .flatpickr-day.selected.today {
  background: var(--t-accent, #232329);
  border-color: var(--t-accent, #232329);
  color: #fff;
}
/* Karanlıkta accent açık renk → koyu metin (btn-primary dark kalıbı) */
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-days .flatpickr-day.selected,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-days .flatpickr-day.startRange,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-days .flatpickr-day.endRange,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-days .flatpickr-day.selected.inRange,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-days .flatpickr-day.selected:hover,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-days .flatpickr-day.selected:focus,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-days .flatpickr-day.selected.today {
  color: #17171c;
}
.flatpickr-calendar .flatpickr-days .flatpickr-day.inRange:not(.selected) {
  background: var(--t-accent-soft, rgba(35, 35, 41, 0.06));
  border-color: transparent;
  box-shadow: -5px 0 0 var(--t-accent-soft, rgba(35, 35, 41, 0.06)), 5px 0 0 var(--t-accent-soft, rgba(35, 35, 41, 0.06));
}
.flatpickr-calendar .flatpickr-days .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-days .flatpickr-day.nextMonthDay {
  color: var(--t-text-muted, #71717a);
  opacity: 0.45;
}
.flatpickr-calendar .flatpickr-days .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-days .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-calendar .flatpickr-days .flatpickr-day.flatpickr-disabled.today {
  color: var(--t-text-muted, #71717a);
  opacity: 0.3;
  background: transparent;
  border-color: transparent;
}

/* Saat bölümü */
.flatpickr-calendar .flatpickr-time {
  border-top: 1px solid var(--t-border, #ececee) !important;
  background: transparent;
}
.flatpickr-calendar.hasTime .flatpickr-time { block-size: 42px; }
.flatpickr-calendar .flatpickr-time input {
  color: var(--t-text, #18181b);
  font-size: 0.875rem;
  font-weight: 600;
  background: transparent;
}
.flatpickr-calendar .flatpickr-time input:hover,
.flatpickr-calendar .flatpickr-time input:focus,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:focus {
  background: var(--t-accent-soft, rgba(35, 35, 41, 0.06));
}
.flatpickr-calendar .flatpickr-time .flatpickr-time-separator { color: var(--t-text-muted, #71717a); }

/* Görünen input: takvim/saat ikonu + tıklanabilirlik.
   [readonly] normal form dokusunu korur (allowInput kapalıyken gri "disabled" görünmesin). */
[data-dp-visible] { cursor: pointer; padding-right: 2.125rem !important; }
[data-dp-visible][readonly] { background-color: var(--t-bg-page, #fafafa); }
[data-dp-visible][readonly]:focus { background-color: var(--t-bg-card, #fff); }
[data-dp-visible="date"], [data-dp-visible="datetime"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='4' y1='11' x2='20' y2='11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 15px 15px;
}
[data-dp-visible="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 15px 15px;
}

/* Kompakt tarih-aralığı grubu (liste sayfası başlıkları): iki seçici TEK kontrol gibi durur.
   Kullanım: <div class="ts-dp-range"> input · <span class="ts-dp-range-sep">–</span> · input </div> */
.ts-dp-range {
  display: inline-flex;
  align-items: center;
  background: var(--t-bg-page, #fafafa);
  border: 1px solid var(--t-border-strong, #e0e0e2);
  border-radius: var(--t-radius-sm, 8px);
  overflow: hidden;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.ts-dp-range:focus-within {
  background: var(--t-bg-card, #fff);
  box-shadow: 0 0 0 2px var(--t-accent-soft, rgba(35, 35, 41, 0.06));
}
.ts-dp-range .ts-dp-wrap { flex: 0 0 auto; width: 8.5rem; }
.ts-dp-range .form-control,
.ts-dp-range [data-dp-visible] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 8.5rem;
}
.ts-dp-range .ts-dp-range-sep {
  color: var(--t-text-muted, #71717a);
  font-size: 0.8125rem;
  padding: 0 0.125rem;
  user-select: none;
}
/* Mobil: grup tam satır genişliğine yayılır, iki seçici eşit bölüşür (taşma/kırpılma yok) */
@media (max-width: 575.98px) {
  .ts-dp-range { display: flex; width: 100%; }
  .ts-dp-range .ts-dp-wrap { flex: 1 1 0; width: auto; min-width: 0; }
  .ts-dp-range .form-control,
  .ts-dp-range [data-dp-visible] { width: 100%; min-width: 0; }
  .ts-dp-range .ts-dp-wrap .form-control,
  .ts-dp-range .ts-dp-wrap [data-dp-visible] { width: 100%; }
  .ts-dp-range > .form-control,
  .ts-dp-range > [data-dp-visible] { flex: 1 1 0; }
}

/* Temizle (×) butonu — data-allow-clear ile merkezi eklenir */
.ts-dp-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.ts-dp-wrap [data-dp-visible] { padding-right: 3.375rem !important; width: 100%; }
.ts-dp-clear {
  position: absolute;
  right: 1.875rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--t-text-muted, #71717a);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
  z-index: 3;
}
.ts-dp-clear:hover { color: var(--t-text, #18181b); }

/* ============================================================
   Eksik utility: min-w-0 — Bootstrap'ta YOK (Tailwind sınıfı),
   panel genelinde flex taşma/truncate düzeltmeleri buna güveniyordu
   ve sınıf tanımsız olduğundan sessizce çalışmıyordu.
   ============================================================ */
.min-w-0 { min-width: 0 !important; }

/* ============================================================
   12h. Değişken Alanı (var-field) — asistan "Değişkenler" bölümü
   Tek satırlık minik input'lar uzun içeriğe (SSS, yasaklı konular,
   fiyat politikası) yetmiyordu; alan artık etiket + yer tutucu çipi +
   çok satırlı metin kutusu olarak yazılır. Renkler tema token'larından.
   ============================================================ */
.var-field {
  border: 1px solid var(--t-border, #e4e4e7);
  border-radius: 0.5rem;
  background: var(--t-bg-card, #fff);
  padding: 0.625rem 0.75rem 0.75rem;
  height: 100%;
}
.var-field:focus-within { border-color: var(--t-accent, #232329); }
.var-field.is-empty { border-style: dashed; }

.var-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  flex-wrap: wrap;
}
.var-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--t-text, #18181b);
  margin: 0;
}

/* Yer tutucu çipi — tıklanınca panoya kopyalar */
.var-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--t-border, #e4e4e7);
  background: var(--t-bg-page, #fafafa);
  color: var(--t-text-muted, #71717a);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.var-chip:hover { border-color: var(--t-text-muted, #a1a1aa); color: var(--t-text, #18181b); }
.var-chip .ti { font-size: 0.85rem; }

.var-field textarea.form-control { resize: vertical; min-height: 2.25rem; line-height: 1.6; }

/* ⚠️ Yükseklik sınırı + gizli kaydırma YALNIZ auto-grow'lu alanlara: aynı `.var-field` kalıbını
   kullanan Kurulum Sihirbazı'nda JS yoktur, orada taşan metin kaydırılabilir kalmalıdır. */
.var-field textarea.js-autogrow {
  max-height: 30rem;
  overflow-y: hidden; /* içerik taşarsa JS `auto`ya çevirir */
}

/* Alan durumları: dolu / boş / kaydedilmemiş */
.var-field.is-dirty {
  border-color: var(--t-accent, #232329);
  box-shadow: 0 0 0 3px var(--t-accent-soft, rgba(35, 35, 41, 0.06));
}

/* Başlık satırındaki aksiyonlar (çip + büyüt + sil) */
.var-field-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.var-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 1px solid var(--t-border, #e4e4e7);
  border-radius: 0.375rem;
  background: var(--t-bg-page, #fafafa);
  color: var(--t-text-muted, #71717a);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.var-icon-btn:hover { border-color: var(--t-text-muted, #a1a1aa); color: var(--t-text, #18181b); }
.var-icon-btn.is-danger:hover { border-color: #ef4444; color: #ef4444; }
.var-icon-btn .ti { font-size: 0.9rem; }

/* Alan altı: solda ipucu, sağda satır/karakter sayacı */
.var-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.375rem;
  font-size: 0.72rem;
  color: var(--t-text-muted, #71717a);
}
.var-meta .var-hint { flex: 1 1 auto; }
.var-meta .var-count { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.var-field.is-empty .var-count { opacity: .7; }

/* Özel değişken anahtarı — dar sabit kutu yerine esneyen alan */
.var-key-input {
  max-width: 15rem;
  min-width: 9rem;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.78rem;
}
.var-key-input:invalid { border-color: #ef4444; }

/* Araç çubuğu: arama + boşları süz */
.var-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.var-toolbar .var-search-wrap { position: relative; flex: 1 1 15rem; max-width: 22rem; }
.var-toolbar .var-search-wrap .ti {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: var(--t-text-muted, #71717a);
  pointer-events: none;
}
.var-toolbar .var-search-wrap .form-control { padding-left: 2rem; }
.var-item.is-filtered { display: none !important; }
.var-empty-note { font-size: 0.8rem; color: var(--t-text-muted, #71717a); padding: 0.75rem 0; }

/* Kart içinde yapışkan kaydetme çubuğu — uzun listede buton hep erişilebilir */
.var-savebar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 0.625rem 0;
  background: var(--t-bg-card, #fff);
  border-top: 1px solid var(--t-border, #e4e4e7);
}
.var-savebar .var-dirty-note { font-size: 0.78rem; color: var(--t-text-muted, #71717a); }
.var-savebar .var-dirty-note.is-dirty { color: var(--t-text, #18181b); font-weight: 600; }

/* Büyük düzenleme modalı */
#varEditorModal .var-editor-area {
  min-height: 55vh;
  line-height: 1.65;
  resize: vertical;
}
#varEditorModal .modal-header { align-items: flex-start; }

/* ============================================================
   12i. Kurulum Sihirbazı (tenant setup wizard)
   - Sol adım menüsü sayfa kaydıkça yerinde durur (uzun ince ayar adımında
     kullanıcı hangi adımda olduğunu kaybediyordu).
   - Tamamlanmış madde kartı hafif yeşil zemin alır: "bu adım yapıldı" tek
     bakışta okunur (kullanıcı talebi 2026-08-07). Renk NOKTA ATIŞI ipucudur —
     metin/kenarlık kontrastı bozulmaz.
   ============================================================ */
.wizard-nav-sticky {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.wizard-nav-sticky::-webkit-scrollbar { width: 6px; }
.wizard-nav-sticky::-webkit-scrollbar-thumb {
  background: var(--t-border-strong, #d4d4d8);
  border-radius: 999px;
}
@media (max-width: 767.98px) {
  .wizard-nav-sticky { position: static; max-height: none; overflow: visible; }
}

/* Tamamlanmış kart / kutu */
.card.wizard-done,
.var-field.wizard-done {
  background: rgba(40, 199, 111, 0.07) !important;
  border-color: rgba(40, 199, 111, 0.32) !important;
}
.card.wizard-done > .card-header,
.card.wizard-done > .card-body,
.card.wizard-done > form > .card-body { background: transparent !important; }
[data-bs-theme="dark"] .card.wizard-done,
[data-bs-theme="dark"] .var-field.wizard-done {
  background: rgba(40, 199, 111, 0.11) !important;
  border-color: rgba(40, 199, 111, 0.28) !important;
}

/* Adım bloğu tazelenirken (AJAX) içerik sönükleşir — çift gönderim engellenir */
#wizardStep.is-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity .12s ease;
}

/* Ayar sayfalarında sol bölüm navigasyonu sabit kalır (sihirbazla aynı davranış,
   genel ad — Konuşma Bildirimleri ve benzeri çok bölümlü ayar ekranları kullanır). */
.settings-nav-sticky {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.settings-nav-sticky::-webkit-scrollbar { width: 6px; }
.settings-nav-sticky::-webkit-scrollbar-thumb {
  background: var(--t-border-strong, #d4d4d8);
  border-radius: 999px;
}
@media (max-width: 767.98px) {
  .settings-nav-sticky { position: static; max-height: none; overflow: visible; }
}

/* ============================================================
   12j. Yapışkan Kaydet Çubuğu (.ts-save-bar) — panel geneli
   - Uzun ayar/tablo formlarında "Kaydet" sayfanın en altında kalıyor;
     kullanıcı düzenleme yaparken butonu göremediği için kaydetmeyi
     unutuyor ya da arıyordu (canlı bildirim: Retell Kataloğu).
   - Çubuk ekranın alt kenarına yapışır, sayfa sonunda akışa döner.
   - `.is-dirty` = kaydedilmemiş değişiklik var: kenarlık uyarı rengine
     döner, buton nabız atar. Durum bayrağını JS verir (form.elements
     üzerinden değer görüntüsü — FormData disabled alanları atlar,
     bkz. ui-blade.md "Kirli-Form Takibi").
   ============================================================ */
.ts-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: .75rem 1rem;
  background: var(--t-bg-card, #fff);
  border: 1px solid var(--t-border, #ececee);
  border-radius: var(--t-radius, 10px);
  box-shadow: 0 -6px 18px -10px rgba(0, 0, 0, .18);
}

/* Açıklama solda kalır; durum mesajı + buton sağda toplanır */
.ts-save-bar .ts-save-hint { margin-right: auto; line-height: 1.35; }

.ts-save-dirty {
  color: #b45309;
  font-size: .8125rem;
  font-weight: 600;
}
[data-bs-theme="dark"] .ts-save-dirty { color: #fbbf24; }

.ts-save-bar.is-dirty { border-color: #f59e0b; }
.ts-save-bar.is-dirty .btn-primary { animation: tsSavePulse 1.6s ease-in-out infinite; }

@keyframes tsSavePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .35); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

@media (max-width: 575.98px) {
  .ts-save-bar { flex-wrap: wrap; gap: .5rem; }
  .ts-save-bar .ts-save-hint { margin-right: 0; width: 100%; }
}

/* ============================================================
   12k. Canlı Görüşme "Dialer" (numara göstergesi + tuş takımı + arama düğmesi)
   - Canlı Görüşme EKRANI ve Arama Geçmişi'ndeki MODAL aynı görünümü kullanır
     (kullanıcı talebi 2026-08-17) → stiller sayfa içinde DEĞİL burada durur;
     iki yüzeyin ayrışmaması için tek kaynak.
   - Markup tek yerde: `backend/voice/live-call/_start_form.blade.php`.
   - Mobilde (<992px) cep telefonu arama ekranına dönüşür: yuvarlak yeşil düğme,
     daha büyük tuşlar. Yeşil YALNIZ arama düğmesindedir (telefon uygulamalarının
     evrensel dili); panelin monokrom kimliği bozulmaz.
   ============================================================ */
.lc-number {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .25rem 0;
  color: var(--t-text, #232329);
}
.lc-number:focus { outline: none; box-shadow: none; background: transparent; }
/* Yazılan numara KOYU, örnek (placeholder) belirgin şekilde SİLİK olmalı — ikisi aynı tonda
   olunca "numara zaten yazılı" sanılıyordu (canlı geri bildirim). */
.lc-number::placeholder {
  color: var(--t-text-muted, #9ca3af);
  font-weight: 400;
  letter-spacing: .02em;
  opacity: .45;
}
/* Firefox placeholder'ı ayrıca soluklaştırır → çift soluklaşmayı önle. */
.lc-number::-moz-placeholder { opacity: .45; }

.lc-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.lc-key {
  height: 58px;
  border-radius: 999px;
  border: 1px solid var(--t-border, #e5e7eb);
  background: var(--t-bg-page, #f5f5f6);
  color: var(--t-text, #232329);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lc-key:active { background: var(--t-accent-soft, #ececf1); }

.lc-call {
  --lc-green: #16a34a;
  background: var(--lc-green);
  border: 0;
  color: #fff;
  font-weight: 600;
  width: 100%;
  border-radius: var(--t-radius, .5rem);
  padding: .7rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.lc-call:hover:not(:disabled) { background: #15803d; color: #fff; }
.lc-call:disabled { opacity: .5; }
[data-bs-theme="dark"] .lc-call { --lc-green: #22c55e; color: #06240f; }
[data-bs-theme="dark"] .lc-call:hover:not(:disabled) { background: #16a34a; color: #06240f; }

@media (max-width: 991.98px) {
  .lc-call { width: 68px; height: 68px; border-radius: 999px; padding: 0; }
  .lc-call .lc-call-text { display: none; }
  .lc-call i { font-size: 1.6rem; }
  .lc-key { height: 64px; font-size: 1.5rem; }
  .lc-number { font-size: 2.1rem; }
}

/* Modal içinde dar alanda tuşlar biraz kısalır (dikey kaydırma olmasın). */
.modal .lc-key { height: 52px; }
.modal .lc-number { font-size: 1.75rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   İKONLU ARAMA/METİN KUTUSU — GENEL BİLEŞEN (2026-08-25)

   ⚠️ Sorun: sayfalar ikonu `position:absolute` ile kutunun içine koyup dolguyu
   göz kararı veriyordu; ikon ile PLACEHOLDER ÜST ÜSTE BİNİYORDU (kullanıcı
   bildirimi — birden çok ekranda tekrarlayan hata). Dolgu artık ikon
   genişliğinden TÜRETİLİR, göz kararı değildir.

   Kullanım:
     <div class="tel-search">
       <i class="ti tabler-search"></i>
       <input type="text" class="form-control" placeholder="Ara…">
       <button type="button" class="tel-search-clear"><i class="ti tabler-x"></i></button>
     </div>
   ═══════════════════════════════════════════════════════════════════════════ */
.tel-search {
  --tel-search-icon: 1rem;      /* ikon genişliği */
  --tel-search-gap: 0.6rem;     /* kenar boşluğu */
  position: relative;
  display: block;
}

.tel-search > .ti,
.tel-search > i {
  position: absolute;
  left: var(--tel-search-gap);
  top: 50%;
  transform: translateY(-50%);
  width: var(--tel-search-icon);
  font-size: var(--tel-search-icon);
  line-height: 1;
  text-align: center;
  color: var(--t-text-muted);
  pointer-events: none;
}

/* Dolgu = boşluk + ikon + boşluk. Değişkenden hesaplandığı için ikon boyutu
   değişse bile placeholder ASLA ikonun altına girmez. */
.tel-search > .form-control {
  padding-left: calc(var(--tel-search-gap) * 2 + var(--tel-search-icon)) !important;
  padding-right: 2rem !important;
}

/* Temizleme düğmesi yalnız yazı varken gösterilir (JS `d-none` ekler/kaldırır). */
.tel-search-clear {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--t-text-muted);
  line-height: 1;
  padding: 0.25rem;
  border-radius: var(--t-radius-sm, 6px);
}
.tel-search-clear:hover { color: var(--t-text); background: var(--t-bg-sidebar-hover); }

/* ═══════════════════════════════════════════════════════════════════════════
   LİSTE ALT BİLGİSİ (bilgi + sayfalama) — GENEL (2026-08-25)

   Sayfalama düğmeleri kompakttı ama alt şerit çerçevesiz/dolgusuz durduğu için
   tablo "yarım kalmış" görünüyordu. Alt satır artık tabloyla aynı dilde:
   üstten 1px çizgi, dengeli dolgu, bilgi solda / sayfalama sağda.
   ═══════════════════════════════════════════════════════════════════════════ */
.dataTables_wrapper > .row:last-child,
.dt-container > .row:last-child {
  align-items: center;
  margin: 0;
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--t-border);
}

.dataTables_wrapper > .row:last-child > [class*="col-"],
.dt-container > .row:last-child > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.dataTables_wrapper .dataTables_paginate,
.dt-container .dt-paging {
  display: flex;
  justify-content: flex-end;
}

/* Aktif sayfa: marka rengi yerine mürekkep — liste ekranında tek vurgu yeter. */
.dataTables_wrapper .pagination .page-item.active .page-link,
.dt-container .pagination .page-item.active .page-link {
  background: var(--t-text) !important;
  border-color: var(--t-text) !important;
  color: var(--t-bg-card) !important;
  font-weight: 600;
}

/* Yön düğmeleri ikon taşıyabilir; ikon dikeyde ortalanmalı. */
.dataTables_wrapper .page-link .ti,
.dt-container .page-link .ti { font-size: 0.9rem; line-height: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   İZİN HARİTASI (2026-08-25) — <x-permission.map>

   İzinler düz rozet yığını olarak basılıyordu; 99 rozet arasında "bu kullanıcı
   neye erişiyor?" sorusu cevaplanamıyordu. Düzen sidebar bölümleriyle hizalıdır.
   ═══════════════════════════════════════════════════════════════════════════ */
.pmap { display: flex; flex-direction: column; gap: 1rem; }

.pmap-section-head {
  display: flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.35rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--t-border);
}
.pmap-section-name {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--t-text-muted);
}
.pmap-section-count {
  font-size: 0.65rem; font-weight: 600; line-height: 1;
  padding: 0.15rem 0.35rem; border-radius: 99px;
  background: var(--t-bg-sidebar-hover); color: var(--t-text-muted);
}

.pmap-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem; }
.pmap-group { border: 1px solid var(--t-border); border-radius: var(--t-radius-sm, 6px); padding: 0.55rem 0.65rem; }
.pmap-group-name { font-size: 0.78rem; font-weight: 600; margin-bottom: 0.35rem; }
.pmap-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pmap-chip {
  font-size: 0.7rem; line-height: 1.4; padding: 0.05rem 0.4rem;
  border: 1px solid var(--t-border); border-radius: var(--t-radius-sm, 6px);
  color: var(--t-text-muted); background: var(--t-bg-card); cursor: help;
}
.pmap-chip:hover { border-color: var(--t-text-muted); color: var(--t-text); }

.pmap-empty { padding: 1.5rem; text-align: center; color: var(--t-text-muted); font-size: 0.82rem; }
.pmap-empty i { display: block; font-size: 1.4rem; margin-bottom: 0.3rem; opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   KULLANICI FORMU (create/edit) — sekmeli düzen (2026-08-25)

   Tek sayfada kişisel bilgi + bildirim + rol + 99 izin alt alta duruyordu;
   sayfa okunmaz uzunluktaydı ve kullanıcı hangi ayarın nerede olduğunu
   bulamıyordu. Sekmeler kararı dörde böler; sayaçlar sekmeye girmeden
   "burada ne var?" sorusunu cevaplar.
   ═══════════════════════════════════════════════════════════════════════════ */
.pform-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.875rem;
}
.pform-title { font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.pform-subtitle { font-size: 0.78rem; color: var(--t-text-muted); margin-top: 0.1rem; }

.pform-card { border: 1px solid var(--t-border); border-radius: var(--t-radius, 0.5rem); overflow: hidden; background: var(--t-bg-card); }

.pform-tabs {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  padding: 0.5rem 0.75rem 0; border-bottom: 1px solid var(--t-border);
  background: var(--t-bg-sidebar, var(--t-bg-page));
}
.pform-tab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.8rem; border: 0; background: transparent;
  font-size: 0.82rem; font-weight: 600; color: var(--t-text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pform-tab:hover { color: var(--t-text); }
.pform-tab.is-active { color: var(--t-text); border-bottom-color: var(--t-text); }
.pform-tab-count {
  font-size: 0.65rem; font-weight: 700; line-height: 1;
  padding: 0.15rem 0.35rem; border-radius: 99px;
  background: var(--t-bg-sidebar-hover); color: var(--t-text-muted);
}
.pform-tab.is-active .pform-tab-count { background: var(--t-text); color: var(--t-bg-card); }
/* Sekmede doğrulama hatası varsa görünür olmalı — gizli sekmedeki hata sessizce kaybolur. */
.pform-tab.has-error { color: var(--t-danger, #dc3545); }
.pform-tab.has-error .pform-tab-count { background: var(--t-danger, #dc3545); color: #fff; }

.pform-panel { display: none; padding: 1rem 1.125rem; }
.pform-panel.is-active { display: block; }
.pform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem 1.5rem; }
.pform-note { font-size: 0.74rem; color: var(--t-text-muted); }
.pform-legend {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--t-text-muted); padding-bottom: 0.3rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--t-border);
}

/* ── Roller ── */
.pform-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.6rem; }
.pform-role { position: relative; border: 1px solid var(--t-border); border-radius: var(--t-radius-sm, 6px); padding: 0.7rem 0.8rem; }
.pform-role.is-on { border-color: var(--t-text); box-shadow: inset 0 0 0 1px var(--t-text); }
.pform-role-main { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0; cursor: pointer; }
.pform-role-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pform-role-title { font-size: 0.85rem; font-weight: 600; }
.pform-role-desc { font-size: 0.75rem; color: var(--t-text-muted); }
.pform-role-meta { font-size: 0.7rem; color: var(--t-text-muted); }
.pform-role-more {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--t-border); border-radius: var(--t-radius-sm, 6px);
  background: transparent; color: var(--t-text-muted); font-size: 0.85rem;
}
.pform-role-more:hover { color: var(--t-text); border-color: var(--t-text-muted); }
.pform-role-perms { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed var(--t-border); }

/* ── İzinler ── */
.pform-perms-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  flex-wrap: wrap; margin-bottom: 0.9rem;
}
.pform-perms-search { flex: 1 1 240px; max-width: 340px; }
.pform-perms-search .form-control { height: 34px; font-size: 0.8rem; }
.pform-perms-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.pform-perms-count { font-size: 0.75rem; color: var(--t-text-muted); }

.pform-section + .pform-section { margin-top: 1rem; }
.pform-section-head {
  display: flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.35rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--t-border);
}
.pform-section-name { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--t-text-muted); }
.pform-section-count { font-size: 0.65rem; font-weight: 600; line-height: 1; padding: 0.15rem 0.35rem;
  border-radius: 99px; background: var(--t-bg-sidebar-hover); color: var(--t-text-muted); }

.pform-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.6rem; }
.pform-group { border: 1px solid var(--t-border); border-radius: var(--t-radius-sm, 6px); padding: 0.55rem 0.6rem; }
.pform-group-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.4rem; }
.pform-group-name { font-size: 0.78rem; font-weight: 600; }
.pform-group-toggle { border: 0; background: transparent; font-size: 0.68rem; color: var(--t-text-muted); text-decoration: underline; padding: 0; }
.pform-group-toggle:hover { color: var(--t-text); }

.pform-perm {
  display: flex; align-items: flex-start; gap: 0.5rem; margin: 0;
  padding: 0.3rem 0.35rem; border-radius: var(--t-radius-sm, 6px); cursor: pointer;
}
.pform-perm:hover { background: var(--t-bg-sidebar-hover); }
.pform-perm.is-on { background: var(--t-bg-sidebar-hover); }
.pform-perm-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pform-perm-action { font-size: 0.78rem; font-weight: 500; }
.pform-perm-desc { font-size: 0.7rem; color: var(--t-text-muted); }
.pform-perm-name { font-size: 0.64rem; color: var(--t-text-muted); opacity: 0.75;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Açıklama satırı geldiği için izin kutuları biraz genişler — üç satır sığmalı. */
.pform-groups { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

@media (max-width: 575.98px) {
  .pform-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .pform-tab { white-space: nowrap; }
}