:root {
  --finance-bg: #eef2f8;
  --finance-panel: #ffffff;
  --finance-panel-border: #e5e9f1;
  --finance-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
  --finance-topbar: #11141b;
  --finance-text: #101828;
  --finance-muted: #667085;
  --finance-accent: #7c3aed;
  --finance-accent-soft: rgba(124, 58, 237, 0.1);
}

.finance-body {
  margin: 0;
  background: #f7f8fc;
  color: var(--finance-text);
  font-family: Inter, system-ui, sans-serif;
}

.finance-hidden {
  display: none !important;
}

.finance-login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.finance-login-card {
  width: min(100%, 620px);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--finance-panel-border);
  border-radius: 32px;
  box-shadow: var(--finance-shadow);
  backdrop-filter: blur(14px);
  padding: 36px;
  text-align: center;
}

.finance-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 22px;
  margin-bottom: 24px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}

.finance-login-kicker {
  margin: 0 0 12px;
  color: var(--finance-accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.finance-login-card h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.finance-login-card p {
  margin: 18px auto 0;
  max-width: 460px;
  color: var(--finance-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.finance-login-root {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin-top: 28px;
}

.finance-auth-status {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid var(--finance-panel-border);
  background: #f8fafc;
  text-align: left;
}

.finance-auth-status strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.92rem;
}

.finance-auth-status span {
  color: var(--finance-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.finance-auth-status.is-error {
  background: #fff1f2;
  border-color: #fecdd3;
}

.finance-auth-status.is-error strong,
.finance-auth-status.is-error span {
  color: #b42318;
}

.finance-auth-status.is-success {
  background: #ecfdf3;
  border-color: #b7ebc6;
}

.finance-auth-status.is-success strong,
.finance-auth-status.is-success span {
  color: #067647;
}

.finance-hint {
  margin-top: 18px;
  color: #6b7280;
  font-size: 0.85rem;
}

.finance-shell {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.finance-topbar {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 58px;
  padding: 0 18px 0 20px;
  background: var(--finance-topbar);
  color: #fff;
}

.finance-topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.finance-brand-mark {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
}

.finance-topbar-brand strong {
  font-size: 1.02rem;
  letter-spacing: -0.03em;
}

.finance-user-menu {
  position: relative;
}

.finance-account-trigger {
  padding: 0;
  background: transparent;
}

.finance-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
}

.finance-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: none;
  min-width: 220px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #11141b;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

.finance-account-menu.is-open {
  display: grid;
  gap: 8px;
}

.finance-account-email {
  padding: 6px 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.35;
  word-break: break-word;
}

.finance-account-action {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.finance-account-action:hover {
  background: rgba(255, 255, 255, 0.1);
}

.finance-body-grid {
  display: grid;
  /* Sidebar genişliği — eski 226px değerinden %15 daraltıldı (≈ 192px),
     ana içerik alanına o kadar daha yer açar. Mobile breakpoint'inde
     (< 900px) zaten kendi flex layout'una düşüyor, oraya dokunulmadı. */
  grid-template-columns: 192px minmax(0, 1fr);
  height: calc(100vh - 58px);
  min-height: calc(100vh - 58px);
  overflow: hidden;
  transition: grid-template-columns 180ms ease;
}
/* Collapsed state — sidebar 56px (icon-only), main content genişler.
   Default sayfa açıldığında bu class JS tarafından eklenir (localStorage
   "expanded" olmadığı sürece). */
.finance-body-grid.is-sidebar-collapsed {
  grid-template-columns: 56px minmax(0, 1fr);
}
.finance-body-grid.is-sidebar-collapsed .finance-nav-item {
  justify-content: center;
  padding: 0 8px;
}
.finance-body-grid.is-sidebar-collapsed .finance-nav-item > span:last-child {
  display: none;
}
.finance-body-grid.is-sidebar-collapsed .finance-sidebar-toggle-label {
  display: none;
}
.finance-body-grid.is-sidebar-collapsed .finance-sidebar-toggle-icon svg {
  /* Collapsed iken ok sağa baksın (genişlet) */
  transform: rotate(0deg);
}
.finance-body-grid:not(.is-sidebar-collapsed) .finance-sidebar-toggle-icon svg {
  /* Expanded iken ok sola baksın (daralt) */
  transform: rotate(180deg);
}

.finance-sidebar {
  display: flex;
  flex-direction: column;
  padding: 18px 8px;
  background: #f6f8fc;
  border-right: 1px solid #e5e9f1;
}

.finance-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 3px; /* eski 6px → 3px, item'ları sıkıştır */
}

/* Sidebar grupları: Finance, Product gibi başlıklar altında ilgili
   sayfalar. Her grup kendi flex column'u; gruplar arasında ekstra
   nefes (margin-top) ile ayrılır. Collapsed (icon-only) modda
   group-label görünmez. */
.finance-nav-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.finance-nav-group + .finance-nav-group {
  margin-top: 10px;
}
.finance-nav-group-label {
  padding: 6px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  user-select: none;
}
/* Collapsed sidebar → group label'lar gizli, ama gruplar arası gap
   nefes vermek için kalsın (margin-top zaten var). */
.finance-body-grid.is-sidebar-collapsed .finance-nav-group-label {
  display: none;
}

.finance-sidebar-divider {
  width: calc(100% - 28px);
  height: 1px;
  margin: 10px 14px 6px;
  background: linear-gradient(to right, transparent, #e5e9f1 20%, #e5e9f1 80%, transparent);
  border-radius: 999px;
}

/* Collapse/expand toggle — sidebar'ın altında, nav'dan sonra. */
.finance-sidebar-toggle {
  margin: auto 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  background: #ffffff;
  border: 1px solid #e5e9f1;
  border-radius: 999px;
  color: #596375;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.finance-sidebar-toggle:hover {
  background: #eef2f8;
  color: #1c212d;
  border-color: #cbd5e1;
}
.finance-sidebar-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.finance-sidebar-toggle-icon svg {
  transition: transform 180ms ease;
}

.finance-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px; /* eski 50px → 36px, label height daraltıldı */
  padding: 0 12px;
  border-radius: 999px;
  color: #596375;
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.02em;
  transition: background-color 140ms ease, color 140ms ease;
}

.finance-nav-item:hover {
  background: #eef2f8;
  color: #1c212d;
}

.finance-nav-item.is-active {
  background: #ebedf6;
  color: #11151d;
  font-weight: 700;
}

.finance-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: inherit;
}

.finance-nav-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

.finance-workspace {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 8px 18px 18px;
}

.finance-page {
  position: absolute;
  inset: 8px 18px 18px;
  display: none;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.finance-page.is-active {
  display: grid;
}

/* Incentive Hub aktifken block flow (grid değil). Grid iken charts
   container bir auto-row'a düşüp SVG auto-height yüzünden 250px'e
   collapse oluyor, kartlar (729px) taşıp tabloyla çakışıyor + chart
   kartlarında internal scroll çıkıyordu. Block'ta child'lar normal
   dizilir, çakışma/scroll yok. is-active'e scope'lu ki sayfa pasifken
   base display:none korunsun. */
.finance-page.is-active[data-page="incentives"] {
  display: block;
}

/* Incentive Track — Incentive Hub ile aynı block-flow düzeni (grid iken
   kartlar/tablo çöküp çakışıyor). */
.finance-page.is-active[data-page="incentive-track"] {
  display: block;
}
.finance-page[data-page="incentive-track"] {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.finance-page[data-page="incentive-track"] #incentive-track-content {
  display: block;
  grid-template-rows: none;
}
.finance-page[data-page="incentive-track"] .finance-table-wrap {
  overscroll-behavior: auto;
}

/* HR Master — Incentive Track ile aynı block-flow (grid iken dashboard
   SVG kartı collapse olup tabloyla çakışıyordu = "kart arkada kalmış"). */
.finance-page.is-active[data-page="hr-master"] {
  display: block;
}
.finance-page[data-page="hr-master"] {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.finance-page[data-page="hr-master"] #hr-master-content {
  display: block;
  grid-template-rows: none;
}
.finance-page[data-page="hr-master"] .finance-table-wrap {
  overscroll-behavior: auto;
}

/* HR İzin — HR Master ile aynı block-flow + tablo fit. */
.finance-page.is-active[data-page="hr-izin"] { display: block; }
.finance-page[data-page="hr-izin"] { overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
.finance-page[data-page="hr-izin"] #hr-izin-content { display: block; grid-template-rows: none; }
.finance-page[data-page="hr-izin"] .finance-table-wrap { overscroll-behavior: auto; }
#hr-izin-content .game-keys-table { width: 100%; min-width: 0; table-layout: fixed; }
#hr-izin-content .game-keys-table-wrap { overflow-x: hidden; }
#hr-izin-content .game-keys-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hr-izin-content .game-keys-table thead th { white-space: normal; }
#hr-izin-content .game-keys-table .hr-action-col { width: 36px; }

.finance-page[data-page="admin"] {
  grid-template-rows: auto minmax(0, 1fr);
}

.finance-page[data-page="tables"] {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.finance-page[data-page="overview"] {
  grid-template-rows: auto auto auto auto;
  overflow-y: auto;
  padding-right: 4px;
}

/* Incentive Hub — overview gibi multi-card scroll layout. Global
   .finance-page kuralı sadece 3 row tanımlıyor (auto auto
   minmax(0,1fr)) ve sabit-yükseklik absolute grid'de pending-charts
   div'i 1fr row'una düşüp 0'a çöküyordu (büyük tablo content'i yer
   için yarışınca). Tüm child'ları auto-sized yap + sayfayı scroll'lu
   yap → her kart kendi content'ine göre boyutlanır. */
/* Incentive Hub layout — overview gibi. Tüm child'lar auto-sized
   (grid-auto-rows), sayfa overflow-y:auto ile scroll'lar. Tablo KENDI
   internal scroll'unu korur (table-wrap max-height calc(100vh-220px))
   → tablo scroll region'u TALL (viewport'un büyük kısmı), horizontal
   scrollbar ulaşılabilir, sticky header + sticky ilk-4-kolon çalışır.
   minmax(260px,1fr) denenmişti ama uzun chart'larda tabloyu 260px'e
   sıkıştırıyordu — auto + kendi max-height tall scroll için doğru. */
.finance-page[data-page="incentives"] {
  overflow-y: auto;
  /* Sayfa yatay scroll YOK (kullanıcı isteği) — yalnızca tablo kendi
     içinde yatay scroll'lar (table-wrap overflow-x:auto). KPI/chart'lar
     sayfa genişliğine sığdığı için page overflow-x:hidden taşmayı
     kırpar, ekstra horizontal scrollbar çıkmaz. */
  overflow-x: hidden;
  padding-right: 4px;
}

/* Tablo kartı (#incentives-content) — .finance-section-card global'de
   display:grid + "auto minmax(0,1fr)". Sayfa grid-auto-rows:auto olunca
   kart auto-height oluyor → içindeki 1fr body row'u 0'a çöküyor →
   table-wrap 0 height → sadece header görünüyor (data rows kayboluyor).
   Fix: display:block → header + table-wrap normal flow'da dizilir,
   wrap kendi content'inden height alır (max-height calc(100vh-220px)
   cap + overflow-y:auto ile tall scroll). Pending chart'lardaki aynı
   override pattern'i. */
.finance-page[data-page="incentives"] #incentives-content {
  display: block;
  grid-template-rows: none;
}

/* Scroll chaining — tablo-wrap'in .finance-table-wrap'ten gelen
   "overscroll-behavior: contain" değeri, tablo scroll boundary'sine
   gelince scroll'un sayfaya geçmesini engelliyordu (trap). Incentives'te
   auto yap → tablo sonuna gelince normal sayfa scroll'u devam eder
   (kullanıcı isteği). */
.finance-page[data-page="incentives"] .finance-table-wrap {
  overscroll-behavior: auto;
}

.finance-page[data-page="product-ai"] {
  /* Flex column override (parent .finance-page.is-active sets display:grid) */
  grid-template-rows: none;
  /* overflow-x: auto → ana churn'ün sağındaki Inner/Outer kompakt tablolar
     viewport dışına taşınca kırpılmasın, kullanıcı horizontal scroll ile
     ulaşsın. overflow-y: auto ile birlikte aynı scroll container; sticky
     thead bu container'a göre top: 130 olarak çalışmaya devam eder. */
  overflow-y: auto;
  overflow-x: auto;
  padding-right: 4px;
}

.finance-page.is-active[data-page="product-ai"] {
  display: flex;
  flex-direction: column;
}
/* Section-card hem viewport altına kadar uzasın (kısa içerikte boş kalmasın),
   hem de AI panel expand olunca content kadar büyüsün (yarıda kalmasın). */
#product-ai-page .finance-section-card {
  flex: 1 0 auto;
  min-height: 0;
}

/* Prompt Engineer page */
.finance-page[data-page="prompt-engineer"] {
  grid-template-rows: auto minmax(0, 1fr);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.prompt-engineer-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px;
}
.prompt-engineer-card-header strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.prompt-engineer-subtitle {
  display: block;
  color: var(--finance-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}
.prompt-engineer-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prompt-engineer-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prompt-engineer-field label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prompt-engineer-field label strong {
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
}
.prompt-engineer-field label span {
  font-size: 12px;
  color: var(--finance-muted);
}
.prompt-engineer-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, "Menlo", "Monaco", "Consolas", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: #0f172a;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
}
.prompt-engineer-field textarea:focus {
  border-color: #7c3aed;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.prompt-engineer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.prompt-engineer-save,
.prompt-engineer-reset,
.prompt-engineer-restore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.prompt-engineer-save {
  background: #7c3aed;
  color: #ffffff;
  border-color: #7c3aed;
}
.prompt-engineer-save:hover:not(:disabled) {
  background: #6d28d9;
}
.prompt-engineer-save:disabled {
  background: #cbd5e1;
  border-color: #cbd5e1;
  cursor: not-allowed;
}
.prompt-engineer-reset {
  background: #ffffff;
  color: #dc2626;
  border-color: #fecaca;
}
.prompt-engineer-reset:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}
.prompt-engineer-restore {
  background: #ffffff;
  color: #475569;
  border-color: #e2e8f0;
}
.prompt-engineer-restore:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.prompt-engineer-feedback {
  font-size: 12px;
  color: #64748b;
}
.prompt-engineer-feedback.is-success {
  color: #15803d;
}
.prompt-engineer-feedback.is-error {
  color: #dc2626;
}
.prompt-engineer-meta {
  font-size: 11px;
  color: var(--finance-muted);
}

/* AI History page */
.finance-page[data-page="ai-history"] {
  grid-template-rows: auto minmax(0, 1fr);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.ai-history-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
}
.ai-history-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ai-history-card-header strong {
  font-size: 1.05rem;
}
.ai-history-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.ai-history-table {
  width: 100%;
  /* table-layout: fixed → kolonlar birbirine kaymasın, içerik uzunsa
     ellipsis ile kesilsin. Kolon genişlikleri aşağıda her tipe özel
     ayarlandı. */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}
/* Kolon genişlikleri (sırasıyla 8): Tarih · Kullanıcı · Tip · Filtre ·
   Levels · Model · Token · Cost. Filtre en geniş; Cost ve Levels en dar. */
.ai-history-table thead th:nth-child(1),
.ai-history-table tbody td:nth-child(1) { width: 14%; }   /* Tarih */
.ai-history-table thead th:nth-child(2),
.ai-history-table tbody td:nth-child(2) { width: 18%; }   /* Kullanıcı */
.ai-history-table thead th:nth-child(3),
.ai-history-table tbody td:nth-child(3) { width: 9%;  }   /* Tip pill */
.ai-history-table thead th:nth-child(4),
.ai-history-table tbody td:nth-child(4) { width: 24%; }   /* Filtre — geniş */
.ai-history-table thead th:nth-child(5),
.ai-history-table tbody td:nth-child(5) { width: 6%;  text-align: right; } /* Levels */
.ai-history-table thead th:nth-child(6),
.ai-history-table tbody td:nth-child(6) { width: 14%; }   /* Model */
.ai-history-table thead th:nth-child(7),
.ai-history-table tbody td:nth-child(7) { width: 8%;  text-align: right; } /* Token */
.ai-history-table thead th:nth-child(8),
.ai-history-table tbody td:nth-child(8) { width: 7%;  text-align: right; } /* Cost */

.ai-history-table thead th {
  text-align: left;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 700;
  color: #475569;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-history-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-history-table tbody tr:hover td {
  background: #faf5ff;
}
.ai-history-table tbody tr:last-child td {
  border-bottom: 0;
}
.ai-history-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ai-history-tag.is-fresh {
  background: #dcfce7;
  color: #166534;
}
.ai-history-tag.is-cache {
  background: #e0f2fe;
  color: #075985;
}
.ai-history-filter {
  font-family: ui-monospace, SFMono-Regular, "Menlo", "Monaco", "Consolas", monospace;
  font-size: 12px;
  color: #475569;
  /* Multi-version filter string'lerinde uzun olabiliyor — ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-history-tokens {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, "Menlo", "Monaco", "Consolas", monospace;
  font-size: 12px;
  color: #475569;
}
.ai-history-cost {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, "Menlo", "Monaco", "Consolas", monospace;
  font-size: 12px;
  color: #0f172a;
  font-weight: 700;
}

.finance-page[data-page="overview"] .finance-grid {
  min-height: 0;
}

.finance-page[data-page="overview"] .finance-grid .finance-section-card {
  max-height: 420px;
}

.finance-company-activity-card {
  display: flex;
  flex-direction: column;
}

.finance-company-activity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  padding: 0 20px 20px;
}

.finance-company-block {
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
  border: 1px solid #eef0f5;
  border-radius: 16px;
  background: #ffffff;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.finance-company-block:hover {
  border-color: #ddd6fe;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05);
}

.finance-company-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f3f8;
}

.finance-company-block-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #11151d;
  letter-spacing: -0.01em;
}

.finance-company-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #8b5cf6;
  flex: 0 0 8px;
}

.finance-company-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 700;
}

.finance-company-tx-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.finance-company-tx {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fafbff;
  transition: background 140ms ease;
}

.finance-company-tx:hover {
  background: #f3f4fb;
}

.finance-company-tx-date {
  font-size: 0.72rem;
  color: #8a94a6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.finance-company-tx-desc {
  font-size: 0.78rem;
  color: #394150;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-company-tx-amount {
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.finance-company-tx-amount.is-revenue {
  color: #15803d;
}

.finance-company-tx-amount.is-cost {
  color: #b91c1c;
}

.finance-company-empty {
  padding: 14px 10px;
  color: var(--finance-muted);
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
}

.finance-card,
.finance-header-card {
  background: var(--finance-panel);
  border: 1px solid var(--finance-panel-border);
  border-radius: 26px;
  box-shadow: var(--finance-shadow);
}

.finance-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
}

.finance-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.finance-title-group h1 {
  margin: 0;
  font-size: 1.85rem;
  letter-spacing: -0.05em;
}

.finance-title-group p {
  margin: 8px 0 0;
  color: var(--finance-muted);
  font-size: 0.95rem;
}

.finance-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--finance-accent-soft);
  color: var(--finance-accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.finance-workspace-header {
  padding: 16px 18px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.finance-workspace-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.finance-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.finance-stat-card {
  padding: 22px 24px;
}

.finance-stat-label {
  color: var(--finance-muted);
  font-size: 0.86rem;
}

.finance-stat-value {
  margin-top: 8px;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.finance-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  min-height: 0;
}

/* ===== Finance Dashboard (Overview) — KPI strip + chart cards ===== */
.finance-overview-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.finance-overview-kpi {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  border-left: 3px solid #cbd5e1;
}
.finance-overview-kpi[data-kpi="mtd-revenue"] { border-left-color: #10b981; }
.finance-overview-kpi[data-kpi="mtd-cost"]    { border-left-color: #ef4444; }
.finance-overview-kpi[data-kpi="mtd-net"].is-pos { border-left-color: #10b981; }
.finance-overview-kpi[data-kpi="mtd-net"].is-neg { border-left-color: #ef4444; }
.finance-overview-kpi[data-kpi="last30"]      { border-left-color: #2563eb; }
.finance-overview-kpi[data-kpi="total-rows"]  { border-left-color: #7c3aed; }

.finance-overview-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.finance-overview-kpi-value {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}
.finance-overview-kpi[data-kpi="mtd-net"].is-pos .finance-overview-kpi-value { color: #15803d; }
.finance-overview-kpi[data-kpi="mtd-net"].is-neg .finance-overview-kpi-value { color: #b91c1c; }
.finance-overview-kpi-hint {
  font-size: 11px;
  color: #94a3b8;
}

.finance-overview-charts-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}

/* Per Main Category charts — Monthly Cost'tan sonra her main_category
   için ayrı section. 2 kolonlu grid'de yan yana (lg ekranlarda),
   küçük ekranlarda alt alta. Aralarındaki gap diğer chart card'larıyla
   tutarlı. */
.finance-per-main-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.finance-per-main-chart-section {
  margin: 0; /* grid item'lar kendi grid gap'ini kullansın */
}

@media (max-width: 1100px) {
  .finance-per-main-charts {
    grid-template-columns: 1fr;
  }
}

.finance-monthly-chart {
  padding: 12px 18px 18px;
}
.finance-monthly-svg {
  width: 100%;
  height: auto;
  display: block;
  /* min-height kaldırıldı — preserveAspectRatio="xMidYMid meet" ile
     SVG'yi zorla uzatınca chart içeriği container'dan dar kalıp
     yanlarda padding bırakıyordu. Şimdi aspect ratio doğal — chart
     genişliğe göre kendi yüksekliğini ayarlar, padding yok. */
}
/* Legend chart'ın SAĞINDA (kullanıcı isteği — eski sol konumdan
   taşındı). Host (finance-monthly-chart) grid ile iki kolona ayrılıyor:
   SVG kalanı kaplar, legend sağda 168px sabit. Çok kategori olursa
   legend dikey scroll edebilir. */
#finance-monthly-chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}

.finance-monthly-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: #475569;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.finance-monthly-legend-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-monthly-legend .dot,
.incentives-pending-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

.finance-top-categories {
  padding: 12px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.finance-cat-row {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.finance-cat-label {
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finance-cat-track {
  background: #f1f5f9;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
}
.finance-cat-fill {
  height: 100%;
  border-radius: 4px;
  min-width: 4px;
  transition: filter 0.15s ease;
}
.finance-cat-row:hover .finance-cat-fill { filter: brightness(0.9); }
.finance-cat-value {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

@media (max-width: 1100px) {
  .finance-overview-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-overview-charts-grid { grid-template-columns: 1fr; }
}

.metadata-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.metadata-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.metadata-card:hover {
  border-color: #ddd6fe;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
}

.metadata-card-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.metadata-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #6d28d9;
}

.metadata-card-icon svg {
  width: 20px;
  height: 20px;
}

.metadata-card-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.metadata-card-title strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: #11151d;
}

.metadata-card-title span {
  color: var(--finance-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.metadata-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.metadata-count-badge.has-items {
  background: #ede9fe;
  color: #6d28d9;
}

.metadata-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 14px;
}

.metadata-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #e3e8f1;
  border-radius: 10px;
  background: #ffffff;
  color: #161b26;
  font-size: 0.88rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.metadata-input::placeholder {
  color: #b6bdcc;
}

.metadata-input:hover {
  border-color: #c9d0e0;
}

.metadata-input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.metadata-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #8b5cf6;
  border-radius: 999px;
  background: #8b5cf6;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(139, 92, 246, 0.2);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.metadata-submit:hover {
  background: #7c3aed;
  border-color: #7c3aed;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.metadata-submit:active {
  transform: translateY(1px);
}

.metadata-submit:disabled {
  opacity: 0.55;
  cursor: wait;
  box-shadow: none;
}

.metadata-submit-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.metadata-option-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-height: 44px;
  padding: 4px 0 2px;
}

.metadata-option-list .metadata-option-row,
.metadata-option-list .metadata-inline-form {
  align-self: stretch;
}

.metadata-option-list .metadata-option-row {
  display: flex;
}

.metadata-option-list .metadata-option-row .metadata-option-chip {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 6px;
}

.metadata-option-list:empty::before,
.metadata-option-list .metadata-option-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px dashed #e3e8f1;
  border-radius: 12px;
  color: #9aa3b5;
  font-size: 0.82rem;
  font-style: italic;
  background: #fafbff;
}

.metadata-option-list:empty::before {
  content: "No options yet. Add one above to get started.";
}

.metadata-option-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 4px;
  border-radius: 999px;
  background: #f3e8ff;
  color: #6d28d9;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: grab;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease, opacity 140ms ease;
  user-select: none;
}

.metadata-option-row:hover {
  background: #e9d5ff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
}

.metadata-option-row.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.22);
  transform: scale(1.01);
}

.metadata-option-row.is-drop-target {
  background: #ddd6fe;
  box-shadow: inset 0 0 0 2px #8b5cf6;
}

.metadata-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
  color: #a78bfa;
  cursor: grab;
  flex: 0 0 20px;
}

.metadata-drag-handle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.metadata-option-row:hover .metadata-drag-handle {
  color: #7c3aed;
}

.metadata-option-row.is-dragging .metadata-drag-handle {
  cursor: grabbing;
}

.metadata-option-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 2px 4px 0;
  color: inherit;
  font: inherit;
  letter-spacing: -0.01em;
}

.metadata-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.55);
  color: #6d28d9;
  font-size: 0;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.metadata-edit-button::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 17.25V21h3.75l11-11-3.75-3.75-11 11Zm17.71-9.63a1 1 0 0 0 0-1.42l-2.91-2.91a1 1 0 0 0-1.42 0l-2.34 2.34 4.33 4.33 2.34-2.34Z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 17.25V21h3.75l11-11-3.75-3.75-11 11Zm17.71-9.63a1 1 0 0 0 0-1.42l-2.91-2.91a1 1 0 0 0-1.42 0l-2.34 2.34 4.33 4.33 2.34-2.34Z'/></svg>") center / contain no-repeat;
}

.metadata-edit-button:hover {
  background: #ffffff;
  border-color: #ddd6fe;
  color: #5b21b6;
}

.metadata-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #e3e8f1;
  background: #ffffff;
  color: #6b7280;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.metadata-cancel:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #374151;
}

.metadata-inline-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.metadata-inline-input {
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font-size: 0.82rem;
  border-radius: 8px;
}

.metadata-inline-submit {
  height: 32px;
  padding: 0 12px;
  font-size: 0.78rem;
}

.metadata-inline-submit .metadata-submit-icon {
  display: none;
}

.finance-section-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

/* Product AI section-card — plain block layout. Children just stack
   one after another in normal flow; no grid/flex weirdness on the
   container, but each child keeps its own display from its own rule.
   (flex sizing is set at the .finance-page level so the card stretches
   to viewport bottom and grows with expanded AI panel content.) */
#product-ai-page .finance-section-card {
  display: block;
  grid-template-rows: none;
}

/* ===== Product AI filter apply loading overlay =====
   Solid opaque background — kullanıcı isteği: filtreler apply olmadan
   altındaki grafik/tablo gözükmesin. Tamamen kapatıyor.

   ÖNEMLİ: position: fixed ile viewport'u komple kaplıyor — daha önce
   absolute + inset:0'dı ama #product-ai-page scroll container olduğu için
   absolute element scroll content içinde kalıp ilk viewport'tan sonra
   kayboluyordu (kullanıcı aşağıdaki "Inner & Outer Level Churn" başlığını
   ve diğer Loading... metinlerini görüyordu). fixed ile artık her durumda
   tam ekran kapanıyor. */
/* ===========================================================================
   Skeleton screen — applyProductAiFilters / first load loading state.
   Spinner + centered card UX'inden skeleton blocks'a geçtik (UX request).
   Kullanıcı sayfanın strüktürünü görerek beklemenin daha az can sıkıcı
   olduğunu hissediyor (perceived performance ↑).

   Yapı (sayfa düzenini taklit ediyor):
     - status pill (üst-sol, "Loading data…")
     - filter row (5 pill placeholder)
     - top KPI strip (5 küçük kart)
     - insight chart grid (5 kart)
     - tables row (Main + Inner + Outer)

   Animasyon: shimmer — gradient soldan sağa kayıyor (1.5s döngüsü).
   ============================================================================ */
.product-ai-filter-overlay {
  /* Sidebar ve topbar her zaman görünsün (kullanıcı isteği — loading
     sırasında bile sayfalar arası navigasyon kalsın). Topbar 58px,
     sidebar 192px expanded / 56px collapsed; overlay onların sağında
     başlayıp viewport'un kalanını kaplar. body-grid'in collapse class'ı
     ile sol kenar dinamik değişir. */
  position: fixed;
  top: 58px;
  right: 0;
  bottom: 0;
  left: 192px;
  z-index: 9000;
  background: #f8fafc;
  pointer-events: all;
  overflow-y: auto;
  animation: pa-fade-in 0.16s ease-out;
  transition: left 180ms ease;
}

.finance-body-grid.is-sidebar-collapsed .product-ai-filter-overlay {
  left: 56px;
}
.product-ai-filter-overlay[hidden] {
  display: none;
}
@keyframes pa-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pa-skeleton {
  width: 100%;
  min-height: 100%;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
}

/* Üst-sol bilgi pill — küçük "loading" hint */
.pa-skel-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.pa-skel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7c3aed;
  animation: pa-skel-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes pa-skel-dot-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

.pa-skel-row {
  display: flex;
  gap: 12px;
}
.pa-skel-row.pa-skel-grid { flex-wrap: wrap; }

/* Genel skeleton bloğu — gri zemin + shimmer overlay. ::after pseudo-
   element'le diagonal shimmer akıyor (background-color animasyonundan
   daha smooth, daha az CPU). */
.pa-skel-card,
.pa-skel-pill {
  position: relative;
  background: #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.pa-skel-card::after,
.pa-skel-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: pa-skel-shimmer 1.5s ease-in-out infinite;
}
/* Stagger — kart-sıralı shimmer dalgası, monoton görünmesin */
.pa-skel-row .pa-skel-card:nth-child(2)::after,
.pa-skel-row .pa-skel-pill:nth-child(2)::after { animation-delay: 0.12s; }
.pa-skel-row .pa-skel-card:nth-child(3)::after,
.pa-skel-row .pa-skel-pill:nth-child(3)::after { animation-delay: 0.24s; }
.pa-skel-row .pa-skel-card:nth-child(4)::after,
.pa-skel-row .pa-skel-pill:nth-child(4)::after { animation-delay: 0.36s; }
.pa-skel-row .pa-skel-card:nth-child(5)::after,
.pa-skel-row .pa-skel-pill:nth-child(5)::after { animation-delay: 0.48s; }

@keyframes pa-skel-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Filter row pills */
.pa-skel-pill {
  height: 32px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.pa-skel-pill-primary {
  background: #c4b5fd;
}

/* Top KPI strip — 5 eşit kart, kısa */
.pa-skel-kpi-strip {
  margin-top: 4px;
}
.pa-skel-kpi {
  flex: 1 1 0;
  height: 70px;
  min-width: 120px;
}

/* Level insight grid — flex-wrap, her kart ~%18 genişlikte */
.pa-skel-grid .pa-skel-chart {
  flex: 1 1 calc(20% - 12px);
  min-width: 220px;
  height: 280px;
}

/* 3 churn tablosu — main %75, inner+outer geri kalanı paylaşır */
.pa-skel-tables {
  flex-wrap: nowrap;
  min-height: 360px;
}
.pa-skel-main-table {
  flex: 0 0 75%;
  height: 360px;
}
.pa-skel-side-table {
  flex: 1 1 0;
  min-width: 160px;
  height: 360px;
}

/* VYG Puzzle AI sayfası — tüm text bold (kullanıcı isteği).
   Hafif: 700 (normal bold). Mevcut spans/headings vs. zaten kalın olanlar
   etkilenmez; daha hafif olanlar 700'e çıkar. */
#product-ai-page,
#product-ai-page * {
  font-weight: 700;
}

.finance-section-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 24px 14px;
  border-radius: 26px 26px 0 0;
  background: var(--finance-panel);
}

/* Product AI sayfası için sticky cluster — section-header en üst
   katman (Inner & Outer Level Churn title + filter context + showing
   X of Y rows). Scroll edince burası viewport'un en üstüne yapışır,
   sonra altında pill switcher (top: 80) ve Changelog toolbar (top:
   130) ve table thead (top: 180) sırasıyla pin'lenir. */
#product-ai-page .finance-section-header {
  position: sticky;
  top: 0;
  z-index: 96;
  background: #ffffff;
  /* min-height = pill switcher'ın top değeri (80). Böylece header'ın
     beyaz bg'si 0-80 aralığını tam kaplar; arada satır bleed olmaz. */
  min-height: 80px;
  box-sizing: border-box;
}

.finance-section-header strong {
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.finance-section-header span {
  color: var(--finance-muted);
  font-size: 0.86rem;
}

/* BQ table link + USD/TRY rate refresh button — section header'da "All
   Transactions" başlığının hemen yanında inline pill'ler. Aynı görsel
   stil (monospace değil — refresh için ikonlu kısa metin), aynı pill
   shape. Title pill'lerin solunda kalmaya devam ediyor; meta info
   margin-left:auto ile sağa yapışıyor (.finance-section-meta). */
.finance-section-header .finance-bq-table-link {
  /* Tüm header pill'leri aynı tipografide (kullanıcı isteği) — eski
     monospace BQ link, sans-serif weight 600 olan refresh pill ile
     görsel olarak ayrışıyordu. Artık hepsi sans-serif, 0.78rem,
     weight 600 → tutarlı bir pill grubu. */
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--finance-muted);
  text-decoration: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}

.finance-section-header .finance-bq-table-link:hover,
.finance-section-header .finance-bq-table-link:focus-visible {
  color: #1d4ed8;
  background: rgba(29, 78, 216, 0.08);
  border-color: rgba(29, 78, 216, 0.25);
  outline: none;
}

/* Refresh pill — BQ link ile birebir aynı tipografide (base class'tan
   inherit). Önceden monospace override'ı vardı, artık base zaten
   sans-serif olduğu için gereksiz. */
.finance-section-header .finance-rates-refresh-pill {
  /* No font overrides — base .finance-bq-table-link ile aynı */
}

.finance-section-header .finance-rates-refresh-pill:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Semantic color overrides — her pill'in işine göre farklı renk
   identity'si. Aynı pill shape, ayırt edici tonlar. */

/* BQ link (vyg_game_keys / vyg_finance_transactions) — mavi (cloud/data) */
.finance-section-header a.finance-bq-table-link {
  color: #1d4ed8;
  background: rgba(29, 78, 216, 0.08);
  border-color: rgba(29, 78, 216, 0.22);
}

.finance-section-header a.finance-bq-table-link:hover,
.finance-section-header a.finance-bq-table-link:focus-visible {
  background: #1d4ed8;
  color: #ffffff;
  border-color: #1d4ed8;
}

/* + Yeni Game — yeşil (create action) */
#game-keys-add-row.finance-bq-table-link {
  color: #047857;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.28);
}

#game-keys-add-row.finance-bq-table-link:hover,
#game-keys-add-row.finance-bq-table-link:focus-visible {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

/* USD/TRY kur — amber (sync/refresh action) */
#finance-admin-rates-refresh.finance-bq-table-link {
  color: #b45309;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.28);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#finance-admin-rates-refresh.finance-bq-table-link:hover,
#finance-admin-rates-refresh.finance-bq-table-link:focus-visible {
  background: #f59e0b;
  color: #ffffff;
  border-color: #f59e0b;
}

/* Eksik rate count badge — sadece TRY satırlarda usd_try_rate boş
   olanların sayısı. "13" gibi küçük kırmızı/koyu rozet. 0 ise gizli
   (finance-hidden). Buton hover'da kontrast için biraz daha koyu. */
#finance-rates-missing-badge.finance-rates-missing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  /* Hafif animation — kullanıcının dikkatini çekmek için ilk fark
     edişte gentle pulse. */
  animation: finance-rates-badge-pulse 2.4s ease-in-out infinite;
}

#finance-admin-rates-refresh:hover #finance-rates-missing-badge {
  background: #b91c1c;
}

@keyframes finance-rates-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}

/* "Detayları gör" link — USD/TRY kur tıklandıktan sonra appliedRates
   geldiyse görünür. Küçük amber link button, panel'i açıp kapatır. */
.finance-rates-detail-toggle {
  background: transparent;
  border: none;
  color: #b45309;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0 4px;
  transition: color 120ms ease;
}

.finance-rates-detail-toggle:hover {
  color: #92400e;
}

/* USD/TRY kur uygulama detay paneli — fixed popover, top-right anchored.
   Hangi tarihte hangi rate ile kaç row dolduğunu liste halinde gösterir.
   Hafta sonu / tatil günleri için yıldız işareti + legend. */
.finance-rates-detail-panel {
  /* Ekranın TAM ORTASINDA modal — büyük + tüm sayfayı karartan backdrop
     (100vmax spread shadow) → arkadaki sticky tablo başlığı görünmez. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Sticky tablo başlığı (z 1000) + toolbar (z 9000) + diğer overlay'lerin
     (z ~10004) HEPSİNİN üstünde olmalı. */
  z-index: 100000;
  width: min(640px, 94vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e3e8f1;
  border-radius: 16px;
  box-shadow:
    0 0 0 100vmax rgba(15, 23, 42, 0.45),
    0 24px 60px rgba(16, 24, 40, 0.30);
  overflow: hidden;
  animation: finance-rates-detail-in 160ms ease-out;
}

@keyframes finance-rates-detail-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.finance-rates-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #edf1f6;
  background: #fef3c7;
  color: #78350f;
  font-size: 0.85rem;
}

.finance-rates-detail-close {
  border: none;
  background: transparent;
  color: #78350f;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 100ms ease;
}

.finance-rates-detail-close:hover {
  background: rgba(120, 53, 15, 0.12);
}

.finance-rates-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 18px 16px;
  overflow-y: auto;
  font-size: 0.85rem;
  color: #334155;
}

/* Etkilenecek satırların tek tek listesi (her tarih altında). */
.finance-rates-detail-txrows {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finance-rates-detail-txrows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  font-size: 0.75rem;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  border-left: 3px solid #cbd5e1;
}
.finance-rates-detail-txdesc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.finance-rates-detail-txamt {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #0f172a;
}

/* Preview footer — "Uygula" ile tabloya yazılır. */
.finance-rates-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid #edf1f6;
  background: #fbfcfe;
}
.finance-rates-detail-footer-note {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}
.finance-rates-apply-btn {
  flex: 0 0 auto;
  padding: 7px 18px;
  border: 1px solid #16a34a;
  border-radius: 8px;
  background: #16a34a;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.finance-rates-apply-btn:hover {
  background: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}
.finance-rates-apply-btn:disabled {
  background: #cbd5e1;
  border-color: #cbd5e1;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.finance-rates-detail-summary {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f1f4f9;
  color: #475569;
  font-weight: 600;
  font-size: 0.78rem;
}

.finance-rates-detail-list {
  display: grid;
  gap: 4px;
}

/* Bir kayıt iki satırlı: ilk satır txDate | rate | count, alt satır
   "Kaynak: TCMB · rateDate ↗" linki. Hover'da tüm bloğun bg'si değişir. */
.finance-rates-detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  transition: background 100ms ease;
}

.finance-rates-detail-row:hover {
  background: #fef3c7;
}

.finance-rates-detail-row-main {
  display: grid;
  grid-template-columns: 84px 1fr 80px;
  align-items: center;
  gap: 8px;
}

.finance-rates-detail-row-source {
  font-size: 0.7rem;
  color: #94a3b8;
  padding-left: 92px; /* date kolonu + gap kadar indent, hizalı görünüm */
}

.finance-rates-detail-source {
  color: #b45309;
  text-decoration: none;
  font-weight: 600;
  transition: color 100ms ease;
}

a.finance-rates-detail-source:hover {
  color: #78350f;
  text-decoration: underline;
}

.finance-rates-detail-link-icon {
  font-size: 0.7rem;
}

.finance-rates-detail-shift {
  color: #94a3b8;
  font-weight: 500;
  font-style: italic;
}

.finance-rates-detail-date {
  color: #1f2937;
  font-weight: 600;
}

.finance-rates-detail-rate {
  color: #b45309;
  font-weight: 700;
  font-size: 0.82rem;
}

.finance-rates-detail-asterisk {
  color: #dc2626;
  font-weight: 700;
}

.finance-rates-detail-count {
  text-align: right;
  color: #6b7280;
  font-size: 0.74rem;
  font-weight: 600;
}

.finance-rates-detail-legend {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f1f4f9;
  color: #64748b;
  font-size: 0.72rem;
  font-style: italic;
}

.finance-rates-detail-legend a {
  color: #b45309;
  text-decoration: underline;
}

.finance-rates-detail-legend a:hover {
  color: #78350f;
}

.finance-rates-detail-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 0.78rem;
  padding: 16px 0;
}

/* Tablo genişlik slider — admin-only kontrol, All Transactions
   header'ında durur. Slider'ın iki yanında label ve değer (%). */
.finance-table-width-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  white-space: nowrap;
}

.finance-table-width-label {
  color: var(--finance-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#finance-table-width-slider {
  width: 120px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #c4b5fd 0%, #7c3aed 100%);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

#finance-table-width-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7c3aed;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.4);
  cursor: grab;
}

#finance-table-width-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.12);
}

#finance-table-width-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7c3aed;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.4);
  cursor: grab;
}

.finance-table-width-value {
  color: #6d28d9;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
}

/* Dashboard filter save toast — admin checkbox toggle ettikten 400ms
   sonra debounced save tetiklenir; backend cevabı bu toast'a yansır.
   Sağ üst köşede sabit, slide-in animasyonla görünür, 2sn (success)
   veya 4.5sn (error) sonra fade out. */
