/* =====================================================================
   GREENROCK PANEL - TASARIM SİSTEMİ
   Aydınlık tema: "Kurumsal" (koyu yan menü, açık içerik, Greenrock yeşili)
   Karanlık tema: "Gece" (tamamen koyu, altın vurgu)
   Tüm renkler aşağıdaki değişkenlerden gelir; tek yerden değiştirilebilir.
   ===================================================================== */

:root,
[data-bs-theme="light"] {
  --zemin: #f4f6f8;          /* sayfa arka planı */
  --kart: #ffffff;           /* kart / tablo / form arka planı */
  --cizgi: #e5e8ec;          /* kenarlıklar */
  --yazi: #1f2933;
  --soluk: #6b7785;          /* ikincil yazılar */
  --tablo-baslik: #f8fafb;

  --vurgu: #0f9d6b;          /* marka rengi (Greenrock yeşili) */
  --vurgu-koyu: #0b7f56;
  --vurgu-acik: #e6f6f0;
  --vurgu-yazi: #ffffff;     /* vurgu rengi üzerindeki yazı */

  --menu: #14212b;
  --menu-yazi: #c7d1da;
  --menu-baslik: #7e8c99;
  --menu-hover: rgba(255, 255, 255, .06);
  --menu-aktif: #0f9d6b;
  --menu-aktif-yazi: #ffffff;
  --menu-cizgi: rgba(255, 255, 255, .08);

  --gelir: #0f9d6b;
  --gider: #d64545;
  --bekle: #d99a00;
  --bilgi: #2f6fdb;

  /* Bootstrap'in kendi değişkenleri bu renklere bağlanır */
  --bs-body-bg: var(--kart);
  --bs-body-color: var(--yazi);
  --bs-emphasis-color: #111827;
  --bs-secondary-color: var(--soluk);
  --bs-border-color: var(--cizgi);
  --bs-tertiary-bg: var(--tablo-baslik);
  --bs-link-color-rgb: 15, 157, 107;
  --bs-link-hover-color-rgb: 11, 127, 86;
}

[data-bs-theme="dark"] {
  --zemin: #0d1117;
  --kart: #161b22;
  --cizgi: #262c36;
  --yazi: #e6edf3;
  --soluk: #8b949e;
  --tablo-baslik: #1c2129;

  --vurgu: #e3b341;
  --vurgu-koyu: #c99a2e;
  --vurgu-acik: rgba(227, 179, 65, .12);
  --vurgu-yazi: #0d1117;

  --menu: #0d1117;
  --menu-yazi: #9da7b3;
  --menu-baslik: #6e7681;
  --menu-hover: rgba(255, 255, 255, .05);
  --menu-aktif: rgba(227, 179, 65, .12);
  --menu-aktif-yazi: #e3b341;
  --menu-cizgi: #262c36;

  --gelir: #3fb950;
  --gider: #f85149;
  --bekle: #d29922;
  --bilgi: #58a6ff;

  --bs-body-bg: var(--kart);
  --bs-body-color: var(--yazi);
  --bs-emphasis-color: #f0f6fc;
  --bs-secondary-color: var(--soluk);
  --bs-border-color: var(--cizgi);
  --bs-tertiary-bg: var(--tablo-baslik);
  --bs-link-color-rgb: 88, 166, 255;
  --bs-link-hover-color-rgb: 121, 184, 255;
}

/* ---------- Genel ---------- */
html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 14.5px; } }

body {
  background: var(--zemin);
  color: var(--yazi);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum";   /* rakamlar alt alta hizalı durur */
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--vurgu) 25%, transparent);
  border-color: var(--vurgu);
}

