/* CariPRO - ek yardımcı stiller (Tailwind CDN yanında) */

/* --------------------------------------------------------------------------
   RESPONSIVE TİPOGRAFİ + GLOBAL SATIR ARALIĞI
   - Font boyutu ekran genişliğine göre (vw = %1 viewport width)
   - Tüm sayfalarda tutarlı line-height
--------------------------------------------------------------------------- */
:root {
  /* 360px civarı ≈ 13px, 1280px+ ≈ 16px (maks) */
  --tx-root-font: clamp(13px, calc(0.35vw + 12px), 16px);
  --tx-body-line: 1.22;

  /* Liste (tablo) satır aralığı: referans fiş/ekstre → biraz daha kompakt */
  --tx-table-row-py: 0.36rem;
}

html { font-size: var(--tx-root-font); }
body {
  line-height: var(--tx-body-line);
  font-family: 'Inter', sans-serif;
}
h1, h2, h3, .font-serif {
  font-family: 'Playfair Display', serif;
}

/* --------------------------------------------------------------------------
   REMIX BENZERİ PREMIUM VURGU (AMBER)
   - Mevcut JS içinde kullanılan Tailwind "blue" utility'lerini görsel olarak
     amber tonu ile eşler (işlevi bozmaz, sadece tema hissi değişir).
--------------------------------------------------------------------------- */