.finance-dashboard-filter-toast {
  position: fixed;
  top: 84px;
  right: 22px;
  z-index: 280;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: normal;
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

.finance-dashboard-filter-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.finance-dashboard-filter-toast.is-success {
  background: #d1fae5;
  color: #047857;
  border: 1px solid #6ee7b7;
}

.finance-dashboard-filter-toast.is-error {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

/* Incentive Hub inline editable input — All Transactions combo input
   pattern. Default'ta transparent border (display gibi görünür),
   hover/focus'ta border + bg belirir. Chip variant'ta inline style
   (background + color) ile renkli pill görünümü. */
.incentives-cell-input {
  width: 100%;
  height: 20px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #475063;
  font: inherit;
  font-size: 11px;
  outline: none;
  cursor: text;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.incentives-cell-input:hover {
  border-color: #d8dfeb;
  background: #ffffff;
  color: #1f2937;
}
.incentives-cell-input:focus {
  border-color: #8b5cf6;
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.14);
}
.incentives-cell-input-chip {
  border-radius: 999px;
  padding: 0 10px;
  width: max-content;
  max-width: 100%;
  cursor: pointer;
}
.incentives-cell-input-chip:focus {
  cursor: text;
}
/* Dirty state — yellow left border + soft yellow bg overlay */
.incentives-cell-input.is-dirty {
  border-color: #f4c430 !important;
  background: #fffaf0 !important;
}
.incentives-cell-input.is-save-error {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
}
.game-keys-table td.is-dirty {
  background: rgba(244, 196, 48, 0.12) !important;
  box-shadow: inset 3px 0 0 #f4c430;
}

/* Incentive Hub — Per Şirket Pending Charts. Her şirket bir kart;
   tahakkuk var ama ödeme yok dosyaları aya göre stacked bar. KPI
   strip ile tablo arasında. */
/* 3 şirket kartı her zaman yan yana, sayfaya sığar (kullanıcı isteği —
   yatay scroll YOK). repeat(3, minmax(0,1fr)): 3 eşit kolon, content'ten
   bağımsız shrink edebilir (minmax min=0). Uzun legend metni kartı
   genişletip taşırmaz (aşağıda legend wrap + min-width:0). */
/* Incentive Track — Teşvik RTP Takip pivot tablosu. */
.it-pivot-wrap { margin-bottom: 16px; }
.it-pivot-card {
  background: #ffffff;
  border: 1px solid #e8edf4;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.it-pivot-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid #eef2f7;
}
.it-pivot-titleblk { display: flex; flex-direction: column; }
.it-pivot-titleblk strong { font-size: 15px; font-weight: 800; color: #b91c1c; }
.it-pivot-subtitle { font-size: 11px; color: #94a3b8; font-weight: 600; }
.it-pivot-controls { display: flex; gap: 10px; }
.it-pivot-controls label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; font-weight: 600; }
.it-pivot-controls select {
  padding: 4px 8px; border: 1px solid #e3e8f1; border-radius: 7px; background: #f8fafc;
  font-size: 11px; font-weight: 600; color: #1f2937; cursor: pointer;
}
.it-pivot-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.it-pivot-legend-title { font-size: 10.5px; color: #94a3b8; font-weight: 700; }
.it-pivot-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: #475569; font-weight: 600; }
.it-pivot-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.it-pivot-tablewrap { max-height: 560px; overflow: auto; }
.it-pivot-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.it-pivot-table thead th {
  position: sticky; top: 0; z-index: 2; background: #f8fafc; color: #475569; font-weight: 700;
  text-align: left; padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e8ecf3;
}
.it-pivot-table tbody td { padding: 7px 12px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #eef1f6; white-space: nowrap; }
.it-pivot-table thead th:last-child, .it-pivot-table tbody td:last-child { border-right: none; }
.it-pivot-table tbody tr:hover td { background: #fafbfe; }
.it-pivot-app { font-weight: 700; color: #1f2937; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.it-pivot-platform, .it-pivot-month { color: #64748b; font-weight: 600; }
.it-pivot-val { font-variant-numeric: tabular-nums; font-weight: 700; }
.it-pivot-dosya { font-size: 10px; color: #94a3b8; font-weight: 600; }

/* Incentive Track — tablo üstü 4 kart. */
.it-cards-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  align-items: start;
}
@media (max-width: 1000px) {
  .it-cards-row { grid-template-columns: 1fr; }
}
.it-card {
  background: #ffffff;
  border: 1px solid #e8edf4;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.it-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 4px;
}
.it-card-head strong { font-size: 13px; font-weight: 800; color: #1f2937; }
.it-card.is-alert .it-card-head strong { color: #b91c1c; }
.it-card-count {
  flex: 0 0 auto;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.it-card-count.is-info { background: #eef2ff; color: #4338ca; }
/* Bar listesi (kanal/ay kartları) */
.it-card-barlist li { gap: 8px; }
.it-card-barlabel {
  flex: 0 0 42%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
  font-weight: 600;
}
.it-card-bartrack {
  flex: 1 1 auto;
  height: 10px;
  background: #eef2f7;
  border-radius: 4px;
  overflow: hidden;
}
.it-card-barfill { display: block; height: 100%; border-radius: 4px; }
.it-card-sub { padding: 0 14px 8px; font-size: 10.5px; color: #94a3b8; font-weight: 500; }
.it-card-body { border-top: 1px solid #eef2f7; }
/* Kart liste sıralama kontrolü */
.it-card-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 2px;
}
.it-card-sort-label { font-size: 10.5px; color: #94a3b8; font-weight: 600; }
.it-card-sortbtn {
  padding: 3px 9px;
  border: 1px solid #e3e8f1;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.it-card-sortbtn:hover { background: #eef2f7; }
.it-card-sortbtn.is-active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}
.it-card-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.it-card-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  font-size: 11px;
}
.it-card-app {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
  font-weight: 600;
}
.it-card-chip {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.it-card-amt {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #0f172a;
  font-size: 11px;
}
.it-card-empty { padding: 18px 14px; text-align: center; color: #94a3b8; font-size: 12px; }
.it-card-placeholder { border-style: dashed; opacity: 0.7; }
.it-card-placeholder .it-card-head strong { color: #94a3b8; }

/* Tahakkuk Bekleyen Teşvikler — Süreç→Şirket gruplu aging tablosu. */
.incentives-accrual-card {
  background: #ffffff;
  border: 1px solid #e8edf4;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  margin-bottom: 16px;
  overflow: hidden;
}
.incentives-accrual-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid #eef2f7;
}
.incentives-accrual-head strong {
  font-size: 14px;
  font-weight: 800;
  color: #b91c1c;
  letter-spacing: 0.01em;
}
.incentives-accrual-sub {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}
.incentives-accrual-wrap {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: auto;
  /* Dikey scrollbar için yer ayır — son kolon (Waiting) sayılarının
     üzerine binmesin. */
  scrollbar-gutter: stable;
}
.incentives-accrual-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.incentives-accrual-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  text-align: left;
  padding: 9px 12px;
  white-space: nowrap;
  border-bottom: 1px solid #e2e8f0;
}
.incentives-accrual-table td {
  padding: 7px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #1f2937;
  vertical-align: middle;
}
.incentives-accrual-table tbody tr:hover td {
  background: #fafbfe;
}
.incentives-accrual-surec,
.incentives-accrual-sirket {
  font-weight: 700;
  vertical-align: top !important;
  background: #fcfdff;
  border-right: 1px solid #eef2f7;
  border-bottom: 1px solid #e2e8f0 !important;
}
.incentives-accrual-surec { color: #334155; max-width: 220px; }
.incentives-accrual-sirket { color: #4338ca; }
.incentives-accrual-num-col { font-variant-numeric: tabular-nums; white-space: nowrap; }
.incentives-accrual-app {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0e7490;
}
/* Aging bar — track + fill (tier renkli) + sağda gün sayısı. */
.incentives-accrual-bar-td { width: 220px; min-width: 200px; padding-right: 18px; }
.incentives-accrual-bar-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.incentives-accrual-bar-track {
  position: relative;
  flex: 1 1 auto;
  height: 14px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}
.incentives-accrual-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 200ms ease;
}
.incentives-accrual-bar-fill.tier-high { background: #b91c1c; }
.incentives-accrual-bar-fill.tier-mid  { background: #d97706; }
.incentives-accrual-bar-fill.tier-low  { background: #65a30d; }
.incentives-accrual-bar-num {
  flex: 0 0 auto;
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 11.5px;
}
.incentives-accrual-bar-num.tier-high { color: #b91c1c; }
.incentives-accrual-bar-num.tier-mid  { color: #b45309; }
.incentives-accrual-bar-num.tier-low  { color: #4d7c0f; }
.incentives-accrual-bar-num.is-none   { color: #cbd5e1; }

/* İki özet tablosu yan yana — 2 eşit kolon, sığdırılmış (minmax(0,1fr)
   ile taşma engellenir; her kart kendi içinde yatay scroll yapar). */
.incentives-summary-row {
  display: grid;
  /* Sol (Ödeme Bekleyen) %35 · Sağ (Tahakkuk Bekleyen) %65 — accrual
     tablosu daha geniş, scroll'suz sığsın diye. */
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 16px;
}
.incentives-summary-row > * {
  min-width: 0;
  margin-bottom: 0 !important;
}
/* Dar ekranda alt alta */
@media (max-width: 1180px) {
  .incentives-summary-row {
    grid-template-columns: 1fr;
  }
}

/* Tahakkuk Bekleyen tablosu — fixed layout, %100 genişlik, YATAY SCROLL
   YOK; tüm kolonlar sığar (uzun metinler kayar/wrap). */
.incentives-accrualtable {
  table-layout: fixed;
  width: 100%;
  font-size: 10.5px;
}
.incentives-accrualtable th,
.incentives-accrualtable td {
  /* Kompakt: dikey padding 6→2px düşürüldü, tüm hücreler TEK SATIR
     (nowrap) — sığmayan metin "…" olur (hover'da title ile tam metin). */
  padding: 2px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
/* Sayı + bar kolonları tek satır */
.incentives-accrualtable .incentives-accrual-num-col,
.incentives-accrualtable .incentives-accrual-bar-td { white-space: nowrap; }
/* Kolon genişlikleri (toplam 100%) */
.incentives-accrualtable th:nth-child(1), .incentives-accrualtable td:nth-child(1) { width: 15%; } /* Process */
.incentives-accrualtable th:nth-child(2), .incentives-accrualtable td:nth-child(2) { width: 9%; }  /* Company */
.incentives-accrualtable th:nth-child(3), .incentives-accrualtable td:nth-child(3) { width: 7%; }  /* File No */
.incentives-accrualtable th:nth-child(4), .incentives-accrualtable td:nth-child(4) { width: 16%; } /* File */
.incentives-accrualtable th:nth-child(5), .incentives-accrualtable td:nth-child(5) { width: 12%; } /* App/Platform */
.incentives-accrualtable th:nth-child(6), .incentives-accrualtable td:nth-child(6) { width: 10%; } /* Incentive TL */
.incentives-accrualtable th:nth-child(7), .incentives-accrualtable td:nth-child(7) { width: 17%; } /* Owner — tam isim sığsın */
.incentives-accrualtable th:nth-child(8), .incentives-accrualtable td:nth-child(8) { width: 14%; } /* Waiting bar */
/* Process + Company rowspan hücreleri — wrap kalsın (çok satıra yayıldığı
   için ekstra yükseklik maliyeti yok, tam metin görünür). */
.incentives-accrualtable .incentives-accrual-surec,
.incentives-accrualtable .incentives-accrual-sirket {
  white-space: normal;
  word-break: break-word;
}
/* Hariç tutulan dosya notu — tablo üstünde amber şerit. */
.incentives-accrual-exclude-note {
  padding: 7px 18px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
}

/* Process subtotal satırı — process toplam Incentive TL + dosya sayısı. */
.incentives-accrual-subtotal td {
  background: #eef2f7;
  font-weight: 700;
  color: #1f2937;
  border-top: 1px solid #cbd5e1;
  border-bottom: 2px solid #cbd5e1;
}
.incentives-accrual-subtotal td:first-child {
  color: #475569;
}
/* App ellipsis sınırını fixed layout yönetir → max-width kaldır */
.incentives-accrualtable .incentives-accrual-app { max-width: none; }
/* Bar td fixed layout'ta % genişlik kullanır + scrollbar için sağ boşluk
   (.incentives-accrualtable td padding:6px 8px'i ezecek specificity). */
.incentives-accrualtable .incentives-accrual-bar-td {
  width: 13%;
  min-width: 0;
  padding-right: 20px;
}
/* Fixed layout tam sığdığı için yatay scroll çubuğu görünmez */
.incentives-accrual-card .incentives-accrual-wrap:has(.incentives-accrualtable) {
  overflow-x: hidden;
}

/* Ödeme Bekleyen Teşvikler tek tablosu — host grid yerine block olur. */
.incentives-pending-charts.is-table-mode {
  display: block;
  grid-template-columns: none;
}
.incentives-paytable .incentives-accrual-bar-td {
  width: auto;
  min-width: 200px;
}
.incentives-paytable-month {
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}
.incentives-paytable-amt {
  flex: 0 0 auto;
  min-width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #1f2937;
}
.incentives-paytable-ctotal {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
}
/* Şirket ara toplam satırı — month satırlarından koyu, grand total'dan
   açık; şirket bloğunu görsel olarak kapatır. */
/* Şirket toplam satırı — renk/aksan inline (şirket-renkli) gelir; boyut
   month satırlarıyla aynı (kompakt), sadece kalın. */
.incentives-paytable-subtotal td {
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #d8e0ea;
  font-weight: 700;
}

.incentives-paytable-grand td {
  background: #fef2f2 !important;
  border-top: 2px solid #fecaca;
  font-weight: 800;
  color: #b91c1c;
}
.incentives-paytable-grand .incentives-paytable-amt {
  color: #b91c1c;
  font-size: 13px;
}

.incentives-pending-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  overflow-x: hidden;
  /* align-items: stretch → 3 kart EŞIT yükseklik (en uzun = Spacetime
     7 ay). Page artık block flow olduğu için stretch collapse YAPMAZ
     (eskiden grid'de 278px'e çöküyordu, o sorun gitti). */
  align-items: stretch;
}

.incentives-pending-chart-body {
  padding: 12px 14px 14px;
  min-width: 0; /* grid item içeriği shrink edebilsin */
}

/* Chart kartı min-width:0 — grid minmax(0,1fr) kolonunda içerik
   shrink edebilsin. overflow-x: clip → uzun legend yatay taşmasını
   kırp ama DİKEY (TOPLAM) kırpma (overflow:hidden idi, TOPLAM'ı
   kesiyordu). align-items:start ile kart zaten içeriğine göre büyür. */
.incentives-pending-charts .finance-section-card {
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
}

/* SVG kolona sığar (width:100%), 3-col layout'ta kolon zaten dar
   (~1/3 sayfa) olduğu için ballooning olmaz. max-width kaldırıldı. */
.incentives-pending-chart-body .finance-monthly-svg {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* Legend uzun etiketleri (örn. "Rapor ve Yurtdisi Sirket Alimina
   Yönelik Danismanlik") nowrap ile kartı genişletip yatay taşma
   yaratıyordu. Incentive legend'de wrap aç + item nowrap'i kaldır. */
.incentives-pending-legend {
  min-width: 0;
}
.incentives-pending-legend .finance-monthly-legend-item {
  white-space: normal;
  overflow: visible;
  max-width: 100%;
}

/* Kartlar flex column → header üstte, chart-body ortayı doldurur,
   TOPLAM en altta hizalı (stretch ile eşit yükseklik kartlarda
   TOPLAM'lar aynı hizada durur). .finance-section-card global
   display:grid override edildi. */
.incentives-pending-charts .finance-section-card {
  display: flex;
  flex-direction: column;
  grid-template-rows: none;
}
.incentives-pending-chart-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.incentives-pending-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 14px 0;
  font-size: 11px;
  color: #475569;
}

/* Grafik altı toplam — legend'ın altında, üst kenar separator'lü
   belirgin satır. Sol "Toplam" label, sağ büyük TL tutarı.
   margin-top: auto → flex column body'de TOPLAM'ı en alta iter
   (kısa kartlarda bile alt kenara yapışır → 3 kartın TOPLAM'ı aynı
   hizada). */
.incentives-pending-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto 14px 0;
  padding-top: 10px;
  border-top: 1px solid #edf1f6;
}
.incentives-pending-total-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}
.incentives-pending-total-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.incentives-pending-empty {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
  font-style: italic;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
}

/* Incentive Hub — sağa scroll yapılırken ilk 4 kolon (Dosya, Şirket,
   Evrak Giriş Tarihi, Dosya No) freeze. Multi-column sticky için her
   kolonun width'i + cumulative left offset'i hardcoded olmak zorunda
   (position:sticky width-aware değil — sabit left=X gerekiyor).
   Width'ler: col1=200, col2=110, col3=110, col4=90 → total 510px
   frozen pane. Son frozen kolonda (col 4) belirgin sağ kenar shadow
   ile frozen/scrollable sınırını işaretle. */

/* Col 1 — Dosya (200px) */
.finance-page[data-page="incentives"] .finance-table tbody td:nth-child(1),
.finance-page[data-page="incentives"] .finance-table thead th:nth-child(1) {
  position: sticky;
  left: 0;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

/* Col 2 — Şirket (110px), left = 200 */
.finance-page[data-page="incentives"] .finance-table tbody td:nth-child(2),
.finance-page[data-page="incentives"] .finance-table thead th:nth-child(2) {
  position: sticky;
  left: 200px;
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}

/* Col 3 — Evrak Giriş Tarihi (110px), left = 310 */
.finance-page[data-page="incentives"] .finance-table tbody td:nth-child(3),
.finance-page[data-page="incentives"] .finance-table thead th:nth-child(3) {
  position: sticky;
  left: 310px;
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}

/* Col 4 — Dosya No (90px), left = 420, frozen edge'in sağında box-shadow */
.finance-page[data-page="incentives"] .finance-table tbody td:nth-child(4),
.finance-page[data-page="incentives"] .finance-table thead th:nth-child(4) {
  position: sticky;
  left: 420px;
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

/* tbody body cell'ler için bg + z-index */
.finance-page[data-page="incentives"] .finance-table tbody td:nth-child(1),
.finance-page[data-page="incentives"] .finance-table tbody td:nth-child(2),
.finance-page[data-page="incentives"] .finance-table tbody td:nth-child(3),
.finance-page[data-page="incentives"] .finance-table tbody td:nth-child(4) {
  background: #ffffff;
  z-index: 5;
}

/* thead header cell'ler için bg + z-index 15 (sticky header + sticky
   col intersection — corner hepsinin üstünde) */
.finance-page[data-page="incentives"] .finance-table thead th:nth-child(1),
.finance-page[data-page="incentives"] .finance-table thead th:nth-child(2),
.finance-page[data-page="incentives"] .finance-table thead th:nth-child(3),
.finance-page[data-page="incentives"] .finance-table thead th:nth-child(4) {
  background: #f5f7fb;
  z-index: 15;
}

/* Frozen edge — col 4'ün sağında belirgin shadow → scrollable area'nın
   nerede başladığı net görünsün. */
.finance-page[data-page="incentives"] .finance-table tbody td:nth-child(4) {
  box-shadow: 2px 0 4px -2px rgba(15, 23, 42, 0.15);
}
.finance-page[data-page="incentives"] .finance-table thead th:nth-child(4) {
  box-shadow: 2px 0 4px -2px rgba(15, 23, 42, 0.15), 0 1px 0 #dfe5ef;
}

/* Hover row efekti — sticky cell'ler de hover bg'sini yansıtmalı yoksa
   beyaz kalıp diğer row hücrelerinden ayrık görünür. */
.finance-page[data-page="incentives"] .finance-table tbody tr:hover td:nth-child(1),
.finance-page[data-page="incentives"] .finance-table tbody tr:hover td:nth-child(2),
.finance-page[data-page="incentives"] .finance-table tbody tr:hover td:nth-child(3),
.finance-page[data-page="incentives"] .finance-table tbody tr:hover td:nth-child(4) {
  background: #f2f5fc;
}

/* Skeleton row için de bg override (sticky cell'lerde shimmer arkasında
   beyaz kalsın). */
.finance-page[data-page="incentives"] .finance-table tbody tr.finance-skeleton-row td:nth-child(1),
.finance-page[data-page="incentives"] .finance-table tbody tr.finance-skeleton-row td:nth-child(2),
.finance-page[data-page="incentives"] .finance-table tbody tr.finance-skeleton-row td:nth-child(3),
.finance-page[data-page="incentives"] .finance-table tbody tr.finance-skeleton-row td:nth-child(4) {
  background: #ffffff;
}

/* Incentive Hub KPI grid — 5 metric kartı, finance dashboard'taki
   KPI style'ı (.finance-overview-kpi) reuse eder. Lg ekranlarda 5
   kart yan yana, küçükte wrap. */
/* 5 KPI kartı HER ZAMAN tek satırda, sayfa genişliğine tam sığar.
   repeat(5, minmax(0,1fr)) deterministik: tam 5 eşit kolon =
   container/5, min=0 ile içerik shrink eder → taşma/kesik YOK.
   auto-fit container genişliğini bazen yanlış hesaplayıp taşırıyordu,
   onun yerine bu. */
.incentives-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* Kartlar grid kolonunda shrink edebilsin (içerik min-content'ten
   küçülebilsin → taşmasın). */
.incentives-kpi-grid .finance-overview-kpi {
  min-width: 0;
  padding: 12px 16px;
}
.incentives-kpi-grid .finance-overview-kpi-value {
  font-size: 1.4rem;
  /* Uzun değer ("$712.5K") kartı genişletip taşırmasın */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.incentives-kpi-grid .finance-overview-kpi-label,
.incentives-kpi-grid .finance-overview-kpi-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Incentive Hub filter strip — Status / Şirket / Süreç / Sorumlu /
   Dosya 5 dropdown. OPEX Master filter style'ı kullanır (mevcut
   .opex-master-filter-multi class). Section-header'ın altında flex
   row olarak durur. */
.incentives-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid #edf1f6;
  background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
}

/* Baş etiket — huni ikonu + "Filtreler" + aktif filtre sayısı rozeti. */
.incentives-filters-lead {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-right: 4px;
  margin-right: 2px;
  user-select: none;
}
.incentives-filters-lead svg {
  color: #94a3b8;
}
.incentives-filters-active-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Aktif filtre pill'i — seçim yapıldığında (excluded.size>0) mor vurgu,
   böylece hangi filtrelerin uygulandığı bir bakışta anlaşılır. Sadece
   Incentive Hub'a scope'lu (OPEX Master filtrelerini etkilemez). */
.incentives-filters .opex-master-filter-multi.is-active .opex-master-filter-summary {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #6d28d9;
}
.incentives-filters .opex-master-filter-multi.is-active .opex-master-filter-count {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
  font-weight: 700;
}
.incentives-filters .opex-master-filter-summary {
  border-radius: 9px;
  transition: border-color 120ms ease, background 120ms ease,
    box-shadow 120ms ease, transform 120ms ease;
}
.incentives-filters .opex-master-filter-summary:hover {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

/* Aksiyon grubu — Uygula + Temizle, sağa yaslı + sol ayraç. */
.incentives-filters-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid #e8edf4;
}

/* Uygula butonu — filtreler staged; basınca seçimler uygulanır.
   Bekleyen değişiklik varsa (.is-pending) mor solid + hafif pulse ile
   dikkat çeker; yoksa sade. */
.incentives-filter-apply {
  padding: 7px 18px;
  border: 1px solid #c4b5fd;
  border-radius: 9px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease,
    transform 120ms ease, box-shadow 120ms ease;
}
.incentives-filter-apply:hover {
  background: #ede9fe;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.18);
}
.incentives-filter-apply.is-pending {
  background: #7c3aed;
  color: #ffffff;
  border-color: #7c3aed;
  animation: incentives-apply-pulse 1.8s ease-in-out infinite;
}
@keyframes incentives-apply-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.45); }
  50% { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0); }
}

/* Temizle — sade gri secondary buton. */
.incentives-filter-clear {
  padding: 7px 14px;
  border: 1px solid #e3e8f1;
  border-radius: 9px;
  background: #f5f7fb;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.incentives-filter-clear:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

/* Incentive Hub sortable header — Game Keys ile aynı pattern, tıklayınca
   asc/desc/off cycle, indicator (↕ → ↑ → ↓ → ↕). */
.incentives-sortable {
  cursor: pointer;
  user-select: none;
  transition: background 100ms ease;
}
.incentives-sortable:hover {
  background: #eef2ff !important;
}
.incentives-sort-indicator {
  display: inline-block;
  margin-left: 4px;
  color: #94a3b8;
  font-size: 0.7rem;
  vertical-align: middle;
}
.incentives-sort-indicator.is-active {
  color: #7c3aed;
  font-weight: 700;
}

/* Drag handle (⋮⋮) — kolon sürükleyip yeniden sıralamak için. Inline,
   label'dan önce; layout shift olmasın diye her zaman yer kaplar ama
   sadece th hover'da görünür. */
.incentives-drag-handle {
  display: inline-block;
  width: 12px;
  margin-right: 4px;
  text-align: center;
  cursor: grab;
  user-select: none;
  color: #94a3b8;
  font-size: 11px;
  letter-spacing: -1px;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
}
.incentives-sortable:hover .incentives-drag-handle {
  opacity: 1;
}
.incentives-drag-handle:hover {
  color: #7c3aed;
}
.incentives-drag-handle:active {
  cursor: grabbing;
}
/* Sürükleme sırasında görsel durum */
.incentives-table th.is-drag-source,
#incentives-table-head th.is-drag-source {
  opacity: 0.4;
}
.incentives-table th.is-drag-target,
#incentives-table-head th.is-drag-target {
  box-shadow: inset 3px 0 0 #7c3aed;
  background: rgba(124, 58, 237, 0.06) !important;
}

/* Skeleton loader — All Transactions tablosu için. Her cell'in içinde
   shimmer animasyonlu gri bar. Gerçek data geldiğinde JS innerHTML'i
   replace ediyor. */
.finance-skeleton-bar {
  display: block;
  width: 78%;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #e8edf5 0%,
    #f8fafc 50%,
    #e8edf5 100%
  );
  background-size: 200% 100%;
  animation: finance-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* Description gibi geniş kolonlar için daha uzun bar */
.finance-skeleton-bar-long {
  width: 94%;
}

/* Header'da daha kısa label-style bar */
.finance-skeleton-bar-sm {
  width: 55%;
  height: 10px;
}

@keyframes finance-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton row'lara compact-cell rule'unu override eden padding ver —
   .finance-table tbody td 1px padding yaparak cell'i ince tutuyor
   (gerçek data için doğru), ama skeleton'da bar görünmüyor. Skeleton
   row'larda padding 10px'e çıkıyor → bar rahat görünür.
   Hem All Transactions (data-page="tables") hem Game Key Manager
   (data-page="game-keys") sayfalarında çalışır. */
.finance-table tbody tr.finance-skeleton-row td,
.finance-table thead tr.finance-skeleton-row th {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background: #ffffff !important;
}

/* Skeleton row'larda chip-style chip background da olmasın — 0
   varying chip width'leri görsel olarak bozar. Bar'ı serbest bırak. */
.finance-skeleton-row td {
  vertical-align: middle;
}

/* Multi-row skeleton'larda her satırda bar genişliği biraz değişsin —
   daha doğal/organic görünüm (data row'lar da varying length'tedir). */
.finance-skeleton-row:nth-child(2n) .finance-skeleton-bar { width: 65%; }
.finance-skeleton-row:nth-child(3n) .finance-skeleton-bar { width: 82%; }
.finance-skeleton-row:nth-child(4n) .finance-skeleton-bar { width: 72%; }
.finance-skeleton-row:nth-child(5n) .finance-skeleton-bar { width: 88%; }
/* Description col (3.) her zaman uzun kalsın — nth-child specifity override */
.finance-skeleton-row .finance-skeleton-bar.finance-skeleton-bar-long {
  width: 94%;
}

/* Tablo yüklenme başarısız error state — inline cell içinde merkezde
   ikon + mesaj + retry butonu. Auto-retry'ler tükendikten sonra çıkar. */
.finance-table-error-cell {
  padding: 0 !important;
  background: #ffffff !important;
}

.finance-table-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}

.finance-table-error-icon {
  font-size: 2rem;
  color: #f59e0b;
  line-height: 1;
}

.finance-table-error-title {
  color: #1f2937;
  font-size: 0.95rem;
  font-weight: 700;
}

.finance-table-error-message {
  color: #6b7280;
  font-size: 0.78rem;
  max-width: 480px;
  word-break: break-word;
}

.finance-table-error-retry {
  margin-top: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: 999px;
  background: #7c3aed;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
}

.finance-table-error-retry:hover {
  background: #6d28d9;
  transform: translateY(-1px);
}

.finance-table-error-retry:active {
  transform: translateY(0);
}

/* ✨ Önerilerle Doldur — emerald/teal (AI-like suggestion action).
   Diğer pill'lerle aynı tipografi/shape. */
#finance-suggest-fills-trigger.finance-bq-table-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #047857;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.28);
}

#finance-suggest-fills-trigger.finance-bq-table-link:hover,
#finance-suggest-fills-trigger.finance-bq-table-link:focus-visible {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

/* Modal — full-screen overlay + centered panel */
.finance-suggest-fills-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.finance-suggest-fills-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  animation: finance-suggest-fade-in 160ms ease-out;
}

.finance-suggest-fills-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
  overflow: hidden;
  animation: finance-suggest-pop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes finance-suggest-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes finance-suggest-pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.finance-suggest-fills-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #edf1f6;
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
  color: #064e3b;
}

.finance-suggest-fills-header strong {
  font-size: 0.95rem;
  font-weight: 700;
}

.finance-suggest-fills-summary {
  margin-top: 4px;
  color: #047857;
  font-size: 0.78rem;
  font-weight: 500;
}

.finance-suggest-fills-close {
  border: none;
  background: rgba(6, 78, 59, 0.08);
  color: #064e3b;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  transition: background 100ms ease;
}

.finance-suggest-fills-close:hover {
  background: rgba(6, 78, 59, 0.18);
}

.finance-suggest-fills-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  background: #f9fafb;
}

.finance-suggest-fills-empty {
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
  padding: 40px 24px;
  line-height: 1.6;
}

/* Her öneri bir card — checkbox + description + field rows + meta */
.finance-suggest-fills-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: #ffffff;
  border: 1px solid #e3e8f1;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.finance-suggest-fills-row:hover {
  border-color: #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
}

.finance-suggest-fills-row-check {
  margin-top: 2px;
  accent-color: #10b981;
  cursor: pointer;
  flex-shrink: 0;
}

.finance-suggest-fills-row-body {
  flex: 1;
  min-width: 0;
}

.finance-suggest-fills-desc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.finance-suggest-fills-desc {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  color: #475569;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* Cost / Revenue chip — desc row'unun başında durur, hangi tür
   transaction için öneri verildiğini bir bakışta göster. */
.finance-suggest-fills-class-badge {
  flex-shrink: 0;
  font-size: 0.66rem;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.finance-suggest-fills-fields {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.finance-suggest-fills-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.78rem;
}

.finance-suggest-fills-field-label {
  display: inline-block;
  min-width: 42px;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.finance-suggest-fills-current {
  color: #94a3b8;
  text-decoration: line-through;
  font-size: 0.75rem;
}

.finance-suggest-fills-arrow {
  color: #cbd5e1;
  font-size: 0.78rem;
}

.finance-suggest-fills-suggested {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: #d1fae5;
  color: #047857;
  font-weight: 700;
  font-size: 0.76rem;
}

/* Skip row — öneri verilemeyen field (eksik veri / tutarsız pattern).
   Gri tonlu, kullanıcı niye boş kaldığını anlasın. */
.finance-suggest-fills-field.is-skipped {
  color: #94a3b8;
  opacity: 0.85;
}

.finance-suggest-fills-skip-reason {
  font-style: italic;
  font-size: 0.72rem;
  color: #94a3b8;
}

.finance-suggest-fills-weak-hint {
  color: #b45309;
  font-style: italic;
  font-size: 0.7rem;
  font-weight: 600;
}

.finance-suggest-fills-conf {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
}

.finance-suggest-fills-conf.is-high {
  background: #d1fae5;
  color: #047857;
}

.finance-suggest-fills-conf.is-med {
  background: #fef3c7;
  color: #b45309;
}

.finance-suggest-fills-conf.is-low {
  background: #fee2e2;
  color: #b91c1c;
}

.finance-suggest-fills-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: #64748b;
  font-size: 0.7rem;
}

.finance-suggest-fills-token {
  display: inline-block;
  padding: 1px 6px;
  background: #eef2ff;
  color: #4338ca;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 600;
}

.finance-suggest-fills-basedon {
  color: #94a3b8;
  font-style: italic;
}

.finance-suggest-fills-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  border-top: 1px solid #edf1f6;
  background: #ffffff;
}

.finance-suggest-fills-select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.finance-suggest-fills-select-all input {
  accent-color: #10b981;
}

.finance-suggest-fills-actions {
  display: flex;
  gap: 8px;
}

.finance-suggest-fills-cancel,
.finance-suggest-fills-apply {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease;
  border: 1px solid transparent;
}

.finance-suggest-fills-cancel {
  background: #f1f5f9;
  color: #475569;
}

.finance-suggest-fills-cancel:hover {
  background: #e2e8f0;
}

.finance-suggest-fills-apply {
  background: #10b981;
  color: #ffffff;
}

.finance-suggest-fills-apply:hover {
  background: #059669;
}

/* Show Incomplete Rows — violet (data quality / attention action).
   Toggle pattern: default'ta sade pill (label görünür, ✕ gizli);
   is-active'de solid background + ✕ butonu sağda belirir + label
   strikethrough. */
#finance-show-missing-rows.finance-bq-table-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.28);
}

#finance-show-missing-rows.finance-bq-table-link:hover,
#finance-show-missing-rows.finance-bq-table-link:focus-visible {
  background: #7c3aed;
  color: #ffffff;
  border-color: #7c3aed;
}

/* Default state — ✕ gizli (filter pasif, kapatılacak bir şey yok) */
#finance-show-missing-rows .finance-show-missing-close {
  display: none;
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.9;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 4px;
  transition: background 120ms ease, transform 120ms ease;
}

/* Active state — toggle açık. Solid violet + beyaz label + sağda
   belirgin ✕. !important ve label/close'a explicit color verisi
   eklendi çünkü base .finance-bq-table-link rule'u (violet text) bazı
   durumlarda override etmeye çalışıyor / browser cache karışıyor. */
#finance-show-missing-rows.is-active,
#finance-show-missing-rows.is-active:hover,
#finance-show-missing-rows.is-active:focus-visible {
  background: #7c3aed !important;
  color: #ffffff !important;
  border-color: #7c3aed !important;
  font-weight: 700;
}

#finance-show-missing-rows.is-active .finance-show-missing-label,
#finance-show-missing-rows.is-active .finance-show-missing-close {
  color: #ffffff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

#finance-show-missing-rows.is-active .finance-show-missing-close {
  display: inline-block;
}

#finance-show-missing-rows.is-active .finance-show-missing-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Inline status mesajı — refresh sonucu (counts) burada görünür. */
.finance-section-header .finance-admin-rates-status {
  font-size: 0.78rem;
  color: var(--finance-muted);
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-section-header .finance-admin-rates-status.is-error {
  color: #dc2626;
}

.finance-section-header .finance-admin-rates-status.is-success {
  color: #16a34a;
}

.finance-filter-card {
  padding: 14px 16px;
}

.finance-filter-stack {
  display: grid;
  gap: 10px;
}

.finance-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
}

.finance-filter-grid-secondary {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.finance-filter-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.finance-filter-actions {
  display: grid;
  gap: 4px;
  align-content: end;
  justify-self: stretch;
}

.finance-filter-actions-label {
  visibility: hidden;
  height: 0;
  line-height: 0;
  font-size: 0.68rem;
}

.finance-filter-field span {
  color: #8a94a6;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.finance-filter-input {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e3e8f1;
  border-radius: 8px;
  background: #fcfdff;
  color: #161b26;
  font-size: 0.78rem;
}

.finance-filter-input:focus {
  outline: none;
  border-color: #a78bfa;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.1);
}

.finance-multiselect {
  position: relative;
}

.finance-multiselect[open] {
  z-index: 8;
}

.finance-multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e3e8f1;
  border-radius: 8px;
  background: #fcfdff;
  color: #161b26;
  font-size: 0.78rem;
  cursor: pointer;
  list-style: none;
}

.finance-multiselect-trigger::-webkit-details-marker {
  display: none;
}

.finance-multiselect-trigger::after {
  content: "▾";
  color: #667085;
  font-size: 0.64rem;
}

.finance-multiselect-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  /* Padding ve row gap'leri sıkıştırıldı (kullanıcı isteği — daha
     fazla option ekrana sığsın). Uzun option listelerinde (~30+
     items) önceki 8/6 değerleri çok hava bırakıyordu. */
  gap: 1px;
  max-height: 240px;
  overflow: auto;
  padding: 4px;
  border: 1px solid #e3e8f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.06);
  z-index: 50;
}
.finance-multiselect[open] {
  z-index: 50;
  position: relative;
}

.finance-multiselect-option {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Option satır yüksekliği 24 → 16 (kullanıcı isteği). Checkbox 14px,
     padding 1px → satır toplamı ~16px. Daha kompakt liste. */
  min-height: 16px;
  padding: 1px 4px;
  color: #161b26;
  font-size: 0.74rem;
  line-height: 1.15;
}

.finance-multiselect-option input {
  width: 14px;
  height: 14px;
}
.finance-multiselect-option[hidden] { display: none; }
/* Items filter — search input + custom "Add ..." pseudo option */
.finance-multiselect-search {
  padding: 6px 6px 8px;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 2;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 4px;
}
.finance-multiselect-search input {
  width: 100%;
  font-size: 0.78rem;
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
  background: #f8fafc;
  color: #0f172a;
  font-family: inherit;
  box-sizing: border-box;
}
.finance-multiselect-search input:focus {
  border-color: #7c3aed;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.finance-multiselect-option.is-custom {
  color: #7c3aed;
  font-weight: 600;
  background: #f5f3ff;
  border-radius: 4px;
}
.finance-multiselect-option.is-custom:hover {
  background: #ede9fe;
}

.finance-refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 32px;
  padding: 0 14px;
  border: 1px solid #8b5cf6;
  border-radius: 999px;
  background: #8b5cf6;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(139, 92, 246, 0.2);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.finance-refresh-button:hover {
  background: #7c3aed;
  border-color: #7c3aed;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.28);
}

.finance-refresh-button:active {
  transform: translateY(1px);
}

.finance-refresh-button:disabled {
  opacity: 0.6;
  cursor: wait;
  box-shadow: none;
}

.finance-refresh-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.finance-refresh-button.is-refreshing .finance-refresh-icon {
  animation: finance-spin 800ms linear infinite;
}

@keyframes finance-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.finance-table-wrap {
  position: relative;
  overflow: auto;
  padding: 0 16px 16px;
  background: var(--finance-panel);
  overscroll-behavior: contain;
}

.finance-table {
  width: 100%;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  /* Genel cell font (kullanıcı isteği — 13 → 11 → 10 → 8 → 10 → 12 px).
     Inline edit elementleri kendi explicit font-size'larını koruyor
     (aşağıda ayrıca düşürüldü). */
  font-size: 12px;
  color: #394150;
}

.finance-table th,
.finance-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #e3e8f1;
  text-align: left;
  vertical-align: middle;
  background: #ffffff;
}

.finance-table thead th {
  color: #3a404c;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  background: #f5f7fb;
  background-clip: padding-box;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 #dfe5ef, 0 10px 14px rgba(17, 24, 39, 0.04);
}

.finance-table tbody th,
.finance-table tbody td {
  /* Body cell font (kullanıcı isteği — 13 → 8 → 10 → 12 → 11 px). Game
     Key Manager tablosu ile eşitlemek için 11px'e indirildi. Inline
     edit input/select elementleri zaten 11px. */
  font-size: 11px;
  font-weight: 500;
  color: #394150;
}

.finance-table tbody th {
  position: static;
}

.finance-section-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  /* Section header'da en sağa yapış — başlığın yanında pill'ler (BQ link
     + USD/TRY refresh) sola hizalı, biz sağa hizalıyız. */
  margin-left: auto;
  justify-content: flex-end;
}

.finance-layout-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.76rem;
  font-weight: 700;
}

.finance-layout-status.is-error {
  background: #fef2f2;
  color: #b91c1c;
}

.finance-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  line-height: 1.25;
  cursor: pointer;
}

.finance-sort-button.is-active {
  color: #1f2937;
}

.finance-sort-indicator {
  font-size: 12px;
  color: #8f98aa;
  opacity: 1;
}

.finance-th-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 100%;
}

.finance-table th.is-admin-layout {
  user-select: none;
}

.finance-table th.is-drag-source {
  background: #f5f3ff;
}

.finance-table th.is-drop-target {
  box-shadow: inset 3px 0 0 #7c3aed;
}

.finance-column-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 10px;
}

.finance-column-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #a78bfa;
  font-size: 11px;
  line-height: 1;
  cursor: grab;
  -webkit-user-drag: element;
}

.finance-column-drag-handle:active {
  cursor: grabbing;
}

/* Resize handle — Main Churn table ile aynı görsel pattern (kullanıcı
   isteği). Default transparent, hover'da mor şerit. Cell'in tamamen
   içinde duruyor, komşuya taşmıyor. All Transactions ve Game Key
   Manager tabloları aynı class'ı paylaşır. */
.finance-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background: transparent;
  z-index: 3;
  transition: background 120ms ease;
}

.finance-resize-handle:hover,
.finance-resize-handle.is-resizing {
  background: rgba(124, 58, 237, 0.35);
}

/* Resize sırasında imleç col-resize, metin seçimi kapalı — drag flicker
   olmasın. */
.finance-table.is-col-resizing,
.finance-table.is-col-resizing *,
.game-keys-table.is-col-resizing,
.game-keys-table.is-col-resizing * {
  user-select: none !important;
  cursor: col-resize !important;
}

.finance-page[data-page="tables"] .finance-section-card {
  min-height: 0;
}

/* Pending changes bar — sağ ÜST köşede fixed bildirim (kullanıcı isteği —
   eskiden sayfanın altında sticky idi). Topbar 58px, üstünden 12px boşluk
   bırakıyoruz. Slide-in animation + pulsing dot ile dikkat çekiyor ama
   ferah, content'i bloklamıyor. */
.finance-pending-changes-bar {
  position: fixed;
  top: 70px;
  right: 22px;
  z-index: 200;
  display: block;
  pointer-events: none;
}

/* Yalnızca görünür olduğunda slide-in animation. Class hidden → visible
   geçişinde fire eder; count değişiminde (1 → 2) restart etmez. */
.finance-pending-changes-bar:not(.finance-hidden) {
  animation: pending-bar-slide-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pending-bar-slide-in {
  0%   { transform: translate(24px, -8px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

.finance-pending-changes-inner {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #e5e7eb;
  border-left: 4px solid #f59e0b;
  border-radius: 14px;
  box-shadow:
    0 12px 36px rgba(17, 24, 39, 0.16),
    0 2px 4px rgba(17, 24, 39, 0.06);
  font-size: 13px;
  color: #1f2937;
}

.finance-pending-changes-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  white-space: nowrap;
}

/* Pulse'lu sarı nokta — değişiklik bekliyorum işareti */
.finance-pending-changes-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
}

.finance-pending-changes-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #f59e0b;
  opacity: 0.4;
  animation: pending-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes pending-dot-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.4; }
  50%      { transform: scale(1.6);  opacity: 0; }
}

.finance-pending-changes-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.finance-pending-changes-discard,
.finance-pending-changes-save {
  height: 32px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background 140ms ease,
    color 140ms ease,
    border-color 140ms ease,
    transform 120ms ease,
    box-shadow 140ms ease;
}

/* İptal — outline secondary, primary action'dan daha az dikkat çekici */
.finance-pending-changes-discard {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #6b7280;
}

.finance-pending-changes-discard:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #1f2937;
}

.finance-pending-changes-discard:active {
  background: #f3f4f6;
}

/* Kaydet — primary, mavi, hafif lift hover */
.finance-pending-changes-save {
  background: #1d4ed8;
  border: 1px solid #1d4ed8;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.28);
}

.finance-pending-changes-save:hover {
  background: #1740b3;
  border-color: #1740b3;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(29, 78, 216, 0.36);
}

.finance-pending-changes-save:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.24);
}

.finance-pending-changes-save:disabled,
.finance-pending-changes-discard:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Game Keys table — yatay scroll'lu, dar inputlu, kompakt cell layout.
   Transactions tablosuyla aynı pending-changes + Kaydet akışı kullanır
   ama display açısından kendi tarzı: her cell tam bir input olarak
   render edilir (üzerine tıklayıp direkt yazabilirsin), monospace değil. */
.game-keys-table-wrap {
  /* Sticky thead'in çalışabilmesi için wrap'in kendisi vertical scroll
     container olmalı — yoksa sayfa scroll edilirse thead de scroll'la
     beraber kayboluyor (sticky'ye dayanacak bir kapsayıcı kalmıyor).
     max-height ile wrap'i viewport'a sığdırıyoruz; içerik aşarsa wrap
     içinde scroll. Hesap: topbar (58) + page padding (8 üst + 18 alt) +
     workspace header (~80) + card header (~60) + bar/padding pay (~30)
     ≈ 254 → safe margin ile 220. */
  max-height: calc(100vh - 220px);
  overflow-x: auto;
  overflow-y: auto;
}

.game-keys-table {
  width: max-content;
  min-width: 100%;
}

.game-keys-table th,
.game-keys-table td {
  padding: 4px 6px;
  font-size: 11px;
  /* Overflow guard — cell width küçülünce input/text yan kolona
     taşımasın. min-width:0 grid item gibi cell'in shrink etmesine
     izin verir (kolon resize ile küçüldüğünde overflow düzgün çalışır). */
  overflow: hidden;
  min-width: 0;
}

.game-keys-table thead th {
  white-space: nowrap;
  background: #f5f7fb;
  /* Sticky header — uzun tablo scroll edilince başlıklar üstte kalır
     (kullanıcı isteği). Kapsayan scroll container'ın (.finance-page)
     üst kenarına yapışır. z-index 5: resize handle (z-index 3) ve
     drag handle'ın üstünde, ama pending bar'ın (z-index 200) altında. */
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 1px 0 #e2e8f0;
}

/* Frozen kolonlar — ilk 7 data (+ copy aksiyon) sola yapışır. left
   offset'leri JS inline set eder. z: body frozen (4) < thead (5) <
   thead frozen (6) → dikey scroll'da header üstte, yatay scroll'da
   frozen kolonlar diğerlerinin üstünde. */
