:root{
  --bg-main:#F3F4F6;
  --bg-tint:#EAF6EE;
  --card:#FFFFFF;
  --text:#1F2933;
  --muted:#6B7280;
  --border:#D1D5DB;

  --green:#1F9D55;
  --green-hover:#157347;
  --green-dark: #0F7A3E;   /* kasa & kritik yeşil */

  --warn:#FACC15;
  --danger:#DC2626;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background: var(--bg-main);   /* düz gri: sayfa uzasa da tül yok */
  position:relative;
}

/* Fixed gradient overlay (sadece ekranda, sayfa uzayınca yayılmaz) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(234,246,238,.75) 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(241,248,243,.65) 0%, transparent 60%);
  z-index:0;
}


body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/></filter>\
  <rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/></svg>");
  z-index:1;
}

.app{ position:relative; z-index:1; min-height:100vh; }

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(243,244,246,.75);
  border-bottom: 1px solid rgba(209,213,219,.75);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 24px;
}

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

.logo-mark{
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid rgba(209,213,219,.9);
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(31,157,85,.18), transparent 70%),
    linear-gradient(135deg, #ffffff, #f4f7f5);
  display:grid;
  place-items:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.brand-title .name{ font-weight:800; letter-spacing:.4px; }
.brand-title .tag{ font-size:12px; color:var(--muted); margin-top:2px; }

.actions{ display:flex; align-items:center; gap:10px; }

.search{
  width:min(420px, 45vw);
  display:flex;
  align-items:center;
  background: rgba(255,255,255,.8);
  border:1px solid rgba(209,213,219,.9);
  border-radius:12px;
  padding:10px 12px;
}

.search input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font-size:14px;
}

.btn{
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  border:1px solid rgba(209,213,219,.9);
  background: rgba(255,255,255,.85);
  cursor:pointer;
}

.btn-primary{
  background: var(--green);
  border-color: var(--green);
  color:#fff;
}
.btn-primary:hover{
  background: var(--green-hover);
  border-color: var(--green-hover);
}

/* ===== KASA / LEDGER PREMIUM HOVER EFFECT ===== */

/* Yeşil tutar yazıları */
.amount-green,
.ledger-amount.income{
  color: var(--green-dark);
  font-weight:700;
}

/* Kart hover */
.card:hover{
  box-shadow: 0 18px 40px rgba(15,122,62,.18);
  border-color: var(--green-dark);
}

/* Tablodaki satır hover */
.table tr:hover{
  background: rgba(15,122,62,.06);
}

/* Hover sırasında iç yazıları yeşile yaklaştır */
.card:hover .amount-green,
.table tr:hover td{
  color: var(--green-dark);
}

/* ===== Money colors (Ledger) ===== */
.money{ font-weight:800; }
.money-in{ color: var(--green-dark); }
.money-out{ color: var(--danger); }

/* ===== TOPBAR NAV PREMIUM EFFECT ===== */

.nav .navlink{
  position:relative;
  padding:10px 14px;
  border-radius:10px;
  transition: all .18s ease;
}

/* Hover glow & left rail */
.nav .navlink::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:0;
  background: var(--green);
  border-radius:10px;
  opacity:0;
  transition: width .18s ease, opacity .18s ease;
}

.nav .navlink:hover{
  background: rgba(31,157,85,.08);
  color: var(--green);
}

.nav .navlink:hover::before{
  width:3px;
  opacity:1;
}

/* ÇIKIŞ – canlı ama premium kırmızı */
.nav .navlink.danger{
  color:#B91C1C;
  font-weight:700;
}

.nav .navlink.danger:hover{
  background: rgba(185,28,28,.08);
  color:#DC2626;
}

.nav .navlink.danger::before{
  background:#DC2626;
}


/* --- HOTFIX: dropdown/select click overlay killer --- */
select, .select, .form-select, .js-facility-select {
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* Eğer kartların / containerların pseudo-elementleri select'in üstüne biniyorsa */
.card::before, .card::after,
.filters::before, .filters::after,
.pagehead::before, .pagehead::after,
.content::before, .content::after {
  pointer-events: none !important;
}

/* Bazı template'lerde overlay class'ları olabiliyor */
.overlay, .backdrop, .modal-backdrop, .glass, .cover {
  pointer-events: none !important;
}


/* --- FIX: dropdown option text görünmüyor (final override) --- */
select, .select, .form-select, .js-facility-select {
  color: #111 !important;
  background-color: #fff !important;
  -webkit-text-fill-color: #111 !important;
}
select option { color:#111 !important; background-color:#fff !important; }


/* --- FIX: macOS native select dark color-scheme yüzünden option text görünmüyor --- */
select, .select, .form-select, .js-facility-select {
  color-scheme: light !important;
}


/* === MOBILE TWEAKS (theme) === */
@media (max-width: 720px){
  /* Menü/başlıkların fazla şişmesini engelle */
  .topbar{ backdrop-filter: blur(8px); }
  input, select{
    box-shadow: none !important;
  }
}


/* === VCONSYST360 MOBILE PRO THEME TWEAKS === */

/* select text görünmeme buglarına karşı güvenli override */
select, .select, .form-select, .js-facility-select{
  -webkit-text-fill-color: inherit;
  text-indent: 0;
  opacity: 1;
}

/* Mobilde üst bar daha hafif */
@media (max-width: 760px){
  .topbar{
    position: sticky;
    top: 8px;
    backdrop-filter: blur(10px);
  }
}


/* === DRAWER Z-INDEX FIX (select overlay) === */
/* Drawer açılınca sayfadaki select'ler hamburger menünün üstüne çıkmasın */
body.m-lock select,
body.m-lock .select,
body.m-lock .form-select,
body.m-lock .js-facility-select{
  z-index: 1 !important;
}

/* Drawer/backdrop her şeyin üstünde olsun */
.m-drawer{
  position: fixed !important;
  inset: 0 !important;
  z-index: 50000 !important;
}
.m-drawer-panel{
  z-index: 50001 !important;
}
/* === /DRAWER Z-INDEX FIX === */


/* === VCONSYST360 MOBILE OVERFLOW FIX V1 === */

/* 1) Sağdaki beyaz sütun (horizontal overflow) kill */
html, body { overflow-x: hidden !important; }
.app, .content, .card { overflow-x: hidden !important; }
* { max-width: 100%; }

/* 2) Hamburger sadece mobilde görünsün */
.m-menu-btn { display: none !important; }

/* 3) Drawer ölçülerini güvenli yap (100vw overflow yapabiliyor) */
.m-drawer{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 99999;
}
.m-drawer-backdrop{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.m-drawer-panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 340px);
  max-width: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  will-change: transform;
}
.m-drawer.open .m-drawer-panel{ transform: translateX(0); }

/* 4) Mobilde üst nav’ı kapat (drawer kullan) */
@media (max-width: 760px){
  .m-menu-btn{ display: inline-flex !important; }
  .topbar{ gap: 10px; }
  .topbar .nav{ display: none !important; } /* üstteki linkler gizlenir */
  .brand .tag{ display:none; }              /* üst bar küçülür */
}

/* 5) Desktop’ta drawer’ı tamamen kapat (sürpriz layout taşması olmasın) */
@media (min-width: 761px){
  .m-drawer{ display:none !important; }
}