/* Ana buton marka renginde */
.btn-primary {
  --bs-btn-bg: var(--vurgu);
  --bs-btn-border-color: var(--vurgu);
  --bs-btn-color: var(--vurgu-yazi);
  --bs-btn-hover-bg: var(--vurgu-koyu);
  --bs-btn-hover-border-color: var(--vurgu-koyu);
  --bs-btn-hover-color: var(--vurgu-yazi);
  --bs-btn-active-bg: var(--vurgu-koyu);
  --bs-btn-active-border-color: var(--vurgu-koyu);
  --bs-btn-active-color: var(--vurgu-yazi);
  font-weight: 600;
}
.btn { border-radius: 8px; }
.btn-hafif {
  border: 1px solid var(--cizgi);
  background: var(--kart);
  color: var(--yazi);
  font-weight: 500;
}
.btn-hafif:hover { background: var(--tablo-baslik); color: var(--yazi); border-color: var(--cizgi); }

.card { border-color: var(--cizgi); border-radius: 10px; }
.form-control, .form-select { border-radius: 8px; }
.form-label { font-weight: 500; color: var(--soluk); font-size: .9rem; }

/* ---------- Uygulama iskeleti: yan menü + içerik ---------- */
.uygulama { display: flex; min-height: 100vh; }
.ana-alan { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.icerik { padding: 24px 28px 40px; }
@media (max-width: 991.98px) { .icerik { padding: 16px 14px 32px; } }

/* Yan menü: geniş ekranda sabit, dar ekranda ☰ ile açılan çekmece */
.yan-menu { --bs-offcanvas-width: 250px; --bs-offcanvas-bg: var(--menu); }
@media (min-width: 992px) {
  .yan-menu { position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
}
.yan-menu-ic {
  width: 240px; height: 100%; min-height: 100vh;
  background: var(--menu); color: var(--menu-yazi);
  border-right: 1px solid var(--menu-cizgi);
  display: flex; flex-direction: column; padding: 18px 12px;
  overflow-y: auto;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 2px 10px 18px; font-weight: 700; font-size: 16px; color: #fff; }
[data-bs-theme="dark"] .logo { color: var(--yazi); }
.logo-kutu { width: 32px; height: 32px; border-radius: 8px; background: var(--vurgu); color: var(--vurgu-yazi); display: grid; place-items: center; font-size: 16px; }
.logo small { display: block; font-weight: 500; font-size: 11px; color: var(--menu-baslik); }

.menu-baslik { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--menu-baslik); padding: 14px 10px 6px; }
.menu-oge {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--menu-yazi); font-weight: 500; text-decoration: none;
}
.menu-oge i { font-size: 16px; width: 18px; text-align: center; }
.menu-oge:hover { background: var(--menu-hover); color: var(--menu-yazi); }
.menu-oge.aktif { background: var(--menu-aktif); color: var(--menu-aktif-yazi); }

.menu-alt { margin-top: auto; border-top: 1px solid var(--menu-cizgi); padding: 14px 6px 0; }
.kullanici { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; font-weight: 700; text-transform: uppercase; }
[data-bs-theme="dark"] .avatar { background: var(--vurgu-acik); color: var(--vurgu); }
.kullanici b { display: block; color: var(--menu-yazi); line-height: 1.2; }
.kullanici small { color: var(--menu-baslik); }
.menu-butonlar { display: flex; gap: 6px; }
.menu-butonlar .btn {
  flex: 1; border: 1px solid var(--menu-cizgi); color: var(--menu-yazi);
  background: transparent; font-size: 13px; padding: 5px 8px;
}
.menu-butonlar .btn:hover { background: var(--menu-hover); color: #fff; }
[data-bs-theme="dark"] .menu-butonlar .btn:hover { color: var(--yazi); }

/* Dar ekranda üstteki ince şerit */
.ust-serit {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--menu); color: #fff;
  position: sticky; top: 0; z-index: 1020;
}
.ust-serit .btn { color: #fff; border-color: var(--menu-cizgi); }
[data-bs-theme="dark"] .ust-serit { border-bottom: 1px solid var(--cizgi); color: var(--yazi); }

/* ---------- Sayfa başlığı ---------- */
.sayfa-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sayfa-ust h1 { margin: 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; }
.sayfa-ust p { margin: 2px 0 0; color: var(--soluk); }
.butonlar { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Rakam kartları ---------- */
.kpi { padding: 16px 18px; height: 100%; }
.kpi-ust { display: flex; align-items: center; justify-content: space-between; color: var(--soluk); font-weight: 500; font-size: .9rem; }
.kpi-ikon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.kpi-deger { font-size: 1.6rem; font-weight: 700; margin-top: 8px; letter-spacing: -.02em; white-space: nowrap; }
.kpi-alt { font-size: .8rem; color: var(--soluk); margin-top: 2px; }

@media (max-width: 575.98px) {
  .kpi { padding: 12px 14px; }
  .kpi-deger { font-size: 1.15rem; }
  .sayfa-ust h1 { font-size: 1.3rem; }
}

.mini { padding: 12px 16px; display: flex; flex-direction: row; align-items: center; gap: 12px; height: 100%; text-decoration: none; color: inherit; }
.mini:hover { color: inherit; border-color: var(--vurgu); }
.mini b { display: block; font-size: 1.05rem; }
.mini small { color: var(--soluk); }

.ikon-gelir { background: color-mix(in srgb, var(--gelir) 14%, transparent); color: var(--gelir); }
.ikon-gider { background: color-mix(in srgb, var(--gider) 14%, transparent); color: var(--gider); }
.ikon-bekle { background: color-mix(in srgb, var(--bekle) 16%, transparent); color: var(--bekle); }
.ikon-bilgi { background: color-mix(in srgb, var(--bilgi) 14%, transparent); color: var(--bilgi); }
.ikon-vurgu { background: var(--vurgu-acik); color: var(--vurgu); }

.renk-gelir { color: var(--gelir) !important; }
.renk-gider { color: var(--gider) !important; }
.renk-bekle { color: var(--bekle) !important; }

/* ---------- Kart başlığı ve listeler ---------- */
.kart-baslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--cizgi); }
.kart-baslik h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.kart-baslik small, .kart-baslik a { color: var(--soluk); font-size: .85rem; text-decoration: none; }
.kart-baslik a:hover { color: var(--vurgu); }

.liste-oge { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--cizgi); }
.liste-oge:last-child { border-bottom: none; }
.liste-oge .orta { flex: 1; min-width: 0; }
.liste-oge .orta div { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-oge .orta small { color: var(--soluk); }
.tarih-kutu { width: 44px; text-align: center; border-radius: 8px; background: var(--zemin); padding: 4px 0; line-height: 1.1; flex-shrink: 0; }
.tarih-kutu b { display: block; font-size: 1.05rem; }
.tarih-kutu small { font-size: 10px; color: var(--soluk); text-transform: uppercase; }
.bos-liste { padding: 18px; color: var(--soluk); text-align: center; font-size: .9rem; }
.tutar { font-weight: 600; white-space: nowrap; }

/* ---------- Tablolar (tüm sayfalarda ortak görünüm) ---------- */
.table { --bs-table-bg: var(--kart); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem 1rem; border-bottom-color: var(--cizgi); }
.table > thead.table-dark,
.table > thead {
  --bs-table-bg: var(--tablo-baslik);
  --bs-table-color: var(--soluk);
}
.table > thead th {
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--soluk); white-space: nowrap;
  border-bottom: 1px solid var(--cizgi);
}
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: color-mix(in srgb, var(--vurgu) 5%, transparent); }
.table-responsive .table > tbody > tr > td:first-child { min-width: 7.5rem; }  /* dar ekranda ilk sütun ezilmesin */
.alt-yazi { display: block; color: var(--soluk); font-size: .8rem; }

