/* Kayıranlar Stok: arayüz demosundaki (mastartm/kayiranlar-demo) renk ve düzen, Bootstrap üzerine uyarlandı.
   Renkler tek yerde (:root); koyu tema tarayıcı ayarını izler (data-bs-theme _Layout'ta atanır). */

:root {
  --bg: #f4f5f7; --panel: #fff; --ink: #16191d; --muted: #6b7280; --line: #e3e6ea;
  --accent: #b7791f; --accent-ink: #fff; --link: #8a5a12;
  --side: #15181c; --side-ink: #c9ced6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1113; --panel: #181b1f; --ink: #eceff3; --muted: #9aa2ad; --line: #2a2e34;
    --accent: #d6aa45; --accent-ink: #161616; --link: #d6aa45;
    --side: #0a0b0d;
  }
}

/* Bootstrap değişkenlerini demonun renklerine bağla */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link);
  --bs-link-color-rgb: 138, 90, 18;
  --bs-link-hover-color-rgb: 138, 90, 18;
}
@media (prefers-color-scheme: dark) {
  :root, [data-bs-theme="dark"] { --bs-link-color-rgb: 214, 170, 69; --bs-link-hover-color-rgb: 214, 170, 69; }
}

/* Yazı boyutu ekran genişliğiyle büyür: geniş ekranda her şey (menü, tablo, fiş) orantılı büyür, rem kullanıldığı için tek yerden ayarlanır. */
html { font-size: 15px; }
@media (min-width: 1600px) { html { font-size: 16px; } }
@media (min-width: 2000px) { html { font-size: 18px; } }
@media (min-width: 2600px) { html { font-size: 20px; } }
body { background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
h1, .h3 { font-size: 1.7rem; }
a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }

/* Sol panel */
.app { display: flex; min-height: 100vh; }
.side {
  width: 16rem; background: var(--side); color: var(--side-ink); padding: 20px 12px;
  position: sticky; top: 0; height: 100vh; flex: none; display: flex; flex-direction: column; overflow: auto;
}
.side .logo { margin: 0 6px 18px; }
.side .logo img { display: block; width: 100%; height: auto; padding: 6px 8px; }
.side .logo .ls { color: var(--side-ink); font-size: .75rem; letter-spacing: 2px; text-align: center; margin-top: 8px; }
.side a.nav-btn {
  display: block; background: #ffffff0a; border: 1px solid #ffffff26; color: var(--side-ink);
  padding: .7rem .85rem; border-radius: 9px; font-size: 1rem; margin: 6px 0; text-decoration: none;
}
.side a.nav-btn:hover { background: #ffffff18; color: #fff; }
.side a.nav-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.side .who { margin-top: auto; font-size: .85rem; padding: 10px 4px 0; }
.side .who a { color: var(--side-ink); }
.side .who .btn { width: 100%; margin-top: 8px; }
.main { flex: 1; min-width: 0; padding: 24px 30px 60px; }

/* Giriş sayfası: sol panel yok, koyu zemin üstünde kart */
.giris { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; background: var(--side); }
.giris .logo { width: 100%; max-width: 300px; margin-bottom: 8px; }
.giris .logo img { display: block; width: 100%; height: auto; }
.giris .logo .ls { color: var(--side-ink); font-size: .75rem; letter-spacing: 2px; text-align: center; margin: 4px 0 18px; }
.giris .kutu { background: var(--panel); color: var(--ink); border-radius: 14px; max-width: 380px; width: 100%; padding: 24px; }

/* Bileşenler */
.card { --bs-card-bg: var(--panel); --bs-card-border-color: var(--line); --bs-card-border-radius: 12px; }
/* Özet kartları: demodaki .cards gibi eşit genişlik ve yükseklik, tutar tek satır */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px; }
.stat-cards .card-body > div:last-child { white-space: nowrap; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-hover-bg: color-mix(in srgb, var(--ink) 5%, transparent); --bs-table-hover-color: var(--ink); }
.table > thead th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.form-control, .form-select { background-color: var(--panel); color: var(--ink); border-color: var(--line); border-radius: 8px; }
.form-control:focus, .form-select:focus { background-color: var(--panel); color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.form-label { font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.list-group { --bs-list-group-bg: var(--panel); --bs-list-group-border-color: var(--line); --bs-list-group-color: var(--ink); --bs-list-group-action-hover-bg: var(--bg); --bs-list-group-action-hover-color: var(--ink); }
.btn { border-radius: 8px; font-weight: 600; }
.btn-dark { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--accent-ink); --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 85%, black); --bs-btn-hover-color: var(--accent-ink); --bs-btn-active-bg: color-mix(in srgb, var(--accent) 80%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 80%, black); --bs-btn-active-color: var(--accent-ink); --bs-btn-focus-shadow-rgb: 183, 121, 31; font-weight: 700; }
.btn-outline-dark, .btn-outline-secondary { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line); --bs-btn-bg: var(--panel); --bs-btn-hover-bg: var(--bg); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--muted); --bs-btn-active-bg: var(--bg); --bs-btn-active-color: var(--ink); --bs-btn-active-border-color: var(--muted); }
.btn-link { color: var(--link); }
.alert { border-radius: 10px; }
.text-muted { color: var(--muted) !important; }

