/* Genel görünürlük yardımcı sınıfı — JS pek çok yerde (arama sonuçları,
   uyarı kutuları vb.) class="... hidden" ekleyip/çıkararak gösterip
   gizliyor; kural burada tanımlı olmayınca (daha önce eksikti, sadece
   içerik boşaltılarak "görünmez" sanılıyordu) statik/sabit içerikli
   kutular class eklense bile ekranda kalmaya devam ediyordu. */
.hidden { display: none !important; }

:root {
  /* GENOTO logosundan örneklenen marka renkleri (kırmızı/gri) — 2026-09-08,
     stokprogrami ile aynı mavi temayı kullanmak "hep aynı şablon, sıkıcı"
     bulunduğu için kendi kimliğine çevrildi. */
  --bg-1: #120b0c;
  --bg-2: #1c1213;
  --text: #f5f0f0;
  --text-muted: #b9a8a8;
  --accent: #cc1620;
  --accent-2: #c9c9c9;
  --red: #ef4f6b;
  --green: #33c17a;
  --amber: #f2b84b;
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.12);
  --radius: 18px;
  --radius-sm: 10px;
}
/* Açık tema — sadece ana içerik alanı (2026-09-12, kullanıcı isteği: "içi
   karardı, heryerde koyu tema kullanıyoruz, rengini biraz açalım... sanayide
   en baz bilgisayar bilgisi olanın bile rahat kullanabileceği bi program
   yapalım"). Sol menü (gtshell-sidebar) marka kimliği için koyu kalıyor,
   içerik (gtshell-main) burada tanımlı token'larla açık temaya geçiyor —
   .card/.side-list/badge gibi bileşenler zaten var(--text)/var(--glass-bg)
   kullandığı için tek tek değiştirmeye gerek kalmadan otomatik açığa dönüyor. */
.gtshell-main {
  background: #f7f3f2;
  /* KRİTİK: body { color: var(--text) } yalnızca BODY'nin kendi (koyu tema)
     --text değerini kullanarak hesaplanmış SABİT bir renk miras bırakıyordu
     — h2/td/p gibi kendi `color` tanımı olmayan HER ŞEY bunu miras alıyordu,
     --text değişkenini burada override etmek TEK BAŞINA yetmiyordu. Bu satır
     olmadan sadece input/menü gibi `color: var(--text)` yazılmış öğeler
     düzeliyor, geri kalan her şey (başlıklar, tablo hücreleri, müşteri
     isimleri vb.) eski açık renkte kalıp görünmez oluyordu. */
  color: var(--text);
  --text: #241a1b;
  --text-muted: #7c6c6c;
  --accent-2: #6b3238;
  --glass-bg: rgba(20, 10, 10, 0.035);
  --glass-bg-strong: rgba(20, 10, 10, 0.07);
  --glass-border: rgba(20, 10, 10, 0.13);
  --red: #c4223f;
  --green: #16875a;
  --amber: #a6690a;
  --gts-glass-bg: rgba(20, 10, 10, 0.035);
  --gts-glass-border: rgba(20, 10, 10, 0.13);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text);
  min-height: 100%;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(204, 22, 32, 0.24), transparent 60%),
    radial-gradient(900px 500px at 105% 10%, rgba(180, 180, 180, 0.10), transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2) 60%, #0e0808);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); }

.hb-datetime { font-size: .85rem; color: var(--text-muted); }
.hb-ticker { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.hb-ticker .ticker-item { display: flex; gap: 6px; align-items: baseline; font-size: .85rem; }
.hb-ticker .ticker-label { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.hb-ticker .ticker-value { font-weight: 700; }

/* Tüm sekmelerde AYNI sabit üst bilgi çubuğu (2026-09-09, kullanıcı isteği:
   "bütün sekmelerde sabit aynı üst bilgi görünsün") — daha önce sadece
   Ana Sayfa'ya özgü olan bu "hero" üst bilgi artık base.html'in TEK ve
   varsayılan topbar'ı, her sayfada aynı şekilde görünüyor.

   Amblem Hoşgeldin/Çıkış ile AYNI satırda, üst kenarları hizalı (2026-09-09,
   kullanıcı isteği: "amblemi yukarı al, hoşgeldin hizasında olsun, üst
   barın yüksekliğini yarıya düşür" — döviz şeridi pasif ve hava durumu
   Çıkış'ın altına taşındığı için artık ayrı bir satıra gerek yok, TEK satır
   hem hizalamayı hem yükseklik düşüşünü kendiliğinden veriyor). 3 sütunlu
   grid (1fr auto 1fr) amblemi TAM ortada tutuyor, sol/sağ sütun genişliği
   ne olursa olsun. */
.hero-topbar {
  /* 2026-09-12, kullanıcı isteği: "üst bar okunmuyor, koyu mavi olsun sol
     barla birlikte" — bu kural style.css'te app_shell.css'ten SONRA
     yüklendiği için .gtshell-topbar'daki mavi arka planı eziyordu, asıl
     kazanan kural burasıydı; rengi doğrudan burada tanımlıyoruz. */
  background: #1a5686; color: #fff;
  --text: #ffffff; --text-muted: rgba(255, 255, 255, 0.78); --accent-2: #ffd580;
  --glass-bg: rgba(255, 255, 255, 0.12); --glass-bg-strong: rgba(255, 255, 255, 0.22);
  --glass-border: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 24px; flex-shrink: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px;
}
.hero-welcome { min-width: 0; }
.hero-welcome-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hero-welcome .welcome-text { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.hero-pagetitle { font-size: .85rem; }
.hero-welcome .hb-datetime { margin-top: 2px; font-size: .9rem; }

.hero-logo-col { justify-self: center; }
.hero-logo-img { height: 52px; width: auto; display: block; }
/* Piyasa bilgileri (döviz/altın/BTC) PASİFE ALINDI (2026-09-09, kullanıcı
   isteği: "piyasa bilgilerini pasife al silme görünmesin şimdilik") —
   silinmedi, sadece görünmüyor; geri istenirse bu satırı kaldırmak yeter. */
.hb-ticker { display: none; }

/* Çıkış Yap + altında Ankara/hava durumu — ikisi de ortalanmış TEK sütun
   (2026-09-09, kullanıcı isteği: "ankarayı çıkışın altına al, ortala"). */
.hero-right-col { justify-self: end; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-logout {
  flex-shrink: 0; color: var(--text-muted); text-decoration: none;
  border: 1px solid var(--glass-border); padding: 5px 14px; border-radius: 999px; font-size: .85rem;
}
.hero-logout:hover { background: var(--glass-bg-strong); color: #fff; }
.hero-weather { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.weather-city { font-size: .85rem; color: var(--text-muted); }
.weather-temp { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.weather-detail { display: flex; flex-direction: column; align-items: flex-start; }
.weather-desc { font-size: .85rem; color: var(--text-muted); }
.weather-rain { font-size: .78rem; color: var(--accent-2); }
@media (max-width: 900px) {
  .hero-topbar { padding: 8px 14px; gap: 10px; }
  .hero-logo-img { height: 44px; }
}

.navbar { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 24px; background: rgba(0,0,0,.15);
  border-bottom: 1px solid var(--glass-border); justify-content: center; flex-shrink: 0; }
.navbar a { color: var(--text-muted); text-decoration: none; font-size: .95rem; font-weight: 600;
  padding: 10px 24px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg); }
.navbar a:hover { background: var(--glass-bg-strong); color: #fff; }
.navbar a.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 2026-09-12, kullanıcı isteği: "%80 zoom yapınca kutucuklar sol bardan
   uzaklaşıyor" — sebep buydu: max-width + margin:0 auto, viewport zoom'la
   genişleyince (CSS px cinsinden) içeriği ORTALIYOR, sidebar ile içerik
   arasında büyüyen bir boşluk oluşturuyordu. İçerik artık sidebar'a bitişik,
   mevcut genişliği doğrudan kullanıyor (GPT "Responsive UI Standardı":
   zoom'a özel hack değil, doğal responsive davranış). */
.gtshell-content { width: 100%; }

/* "no-scroll" artık .shell değil .gtshell-content'i hedefliyor (2026-09-12,
   sabit sol menü sistemine geçiş — bkz. base.html/_app_sidebar.html). */
body.no-scroll .gtshell-content { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 20px; }
body.no-scroll .gtshell-content .two-col-split { flex: 1; min-height: 0; align-items: stretch; }

/* Araç seçiliyken soldaki liste kutucuğu sağdaki (daha uzun) sütunla aynı
   boyu tutsun (2026-09-12, kullanıcı isteği: "kutucuk solda uzun olsun"). */
body:not(.no-scroll) .two-col-split { align-items: stretch; }
body:not(.no-scroll) .two-col-split .side-list { max-height: none; height: 100%; }
body.no-scroll .two-col-split .side-list { height: 100%; max-height: none; }
/* 2026-09-19, kullanıcı isteği: soldaki araç/müşteri listesi ilk açılışta
   yalnızca ~6-7 satır görünsün, kalanı kutunun kendi içinde kaysın (liste
   uzun olsa da kutu uzamasın). Masaüstünde; mobilde mobile.css zaten kompakt. */
@media (min-width: 1001px) {
  body .two-col-split .side-list { height: auto; max-height: none; align-self: start; }
  body .two-col-split .side-list .side-list-items { flex: 0 1 auto; max-height: 560px; }
}
.arac-detay-col { display: flex; flex-direction: column; height: 100%; gap: 18px; min-height: 0; }
.arac-detay-col > .card { margin-top: 0 !important; }
.arac-detay-col > .card:first-child { flex-shrink: 0; overflow-y: auto; }
.arac-detay-col > .card.gecmis-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.arac-detay-col > .card.gecmis-card .tablo-scroll { flex: 1; min-height: 0; overflow: auto; }

.card {
  /* 2026-09-12, kullanıcı isteği: "ekran görüntüsünde yazılar birbirine
     girmiş" — farklı yükseklikte kartlar (grid stretch ile) yan yana
     olduğunda backdrop-filter:blur, boş kalan alt boşlukta komşu kartın
     içeriğini/badge'lerini bulanık şekilde "sızdırıyordu" (tarayıcı
     compositing hatası). Artık düz zemin (arka planda karmaşık bir gradient
     olmadığı için blur zaten gerekli değildi), sorun tamamen gitti. */
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 10px 16px;
}
.card + .card { margin-top: 12px; }
.card h2 { margin: 0 0 14px; font-size: 1.05rem; }


.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong); color: var(--text); padding: 8px 16px; border-radius: 999px;
  cursor: pointer; font-size: .88rem; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
}
.btn:hover { background: var(--glass-border); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: #a01019; }
.btn-sm { padding: 4px 12px; font-size: .8rem; }
.btn-danger { border-color: rgba(239,79,107,.5); color: var(--red); background: rgba(239,79,107,.08); }

/* Açılır liste (select) seçenekleri işletim sisteminin beyaz zemininde çiziliyor;
   açık renkli --text yazı orada görünmez oluyordu (2026-09-19, giriş ekranı). */
select option, select optgroup { background: #ffffff; color: #241a1b; }

label { display: block; font-size: .78rem; color: var(--text-muted); margin-bottom: 4px; }
input[type=text], input[type=number], input[type=date], input[type=password], select, textarea {
  width: 100%; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--text);
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: .9rem; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.field { margin-bottom: 8px; }

/* 2026-09-12, kullanıcı isteği (tekrar tekrar, GPT önerisiyle): "kaydet ve
   proforma oluştur altta kalmış" — iş formunun üst satırı (Tarih/Km/İşlem
   Tipi/Usta/Ödeme) dar sütunda 2 satıra bölünüp yükseklik yiyordu; burada
   hem daha dar minmax hem daha az padding/margin ile TEK satıra sığması ve
   daha kısa olması hedefleniyor. */
.is-formu-compact-row { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.is-formu-compact-row .field { margin-bottom: 0; }
.is-formu-compact-row label { margin-bottom: 2px; font-size: .72rem; }
.is-formu-compact-row input, .is-formu-compact-row select { padding: 5px 7px; font-size: .82rem; }

/* 2026-09-12, kullanıcı isteği (GPT'nin "Responsive UI/Form Standardı"):
   "buton alanı formun altında sabit/sticky footer gibi çalışmalı... form
   içeriği arttığında formun yüksekliği sonsuza kadar büyümemeli". Bu kart
   artık piksel-hesabıyla sığdırılmıyor — kendi içinde flex column: içerik
   (is-formu-scroll) kalan alanı doldurup gerekirse KENDİ İÇİNDE kayar, buton
   şeridi (is-formu-footer) her zaman görünür/sabit kalır. .card'ın normal
   padding'i kaldırılıp iç bölmelere taşındı (scroll alanı kartın kenarına
   kadar gitmesin, footer'ın üstünde ayırıcı çizgi olsun diye). */
.is-formu-shell { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
.arac-detay-col > .is-formu-shell:first-child,
.arac-detay-col > .is-formu-shell:last-child { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.is-formu-shell-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.is-formu-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 16px; }
.is-formu-footer {
  flex-shrink: 0; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px; border-top: 1px solid var(--glass-border); background: var(--glass-bg);
}
/* 2026-09-17, kullanıcı isteği: "yeni işlemde satır ekle dedikçe yeni
   satırlar görünmüyo ekledikçe alanı büyüt altta kalmasın" — sabit 76px'lik
   iç kaydırma kutusu, eklenen satırları görünmez şekilde kendi içine
   gizliyordu (dışarıdaki .is-formu-scroll zaten sayfayı kaydırıyor, iç içe
   iki ayrı kaydırma alanı kafa karıştırıyordu). Artık sabit yükseklik/kendi
   scroll'u yok — liste içeriği kadar büyüyor, asıl kaydırma dıştaki
   .is-formu-scroll'a devrediliyor; yeni satır eklenince de otomatik
   görünür alana kaydırılıyor (bkz. satirEkle/masrafSatirEkle). */
.is-formu-mini-scroll { overflow-y: visible; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--glass-border); }
/* 2026-09-17, kullanıcı isteği: "sütunlar aksiyonlu olsun A-Z veya
   büyükten küçüğe sıralama yapabilelim bütün program için geçerli" —
   home.js her başlığa tıklama olayı ekliyor, burada sadece görsel ipucu. */
th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sortable:hover { color: var(--accent); }
th.th-sortable::after { content: "⇅"; opacity: .35; margin-left: 5px; font-size: .78em; }
th.th-sort-asc::after { content: "▲"; opacity: 1; color: var(--accent); }
th.th-sort-desc::after { content: "▼"; opacity: 1; color: var(--accent); }
th { color: var(--text-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--glass-bg-strong); }
/* 2026-09-17, kullanıcı isteği: "ödeme alınmış olanlar biraz silik olsun
   ödemesi tamamlanmayanlar biraz daha belirgin olsun" -- ödenmemiş/kısmi
   satırlar normal kalıyor, tam ödenenler soluklaşınca aradaki kontrast
   zaten ödenmeyenleri daha belirgin gösteriyor. */
tr.row-odendi { opacity: .55; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge-green { background: rgba(51,193,122,.15); color: var(--green); }
.badge-amber { background: rgba(242,184,75,.18); color: var(--amber); }
.badge-red { background: rgba(239,79,107,.15); color: var(--red); }

/* Ana Sayfa özet kutucukları (2026-09-12, kullanıcı isteği: "anasayfada
   bütün verilerin özeti olsun kutucuklar tıklamalı aktif olsun neye
   tıklarsa o sekmeyede otomatik gitsin"). */
/* 2026-09-12, kullanıcı isteği: "kutucuklar asimetrik duruyor" — auto-fit
   ekran genişliğine göre değişken sütun sayısı verip son satırı yarım
   bırakabiliyordu, sabit 3 sütun (9 kutucuk = tam 3x3) daha düzenli duruyor. */
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 1180px) { .dash-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
.dash-card { display: block; text-decoration: none; color: var(--text); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dash-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,10,10,.10); border-color: var(--accent); }
/* 2026-09-12, kullanıcı isteği: "kutucuklar arasında boyut farklı var onu
   eşitle" — içerik miktarı değişse de tüm kutucuklar aynı yükseklikte.
   2026-09-17, kullanıcı isteği: "kutucukları küçültebildiğin kadar küçült"
   — yükseklik/boşluk/yazı boyutları bir tur daha sıkıldı. */
.dash-card { min-width: 0; min-height: 100px; display: flex; flex-direction: column; padding: 8px 12px; }
.dash-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; min-width: 0; }
.dash-card-head h2 { margin: 0; font-size: .82rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-card-num { font-size: 1.2rem; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.dash-stat-big { font-size: 1.7rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 2px; }
/* 2026-09-12, kullanıcı isteği: "4 5 satır bilgi göstersin tıklayınca
   scrolla aşağı inebilsin" — kutucuk büyümek yerine kendi içinde kayıyor,
   böylece tüm kutucuklar eşit boyda kalıyor ve sayfa scroll'a gerek kalmıyor. */
.dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; max-height: 92px; overflow-y: auto; }
.card-scroll { max-height: 230px; overflow-y: auto; }
.dash-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .8rem; border-bottom: 1px solid var(--glass-border); padding-bottom: 4px; min-width: 0; }
.dash-list li:last-child { border-bottom: none; padding-bottom: 0; }
.dash-list li span { color: var(--text-muted); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list li b { flex-shrink: 0; white-space: nowrap; }
.dash-neg { color: var(--red); }
.dash-pos { color: var(--green); }

/* 2026-09-12, kullanıcı isteği: "kutucukların altı boş, 2 satırlık veri
   içeren kutulara çevir" — mobile-özel .dash-card ayarları artık
   mobile.css'te (bkz. oradaki not: mobile.css EN SON yüklendiği için
   buradaki aynı-özgüllükteki bir mobil kural, mobile.css'in kendi genel
   ".card{padding:14px}" kuralına karşı burada YAZILSA bile kaybediyordu —
   hero-topbar'da yaşadığımız aynı "son yüklenen dosya kazanır" hatası). */
@media (max-width: 640px) {
  .dash-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
  .dash-card-wide { grid-column: span 2; }
}

/* 2026-09-12, kullanıcı isteği: "müşteri veya araç bul dediğimizde aktif
   filtre getirebilir misin, harfleri yazdık altta isimleri getirsin aynı
   kutucuk içinde tıkladığında o kişiye gitsin" — canlı arama sonuç listesi,
   kutucuğun İÇİNDE, input'un hemen altında.
   2026-09-17, kullanıcı bildirimi: "ekran görüntüsünde belli ayrı bi sekme
   olarak aşağı açıldı o aramalar kutucuk içinde çıksın" -- top:100% konumu
   ".dash-card-wide"e göreydi, grid satırı Notlar kartıyla eşit yüksekliğe
   gerilince (align-items:stretch) sonuçlar kutunun çok altında/dışında gibi
   görünüyordu. Artık sadece arama formunu saran dar bir sarmalayıcıya göre
   konumlanıyor, kartın gerilmiş yüksekliğinden etkilenmiyor. */
.dash-search-wrap { position: relative; }
.dash-search-results {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  margin-top: 4px; background: #ffffff; border: 1px solid var(--accent);
  border-radius: var(--radius-sm); max-height: 220px; overflow-y: auto;
  box-shadow: 0 12px 28px rgba(20,10,10,.28);
}
.dash-search-results a {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px;
  color: var(--text); text-decoration: none; font-size: .85rem; border-bottom: 1px solid var(--glass-border);
}
.dash-search-results a:last-child { border-bottom: none; }
.dash-search-results a:hover { background: var(--glass-bg-strong); }
.dash-search-results a b { font-weight: 700; }
.dash-search-results a span { color: var(--text-muted); }
.dash-search-empty { padding: 8px 12px; font-size: .82rem; color: var(--text-muted); }

/* 2026-09-17, kullanıcı isteği: "aynı isimde birini girdim müşteri kayıtlı
   getiriyim mi dedi evet dedim getirmedi evet diyince altta listelesin
   tıklayınca onun alanına gitsin hayır dersem işlemlere devam etsin" — Ad
   Soyad alanının hemen altına açılan, mevcut kayıt(lar)ı tıklanabilir
   şekilde listeleyen kutu (bkz. _musteri_arac_card.html). */
.ad-soyad-uyari {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  margin-top: 4px; background: #ffffff; border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 10px 12px;
  box-shadow: 0 12px 28px rgba(20,10,10,.28);
}
.ad-soyad-uyari p { margin: 0 0 6px; font-size: .8rem; font-weight: 700; color: #1a1a1a; }
.ad-soyad-uyari ul { list-style: none; margin: 0 0 8px; padding: 0; max-height: 180px; overflow-y: auto; }
.ad-soyad-uyari li + li { margin-top: 2px; }
.ad-soyad-uyari li a {
  display: flex; justify-content: space-between; gap: 10px; padding: 7px 8px;
  color: #1a1a1a; text-decoration: none; font-size: .85rem; border-radius: 6px;
  background: rgba(204,22,32,.07);
}
.ad-soyad-uyari li a:hover { background: rgba(204,22,32,.16); }

/* Gross'taki paylaşımlı not widget'ının deseni (.stn-notes-layer): kutucuk
   sayfayı büyütmesin diye sabit yükseklikte, taşan notlar kendi içinde
   kayıyor — burada da .dash-list ile aynı mantık, sayfa hiç scroll
   gerektirmesin diye (2026-09-17, kullanıcı isteği: "scroll olmasın kutucuk
   sığdır ... grossta yapılan gibi ayarla"). */
.dash-notlar-tabs { display: flex; gap: 4px; margin: 6px 0 4px; flex-wrap: wrap; }
.dash-notlar-tab { border: 1px solid var(--glass-border); background: transparent; color: var(--text-muted);
  border-radius: 999px; padding: 2px 10px; font-size: .76rem; font-weight: 700; cursor: pointer; }
.dash-notlar-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 2026-09-17, kullanıcı isteği: "Notlar kısmını uzat yazılar bi punto daha
   büyük olsun ve okunabilir olsun" -- diğer kutucuklar kompakt kalırken bu
   kart özellikle daha ferah/okunaklı olsun diye yükseklik ve yazı boyutu
   büyütüldü. */
.dash-notlar-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column;
  gap: 6px; max-height: min(260px, 22vh); overflow-y: auto; }
.dash-not { border-radius: var(--radius-sm); padding: 7px 10px; color: #1a1a1a; }
.dash-not.dash-not-yapildi { opacity: .55; }
.dash-not.dash-not-yapildi .dash-not-metin { text-decoration: line-through; }
.dash-not.dash-not-hidden { display: none; }
.dash-not-head { display: flex; justify-content: space-between; gap: 6px; font-size: .74rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em; opacity: .75; }
.dash-not-metin { margin: 3px 0 5px; font-size: .95rem; font-weight: 600; line-height: 1.3;
  white-space: pre-wrap; word-break: break-word; cursor: text; }
/* 2026-09-17, kullanıcı isteği: "notlara tıklayınca içerği değiştirebilelim"
   -- tıklanan metin yerinde bu textarea'ya dönüşüyor (bkz. dashboard.html). */
.dash-not-duzenle-alani { width: 100%; box-sizing: border-box; margin: 3px 0 5px; font: inherit;
  font-weight: 600; color: inherit; background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.25);
  border-radius: 6px; padding: 4px 6px; resize: vertical; }
.dash-not-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .82rem; }
.dash-not-actions label { color: #1a1a1a; }

/* 2026-09-17, kullanıcı isteği: "programda herşey büyük harf olsun
   parçalar dahil" -- isim/parça/firma gibi kısa tanımlayıcı alanlar canlı
   olarak büyük harfle yazılıyor (kayıt sırasında zaten backend'de de
   h.buyuk() ile normalize ediliyor, bkz. modules/tamirci/__init__.py). */
input[name="ad"], input[name="ad_soyad"], input[name="marka"], input[name="model"],
input[name="kalem_ad"], input[name="masraf_ad"], input[name="masraf_firma"],
input[name="firma_adi"], input[name="firma"], input[name="musteri_adi"],
input[name="yeni_parca_ad"], input[name="yeni_parca_kategori"] { text-transform: uppercase; }

.tarih-filtre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tarih-filtre input[type=date], .tarih-filtre input[type=month] { width: auto; }
.tarih-filtre-mod { display: flex; gap: 4px; }
.tarih-filtre-etiket { font-size: .82rem; color: var(--text-muted); margin-left: 6px; }

.flex { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash-odemeyen-row { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; padding: 3px 0; }
.muted { color: var(--text-muted); }
.two-col { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.two-col-split { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) { .two-col-split { grid-template-columns: 1fr; } }
/* 2026-09-12, kullanıcı isteği: "müşteri araç ara kısmında yeni iş emri ekle
   dediğimde 3.bi kutucuk açmaya çalışıyor oda sığmıyo, ayrı bi yeni klasör
   açtımış gibi karşımıza çıksın" — Araç/Müşteri Ara sayfasında "+ Yeni İşlem
   Ekle" artık listeyi/detayı sıkıştıran 3. bir grid sütunu AÇMIYOR; iş formu
   tüm ekranın üzerinde ayrı bir "klasör/panel" (overlay) olarak açılıyor,
   kendi genişliği için istediği kadar yer var, arkadaki sayfa olduğu gibi
   duruyor. Kapatmak (Vazgeç ya da karartılmış arka plana tıklamak) formu
   kaydetmeden bir önceki görünüme döner. */
.is-formu-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 14, 20, .6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.is-formu-overlay-panel {
  position: relative;
  width: min(960px, 100%);
  height: min(720px, 92vh); height: min(720px, 92dvh);
  display: flex;
  /* Kartın kendi arka planı (--glass-bg) sayfanın açık renkli zemini
     ÜZERİNDE görünecek şekilde çok hafif/yarı saydam tasarlandı — karartılmış
     overlay arka planının önüne gelince neredeyse şeffaf kalıp arkadaki
     sayfayı gösteriyordu. Panel'e sayfanın normal içerik zeminiyle aynı
     OPAK rengi vererek kartı okunur/solid hale getiriyoruz. */
  background: #f7f3f2;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
  border-radius: var(--radius);
}
.is-formu-overlay-panel .is-formu-shell { flex: 1; min-height: 0; }
.is-formu-overlay-close {
  position: absolute; top: -14px; right: -14px; z-index: 5;
  width: 32px; height: 32px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

/* Hasar Takip: liste | seçili dosya detayı | yeni dosya formu (2026-09-12,
   kullanıcı isteği: "yeni hasar ekle tıklamalı değil sabit uzun kutu olarak
   dursun ve scroll olmasın sayfaya sığdır" — artık her zaman açık, kendi
   sütununda). */
.three-col { display: grid; grid-template-columns: 260px 1fr 300px; gap: 20px; align-items: start; }
@media (max-width: 1200px) { .three-col { grid-template-columns: 260px 1fr; } .three-col > *:last-child { grid-column: span 2; } }
@media (max-width: 860px) { .three-col { grid-template-columns: 1fr; } .three-col > *:last-child { grid-column: span 1; } }

/* Arama satırı SABİT, altındaki liste kendi içinde kayar (2026-09-09,
   kullanıcı isteği: "arama yaptığımız satır sabit kalsın altı
   kaydırılabilir olsun") — .side-list artık kendi scroll'unu taşımıyor,
   sadece dikey bir flex kutusu: arama formu (flex-shrink:0, sabit) +
   .side-list-items (flex:1, kendi overflow-y:auto'su). */
.side-list { max-height: 640px; display: flex; flex-direction: column; min-height: 0; }
.side-list > form { flex-shrink: 0; }
.side-list-items { flex: 1; min-height: 0; overflow-y: auto; }
.side-list .item { display: block; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.side-list .item:hover, .side-list .item.active { background: var(--glass-bg-strong); }
.side-list .item small { display: block; color: var(--text-muted); }
/* 2026-09-17, kullanıcı isteği: "bir firmanın 10 aracı varsa ismine
   tıklayınca çıkması lazım" — aynı müşteriye ait birden fazla araç, tek
   başlık altında toplanıp açılır/kapanır bir alt listede gösteriliyor. */
.side-list .firma-grup-baslik { cursor: pointer; }
.side-list .item-nested { padding-left: 22px; border-left: 2px solid var(--glass-border); margin-left: 10px; }

.kalem-row { display: grid; grid-template-columns: 110px 1fr 70px 100px 55px 100px 32px; gap: 8px; margin-bottom: 6px; align-items: center; }
.kalem-row .kdv-hucre { display: flex; align-items: center; justify-content: center; }
.kalem-row .kdv-hucre input { width: auto; }
.kalem-row input, .kalem-row select { font-size: .85rem; padding: 6px 8px; }
.kalem-toplam { text-align: right; font-weight: 700; font-size: 1.1rem; margin-top: 8px; }

.masraf-row { display: grid; grid-template-columns: 1fr 110px 1fr 32px; gap: 8px; margin-bottom: 6px; align-items: center; }
.masraf-row input { font-size: .85rem; padding: 6px 8px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 8px 0 8px 18px; border-left: 2px solid var(--glass-border); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.timeline li .t-durum { font-weight: 700; }
.timeline li .t-tarih { color: var(--text-muted); font-size: .78rem; }
.timeline li .t-duzenlenebilir { cursor: pointer; }
.timeline li .t-duzenlenebilir:hover { text-decoration: underline dotted; }
.timeline li .t-duzenle-alani { width: 100%; box-sizing: border-box; font: inherit; margin: 2px 0; }

.hasar-foto-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.hasar-foto-item { width: 96px; }
.hasar-foto-item img, .hasar-foto-pdf {
  width: 96px; height: 96px; border-radius: var(--radius-sm); object-fit: cover;
  border: 1px solid var(--glass-border); display: block; background: var(--glass-bg);
}
.hasar-foto-pdf { display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .78rem; color: var(--text-muted); line-height: 1.2; }
.hasar-foto-meta { display: flex; align-items: center; justify-content: space-between; gap: 4px;
  margin-top: 3px; font-size: .72rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 16px 18px; min-width: 0; }
.stat-card .label { font-size: .78rem; color: var(--text-muted); margin-bottom: 6px; }
.stat-card .value { font-size: 1.4rem; font-weight: 800; overflow-wrap: break-word; }
.stat-card.red .value { color: var(--red); }
.stat-card.green .value { color: var(--green); }
.stat-card.amber .value { color: var(--amber); }

/* 2026-09-12, kullanıcı isteği: "tutarlar kutudan taşmış" — uzun TL
   tutarları (ör. "12.444.590,46 TL") 140px'lik dar kutuya sığmıyordu. */
.stat-grid-sm { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.stat-grid-sm .stat-card { padding: 10px 12px; border-radius: var(--radius-sm); min-width: 0; }
.stat-grid-sm .stat-card .label { font-size: .7rem; margin-bottom: 3px; }
.stat-grid-sm .stat-card .value { font-size: .92rem; line-height: 1.3; overflow-wrap: break-word; }

@media print {
  .hero-topbar, .navbar, .no-print, form button, form .btn { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .card { border: 1px solid #ccc !important; background: #fff !important; color: #000 !important; }
  a { color: #000 !important; }
}

.flash { background: rgba(51,193,122,.15); border: 1px solid rgba(51,193,122,.4); color: var(--green);
  padding: 6px 14px; border-radius: var(--radius-sm); margin-bottom: 10px; font-size: .88rem; }

/* 2026-09-23, kullanıcı isteği: "web tarafında ana sayfada, irsaliye, cari
   hesaplar ve giderlerde scroll olmasın" — SADECE masaüstünde (mobil
   düzenine dokunulmuyor) sayfa ekran yüksekliğine sabitlenir:
   - .sabit-sayfa (Giderler / Cari Hesaplar / İrsaliyeler): üstteki form ve
     başlıklar sabit, sadece liste (.kaydir-alan) kendi içinde kayar; tablo
     başlıkları kayarken üstte kalır.
   - Ana Sayfa (.dash-sayfa): kutucuklar ekran yüksekliğini eşit satırlara
     böler, uzun içerik (Notlar, Ödemeyenler...) kutunun içinde kayar. */
@media (min-width: 721px) {
  body.sabit-sayfa .gtshell-content,
  body.dash-sayfa .gtshell-content { display: flex; flex-direction: column; overflow: hidden; }
  body.sabit-sayfa .gtshell-content > *,
  body.dash-sayfa .gtshell-content > * { flex-shrink: 0; }

  body.sabit-sayfa .gtshell-content > .card:has(> .kaydir-alan) {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  }
  body.sabit-sayfa .gtshell-content > .card:has(> .kaydir-alan) > * { flex-shrink: 0; }
  body.sabit-sayfa .gtshell-content > .card:has(> .kaydir-alan) > .kaydir-alan {
    flex: 1 1 auto; min-height: 0; overflow: auto;
  }
  body.sabit-sayfa .kaydir-alan thead th {
    position: sticky; top: 0; z-index: 1; background: #f1ecea;
  }

  body.dash-sayfa .gtshell-content > .dash-grid {
    flex: 1 1 auto; min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  body.dash-sayfa .dash-grid > .dash-card { min-height: 0; overflow: auto; }
}