/* Durum etiketleri */
.etiket { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.etiket::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.e-odendi { color: var(--gelir); background: color-mix(in srgb, var(--gelir) 12%, transparent); }
.e-bekliyor { color: var(--bekle); background: color-mix(in srgb, var(--bekle) 15%, transparent); }
.e-gider { color: var(--gider); background: color-mix(in srgb, var(--gider) 12%, transparent); }
.e-bilgi { color: var(--bilgi); background: color-mix(in srgb, var(--bilgi) 12%, transparent); }
.e-notr { color: var(--soluk); background: var(--tablo-baslik); }
.e-notr::before { display: none; }

/* Kart içi boşluk ve satırdaki küçük formlar */
.kart-govde { padding: 16px 18px; }
.satir-form { display: inline-flex; gap: 4px; align-items: center; }
.satir-form input[type=number] { width: 64px; }
.vade-gecti > * { --bs-table-bg: color-mix(in srgb, var(--gider) 7%, var(--kart)); }
.bos-satir td { text-align: center; color: var(--soluk); padding: 28px 12px !important; }

/* Satırdaki "⋯" işlem menüsü */
.islem-btn { border: none; background: none; color: var(--soluk); font-size: 18px; padding: 2px 8px; border-radius: 6px; line-height: 1; }
.islem-btn:hover, .islem-btn[aria-expanded="true"] { background: var(--tablo-baslik); color: var(--yazi); }
.dropdown-menu { border-color: var(--cizgi); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.dropdown-item { display: flex; align-items: center; gap: 8px; }
.dropdown-item.tehlike { color: var(--gider); }

.tablo-alt { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; color: var(--soluk); font-size: .85rem; border-top: 1px solid var(--cizgi); }
.pagination { --bs-pagination-active-bg: var(--vurgu); --bs-pagination-active-border-color: var(--vurgu); --bs-pagination-active-color: var(--vurgu-yazi); --bs-pagination-color: var(--yazi); --bs-pagination-bg: var(--kart); --bs-pagination-border-color: var(--cizgi); }

/* Grafik */
.grafik-alan { position: relative; height: 240px; padding: 14px 18px 10px; }

/* Açılır pencere (Yeni İşlem formu vb.) */
.modal-content { border-radius: 12px; border-color: var(--cizgi); }
.d-contents { display: contents; }

/* Online mağaza: ürün listesindeki küçük fotoğraf */
.urun-kucuk { width: 44px; height: 58px; object-fit: cover; border-radius: 6px; background: var(--tablo-baslik); flex-shrink: 0; }
.urun-kucuk-bos { display: grid; place-items: center; color: var(--soluk); }

/* Ürün formundaki fotoğraf ızgarası */
.foto-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto-kutu { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--cizgi); background: var(--tablo-baslik); }
.foto-kutu img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.foto-kutu:first-child { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.foto-kutu:first-child::before { content: "Kapak"; position: absolute; top: 6px; left: 6px; background: var(--vurgu); color: var(--vurgu-yazi); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.foto-yeni { position: absolute; top: 6px; right: 6px; background: var(--bilgi); color: #fff; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.foto-renk { display: block; width: 100%; height: 28px; border: 0; border-top: 1px solid var(--cizgi); background: var(--kart, #fff); color: inherit; font-size: 12px; padding: 0 6px; }
.foto-arac { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; justify-content: space-between; background: rgba(0, 0, 0, .55); }
.foto-arac button { flex: 1; border: 0; background: none; color: #fff; padding: 4px 0; font-size: 13px; }
.foto-arac button:hover { background: rgba(255, 255, 255, .15); }
.foto-ekle { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1.5px dashed var(--cizgi); border-radius: 8px; padding: 18px; cursor: pointer; color: var(--soluk); text-align: center; }
.foto-ekle:hover { border-color: var(--vurgu); color: var(--vurgu); }
.foto-ekle i { font-size: 1.6rem; }
.foto-ekle span { font-weight: 600; }
.varyant-tablo td { padding: .35rem .5rem !important; }

/* Giriş sayfası */
.giris-sayfasi { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.giris-kutu { width: 100%; max-width: 380px; }
.giris-logo { justify-content: center; color: var(--yazi); padding-bottom: 20px; }
.giris-logo small { color: var(--soluk); }   /* pencere içindeki form kaydırmayı bozmasın */
.form-bolum { border: 1px solid var(--cizgi); border-radius: 10px; padding: 14px 16px; background: var(--tablo-baslik); }
.form-bolum h6 { font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }