/* ---------------------------------------------------------------------------
   Siyah-beyaz tema. Tüm arayüz ve raporlar gri tonlarındadır; durumlar
   (stok var/yok, zimmetli, hasarlı) renkle değil dolgu/çerçeve/kontrast
   farkıyla ayrılır. Renkli palete dönmek için yalnızca :root değerlerini
   ve aşağıdaki "Bootstrap renk sınıfları" bölümünü değiştirmek yeterlidir.
   --------------------------------------------------------------------------- */
:root {
  /* Tamamen siyah-beyaz palet. Ayrım renkle değil, gri tonu ve
     kontrastla yapılır; çıktılarda da aynısı geçerlidir. */
  --ana-renk: #1a1a1a;   /* birincil: koyu */
  --ana-koyu: #000000;
  --ana-acik: #ededed;   /* açık zemin */
  --ana-acik-2: #dedede;
  --ikincil: #4a4a4a;
  --vurgu: #000000;      /* dikkat: renk yerine koyu dolgu */
  --vurgu-koyu: #000000;
  --vurgu-acik: #d8d8d8;
  --uyari: #3d3d3d;
  --uyari-acik: #e6e6e6;
  --zemin: #f6f6f6;
  --metin: #111111;
  --metin-soluk: #6b6b6b;
  --cizgi: #d8d8d8;
}

body {
  background: var(--zemin);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--metin);
}

/* --- Üst menü --- */
.app-navbar {
  background: linear-gradient(135deg, var(--ana-koyu), var(--ana-renk));
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.app-navbar .navbar-brand { color: #fff; font-size: 1.15rem; }
.brand-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255, 255, 255, .15); font-size: 1.1rem;
}
.app-navbar .nav-link {
  color: rgba(255, 255, 255, .82);
  border-radius: 8px;
  padding: .45rem .7rem;
  font-size: .92rem;
}
.app-navbar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.app-navbar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .2); font-weight: 600; }
.app-navbar .navbar-toggler { border: 0; box-shadow: none; }

/* --- Offcanvas menü --- */
.menu-list .list-group-item {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.25rem; font-size: 1rem; border-color: var(--cizgi);
}
.menu-list .list-group-item i { font-size: 1.15rem; color: var(--ana-renk); }

/* --- İçerik --- */
.app-main { padding-bottom: 90px; }
@media (min-width: 992px) { .app-main { padding-bottom: 2rem; } }

.sayfa-baslik {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.sayfa-baslik h1 {
  font-size: 1.35rem; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: .55rem;
}
.sayfa-baslik h1 i { color: var(--ana-renk); }

.card { border: 0; border-radius: 14px; box-shadow: 0 1px 4px rgba(34, 40, 58, .08); }
.card-header {
  background: #fff; border-bottom: 1px solid var(--cizgi);
  border-radius: 14px 14px 0 0 !important;
  font-weight: 600; padding: .85rem 1.1rem;
}

/* --- Özet kartları --- */
.ozet-kart {
  border-radius: 14px; padding: 1rem 1.1rem; height: 100%;
  background: #fff; box-shadow: 0 1px 4px rgba(34, 40, 58, .08);
  display: flex; align-items: center; gap: .9rem;
}
.ozet-kart .ikon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; background: var(--ana-acik); color: var(--ana-renk);
}
.ozet-kart.turuncu .ikon { background: var(--uyari-acik); color: var(--uyari); }
.ozet-kart.mavi .ikon { background: var(--ana-acik-2); color: var(--ana-renk); }
.ozet-kart.kirmizi .ikon { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
.ozet-kart .deger { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.ozet-kart .etiket { font-size: .8rem; color: var(--metin-soluk); }

/* --- Depo hesabı şeridi (Giriş + Düzeltme − Zimmetli − Hasarlı = Depoda) --- */
.hesap-seridi {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem;
  background: #fff; border-left: 4px solid var(--ana-renk);
  border-radius: 12px; padding: .8rem 1rem;
  box-shadow: 0 1px 4px rgba(34, 40, 58, .08);
  font-size: .88rem;
}
.hesap-seridi .baslik {
  width: 100%; font-weight: 600; color: var(--ana-renk);
  font-size: .82rem; text-transform: uppercase; letter-spacing: .03em;
  margin-bottom: .15rem;
}
.hesap-seridi .parca {
  background: var(--zemin); border-radius: 8px; padding: .25rem .6rem;
  color: var(--metin-soluk); white-space: nowrap;
}
.hesap-seridi .parca b { color: var(--metin); font-size: 1rem; }
.hesap-seridi .isaret { color: var(--metin-soluk); font-weight: 700; }
.hesap-seridi .sonuc { background: var(--ana-acik); color: var(--ana-renk); }
.hesap-seridi .sonuc b { color: var(--ana-renk); }

/* --- Tablolar --- */
.table { margin-bottom: 0; }
.table thead th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--metin-soluk); border-bottom-width: 1px; white-space: nowrap;
}
.table td { vertical-align: middle; }
.tablo-kapsayici { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Miktarın yanındaki ölçü adı; sayı ile karışmasın diye soluk ve küçük */
.birim-etiket { font-size: .75rem; color: var(--metin-soluk); margin-left: .15rem; }

.badge.stok-var { background: var(--ana-acik); color: var(--ana-renk); }
.badge.stok-yok { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
.badge.zimmetli-badge { background: var(--uyari-acik); color: var(--uyari); }
.badge.iade-badge { background: var(--ana-acik-2); color: var(--ana-renk); }

/* --- Formlar & butonlar --- */
.btn-ana { background: var(--ana-renk); border-color: var(--ana-renk); color: #fff; }
.btn-ana:hover, .btn-ana:focus { background: var(--ana-koyu); border-color: var(--ana-koyu); color: #fff; }
.form-control, .form-select { border-radius: 10px; padding: .55rem .8rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--ana-renk);
  box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .15);
}
.form-label { font-size: .85rem; font-weight: 600; color: #3a3a3a; }
.btn { border-radius: 10px; }
a { color: var(--ana-renk); }
a:hover { color: var(--ana-koyu); }

/* Mobilde dokunma hedefleri büyük olsun */
@media (max-width: 575px) {
  .btn, .form-control, .form-select { min-height: 44px; }
  .btn-sm { min-height: 36px; }
}

/* --- Mobil alt menü --- */
.mobil-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  display: flex; background: #fff;
  border-top: 1px solid var(--cizgi);
  box-shadow: 0 -4px 16px rgba(34, 40, 58, .1);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobil-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: .55rem 0 .5rem; text-decoration: none;
  color: #8a8a8a; font-size: .68rem;
}
.mobil-nav a i { font-size: 1.25rem; line-height: 1; }
.mobil-nav a.aktif { color: var(--ana-renk); font-weight: 600; }

.flash-alani { position: relative; z-index: 5; }

.hasar-kucuk-resim {
  width: 48px; height: 48px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--cizgi);
}

/* --- Giriş sayfası --- */
.giris-sayfasi {
  min-height: 100vh;
  background: linear-gradient(150deg, var(--ana-koyu), var(--ana-renk) 60%, var(--ikincil));
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.giris-kapsayici { width: 100%; max-width: 400px; }
.giris-karti { border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.giris-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--ana-acik); color: var(--ana-renk); font-size: 1.9rem;
}

/* --- Raporlar --- */
.rapor-ikon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; background: var(--ana-acik); color: var(--ana-renk);
}
.btn-excel { background: var(--ana-acik); color: var(--ana-renk); border: 1px solid #bdbdbd; }
.btn-excel:hover { background: var(--ana-renk); color: #fff; }
.btn-pdf { background: var(--vurgu-acik); color: var(--vurgu-koyu); border: 1px solid #a8a8a8; }
.btn-pdf:hover { background: var(--vurgu); color: #fff; }

.bos-durum {
  text-align: center; padding: 2.5rem 1rem; color: #8a8a8a;
}
.bos-durum i { font-size: 2.2rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* --- Tekstil: beden matrisi ve rozetler --- */
.tekstil-alanlar {
  border: 1px dashed var(--cizgi); border-radius: 12px;
  padding: .8rem .9rem; background: #fafafa;
}
.tekstil-baslik {
  font-size: .85rem; font-weight: 600; color: var(--ana-renk); margin-bottom: .15rem;
}
.tekstil-rozetler { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.tekstil-rozet {
  font-size: .7rem; font-weight: 600; padding: .1rem .45rem; border-radius: 6px;
  background: var(--ana-acik); color: var(--ana-renk); white-space: nowrap;
}
.tekstil-rozet.beden { background: var(--uyari-acik); color: var(--uyari); }

.beden-tablosu th, .beden-tablosu td { padding-left: .5rem; padding-right: .5rem; }
.beden-tablosu tbody td { font-variant-numeric: tabular-nums; }
.beden-tablosu tfoot .tablo-toplam th {
  background: var(--ana-acik); color: var(--ana-renk);
  border-top: 2px solid var(--ana-renk); font-variant-numeric: tabular-nums;
}

.beden-rozet {
  display: inline-block; margin: 0 .2rem .2rem 0; padding: .05rem .4rem;
  border-radius: 6px; background: var(--zemin); white-space: nowrap;
}

/* Ürün rengi göstergeleri siyah-beyaz temada ayırt edici olmadığı için
   gizlenir; renk adı zaten ürün adında yazıyor. */
.renk-noktasi { display: none; }

/* --- Depo: tüm envanter tek ekranda --- */
.depo-bolum .card-header { background: var(--ana-acik); }
.depo-bolum-ozet { display: flex; gap: .35rem; flex-wrap: wrap; }
.depo-tablosu td { padding-top: .55rem; padding-bottom: .55rem; }
.depo-genel-toplam {
  border-left: 4px solid var(--ana-renk);
  position: sticky; bottom: .5rem; z-index: 3;
}

/* Bedenlerin satır içi kırılımı */
.beden-satiri { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.beden-kutu {
  display: inline-flex; align-items: baseline; gap: .3rem;
  padding: .1rem .4rem; border-radius: 6px; text-decoration: none;
  background: var(--ana-acik); border: 1px solid #c4c4c4;
  font-size: .72rem; line-height: 1.4; white-space: nowrap;
}
.beden-kutu .b { color: var(--metin-soluk); font-weight: 600; }
.beden-kutu .a { color: var(--ana-renk); font-weight: 700; font-size: .82rem; }
.beden-kutu:hover { background: var(--ana-acik-2); }
.beden-kutu.bos { background: var(--zemin); border-color: var(--cizgi); opacity: .65; }
.beden-kutu.bos .a { color: var(--vurgu-koyu); }

/* Yazdırma: filtreler ve menüler çıktıya girmesin */
@media print {
  .app-navbar, .mobil-nav, .depo-filtre, .sayfa-baslik .btn,
  .offcanvas, .flash-alani { display: none !important; }
  .app-main { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; page-break-inside: avoid; }
  .depo-genel-toplam { position: static; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* --- Çok satırlı zimmet formu --- */
.zimmet-satir { display: flex; gap: .4rem; align-items: stretch; }
.zimmet-satir select { flex: 1 1 auto; min-width: 0; }
.zimmet-satir .adet-alani { flex: 0 0 5.5rem; }
.zimmet-satir .satir-sil { flex: 0 0 auto; padding-left: .6rem; padding-right: .6rem; }
.zimmet-satir .satir-sil:disabled { opacity: .35; }

/* ---------------------------------------------------------------------------
   Bootstrap renk sınıflarının siyah-beyaz karşılıkları.
   Durumlar renkle değil dolgu koyuluğu ve çerçeve biçimiyle ayrılır:
   dolu siyah = sorun/yok, kesik çizgi = beklemede, düz gri = normal.
   --------------------------------------------------------------------------- */

/* Durum rozetleri */
.badge.stok-var {
  background: #ededed; color: #1a1a1a; border: 1px solid #bdbdbd;
}
.badge.stok-yok {
  background: #1a1a1a; color: #fff; border: 1px solid #1a1a1a;
}
.badge.zimmetli-badge {
  background: #fff; color: #1a1a1a; border: 1px dashed #1a1a1a;
}
.badge.iade-badge {
  background: #cfcfcf; color: #1a1a1a; border: 1px solid #b0b0b0;
}
.badge.bg-light { background: #f0f0f0 !important; color: #4a4a4a !important; }

/* Artı / eksi sayılar: işaret zaten ayırt ediyor, kontrastla vurgulanır */
.text-success { color: #1a1a1a !important; }
.text-danger { color: #000 !important; font-weight: 700; }
.text-warning { color: #3d3d3d !important; }
.text-info, .text-primary { color: #1a1a1a !important; }

/* Bildirim kutuları */
.alert {
  background: #fff; color: var(--metin);
  border: 1px solid var(--cizgi); border-left-width: 4px;
}
.alert-success { background: #f2f2f2; border-left-color: #1a1a1a; }
.alert-info { background: #f7f7f7; border-left-color: #9a9a9a; }
.alert-warning { background: #ededed; border-left-color: #1a1a1a; border-left-style: dashed; }
.alert-danger { background: #e2e2e2; border-left-color: #000; font-weight: 600; }
.alert-link { color: #000 !important; text-decoration: underline; }

/* Butonlar */
.btn-outline-success, .btn-outline-danger, .btn-outline-warning,
.btn-outline-primary, .btn-outline-info {
  color: #1a1a1a; border-color: #b5b5b5; background: #fff;
}
.btn-outline-danger { border-color: #1a1a1a; font-weight: 600; }
.btn-outline-warning { border-style: dashed; border-color: #1a1a1a; }
.btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-warning:hover,
.btn-outline-primary:hover, .btn-outline-info:hover,
.btn-outline-secondary:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info {
  background: #1a1a1a; border-color: #1a1a1a; color: #fff;
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover,
.btn-warning:hover, .btn-info:hover { background: #000; border-color: #000; color: #fff; }

/* Form denetimleri */
.form-check-input:checked { background-color: #1a1a1a; border-color: #1a1a1a; }
.form-check-input:focus { border-color: #1a1a1a; box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .15); }
.btn-group .btn-ana { background: #1a1a1a; border-color: #1a1a1a; }

/* Bağlantılar */
.alert a, .card a { text-decoration-color: #9a9a9a; }

/* --- Aranabilir malzeme seçici --- */
.malzeme-secici { position: relative; flex: 1 1 auto; min-width: 0; }
.malzeme-secici .secici-arama { padding-right: 2rem; }
.secici-temizle {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: 0; line-height: 1; cursor: pointer;
  color: var(--metin-soluk); font-size: 1rem;
}
.secici-temizle:hover { color: var(--ana-renk); }

.secici-liste {
  position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 2px);
  max-height: 17rem; overflow-y: auto; background: #fff;
  border: 1px solid #b5b5b5; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.secici-oge {
  display: grid; width: 100%; text-align: left; border: 0; background: none;
  grid-template-columns: 1fr auto; grid-template-areas: "ad stok" "alt stok";
  gap: 0 .6rem; padding: .45rem .7rem; cursor: pointer;
  border-bottom: 1px solid var(--cizgi);
}
.secici-oge:last-child { border-bottom: 0; }
.secici-oge .oge-ad { grid-area: ad; font-size: .85rem; font-weight: 600; color: var(--metin); }
.secici-oge .oge-alt { grid-area: alt; font-size: .72rem; color: var(--metin-soluk); }
.secici-oge .oge-stok {
  grid-area: stok; align-self: center; min-width: 2.2rem; text-align: center;
  font-size: .78rem; font-weight: 700; border-radius: 6px; padding: .05rem .4rem;
  background: #ededed; color: #1a1a1a; border: 1px solid #bdbdbd;
}
.secici-oge.secili, .secici-oge:hover { background: #1a1a1a; }
.secici-oge.secili .oge-ad, .secici-oge:hover .oge-ad { color: #fff; }
.secici-oge.secili .oge-alt, .secici-oge:hover .oge-alt { color: #d0d0d0; }
.secici-bos { padding: .8rem .7rem; font-size: .85rem; color: var(--metin-soluk); text-align: center; }

.secici-filtre {
  background: #fafafa; border: 1px solid var(--cizgi);
  border-radius: 10px; padding: .7rem .8rem;
}
.filtre-rozet {
  display: inline-block; min-width: 1.2rem; padding: 0 .3rem; margin-left: .2rem;
  border-radius: 999px; background: #1a1a1a; color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1.3rem;
}

.salt-okunur form[method="post" i],.salt-okunur button[data-bs-toggle="modal"]{display:none!important}