/* ═══════════════════════════════════════════════════════════════════════════
   HAYEK ERP — MODERN GÖRÜNÜM KATMANI                              05.08.2026
   ───────────────────────────────────────────────────────────────────────────
   erp.css'ten SONRA yüklenir ve yalnızca görsel değerleri ezer. Sınıf adları
   değişmedi; hiçbir şablona dokunmadan yeni görünüme geçilir.
   Geri almak: base.html'deki bu dosyanın <link> satırını kaldırmak yeterli.
   Yedek: /root/yedek/erp.css.yedek-tasarim-oncesi
   Hedef: modern ve ferah ama KOMPAKT — satır yüksekliği artmadan nefes alan
   tipografi, açık zeminli tablo başlıkları, sakin gölgeler.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Marka renkleri (navy/teal) korundu; nötr palet yenilendi */
  --ink:        #16232f;   /* ana metin */
  --ink-2:      #5a6b7c;   /* ikincil metin */
  /* Soluk metin de OKUNABİLİR olmalı: ilk denenen #8b99a8 beyaz üzerinde
     yalnız 2.9:1 veriyordu (WCAG AA eşiği 4.5). #667585 ~4.6:1. */
  --ink-3:      #667585;   /* soluk metin */
  --line:       #e6ecf2;   /* ince ayraç */
  --line-2:     #d3dde7;   /* belirgin kenarlık */
  --bg:         #f4f7fa;
  --teal-soft:  #e9f6f4;
  --golge:      0 1px 2px rgba(22, 35, 47, .05);
  --golge-2:    0 2px 8px rgba(22, 35, 47, .07);
  --yuvarlak:   9px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* Rakamlar eşit genişlikte — tutar sütunları hizalı görünür */
  font-feature-settings: 'tnum' 1;
}

/* ─── Kenar çubuğu ───────────────────────────────────────────────────────── */
.sidebar { background: linear-gradient(180deg, #2E4057 0%, #26374b 100%); }
.sidebar-logo { padding: 16px 16px 14px; }
.sidebar-logo h2 { font-size: .9rem; letter-spacing: .3px; }
.nav-label {
  font-size: .64rem; letter-spacing: 1.1px; padding: 7px 16px 3px;
  color: rgba(255, 255, 255, .38); font-weight: 600;
}
.nav-link {
  padding: 7px 16px; font-size: .845rem; border-left-width: 2px;
  border-radius: 0 6px 6px 0; margin-right: 8px;
}
.nav-link:hover { background: rgba(255, 255, 255, .07); }
.nav-link.active { background: rgba(4, 138, 129, .28); font-weight: 600; }
.nav-link .icon { font-size: .95rem; width: 18px; }
.nav-sublink { padding-left: 28px; font-size: .8rem; }

/* ─── Üst şerit ──────────────────────────────────────────────────────────── */
.topbar {
  padding: 11px 22px; box-shadow: none; border-bottom: 1px solid var(--line-2);
}
.topbar h1 { font-size: 1.02rem; letter-spacing: -.2px; }
.topbar .sub { font-size: .77rem; color: var(--ink-3); margin-top: 1px; }
.content { padding: 18px 22px; }

/* ─── Paneller ───────────────────────────────────────────────────────────── */
.panel {
  border: 1px solid var(--line); border-radius: var(--yuvarlak);
  box-shadow: var(--golge); padding: 15px 16px;
}
.panel h3 {
  font-size: .86rem; letter-spacing: -.1px; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
/* Kalın teal alt çizgi yerine başlığın solunda ince marka çizgisi — daha sakin */
.panel h3::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: var(--teal); flex: 0 0 auto;
}
.panel > p { color: var(--ink-2); line-height: 1.55; }
.section-head { border-bottom: 1px solid var(--line-2); padding-bottom: 7px; }
.section-head h2 { font-size: .9rem; letter-spacing: -.1px; }

/* ─── Özet kartları ──────────────────────────────────────────────────────── */
.cards {
  gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.card {
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--yuvarlak); box-shadow: var(--golge); padding: 13px 14px;
}
.card:hover { transform: none; box-shadow: var(--golge-2); }
.card .lbl {
  font-size: .68rem; letter-spacing: .6px; color: var(--ink-3);
  font-weight: 600; margin-bottom: 5px;
}
.card .val { font-size: 1.45rem; letter-spacing: -.5px; }
.card .sub { color: var(--ink-3); font-size: .74rem; }

/* ─── Tablolar ───────────────────────────────────────────────────────────────
   Koyu lacivert başlık bandı görünümü en çok eskiten öğeydi. Modern tablolar
   açık zeminli başlık + koyu metin kullanır: kontrast azalmadan satırlar öne
   çıkar. Zebra şeritleri kaldırıldı, yerine tek ince ayraç. */
.tbl-wrap {
  border-radius: var(--yuvarlak); box-shadow: var(--golge);
  border: 1px solid var(--line);
}
table { font-size: .82rem; }
thead th {
  background: #f7fafc; color: var(--ink-2); font-size: .73rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; padding: 9px 12px;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
thead th a { color: var(--ink-2); }
tbody tr { border-bottom: 1px solid var(--line); }
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover,
tbody tr:nth-child(even):hover { background: var(--teal-soft); }
tbody tr:last-child { border-bottom: none; }
td { padding: 7px 12px; }
td.num {
  font-family: 'JetBrains Mono', 'Consolas', ui-monospace, monospace;
  font-size: .8rem;
}

/* ─── Rozetler ───────────────────────────────────────────────────────────── */
.chip {
  border-radius: 6px; padding: 2px 8px; font-size: .72rem;
  font-weight: 600; letter-spacing: .1px;
}
.chip-alis       { background: #e7f5ec; color: #1b6b3a; }
.chip-satis      { background: #fdeceb; color: #a3302a; }
.chip-adet       { background: #e9f1fb; color: #1f5fa6; }
.chip-taslak     { background: #fff5e0; color: #8a5a00; }
.chip-gonderildi { background: #e4f5ea; color: #17703a; }

/* ─── Düğmeler ───────────────────────────────────────────────────────────── */
.btn {
  border-radius: 7px; padding: 7px 14px; font-size: .82rem; font-weight: 600;
  letter-spacing: .1px; line-height: 1.35;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.btn-teal { box-shadow: 0 1px 2px rgba(4, 138, 129, .22); }
.btn-navy { box-shadow: 0 1px 2px rgba(46, 64, 87, .22); }
.btn-navy:hover { background: #3a5170; opacity: 1; }
.btn-red:hover  { background: #a5322a; opacity: 1; }
.btn-outline { border: 1px solid var(--line-2); color: var(--ink-2); }
.btn-outline:hover {
  border-color: var(--teal); color: var(--teal); background: var(--teal-soft);
}
.btn-sm { padding: 4px 10px; font-size: .765rem; }

/* ─── Girişler ───────────────────────────────────────────────────────────────
   .form-control'un HİÇ dolgu tanımı yoktu; erp.css'in başındaki
   `* { padding: 0 }` sıfırlaması yüzünden kutular 18px yüksekliğinde "çizgi"
   gibi duruyordu (yalnız .kompakt kapsamındakiler ayrıca ayarlanmıştı).
   Dolgu ve satır yüksekliği burada tek yerden veriliyor. */
.search, select.filter, .filter-select, .form-control {
  border: 1px solid var(--line-2); border-radius: 7px; font-size: .83rem;
  padding: 5px 9px; line-height: 1.4; font-family: inherit; color: var(--ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
select.form-control { padding-right: 4px; }
textarea.form-control { padding: 6px 9px; }
.search:focus, select.filter:focus, .filter-select:focus, .form-control:focus,
.kg:focus, .kform input:focus, .kform select:focus, .kform textarea:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(4, 138, 129, .11);
  outline: none;
}
.form-label, .form-row label {
  font-size: .78rem; color: var(--ink-2); font-weight: 600;
}
.tag { font-size: .77rem; color: var(--ink-3); font-weight: 500; }

/* ─── Bildirim şeritleri ─────────────────────────────────────────────────── */
.flash {
  border-radius: 8px; font-size: .84rem; padding: 9px 14px;
  border-width: 1px; box-shadow: var(--golge);
}
.flash.success { background: #eaf7ee; color: #17653a; border-color: #c9e7d5; }
.flash.error   { background: #fdeceb; color: #8c2b24; border-color: #f3c9c6; }
.flash.warning { background: #fff6e3; color: #7a5200; border-color: #f2dcae; }
.flash.info    { background: #e9f2fb; color: #1a5386; border-color: #cbdff2; }

/* ─── Sayfalama ──────────────────────────────────────────────────────────── */
.pager a, .pager span {
  border: 1px solid var(--line-2); border-radius: 6px;
  font-size: .8rem; padding: 4px 10px;
}
.page-info { color: var(--ink-3); font-size: .78rem; }

/* ─── Lojistik ekranları ─────────────────────────────────────────────────── */
.loj-sekmeler {
  border-bottom: 1px solid var(--line-2); gap: 4px; margin-bottom: 14px;
}
.loj-sekme { padding: 8px 13px; font-size: .845rem; border-radius: 7px 7px 0 0; }
.loj-sekme.secili { border-color: var(--line-2); color: var(--ink); }
.loj-sayac { font-size: .7rem; padding: 1px 6px; border-radius: 5px; }
.loj-kart {
  border: 1px solid var(--line); border-radius: var(--yuvarlak);
  box-shadow: var(--golge); padding: 12px 14px;
}
.loj-kart:hover { box-shadow: var(--golge-2); }
.loj-kart-ad { font-size: .92rem; letter-spacing: -.15px; }
.loj-kart-alt { color: var(--ink-3); }
.loj-alan dt { color: var(--ink-3); }
.loj-kalem th {
  background: #f7fafc; color: var(--ink-2); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .4px;
}

/* ─── Kompakt kapsam ─────────────────────────────────────────────────────── */
.kompakt .panel { padding: 12px 14px; }
.kompakt thead th { padding: 6px 10px; font-size: .7rem; }
.kompakt td { padding: 5px 10px; }
.kompakt .btn-sm { padding: 3px 8px; font-size: .73rem; }

/* ─── ESKİ FORMLAR DA KOMPAKT DÜZENE ────────────────────────────────────────
   ERP'nin geri kalanındaki formlar `<div class="form-group"><label class=
   "form-label">…</label><input class="form-control"></div>` deseniyle yazılmış:
   etiket kutunun ÜSTÜNDE ve kutu satır boyunca uzuyordu.

   .form-group'u iki sütunlu ızgaraya çevirince etiket SOLA, kutu yanına geçer —
   lojistikteki .kform ile aynı görünüm. Şablonlara dokunulmadı, alan adları
   (name=) değişmedi; dolayısıyla hiçbir kaydetme akışı etkilenmiyor. */
.form-group {
  display: grid;
  /* Kutu 220px'de durur: sütun genişledikçe alan uzayıp seyrelmesin */
  grid-template-columns: 126px minmax(110px, 220px);
  justify-content: start;
  gap: 3px 10px;
  align-items: center;
  margin-bottom: 7px;
}
.form-group > .form-label {
  text-align: right; font-size: .79rem; color: var(--ink-2); font-weight: 600;
  margin: 0; line-height: 1.25; align-self: center;
}
/* Etiket dışındaki her şey (kutu, ipucu metni, açılır liste, seçim kutusu)
   sağ sütuna dizilir; birden fazlaysa alt alta iner. */
.form-group > *:not(.form-label) { grid-column: 2; min-width: 0; }
.form-group .form-control { padding: 4px 9px; font-size: .83rem; }
.form-group textarea.form-control { padding: 5px 9px; line-height: 1.45; }
/* Elle girilen alanlar Girus'taki gibi hafif sarı; salt-okunur beyaz kalır */
.form-group input.form-control:not([readonly]):not([disabled]),
.form-group textarea.form-control:not([readonly]) { background: #fffef5; }

/* Form ızgaraları ekrana yayılmasın: sabit genişlikte sütunlar, sola yaslı.
   Bu kapsayıcılar şablonlarda satır içi stille yazılmış (`padding:0 20px 20px`
   imzası formlara özgüdür), o yüzden !important şart. */
[style*="display:grid"][style*="padding:0 20px 20px"],
[style*="repeat(auto-fit,minmax(230px"],
[style*="repeat(auto-fit,minmax(280px"] {
  /* Üst sınır 1fr OLMALI: Chrome, auto-fill'de sabit üst sınır verilince
     sütun sayısını ona göre hesaplayıp tek sütuna düşürüyor. Kutu genişliği
     zaten .form-group içinde sınırlı, o yüzden sütun esneyebilir. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  justify-content: start !important;
  gap: 2px 24px !important;
  max-width: 1040px;
}
/* Uzun alanlar (adres, açıklama) iki sütunu birden kaplar — bozulmasın */
[style*="grid-column:1/-1"] { grid-column: 1 / -1 !important; }

/* .form-card / .form-row deseni (eski tekil formlar) */
.form-card { max-width: 780px; padding: 18px 20px; border: 1px solid var(--line);
             box-shadow: var(--golge); }
.form-row { display: grid; grid-template-columns: 138px minmax(140px, 1fr);
            gap: 3px 10px; align-items: center; margin-bottom: 7px; }
.form-row > label { text-align: right; margin: 0; }
.form-row > *:not(label) { grid-column: 2; }
.form-row input, .form-row select, .form-row textarea {
  padding: 4px 9px; font-size: .83rem; }

@media (max-width: 780px) {
  .form-group, .form-row { grid-template-columns: 1fr; }
  .form-group > .form-label, .form-row > label { text-align: left; }
  .form-group > *:not(.form-label), .form-row > *:not(label) { grid-column: 1; }
}

/* ─── TABLO İÇİ KUTULAR VE METİN ALANLARI ───────────────────────────────────
   Kalem tablolarındaki kutuların genişlik kuralı yoktu; tarayıcının varsayılan
   ~163px'lik giriş genişliği, başlıkta 92px yazan sütunu 187px'e şişiriyor ve
   tabloyu ekran dışına taşırıyordu (satış siparişinde tablo 1438px, alan
   1127px). Hücreyi doldurunca sütunlar kendi genişliğine döner. */
td .form-control,
td input:not([type=checkbox]):not([type=radio]):not([type=file]),
td select, td textarea, td .kg {
  width: 100%; min-width: 0;
}
/* Kalem satırları nefes alsın — kutu 28px, satır ~40px. Daha alçağında
   satırlar çizgi gibi görünüp okunmuyor. */
form td .form-control, form td .kg,
form td input:not([type=checkbox]):not([type=radio]):not([type=file]),
form td select {
  padding: 5px 8px; font-size: .82rem; line-height: 1.4;
}
form tbody td { padding: 6px 8px; }

/* Yoğun listelerde (425 satırlık Harcamalar gibi) satırlar sıkı KALMALI, ama
   düzenleme kutuları 24px'te fazla basıktı. 2px→3px: kutu ~26px, satır ~36px —
   sayfa boyu neredeyse aynı, okunurluk artıyor. erp.css'teki kural !important
   olduğu için burada da gerekiyor. */
.kompakt td .form-control { padding: 3px 7px !important; font-size: .79rem !important; }
/* Form içindeki kalem tabloları içeriğe göre daralır — .kompakt'taki
   `min-width:100%` bunları zorla ekran boyuna çekiyordu */
form .tbl-wrap table, form table#kalemTablosu { min-width: 0; width: 100%; }

/* ─── Metin kutuları: kare değil, geniş dikdörtgen ───────────────────────────
   Adres / not / açıklama alanları tek satırlık kutularla aynı dar sütuna
   sıkışıyordu. Metin alanı içeren satır iki sütunu birden kaplar ve kutu o
   alanın tamamına yayılır. */
.form-group:has(textarea) {
  grid-column: span 2;
  grid-template-columns: 126px minmax(260px, 1fr);
}
.form-group textarea, .form-group textarea.form-control {
  width: 100%; max-width: 720px; min-height: 58px; line-height: 1.45;
}
.kform textarea { max-width: 640px; min-height: 54px; }
/* Tam satır kaplayan alanlar (adres, açıklama) geniş kalsın */
[style*="grid-column:1/-1"].form-group {
  grid-template-columns: 126px minmax(260px, 1fr);
}
[style*="grid-column:1/-1"].form-group input.form-control,
[style*="grid-column:1/-1"].form-group select.form-control {
  max-width: 460px;
}

/* ─── Erişilebilirlik ────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ─── Dar ekran ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .content { padding: 14px 14px; }
  .topbar  { padding: 10px 14px; }
  .loj-kartlar { grid-template-columns: 1fr; }
}

/* ─── Sütun başlığı süzgeci (static/sutun_suzgec.js) ─────────────────────── */
.suz-satir th.suz-hucre {
  padding: 4px 6px;
  background: var(--panel-2, #1b2836);
  border-top: 1px solid rgba(255,255,255,.08);
}
.suz-girdi {
  width: 100%; min-width: 62px; box-sizing: border-box;
  padding: 3px 6px; font-size: .74rem; font-weight: 400;
  color: #e8eef5; background: #14202c;
  border: 1px solid #3a4a5a; border-radius: 5px;
}
.suz-girdi::placeholder { color: #6d7f91; }
.suz-girdi:focus { outline: 2px solid var(--teal, #7ee8e4); outline-offset: 0; }
.suz-sayi { display: flex; gap: 4px; }
.suz-sayi .suz-girdi { min-width: 52px; }

.suz-serit {
  margin: 8px 0 0; padding: 7px 12px;
  font-size: .8rem; color: #cfe0ee;
  background: #22323f; border: 1px solid #3a4a5a;
  border-left: 3px solid var(--teal, #7ee8e4); border-radius: 8px;
}
.suz-serit b { color: #ffffff; }
.suz-temizle {
  margin-left: 10px; padding: 2px 10px;
  font-size: .74rem; color: #10202c; cursor: pointer;
  background: var(--teal, #7ee8e4); border: 0; border-radius: 6px;
}
.suz-not { margin-top: 3px; font-size: .72rem; color: #8fa3b8; }