/* DataNet Admin Starter — shadcn-style utility class'lar.
   Tailwind Play CDN bu dosyanın üstüne biner; aşağıda Tailwind'de olmayan
   ya da projeye özel olan kompozit class'lar tanımlanır. */

:root {
  --background: #ffffff;
  --foreground: #080b25;
  --card: #ffffff;
  --card-foreground: #080b25;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --border: rgba(0, 0, 0, 0.1);
  --input-background: #f3f3f5;
  --primary-foreground: #ffffff;
  --ring: #a1a1aa;
  --radius: 0.625rem;

  /* ===== Uniq marka renkleri =====
     uniqchemicals.com logosundan alındı. Tailwind tarafındaki
     eşleri views/partials/_brand-theme.ejs içinde (brand-* / accent-*). */
  --brand-50:  #f1f2fa;
  --brand-100: #e0e3f5;
  --brand-200: #c2c8ea;
  --brand-400: #6670b8;
  --brand-600: #2a3186;   /* baskın lacivert — birincil */
  --brand-700: #1e2566;
  --brand-800: #161b4d;
  --brand-900: #0f1338;
  --accent-500: #009fe3;  /* vurgu camgöbeği */
  --accent-600: #0088c4;

  --primary: var(--brand-600);
}

html, body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #eef2f8;
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Card ===== */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}
.card-body   { padding: 1.5rem; }