/* Temel renk eşlemesi */
.text-blue-700 { color: #d97706 !important; }
.text-blue-600 { color: #f59e0b !important; }
.text-blue-500 { color: #f59e0b !important; }
.text-blue-400 { color: #fbbf24 !important; }

.bg-blue-700 { background-color: #d97706 !important; }
.bg-blue-600 { background-color: #f59e0b !important; }
.bg-blue-100 { background-color: #fef3c7 !important; }
.bg-blue-50  { background-color: #fffbeb !important; }

.border-blue-600 { border-color: #f59e0b !important; }
.border-blue-200 { border-color: #fde68a !important; }
.border-blue-100 { border-color: #fef3c7 !important; }

/* Tailwind variant class'ları (hover/focus/group) */
.hover\:bg-blue-700:hover { background-color: #d97706 !important; }
.hover\:bg-blue-600:hover { background-color: #f59e0b !important; }
.hover\:bg-blue-100:hover { background-color: #fef3c7 !important; }
.hover\:text-blue-600:hover { color: #f59e0b !important; }

.focus\:border-blue-200:focus { border-color: #fde68a !important; }
.focus\:ring-blue-50:focus { --tw-ring-color: rgba(251, 191, 36, 0.25) !important; }
.focus\:ring-blue-100:focus { --tw-ring-color: rgba(251, 191, 36, 0.35) !important; }

/* group-focus-within:text-blue-500 */
.group:focus-within .group-focus-within\:text-blue-500 { color: #f59e0b !important; }

/* opacity sınıflı arka planlar */
.bg-blue-600\/10 { background-color: rgba(245, 158, 11, 0.10) !important; }
.bg-indigo-600\/10 { background-color: rgba(245, 158, 11, 0.10) !important; }

/* shadow color tonunu amber'e yaklaştır */
.shadow-blue-100 { --tw-shadow-color: rgba(251, 191, 36, 0.25) !important; }

/* Scrollbar gizleme (side menu / tablolar) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Varsayılan yazdırma sayfa ayarı (ekran yazdırmalarında) */
@page {
  size: A4 portrait;
  margin: 10mm;
}

/* Yazdırma sırasında UI butonlarını gizle + renk/arka planları koru */
@media print {
  .no-print { display: none !important; }
  body {
    background: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* Number input spinner'larını kaldır (mobil/desktop) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* Tüm listelerde (tablolarda) satır aralığını daralt */
table th,
table td {
  padding-top: var(--tx-table-row-py) !important;
  padding-bottom: var(--tx-table-row-py) !important;
}

/* Listelerde (tablolarda) zebra satır rengi (odd/even) */
table tbody tr:nth-child(odd) {
  background: rgba(15, 23, 42, 0.02);
}
table tbody tr:nth-child(even) {
  background: transparent;
}

/* Zebra + hover birlikte çalışsın (tailwind hover:bg-* varsa da sorun olmaz) */
table tbody tr:hover {
  background: rgba(15, 23, 42, 0.04) !important;
}

/* Yazdırmada zebra arka planlarını kapat */
@media print {
  table tbody tr {
    background: transparent !important;
  }
}

/* --------------------------------------------------------------------------
   MOBİL GÖRÜNÜM OPTİMİZASYONU (sadece küçük ekranlar)
   - Daha küçük ama okunabilir fontlar
   - Daha sık satır aralığı
   - Daha kompakt padding/gap
   - Gereksiz boşlukları azaltır
   Not: Tailwind CDN sınıfları üzerine "mobile override" uygular.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    /* Küçük ekranlarda daha kompakt ama okunabilir */
    --tx-root-font: clamp(12.25px, 3.25vw, 13.25px);
    --tx-body-line: 1.18;

    /* Fiş/ekstre referansına göre tüm listelerde satır yüksekliği */
    --tx-table-row-py: 0.22rem;
  }

  /* Başlık/Metin ölçekleri */
  .text-4xl { font-size: 1.6rem !important; line-height: 1.9rem !important; }
  .text-3xl { font-size: 1.45rem !important; line-height: 1.75rem !important; }
  .text-2xl { font-size: 1.25rem !important; line-height: 1.55rem !important; }
  .text-xl  { font-size: 1.12rem !important; line-height: 1.4rem !important; }
  .text-lg  { font-size: 0.98rem !important; line-height: 1.28rem !important; }
  .text-base{ font-size: 0.95rem !important; line-height: 1.3rem !important; }
  .text-sm  { font-size: 0.82rem !important; line-height: 1.15rem !important; }
  .text-xs  { font-size: 0.75rem !important; line-height: 1.05rem !important; }

  /* Satır aralığı sıklaştır */
  .leading-relaxed { line-height: 1.35 !important; }
  .leading-tight { line-height: 1.15 !important; }

  /* Yaygın padding/gap sınıflarını sıkıştır */
  .p-12 { padding: 1.25rem !important; }
  .p-10 { padding: 1.1rem !important; }
  .p-8  { padding: 1rem !important; }
  .p-6  { padding: 0.9rem !important; }
  .p-5  { padding: 0.8rem !important; }
  .p-4  { padding: 0.7rem !important; }

  .px-12 { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
  .px-10 { padding-left: 1rem !important;  padding-right: 1rem !important; }
  .px-6  { padding-left: 0.9rem !important; padding-right: 0.9rem !important; }
  .px-5  { padding-left: 0.8rem !important; padding-right: 0.8rem !important; }
  .px-4  { padding-left: 0.7rem !important; padding-right: 0.7rem !important; }

  .py-6 { padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; }
  .py-5 { padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; }
  .py-4 { padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; }

  .gap-10 { gap: 1rem !important; }
  .gap-8  { gap: 0.9rem !important; }
  .gap-6  { gap: 0.75rem !important; }

  /* space-y-* yardımcıları */
  .space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem !important; }
  .space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.1rem !important; }
  .space-y-8  > :not([hidden]) ~ :not([hidden]) { margin-top: 0.9rem !important; }
  .space-y-6  > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem !important; }

  /* Input/Button yükseklikleri */
  .h-16 { height: 3.25rem !important; }
  .h-14 { height: 3rem !important; }
  .h-12 { height: 2.75rem !important; }
  .h-10 { height: 2.5rem !important; }

  /* Tablo satırlarını daha kompakt yap */
  table th,
  table td {
    padding-top: var(--tx-table-row-py) !important;
    padding-bottom: var(--tx-table-row-py) !important;
  }

  /* Fiş listesi + Ekstre listesi: küçük ekranda taşma/üst üste binme olmasın */
  .tx-table {
    /* table-fixed yüzde kolonlar küçük ekranda sıkışıp taşabiliyor; kaydırma için min-width vereceğiz */
    font-size: 0.78rem;
  }
  .tx-table th {
    font-size: 0.62rem !important; /* başlıkları daha sıkı */
    letter-spacing: 0.14em !important;
  }
  .tx-table td {
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    overflow: hidden;
  }
  .tx-table td .text-lg,
  .tx-table .text-lg {
    font-size: 0.88rem !important;
    line-height: 1.15rem !important;
  }
  .tx-table--receipts { min-width: 760px; }
  .tx-table--ekstre   { min-width: 680px; }

  /* Sidebar biraz daha dar olsun */
  .w-72 { width: 16rem !important; }
}



/* --------------------------------------------------------------------------
   PREMIUM GÖRÜNÜM (REMIX+) - SADECE UI
   - Arka planı daha "premium" hissettiren yumuşak gradient + ışık lekeleri
   - Kart/panel yüzeylerinde cam efekti (hafif) + daha kaliteli gölge
   - Butonlarda amber gradient + daha rafine hover/focus
   Not: Sadece .cari-premium scope içinde çalışır (işlevi bozmaz).
--------------------------------------------------------------------------- */

.cari-premium {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Uygulamanın ana wrapper'ında kullanılan Tailwind arbitrary class: bg-[#F8FAFC] */
.cari-premium .bg-\[\#F8FAFC\] {
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(251,191,36,0.18), transparent 55%),
    radial-gradient(900px 520px at 85% 5%, rgba(245,158,11,0.10), transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #fff7ed 55%, #f1f5f9 100%) !important;
}

/* Genel sayfa arkaplanı: çok hafif doku */
.cari-premium body,
body.cari-premium {
  background:
    radial-gradient(1000px 600px at 12% 0%, rgba(251,191,36,0.14), transparent 58%),
    radial-gradient(800px 520px at 88% 8%, rgba(245,158,11,0.08), transparent 62%),
    linear-gradient(180deg, #f8fafc 0%, #fff7ed 55%, #f1f5f9 100%);
}

/* Kart/panel yüzeyleri: bg-white + border-slate-200 kombinasyonunda cam hissi */
.cari-premium .bg-white.border-slate-200,
.cari-premium .bg-white.border-slate-100 {
  background-color: rgba(255,255,255,0.86) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(15, 23, 42, 0.10) !important;
}

/* Varsayılan border'ları biraz daha yumuşat */
.cari-premium .border-slate-200 { border-color: rgba(15, 23, 42, 0.10) !important; }
.cari-premium .border-slate-100 { border-color: rgba(15, 23, 42, 0.08) !important; }

/* Gölge kalitesi (Tailwind shadow* sınıfları) */
.cari-premium .shadow-sm {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 8px 22px rgba(15, 23, 42, 0.06) !important;
}
.cari-premium .shadow-xl {
  box-shadow:
    0 10px 35px rgba(15, 23, 42, 0.10),
    0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
.cari-premium .shadow-2xl {
  box-shadow:
    0 18px 60px rgba(15, 23, 42, 0.16),
    0 6px 18px rgba(15, 23, 42, 0.10) !important;
}

/* Form alanları: daha premium input yüzeyi + focus amber halo */
.cari-premium :is(input, select, textarea) {
  border-color: rgba(15, 23, 42, 0.14);
}
.cari-premium :is(input, select, textarea):focus {
  border-color: rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.22) !important;
}

/* CTA Buton: amber gradient + derinlik (bg-blue-600 remap'ini daha premium yapar) */
.cari-premium :is(button, a, input[type="button"], input[type="submit"]).bg-blue-600,
.cari-premium :is(button, a, input[type="button"], input[type="submit"]).bg-blue-700 {
  background-image: linear-gradient(135deg, #fbbf24 0%, #f59e0b 45%, #d97706 100%) !important;
  box-shadow: 0 16px 32px rgba(245, 158, 11, 0.22) !important;
}
.cari-premium :is(button, a, input[type="button"], input[type="submit"]).bg-blue-600:hover,
.cari-premium :is(button, a, input[type="button"], input[type="submit"]).bg-blue-700:hover {
  filter: brightness(0.98) saturate(1.06);
  box-shadow: 0 18px 38px rgba(245, 158, 11, 0.26) !important;
}
.cari-premium :is(button, a, input[type="button"], input[type="submit"]).bg-blue-600:active,
.cari-premium :is(button, a, input[type="button"], input[type="submit"]).bg-blue-700:active {
  transform: translateY(0.5px);
}

/* Seçim rengi */
.cari-premium ::selection { background: rgba(251, 191, 36, 0.28); }

/* İnce ikon butonları: hover'da hafif amber ışıma */
.cari-premium .group:hover .group-hover\:bg-blue-600 {
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.20) !important;
}

/* Düğmelerde daha rafine focus (keyboard) */
.cari-premium :is(button, a, input[type="button"], input[type="submit"]):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.26) !important;
}

/* Print'te tüm premium efektleri kapat (çıktı temiz kalsın) */
@media print {
  body.cari-premium {
    background: #ffffff !important;
  }
  .cari-premium .bg-\[\#F8FAFC\] {
    background: #ffffff !important;
  }
  .cari-premium .bg-white.border-slate-200,
  .cari-premium .bg-white.border-slate-100 {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .cari-premium .shadow-sm,
  .cari-premium .shadow-xl,
  .cari-premium .shadow-2xl {
    box-shadow: none !important;
  }
}

/* Global compact padding override */
.p-8{padding:0.5rem !important;}
.p-7{padding:1rem !important;}