/* Telefon ve dar ekran: sol panel üste dizilir */
@media (max-width: 820px) {
  .app { flex-direction: column; }
  .side { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px; padding: 10px; overflow: visible; }
  .side .logo { width: 100%; max-width: 220px; margin-bottom: 6px; }
  .side a.nav-btn { padding: 8px 10px; margin: 2px 0; }
  .side .who { width: 100%; margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .side .who .btn { width: auto; margin-top: 0; }
  .main { padding: 16px 14px 50px; }
}

/* Yazdırma: sol panel ve düğmeler basılmaz */
@media print {
  .side, aside, .no-print { display: none !important; }
  .main { padding: 0; }
  /* Koyu temada da kâğıda açık renkle basılır (arka plan basılmadığında açık renkli yazı görünmez olur) */
  :root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bg: #fff; --panel: #fff; --ink: #111; --muted: #555; --line: #ccc;
    --bs-body-bg: #fff; --bs-body-color: #111; --bs-secondary-color: #555; --bs-border-color: #ccc;
  }
  body { background: #fff; color: #111; }
  /* Kaydırma çubuğu kâğıda basılmasın: tablolar sayfaya sığdığı gibi akar */
  .table-responsive { overflow: visible !important; }
  /* Fiş penceresinden yazdırma: sayfa gizlenir, pencere içindeki fiş kâğıda akar */
  body.fis-yazdir .app, body.fis-yazdir .modal-backdrop { display: none !important; }
  body.fis-yazdir { overflow: visible !important; }
  body.fis-yazdir #ortak-modal { position: static; display: block !important; overflow: visible; }
  body.fis-yazdir #ortak-modal .modal-dialog { max-width: none; margin: 0; height: auto; }
  body.fis-yazdir #ortak-modal .modal-content { border: 0; background: none; max-height: none; overflow: visible; }
  body.fis-yazdir #ortak-modal .modal-body { overflow: visible; padding: 0; }}

/* Satış fişi (A5): beyaz kâğıt görünümü; koyu temada da kâğıt beyaz kalır */
.sheet {
  --bs-body-color: #111; --bs-border-color: #ddd; --bs-secondary-color: #555;
  background: #fff; color: #111; max-width: 40rem; margin: 0 auto; padding: 2rem 2.1rem;
  border: 1px solid #ccc; position: relative; min-height: 30rem; font-size: .95rem; page: fis;
}
.sheet .table { --bs-table-color: #111; --bs-table-border-color: #ddd; --bs-table-bg: transparent; font-size: .95rem; }
.sheet .table > thead th { color: #444; }
.sheet .head { display: flex; justify-content: space-between; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 12px; gap: 12px; }
.sheet .head img { height: 4rem; width: auto; display: block; margin-bottom: 6px; }
.sheet h3 { margin: 0 0 4px; font-size: 1.35rem; letter-spacing: 2px; }
.sheet .toplamlar { margin-left: auto; max-width: 280px; }
.sheet .toplamlar > div { display: flex; justify-content: space-between; padding: 3px 0; }
.sheet .toplamlar .genel { font-size: 1.15rem; font-weight: 800; border-top: 1px solid #111; margin-top: 4px; padding-top: 6px; }
.sheet .imza { display: flex; justify-content: space-between; margin-top: 3rem; color: #444; font-size: .8rem; }
.sheet .iptal { position: absolute; top: 35%; left: 15%; font-size: 4.5rem; color: #b4231855; transform: rotate(-20deg); font-weight: 800; border: 5px solid #b4231855; padding: 0 16px; pointer-events: none; }
@page fis { size: A5; margin: 8mm; }
@media print { html { font-size: 10pt; } .sheet { border: 0; max-width: none; padding: 0; min-height: 0; font-size: 10pt; } .sheet .table { font-size: 10pt; } .sheet .head img { height: 14mm; } }

/* Cari ekstre: A4 */
.sheet.a4 { max-width: 56rem; min-height: 40rem; page: ekstre; }
@page ekstre { size: A4; margin: 12mm; }

/* Cari penceresindeki paneller ve tıklanabilir satırlar (demodaki gibi) */
.panel-bg { background: var(--bg); border: 1px solid var(--line); }
.tr-tikla { cursor: pointer; }