/* ===== Button ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1rem;
  border-radius: 0.5rem;
  padding: 0.55rem 1rem;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary   { background: var(--brand-600); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-700); }
/* Turuncu aksan butonu — birincil eylemin yanında ikincil vurgu için */
.btn-accent    { background: var(--accent-500); color: #fff; }
.btn-accent:hover:not(:disabled) { background: var(--accent-600); }
.btn-secondary { background: #f3f4f6; color: #111827; }
.btn-secondary:hover:not(:disabled) { background: #e5e7eb; }
.btn-outline   { background: #fff; border-color: #e5e7eb; color: #111827; }
.btn-outline:hover:not(:disabled) { background: #f9fafb; }
.btn-ghost     { background: transparent; color: #374151; }
.btn-ghost:hover:not(:disabled) { background: #f3f4f6; }
.btn-danger    { background: #dc2626; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; }

/* ===== Form ===== */
.input, .select {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.55rem 0.875rem;
  font-size: 0.875rem;
  color: #111827;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(32, 48, 96, 0.15);
}
.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}

/* ===== Standart tablo / panel / rozet =====
   Müşteri onaylı görünüm (29.09.2026): views/borc-takibi/sabit-giderler.ejs.
   Ana içerik alanındaki (main) TÜM tablolar bu görünüme çekilir; sayfalardaki
   Tailwind th/td dolgu-renkleri bilerek ezilir (!important).
   İstisnalar: koyu Satış terminali (.sp / .sp-tbl), th'sinde kendi zemini olan
   renkli başlıklar, .tbl-ozel ile işaretlenen tablolar. */
.tbl, main table:not(.sp-tbl):not(.tbl-ozel):not(.sp *) {
  width: 100%; border-collapse: collapse; font-size: 0.75rem !important;
}
main table:not(.sp-tbl):not(.tbl-ozel):not(.sp *) thead th,
main table:not(.sp-tbl):not(.tbl-ozel):not(.sp *) thead td,
.tbl th {
  padding: 0.5rem 0.75rem !important; font-weight: 600 !important; font-size: inherit !important;
  color: var(--brand-700) !important; background: #f1f5f9;
  text-transform: none !important; letter-spacing: normal !important;
  border-bottom: 0 !important; white-space: nowrap;
}
main table:not(.sp-tbl):not(.tbl-ozel):not(.sp *) thead tr { background: #f1f5f9 !important; }
main table:not(.sp-tbl):not(.tbl-ozel):not(.sp *) tbody td,
main table:not(.sp-tbl):not(.tbl-ozel):not(.sp *) tfoot td,
.tbl td {
  padding: 0.375rem 0.75rem !important; border-bottom: 1px solid #f1f5f9; font-size: inherit;
}
main table:not(.sp-tbl):not(.tbl-ozel):not(.sp *) tbody tr:hover,
.tbl tbody tr:hover { background: #f8fafc; }
main table:not(.sp-tbl):not(.tbl-ozel):not(.sp *) td.text-right,
main table:not(.sp-tbl):not(.tbl-ozel):not(.sp *) td.num { font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr.clickable { cursor: pointer; }

/* Rozet: hafif köşeli, dolgulu (tam yuvarlak değil) */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.25rem 0.5rem; border-radius: 0.25rem;
  font-size: 0.6875rem; font-weight: 600; line-height: 1rem; white-space: nowrap;
}
.rozet { display: inline-block; min-width: 84px; text-align: center; padding: 0.25rem 0.5rem;
  border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.rozet-yesil   { background: #16a34a; color: #fff; }
.rozet-turuncu { background: #ea580c; color: #fff; }
.rozet-kirmizi { background: #fde2e2; color: #c0392b; }
.rozet-mavi    { background: #dbeafe; color: #1d4ed8; }
.rozet-gri     { background: #e5e7eb; color: #4b5563; }

/* Panel: başlık + arama/filtre çubuğu + tablo */
.panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.panel-head { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1rem; }
.panel-baslik { font-size: 1.125rem; font-weight: 700; color: var(--brand-700); line-height: 1.75rem; }
.panel-govde { overflow-x: auto; padding: 0 0.75rem 0.75rem; }
.panel-ara, .panel-select {
  height: 2rem; font-size: 0.875rem; border: 1px solid #cbd5e1; border-radius: 0.375rem;
  background: #fff; padding: 0 0.5rem; }
.panel-ara { width: 11rem; padding-left: 2rem; }
.panel-ara:focus, .panel-select:focus { outline: none; box-shadow: 0 0 0 2px #1a6fe0; }

/* Kart başlığı panel başlığı gibi: lacivert, kalın, ayraçsız */
.card-header { padding: 0.75rem 1rem; border-bottom: 0; }
.card-header :is(h1, h2, h3) { font-size: 1.125rem; font-weight: 700; color: var(--brand-700); }

/* ===== Koyu kabuk: sol menü + üst bar =====
   Müşteri tasarımı (27.09.2026): sol ve üst koyu antrasit, içerik açık mavi-gri.
   Marka lacivertı (#2a3186) bir ton derinleştirildi ki beyaz logo ve menü
   yazıları öne çıksın; aktif menü parlak mavi dolgu. */
/* Tesis görseli, sayfa zemininde solgun (müşteri isteği 29.09.2026).
   Sabit (fixed) katman en arkada; kartlar/paneller beyaz kaldığı için okunurluk bozulmaz. */
.app-zemin { background: transparent; }
.app-zemin::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(244, 244, 244, 0.90), rgba(244, 244, 244, 0.86));
}

.sidebar-dark {
  background: linear-gradient(180deg, #0d1d45 0%, #0a1636 55%, #080b25 100%);
  box-shadow: 1px 0 0 0 rgba(255, 255, 255, 0.06);
}
.topbar-dark {
  background: linear-gradient(90deg, #0d1d45 0%, #10245a 100%);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 2px 8px -2px rgba(10, 10, 10, 0.35);
}
.topbar-dark .btn-ghost { color: #e2e8f0; }
.topbar-dark .btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Menü kaydırma çubuğu koyu zemine uygun */
.sidebar-menu::-webkit-scrollbar-thumb       { background: rgba(255, 255, 255, 0.15); }
.sidebar-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
.sidebar-menu { scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }

/* Tesis fotoğrafı: üst kenarı lacivert zemine erir */
.sidebar-foto {
  height: 170px;
  background:
    linear-gradient(180deg, #080b25 0%, rgba(10, 10, 10, 0.55) 35%, rgba(10, 10, 10, 0) 70%);
}
@media (max-height: 760px) { .sidebar-foto { display: none; } }

/* ===== Sidebar nav ===== */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #cbd5e1;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.nav-link i { color: #94a3b8; transition: color .15s; }
.nav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-link:hover i { color: #fff; }
/* Aktif menü: parlak mavi dolgu (tasarımdaki gibi) */
.nav-link.active {
  background: linear-gradient(90deg, #2f7bf2 0%, #1f63d6 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px -4px rgba(47, 123, 242, 0.6);
}
.nav-link.active i { color: #fff; }
.nav-link .badge-count {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  font-size: 0.6875rem;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
}

/* ===== Marka yüzeyi (karşılama bloğu + login paneli) =====
   Lacivert gradyan + iki yumuşak ışık odağı + ince ızgara dokusu. Tek bir
   CSS class olarak tutuluyor ki login ve dashboard aynı görünümü paylaşsın. */
.brand-surface {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px circle at 88% -10%, rgba(255, 120, 0, 0.30), transparent 45%),
    radial-gradient(700px circle at 8% 110%, rgba(255, 150, 40, 0.28), transparent 50%),
    linear-gradient(135deg, #161b4d 0%, #2a3186 55%, #1e2566 100%);
  color: #fff;
}
/* Giriş sayfası: tesis görseli, üstünde koyu antrasit perde (beyaz metin okunsun) */
.brand-surface.login-foto {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.80) 0%, rgba(10, 10, 10, 0.50) 42%, rgba(10, 10, 10, 0.90) 100%);
}

/* Izgara dokusu — çok düşük opaklıkta, metni bozmaz */
.brand-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}
/* Üst kenarda turuncu marka şeridi */
.brand-surface::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-500) 0%, #ffa970 35%, transparent 85%);
}
.brand-surface > * { position: relative; z-index: 1; }

/* Karşılama bloğundaki özet metrik — koyu zeminde okunur kontrast */
.hero-metric {
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: background-color .18s, border-color .18s, transform .18s;
}
.hero-metric:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.hero-metric-label { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.hero-metric-value { font-size: 1.25rem; font-weight: 700; color: #fff; margin-top: 0.2rem; line-height: 1.2; }
.hero-metric-note  { font-size: 0.6875rem; color: rgba(255,255,255,0.55); margin-top: 0.1rem; }

/* Koyu zeminde logo — beyaz varyant zaten saydam, yalnız hafif gölge veriyoruz */
.brand-logo-dark { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }

/* ===== Lucide icon sizing ===== */
.icon    { width: 1.25rem;  height: 1.25rem;  stroke-width: 2; }
.icon-sm { width: 1rem;     height: 1rem;     stroke-width: 2; }
.icon-xs { width: 0.875rem; height: 0.875rem; stroke-width: 2; }
.icon-lg { width: 1.5rem;   height: 1.5rem;   stroke-width: 2; }

/* ===== Klavye odağı (WCAG 2.4.7 / 2.4.11) =====
   Fare tıklamasında halka çıkmasın diye :focus-visible; 2px kalınlık ve
   marka laciverti ile 3:1 üstü kontrast sağlanır. Tek yerden tanımlıdır —
   bileşenlerde ayrıca focus stili yazmaya gerek yok. */
:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 0.375rem;
}
.btn:focus-visible,
a:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
/* Koyu kabukta (sidebar/topbar) odak halkası açık renk */
.nav-link:focus-visible,
.sidebar-dark a:focus-visible, .sidebar-dark button:focus-visible,
.topbar-dark a:focus-visible, .topbar-dark button:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
/* Koyu zeminde (hero, sidebar aktif satır) halka beyaz olsun */
.hero-metric a:focus-visible,
.nav-link.active:focus-visible { outline-color: #fff; }

/* ===== Hareket azaltma tercihi (WCAG 2.3.3) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Tablo taşma koruması =====
   Kart gövdesine doğrudan konan tablolar dar ekranda sayfayı yatayda
   kaydırıyordu (mobil/tablet). Tek kural ile her tablo kendi kutusunda
   kayar; sayfa gövdesi sabit kalır. */
.card-body:has(> table) { overflow-x: auto; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
::-webkit-scrollbar-track  { background: transparent; }

/* ===== Alpine ===== */
[x-cloak] { display: none !important; }

/* ===== Rapor bandı (müşteri tasarımı 29.09.2026) =====
   Başlık + filtre + seçim şeridi + dönem özeti tek koyu blokta; topbar'ın yerini alır.
   Sabit alan: sticky, kaydırınca üstte kalır (müşteri 05.10.2026). Markup: views/partials/_rapor-bandi.ejs */
.rapor-bandi {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(90deg, #0d1d45 0%, #10245a 100%);
  box-shadow: 0 2px 8px -2px rgba(10, 10, 10, 0.35);
  color: #fff;
}
.rapor-lbl { display: block; font-size: 0.6875rem; font-weight: 600; color: #e2e8f0; line-height: 1rem; }
.rapor-inp {
  display: block; height: 2.25rem; margin-top: 0.25rem; min-width: 6.5rem; padding: 0 0.625rem;
  font-size: 0.8125rem; font-weight: 500; color: #0f172a; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 0.375rem;
}
.rapor-pb { display: inline-flex; margin-top: 0.25rem; height: 2.25rem; overflow: hidden;
  border-radius: 0.375rem; border: 1px solid #cbd5e1; background: #fff; }
.rapor-pb a { display: inline-flex; align-items: center; padding: 0 0.875rem; font-size: 0.8125rem;
  font-weight: 600; color: #334155; text-decoration: none; }
.rapor-pb a + a { border-left: 1px solid #e2e8f0; }
.rapor-pb a.on { background: #0a1636; color: #fff; }
.rapor-btn { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem;
  padding: 0 0.875rem; border-radius: 0.375rem; font-size: 0.8125rem; font-weight: 600;
  color: #fff; border: 0; cursor: pointer; text-decoration: none; }
.rapor-btn-yesil   { background: #16a34a; } .rapor-btn-yesil:hover   { background: #15803d; }
.rapor-btn-kirmizi { background: #ef4444; } .rapor-btn-kirmizi:hover { background: #dc2626; }
.rapor-secim { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  padding: 0.625rem 0.875rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 0.375rem; }
.rapor-secim-dolu { border-color: rgba(255, 255, 255, 0.6); }
.rapor-cip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.5rem 0.3rem 0.875rem;
  border-radius: 9999px; background: #fff; color: #0f172a; font-size: 0.8125rem; }
.rapor-cip button { width: 1.125rem; height: 1.125rem; margin-left: 0.25rem; border-radius: 9999px;
  line-height: 1; color: #475569; }
.rapor-cip button:hover { background: #e2e8f0; }
.rapor-btn-cizgi { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 0.375rem; color: #fff;
  font-size: 0.8125rem; font-weight: 600; background: transparent; cursor: pointer; }
.rapor-btn-cizgi:hover { background: rgba(255, 255, 255, 0.1); }
.rapor-bandi .btn-ghost { color: #e2e8f0; }
.rapor-bandi .btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Otomatik başlık bandı olan sayfalarda gövdedeki eski büyük başlık tekrar etmesin (müşteri 05.10.2026);
   varlık adı taşıyan detay başlıkları (cari ekstre, fatura no…) h1-kalsin ile kalır. */
.band-oto h1:not(.h1-kalsin) { display: none; }

/* Qlik seçimi: tıklanabilir öğeler (eski _secim-seridi içindeki stil) */
[data-sec-alan] { cursor: pointer; }
tr[data-sec-alan]:hover > td, [data-sec-alan].dn-hover:hover { background: #eff6ff; }
.dn-secili, tr.dn-secili > td { background: #dbeafe !important; font-weight: 600; }
.dn-secim-yukleniyor body { cursor: progress; }
.dn-secim-yukleniyor main { opacity: .55; transition: opacity .15s; }

/* ===== Satış tasarımı ortak bileşenleri (müşteri tasarımı 29.09.2026) ===== */
/* Gradyan KPI kartı — views/partials/_kpi-kart.ejs */
.kpi { position: relative; display: flex; align-items: center; gap: 1rem; min-width: 0;
  padding: 0.875rem 1.125rem; border-radius: 0.5rem; color: #fff;
  box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.25); overflow: hidden; }
.kpi[data-sec-alan]:hover { filter: brightness(1.06); }
.kpi-mavi      { background: linear-gradient(135deg, #1d4ed8 0%, #2f80ed 100%); }
.kpi-yesil     { background: linear-gradient(135deg, #059669 0%, #16a34a 100%); }
.kpi-mor       { background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%); }
.kpi-turuncu   { background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%); }
.kpi-kirmizi   { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }
.kpi-camgobegi { background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%); }
.kpi-ikon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; stroke-width: 1.5; opacity: 0.95; }
.kpi-etiket { font-size: 0.8125rem; font-weight: 500; opacity: 0.95; }
.kpi-deger { font-size: 1.5rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-ayrac { margin: 0 0.6rem; font-weight: 300; opacity: 0.6; }
.kpi-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem;
  font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.kpi-yes { color: #bbf7d0; font-weight: 700; }
.kpi-kir { color: #fecaca; font-weight: 700; }
.kpi-turuncu .kpi-yes, .kpi-yesil .kpi-yes { color: #dcfce7; }

/* Bölüm başlığı — views/partials/_sec-baslik.ejs */
.sec-baslik { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; flex-wrap: wrap; }
.sec-ikon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
  border-radius: 9999px; background: #dbeafe; color: #1d4ed8; flex-shrink: 0; }
.sec-baslik h2 { font-size: 1.0625rem; font-weight: 700; color: #1e3a8a; line-height: 1.5rem; }
.sec-alt { font-size: 0.6875rem; color: #1d4ed8; }
.sec-arac { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Trend renkleri, rozetler */
.up { color: #16a34a; font-weight: 600; } .down { color: #dc2626; font-weight: 600; }
.pazar-ic  { background: #dbeafe; color: #1d4ed8; }
.pazar-dis { background: #e0e7ff; color: #4338ca; }

.rapor-btn-mavi { background: #1d6fe0; } .rapor-btn-mavi:hover { background: #1558b8; }

/* ===== BANKA BİLGİLERİ (views/finance/kasa-banka.ejs) — 30.09.2026 ===== */
.bb-kart { border-radius: 0.5rem; overflow: hidden; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.2); }
.bb-kart-ust { padding: 0.75rem 1rem 0.875rem; color: #fff; }
.bb-tl  .bb-kart-ust { background: linear-gradient(135deg, #0a1f4d 0%, #12337a 100%); }
.bb-usd .bb-kart-ust { background: linear-gradient(135deg, #1d4ed8 0%, #2f80ed 100%); }
.bb-eur .bb-kart-ust { background: linear-gradient(135deg, #065f46 0%, #059669 100%); }
.bb-gbp .bb-kart-ust { background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%); }
.bb-rub .bb-kart-ust { background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%); }
.bb-bayrak { width: 2rem; height: 2rem; border-radius: 9999px; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.85); background: #fff; }
.bb-bakiye { margin-top: 0.75rem; font-size: 1.625rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-giris { font-size: 0.9375rem; font-weight: 700; color: #4ade80; }
.bb-cikis { font-size: 0.9375rem; font-weight: 700; color: #fca5a5; }
.bb-kart-alt { padding: 0.25rem 1rem 0.375rem; }
.bb-satir { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; font-size: 0.8125rem; color: #334155; }
.bb-satir + .bb-satir { border-top: 1px solid #f1f5f9; }
.bb-satir span { flex: 1; } .bb-satir b { font-variant-numeric: tabular-nums; color: #0f172a; }
.bb-satir i, .bb-satir svg { color: #64748b; width: 1rem; height: 1rem; }
.bb-logo { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.375rem;
  color: #fff; font-size: 0.6875rem; font-weight: 700; flex-shrink: 0; }
.bb-grup { cursor: pointer; background: #fff; }
.bb-grup:hover > td { background: #eff6ff; }
.bb-ok { transition: transform .15s; }
.bb-acik .bb-ok { transform: rotate(90deg); }
.bb-acik .bb-grup > td { background: #f1f5f9; }
.bb-alt > td { background: #fff; }
.bb-toplam > td { background: #eef4fb; font-weight: 700; color: #0f172a; }
tr.bb-ust > th { text-align: center; background: #dbeafe; color: #1e3a8a; font-weight: 700; border-left: 1px solid #fff; }

.bb-tikla { cursor: pointer; } .bb-tikla:hover > td { background: #eff6ff; }

/* ===== Kredi Kartları (views/finance/kredi-kartlari.ejs) ===== */
.kpi-kirmizi { background: linear-gradient(135deg, #be123c 0%, #f43f5e 100%); }
.rozet-yesil-a { background: #dcfce7; color: #15803d; }

/* ===== Daraltılabilir menü (ok düğmesi) =====
   html.rail-on: menü 4rem'lik ikon şeridi. Tercih localStorage'da; kayıt yoksa
   1440px altı ekranlarda varsayılan daralmış açılır (head'deki betik). */
.rail-ac, .rail-ikon { display: none; }
@media (min-width: 1024px) {
  .app-sidebar, .app-main, .app-topbar { transition: width .18s ease, padding-left .18s ease, left .18s ease; }
  html.rail-on .app-sidebar { width: 4rem; }
  html.rail-on .app-main { padding-left: 4rem; }
  html.rail-on .app-topbar { left: 4rem; }
  html.rail-on .app-sidebar .rail-gizle,
  html.rail-on .app-sidebar .nav-ad,
  html.rail-on .app-sidebar .sidebar-foto,
  html.rail-on .app-sidebar .rail-kapat { display: none; }
  html.rail-on .app-sidebar .rail-ac { display: block; }
  html.rail-on .app-sidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
  html.rail-on .app-sidebar .sidebar-menu { padding-left: .5rem; padding-right: .5rem; overflow-x: hidden; }
  html.rail-on .app-sidebar .nav-baslik { font-size: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); margin: .25rem .5rem .5rem; }
  html.rail-on .app-sidebar .rail-bas { padding-left: 0; padding-right: 0; justify-content: center; }
  /* Daraltılmış şeritte gruplar kapalı olsa da ikonlar görünür kalır */
  html.rail-on .app-sidebar .nav-grup-govde { display: block !important; }
  html.rail-on .app-sidebar .nav-baslik { pointer-events: none; }
}