/* ============================================================
   Bütçe Yönetimi — ortak tema (theme.css)
   Tüm sayfalar bu dosyayı bootstrap.min.css'ten SONRA yükler.
   Buradaki :root değişkenleri Bootstrap 5.3'ün kendi CSS
   değişkenlerini geçersiz kılar, böylece btn-primary, btn-success,
   btn-danger, badge bg-*-subtle, card, bg-dark, bg-light gibi
   hazır Bootstrap sınıfları TEK YERDEN reskinlenir; sayfa
   içeriklerinde class isimlerini değiştirmeye gerek kalmaz.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --- Bootstrap'in kendi değişkenlerini geçersiz kılıyoruz --- */
  --bs-primary: #1c2a33;
  --bs-primary-rgb: 28, 42, 51;
  --bs-success: #2f6f4e;
  --bs-success-rgb: 47, 111, 78;
  --bs-danger: #9c3b2e;
  --bs-danger-rgb: 156, 59, 46;
  --bs-warning: #b1802c;
  --bs-warning-rgb: 177, 128, 44;
  --bs-secondary: #5c6b75;
  --bs-secondary-rgb: 92, 107, 117;
  --bs-info: #3d6b8a;
  --bs-info-rgb: 61, 107, 138;
  --bs-dark: #1c2a33;
  --bs-dark-rgb: 28, 42, 51;
  --bs-light: #f4f2ec;
  --bs-light-rgb: 244, 242, 236;
  --bs-body-bg: #f4f2ec;
  --bs-body-color: #1c2a33;
  --bs-border-color: #e2ddd0;
  --bs-border-radius: 0.6rem;
  --bs-border-radius-sm: 0.45rem;
  --bs-border-radius-lg: 0.85rem;
  --bs-border-radius-xl: 1.1rem;
  --bs-link-color: #1c2a33;
  --bs-link-hover-color: #0f171c;
  --bs-link-color-rgb: 28, 42, 51;
  --bs-link-hover-color-rgb: 15, 23, 28;

  /* --- Kendi kısayol değişkenlerimiz (JSP'lerde de kullanılıyor) --- */
  --ink: #1c2a33;
  --ink-soft: #5c6b75;
  --paper: #f4f2ec;
  --surface: #ffffff;
  --border: #e2ddd0;
  --positive: #2f6f4e;
  --positive-soft: #e7f0ea;
  --negative: #9c3b2e;
  --negative-soft: #f6e8e5;
  --warning: #b1802c;
  --warning-soft: #f5eddd;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--paper);
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, serif;
}

a { color: var(--ink); }
a:hover { color: #0f171c; }

/* --- Kartlar: her sayfada tekrarlanan "card border-0 shadow-sm rounded-*" görünümü --- */
.card {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none !important;
}

/* --- Tablolar --- */
.table {
  --bs-table-hover-bg: var(--paper);
}
.table thead th {
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom-width: 1px;
  font-size: 0.85rem;
  text-transform: none;
}

/* Herhangi bir tabloya eklenince: açıklama dışındaki sütunlar tek satırda kalır,
   tablo sığmazsa yatay kaydırılır (bkz. .table-responsive sarmalayıcı). */
.nowrap-table th, .nowrap-table td { white-space: nowrap; }
.nowrap-table td.wrap-cell { white-space: normal; min-width: 160px; }
.nowrap-table td.wrap-cell .badge,
.nowrap-table th.wrap-cell { white-space: normal; }

/* --- Navbar --- */
.navbar.bg-dark {
  background-color: var(--ink) !important;
}

/* --- Form kontrolleri --- */
.form-control, .form-select {
  border-color: var(--border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 0.2rem rgba(28, 42, 51, 0.12);
}

/* --- Auth sayfaları (login / register) ortak kart --- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-card {
  max-width: 440px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.auth-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--positive-soft);
  color: var(--positive);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 0.75rem;
}

/* ============================================================
   Ana Sayfa (home.jsp) bileşenleri
   ============================================================ */
.figure {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.ledger-hero {
  background: var(--ink);
  color: #f4f2ec;
  border-radius: 18px;
  padding: 2rem 2rem 1.75rem;
}
.ledger-hero__month { font-size: 1.5rem; font-weight: 500; margin: 0; color: #fff; }
.ledger-hero__caption { color: #a9b3ba; font-size: 0.9rem; margin-top: 0.15rem; }
.ledger-filter input[type="date"] {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 8px;
}
.ledger-filter input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.ledger-filter .btn { border-radius: 8px; }

.ledger-sum {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.ledger-sum__term .figure { font-size: 2rem; font-weight: 500; line-height: 1; display: block; }
.ledger-sum__term .label { color: #a9b3ba; font-size: 0.85rem; margin-top: 0.35rem; }
.ledger-sum__op { font-family: 'Fraunces', serif; font-size: 1.6rem; color: #6d7a82; align-self: center; }
.ledger-sum__term.positive .figure { color: #7fc9a3; }
.ledger-sum__term.negative .figure { color: #e7998c; }
.ledger-sum__term.balance .figure { color: #fff; }
.ledger-sum__term.balance .figure.is-negative { color: #e7998c; }

.ledger-projection { margin-top: 1.1rem; font-size: 0.9rem; color: #c3cbd0; }
.ledger-projection strong { color: #fff; font-weight: 600; }
.ledger-projection strong.is-negative { color: #e7998c; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  height: 100%;
}
.panel-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.due-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}
.due-row:last-child { border-bottom: none; }
.due-row__title { font-weight: 600; font-size: 0.95rem; }
.due-row__meta { color: var(--ink-soft); font-size: 0.8rem; }
.due-row__amount { color: var(--negative); font-weight: 600; font-variant-numeric: tabular-nums; }

.empty-note {
  background: var(--positive-soft);
  color: var(--positive);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
}
.empty-note.neutral { background: var(--paper); color: var(--ink-soft); }

.limit-row + .limit-row { margin-top: 1.1rem; }
.limit-row__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; margin-bottom: 0.35rem; }
.limit-row__name { font-weight: 600; }
.limit-row__figures { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.limit-row__figures.is-over { color: var(--negative); font-weight: 600; }
.limit-track { height: 8px; border-radius: 99px; background: var(--paper); overflow: hidden; }
.limit-track__fill { height: 100%; border-radius: 99px; background: var(--positive); }
.limit-track__fill.is-warning { background: var(--warning); }
.limit-track__fill.is-over { background: var(--negative); }
.limit-edit-btn { border: none; background: none; color: var(--ink-soft); padding: 0 0 0 0.4rem; }
.limit-edit-btn:hover { color: var(--ink); }

.month-picker input[type="month"] { border-radius: 8px; border: 1px solid var(--border); }

.quick-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
}
.quick-link:hover { background: var(--paper); color: var(--ink); }
.quick-link i { font-size: 1.1rem; color: var(--ink-soft); }

/* ============================================================
   Mobil / dar ekran düzenlemeleri
   Tüm sayfalar theme.css'e bağlı olduğu için bu bölüm tek
   yerden bütün uygulamayı mobilde standart hale getirir.
   ============================================================ */

/* Yatay taşmayı önlemeye çalışırken NOT: html/body'e overflow-x: hidden koymak
   navbar'daki "sticky-top" (yapışkan) konumlandırmayı bazı mobil tarayıcılarda
   (özellikle iOS Safari) bozuyor - bu da açılan menünün tıklanamaz/görünmez
   hale gelmesine yol açıyordu. Bunun yerine sadece taşma ihtimaline karşı
   max-width bırakıyoruz; asıl "ekran küçülüyor" sorunu viewport meta etiketiyle
   zaten çözüldü. */
html, body {
  max-width: 100%;
}

/* Dokunmatik hedefler rahat tıklanabilir kalsın */
.btn, .form-control, .form-select {
  min-height: 38px;
}

/* Tablet ve altı */
@media (max-width: 768px) {
  .container, .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .card {
    padding: 1.1rem !important;
  }
  .panel {
    padding: 1.1rem;
  }
}

/* Telefon genişliği */
@media (max-width: 576px) {
  .container, .container-fluid {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  .card, .panel {
    padding: 0.95rem !important;
    border-radius: 12px;
  }

  h1, h2, h3, h4, h5 { letter-spacing: -0.01em; }

  /* Ana Sayfa özet şeridi: büyük rakamlar dar ekranda küçülsün */
  .ledger-hero {
    padding: 1.25rem 1.15rem 1rem;
    border-radius: 14px;
  }
  .ledger-hero__month { font-size: 1.2rem; }
  .ledger-hero__caption { font-size: 0.8rem; }
  .ledger-sum {
    gap: 0.6rem 1rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
  }
  .ledger-sum__term .figure { font-size: 1.35rem; }
  .ledger-sum__op { font-size: 1.1rem; }
  .ledger-projection { font-size: 0.82rem; }
  .ledger-filter { width: 100%; }
  .ledger-filter input[type="date"] { flex: 1 1 auto; }

  /* Tablolar: biraz daha küçük yazı, daha az iç boşluk -> daha az yatay kaydırma */
  .table { font-size: 0.85rem; }
  .table thead th { font-size: 0.75rem; }
  .nowrap-table td.wrap-cell { min-width: 120px; }

  /* İşlem buton grupları dar ekranda sıkışmasın */
  .btn-group-sm > .btn {
    padding: 0.32rem 0.5rem;
  }

  /* Hızlı işlem kartları / bekleyen gider satırları alt alta daha rahat dursun */
  .due-row, .quick-link {
    font-size: 0.88rem;
  }

  /* Auth (giriş/kayıt) kartı kenarlardan taşmasın */
  .auth-card {
    padding: 1.5rem !important;
  }

  /* Modallar dar ekranda kenarlara yapışmasın */
  .modal-dialog {
    margin: 0.75rem;
  }
}

/* Ana Sayfa'daki "Ödenmesi beklenen giderler" ve "Kategori bütçe limitleri"
   listeleri uzun olunca sayfayı aşağı doğru itmesin diye sabit yükseklikte,
   kendi içinde kaydırılabilir tutuluyor (yaklaşık 4-5 satır görünür kalır). */
.scroll-list {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.scroll-list::-webkit-scrollbar {
  width: 6px;
}
.scroll-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 99px;
}
.scroll-list::-webkit-scrollbar-track {
  background: transparent;
}

/* "Ek Hesap" (overdraft) rozeti - Banka(mavi)/Nakit(yeşil)/Kredi Kartı(sarı)
   ile karışmasın diye ayrı, mor tonlu bir rozet. */
.badge-overdraft {
  background-color: #ece7f6;
  color: #6a4fb3;
  border: 1px solid #d9cff0;
}

/* "Döviz" ve "Altın" rozetleri - Banka/Nakit/Kredi Kartı/Ek Hesap ile karışmasın. */
.badge-forex {
  background-color: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.badge-gold {
  background-color: #fdf1d6;
  color: #9a6a0a;
  border: 1px solid #f6ddA0;
}

/* "Bu bir Harcama mı, Ödeme mi?" segment kontrolü (Giderler sayfası) —
   Bootstrap'in stok kırmızı/sarı buton stilinden uzaklaşıp tema paletine
   (ink/negative/warning) oturan sade bir görünüm. */
.entry-type-toggle {
  display: flex;
  gap: 0.6rem;
}
.entry-type-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.entry-type-option {
  flex: 1;
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.5rem;
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  transition: border-color .12s ease, background-color .12s ease;
}
.entry-type-option:hover {
  background: var(--paper);
}
.entry-type-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.entry-type-sub {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}
.entry-type-radio:checked + .entry-type-option.type-purchase {
  border-color: var(--negative);
  background: var(--negative-soft);
}
.entry-type-radio:checked + .entry-type-option.type-purchase .entry-type-title {
  color: var(--negative);
}
.entry-type-radio:checked + .entry-type-option.type-payment {
  border-color: var(--warning);
  background: var(--warning-soft);
}
.entry-type-radio:checked + .entry-type-option.type-payment .entry-type-title {
  color: var(--warning);
}
.entry-type-option.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}