/* Adjust App Oluştur — adjust_app_token boş hücredeki buton + modal. */
.game-keys-adjust-cell { display: flex; align-items: center; gap: 6px; }
.game-keys-adjust-cell .game-keys-cell-input { flex: 1 1 auto; min-width: 0; }
.game-keys-adjust-create {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid #c4b5fd;
  border-radius: 7px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 100ms ease;
}
.game-keys-adjust-create:hover { background: #ede9fe; }
.gk-adjust-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gk-adjust-modal {
  width: min(420px, 94vw);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.3);
  overflow: hidden;
}
.gk-adjust-modal-head {
  padding: 14px 18px;
  background: #f5f3ff;
  color: #6d28d9;
  font-weight: 800;
  font-size: 14px;
  border-bottom: 1px solid #ede9fe;
}
.gk-adjust-modal-body { padding: 16px 18px; font-size: 13px; color: #334155; }
.gk-adjust-modal-body p { margin: 0 0 12px; }
.gk-adjust-modal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gk-adjust-modal-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; }
.gk-adjust-modal-list li span { color: #94a3b8; font-size: 11px; font-weight: 600; }
.gk-adjust-modal-list li strong { color: #0f172a; font-size: 12px; text-align: right; word-break: break-word; }
.gk-adjust-modal-err { margin-top: 12px; padding: 8px 10px; background: #fee2e2; border: 1px solid #fca5a5; border-radius: 8px; color: #b91c1c; font-size: 12px; font-weight: 600; }
.gk-adjust-modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid #eef2f7; }
.gk-adjust-cancel { padding: 8px 16px; border: 1px solid #e3e8f1; border-radius: 8px; background: #f5f7fb; color: #475569; font-weight: 700; font-size: 12px; cursor: pointer; }
.gk-adjust-confirm { padding: 8px 18px; border: 1px solid #7c3aed; border-radius: 8px; background: #7c3aed; color: #fff; font-weight: 800; font-size: 12px; cursor: pointer; }
.gk-adjust-confirm:disabled { background: #cbd5e1; border-color: #cbd5e1; cursor: default; }

.game-keys-table td.gk-frozen {
  position: sticky;
  z-index: 4;
  /* OPAK olmalı — is-filled (yarı saydam yeşil) ezmesin, aksi halde
     arkadan kayan kolonların metni frozen hücrede görünür (çakışma). */
  background: #ffffff !important;
}
.game-keys-table thead th.gk-frozen {
  z-index: 6;
}
.game-keys-table tbody tr:hover td.gk-frozen {
  background: #f8fafc !important;
}
.game-keys-table td.gk-frozen.is-dirty {
  background: #fef9c3 !important; /* dirty sarısı frozen'da da görünsün */
}
.game-keys-table .gk-frozen-last {
  box-shadow: 6px 0 8px -4px rgba(15, 23, 42, 0.18);
}
.game-keys-table thead th.gk-frozen-last {
  box-shadow: 6px 0 8px -4px rgba(15, 23, 42, 0.18), 0 1px 0 #e2e8f0;
}

.game-keys-table td[data-game-keys-col="__delete__"] {
  width: 32px;
  padding: 4px 2px;
  text-align: center;
}

/* Row action kolonu (en sol — copy) — header'da boş, satırlarda
   ikon butonu. delete kolonu ile aynı genişlik/padding pattern. */
.game-keys-table th.game-keys-row-action-th,
.game-keys-table td.game-keys-row-action-cell {
  width: 78px;
  padding: 4px 4px;
  text-align: center;
}
/* İki buton yan yana — td'yi flex YAPMA (tablo layout'u + sticky header bozulur),
   iç div flex olsun. */
.game-keys-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.game-keys-copy-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.game-keys-copy-btn:hover {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.game-keys-copy-btn:active {
  background: #dbeafe;
}

/* Dolu hücreler için çok hafif yeşil tint (kullanıcı isteği — boş cell
   hangileri net görünsün diye). created_at hep dolu, dahil değil. */
.game-keys-table td.is-filled {
  background: rgba(34, 197, 94, 0.045);
}

/* Read-only timestamp cell (created_at / updated_at) — input değil,
   plain span. Hover'da arka plan değişmez, edit mode yok. Compact
   monospace-ish görünüm okumayı kolaylaştırıyor. */
.game-keys-readonly-cell {
  display: inline-block;
  width: 100%;
  padding: 0 8px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #475063;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-keys-cell-input {
  /* Width 100% — input cell'e fit eder (eskiden 220px fixed'ti, cell
     daha dar olduğunda input yan kolona taşıyordu). box-sizing border-box
     ile padding genişlik içinde sayılıyor. */
  width: 100%;
  box-sizing: border-box;
  height: 24px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #1f2937;
  font: inherit;
  font-size: 11px;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
}

.game-keys-cell-input:hover {
  border-color: #d8dfeb;
  background: #ffffff;
}

.game-keys-cell-input:focus {
  border-color: #8b5cf6;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.14);
}

/* Publish Company select — renkli chip görünümünde (kullanıcı isteği).
   Native select stili kaldırıldı, padding/border-radius/font ile pill
   görünümü. data-publisher-value attribute'una göre publisher başına
   farklı renk; bilinmeyen publisher'lar neutral gray default'una düşer. */
.game-keys-company-select {
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  text-align-last: center;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
  /* Default — neutral gray, boş veya tanımsız publisher için */
  background: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
}

.game-keys-company-select[data-publisher-value="voyager"] {
  background: #eef2ff;
  color: #4338ca;
  border-color: #c7d2fe;
}

.game-keys-company-select[data-publisher-value="migmig"] {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

.game-keys-company-select[data-publisher-value="milkyway"] {
  background: #ecfeff;
  color: #0e7490;
  border-color: #a5f3fc;
}

.game-keys-company-select[data-publisher-value="spacetime"] {
  background: #faf5ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}

.game-keys-company-select[data-publisher-value="event horizon"] {
  background: #fdf2f8;
  color: #be185d;
  border-color: #fbcfe8;
}

.game-keys-company-select[data-publisher-value="shires ai"],
.game-keys-company-select[data-publisher-value="shiresai"] {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

.game-keys-company-select:hover {
  filter: brightness(0.97);
}

.game-keys-company-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Platform select — IOS / AND için renkli chip görünümü. Native
   <select> ama görsel olarak filled rounded chip. data-platform-value
   attribute'undan renk değişir; stash handler change'de attribute'u
   güncel tutar. */
.game-keys-platform-select {
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  text-align-last: center;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0 10px;
  cursor: pointer;
  /* Default (boş value) — açık gri pill */
  background: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
}

.game-keys-platform-select[data-platform-value="IOS"] {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #93c5fd;
}

.game-keys-platform-select[data-platform-value="AND"] {
  background: #ecfdf5;
  color: #047857;
  border-color: #6ee7b7;
}

.game-keys-platform-select:hover {
  filter: brightness(0.97);
}

.game-keys-platform-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.game-keys-cell-input.is-dirty {
  border-color: #f4c430;
  background: #fffaf0;
}

.game-keys-cell-input.is-save-error {
  border-color: #dc2626;
  background: #fef2f2;
}

.game-keys-table td.is-dirty {
  background: rgba(244, 196, 48, 0.12);
  box-shadow: inset 3px 0 0 #f4c430;
}

.game-keys-delete-btn {
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.game-keys-delete-btn:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

/* Çift tıkla-kopyala flash — satıra yeşil arka plan kısa bir an gelir,
   sonra default'a geri döner. Animasyon değil basit transition + class
   toggle (JS 700ms sonra class'ı çıkarır). */
.game-keys-table tr.game-keys-row-copied td {
  background: rgba(34, 197, 94, 0.15) !important;
  transition: background 200ms ease;
}

/* Search input — section header'da BQ link + Yeni Game pill'lerinin
   yanında. flex-grow ile kalan alanı doldurur, max-width ile aşırı
   geniş gitmesin diye kısıtlanır. */
.game-keys-search-input {
  flex: 1 1 240px;
  max-width: 320px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #d8dfeb;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2937;
  font-size: 12px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.game-keys-search-input:focus {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.game-keys-search-input::placeholder {
  color: #94a3b8;
}

/* Sortable column header — kursorla cursor pointer, hover'da rengi
   koyulaşır, sort indicator (↕ / ↑ / ↓) yanında. */
.game-keys-table th.game-keys-sortable {
  cursor: pointer;
  user-select: none;
  /* position: relative değil → sticky (genel thead th kuralı). relative,
     daha yüksek specificity ile sticky'i eziyordu → header yapışmıyordu.
     sticky de absolute çocuklar (drag/resize handle) için containing block. */
  position: sticky;
  top: 0;
  padding-right: 18px;
  padding-left: 18px; /* drag handle için yer aç */
}

/* Drag handle — kolonu yeniden sıralamak için tutamak. Default opacity
   düşük, header hover'da görünür hale gelir (gürültü olmasın). */
.game-keys-table th .game-keys-drag-handle {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  color: #94a3b8;
  font-size: 11px;
  letter-spacing: -1px;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
}

.game-keys-table th:hover .game-keys-drag-handle,
.game-keys-table th .game-keys-drag-handle:focus-visible {
  opacity: 1;
}

.game-keys-table th .game-keys-drag-handle:hover {
  color: #1d4ed8;
}

.game-keys-table th .game-keys-drag-handle:active {
  cursor: grabbing;
}

/* Drag-in-progress visual states */
.game-keys-table th.is-drag-source {
  opacity: 0.4;
}

.game-keys-table th.is-drag-target {
  box-shadow: inset 3px 0 0 #1d4ed8;
  background: rgba(29, 78, 216, 0.06);
}

.game-keys-table th.game-keys-sortable:hover {
  color: #1d4ed8;
}

.game-keys-table th .game-keys-sort-indicator {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: #94a3b8;
  pointer-events: none;
}

/* Platform link icon (↗) — sadece header'da, kolon label'ından sonra.
   Hover'da mavi. Yeni sekmede platform dashboard'unu açar. Sort
   header'a kadar bubble etmez (JS'de filter ediliyor). */
.game-keys-table th .game-keys-platform-link {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
  transition: color 120ms ease, background 120ms ease;
}

.game-keys-table th .game-keys-platform-link:hover {
  color: #1d4ed8;
  background: rgba(29, 78, 216, 0.08);
}

.game-keys-table th.game-keys-sortable.is-sort-active .game-keys-sort-indicator {
  color: #1d4ed8;
  font-weight: 700;
}

/* OPEX MASTER RESMİ — Tableau OPEX dashboard'unun port'u. Üstte siyah
   şeritli başlık, altta sol tarafta 2 yan yana chart + sağ tarafta 3
   multi-select filter column. Compact ve high-density. */
/* Finance Dashboard skeleton loader — page açılışında render edilmeden
   önce KPI / chart / Top Categories alanlarında shimmer'li placeholder
   blokları gösterir. Product AI sayfasındaki pa-skel-* pattern'ı ile
   aynı mantık ama Finance Dashboard'a özel boyutlar/sınıflar. JS
   render fonksiyonları innerHTML/textContent ile içeriği değiştirdiği
   için skeleton blokları natural olarak temizlenir. */
.fin-skel-block,
.fin-skel-bar {
  position: relative;
  background: #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: inline-block;
}

.fin-skel-block::after,
.fin-skel-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: fin-skel-shimmer 1.5s ease-in-out infinite;
}

@keyframes fin-skel-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* KPI value placeholder — header'da 2.4rem civarı yüksek text yerine
   genişlik 90px, yükseklik 32px gri pill. */
.fin-skel-kpi-value {
  width: 96px;
  height: 32px;
  border-radius: 6px;
  vertical-align: middle;
}

/* Chart host'larda tam blok kaplayan skeleton — height: 100% ile chart
   card'ın kalan dikey alanını doldurur. */
.fin-skel-chart {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  border-radius: 8px;
}

/* Top Categories skeleton: liste şeklinde 8 satır, her satır label +
   bar + value. JS render olunca innerHTML değişip skeleton kaybolur. */
.fin-skel-cat-list {
  display: grid;
  gap: 8px;
  padding: 16px 20px;
}

.fin-skel-cat-row {
  display: grid;
  grid-template-columns: 110px 1fr 60px;
  gap: 10px;
  align-items: center;
}

.fin-skel-cat-row .fin-skel-bar {
  height: 12px;
}

/* Stagger animation — monoton görünmesin diye her satır biraz gecikmeli */
.fin-skel-cat-list > :nth-child(2) .fin-skel-bar::after { animation-delay: 0.1s; }
.fin-skel-cat-list > :nth-child(3) .fin-skel-bar::after { animation-delay: 0.2s; }
.fin-skel-cat-list > :nth-child(4) .fin-skel-bar::after { animation-delay: 0.3s; }
.fin-skel-cat-list > :nth-child(5) .fin-skel-bar::after { animation-delay: 0.4s; }
.fin-skel-cat-list > :nth-child(6) .fin-skel-bar::after { animation-delay: 0.5s; }
.fin-skel-cat-list > :nth-child(7) .fin-skel-bar::after { animation-delay: 0.6s; }
.fin-skel-cat-list > :nth-child(8) .fin-skel-bar::after { animation-delay: 0.7s; }

.opex-master-card {
  /* Parent .finance-section-card grid-template-rows: auto minmax(0,1fr)
     ile body'yi 1fr'e zorluyor — sonuç olarak chart-host'un min-height:
     220px'ı görmezden gelinip body 0'a düşüyor (overview sayfasında
     auto auto auto auto grid row'larda height referansı yok). Block
     layout'a alıp her child kendi natural height'ı ile akıyor; chart
     host'un min-height'ı tekrar etkili. */
  display: block;
  grid-template-rows: none;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.opex-master-title-bar {
  background: #1a1a1a;
  color: #ffffff;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.opex-master-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 12px;
  padding: 12px 14px;
}

.opex-master-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-width: 0;
}

.opex-master-chart-card {
  border: 1px solid #e6e8ec;
  border-radius: 8px;
  padding: 10px 6px 6px;
  background: #fdfdfd;
  min-width: 0;
  /* Explicit height — bazı browser/cascade kombinasyonlarında
     min-height: 220px chart-host'ta yetmiyor (parent grid 1fr'e
     zorluyorsa collapsing). Kart yüksekliğini sabitle, host onun
     içinde kalan boşluğu kaplar. */
  display: flex;
  flex-direction: column;
  height: 260px;
}

.opex-master-chart-title {
  color: #e85d75;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
  flex: 0 0 auto;
}

.opex-master-chart-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opex-master-chart-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}

.opex-master-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-content: start;
}

/* Overview filter strip — KPI ile chart'lar arasında ince filter
   dropdown'ları satırı. Eski OPEX MASTER kartı yerini aldı; daha az
   yer kaplıyor. */
.finance-overview-filter-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.finance-overview-filter-strip .opex-master-filter-multi {
  min-width: 180px;
  flex: 0 1 220px;
}

/* Filter dropdown — <details> tabanlı popup. Trigger (summary) compact
   bir pill; tıklayınca altında absolute-pozisyonlu menü açılır. Aynı
   anda 3 filter açık olabilir (her details bağımsız). */
.opex-master-filter-multi {
  position: relative;
  font-size: 11px;
}

.opex-master-filter-multi[open] {
  z-index: 60;
}

.opex-master-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: #f5f7fb;
  border: 1px solid #e3e8f1;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 600;
  color: #1f2937;
  transition: border-color 120ms ease, background 120ms ease;
}

.opex-master-filter-summary::-webkit-details-marker {
  display: none;
}

.opex-master-filter-summary::after {
  content: "▾";
  color: #667085;
  font-size: 10px;
  margin-left: auto;
  transition: transform 150ms ease;
}

.opex-master-filter-multi[open] .opex-master-filter-summary {
  border-color: #1d4ed8;
  background: #eff6ff;
}

.opex-master-filter-multi[open] .opex-master-filter-summary::after {
  transform: rotate(180deg);
}

.opex-master-filter-summary:hover {
  border-color: #cbd5e1;
}

.opex-master-filter-label-text {
  flex-shrink: 0;
}

.opex-master-filter-count {
  font-weight: 500;
  font-size: 10px;
  color: #667085;
  padding: 1px 6px;
  background: #ffffff;
  border-radius: 999px;
  border: 1px solid #e3e8f1;
}

.opex-master-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid #e3e8f1;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
  padding: 8px;
  z-index: 60;
}

.opex-master-filter-list {
  max-height: 360px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}

.opex-master-filter-option:hover {
  background: rgba(29, 78, 216, 0.06);
  color: #1d4ed8;
}

/* Non-admin için disable görüntüsü — checkbox grileşir, satır cursor
   "not-allowed" olur, hover tint kaybolur. Admin'in seçtiği state
   görünür kalır, sadece tıklama kapalı. */
.opex-master-filter-option input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.opex-master-filter-option:has(input[type="checkbox"]:disabled) {
  cursor: not-allowed;
}

.opex-master-filter-option:has(input[type="checkbox"]:disabled):hover {
  background: transparent;
  color: #1f2937;
}

.opex-master-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1f2937;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Tümünü seç" satırı — listenin en üstünde, alt kenarda separator +
   bold, normal option'lardan ayrışsın. */
.opex-master-filter-option-all {
  font-weight: 700;
  color: #0f172a;
  border-bottom: 1px solid #edf1f6;
  border-radius: 6px 6px 0 0;
  margin-bottom: 2px;
}

.opex-master-filter-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #1d4ed8;
}

.opex-master-filter-option .opex-master-stack-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 2px;
}

.opex-master-filter-option:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #1f2937;
}

.opex-master-bar {
  transition: opacity 120ms ease;
}

.opex-master-bar:hover {
  opacity: 0.85;
}

.opex-master-stack-legend {
  display: grid;
  gap: 2px;
  align-content: start;
  font-size: 10px;
  padding-left: 4px;
}

.opex-master-stack-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opex-master-stack-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Cell-level dirty indicator — bir hücrede pending değişiklik varsa hem
   editable element'in (input/select) etrafında hem de container td'de
   sarı sol-kenar belirir. Save bar'da görünen sayım bu hücrelerle birebir. */
.finance-page[data-page="tables"] .finance-table td.is-dirty,
.finance-page[data-page="tables"] .finance-table th.is-dirty {
  background: rgba(244, 196, 48, 0.12);
  box-shadow: inset 3px 0 0 #f4c430;
}

.finance-cell-select.is-dirty,
.finance-cell-combo-input.is-dirty,
.finance-cell-rate-input.is-dirty {
  border-color: #f4c430;
  background: #fffaf0;
}

/* Save sırasında editable element'in başarısız olduğunu işaretle —
   sarıdan kırmızıya geçer, kullanıcı tekrar denenmesi gerektiğini görür. */
.finance-cell-select.is-save-error,
.finance-cell-combo-input.is-save-error,
.finance-cell-rate-input.is-save-error {
  border-color: #dc2626;
  background: #fef2f2;
}

.finance-page[data-page="tables"] .finance-table-wrap {
  /* Horizontal scroll AÇIK — kullanıcı isteği: tablo viewport'a
     sıkıştırılmasın, geniş set edilince horizontal scroll çıksın.
     Vertical scroll yine wrap içinde. max-height: viewport'a sığacak
     pencere. */
  height: auto;
  max-height: calc(100vh - 240px);
  overflow-x: auto;
  overflow-y: auto;
}
/* Tablo genişliği — admin slider --finance-table-width-pct var'ını
   set ediyor (100-280%). 100%'de wrap'e fit eder, >100% horizontal
   scroll çıkar. Default 100% (root'ta var tanımsızsa fallback). */
.finance-page[data-page="tables"] .finance-table {
  min-width: var(--finance-table-width-pct, 100%);
  width: var(--finance-table-width-pct, 100%);
  table-layout: fixed;
}

.finance-page[data-page="tables"] .finance-table th,
.finance-page[data-page="tables"] .finance-table td {
  min-width: 0;
  /* Cell yüksekliği daraltıldı (kullanıcı isteği):
       padding 1 (üst) + 1 (alt) = 2
       text 12 (font 12px × line-height 1.0)
       border 1 (border-bottom)
     → 2 + 12 + 1 = 15 px.
     Inline edit elementleri (combo/rate input) kendi 24px height'leri ile
     hücreyi 24+2+1=27px'e zorlayabilir; o satırlar 24px civarına oturur. */
  padding-top: 1px;
  padding-bottom: 1px;
  line-height: 1.0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Cell value'ları her zaman ortalı (header dahil) — tabular bir his
     ve göz takibinde kolay; özellikle multi-line header'larla
     (Usd Try Rate gibi) hizalı duruyor. */
  text-align: center;
  vertical-align: middle;
}

.finance-page[data-page="tables"] .finance-table thead th {
  /* Header text iki satıra düşebilsin (multi-word başlıklarda okunaklı).
     overflow-wrap:break-word SADECE bir kelime cell genişliğine sığmadığı
     anda mid-word break yapar — daha önce kullandığımız `anywhere` cell
     dolu olsa bile her karaktere bölüyordu, "Bank Sync Datetime" gibi
     başlıklar 1-karakter genişliğine düşmüş gibi görünüyordu. */
  white-space: normal;
  overflow-wrap: break-word;
}

/* Description, Company, Currency, Bank Sync Datetime, Amount ve
   Classification kolonları — sola yaslı görüntüleniyor (kullanıcı
   isteği). Chip içeren kolonlar (Company / Currency / Classification)
   varying width'lerden dolayı center'da görsel kayma yaratıyordu →
   chip'ler hep cell'in sol kenarından başlasın. !important: yukarıdaki
   genel "tbody td → center" kuralının kesin override'ı. */
.finance-page[data-page="tables"] .finance-table th[data-preview-col="description"],
.finance-page[data-page="tables"] .finance-table td[data-preview-col="description"],
.finance-page[data-page="tables"] .finance-table th[data-preview-col="company_label"],
.finance-page[data-page="tables"] .finance-table td[data-preview-col="company_label"],
.finance-page[data-page="tables"] .finance-table th[data-preview-col="currency"],
.finance-page[data-page="tables"] .finance-table td[data-preview-col="currency"],
.finance-page[data-page="tables"] .finance-table th[data-preview-col="bank_sync_datetime_raw"],
.finance-page[data-page="tables"] .finance-table td[data-preview-col="bank_sync_datetime_raw"],
.finance-page[data-page="tables"] .finance-table th[data-preview-col="amount"],
.finance-page[data-page="tables"] .finance-table td[data-preview-col="amount"],
.finance-page[data-page="tables"] .finance-table th[data-preview-col="usd_amount"],
.finance-page[data-page="tables"] .finance-table td[data-preview-col="usd_amount"],
.finance-page[data-page="tables"] .finance-table th[data-preview-col="transaction_classification"],
.finance-page[data-page="tables"] .finance-table td[data-preview-col="transaction_classification"] {
  text-align: left !important;
  padding-left: 12px;
}

/* Chip'ler (.finance-value-badge) inline-flex olduğu için bazı
   browser/table-layout:fixed kombinasyonlarında text-align: left'i
   tam respond etmiyor — chip görsel olarak cell ortasında kalıyor.
   Burada chip'i block-level flex + width: max-content yapıp cell'in
   sol kenarına margin-right: auto ile sabitliyorum. Bu garantili. */
.finance-page[data-page="tables"] .finance-table tbody td[data-preview-col="company_label"] .finance-value-badge,
.finance-page[data-page="tables"] .finance-table tbody td[data-preview-col="currency"] .finance-value-badge,
.finance-page[data-page="tables"] .finance-table tbody td[data-preview-col="transaction_classification"] .finance-value-badge {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-right: auto;
  margin-left: 0;
}

.finance-page[data-page="tables"] .finance-table th:first-child,
.finance-page[data-page="tables"] .finance-table td:first-child {
  min-width: 0;
}

.finance-page[data-page="tables"] .finance-table tbody tr:hover td,
.finance-page[data-page="tables"] .finance-table tbody tr:hover th {
  background: #f2f5fc;
}

.finance-page[data-page="tables"] .finance-table tbody tr:hover .finance-cell-select,
.finance-page[data-page="tables"] .finance-table tbody tr:hover .finance-cell-combo-input {
  border-color: #c9d0e0;
}

.finance-page[data-page="tables"] .finance-table tbody tr:nth-child(even) td,
.finance-page[data-page="tables"] .finance-table tbody tr:nth-child(even) th {
  background: #fcfdff;
}

.finance-page[data-page="tables"] .finance-table tbody tr:nth-child(even):hover td,
.finance-page[data-page="tables"] .finance-table tbody tr:nth-child(even):hover th {
  background: #f2f5fc;
}

.finance-table-wrap-scroll {
  position: relative;
  scroll-behavior: smooth;
}

.finance-table-wrap-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.finance-table-wrap-scroll::-webkit-scrollbar-thumb {
  background: #d8dfeb;
  border-radius: 999px;
  border: 2px solid #ffffff;
}

.finance-table-wrap-scroll::-webkit-scrollbar-thumb:hover {
  background: #b8c2d4;
}

.finance-table-wrap-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.finance-value-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 8px;
  max-width: 100%;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-value-badge.is-cost {
  background: #fee2e2;
  color: #b91c1c;
}

.finance-value-badge.is-revenue {
  background: #dcfce7;
  color: #15803d;
}

.finance-value-badge.is-neutral {
  background: #eef2ff;
  color: #4c1d95;
}

.finance-value-badge.is-currency {
  justify-content: center;
  gap: 6px;
  min-width: 58px;
  padding: 2px 10px;
  background: #f3f4f6;
  color: #374151;
}

/* Company chip — Game Key Manager'daki Publish Company palette ile
   birebir aynı. data-company-value attribute'una göre publisher başına
   farklı renk; bilinmeyen company'ler neutral grey fallback. */
.finance-value-badge.is-company {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid transparent;
  padding: 2px 10px;
  font-weight: 600;
}

.finance-value-badge.is-company[data-company-value="voyager"] {
  background: #eef2ff;
  color: #4338ca;
  border-color: #c7d2fe;
}

.finance-value-badge.is-company[data-company-value="migmig"] {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

.finance-value-badge.is-company[data-company-value="milkyway"] {
  background: #ecfeff;
  color: #0e7490;
  border-color: #a5f3fc;
}

.finance-value-badge.is-company[data-company-value="spacetime"] {
  background: #faf5ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}

.finance-value-badge.is-company[data-company-value="event horizon"] {
  background: #fdf2f8;
  color: #be185d;
  border-color: #fbcfe8;
}

.finance-value-badge.is-company[data-company-value="shires ai"],
.finance-value-badge.is-company[data-company-value="shiresai"] {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

.finance-value-badge.is-currency img,
.finance-value-badge.is-currency svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.finance-value-badge.is-cost,
.finance-value-badge.is-revenue,
.finance-value-badge.is-neutral {
  padding: 3px 10px;
  min-height: 20px;
  letter-spacing: 0.01em;
}

.finance-cell-placeholder {
  color: #b6bdcc;
  font-weight: 400;
}

.finance-cell-select {
  width: 100%;
  height: 20px;
  padding: 0 22px 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #475063;
  font: inherit;
  font-size: 11px;
  outline: none;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.finance-cell-select:hover {
  border-color: #d8dfeb;
  background: #ffffff;
  color: #1f2937;
}

.finance-cell-select:focus {
  border-color: #8b5cf6;
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.14);
}

.finance-cell-select[data-has-value="false"] {
  color: #c3c9d7;
}

.finance-cell-select[data-has-value="false"]:hover,
.finance-cell-select[data-has-value="false"]:focus {
  color: #475063;
}

/* Native <input list=...> combobox — eski cell select'in yerine geçti.
   Tipi text input ama datalist ile suggestion açıyor. Görsel olarak
   select ile aynı: hücrede normalde flat, hover/focus'ta border + bg
   beliriyor. cursor: text — typeable olduğunu belli ediyor. */
.finance-cell-combo-input {
  width: 100%;
  height: 20px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #475063;
  font: inherit;
  font-size: 11px;
  outline: none;
  cursor: text;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.finance-cell-combo-input:hover {
  border-color: #d8dfeb;
  background: #ffffff;
  color: #1f2937;
}
.finance-cell-combo-input:focus {
  border-color: #8b5cf6;
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.14);
}
.finance-cell-combo-input[data-has-value="false"] {
  color: #c3c9d7;
}
.finance-cell-combo-input[data-has-value="false"]:hover,
.finance-cell-combo-input[data-has-value="false"]:focus {
  color: #475063;
}
.finance-cell-combo-input::placeholder {
  color: #c3c9d7;
}

/* Chip-style combo input + select — Items / Main Category /
   Sub-Category / Invoice Month gibi dropdown kolonlar value'lu
   olduklarında renkli pill gibi görünsünler. Background/color/border
   inline style ile basılıyor (hash(value) → palette). Buradaki rule
   chip'in shape'ini ve font weight'ini tanımlar. */
.finance-cell-combo-input.is-chip,
.finance-cell-select.is-chip {
  border-radius: 999px;
  border-style: solid;
  border-width: 1px;
  padding: 0 10px;
  font-weight: 600;
  width: max-content;
  max-width: 100%;
  cursor: pointer;
}
/* Hover/focus'ta chip'in border ve shadow'u keskinleşir ama renk
   (bg/color) inline style'dan geliyor. Combo'nun edit affordance'ını
   korumak için focus'ta cursor: text. */
.finance-cell-combo-input.is-chip:hover,
.finance-cell-select.is-chip:hover {
  filter: brightness(0.97);
}
.finance-cell-combo-input.is-chip:focus {
  cursor: text;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.22);
}
.finance-cell-select.is-chip:focus {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.22);
}
/* Native <select>'in default chevron'unu chip içinde göstermek için
   padding-right'i biraz büyüt (chevron için yer aç). */
.finance-cell-select.is-chip {
  padding-right: 22px;
}

.finance-cell-rate-input {
  width: 100%;
  height: 20px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #475063;
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  /* USD→TRY rate hücreleri ortalı (kullanıcı isteği) — diğer numerik
     kolonlar (Amount 🇹🇷 / Amount 🇺🇸) zaten center'da, rate de aynı
     hizada olsun. */
  text-align: center;
  outline: none;
  cursor: text;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
  -moz-appearance: textfield;
}

.finance-cell-rate-input::-webkit-outer-spin-button,
.finance-cell-rate-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.finance-cell-rate-input::placeholder {
  color: #b6bdcc;
}

.finance-cell-rate-input:hover {
  border-color: #d8dfeb;
  background: #ffffff;
  color: #1f2937;
}

.finance-cell-rate-input:focus {
  border-color: #8b5cf6;
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.14);
}

.finance-cell-rate-input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}


@media (max-width: 1100px) {
  .finance-filter-grid {
    grid-template-columns: 1fr;
  }

  .finance-header-actions {
    width: 100%;
    justify-content: space-between;
  }
}

.finance-muted {
  color: var(--finance-muted);
}

.finance-dataset-list {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
  overflow: auto;
}

.finance-dataset-item {
  padding: 16px 18px;
  border: 1px solid #eef2f8;
  border-radius: 18px;
  background: #fafbff;
}

.finance-dataset-item strong {
  display: block;
  font-size: 0.98rem;
}

.finance-dataset-item p {
  margin: 8px 0 0;
  color: var(--finance-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.finance-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.finance-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 0.78rem;
  font-weight: 700;
}

.finance-admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-height: 0;
}

.finance-admin-card {
  padding: 22px 24px;
}

.finance-admin-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-access-required {
  display: grid;
}

.admin-access-required-card {
  max-width: 640px;
  padding: 28px 30px;
  border: 1px solid var(--finance-panel-border);
  border-radius: 26px;
  background: var(--finance-panel);
  box-shadow: var(--finance-shadow);
}

.admin-access-required-card strong {
  display: block;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

.admin-access-required-card p {
  margin: 10px 0 0;
  color: #6a7383;
  font-size: 0.96rem;
  line-height: 1.6;
}

.admin-card {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  padding: 18px 20px 20px;
  background: var(--finance-panel);
  border: 1px solid var(--finance-panel-border);
  border-radius: 26px;
  box-shadow: var(--finance-shadow);
}

.admin-card-header {
  display: grid;
  gap: 4px;
}

.admin-card-header strong {
  color: #161b26;
  font-size: 1rem;
}

.admin-card-header span {
  color: #6a7383;
  font-size: 0.9rem;
}

/* USD/TRY rate sync card — admin panel'de tek bir refresh butonu +
   sonuç status mesajı + cron schedule notu. Compact, info-card stili. */
#finance-admin-rates-card {
  grid-template-rows: auto auto auto;
}

.finance-admin-rates-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.finance-admin-rates-button {
  height: 36px;
  padding: 0 16px;
  border: 1px solid #1d4ed8;
  background: #1d4ed8;
  color: #ffffff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.finance-admin-rates-button:hover {
  background: #1740b3;
  border-color: #1740b3;
}

.finance-admin-rates-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.finance-admin-rates-status {
  font-size: 13px;
  color: #475063;
}

.finance-admin-rates-status.is-error {
  color: #dc2626;
}

.finance-admin-rates-status.is-success {
  color: #16a34a;
}

.finance-admin-rates-note {
  margin: 0;
  font-size: 0.82rem;
  color: #6a7383;
}

.admin-allow-form {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-email-input {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d8dfeb;
  border-radius: 12px;
  background: #fff;
  color: #161b26;
}

.admin-allow-submit {
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: #11151d;
  color: #fff;
  font-weight: 700;
}

.admin-allow-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-status {
  min-height: 20px;
  color: #6a7383;
  font-size: 0.9rem;
}

.admin-status.is-error {
  color: #b93838;
}

.admin-status.is-success {
  color: #1d6f42;
}

.admin-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid #e5e9f1;
  border-radius: 14px;
  background: #fff;
}

.admin-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  vertical-align: middle;
  font-size: 0.9rem;
}

.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8faff;
  color: #445066;
  font-weight: 700;
}

.th-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  color: #6b7280;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sort-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: #9aa3b3;
  font-size: 0.72rem;
  opacity: 0.85;
}

.sort-button.is-active {
  color: #4b6fff;
}

.admin-email-cell {
  color: #161b26;
  font-weight: 700;
}

.admin-muted {
  color: #7b8596;
}

.admin-role-badge,
.admin-access-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-role-badge {
  background: #eef3ff;
  color: #3557ff;
}

.admin-role-badge.is-user {
  background: #f2f4f8;
  color: #566072;
}

.admin-access-badge.is-allowed {
  background: #e8f7ea;
  color: #1d6f42;
}

.admin-access-badge.is-blocked {
  background: #fdecec;
  color: #b93838;
}

.admin-row-actions {
  display: flex;
  gap: 8px;
}

.admin-page-access-dropdown {
  position: relative;
}

.admin-page-access-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  min-width: 168px;
  padding: 0 12px;
  border: 1px solid #dde4ef;
  border-radius: 10px;
  background: #f8faff;
  color: #2d3748;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  /* Best practice — hover'da hafif lift + border accent (interactive
     olduğu net), focus'ta klavye-erişilebilirlik için outline ring. */
  transition: background 120ms ease, border-color 120ms ease,
              box-shadow 120ms ease;
}

.admin-page-access-trigger:hover {
  background: #fff;
  border-color: #c5cee0;
}

.admin-page-access-trigger:focus-visible {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

.admin-page-access-trigger::-webkit-details-marker {
  display: none;
}

/* Summary text — truncate ile uzun string'i ".." ile kırp,
   trigger genişliğini taşırmasın. */
.admin-page-access-summary-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Seçili sayfa sayısı rozeti — N of 8 partial state'inde görünür.
   Mor (page-access kategorisi rengi). */
.admin-page-access-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

.admin-page-access-chevron {
  color: #7a8496;
  font-size: 12px;
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.admin-page-access-dropdown[open] .admin-page-access-trigger {
  border-color: #cfd8e8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.admin-page-access-dropdown[open] .admin-page-access-chevron {
  transform: rotate(180deg);
}

.admin-page-access-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  display: grid;
  gap: 4px;
  min-width: 240px;
  padding: 8px;
  border: 1px solid #dde4ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12);
  /* Best practice — fade + slight slide animasyon. Aniden popup gibi
     fırlamasın, smooth açılsın. */
  animation: admin-page-access-menu-in 140ms ease-out;
}

@keyframes admin-page-access-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Menu header — başlık + Clear all linkini barındırır. */
.admin-page-access-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 6px;
  border-bottom: 1px solid #edf1f6;
  margin-bottom: 4px;
}

.admin-page-access-menu-title {
  color: #6b7280;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-page-access-clear {
  border: none;
  background: transparent;
  color: #7c3aed;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 100ms ease;
}

.admin-page-access-clear:hover {
  background: #f5f3ff;
}

.admin-page-access-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  color: #445066;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  /* Best practice — hover'da subtle bg, klavye-friendly. */
  cursor: pointer;
  transition: background 100ms ease;
}

.admin-page-access-option:hover {
  background: #f5f7fb;
  color: #1f2937;
}

.admin-page-access-option.is-all {
  margin-bottom: 4px;
  border-bottom: 1px solid #edf1f6;
  padding-bottom: 8px;
  font-weight: 700;
  color: #1f2937;
}

.admin-page-access-option.is-all:hover {
  background: #ede9fe;
}

.admin-page-access-option input {
  margin: 0;
  accent-color: #7c3aed;
  cursor: pointer;
}

/* Indeterminate state visual hint — partial selection */
.admin-page-access-option input:indeterminate {
  accent-color: #7c3aed;
}

.admin-row-button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  background: #11151d;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-row-button.is-secondary {
  background: #eef2f8;
  color: #2c3445;
}

.admin-row-button.is-danger {
  background: #fdecec;
  color: #b93838;
}

.finance-admin-card h2 {
  margin: 0 0 8px;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.finance-admin-card p {
  margin: 0;
  color: var(--finance-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.finance-kv {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.finance-kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f8;
}

.finance-kv-row span {
  color: var(--finance-muted);
  font-size: 0.85rem;
}

.finance-kv-row strong {
  font-size: 0.92rem;
  text-align: right;
}

@media (max-width: 960px) {
  .finance-shell,
  .finance-body-grid {
    height: auto;
    min-height: 100vh;
  }

  .finance-body-grid {
    grid-template-columns: 1fr;
  }

  .finance-sidebar {
    border-right: 0;
    border-bottom: 1px solid #e5e9f1;
  }

  .finance-workspace {
    min-height: calc(100vh - 58px);
  }

  .finance-page {
    position: static;
  }

  .finance-stats-grid,
  .finance-grid,
  .finance-admin-grid,
  .metadata-manager-grid {
    grid-template-columns: 1fr;
  }
}

/* === VYG Product AI: Level Success Churn report === */
.product-ai-report-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  text-align: center;
}
.product-ai-report-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.product-ai-report-title .accent-purple {
  color: #7c3aed;
}
.product-ai-report-title .accent-red {
  color: #dc2626;
}
.product-ai-report-subtitle {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
}
.product-ai-report-subtitle .pkg {
  color: #2563eb;
  font-weight: 600;
}
.product-ai-report-subtitle .store {
  color: #ea580c;
  font-weight: 600;
}
.product-ai-report-subtitle .country {
  color: #16a34a;
  font-weight: 600;
}
.product-ai-report-subtitle .version-label {
  color: #475569;
}
.product-ai-report-subtitle .version-value {
  color: #0ea5e9;
  font-weight: 600;
}
.product-ai-report-subtitle .sep {
  color: #cbd5e1;
}

.product-ai-report-table {
  /* sticky thead için border-collapse: separate gerekiyor (Chrome/Safari) */
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 12px;
}
.product-ai-report-table thead th {
  background: #f8fafc !important;
  border: 0;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #cbd5e1;
  padding: 8px 6px;
  font-weight: 600;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  color: #1e293b;
  white-space: pre-line;
  line-height: 1.25;
  position: sticky !important;
  /* Sticky stack — finance-page top:0'a yapışık standalone cluster:
       0    compact-title (h:30 → ends at 30)
       30   compact-subtitle (h:24 → ends at 54)
       54   bu thead
     Section-header'a güvenmiyoruz — o ayrı bir section-card içinde
     sticky, scroll edildiğinde un-stick olunca mask kalmıyordu. Bu
     cluster kendi başına tam mask sağlıyor. */
  top: 54px !important;
  z-index: 100 !important;
  /* border-collapse:collapse + sticky bug fix — borderları box-shadow ile çiz */
  box-shadow: inset 0 -1px 0 #cbd5e1, inset 0 1px 0 #cbd5e1, 0 2px 4px rgba(15, 23, 42, 0.08);
}
.product-ai-report-table thead th:first-child {
  border-left: 1px solid #e2e8f0;
}
.product-ai-report-table tbody td:first-child {
  border-left: 1px solid #e2e8f0;
}
.product-ai-report-table tbody tr:first-child td {
  border-top: 1px solid #e2e8f0;
}

/* Her level grubunun son satırının alt çizgisi biraz daha belirgin */
.product-ai-report-table tbody tr.level-group-end td {
  border-bottom: 0.7px solid #94a3b8;
}

/* Product AI tables row — main churn tablosu + 2 yan tablo (Inner/Outer)
   yan yana, konteyner horizontal scroll. Main tablo eski genişliğini
   (full container width) korur — page'e sığdırmak için sıkıştırılmaz.
   Inner/Outer ekranı sağa kaydırılınca görünür. */
/* ========================================================================
   Puzzle AI: Inner & Outer Churn — sade kart yapısı (sıfırdan)

   Hiyerarşi:
     .product-ai-churn-card  → toolbar + tables-row'u içeren tek dış kart
       .product-ai-table-toolbar  → All/Inner/Outer pills (sticky)
       .product-ai-tables-row     → flex satır
         .product-ai-main-table-wrap  → main churn (80% width)
         .product-ai-compact-card     → Inner Churn
         .product-ai-compact-card     → Outer Churn

   - Hiçbir overflow yok (sticky thead page'e bağlı kalsın diye)
   - Hiçbir ::before/::after extension/mask yok
   - Inner/Outer/main üçü de aynı border + radius görünümünde
   ======================================================================== */
.product-ai-churn-card {
  margin: 20px 0 0;
  padding: 12px 16px 24px;
  background: var(--finance-panel);
  border: 1px solid var(--finance-panel-border);
  border-radius: 16px;
  box-shadow: var(--finance-shadow);
}
.product-ai-tables-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: flex-start;
}
.product-ai-main-table-wrap {
  /* Admin slider'ı --product-ai-main-table-width değerini set ediyor;
     yoksa default %88. Compact yan kartlar flex:0 0 auto ile kendi
     içeriklerine göre genişler; tables-row aşılırsa horizontal scroll. */
  flex: 0 0 var(--product-ai-main-table-width, 88%);
  min-width: var(--product-ai-main-table-width, 88%);
  max-width: var(--product-ai-main-table-width, 88%);
  border: 1px solid var(--finance-panel-border);
  border-radius: 10px;
  background: #ffffff;
}

/* Admin width control — 3 slider yan yana (Main / Inner / Outer).
   Wrap'ı flex-wrap: wrap, dar ekranlarda alta düşsün. */
.product-ai-table-width-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 6px 4px 10px;
  font-size: 12px;
  color: #475569;
}
.product-ai-table-width-control[hidden] { display: none; }
.product-ai-table-width-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-ai-table-width-label {
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 64px;
}
.product-ai-table-width-slider {
  flex: 0 0 180px;
  cursor: pointer;
  accent-color: #7c3aed;
}
.product-ai-table-width-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #1e293b;
  min-width: 50px;
}
/* Click-to-edit etiket — admin tıklayınca text input'a dönüşüyor.
   Hover'da subtle background + cursor:text ile editable olduğunu belli et. */
.product-ai-table-width-value.is-editable {
  cursor: text;
  padding: 1px 6px;
  border-radius: 4px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.product-ai-table-width-value.is-editable:hover {
  background: #f1f5f9;
  box-shadow: 0 0 0 1px #e2e8f0;
}
/* Editable text input — number spinners kapatıldı, monospace look. */
.product-ai-table-width-input {
  width: 60px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid #7c3aed;
  border-radius: 4px;
  padding: 1px 4px;
  background: #ffffff;
  color: #0f172a;
  font-family: inherit;
  -moz-appearance: textfield;
  outline: none;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}
.product-ai-table-width-input::-webkit-outer-spin-button,
.product-ai-table-width-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Inner / Outer Churn — read-only kart, doğal table genişliğinde.
   NOT: display: flex koymuyoruz çünkü flex-column içindeki tablonun
   sticky thead'i bazı browser'larda ana scroll context'inden kopup
   kart'a bağlanıyor — sonuç: thead başlık satırı tablonun ortasında
   kalıyor. Plain block layout ile sticky page-level çalışıyor. */
.product-ai-compact-card {
  flex: 0 0 auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px 12px;
  scroll-snap-align: start;
  /* Admin width slider'ıyla kartı içerikten dar yapınca tablo komşu karta
     taşıp pesade'i bozmasın diye horizontal clip. overflow: clip non-scroll
     bir clipping context — CSS spec'e göre sticky thead'in scroll-ancestor
     araması bu element'i atlıyor, page-level sticky çalışmaya devam ediyor.
     Kullanıcı genişlettikçe tüm kolonlar görünür olur; çok daraltırsa en
     sağdaki kolonlar kesilir (intentional UX, overlap yerine clean clip). */
  overflow: clip;
}
/* Admin slider Inner/Outer kartları için px width set edebiliyor.
   ÖNEMLİ: CSS var yoksa fallback'i ARTIK `auto` DEĞİL — kesin 610px.
   Sebep: kart `auto` iken içindeki tablo `width:100% + table-layout:fixed`
   ile döngüsel sizing yaratıyordu (kart genişliği ← tablo içeriği, tablo
   genişliği ← kart). <th> yüzde widths belirsiz tabana çözülünce bazı
   tarayıcılar içerik-tabanlı fallback yapıp tabloyu balona çeviriyordu
   ("bazı bilgisayarlarda bitmeyen yatay scroll"). 610px = 5 kolonun
   default px toplamı (110+150+120+120+110) — admin slider'ı 150-1200
   arası override edebilir. */
.product-ai-compact-card[data-compact-card="inner"] {
  flex: 0 0 var(--product-ai-inner-table-width, 610px);
  width: var(--product-ai-inner-table-width, 610px);
  max-width: var(--product-ai-inner-table-width, 610px);
}
.product-ai-compact-card[data-compact-card="outer"] {
  flex: 0 0 var(--product-ai-outer-table-width, 610px);
  width: var(--product-ai-outer-table-width, 610px);
  max-width: var(--product-ai-outer-table-width, 610px);
}
.product-ai-compact-title {
  font-size: 13px;
  font-weight: 700;
  color: #b91c1c;
  text-align: center;
  letter-spacing: 0.02em;
  /* Sticky stack — section-header'a BAĞIMLI DEĞİL.
     Section-header parent'ı (section-card) scroll edilip geçildiğinde
     un-stick oluyor → top:0..80 mask kalmıyor → body satırları viewport
     üstünde görünüyordu. Şimdi cluster .finance-page top:0'a yapışık;
     kendi başına tüm üst alanı maskeliyor.
     Yeni stack:  0 title (h:30) / 30 subtitle (h:24) / 54 thead.
     Section-header in own scroll-area still uses its own sticky:0,
     iki cluster aynı anda aktif olmuyor (containing block farklı). */
  position: sticky;
  top: 0;
  z-index: 110;
  background: #ffffff;
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  margin: -10px -12px 0 -12px;
  border-bottom: 1px solid #f1f5f9;
  box-sizing: border-box;
  /* Flex kartlar arasında 12px gap var; box-shadow ile sticky title kendi
     bg'sini sağa-sola 12px uzatıyor → kartlar arasındaki gap strip'inden
     body satırlar sızamıyor. */
  box-shadow: -12px 0 0 0 #ffffff, 12px 0 0 0 #ffffff;
}
/* Filter context subtitle — package | store | country | version.
   Sticky stack: title 0 (h:30) → subtitle 30 (h:24) → thead 54. */
.product-ai-compact-subtitle {
  font-size: 10px;
  text-align: center;
  padding: 4px 12px;
  margin: 0 -12px 4px -12px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  letter-spacing: 0.02em;
  height: 24px;
  line-height: 16px;
  box-sizing: border-box;
  position: sticky;
  top: 30px;
  z-index: 105;
  /* Title ile aynı sebep: flex card'lar arasındaki 12px gap'i kapat. */
  box-shadow: -12px 0 0 0 #ffffff, 12px 0 0 0 #ffffff;
}
.product-ai-compact-subtitle .pa-sub-pkg { color: #2563eb; font-weight: 600; }
.product-ai-compact-subtitle .pa-sub-store { color: #ea580c; font-weight: 600; }
.product-ai-compact-subtitle .pa-sub-country { color: #16a34a; font-weight: 600; }
.product-ai-compact-subtitle .pa-sub-version { color: #7c3aed; font-weight: 600; }
.product-ai-compact-subtitle .pa-sub-divider { color: #cbd5e1; padding: 0 6px; }
.product-ai-compact-subtitle .pa-sub-empty { color: #94a3b8; font-style: italic; }
/* Internal scroll yok — main churn gibi natural yüksekliğinde, page scroll
   tablomu görsün. */
.product-ai-compact-table-wrap {
  overflow: visible;
  border: 0;
  border-radius: 0;
}
/* table-layout: fixed → <colgroup> width'leri sıkıca uygulanır.
   Cell tipografisi/border'ları main churn (.product-ai-report-table) ile
   birebir aynı — kullanıcı arasında stil farkı görmesin.
   position: relative — sticky thead için containing block referansı. */
.product-ai-compact-table {
  position: relative;
  border-collapse: separate;
  border-spacing: 0;
  /* width:100% + table-layout:fixed: tablo daima kart genişliğinde olur,
     <th> inline pixel widths sum'ı kart'tan büyükse browser kolonları
     orantılı KÜÇÜLTÜR (her kolon ratio'su korunur), küçükse kalan boşluğu
     son kolona dağıtır. Main churn table ile aynı pattern (#product-ai-page
     .product-ai-report-table'da da width:100% + max-width:100% var) — admin
     Inner/Outer slider'ıyla kartı daraltırsa overlap olmaz, kolonlar
     scale ediliyor. */
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  font-size: var(--product-ai-font-size, 11px);
}
.product-ai-compact-table thead th {
  background: #f8fafc;
  background-clip: padding-box;
  border: 0;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #cbd5e1;
  padding: 8px 6px;
  font-weight: 700;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  color: #1e293b;
  white-space: pre-line;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
  /* Sticky thead — title (top:0, h:30) + subtitle (top:30, h:24) altında.
     54'te flush başlıyor; standalone cluster, section-header'a bağımsız. */
  position: sticky;
  top: 54px;
  z-index: 100;
  box-shadow: inset 0 -1px 0 #cbd5e1, 0 2px 4px rgba(15, 23, 42, 0.10);
}
.product-ai-compact-table thead th:first-child {
  border-left: 1px solid #e2e8f0;
}
.product-ai-compact-table tbody td {
  border: 0;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 2px 6px;
  text-align: center;
  vertical-align: middle;
  color: #1e293b;
  font-size: var(--product-ai-font-size, 11px);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.product-ai-compact-table tbody td:first-child {
  border-left: 1px solid #e2e8f0;
}
.product-ai-compact-table tbody tr:first-child td {
  border-top: 1px solid #e2e8f0;
}
/* Level Index cell — main churn ile birebir aynı (beyaz default) */
.product-ai-compact-table tbody td.col-level {
  background: #ffffff;
  font-weight: 700;
  color: #0f172a;
  text-align: left !important;
  padding-left: 12px !important;
}
.product-ai-compact-table tbody td.cell-bg-purple-soft {
  background: #ffffff;
  text-align: left;
  padding-left: 12px;
}
/* Zebra: main churn ile aynı — her ikinci level grubunda peach */
.product-ai-compact-table tbody tr.is-level-alt td.col-level,
.product-ai-compact-table tbody tr.is-level-alt td.cell-bg-purple-soft {
  background: #fde6cf;
}
.product-ai-compact-table tbody tr:hover td:not(.col-level) {
  filter: brightness(0.97);
}

/* Product AI tablosu wrapper'ı — kendi içinde scroll yok, doğal yüksekliğinde
   Önemli: overflow-x: hidden + overflow-y: visible kombinasyonu CSS quirk'ü
   yüzünden y'yi auto'ya çevirir. İkisi de visible olmalı. */
#product-ai-page .finance-table-wrap,
#product-ai-page .finance-table-wrap.finance-table-wrap-scroll {
  overflow: visible !important;
  position: relative;
  min-height: 0;
  max-height: none !important;
  height: auto !important;
}
#product-ai-page .product-ai-report-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  height: auto;
}
/* Hücreler taşmasın — uzun metni sar */
#product-ai-page .product-ai-report-table thead th,
#product-ai-page .product-ai-report-table tbody td {
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* section-card ve card'lar tabloyu vertical olarak kısıtlamasın.
   (Sizing is governed by the flex rule above; here we just make sure
   nothing forces a fixed height on the card.) */
#product-ai-page .finance-section-card {
  height: auto;
}
#product-ai-page .finance-table-wrap.finance-table-wrap-scroll table {
  position: relative;
}
.product-ai-report-table tbody td {
  border: 0;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  /* Padding 2 → 1: row 24 → 18'e düştüğünde cell içeriği taşmasın.
     1 + 1 (üst+alt) + ~13 (10–11px × 1.3 line) + 1 border ≈ 16px → 18px tr'a sığar. */
  padding: 1px 6px;
  text-align: center;
  vertical-align: middle;
  color: #1e293b;
  font-size: var(--product-ai-font-size, 11px);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  /* Tüm satırların aynı yüksekliğe sahip olması için içeriği tek satıra
     sabitle. Long metinler ellipsis ile clip; column widths zaten fixed. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-ai-report-table tbody tr {
  /* Default 20px — kompakt ama içerik için biraz daha rahat. Admin
     row-zoom +/- ile --product-ai-row-height override edebilir. */
  height: var(--product-ai-row-height, 20px);
}

/* Admin column resize handle */
.product-ai-report-table thead th {
  position: relative;
}
.product-ai-report-table thead th .col-resize-handle,
.product-ai-compact-table thead th .col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background: transparent;
  z-index: 2;
}
.product-ai-report-table thead th .col-resize-handle:hover,
.product-ai-compact-table thead th .col-resize-handle:hover {
  background: rgba(124, 58, 237, 0.35);
}
.product-ai-report-table.is-col-resizing,
.product-ai-report-table.is-col-resizing *,
.product-ai-compact-table.is-col-resizing,
.product-ai-compact-table.is-col-resizing * {
  user-select: none !important;
  cursor: col-resize !important;
}

/* Row height +/- toolbar */
.product-ai-row-zoom {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  margin-left: 6px;
}
.product-ai-row-zoom button {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.product-ai-row-zoom button:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.product-ai-row-zoom button:active {
  background: #e2e8f0;
}
.product-ai-row-zoom[hidden] {
  display: none;
}

/* AI Insights accordion */
.product-ai-insights {
  display: block;
  position: relative;
  /* Kullanıcı isteği: AI Insights kendi ayrı kartında görünsün — tipik
     finance-card stili (beyaz bg + 16px radius + shadow), section-card
     içeriğinden belirgin şekilde ayrışıyor.
     overflow: hidden ile içerik (summary + body) köşeleri tam olarak
     dış kartın yuvarlağına klips'leniyor — yoksa 16px radius + iç
     elementlerin dik köşeleri yan yana görünüyordu.
     NOT: Negatif yan margin'ler kaldırıldı çünkü parent'ın overflow
     sınırına takılıp sol tarafta kart kırpılıyordu. */
  margin: 16px 0 20px;
  border: 1px solid var(--finance-panel-border);
  border-radius: 16px;
  background: var(--finance-panel);
  box-shadow: var(--finance-shadow);
  padding: 0;
  width: auto;
  height: auto;
  min-height: 0;
  z-index: 1;
  overflow: hidden;
}
/* overflow:hidden parent sayesinde inner border-radius'a artık gerek yok,
   ama yine de açık (expanded) hâlinde summary üstte düz alt kenarlı
   görünsün, aksi hâlde anti-alias bug yapar. */
.product-ai-insights .product-ai-insights-summary {
  border-radius: 0;
}
.product-ai-insights:not(.is-expanded) .product-ai-insights-summary {
  border-radius: 0;
}
.product-ai-insights-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  user-select: none;
}
/* Body collapsed state — JS toggles .is-expanded */
.product-ai-insights:not(.is-expanded) .product-ai-insights-body {
  display: none !important;
}
.product-ai-insights.is-expanded .product-ai-insights-body {
  display: block !important;
  min-height: 40px;
}
.product-ai-insights-summary-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.product-ai-insights-summary-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.product-ai-insights-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  color: #ffffff;
  flex: none;
}
.product-ai-insights-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.01em;
}
.product-ai-insights-status {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}
.product-ai-insights-status.is-loading {
  color: #7c3aed;
}
.product-ai-insights-status.is-error {
  color: #dc2626;
}
.product-ai-insights-status.is-cached {
  color: #0891b2;
}
.product-ai-insights-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #7c3aed;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.product-ai-insights-button:hover:not(:disabled) {
  background: #6d28d9;
}
.product-ai-insights-button:active:not(:disabled) {
  transform: scale(0.98);
}
.product-ai-insights-button:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}
.product-ai-insights-button.is-loading {
  background: #a78bfa;
}
.product-ai-insights-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  cursor: pointer;
  color: #7c3aed;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.product-ai-insights-button-secondary:hover:not(:disabled) {
  background: #f3e8ff;
  border-color: #c4b5fd;
}
.product-ai-insights-button-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.product-ai-insights-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  cursor: pointer;
  color: #7c3aed;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.product-ai-insights-toggle:hover {
  background: #f3e8ff;
  border-color: #c4b5fd;
}
.product-ai-insights-chevron {
  color: inherit;
  transition: transform 0.2s ease;
  flex: none;
}
.product-ai-insights:not(.is-expanded) .product-ai-insights-chevron {
  transform: rotate(-90deg);
}
.product-ai-insights-body {
  padding: 12px 14px 14px;
  border-top: 1px solid #e9d5ff;
  background: #ffffff;
}
.product-ai-insights-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}
.product-ai-insights-empty strong {
  color: #7c3aed;
  font-weight: 700;
}

.product-ai-insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.product-ai-insights-panel {
  border: 1px solid #e2e8f0;
  border-top: 3px solid #cbd5e1; /* tema rengi data-panel ile override edilir */
  border-radius: 10px;
  background: #ffffff;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-ai-insights-panel.is-wide {
  grid-column: span 2;
}

/* Panel-bazlı tema renkleri — üst kenardan gelen accent + çok hafif
   bg tint. Renkler header'daki ikonun zemin rengiyle uyumlu, ama
   çok hafif tutuldu ki tablo/bullet okunabilirliği korunsun. */
.product-ai-insights-panel[data-panel="summary"] {
  border-top-color: #7c3aed;
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 60%);
}
.product-ai-insights-panel[data-panel="inner"] {
  border-top-color: #dc2626;
  background: linear-gradient(180deg, #fef2f2 0%, #ffffff 60%);
}
.product-ai-insights-panel[data-panel="outer"] {
  border-top-color: #d97706;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%);
}
.product-ai-insights-panel[data-panel="monetization"] {
  border-top-color: #b45309;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 60%);
}
.product-ai-insights-panel[data-panel="pacing"] {
  border-top-color: #1d4ed8;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 60%);
}
.product-ai-insights-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Per-action priority pill — her aksiyonun kendi önceliği bullet
   metninin başında küçük bir etiket olarak gösterilir. high (kırmızı)
   > medium (kehribar) > low (yeşil). Renderer item'ları yüksekten
   düşüğe sıralar, dolayısıyla göz hep yukarıdan aşağı triaj yapar. */
.product-ai-insights-prio-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  margin-right: 6px;
  vertical-align: middle;
  line-height: 1.2;
}
.product-ai-insights-prio-tag.is-high {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}
.product-ai-insights-prio-tag.is-medium {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}
.product-ai-insights-prio-tag.is-low {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}
.product-ai-insights-actions-text {
  /* Bullet metni — pill'in yanında inline aksın */
  display: inline;
}
.product-ai-insights-panel-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  flex: none;
}
.product-ai-insights-panel-title {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.product-ai-insights-panel-text {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.55;
  white-space: pre-wrap;
}
.product-ai-insights-cliffs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Cliff TABLE (yeni format) */
.cliff-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.cliff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.cliff-table thead th {
  text-align: left;
  padding: 8px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 700;
  color: #475569;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cliff-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cliff-table tbody tr:last-child td {
  border-bottom: 0;
}
.cliff-table tbody tr:hover td {
  background: #faf5ff;
}
.cliff-table-level {
  display: inline-block;
  font-weight: 700;
  font-size: 12.5px;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cliff-table-level:hover {
  border-color: #7c3aed;
  background: #faf5ff;
}
.cliff-table .cliff-problem {
  color: #475569;
  font-size: 12px;
  font-style: italic;
  white-space: normal;
}
/* Severity coloring on cells */
.cliff-table td.sev-red {
  color: #dc2626;
  font-weight: 700;
}
.cliff-table td.sev-orange {
  color: #b45309;
  font-weight: 700;
}
.product-ai-insights-cliff {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  padding: 8px 10px;
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  align-items: start;
}
.product-ai-insights-cliff.is-untyped {
  grid-template-columns: auto 1fr;
}
.product-ai-insights-cliff-level {
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.product-ai-insights-cliff-level:hover {
  border-color: #7c3aed;
  background: #faf5ff;
}
.product-ai-insights-cliff-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 6px;
  align-self: center;
}
.product-ai-insights-cliff-type.type-inner {
  background: #fee2e2;
  color: #991b1b;
}
.product-ai-insights-cliff-type.type-outer {
  background: #fef3c7;
  color: #92400e;
}
.product-ai-insights-cliff-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: #1e293b;
  line-height: 1.45;
}
.product-ai-insights-cliff-body .cliff-metric {
  font-weight: 600;
  color: #475569;
}
.product-ai-insights-cliff-body .cliff-action {
  color: #6d28d9;
  font-style: italic;
}
.product-ai-insights-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-ai-insights-actions li {
  position: relative;
  padding: 6px 10px 6px 24px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  font-size: 13px;
  color: #0c4a6e;
  line-height: 1.45;
}
.product-ai-insights-actions li::before {
  content: "→";
  position: absolute;
  left: 8px;
  top: 6px;
  color: #0284c7;
  font-weight: 700;
}
.product-ai-insights-bullets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-ai-insights-bullets li {
  position: relative;
  padding: 4px 0 4px 18px;
  font-size: 13px;
  color: #1f2937;
  line-height: 1.55;
}
.product-ai-insights-bullets li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 3px;
  color: #6366f1;
  font-weight: 700;
  font-size: 14px;
}

/* Bullet/aksiyon metinlerinde sayısal token vurgusu — okunabilirlik için
   bold + farklı renk. (Hem .bullets hem .actions list-item'larında geçer
   çünkü span'lar inline.) */
.product-ai-insights-bullets .num,
.product-ai-insights-actions .num {
  font-weight: 700;
  color: #4338ca;
  background: #eef2ff;
  padding: 0 4px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

/* Per-panel "Önerilen Aksiyonlar" alt bloğu — bullet listesinin altında,
   ince bir ayraçla. Yeşil-açık ton, eski global Action panelinin yerini
   alır ama her kartın kendi context'inde. */
.product-ai-insights-actions-block {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-ai-insights-actions-title {
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.product-ai-insights-meta {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
}
@media (max-width: 900px) {
  .product-ai-insights-grid {
    grid-template-columns: 1fr;
  }
  .product-ai-insights-panel.is-wide {
    grid-column: span 1;
  }
}

/* Table üstündeki toolbar — sol üst köşeye toggle yerleştir */
.product-ai-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 16px;
  gap: 8px;
  /* Sticky DEĞİL — kullanıcı isteği: All/Inner/Outer pills scroll ile yukarı
     kaysın. Beyaz bg yerinde kalsın ki kart içinde belirgin görünsün. */
  background: #ffffff;
  min-height: 50px;
  box-sizing: border-box;
}

/* Churn view segmented toggle */
.product-ai-churn-view {
  display: inline-flex;
  gap: 0;
  align-items: stretch;
  margin-left: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  height: 30px;
}
.product-ai-churn-view button {
  padding: 0 12px;
  background: transparent;
  border: none;
  border-right: 1px solid #cbd5e1;
  color: #475569;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.product-ai-churn-view button:last-child {
  border-right: none;
}
.product-ai-churn-view button:hover {
  background: #e2e8f0;
}
.product-ai-churn-view button.is-active {
  background: #7c3aed;
  color: #ffffff;
}

/* KPI grid'inin üstündeki "Level aralığı" toolbar'ı.
   Sade beyaz şerit; iki küçük number input + ayraç. */
.product-ai-kpi-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 4px;
  flex-wrap: wrap;
  font-size: 12px;
}
.product-ai-kpi-cap-label {
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.product-ai-kpi-cap-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.product-ai-kpi-cap-control:focus-within {
  border-color: #c4b5fd;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}
.product-ai-kpi-cap-sublabel {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.product-ai-kpi-cap-input {
  width: 56px;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  text-align: right;
  padding: 0;
  -moz-appearance: textfield;
}
.product-ai-kpi-cap-input:focus {
  outline: none;
}
.product-ai-kpi-cap-input::-webkit-outer-spin-button,
.product-ai-kpi-cap-input::-webkit-inner-spin-button {
  margin: 0;
}
.product-ai-kpi-cap-sep {
  color: #94a3b8;
  font-weight: 700;
}
.product-ai-kpi-cap-hint {
  color: #94a3b8;
  font-size: 11px;
  margin-left: auto;
}
/* Level Range pill grubu — Min/Max input yerine 6 hazır aralık.
   Aktif pill mor accent, diğerleri nötr. Tam segmented-control hissi. */
.product-ai-level-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.product-ai-level-pill {
  appearance: none;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.1s ease;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.product-ai-level-pill:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.product-ai-level-pill:active {
  transform: scale(0.97);
}
.product-ai-level-pill.is-active {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  border-color: #6d28d9;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.25);
}
.product-ai-level-pill.is-active:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
  color: #ffffff;
}
.product-ai-level-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.35);
}

/* KPI cards above the table */
.product-ai-kpi-grid {
  display: grid;
  /* 30 sütunluk grid: klasik kartlar 5'er → 6 tane × 5 = 30 (1. satır
     tam dolu), chart kartları 6'şar → 5 tane × 6 = 30 (2. satır tam
     dolu). 12-col'dan 30-col'a yükseltildi çünkü 5. chart ("Worst Avg
     Try to Pass") eklendi ve hepsinin tek satırda sığması istendi. */
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 12px;
}
.product-ai-kpi-card {
  grid-column: span 5;
}
.product-ai-kpi-card.has-bars {
  grid-column: span 6;
}
.product-ai-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  overflow: hidden;
}
.product-ai-kpi-card[data-kpi-link-level] {
  cursor: pointer;
}
.product-ai-kpi-card[data-kpi-link-level]:hover {
  border-color: #c4b5fd;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.product-ai-kpi-card .kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.product-ai-kpi-card .kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.product-ai-kpi-card .kpi-hint {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
}
/* severity left-bar accent */
.product-ai-kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}
.product-ai-kpi-card.severity-good::before { background: #22c55e; }
.product-ai-kpi-card.severity-watch::before { background: #f59e0b; }
.product-ai-kpi-card.severity-critical::before { background: #ef4444; }
.product-ai-kpi-card.severity-good { background: #f0fdf4; }
.product-ai-kpi-card.severity-watch { background: #fffbeb; }
.product-ai-kpi-card.severity-critical { background: #fef2f2; }
@media (max-width: 1500px) {
  /* Daralan ekranda 5 chart kart sığmaz — 6 col'a düş; klasikler 6
     yan yana, chart'lar 2 satıra (3+2) yayılır. */
  .product-ai-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .product-ai-kpi-card {
    grid-column: span 1;
  }
  .product-ai-kpi-card.has-bars {
    grid-column: span 2; /* 3 chart per row */
  }
}
@media (max-width: 1100px) {
  .product-ai-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .product-ai-kpi-card.has-bars {
    grid-column: span 3; /* 1 chart per row */
  }
}
@media (max-width: 700px) {
  .product-ai-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-ai-kpi-card.has-bars {
    grid-column: span 2;
  }
}

/* Bar chart KPI kartları */
.product-ai-kpi-card.has-bars {
  padding-bottom: 10px;
}
.product-ai-kpi-card .kpi-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0 4px;
}
.kpi-bar-row {
  display: grid;
  grid-template-columns: 52px 1fr 48px;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.kpi-bar-row:hover {
  background: rgba(124, 58, 237, 0.06);
}
.kpi-bar-label {
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-bar-track {
  height: 14px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.kpi-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: filter 0.15s ease;
  min-width: 4px;
}
.kpi-bar-row:hover .kpi-bar-fill {
  filter: brightness(0.9);
}
.kpi-bar-value {
  color: #0f172a;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* KPI deep-link flash animasyonu — box-shadow inset overlay ile uyguluyoruz
   ki cell'lerin inline background-color (heatmap) stilini ezmesin.
   1000px inset hücre tamamını kaplayacak kadar büyük; semi-transparent
   sarı içeriği boğmadan vurgular. 2.5sn boyunca soluyor (kullanıcı 1-2sn
   sonra fark etmiyordu, biraz daha uzun). */
@keyframes kpi-flash-pulse {
  0%   { box-shadow: inset 0 0 0 1000px rgba(253, 224, 71, 0.55); }
  60%  { box-shadow: inset 0 0 0 1000px rgba(253, 224, 71, 0.40); }
  100% { box-shadow: inset 0 0 0 1000px rgba(253, 224, 71, 0); }
}
.product-ai-report-table tbody tr.kpi-flash td,
.product-ai-compact-table tbody tr.kpi-flash td {
  animation: kpi-flash-pulse 2.5s ease-out;
  position: relative;
}

/* Header column color edit button (admin only) — silik mini button */
.product-ai-report-table thead th .col-color-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  user-select: none;
  vertical-align: middle;
}
.product-ai-report-table thead th:hover .col-color-edit {
  opacity: 0.85;
}
.product-ai-report-table thead th .col-color-edit:hover {
  opacity: 1;
  color: #6d28d9;
  border-color: #c4b5fd;
  background: rgba(124, 58, 237, 0.08);
}

/* Color editor modal */
.product-ai-color-modal[hidden] {
  display: none !important;
}
.product-ai-color-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-ai-color-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.product-ai-color-modal-card {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 12px;
  width: min(560px, 92vw);
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}
.product-ai-color-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.product-ai-color-modal-header h3 {
  margin: 0;
  font-size: 15px;
  color: #0f172a;
}
.product-ai-color-modal-x {
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #64748b;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
.product-ai-color-modal-x:hover {
  background: #e2e8f0;
}
.product-ai-color-modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.product-ai-color-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-ai-color-field span {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
.product-ai-color-field select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}

/* Custom palette dropdown — native <select> görsel olarak gizli (visually
   hidden) ama DOM'da; .value getter/setter mevcut JS uyumu için açık.
   Yerine .pa-palette-trigger + .pa-palette-list kullanıyoruz, her option
   yanında mini gradient bar gösteriyor. */
.pa-palette-wrap {
  position: relative;
}
.product-ai-color-palette-select {
  /* Tamamen ekran dışına alıp focus alabilir formda kalsın diye visually
     hidden (display:none .value'yi etkilemez ama bazı browser optimizasyonu
     yapabilir; absolute + opacity:0 daha güvenli). */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  pointer-events: none;
}
.pa-palette-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  color: #0f172a;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pa-palette-trigger:hover {
  border-color: #94a3b8;
}
.pa-palette-trigger[aria-expanded="true"] {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.pa-palette-trigger-bar {
  display: inline-block;
  width: 64px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(90deg, #f1f5f9, #cbd5e1);
  flex: 0 0 64px;
}
.pa-palette-trigger-name {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.pa-palette-arrow {
  font-size: 11px;
  color: #64748b;
  flex: 0 0 auto;
}
.pa-palette-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 10004;
  max-height: 360px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
  padding: 4px;
  scrollbar-gutter: stable;
}
.pa-palette-list[hidden] {
  display: none;
}
.pa-palette-group-label {
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  user-select: none;
}
.pa-palette-option {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  font-size: 12px;
  color: #0f172a;
  text-align: left;
  font-family: inherit;
}
.pa-palette-option:hover {
  background: #f8fafc;
}
.pa-palette-option.is-selected {
  background: #ede9fe;
  color: #5b21b6;
  font-weight: 600;
}
.pa-palette-option-bar {
  display: inline-block;
  width: 64px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  flex: 0 0 64px;
  /* Custom Sequential / Diverging için fallback (JS inline gradient set
     etmediğinde): nötr gri hissi + diagonal stripe ile "custom" işareti. */
  background: repeating-linear-gradient(45deg, #f1f5f9 0 6px, #e2e8f0 6px 12px);
}
.pa-palette-option-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-ai-color-preview {
  height: 32px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: linear-gradient(to right, #7fc97f, #ffffff, #e8716c);
}

/* "Şu an uygulanan" preview — modal-body'nin DIŞINDA, footer'ın hemen
   üstünde sabit bir row. Body scroll ettikçe preset'lerin üstüne
   binmiyor (önceki sticky çözüm o problemi yaratıyordu). Üstünde 1px
   solid border ile body'den ayrılır. */
.product-ai-color-current-block {
  flex: none;
  padding: 10px 20px 12px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-ai-color-current-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
}
.product-ai-color-current-preview {
  height: 24px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: linear-gradient(to right, #cbd5e1, #cbd5e1);
}
.product-ai-color-current-hint {
  font-size: 11px;
  color: #94a3b8;
}
/* Apply changes — admin layout değişikliklerini topluca BQ'ya yazan
   floating buton. "Dirty" durumda görünür, save sonrası kaybolur.
   Position: fixed (sayfa scroll'undan bağımsız hep erişilebilir).
   z-index toast'tan biraz alta (10002), modal üstüne çıkmasın. */
.product-ai-layout-apply {
  /* Bottom-right floating action button — top-right'ta save toast var,
     çakışmasın diye buradayız. Klasik "save" FAB konumu. */
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 10002;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
  /* Smooth in/out — entrance bouncy ki dikkat çeksin. */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.product-ai-layout-apply.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.product-ai-layout-apply[hidden] {
  display: none;
}
.product-ai-layout-apply:hover {
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.5);
  transform: translateY(-1px);
}
.product-ai-layout-apply:active {
  transform: translateY(0);
}
.product-ai-layout-apply-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fef08a;
  flex: 0 0 8px;
  /* Subtle pulse — admin'e "kaydetmediğin değişiklik var" hissini ver. */
  animation: pa-apply-pulse 1.6s ease-in-out infinite;
}
@keyframes pa-apply-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(254, 240, 138, 0.7); }
  50% { box-shadow: 0 0 0 6px rgba(254, 240, 138, 0); }
}

/* Save toast — admin layout (column width / table width / colors / row
   height / font size) değişiklikleri BQ'ya yazılırken üst-sağda görünen
   durum bildirici. 3 state: saving (sarı/spinner) → saved (yeşil/check)
   → error (kırmızı/X). Hidden başlar; JS açıp 1.6 sn sonra kapatıyor.

   Position: fixed sayfa scroll'undan bağımsız hep görünür. z-index modal
   altı (10000), swatch popover üstü (10001 swatch, 10002 burası ama
   modal açıkken bile lazım) — modal z-index 10000, biz 10003. */
.product-ai-save-toast {
  position: fixed;
  top: 88px;
  right: 24px;
  z-index: 10003;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  max-width: 320px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: 0.01em;
  /* Smooth in/out: yeni mesaj geldiğinde JS hidden=false yapıp transition
     ile görünüyor; 1.6 sn sonra opacity 0 → display:none. */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.product-ai-save-toast[hidden] {
  display: none;
}
.product-ai-save-toast.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.product-ai-save-toast-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}
/* SAVING — sarı dot, küçük spinning animation. */
.product-ai-save-toast.is-saving .product-ai-save-toast-icon {
  background: conic-gradient(#f59e0b 0deg, #f59e0b 280deg, #fde68a 280deg, #fde68a 360deg);
  animation: pa-toast-spin 0.9s linear infinite;
}
.product-ai-save-toast.is-saving { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
/* SAVED — yeşil tik. */
.product-ai-save-toast.is-saved .product-ai-save-toast-icon {
  background: #16a34a;
}
.product-ai-save-toast.is-saved .product-ai-save-toast-icon::after {
  content: "✓";
}
.product-ai-save-toast.is-saved { color: #14532d; border-color: #bbf7d0; background: #f0fdf4; }
/* ERROR — kırmızı X. */
.product-ai-save-toast.is-error .product-ai-save-toast-icon {
  background: #dc2626;
}
.product-ai-save-toast.is-error .product-ai-save-toast-icon::after {
  content: "✕";
}
.product-ai-save-toast.is-error { color: #7f1d1d; border-color: #fecaca; background: #fef2f2; }
@keyframes pa-toast-spin {
  to { transform: rotate(360deg); }
}

/* Custom solid color popover — modal'daki Start/Center/End swatch'lara
   tıklayınca açılan, 100 hazır rengi grid halinde gösteren özel popover.
   Native browser color picker yerine bunu kullanıyoruz.

   Grid 5×20 (100 hücre) → ~800px yükseklik. Viewport'tan taşmasın diye
   max-height + grid'in kendi içinde dikey scroll. "Daha fazla renk..."
   butonu (.foot) scroll alanı dışında, hep en altta sabit kalır. */
.product-ai-solid-color-popover {
  position: fixed;
  z-index: 10001;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
  padding: 10px;
  width: 200px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.product-ai-solid-color-popover[hidden] { display: none; }
.product-ai-solid-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  /* Min-height 0 — flex child'da overflow:auto için gerekli, yoksa
     ebeveyn flexbox child'ın doğal yüksekliğine genişler. */
  min-height: 0;
  overflow-y: auto;
  /* Hover transform sırasında scrollbar zıplamasın diye sürekli ayrılmış
     scrollbar alanı bırakıyoruz. */
  scrollbar-gutter: stable;
}
.product-ai-solid-color-cell {
  appearance: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.product-ai-solid-color-cell:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3);
  z-index: 1;
}
.product-ai-solid-color-cell:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 1px;
}
.product-ai-solid-color-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  text-align: center;
}
.product-ai-solid-color-more {
  appearance: none;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.product-ai-solid-color-more:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* Tableau-like row: label | mode select | value input | tiny color swatch */
.product-ai-color-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 32px;
  align-items: center;
  gap: 10px;
}
.product-ai-color-row label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
.product-ai-color-row .product-ai-color-mode {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
}
.product-ai-color-row input[type="color"].product-ai-color-swatch-input {
  width: 32px;
  height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  padding: 2px;
}
.product-ai-color-row input[type="number"] {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  background: #ffffff;
}
/* Mode "auto" iken value input grayed-out — disabled görünmüyor ama
   placeholder dominant kalıyor. */
.product-ai-color-row[data-mode="auto"] input[type="number"] {
  background: #f1f5f9;
  color: #94a3b8;
}

/* Mini gradient bar — palette select altında, küçük start/end swatch
   ve uzun gradient çubuğu yan yana. Min/max değerler altta. */
.product-ai-color-bar-row {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: stretch;
  gap: 6px;
  margin-top: 8px;
}
.product-ai-color-bar-swatch {
  display: block;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
}
.product-ai-color-bar-gradient {
  height: 28px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
}
.product-ai-color-bar-labels {
  display: flex;
  justify-content: space-between;
  margin: 2px 38px 0;
  font-size: 11px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

/* Data range hint — auto range outlier-clipped (p2/p98) olduğunda
   gerçek data extremes'i göstermek için küçük gri satır. Hidden
   default; JS dataMin/dataMax !== min/max olunca açıyor. */
.product-ai-color-data-range {
  margin: 6px 38px 0;
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.product-ai-color-data-range[hidden] { display: none; }

/* Reverse checkbox — palette altında küçük, sola hizalı. */
.product-ai-color-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  user-select: none;
  margin-top: 4px;
}
.product-ai-color-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #7c3aed;
  cursor: pointer;
  margin: 0;
}

/* Preset gallery artık <details> içinde — collapsed default. */
.product-ai-color-presets-details {
  margin-top: 8px;
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
}
.product-ai-color-presets-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  user-select: none;
  padding: 4px 0;
}
.product-ai-color-presets-details summary:hover {
  color: #0f172a;
}
.product-ai-color-modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
.product-ai-color-modal-spacer {
  flex: 1;
}
.product-ai-color-modal-footer button {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.product-ai-color-modal-footer button:hover {
  background: #f1f5f9;
}
.product-ai-color-modal-footer button.primary {
  background: #7c3aed;
  color: #ffffff;
  border-color: #7c3aed;
}
.product-ai-color-modal-footer button.primary:hover {
  background: #6d28d9;
}
.product-ai-color-row[data-stop="center"][hidden] {
  display: none;
}

/* Preset palette swatches */
.product-ai-color-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.product-ai-color-preset {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.product-ai-color-preset:hover {
  border-color: #7c3aed;
}
.product-ai-color-preset:active {
  transform: scale(0.98);
}
.product-ai-color-preset .swatch {
  width: 60px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.product-ai-color-preset .name {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-ai-text-zoom {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}
.product-ai-text-zoom button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.product-ai-text-zoom button:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.product-ai-text-zoom button:active {
  background: #e2e8f0;
}
.product-ai-report-table thead th {
  font-weight: 700;
}
/* ID-prefix + !important — diğer text-align rule'lardan üstün gelmesi
   garanti. Cache'lenmiş eski CSS de bu rule'u atlatamıyor. */
#product-ai-page .product-ai-report-table tbody td.col-level {
  background: #ffffff;
  font-weight: 700;
  color: #0f172a;
  text-align: left !important;
  padding-left: 12px !important;
}
.product-ai-report-table tbody td.cell-bg-purple-soft {
  text-align: left;
  padding-left: 12px;
  background: #ffffff;
}
/* Zebra: her ikinci level grubunda Level Index + Event Name peach */
.product-ai-report-table tbody tr.is-level-alt td.col-level,
.product-ai-report-table tbody tr.is-level-alt td.cell-bg-purple-soft {
  background: #fde6cf;
}
.product-ai-report-table tbody tr:hover td:not(.col-level) {
  filter: brightness(0.97);
}

.product-ai-report-table thead th[data-sort-key] {
  cursor: pointer;
  user-select: none;
}
.product-ai-report-table thead th.is-not-sortable {
  cursor: default;
}
.product-ai-report-table thead th.is-not-sortable.is-draggable {
  cursor: grab;
}
.product-ai-report-table thead th.is-draggable {
  cursor: grab;
}
.product-ai-report-table thead th.is-draggable:active {
  cursor: grabbing;
}
.product-ai-report-table thead th.is-dragging {
  opacity: 0.4;
}
.product-ai-report-table thead th.is-drag-over {
  outline: 2px dashed #7c3aed;
  outline-offset: -2px;
  background: #ede9fe;
}
.product-ai-report-table thead th .sort-indicator {
  margin-left: 4px;
  font-size: 11px;
}
.product-ai-report-table thead th .sort-indicator.inactive {
  opacity: 0.35;
}

/* Conditional cell colors for the report */
.product-ai-report-table tbody td.cell-bg-blue-soft { background: #dbeafe; }
.product-ai-report-table tbody td.cell-bg-blue { background: #bfdbfe; }
.product-ai-report-table tbody td.cell-bg-green { background: #bbf7d0; }
.product-ai-report-table tbody td.cell-bg-green-soft { background: #dcfce7; }
.product-ai-report-table tbody td.cell-bg-pink { background: #fecaca; }
.product-ai-report-table tbody td.cell-bg-pink-soft { background: #fee2e2; }
.product-ai-report-table tbody td.cell-bg-rose { background: #fce7f3; }
.product-ai-report-table tbody td.cell-bg-teal { background: #5eead4; color: #064e3b; font-weight: 600; }
.product-ai-report-table tbody td.cell-bg-teal-soft { background: #99f6e4; }
.product-ai-report-table tbody td.cell-bg-yellow { background: #fef3c7; }
.product-ai-report-table tbody td.cell-bg-orange { background: #fed7aa; }
.product-ai-report-table tbody td.cell-bg-info { background: #e0f2fe; }
.product-ai-report-table tbody td.cell-bg-purple-soft { background: #ffffff; }
.product-ai-report-table tbody td.cell-bg-peach { background: #ffedd5; }
.product-ai-report-table tbody td.cell-bg-coral { background: #fee4e2; }
.product-ai-report-table tbody td.cell-bg-amber { background: #fde68a; }
.product-ai-report-table tbody td.cell-bg-cyan { background: #cffafe; }
.product-ai-report-table tbody td.cell-bg-lavender { background: #e9d5ff; }
.product-ai-report-table tbody td.cell-bg-mint { background: #d1fae5; }
.product-ai-report-table tbody td.cell-bg-sky { background: #e0f2fe; }
.product-ai-report-table tbody td.cell-bg-lime { background: #ecfccb; }
.product-ai-report-table tbody td.cell-bg-fuchsia { background: #fae8ff; }
.product-ai-report-table tbody td.cell-bg-stone { background: #f5f5f4; }

/* Header tooltip — hover'da açılır */
.product-ai-report-table thead th .col-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  z-index: 100;
  min-width: 220px;
  max-width: 320px;
  padding: 10px 12px;
  background: #0f172a;
  color: #f1f5f9;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-line;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.25);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.product-ai-report-table thead th .col-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #0f172a transparent;
}
.product-ai-report-table thead th:hover .col-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Difficulty rozet renkleri */
.product-ai-report-table tbody td.diff-easy {
  background: #dcfce7;
  color: #166534;
  font-weight: 800;
}
.product-ai-report-table tbody td.diff-medium {
  background: #fef9c3;
  color: #854d0e;
  font-weight: 800;
}
.product-ai-report-table tbody td.diff-hard {
  background: #fed7aa;
  color: #9a3412;
  font-weight: 800;
}
.product-ai-report-table tbody td.diff-very-hard {
  background: #fecaca;
  color: #991b1b;
  font-weight: 800;
}

/* ===================== Query Manager ===================== */

/* .finance-page default layout'u (position:absolute + grid 3-row) bu
   sayfa için uygun değil — Query Manager içeriği (filters + SQL preview
   + result table) viewport'tan uzun ve PAGE-LEVEL vertical scroll
   istiyor. Burada display ve overflow override'ı yapılıyor. */
#query-manager-page.finance-page {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 24px 32px;
}
#query-manager-page.finance-page:not(.is-active) {
  display: none;
}

#query-manager-page .finance-workspace-header {
  margin-bottom: 14px;
}
#query-manager-page .finance-workspace-header code {
  background: #eef2ff;
  color: #3730a3;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.86em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Table picker row — sits above qm-grid, full-width. */
.qm-table-picker-row {
  display: flex;
  align-items: end;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.qm-field-table-picker {
  min-width: 320px;
  max-width: 480px;
  flex: 0 1 380px;
}
.qm-field-saved-picker {
  min-width: 240px;
  max-width: 360px;
  flex: 0 1 300px;
}
.qm-field-table-picker select,
.qm-field-saved-picker select {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
/* Picker row'daki butonlar select'lerle dikey hizalı dursun. */
.qm-table-picker-row .qm-btn {
  align-self: end;
  margin-bottom: 1px; /* select bottom border'ıyla aynı baseline */
}
#qm-table-meta {
  font-size: 11px;
  padding-bottom: 9px; /* align with select bottom */
}

.qm-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  align-items: start;
}

.qm-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.qm-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.qm-card-header strong {
  font-size: 13px;
  color: #1e293b;
  letter-spacing: -0.01em;
}
.qm-card-meta {
  font-size: 11px;
}

/* Schema panel — interactive: kullanıcı SELECT'e hangi base kolonların
   gireceğini buradan seçer. Toolbar'da All/None toggle. */
.qm-schema-card {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.qm-schema-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.qm-schema-toolbar-btn {
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.qm-schema-count {
  margin-left: auto;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.qm-schema-list {
  padding: 4px 0;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  flex: 1 1 auto;
  min-height: 0;
}
.qm-schema-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-bottom: 1px dashed #f1f5f9;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
}
.qm-schema-row:last-child { border-bottom: 0; }
.qm-schema-row:hover { background: #f8fafc; }
.qm-schema-row.is-deselected {
  opacity: 0.45;
}
.qm-schema-row.is-deselected:hover {
  opacity: 0.7;
}
.qm-schema-row input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0;
  cursor: pointer;
  accent-color: #7c3aed;
  flex-shrink: 0;
}
.qm-schema-name {
  color: #1e293b;
  font-weight: 600;
  word-break: break-word;
  flex: 1 1 auto;
  min-width: 0;
}
.qm-schema-type {
  color: #7c3aed;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Main column */
.qm-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Filters */
.qm-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
  padding: 14px;
}
.qm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.qm-field-label {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qm-input {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  background: #ffffff;
  color: #1e293b;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
}
.qm-input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}
select.qm-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='m6 8.5-4-4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
  padding-right: 26px;
}

.qm-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 14px;
  flex-wrap: wrap;
}
.qm-btn {
  appearance: none;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.qm-btn:hover:not(:disabled) {
  border-color: #c4b5fd;
  color: #6d28d9;
}
.qm-btn.is-primary {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
}
.qm-btn.is-primary:hover:not(:disabled) {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #ffffff;
}
.qm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.qm-btn.is-danger {
  border-color: #fecaca;
  color: #b91c1c;
}
.qm-btn.is-danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* Actions modal — basit overlay + center'ed dialog. */
.qm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.qm-modal-overlay[hidden] { display: none !important; }
.qm-modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
  width: 480px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.qm-modal-header h2 {
  margin: 0;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #1e293b;
}
.qm-modal-close {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
}
.qm-modal-close:hover {
  background: #f1f5f9;
  color: #475569;
}
.qm-modal-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
}
.qm-modal-context {
  font-size: 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #475569;
}
.qm-modal-context strong { color: #1e293b; }
.qm-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.qm-modal-action-btn {
  width: 100%;
  text-align: center;
  padding: 10px 14px;
  font-size: 12px;
}
.qm-modal-hint {
  font-size: 11px;
  line-height: 1.6;
}
.qm-modal-hint strong { color: #475569; }
.qm-status {
  font-size: 12px;
}
.qm-status.is-error { color: #dc2626; }
.qm-status.is-success { color: #16a34a; }

/* Computed Columns card — user-defined formulas. */
.qm-formulas-card .qm-card-header {
  align-items: center;
  padding: 12px 18px;
}
.qm-formulas-add-btn {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 11px;
}
.qm-formulas-save-btn {
  padding: 5px 12px;
  font-size: 11px;
}
.qm-formulas-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.qm-formulas-list:empty + .qm-formulas-empty,
.qm-formulas-empty {
  display: none;
}
.qm-formulas-list:empty ~ .qm-formulas-empty {
  display: block;
  padding: 18px 22px 22px;
  font-size: 12px;
  line-height: 1.5;
}
.qm-formulas-empty code {
  background: #f1f5f9;
  color: #1e293b;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.qm-formula-row {
  display: grid;
  grid-template-columns: 200px 1fr auto auto;
  gap: 10px;
  align-items: start;
  padding: 10px 18px;
  border-bottom: 1px solid #f1f5f9;
}
.qm-formula-row:last-child { border-bottom: 0; }
.qm-formula-row.is-error {
  background: #fef2f2;
}
.qm-formula-alias-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 7px 10px;
  background: #ffffff;
  color: #1e293b;
  min-width: 0;
}
.qm-formula-expr-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 7px 10px;
  background: #ffffff;
  color: #1e293b;
  resize: vertical;
  min-height: 36px;
  max-height: 140px;
  line-height: 1.4;
  width: 100%;
  min-width: 0;
}
.qm-formula-alias-input:focus,
.qm-formula-expr-input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}
.qm-formula-include-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 8px;
  cursor: pointer;
  user-select: none;
}
.qm-formula-include-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #7c3aed;
  cursor: pointer;
}
.qm-formula-delete-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  align-self: start;
}
.qm-formula-delete-btn:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fecaca;
}
.qm-formula-error {
  grid-column: 1 / -1;
  padding: 4px 0 0;
  color: #dc2626;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Generated SQL panel — pre-formatted, dark code theme. */
.qm-sql-card .qm-card-header {
  /* Header'da meta + copy button bir arada; copy sağa yapışsın. */
  align-items: center;
  padding: 12px 18px;
  gap: 12px;
}

/* Auto/Custom mode tabs — küçük segmented pill. */
.qm-sql-mode-tabs {
  display: inline-flex;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  overflow: hidden;
  background: #f1f5f9;
}
.qm-sql-mode-tab {
  appearance: none;
  background: transparent;
  border: 0;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.qm-sql-mode-tab:hover:not(.is-active) {
  background: #e2e8f0;
  color: #1e293b;
}
.qm-sql-mode-tab.is-active {
  background: #7c3aed;
  color: #ffffff;
}

/* Custom SQL textarea — pre ile aynı koyu zemin/font. */
.qm-sql-custom {
  display: block;
  width: 100%;
  min-height: 240px;
  padding: 20px 24px;
  margin: 0;
  background: #0f172a;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  border: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  resize: vertical;
  outline: none;
  white-space: pre;
  overflow-x: auto;
  scrollbar-color: #475569 #1e293b;
  scrollbar-width: thin;
  box-sizing: border-box;
  caret-color: #c4b5fd;
}
.qm-sql-custom:focus {
  box-shadow: inset 0 0 0 2px #7c3aed;
}
.qm-sql-custom::placeholder {
  color: #64748b;
  font-style: italic;
}
.qm-sql-custom::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.qm-sql-custom::-webkit-scrollbar-track {
  background: #1e293b;
}
.qm-sql-custom::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 5px;
  border: 2px solid #1e293b;
}
.qm-sql-custom::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
.qm-sql-save-btn {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 11px;
}
.qm-sql-copy-btn {
  padding: 5px 12px;
  font-size: 11px;
}
.qm-sql-pre {
  margin: 0;
  /* Daha rahat nefes alma — 20px dikey, 24px yatay; özellikle sol
     kenardaki kolon adlarının kart kenarına yapışmaması için. */
  padding: 20px 24px;
  background: #0f172a;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  /* Dikey scroll YOK — içerik kadar uzar; sayfa-seviyesi scroll halleder.
     Yatay overflow için scroll var (uzun expression'lar). */
  overflow-x: auto;
  overflow-y: visible;
  white-space: pre;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  /* Custom scrollbar — koyu zeminle uyumlu. */
  scrollbar-color: #475569 #1e293b;
  scrollbar-width: thin;
}
.qm-sql-pre::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.qm-sql-pre::-webkit-scrollbar-track {
  background: #1e293b;
}
.qm-sql-pre::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 5px;
  border: 2px solid #1e293b;
}
.qm-sql-pre::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
.qm-sql-pre code {
  font-family: inherit;
  background: transparent;
  color: inherit;
  white-space: pre;
}
/* Basic SQL keyword highlight via class hooks (set by JS). */
.qm-sql-pre .sql-keyword { color: #c4b5fd; font-weight: 700; }
.qm-sql-pre .sql-string { color: #fbbf24; }
.qm-sql-pre .sql-number { color: #67e8f9; }
.qm-sql-pre .sql-comment { color: #64748b; font-style: italic; }
.qm-sql-pre .sql-table { color: #86efac; }

/* Result panel */
.qm-result-wrap {
  position: relative;
  overflow-x: auto;
  max-height: 70vh;
  overflow-y: auto;
}
.qm-result-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.qm-result-table thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  border-bottom: 1px solid #cbd5e1;
  padding: 6px 8px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 1;
}
.qm-result-table tbody td {
  border-bottom: 1px solid #f1f5f9;
  padding: 4px 8px;
  color: #1e293b;
  white-space: nowrap;
}
.qm-result-table tbody tr:hover td { background: #fafafa; }
.qm-result-table tbody td.is-numeric {
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.qm-result-empty {
  padding: 28px 18px;
  text-align: center;
  font-size: 12px;
}
.qm-result-empty.is-hidden { display: none; }

@media (max-width: 900px) {
  .qm-grid { grid-template-columns: 1fr; }
  .qm-schema-card { position: static; max-height: 280px; }
}

/* ===================== Version Timeline widgets ===================== */
/* VYG Puzzle AI — Inner&Outer table'ın üzerindeki dashboard kartları. */

.vt-card {
  margin: 6px 0 8px;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Country filter — mevcut finance-multiselect-trigger görünümünü taklit
   eden basit <select>. Tek seçim, churn_ai'da yok ama version timeline
   widget'larını filtreliyor. */
.product-ai-country-select {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid #e3e8f1;
  border-radius: 8px;
  background: #fcfdff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='m6 8.5-4-4h8z'/%3E%3C/svg%3E")
    no-repeat right 10px center / 10px;
  color: #161b26;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
}
.product-ai-country-select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

/* vt-filters row kaldırıldı — main filter row paylaşılıyor. Status'u
   bir mini header satırında gösteriyoruz. */
.vt-status-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 6px;
  margin-bottom: 4px;
  min-height: 18px;
}
.vt-filters {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.vt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}
.vt-field-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vt-input {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  background: #ffffff;
  color: #1e293b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.vt-input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}
select.vt-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='m6 8.5-4-4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
  padding-right: 26px;
}
.vt-status {
  margin-left: auto;
  font-size: 11px;
  align-self: end;
  padding-bottom: 6px;
}
.vt-status.is-error { color: #dc2626; }
.vt-status.is-success { color: #16a34a; }

/* Summary grid: 3 cell — Latest Version, Freshness, Available Dates table */
.vt-summary-grid {
  display: grid;
  grid-template-columns: 220px 280px minmax(0, 1fr);
  gap: 6px;
}

.vt-card-cell {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 10px 6px;
}
.vt-cell-title {
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  text-align: center;
}
.vt-cell-subtitle {
  font-size: 10px;
  color: #2563eb;
  text-align: center;
  margin-bottom: 2px;
  font-family: inherit;
  letter-spacing: 0.02em;
  min-height: 12px;
}
.vt-cell-subtitle .vt-sub-store { color: #ea580c; }
.vt-cell-subtitle .vt-sub-country { color: #16a34a; }
.vt-cell-subtitle .vt-sub-divider { color: #94a3b8; padding: 0 4px; }
.vt-cell-big {
  font-size: 22px;
  font-weight: 700;
  color: #475569;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.vt-cell-medium {
  font-size: 14px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}

/* Freshness badge */
.vt-freshness-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vt-freshness-badge {
  flex: 1 1 auto;
  padding: 8px 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 6px;
  text-transform: uppercase;
  line-height: 1.25;
}
.vt-freshness-badge.is-fresh {
  background: #86efac;
  color: #14532d;
}
.vt-freshness-badge.is-warning {
  background: #fde68a;
  color: #78350f;
}
.vt-freshness-badge.is-stale {
  background: #fecaca;
  color: #7f1d1d;
}
.vt-freshness-badge.is-neutral {
  background: #f1f5f9;
  color: #475569;
}

/* Üst KPI kartlarındaki değerleri renkli pill'lere dönüştür — package
   indigo, store turuncu, country yeşil, version mor (Level pill family),
   date slate, sayısal değerler indigo soft. Subtitle'daki vt-sub-* renk
   ailesiyle birebir uyumlu. */
.vt-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.4;
  border: 1px solid transparent;
}
.vt-pill-version {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #5b21b6;
  border-color: #c4b5fd;
  font-size: 13px;
}
.vt-pill-pkg {
  background: #dbeafe;
  color: #1e3a8a;
  border-color: #bfdbfe;
}
.vt-pill-store {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fed7aa;
}
.vt-pill-country {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.vt-pill-date {
  background: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
}
.vt-pill-num {
  background: #eef2ff;
  color: #3730a3;
  border-color: #e0e7ff;
}
/* Bigtitle versiyon hücresinde pill biraz daha büyük dursun. */
.vt-cell-big .vt-pill-version {
  font-size: 18px;
  padding: 6px 18px;
}
.vt-cell-medium .vt-pill-date {
  font-size: 14px;
  padding: 4px 14px;
}

/* Available Dates table (single row) */
.vt-summary-cell-wide {
  overflow-x: auto;
}
.vt-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.vt-summary-table th,
.vt-summary-table td {
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #f1f5f9;
}
.vt-summary-table th {
  color: #64748b;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vt-summary-table td {
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}
.vt-min-hint {
  color: #94a3b8;
  font-size: 10px;
  margin-left: 4px;
}
.vt-min-hint:hover { color: #2563eb; }

/* Bottom grid: 2 cells — Version Totals + Daily Stacked Bar */
.vt-bottom-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 6px;
}

/* Version Totals card — flex column so table area can fill + scroll */
.vt-version-totals {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vt-version-table-wrap {
  flex: 1 1 0;
  min-height: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
}
.vt-version-table-wrap::-webkit-scrollbar { width: 8px; }
.vt-version-table-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.vt-version-table-wrap::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.vt-version-table-wrap::-webkit-scrollbar-track { background: transparent; }

/* Version Totals table */
.vt-version-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.vt-version-table thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
}
.vt-version-table thead th {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #cbd5e1;
  font-size: 10px;
  text-transform: uppercase;
  color: #b91c1c;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.vt-version-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px dashed #f1f5f9;
  font-variant-numeric: tabular-nums;
}
.vt-version-table tbody tr:last-child td { border-bottom: 0; }
.vt-version-table tbody tr.is-grand-total td {
  font-weight: 700;
  background: #fef2f2;
  color: #b91c1c;
}
.vt-version-table tbody td:last-child { text-align: right; }

/* Daily stacked bar chart container */
.vt-daily-chart {
  min-height: 113px;
}
.vt-daily-stack {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  padding-top: 4px;
}
.vt-chart-svg-wrap {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.vt-bar-seg {
  cursor: pointer;
  transition: opacity 0.08s;
}
.vt-bar-seg:hover { opacity: 0.85; }
.vt-bar-tooltip {
  position: absolute;
  pointer-events: none;
  background: #1e293b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.vt-bar-tooltip[hidden] { display: none; }
.vt-daily-stack svg {
  width: 100%;
  height: auto;
  display: block;
}
.vt-daily-stack .vt-bar-label {
  font-size: 10px;
  fill: #1e293b;
  font-family: inherit;
  pointer-events: none;
  font-weight: 700;
}
/* Bar tepesindeki günlük toplam — segment label'larından küçük,
   net ama dikkat dağıtmasın. */
.vt-daily-stack .vt-bar-total {
  font-size: 8px;
  fill: #0f172a;
  font-family: inherit;
  pointer-events: none;
  font-weight: 700;
}
.vt-daily-stack .vt-axis-label {
  font-size: 8px;
  fill: #64748b;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
.vt-daily-stack .vt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vt-daily-stack .vt-legend-vertical {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0 0 4px;
  min-width: 130px;
}
.vt-daily-stack .vt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: inherit;
  color: #475569;
}
.vt-daily-stack .vt-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

@media (max-width: 700px) {
  .vt-daily-stack { flex-direction: column; }
  .vt-daily-stack .vt-legend-vertical {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }
}

@media (max-width: 1100px) {
  .vt-summary-grid { grid-template-columns: 1fr; }
  .vt-bottom-grid { grid-template-columns: 1fr; }
}

/* (Önceki global radius override'ı kaldırıldı — her kartın kendi spesifik
   radius değeri uygulanıyor.) */

/* ===== Önerilerle Doldur — tutar chip'leri ===== */
.finance-suggest-fills-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px; }
.finance-suggest-fills-amount {
  font-size: 0.8rem; font-weight: 700; padding: 2px 9px; border-radius: 6px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.finance-suggest-fills-amount.is-try { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.finance-suggest-fills-amount.is-usd { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.finance-suggest-fills-amount.is-converted { background: #f8fafc; color: #64748b; border: 1px dashed #cbd5e1; font-weight: 600; }
.finance-suggest-fills-amount-tag {
  font-style: normal; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; opacity: 0.7; margin-left: 4px;
}

/* ===== Filtre input'larında temizle (✕) butonu ===== */
.finance-input-clear-wrap { position: relative; display: block; }
.finance-input-clear-wrap .finance-filter-input { width: 100%; padding-right: 32px; }
.finance-input-clear {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%;
  background: #e2e8f0; color: #475569; font-size: 10px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.finance-input-clear:hover { background: #cbd5e1; color: #0f172a; }
.finance-input-clear[hidden] { display: none; }

/* ===== HR Master — tablo ekrana sığsın (yatay scroll yok) =====
   Game Keys tablosu width:max-content ile yatay scroll yapıyor; HR'de
   kolonları 100% genişliğe table-layout:fixed ile dağıtıp ekrana sığdırıyoruz.
   Body hücreleri uzun içerikte ellipsis; başlıklar okunaklı kalsın diye sarar. */
#hr-master-content .game-keys-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
#hr-master-content .game-keys-table-wrap { overflow-x: hidden; }
#hr-master-content .game-keys-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#hr-master-content .game-keys-table thead th { white-space: normal; }
#hr-master-content .game-keys-table .hr-action-col { width: 36px; }

/* ===== HR Master — satır sil butonu ===== */
.hr-action-col { width: 40px; text-align: center; }
.hr-row-delete {
  width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: #cbd5e1; font-size: 13px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hr-row-delete:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

/* ===== HR Master — Organizasyon Şeması (sürükle-bağla) ===== */
.hr-org-card { padding: 14px 16px; margin-top: 16px; }
.hr-org-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.hr-org-head strong { color: #e85d75; font-size: 0.95rem; }
.hr-org-sub { color: #94a3b8; font-size: 0.76rem; flex: 1 1 auto; min-width: 0; }
.hr-org-save { flex-shrink: 0; border: none; background: #7c3aed; color: #fff; font-weight: 700; font-size: 0.82rem; padding: 7px 16px; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
.hr-org-save:hover:not(:disabled) { background: #6d28d9; }
.hr-org-save:disabled { background: #e2e8f0; color: #94a3b8; cursor: default; }
.hr-org-canvas { position: relative; height: 580px; overflow: auto; border: 1px solid #e8ecf3; border-radius: 10px; background: #fafbfe; background-image: radial-gradient(#e2e8f0 1px, transparent 1px); background-size: 20px 20px; }
.hr-org-svg { position: absolute; top: 0; left: 0; pointer-events: none; }
.hr-org-edit { flex-shrink: 0; border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca; font-weight: 700; font-size: 0.82rem; padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.hr-org-edit:hover { background: #e0e7ff; }
.hr-org-edit.is-active { background: #16a34a; border-color: #16a34a; color: #fff; }
.hr-org-edge { pointer-events: none; }
.hr-org-canvas.is-edit .hr-org-edge { pointer-events: stroke; cursor: pointer; }
.hr-org-canvas.is-edit .hr-org-edge:hover { stroke: #dc2626 !important; }
.hr-org-node { position: absolute; box-sizing: border-box; background: #fff; border: 1px solid #d8dfeb; border-radius: 10px; padding: 8px 12px 8px 10px; box-shadow: 0 2px 6px rgba(15,23,42,0.08); cursor: default; user-select: none; }
.hr-org-canvas.is-edit .hr-org-node { cursor: grab; }
.hr-org-node.is-dragging { cursor: grabbing; box-shadow: 0 8px 20px rgba(15,23,42,0.2); z-index: 20; border-color: #a5b4fc; }
.hr-org-node-name { font-size: 0.84rem; font-weight: 700; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-org-node-sub { font-size: 0.7rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-org-handle { display: none; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 50%; background: #6366f1; border: 2px solid #fff; cursor: crosshair; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.hr-org-canvas.is-edit .hr-org-handle { display: block; }
.hr-org-handle:hover { background: #4338ca; transform: translateY(-50%) scale(1.15); }

/* ===== HR Master — Genel Bakış dashboard ===== */
.hr-dashboard { padding: 18px 20px; margin-bottom: 16px; }
.hr-dash-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.4fr);
  gap: 22px;
  align-items: stretch;
}
.hr-dash-panel { display: flex; flex-direction: column; min-width: 0; }
.hr-dash-title {
  font-size: 0.95rem; font-weight: 700; color: #e85d75;
  margin-bottom: 10px; letter-spacing: 0.01em;
}
.hr-dash-chart { width: 100%; }
.hr-dash-chart svg, .hr-dash-treemap svg { width: 100%; height: auto; display: block; }
.hr-dash-dist {
  display: grid;
  grid-template-columns: 1fr minmax(190px, 240px);
  gap: 16px; align-items: start;
}
.hr-dash-treemap { min-width: 0; }
.hr-dash-disttable table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.hr-dash-disttable th, .hr-dash-disttable td {
  padding: 6px 8px; text-align: left; border-bottom: 1px solid #eef1f6;
}
.hr-dash-disttable td.hr-dist-count, .hr-dash-disttable th.hr-dist-count { text-align: right; font-variant-numeric: tabular-nums; }
.hr-dash-disttable .hr-dist-head th { color: #e85d75; font-weight: 700; border-bottom: 2px solid #f1d4d9; }
.hr-dash-disttable .hr-dist-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 7px; vertical-align: middle;
}
.hr-dash-disttable .hr-dist-total td { font-weight: 700; border-top: 2px solid #e2e8f0; border-bottom: none; }
.hr-treemap-label { font-weight: 600; pointer-events: none; }
.hr-treemap-count { pointer-events: none; }
@media (max-width: 1080px) {
  .hr-dash-grid { grid-template-columns: 1fr; }
  .hr-dash-dist { grid-template-columns: 1fr; }
}

/* ===== Incentive Track — 2026 harcama + Oyun→Şirket board ===== */
.it-org-wrap { margin-bottom: 16px; }
.it-org-grid { display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.8fr); gap: 16px; align-items: start; }
.it-org-panel { background: #fff; border: 1px solid #e8ecf3; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; min-width: 0; }
.it-org-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.it-org-panel-head strong { color: #e85d75; font-size: 0.95rem; }
.it-org-panel-sub { color: #94a3b8; font-size: 0.78rem; }
.it-org-apply { margin-left: auto; border: none; background: #7c3aed; color: #fff; font-size: 0.8rem; font-weight: 700; padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.it-org-apply:hover:not(:disabled) { background: #6d28d9; }
.it-org-apply:disabled { background: #e2e8f0; color: #94a3b8; cursor: default; }
.it-org-chip.is-pending { border-color: #f59e0b; border-style: dashed; background: #fffbeb; }
.it-org-panel-body { overflow-y: auto; max-height: 340px; }
/* Sol: 2026 spend tablosu */
.it-org-spendtable { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.it-org-spendtable th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; font-weight: 700; padding: 4px 8px; border-bottom: 2px solid #eef1f6; position: sticky; top: 0; background: #fff; }
.it-org-spendtable th.num, .it-org-spendtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.it-org-spendtable td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; color: #1f2937; }
.it-org-spendtable td.it-org-spend-name { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-org-spendtable td.num { font-weight: 700; color: #0369a1; }
.it-org-spend-plat { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #6366f1; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.it-org-spend-dash { color: #cbd5e1; }
.it-org-spend-total td { font-weight: 700; border-top: 2px solid #e2e8f0; border-bottom: none; color: #0f172a; }
/* Sağ: board */
/* Yükseklik ~10 grup; taşarsa board kendi içinde dikey kayar. Sol panel
   grid stretch ile aynı yüksekliğe oturur (ikisi de eşit). */
.it-org-board { display: flex; gap: 12px; overflow-x: auto; overflow-y: auto; max-height: 440px; padding-bottom: 6px; }
.it-org-col { flex: 1 1 0; min-width: 160px; background: #f8fafc; border: 1px solid #e8ecf3; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; transition: background 0.12s, border-color 0.12s; }
.it-org-col-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; padding: 0 2px; }
.it-org-col-count { background: #e2e8f0; color: #475569; border-radius: 999px; padding: 1px 7px; font-size: 0.72rem; }
/* 10 grup — şirket sütunu içinde dikey dizili mini drop kutuları */
.it-org-col-groups { display: flex; flex-direction: column; gap: 6px; }
.it-org-group { display: flex; align-items: stretch; gap: 6px; background: #fff; border: 1px solid #eef1f6; border-radius: 8px; padding: 5px 6px; min-height: 34px; transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; }
.it-org-group.is-drop { background: #ecfdf5; border-color: #6ee7b7; box-shadow: inset 0 0 0 2px #a7f3d0; }
.it-org-group-label { flex-shrink: 0; width: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.74rem; font-weight: 800; color: #94a3b8; background: #f1f5f9; border-radius: 6px; }
.it-org-group-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.it-org-group-empty { color: #cbd5e1; font-size: 0.72rem; }
.it-org-group-total { flex-shrink: 0; align-self: center; font-size: 0.76rem; font-weight: 800; color: #0369a1; font-variant-numeric: tabular-nums; background: #ecfeff; border: 1px solid #bae6fd; border-radius: 6px; padding: 2px 7px; }
.it-org-chip { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #fff; border: 1px solid #d8dfeb; border-radius: 7px; padding: 5px 7px 5px 9px; font-size: 0.8rem; font-weight: 600; color: #1f2937; cursor: grab; user-select: none; box-shadow: 0 1px 2px rgba(15,23,42,0.05); }
.it-org-chip:hover { border-color: #a5b4fc; }
.it-org-chip.is-dragging { opacity: 0.4; }
.it-org-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.it-org-chip-amt { flex-shrink: 0; font-size: 0.74rem; font-weight: 700; color: #0369a1; font-variant-numeric: tabular-nums; background: #ecfeff; border: 1px solid #bae6fd; border-radius: 5px; padding: 1px 6px; }
.it-org-chip-x { flex-shrink: 0; border: none; background: transparent; color: #cbd5e1; cursor: pointer; font-size: 10px; line-height: 1; padding: 2px 3px; border-radius: 4px; }
.it-org-chip-x:hover { background: #fee2e2; color: #dc2626; }
.it-org-drag-row { cursor: grab; }
.it-org-drag-row:hover td { background: #f1f5ff; }
.it-org-drag-row.is-dragging td { opacity: 0.4; }
@media (max-width: 1080px) {
  .it-org-grid { grid-template-columns: 1fr; }
}

/* Code — düzenlenemez plain hücre */
.it-readonly-cell { display: inline-block; padding: 0 6px; color: #64748b; font-size: 11px; white-space: nowrap; }

/* ===== HR İzin — satır detay/edit modal butonu ===== */
.iz-modal-col { width: 34px; text-align: center; padding: 4px 4px; }
#hr-izin-content .game-keys-table .iz-modal-col { width: 32px; }
.iz-modal-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.iz-modal-btn:hover { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }

/* ===== Incentive Hub — satır detay/edit modal butonu ===== */
.inc-action-col { width: 34px; text-align: center; padding: 4px 4px; }
.inc-modal-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.inc-modal-btn:hover { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }

/* ===== All Transactions — satır detay/edit modal butonu ===== */
.tx-action-col { width: 34px; text-align: center; padding: 2px 4px; }
.tx-modal-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tx-modal-btn:hover { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }

/* ===== Incentive Track — satır detay/edit modal butonu ===== */
.it-action-col { width: 34px; text-align: center; padding: 4px 4px; }
.it-modal-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.it-modal-btn:hover { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }

/* Game Keys — üst uyarı banner'ı (company ↔ SDK key tutarsızlığı) */
.game-keys-warn-banner { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 9px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; color: #92400e; font-size: 0.82rem; line-height: 1.4; }
.game-keys-warn-banner-icon { flex-shrink: 0; color: #f59e0b; font-size: 15px; }
.game-keys-warn-banner-text strong { color: #b45309; }
.game-keys-warn-banner-text > div + div { margin-top: 4px; }

/* Game Keys — eksik alan uyarı ikonu (satır sonu) */
.gk-row-warn { display: inline-flex; align-items: center; color: #f59e0b; font-size: 13px; cursor: help; flex-shrink: 0; }
.gk-row-ok { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: #16a34a; font-size: 11px; font-weight: 800; background: #dcfce7; border: 1px solid #86efac; border-radius: 50%; cursor: default; }

/* ===== Game Keys — satır detay/edit modalı ===== */
.game-keys-modal-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.game-keys-modal-btn:hover { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.gk-modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,0.45); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto; }
.gk-modal { background: #fff; width: 100%; max-width: 560px; border-radius: 14px; box-shadow: 0 20px 60px rgba(15,23,42,0.3); display: flex; flex-direction: column; max-height: calc(100vh - 96px); }
.gk-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eef1f6; }
.gk-modal-head strong { font-size: 1.05rem; color: #0f172a; }
.gk-modal-close { border: none; background: transparent; font-size: 16px; color: #94a3b8; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.gk-modal-close:hover { background: #f1f5f9; color: #0f172a; }
.gk-modal-body { padding: 14px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.gk-modal-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; }
.gk-modal-field-copy { flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; }
.gk-modal-field-copy:hover { background: #eef2ff; border-color: #c7d2fe; }
.gk-modal-label { font-size: 0.8rem; font-weight: 600; color: #475569; }
.gk-modal-input { width: 100%; padding: 7px 10px; border: 1px solid #d8dfeb; border-radius: 8px; font-size: 0.85rem; color: #1f2937; background: #fff; }
.gk-modal-input:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,0.2); }
.gk-modal-readonly { font-size: 0.82rem; color: #64748b; padding: 7px 0; }
.gk-modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid #eef1f6; }
.gk-modal-copy { border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.gk-modal-copy:hover { background: #e0e7ff; }
.gk-modal-status { flex: 1 1 auto; font-size: 0.8rem; color: #94a3b8; }
.gk-modal-cancel { border: 1px solid #e2e8f0; background: #fff; color: #475569; font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.gk-modal-cancel:hover { background: #f8fafc; }
.gk-modal-save { border: none; background: #7c3aed; color: #fff; font-weight: 700; padding: 8px 18px; border-radius: 8px; cursor: pointer; }
.gk-modal-save:hover:not(:disabled) { background: #6d28d9; }
.gk-modal-save:disabled { background: #cbd5e1; cursor: default; }
@media (max-width: 560px) { .gk-modal-row { grid-template-columns: 1fr auto; gap: 4px 8px; } }