/* --------------------------------------------------------------------------
   Inter (FAZ 28) — kendi sunucumuzdan. Google Fonts kullanılamaz: CSP `font-src 'self'`.
   Değişken ağırlıklı (variable) sürüm: tek dosya tüm kalınlıkları taşıyor.
   İki alt küme ayrı: Türkçe ı/ğ/ş `latin-ext`'te, `unicode-range` sayesinde tarayıcı
   yalnızca gerektiğini indirir. `swap`: font gelene kadar sistem fontuyla yazılır,
   kasa ekranı boş kalmaz.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tasarım değişkenleri — FAZ 14'te eklendi, POS kabuğu ve yönetim kabuğu aynı paleti paylaşır.
   FAZ 27'de palet antrasite döndü (bkz. NOTES.md → FAZ 27). Tema tek yerden dönüyor:
   ekranların hiçbiri sabit renk yazmıyor, hepsi bu değişkenlerden besleniyor. */

:root {
  /* --- Antrasit ton merdiveni ---
     Yüzey üst üste bindikçe bir basamak açılır; derinlik gölgeyle değil TONLA anlatılıyor. */
  --chrome: #15181b;          /* üst bar / kenar çubuğu: ekranın çerçevesi, en koyu ton */
  --bg: #1b1f23;              /* uygulama zemini */
  --surface-low: #1f2429;     /* zeminden bir basamak: plan tuvali, geniş boş alanlar */
  --surface: #23282d;         /* kart, panel */
  --surface-raised: #2b3136;  /* satır, girdi, sekme, ikincil düğme */
  --surface-top: #343b41;     /* hover, aktif, yüzen katman */

  /* Çizgiler saç teli: koyu zeminde koyu çizgi görünmez, beyazın alfası kullanılır. */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #eceef0;
  --text-muted: #a8aeb4;
  --text-faint: #8d949b;

  /* Kehribar, tek sıcak vurgu (eski kahve kimliğinin devamı): yalnızca birincil eylem,
     seçili durum ve odak halkası. Ekran payı %5'i geçmemeli — her yere serpilirse vurgu ölür.
     Kehribarın ÜSTÜNDEKİ metin daima koyu (--on-brand), asla beyaz: açık zeminde beyaz okunmaz. */
  --brand: #e2a03f;
  --brand-dark: #c98c33;
  --brand-darker: #a87324;
  --on-brand: #1b1f23;
  --brand-soft: rgba(226, 160, 63, 0.14);

  /* Anlamsal renkler iki kademeli: açık ton METİN/KENAR için (koyu zeminde okunur),
     koyu "fill" tonu DOLU DÜĞME için (üstünde beyaz metin okunur). Karıştırılmamalı. */
  --success: #4f9d69;
  --success-soft: rgba(79, 157, 105, 0.14);
  --success-fill: #3f7d53;
  --success-fill-dark: #356a46;
  --success-fill-darker: #2b5739;

  --danger: #dd6e69;
  --danger-soft: rgba(221, 110, 105, 0.14);
  --danger-fill: #a8403c;
  --danger-fill-dark: #8e3532;
  --danger-fill-darker: #742b28;

  --warn: #d8a33c;
  --warn-soft: rgba(216, 163, 60, 0.14);
  --info: #5b9dd9;
  --info-soft: rgba(91, 157, 217, 0.14);

  /* Kehribarın METİN/İNCE ÇİZGİ hâli. Koyu temada dolgu rengiyle aynı; açık temada olamaz:
     #e2a03f beyaz üstünde 2.2:1 okunur, o yüzden açık temada koyultuluyor. Dolgu rengi
     (--brand) iki temada da aynı kalır — üstündeki koyu metinle zaten 7.4:1. */
  --brand-ink: #e2a03f;
  --brand-ring: rgba(226, 160, 63, 0.3);

  /* Kırpma işareti: gider sütununun renginden ayrı olmalı. */
  --danger-bright: #f0a9a5;

  /* Üst barın üstünde duran kontroller (geri, kilit, menü) — zeminin kendi rengine göre
     bir tık açılır/koyulur. Koyu temada beyazın, açık temada mürekkebin alfası. */
  --chrome-fill: rgba(255, 255, 255, 0.08);
  --chrome-fill-strong: rgba(255, 255, 255, 0.16);

  /* Normal yüzeylerde dokunma/hover izi. */
  --wash: rgba(255, 255, 255, 0.05);
  --wash-strong: rgba(255, 255, 255, 0.09);

  /* Masa planı tuvalindeki ızgara. */
  --grid-line: rgba(255, 255, 255, 0.05);
  --grid-line-strong: rgba(255, 255, 255, 0.07);

  /* Ürün kartı hover'ı: koyu temada AÇILIR, açık temada KOYULUR. */
  --tile-hover: brightness(1.25);

  /* Gölge yalnızca gerçekten yüzen katmanlarda (menü, modal, kilit kartı). */
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 20px 50px -30px rgba(0, 0, 0, 0.7);
  --shadow-deep: 0 24px 50px -30px rgba(0, 0, 0, 0.8);
  --shadow-up: 0 -8px 12px -10px rgba(0, 0, 0, 0.6);

  /* Dokunma hedefleri: yönetim ekranlarında 44px yeterli, POS bileşenlerinde 56–72px
     (bkz. docs/ux-audit.md → Mobil/tablet yaklaşımı). */
  --touch: 44px;
  --pos-touch: 56px;
  --pos-touch-lg: 72px;

  /* Tarayıcının kendi parçaları (kaydırma çubuğu, onay kutusu, tarih seçici) da koyu olsun. */
  color-scheme: dark;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  /* Tutar sütunları titremesin: rakamlar eşit genişlikte. */
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--brand-ink);
}

/* Kasa (dokunmatik PC) ve garson (tablet) cihazları için: tüm etkileşimli
   elemanlar en az 44x44px dokunma alanına sahip olmalı, dokunma gecikmesi/
   çift dokunmada yakınlaştırma olmamalı. */
a, button, .btn, input, select, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Filtrelenmiş satırlar `hidden` ile gizleniyor; kart düzeninde `tr { display: block }` tarayıcı
   varsayılanını ezdiği için burada zorlanması gerekiyor (bkz. app.js → wireListFilters). */
[hidden] {
  display: none !important;
}

/* ==========================================================================
   Giriş ekranı (FAZ 25) — modern SaaS deseni
   Solda marka paneli, sağda tek kart; iki giriş yöntemi sekmeli.
   Sekmeler SAF CSS: formların dışındaki iki radio + kardeş seçici (`:checked ~`),
   JS kapalıyken de çalışır. CSP satır içi stile izin vermiyor, hepsi burada.
   ========================================================================== */

.auth-body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- Sol: marka paneli --- */

.auth-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem;
  box-sizing: border-box;
  /* Gradient kaldırıldı (FAZ 27): panel en koyu tonda düz bir yüzey, sağ kenarı saç teli. */
  background: var(--chrome);
  border-right: 1px solid var(--border);
  color: var(--text);
}

.auth-hero-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.auth-hero-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 1.3rem;
}

/* Başlık ve maddeler tek blok: panelin ortasında birlikte dursunlar. */
.auth-hero-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.auth-hero-title {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.auth-hero-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  color: var(--text-muted);
}

/* Madde işareti CSS'ten: metin kopyalanınca "✓" bulaşmasın. */
.auth-hero-points li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.4;
}

.auth-hero-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  font-size: 0.75rem;
}

.auth-hero-foot {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* --- Sağ: form --- */

.auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1.25rem;
  box-sizing: border-box;
}

.auth-mini-brand {
  display: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brand-ink);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  padding: 2.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.auth-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.auth-subtitle {
  margin: 0.35rem 0 1.5rem;
  color: var(--text-muted);
}

.auth-error {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--danger);
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
}

/* --- Yöntem sekmeleri (saf CSS) --- */

/* Radio'lar görünmez ama odaklanabilir: klavyeyle sekme değiştirilebilsin. */
.auth-mode-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.auth-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 0.25rem;
  background: var(--bg);
  border-radius: 10px;
}

.auth-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  border-radius: 8px;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

#auth-mode-password:checked ~ .auth-tabs .auth-tab[for='auth-mode-password'],
#auth-mode-pin:checked ~ .auth-tabs .auth-tab[for='auth-mode-pin'] {
  background: var(--surface-top);
  color: var(--text);
}

#auth-mode-password:focus-visible ~ .auth-tabs .auth-tab[for='auth-mode-password'],
#auth-mode-pin:focus-visible ~ .auth-tabs .auth-tab[for='auth-mode-pin'] {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Seçili olmayan yöntemin formu gizleniyor. Sekme hiç basılmamışsa (tek yöntem) ikisi de açık. */
#auth-mode-password:checked ~ .auth-panes .auth-form-pin,
#auth-mode-pin:checked ~ .auth-panes .auth-form-password {
  display: none;
}

/* --- Alanlar --- */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.auth-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
}

.auth-field input,
.auth-field select {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.85rem;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 1rem;
}

.auth-field input:focus,
.auth-field select:focus {
  outline: none;
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

.auth-field input::placeholder {
  color: var(--text-faint);
}

.auth-submit {
  /* Kart genişliğinde: formun ana eylemi, buton genişliği metne göre kalmasın. */
  width: 100%;
  min-height: 52px;
  margin-top: 0.25rem;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  /* Ekranın tek birincil eylemi (FAZ 27): varsayılan sessiz düğme değil, kehribar. */
  background: var(--brand);
  color: var(--on-brand);
}

.auth-submit:hover {
  background: var(--brand-dark);
}

.auth-submit:active {
  background: var(--brand-darker);
}

.auth-help {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.auth-legal {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Dar ekran: marka paneli düşer, kart tam genişlik --- */

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-hero {
    display: none;
  }

  .auth-mini-brand {
    display: block;
  }

  .auth-main {
    justify-content: flex-start;
    padding-top: 3rem;
  }
}

@media (max-width: 420px) {
  .auth-card {
    padding: 1.5rem 1.25rem;
  }

  .auth-title {
    font-size: 1.5rem;
  }
}

/* Genel uygulama düzeni */

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--chrome);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.topbar a {
  color: var(--text);
  text-decoration: none;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand {
  font-weight: 600;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Masa/mutfak gibi vardiya ekranlarına daha geniş çalışma alanı */
.page-wide {
  max-width: 1400px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Form elemanları */

.form, label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form {
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.4rem 0.25rem;
  /* Uzun etiketler dar ekranda sayfayı taşırıyordu: metin gerekirse alt satıra insin
     (flex satırı sarmalı) ve boşluksuz uzun kelimeler (purchase_invoices.manage) kırılsın. */
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

input:not([type="checkbox"]):not([type="radio"]), select, button {
  font: inherit;
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  min-height: 44px;
  /* Koyu temada zorunlu: verilmezse tarayıcı girdiyi beyaz zeminde çizer. */
  background: var(--surface-raised);
  color: var(--text);
  /* width:100% verilen butonlar (btn-block) kapsayıcısını dolgu kadar taşırmasın */
  box-sizing: border-box;
}

input[type="checkbox"], input[type="radio"] {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  accent-color: var(--brand);
}

/* FAZ 27 — varsayılan düğme SESSİZ: eskiden her düğme marka renginde doluydu, bir listede
   20 satır varsa 20 dolu düğme sayfanın en baskın öğesi oluyordu. Dolu kehribar artık yalnızca
   gerçekten birincil olan eylemde (.pos-primary-btn, .auth-submit, seçili durumlar). */
button, .btn {
  box-sizing: border-box;
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0.85rem 1.4rem;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  font-weight: 500;
}

button:hover, .btn:hover {
  background: var(--surface-top);
}

button:active, .btn:active {
  background: var(--surface);
}

/* Dolu anlamsal düğmeler: açık ton değil "fill" tonu — üstünde beyaz metin okunabilsin. */
.btn-success {
  background: var(--success-fill);
  border-color: transparent;
  color: #ffffff;
}

.btn-success:hover {
  background: var(--success-fill-dark);
}

.btn-success:active {
  background: var(--success-fill-darker);
}

.btn-danger {
  background: var(--danger-fill);
  border-color: transparent;
  color: #ffffff;
}

.btn-danger:hover {
  background: var(--danger-fill-dark);
}

.btn-danger:active {
  background: var(--danger-fill-darker);
}

.btn-block {
  display: block;
  width: 100%;
}

/* Liste ekranlarının birincil eylemi "+ Yeni ..." (FAZ 27) — ekranda tek kehribar düğme kuralı.
   Görünüm sınıfı eklemek yerine HEDEFİNDEN seçiliyor: hiçbir view'a dokunmadan bütün
   listelerde aynı davranıyor, yeni bir liste eklendiğinde de kendiliğinden doğru oluyor. */
.page-header .btn[href*="/create"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.page-header .btn[href*="/create"]:hover {
  background: var(--brand-dark);
}

.page-header .btn[href*="/create"]:active {
  background: var(--brand-darker);
}

.inline-form {
  display: inline-block;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0 0 0.75rem;
  /* fieldset'in tarayıcı varsayılanı min-width:min-content — içindeki geniş tablo
     dar ekranda kendi kaydırma alanına sığmak yerine sayfayı taşırıyordu. */
  min-width: 0;
}

/* Tablo */

.data-table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.data-table th, .data-table td {
  text-align: left;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* Rozet / uyarı */

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

.badge-ok { background: var(--success-soft); color: var(--success); }
.badge-off { background: var(--surface-raised); color: var(--text-muted); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }

/* Masa ekranı */

.area-group {
  margin-bottom: 1.5rem;
}

.area-group h3 {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  font-weight: 500;
}

.area-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  scrollbar-width: none;
}

.area-tab {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
}

.area-tab.active {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}

.table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}

.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* FAZ 27 — durum artık kartı tümüyle boyamıyor: çok hafif bir ton + sol kenarda renk şeridi.
   `box-shadow: inset` kullanılıyor, çünkü plan düzeninde kartın kutu ölçüsü değişmemeli
   (bkz. NOTES.md → FAZ 21: 140px alt sınır ve box-sizing tuzağı). */
/* Renk DİKKAT İSTEYENE ayrılır, en sık görülene değil: yoğun saatte masaların çoğu "dolu"
   olduğu için dolu nötr kalır (zaten üstünde tutar yazıyor), kehribar ise kasanın gitmesi
   gereken masayı işaretler. Çağrısı olan masa ayrıca kırmızı çerçeve alır. */
.table-card-dolu {
  background: var(--surface-raised);
  box-shadow: inset 3px 0 0 var(--text-faint);
}

.table-card-hesap_istendi {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}

.table-card-rezerve {
  background: var(--info-soft);
  box-shadow: inset 3px 0 0 var(--info);
}

/* Kullanım dışı masa "yüzey" değil "çukur": zeminden de koyu, metni soluk. */
.table-card-kullanim_disi {
  background: var(--bg);
  color: var(--text-faint);
}

.table-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.table-card .table-name {
  font-weight: 600;
  font-size: 1.15rem;
}

.table-capacity {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.table-amount {
  font-size: 1.4rem;
  font-weight: 700;
}

.table-elapsed {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: -0.4rem;
}

.table-card > form,
.table-card > .btn,
.table-card > button {
  width: 100%;
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.alert-error {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Mutfak / Bar ekranı */

/* Pano güncellenemediğinde: eski liste ekranda kalır, üstte uyarı çıkar (sessizce boşalmasın) */
.kitchen-stale {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn);
  font-weight: 600;
}

.kitchen-tabs {
  display: flex;
  gap: 0.5rem;
}

.btn-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.kitchen-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 720px) {
  .kitchen-columns {
    grid-template-columns: 1fr;
  }
}

.kitchen-column-title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  color: var(--text);
}

.kitchen-column-empty {
  color: var(--text-faint);
}

.kitchen-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.kitchen-ticket {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}

.kitchen-ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 1.15rem;
}

.kitchen-ticket-time {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.9rem;
}

.kitchen-ticket-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kitchen-item {
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
}

.kitchen-item:first-child {
  border-top: none;
  padding-top: 0;
}

.kitchen-item-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
}

.kitchen-item-option, .kitchen-item-note {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.kitchen-item .inline-form {
  display: block;
  margin-top: 0.5rem;
}

.kitchen-item .inline-form button {
  width: 100%;
  padding: 1rem;
  font-size: 1.05rem;
}

.kitchen-ticket > .inline-form {
  display: block;
  margin-bottom: 0.75rem;
}

/* Ürün seçenek grupları */

.sub-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.sub-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.sub-card ul {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}

.sub-card form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Sipariş ekranı: miktar/not girişleri ve satır içi aksiyon butonları */

.qty-input {
  width: 4.5rem;
  text-align: center;
}

.note-input {
  width: 11rem;
}

.data-table .inline-form {
  margin: 0.2rem 0.4rem 0.2rem 0;
}

/* Raporlar */

.filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.report-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  min-width: 160px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 600;
}

/* ==========================================================================
   FAZ 14 — İki kabuk: yönetim menüsü, POS kabuğu, dashboard
   Gerekçe ve ilkeler: docs/ux-audit.md
   ========================================================================== */

/* Gruplanmış yönetim menüsü (<details> tabanlı, JS'siz de açılır) */

.mainnav {
  display: flex;
  gap: 0.25rem;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}

.nav-group {
  position: relative;
}

.nav-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--touch);
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  color: var(--text);
  user-select: none;
}

.nav-group > summary::-webkit-details-marker {
  display: none;
}

.nav-group > summary::after {
  content: "▾";
  /* inline-block: aktif gruptaki alt çizgi (text-decoration) atomik satır içi kutulara
     yayılmaz — yoksa okun altında kopuk bir çizgi parçası kalıyordu. */
  display: inline-block;
  font-size: 0.7em;
  opacity: 0.8;
}

.nav-group > summary:hover,
.nav-group[open] > summary {
  background: var(--chrome-fill);
}

/* İçinde bulunulan ekranın grubu her zaman görünür olsun.
   İşaret kutunun değil ETİKETİN altına çiziliyor: summary 44px dokunma hedefi yüzünden metinden
   epey yüksek, kutunun altına çizilen çizgi etiketten kopuk bir "gülümseme" gibi duruyordu
   (FAZ 18 görsel denetiminde görüldü). Çizgi `<span>`'e verildi — summary bir flex kapsayıcı
   olduğu için text-decoration açılır ok işaretine de ayrı bir parça olarak düşüyordu. */
.nav-group > summary.nav-group-active > span {
  padding-bottom: 3px;
  border-bottom: 3px solid var(--brand-ink);
}

/* Kapalı <details>'in içeriği tarayıcıda yine de yerleşiyor (content-visibility) ve mutlak
   konumlu panel dar ekranda belgeyi yatay taşırıyordu; kapalıyken tamamen kaldırılıyor. */
.nav-group:not([open]) > .nav-menu {
  display: none;
}

.nav-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 30;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
}

.nav-menu-right {
  left: auto;
  right: 0;
}

.topbar .nav-menu a,
.pos-topbar .nav-menu a {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0.65rem 0.75rem;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
}

.topbar .nav-menu a:hover,
.pos-topbar .nav-menu a:hover,
.nav-menu a.nav-link-active {
  background: var(--bg);
}

.nav-menu a.nav-link-active {
  font-weight: 600;
}

.pos-topbar .nav-menu a,
.pos-topbar .nav-menu button {
  min-height: var(--pos-touch);
}

.nav-menu form {
  margin: 0.35rem 0 0;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.nav-back {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  background: var(--chrome-fill);
}

/* POS kabuğu: tam ekran, tek satırlık üst bar */

.pos-shell {
  display: flex;
  flex-direction: column;
  /* `min-height` değil `height`: sipariş ekranının panelleri kendi içinde kaysın diye zincirin
     tamamının kesin bir yüksekliği olmalı. İçeriği taşan diğer POS ekranlarında kutu taşar ve
     sayfa eskisi gibi kayar (üst bar yine `position: sticky`). */
  height: 100%;
  background: var(--bg);
}

.pos-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.4rem 0.75rem;
  background: var(--chrome);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.pos-topbar-left,
.pos-topbar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 3rem;
}

.pos-topbar-right {
  justify-content: flex-end;
}

.pos-topbar-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-back {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--touch);
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  background: var(--chrome-fill);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

.pos-brand {
  font-size: 1.4rem;
  padding: 0 0.25rem;
}

.pos-menu-user {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* POS ekranlarının gövdesi: `.page` gibi dar değil, ekranın tamamını kullanır */
.pos-page {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

/* POS kabuğundaki dokunma hedefleri yönetim ekranlarından büyük */
.pos-page .table-card {
  min-height: 140px;
}

.pos-page .table-card select,
.pos-page .table-card button,
.pos-page .table-card .btn {
  min-height: var(--pos-touch);
}

.pos-page .area-tab {
  min-height: var(--pos-touch);
}

/* Yönetici dashboard'u */

.dashboard-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  align-items: start;
}

.dashboard-group {
  margin-bottom: 0;
}

.dashboard-group h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.dashboard-links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dashboard-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}

.dashboard-link:hover {
  background: var(--surface-top);
}

/* Dar ekran temeli (FAZ 14). Kapsamlı mobil katman dosyanın sonundaki FAZ 17 bölümünde. */

@media (max-width: 720px) {
  .page {
    padding: 1rem;
  }

  .pos-page {
    padding: 0.75rem;
  }

  .pos-menu-user {
    display: none;
  }

  .pos-topbar-title {
    font-size: 1rem;
  }

  /* FAZ 20: zil rozeti üst barda yer kapladığı için dar ekranda başlık kırpılmaya başlamıştı —
     rozet daraltılıyor, sayı yine okunuyor. */
  .pos-topbar {
    gap: 0.5rem;
  }

  .pos-calls {
    gap: 0.2rem;
    padding: 0 0.3rem;
  }

  .pos-calls-count {
    min-width: 0;
    padding: 0 0.2rem;
  }

  /* Geri linkinin etiketi telefonda gizleniyor: ok tek başına anlaşılıyor ve başlığa yer açıyor
     (erişilebilir ad `aria-label` ile duruyor, bkz. layout_pos.php). */
  .pos-back-label {
    display: none;
  }

  .topbar {
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.9rem;
  }

  /* Menü paneli dar ekranda üst barın tamamına yayılsın, ekrandan taşmasın */
  .nav-group {
    position: static;
  }

  .nav-menu {
    left: 0.5rem;
    right: 0.5rem;
    min-width: 0;
  }
}

/* ==========================================================================
   FAZ 15 — POS sipariş ekranı, ürün grid'i, masa kartı
   Gerekçe ve ilkeler: docs/ux-audit.md
   ========================================================================== */

/* Kategori paleti. Anahtarlar CategoryService::COLORS ile birebir aynı olmalı; CSP
   `style-src 'self'` satır içi stile izin vermediği için renk sınıfla veriliyor. */

/* FAZ 27 — iki kademe: `--cat` dolgu/işaret tonu (üstünde beyaz metin okunur),
   `--cat-soft` ürün kartının zemini. Koyu temada `--cat-soft` pastel değil, antrasitin
   o renge çalan koyu basamağı: ızgarada hakim renk gri kalır, kategori bir ipucudur. */
.cat-color-none    { --cat: #6f7680; --cat-soft: #282c31; }
.cat-color-kahve   { --cat: #8a6346; --cat-soft: #2e2722; }
.cat-color-kirmizi { --cat: #b8504c; --cat-soft: #332428; }
.cat-color-turuncu { --cat: #b5712a; --cat-soft: #332a22; }
.cat-color-sari    { --cat: #857218; --cat-soft: #302d21; }
.cat-color-yesil   { --cat: #43834c; --cat-soft: #232e26; }
.cat-color-turkuaz { --cat: #2b7f7f; --cat-soft: #1f2e2f; }
.cat-color-mavi    { --cat: #3f74b8; --cat-soft: #212b36; }
.cat-color-mor     { --cat: #7352a3; --cat-soft: #2a2634; }
.cat-color-pembe   { --cat: #b34a84; --cat-soft: #332430; }
.cat-color-gri     { --cat: #6b7178; --cat-soft: #272b2f; }

/* Yönetimdeki kategori formunda renk seçici */

.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.color-option {
  /* Sıkışan satırda pill'ler daralıp içindeki metni taşırıyordu (390px'te 4px doküman taşması,
     FAZ 18 başsız denetiminde yakalandı) — daralma yerine alt satıra insinler. */
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch);
  padding: 0.35rem 0.75rem 0.35rem 0.5rem;
  border: 2px solid var(--cat, var(--border-strong));
  border-radius: 999px;
  background: var(--cat-soft, var(--surface));
  color: var(--cat, var(--text));
  cursor: pointer;
}

.color-option-none {
  --cat: var(--border-strong);
  --cat-soft: var(--surface);
  color: var(--text-muted);
}

.color-option input {
  accent-color: var(--cat, var(--brand));
}

/* --- POS ekranı iskeleti: solda adisyon, sağda ürünler --- */

.pos-screen {
  /* Ekranın tamamını kaplar: iki panel kart değil, bölücü çizgiyle ayrılmış iki sütun.
     Sol panel sabit genişlikte (adisyon satırı ölçülebilir kalsın), sağı ürünler alır. */
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  max-width: none;
  min-height: 0;
  padding: 0;
}

.pos-screen-single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
  padding: 1rem;
}

.pos-screen-single .pos-menu-panel,
.pos-screen-single .pos-view-switch {
  display: none;
}

.pos-order-panel,
.pos-menu-panel,
.pos-pay-panel {
  /* Grid öğesinin varsayılan min-width:auto'su, yatay kayan kategori sekmelerinin
     min-content genişliğini panele dayatıp ekranı taşırıyordu (telefonda 390 → 594px). */
  min-width: 0;
}

.pos-cat-tabs,
.pos-grid {
  min-width: 0;
}

.pos-order-panel {
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.pos-menu-panel {
  /* Ürün alanı sol panelden bir ton koyu: renkli ürün kartları üzerinde dursun. */
  background: var(--bg);
}

/* Geniş ekranda her panel kendi içinde kayar — üst bar, sekmeler ve adisyon dipnotu yerinde
   kalsın (telefonda tek sütun olduğu için sayfa kaymaya devam ediyor). */
@media (min-width: 901px) {
  .pos-order-panel,
  .pos-menu-panel,
  .pos-pay-panel {
    min-height: 0;
    overflow-y: auto;
  }
}

/* --- Sol panel: adisyon --- */

/* Panelin tamamını kaplar: kalemler azken dipnot (toplam + ana düğme) yine en altta durur. */
.pos-order {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pos-order-status {
  padding: 0.5rem 0.7rem 0;
}

/* Panelin kendi dolgusu kalktı (kalemler kenardan kenara); adisyonun geri kalan bölümleri
   yatay dolgularını kendileri taşıyor. */
.pos-order > .pos-panel,
.pos-order > .pos-more-actions,
.pos-order > .alert {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

.pos-cart {
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.5rem;
}

.pos-cart-empty {
  color: var(--text-muted);
  padding: 1.5rem 0.5rem;
  text-align: center;
}

.pos-line {
  /* Üç sütun: adet kumandası — ürün — tutar/işlem. Tutarın adet düğmelerinin altına kaçmaması
     için orta sütun `minmax(0, 1fr)` (grid öğesinin varsayılan min-width:auto'su taşırıyordu). */
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.5rem;
  padding: 0.4rem 0.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.pos-line-taslak {
  background: var(--brand-soft);
}

.pos-line-iptal {
  opacity: 0.55;
  text-decoration: line-through;
}

.pos-line-body {
  min-width: 0;
}

.pos-line-name {
  font-weight: 600;
  line-height: 1.25;
}

.pos-line-price {
  display: block;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.pos-line-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Satır sonu: tutar üstte, işlemler altında — dar panelde yan yana sığmıyorlar. */
.pos-line-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

/* Adet kumandası dikey: artı üstte, adet ortada, eksi/sil altta. Yatay dizilim 360px'lik
   panelde ürün adına yer bırakmıyordu. */
.pos-qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 44px;
}

.pos-qty-form {
  display: flex;
}

.pos-qty-btn {
  min-width: 44px;
  min-height: 36px;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 6px;
}

.pos-qty-remove {
  /* Silme, sepetteki en dikkat çekici öğe olmamalı: dolu kırmızı yerine kırmızı çerçeve/metin */
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.pos-qty-remove:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.pos-qty-value {
  min-width: 2.2rem;
  padding: 0.05rem 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
}

.pos-qty-static {
  color: var(--text-muted);
}

.pos-line-deliver button {
  min-height: var(--pos-touch);
}

.pos-line-more > summary,
.pos-cancelled > summary,
.pos-more-actions > summary,
.pos-void > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.pos-line-more > summary::-webkit-details-marker,
.pos-cancelled > summary::-webkit-details-marker,
.pos-more-actions > summary::-webkit-details-marker,
.pos-void > summary::-webkit-details-marker {
  display: none;
}

.pos-line-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--pos-touch);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 1.2rem;
}

.pos-line-more[open] > summary {
  background: var(--border);
}

.pos-line-more-panel {
  position: absolute;
  right: 0.5rem;
  top: calc(100% - 0.5rem);
  z-index: 6;
  width: min(22rem, calc(100% - 1rem));
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

/* FAZ 20 — iade/fire: iki eylem alt alta, ikisi de aynı ağırlıkta (biri "doğru" seçenek değil). */
.pos-return-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.pos-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.pos-cancelled {
  margin-top: 0.5rem;
}

.pos-cancelled > summary {
  padding: 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Toplamlar ve ana aksiyon çubuğu — ikisi tek blokta, panelin dibine yapışır (adisyon
   uzadıkça "Toplam Tutar" ve ana düğme ekranda kalsın). */

.pos-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: auto;
  padding: 0.5rem 0.7rem 0.6rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  /* Altından geçen içerik "kesilmiş" değil "altında" gibi okunsun */
  box-shadow: var(--shadow-up);
}

.pos-totals {
  margin-bottom: 0.5rem;
}

.pos-total-row {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.pos-total-discount {
  color: var(--success);
}

.pos-total-grand {
  margin-top: 0.3rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 700;
}

.pos-actionbar {
  margin: 0;
}

.pos-primary-btn {
  width: 100%;
  min-height: var(--pos-touch-lg);
  font-size: 1.15rem;
  font-weight: 600;
}

/* Ekranın tek birincil eylemi (FAZ 27). `:not(...)` şart: aynı düğme bazen .btn-success
   taşıyor (Gönder, Ödemeyi Al) — orada anlamsal renk kehribarı yenmeli. */
.pos-primary-btn:not(.btn-success):not(.btn-danger) {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.pos-primary-btn:not(.btn-success):not(.btn-danger):hover {
  background: var(--brand-dark);
}

.pos-primary-btn:not(.btn-success):not(.btn-danger):active {
  background: var(--brand-darker);
}

.pos-remaining {
  padding: 0.75rem;
  border-radius: 8px;
  background: var(--bg);
  text-align: center;
  font-size: 1.1rem;
}

.pos-panel {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.pos-panel h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.pos-payment-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pos-payment-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: var(--bg);
}

.pos-void > summary {
  color: var(--danger);
  font-size: 0.85rem;
  min-height: var(--touch);
  display: flex;
  align-items: center;
}

.pos-remaining-line {
  font-size: 1.1rem;
}

.pos-more-actions {
  margin-top: 1rem;
}

.pos-more-actions > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
}

.pos-more-actions-panel {
  padding-top: 0.5rem;
}

/* --- Sağ panel: ürün grid'i --- */

.pos-menu-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

/* Arama + kategori sekmeleri tek yapışkan blok: ürün grid'i altlarından kayar. */
.pos-menu-top {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--surface);
}

/* Arama, panelin tepesinde kendi şeridi: kasiyerin ilk bakacağı yer. */
.pos-menu-head {
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.pos-search {
  width: 100%;
  min-height: var(--pos-touch);
  padding: 0.5rem 0.25rem;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.15rem;
}

.pos-search:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--brand-ink);
}

.pos-search::placeholder {
  color: var(--text-faint);
}

/* Kategori sekmeleri: çerçeveli pill değil, altı çizili şerit — sekme sayısı arttıkça
   satır kalabalıklaşmasın, aktif olan tek bir renkle işaretlensin. */
.pos-cat-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* Dokunmatik ekranda kaydırma çubuğu gereksiz görsel gürültü (parmakla kaydırılıyor) */
  scrollbar-width: none;
}

.pos-cat-tabs::-webkit-scrollbar,
.area-tabs::-webkit-scrollbar {
  display: none;
}

.pos-cat-tab {
  flex: 1 0 auto;
  min-height: var(--pos-touch);
  padding: 0.5rem 1.4rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.pos-cat-tab:hover {
  background: var(--cat-soft, var(--bg));
}

.pos-cat-tab.active {
  background: transparent;
  border-bottom-color: var(--cat, var(--brand-ink));
  color: var(--cat, var(--brand-ink));
}

.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
  align-content: start;
  padding: 0.6rem 0.75rem;
}

.pos-tile {
  position: relative;
}

.pos-tile-btn {
  /* Düz, dolu renkli dikdörtgen: ad üstte, fiyat altta. Kategori rengi kartın zemini —
     grid'e uzaktan bakınca kategori blokları ayırt edilsin. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  min-height: 92px;
  padding: 0.7rem 0.8rem;
  text-align: left;
  border: 0;
  border-radius: 5px;
  background: var(--cat-soft);
  color: var(--text);
  /* Gölge yok (FAZ 27): kart zemininden tonla ayrılıyor, kenarı saç teli. */
  border: 1px solid var(--border);
}

.pos-tile-btn:hover {
  filter: var(--tile-hover);
}

.pos-tile-btn:active {
  background: var(--cat);
  color: #ffffff;
}

.pos-tile-name {
  font-weight: 600;
  line-height: 1.25;
}

.pos-tile-price {
  color: var(--text);
  font-weight: 600;
}

/* Adisyonda bu üründen kaç tane olduğu — grid'den ayrılmadan görünsün (app.js değil, bu
   ekranın kendi script'i tazeliyor: her fragment güncellemesinden sonra yeniden sayılıyor). */
.pos-tile-count {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  min-width: 1.5rem;
  padding: 0.1rem 0.3rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

.pos-tile-btn:active .pos-tile-price {
  color: #ffffff;
}

.pos-tile-flag {
  /* Üst sağdayken telefonda (2 sütun) ürün adının üzerine biniyordu; fiyat satırının hizasında
     sağ altta duruyor — orada yalnızca kısa metin var. */
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.78rem;
  font-weight: 600;
}

.pos-tile-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.pos-tile-opt {
  position: absolute;
  right: 0.3rem;
  bottom: 0.3rem;
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 0;
  border-radius: 8px;
  background: var(--surface-top);
  color: var(--text);
  font-size: 1rem;
}

.pos-grid-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 2rem 0;
}

/* Seçenek paneli — ürün grid'inin üzerine açılır */

.pos-option-panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow-y: auto;
  padding: 1rem;
  background: var(--surface);
  border-radius: 10px;
}

.pos-option-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}

.pos-option-price {
  color: var(--text-muted);
  font-size: 1rem;
}

.pos-option-group {
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}

.pos-option-group legend {
  padding: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.pos-option-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.pos-opt {
  position: relative;
  flex-direction: row;
}

.pos-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pos-opt span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--pos-touch);
  padding: 0.5rem 1.1rem;
  border: 2px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 500;
}

.pos-opt em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.pos-opt input:checked + span {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.pos-opt input:checked + span em {
  color: rgba(27, 31, 35, 0.75);
}

.pos-opt input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.pos-option-note {
  margin-bottom: 1rem;
}

.pos-option-actions {
  /* Uzun seçenek listelerinde "Adisyona Ekle" ekranın altında kalıyordu (telefonda ölçüldü) */
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  background: var(--surface);
}

.pos-option-actions button {
  flex: 1;
  min-height: var(--pos-touch-lg);
  font-size: 1.05rem;
}

.pos-option-actions button[data-pos-options-close] {
  flex: 0 0 auto;
  background: var(--bg);
  color: var(--text);
}

/* Dar ekranda adisyon / ürünler geçişi (geniş ekranda iki panel yan yana durur) */

.pos-view-switch {
  display: none;
}

/* --- Masa kartı: kartın tamamı tek dokunuş hedefi --- */

.table-card {
  position: relative;
}

.table-card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
}

.table-card-hit:hover {
  background: var(--wash);
}

.table-card-hit:active {
  background: var(--wash-strong);
}

.table-card-hit-form {
  display: contents;
}

.table-free {
  color: var(--text-muted);
}

.table-status {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  z-index: 2;
}

.table-status > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  border-radius: 8px;
  list-style: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.2rem;
}

.table-status > summary::-webkit-details-marker {
  display: none;
}

.table-status[open] > summary {
  background: var(--wash-strong);
}

.table-status-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.25rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 11rem;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
}

/* FAZ 20 — panelde artık iki grup var (durum + garson çağrısı), her biri kendi formunda. */
.table-status-panel form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.table-status-panel .table-call-form {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border);
}

.table-status-panel button {
  width: 100%;
  min-height: var(--touch);
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.table-status-panel button:hover {
  background: var(--bg);
}

.table-status-panel button.btn-active {
  background: var(--brand);
  color: var(--on-brand);
}

/* --- Dar ekran (tablet dikey / telefon) --- */

@media (max-width: 900px) {
  .pos-screen {
    grid-template-columns: 1fr;
  }

  .pos-screen[data-view="order"] .pos-menu-panel {
    display: none;
  }

  .pos-screen[data-view="menu"] .pos-order-panel {
    display: none;
  }

  .pos-view-switch {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    display: flex;
    gap: 0.35rem;
    padding: 0.35rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }

  .pos-view-switch button {
    flex: 1;
    min-height: var(--pos-touch);
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
  }

  .pos-view-switch button.active {
    background: var(--brand);
    color: var(--on-brand);
  }

  .pos-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

/* ==========================================================================
   FAZ 16 — Hızlı ödeme paneli
   Gerekçe ve ilkeler: docs/ux-audit.md ("Kasiyer, hesap kapatma" akışı)
   ========================================================================== */

/* Sağ sütun ya ürün grid'i ya ödeme panelidir — modal yok, panel modu değişir. */

.pos-pay-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.pos-screen[data-pay="off"] .pos-pay-panel {
  display: none;
}

.pos-screen[data-pay="on"] .pos-menu-panel {
  display: none;
}

.pos-pay-back {
  align-self: flex-start;
  min-height: var(--touch);
  background: var(--bg);
  color: var(--text);
}

.pos-pay-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: var(--bg);
}

.pos-pay-label {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.pos-pay-amount {
  font-size: 2rem;
  font-weight: 700;
}

.pos-pay-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Yöntem seçimi: iki büyük buton (radio) */

.pos-method {
  display: flex;
  gap: 0.5rem;
}

.pos-method-option {
  flex: 1;
  position: relative;
}

.pos-method-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pos-method-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pos-touch-lg);
  border: 2px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.pos-method-option input:checked + span {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.pos-method-option input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.pos-amount-label input {
  width: 100%;
  min-height: var(--pos-touch-lg);
  box-sizing: border-box;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: right;
}

.pos-quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pos-quick {
  flex: 1 1 5rem;
  min-height: var(--pos-touch);
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}

.pos-quick:hover {
  background: var(--surface-top);
}

.pos-change-preview {
  margin: 0;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

/* Ödeme sonrası para üstü / kapanış */

.pos-change {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--success-fill);
  color: #ffffff;
}

.pos-change-label {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

.pos-change-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.pos-pay-done {
  padding: 1.25rem 1rem;
  border-radius: 10px;
  background: var(--bg);
  text-align: center;
}

.pos-pay-done-title {
  margin: 0 0 0.35rem;
  color: var(--text-muted);
}

.pos-pay-done-total {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
}

/* İndirim paneli */

.pos-discount > summary {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  list-style: none;
  cursor: pointer;
  color: var(--brand-ink);
  font-weight: 600;
}

.pos-discount > summary::-webkit-details-marker {
  display: none;
}

.pos-discount-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.pos-discount-form .pos-option-group {
  margin-bottom: 0.25rem;
}

@media (max-width: 900px) {
  .pos-screen[data-view="order"] .pos-pay-panel {
    display: none;
  }

  .pos-screen[data-view="menu"][data-pay="off"] .pos-pay-panel {
    display: none;
  }
}

/* ==========================================================================
   FAZ 17 — Mobil/tablet katmanı, PWA tam ekran, çevrimdışı durum şeridi
   --------------------------------------------------------------------------
   Kırılım noktaları (tek yerde toplandı, aşağıdaki tüm sorgular bunları kullanır):
     ≤ 560px  telefon (dikey)          — POS'ta tek panel, ürün grid'i 2 sütun
     ≤ 900px  tablet dikey / büyük tel — POS'ta tek panel (FAZ 15'ten), tablolar kart
     ≤ 720px  yönetim ekranları        — tablolar karta döner, menü tam genişlik
     ≥ 1200px masaüstü / dokunmatik PC — ürün grid'i daha çok sütun
   ========================================================================== */

/* --- PWA: ana ekrandan açıldığında çentik / ev çubuğu güvenli alanları --- */

.topbar {
  padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
  padding-left: calc(1.5rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1.5rem + env(safe-area-inset-right, 0px));
}

.pos-topbar {
  padding-top: calc(0.4rem + env(safe-area-inset-top, 0px));
  padding-left: calc(0.75rem + env(safe-area-inset-left, 0px));
  padding-right: calc(0.75rem + env(safe-area-inset-right, 0px));
}

.page {
  padding-left: calc(1.5rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1.5rem + env(safe-area-inset-right, 0px));
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.pos-page {
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* Sipariş ekranı tek istisna: kenar boşluğu yok, paneller ekranın kenarına dayanır.
   (İki sınıflı seçici bilerek — yukarıdaki güvenli alan dolgularını geri alması gerekiyor.) */
.pos-page.pos-screen {
  padding: 0;
}

@media (max-width: 720px) {
  .page {
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .topbar {
    padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
    padding-left: calc(0.9rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.9rem + env(safe-area-inset-right, 0px));
  }
}

@media (display-mode: standalone) {
  /* Tam ekran POS'ta aşağı çekince sayfanın yenilenmesi (pull-to-refresh) sipariş
     ortasında veri kaybı gibi hissettiriyor; kapatıldı. */
  body {
    overscroll-behavior-y: contain;
  }
}

/* Dokunmatik cihazda uzun basınca metin seçimi/büyüteç çıkmasın — yalnızca POS kabuğunda,
   yönetim ekranlarında metin kopyalanabilir kalmalı. */
.pos-shell button,
.pos-shell summary,
.pos-shell .pos-tile,
.pos-shell .table-card,
.pos-shell .pos-cat-tab {
  -webkit-user-select: none;
  user-select: none;
}

/* --- Bağlantı durumu şeridi (assets/js/app.js tarafından basılıyor) --- */

.conn-banner {
  position: fixed;
  left: 50%;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  transform: translateX(-50%);
  max-width: min(92vw, 40rem);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-float);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.conn-banner-offline {
  background: var(--surface-top);
  color: var(--warn);
  border: 1px solid var(--warn);
}

.conn-banner-sync {
  background: var(--surface-top);
  color: var(--info);
  border: 1px solid var(--info);
}

.conn-banner-list {
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Alt çubuğu olan dar POS ekranında şerit çubuğun üstünde dursun */
@media (max-width: 900px) {
  .pos-shell .conn-banner {
    bottom: calc(var(--pos-touch) + 1.2rem + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Kuyrukta bekleyen (henüz sunucuya gitmemiş) kalemler --- */

.pos-pending-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-strong);
}

.pos-pending-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.95rem;
}

.pos-pending-line .badge {
  flex: 0 0 auto;
}

/* --- Yönetim tabloları: dar ekranda karta dönüşür ---
   `.data-table-cards` sınıfını JS basıyor (bkz. assets/js/app.js → labelTables): hücre
   başlıkları `data-label`'a kopyalanmadan kart düzenine geçilirse veriler bağlamsız kalırdı,
   bu yüzden JS kapalıyken tablo tablo olarak (yatay kaydırılarak) durmaya devam ediyor.
   `.data-table-plain` sınıfı verilen tablolar hiç dönüştürülmez. */

@media (max-width: 720px) {
  .data-table-cards {
    display: block;
    overflow: visible;
    border-collapse: separate;
  }

  /* `overflow` tablo iç elemanlarında (thead) çalışmadığı için "görsel olarak gizle" numarası
     burada işe yaramıyor, başlık satırı yatay taşmaya sebep oluyordu — tamamen kaldırılıyor.
     Sütun adı her hücrede `::before` ile görünür (ve erişilebilirlik ağacına da düşer). */
  .data-table-cards thead {
    display: none;
  }

  .data-table-cards tbody,
  .data-table-cards tr,
  .data-table-cards td {
    display: block;
    width: auto;
  }

  .data-table-cards tr {
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .data-table-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    text-align: right;
  }

  .data-table-cards td:last-child {
    border-bottom: none;
  }

  .data-table-cards td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: left;
  }

  /* Etiketsiz hücre (aksiyon sütunu): tam genişlik dokunma hedefi */
  .data-table-cards td:not([data-label]) {
    justify-content: flex-end;
  }

  .data-table-cards td a,
  .data-table-cards td button,
  .data-table-cards td .btn {
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
  }

  /* Boş tablo gövdesi kart gibi görünmesin */
  .data-table-cards tbody:empty {
    display: none;
  }
}

/* --- Yönetim kabuğu: telefon düzeni --- */

@media (max-width: 720px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .brand {
    flex: 1 1 auto;
  }

  .topbar-user {
    order: 2;
    margin-left: auto;
  }

  /* Menü grupları alt alta yığılmasın: tek satırda yatay kayar (kaydırma çubuğu gizli) */
  .mainnav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mainnav::-webkit-scrollbar {
    display: none;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  /* Başlıktaki aksiyonlar (ör. "Excel İndir" / "PDF İndir") telefonda tam genişlik ve
     birbirine yapışmadan alt alta */
  .page-header > div {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .page-header .btn,
  .page-header button {
    width: 100%;
    text-align: center;
  }

  .card {
    padding: 1rem;
  }

  /* Filtre/arama formları telefonda tek sütun ve tam genişlik.
     Onay kutusu / radyo düğmesi HARİÇ: FAZ 17'de bu kural onları da geriyordu — kategori renk
     seçicisinde radyo pill'in tamamını kaplayıp etiketi (ör. "Kırmızı") pill'in dışına, hatta
     390px'te ekranın dışına itiyordu (FAZ 18 başsız denetimi yakaladı). */
  .form input:not([type="checkbox"]):not([type="radio"]),
  .form select,
  .form button,
  .card > form input:not([type="checkbox"]):not([type="radio"]),
  .card > form select {
    width: 100%;
  }
}

/* --- POS: dokunma hedefleri --- */

/* Adisyondaki "Teslim", "Notu Kaydet", masa durum butonları gibi kendi ölçüsü olmayan her POS
   kontrolü en az 56px olsun. Bu seçici (eleman+sınıf) bileşen sınıflarından daha özgül olduğu
   için, bilerek daha büyük olan bileşenler hemen altında aynı özgüllükte geri veriliyor. */
.pos-page button,
.pos-page .btn,
.pos-page select,
.pos-page summary {
  min-height: var(--pos-touch);
}

.pos-page .pos-primary-btn,
.pos-page .pos-option-actions button {
  min-height: var(--pos-touch-lg);
}

/* Adisyondaki adet düğmeleri dikey dizili: genişlik 44px'te kalıyor ama yükseklik 56px yerine
   36px — üçü üst üste tek satıra sığsın diye (bkz. .pos-qty). */
.pos-page .pos-qty-btn {
  min-width: 44px;
  min-height: 36px;
}

/* --- POS: geniş ekran (dokunmatik kasa PC'si) --- */

@media (min-width: 1200px) {
  .pos-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  .pos-page .pos-tile-btn {
    min-height: 100px;
  }
}

/* --- POS: tablet dikey ve telefon --- */

@media (max-width: 900px) {
  .pos-page {
    padding-top: 0.6rem;
    padding-left: calc(0.6rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.6rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--pos-touch) + 1.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Sticky dipnot sabit alt çubuğun altında kalmasın */
  .pos-foot {
    bottom: calc(var(--pos-touch) + 0.7rem + env(safe-area-inset-bottom, 0px));
  }

  /* Sipariş ekranı telefonda da kenardan kenara; altta sabit geçiş çubuğu kadar yer kalsın. */
  .pos-page.pos-screen {
    padding: 0 0 calc(var(--pos-touch) + 1.5rem + env(safe-area-inset-bottom, 0px));
  }

  .pos-view-switch {
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
  }

  /* "Adisyon (3)" üstte, tutar altta: tek satırda 390px'lik telefonda kesiliyordu */
  .pos-view-switch button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
  }

  .pos-switch-sub {
    font-size: 0.95rem;
    font-weight: 700;
  }

  .pos-menu-panel {
    min-height: 0;
  }

  .table-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
  }

  .pos-page .table-card {
    min-height: 120px;
    padding: 0.75rem;
  }
}

@media (max-width: 560px) {
  /* Telefonda ürün grid'i iki sütun: buton genişliği ürün adını okutacak kadar kalsın. */
  .pos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .table-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-topbar-title {
    font-size: 0.95rem;
  }

  .pos-line-title {
    flex-wrap: wrap;
  }

  .kitchen-board {
    grid-template-columns: 1fr;
  }

  .area-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .area-tab {
    flex: 0 0 auto;
  }
}

/* --- Yönetim listeleri: arama, filtre sekmeleri, satır içi düzenleme (FAZ 18) --- */

.list-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.list-filters input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--touch);
  padding: 0.5rem 0.75rem;
}

.list-filters button {
  flex: 0 0 auto;
}

.filter-tabs {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  padding-bottom: 0.25rem;
  /* Dokunmatikte kaydırma çubuğu görsel gürültü — parmakla kaydırılıyor */
  scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar {
  display: none;
}

.filter-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0.4rem 1rem;
  border: 1px solid var(--cat, var(--border-strong));
  border-radius: 999px;
  background: var(--surface);
  color: var(--cat, var(--text));
  text-decoration: none;
  font-weight: 500;
}

/* Kategorisi olmayan sekme ("Tümü") kehribar DEĞİL: dolu kehribarın üstünde beyaz metin
   okunmaz, kehribar da ekranda tek birincil eyleme ayrılmış. */
.filter-tab.is-active {
  background: var(--cat, var(--surface-top));
  border-color: var(--cat, var(--border-strong));
  color: #ffffff;
}

.inline-price {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.inline-price input {
  width: 6rem;
  min-height: var(--touch);
  text-align: right;
}

/* Kaydet ikincil görünümde: listede 20 satır varsa 20 dolu buton sayfanın en baskın öğesi
   oluyordu — asıl birincil aksiyon başlıktaki "+ Yeni Ürün" (aynı ilke: FAZ 17'de adisyondaki
   kırmızı "×" düzeltmesi). JS açıkken buton fiyat değişene kadar gizli duruyor. */
.inline-price button {
  min-height: var(--touch);
  background: transparent;
  border: 1px solid var(--brand-ink);
  color: var(--brand-ink);
  font-weight: 600;
}

.inline-price button:hover {
  background: var(--surface);
}

/* Aktif/pasif düğmesi: mevcut durumu gösterir, dokununca durumu çevirir */
.toggle-btn {
  min-height: var(--touch);
  min-width: 5rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-weight: 600;
}

.toggle-btn.toggle-on {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}

.toggle-btn.toggle-off {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.form-hint {
  margin: 0.25rem 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.empty-hint {
  padding: 1rem 0;
  color: var(--text-muted);
}

.muted {
  color: var(--text-muted);
}

.alert-ok {
  background: var(--success-soft);
  color: var(--success);
}

/* Ürün formundaki "Diğer ayarlar" katlanır bölümü */
.form-advanced {
  margin: 0.5rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.form-advanced > summary {
  padding: 0.75rem 1rem;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
}

.form-advanced[open] > summary {
  border-bottom: 1px solid var(--border);
}

.form-advanced > label,
.form-advanced > .checkbox-label {
  margin: 0.75rem 1rem;
}

/* FAZ 20 — seçenek değerinin altındaki katlanır "seçenek reçetesi" bölümü. Seçeneklerin çoğunun
   reçetesi yok, o yüzden varsayılan olarak kapalı; tanımlı olan değerlerde açık geliyor. */
.sub-details {
  margin: 0.25rem 0 0.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border);
}

.sub-details > summary {
  min-height: var(--touch);
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-muted);
}

.sub-details ul {
  padding-left: 1rem;
}

/* Seçenek reçetesi formu iki kat girintili bir <li> içinde duruyor: `select`in kendi doğal
   genişliği (en uzun stok kalemi adı) telefonda sayfayı taşırıyordu — kutuya sığması zorlanıyor. */
.sub-details form {
  flex-wrap: wrap;
}

.sub-details select,
.sub-details input {
  max-width: 100%;
  min-width: 0;
}

/* --- Hızlı stok sayımı (FAZ 18) --- */

.count-form input[data-count-input] {
  width: 6.5rem;
  min-height: var(--touch);
  text-align: right;
}

.count-diff {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.count-diff-up { color: var(--success); font-weight: 600; }
.count-diff-down { color: var(--danger); font-weight: 600; }

.count-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  background: var(--bg);
  box-shadow: var(--shadow-up);
}

.count-actions .form-hint {
  margin: 0;
}

/* --- Telefon yatay (garson elinde, klavye açıkken): dikey alan çok kısıtlı --- */

@media (max-height: 480px) and (orientation: landscape) {
  .pos-topbar {
    min-height: 44px;
  }

  .pos-page .pos-tile-btn {
    min-height: 68px;
  }

  .pos-page .pos-primary-btn {
    min-height: var(--pos-touch);
  }

  .pos-menu-panel {
    min-height: 0;
  }
}

/* ==========================================================================
   FAZ 19 — Yönetici dashboard'u
   İlke (docs/ux-audit.md): yönetici ekrana bakıp bugünü ve şu anı görsün; her rakamın
   gidilecek bir yeri olsun. Kartlar bağlantı, listeler kısa, boş durumlar açık yazılı.
   ========================================================================== */

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dash-updated {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.dash-updated-stale {
  color: var(--danger);
  font-weight: 600;
}

.dash-branch-filter {
  margin-bottom: 1rem;
}

.dash-section {
  margin-bottom: 1.5rem;
}

.dash-section-title {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.dash-section .stat-cards {
  margin-bottom: 0.5rem;
}

/* Kartın tamamı dokunma hedefi: yöneticinin gördüğü rakamın gidilecek bir yeri var. */
.dash-card-link {
  text-decoration: none;
  color: inherit;
  min-height: var(--touch);
}

.dash-card-link:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

.dash-card-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dash-card-warn {
  border-color: var(--danger);
}

.stat-card .badge {
  align-self: flex-start;
}

.dash-footnote {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dash-panels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.dash-panel {
  margin-bottom: 0;
}

.dash-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.dash-panel-head h2 {
  font-size: 1rem;
  margin: 0;
}

.dash-panel-summary {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dash-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.dash-list li:last-child {
  border-bottom: 0;
}

.dash-list-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.dash-list-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dash-list-side {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-empty {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .page-header-actions {
    align-items: stretch;
  }

  /* Başlıktaki "Güncellendi …" damgası telefonda butonun üstünde, ortalanmadan kalsın. */
  .page-header-actions .dash-updated {
    text-align: left;
  }
}


/* ================= Servis çağrıları (FAZ 20) ================= */

/* Üst bardaki zil: çağrı yokken sessiz, varken dikkat çeken. Sayı app.js tarafından tazeleniyor. */
.pos-calls {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--pos-touch);
  padding: 0 0.6rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 1.05rem;
}

.pos-calls-count {
  min-width: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--chrome-fill-strong);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.pos-calls-active {
  background: var(--danger-fill);
  color: #ffffff;
}

.pos-calls-active .pos-calls-count {
  background: rgba(0, 0, 0, 0.25);
}

/* Çağrısı olan masa kartı: renk değil çerçeve — masa durumu renkleri (boş/dolu/hesap) korunmalı. */
.table-card-called {
  outline: 3px solid var(--danger);
  outline-offset: -3px;
}

.table-call-bell {
  font-size: 0.95em;
}

.call-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.call-card {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.call-card-hazir {
  border-left-color: var(--success);
}

.call-card-manuel {
  border-left-color: var(--brand-ink);
}

/* 5 dakikayı geçen çağrı: mutfak panosundaki "gecikti" işaretiyle aynı dil. */
.call-card-late {
  border-color: var(--danger);
  border-left-color: var(--danger);
}

.call-card-body {
  flex: 1 1 14rem;
  min-width: 0;
}

.call-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.call-table {
  font-size: 1.15rem;
  font-weight: 600;
}

.call-card-meta,
.call-card-note {
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.call-card-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* `.btn` temelde inline-block: min-height'i tek başına kutuyu büyütür ama metni ortalamaz —
   çağrı kartındaki "Adisyon" bağlantısı bu yüzden kutusunun üstünde duruyordu. */
.call-card-actions .btn,
.call-card-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pos-touch);
  padding: 0 1rem;
}

/* ================= Vardiya / kasa (FAZ 20) ================= */

/* Vardiya ekranı bir liste değil, birkaç karar noktası: dar kolon okumayı kolaylaştırıyor. */
.page-narrow {
  max-width: 52rem;
  margin: 0 auto;
}

.shift-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.shift-facts > div {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.shift-facts dt {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.shift-facts dd {
  margin: 0.2rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
}

/* Fark rozeti dar tablo sütununda "−20.00" ile "₺" arasından bölünüyordu. */
.shift-diff {
  white-space: nowrap;
}

/* ==========================================================================
   FAZ 21 — Masa planı (sürükle-bırak yerleşim)
   ========================================================================== */

/* Masa ekranındaki plan. JS yoksa `.plan-ready` hiç eklenmez ve kartlar eski akan
   grid'inde kalır — plan bir üst katman, tek çizim yolu değil (bkz. NOTES.md → FAZ 21). */
.table-plan.plan-ready {
  display: block;
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface-low);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
}

.table-plan.plan-ready .table-card {
  position: absolute;
  /* Genişlik/yükseklik hücre yüzdesi olarak veriliyor; padding+border kutuyu büyütmemeli
     yoksa yuvarlak masalar elips çıkıyor ve masalar komşusuna taşıyor. */
  box-sizing: border-box;
  /* POS kabuğunun 140px'lik kart alt sınırı planda geçerli değil: boyutu kullanıcı çiziyor,
     yoksa küçük masalar hücresinden taşıp komşusunun üstüne biniyor. */
  min-height: 0;
  margin: 0;
  /* Alt boşluk "⋯" düğmesine ayrıldı: küçük masalarda tutar/süre yazısının üstüne binmesin. */
  padding: 0.5rem 0.5rem 1.6rem;
  gap: 0.15rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.table-plan.plan-ready .table-card-top {
  display: block;
}

.table-plan.plan-ready .table-name {
  font-size: 1rem;
}

.table-plan.plan-ready .table-capacity {
  display: block;
}

.table-plan.plan-ready .table-amount {
  font-size: 1.05rem;
}

/* Dar masa: dört satır sığmadığı için kapasite ve süre düşer (app.js → layoutTablePlans). */
.table-plan.plan-ready .table-card-plan-compact .table-capacity,
.table-plan.plan-ready .table-card-plan-compact .table-elapsed {
  display: none;
}

.table-plan.plan-ready .table-card-plan-compact .table-name {
  font-size: 0.95rem;
}

/* Tutar dar masada iki satıra bölünüp "⋯" düğmesine giriyordu; tek satırda kalsın. */
.table-plan.plan-ready .table-card-plan-compact .table-amount {
  font-size: 0.85rem;
  white-space: nowrap;
}

.table-plan.plan-ready .table-elapsed {
  font-size: 0.75rem;
  margin-top: -0.2rem;
}

.table-plan.plan-ready .table-card-yuvarlak,
.table-plan.plan-ready .table-card-yuvarlak .table-card-hit {
  border-radius: 50%;
}

/* Yuvarlak masada "⋯" köşede daire dışına taşıyordu; çemberin içine çekiliyor. */
.table-plan.plan-ready .table-card-yuvarlak .table-status {
  right: 14%;
  bottom: 8%;
}

/* Plana yerleşmemiş masalar plandan sonra normal grid olarak listelenir. */
.table-plan-rest {
  margin-top: 1rem;
}

/* --- Plan editörü (/tables/layout) --- */

.plan-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.plan-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.plan-toolbar-group label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.plan-toolbar input[type="number"] {
  width: 4.5rem;
}

.plan-toolbar-spacer {
  margin-left: auto;
}

.plan-selection-name {
  font-weight: 600;
}

.plan-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.plan-stepper button {
  min-width: 2.5rem;
  min-height: 2.75rem;
}

.plan-stepper output {
  min-width: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.plan-canvas {
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface-low);
  background-image:
    linear-gradient(to right, var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-strong) 1px, transparent 1px);
  /* Dokunmatikte sürükleme sayfayı kaydırmasın. */
  touch-action: none;
  overflow: hidden;
}

.plan-item {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.25rem;
  border: 2px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  cursor: grab;
  user-select: none;
  touch-action: none;
  overflow: hidden;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.15;
}

.plan-item-yuvarlak {
  border-radius: 50%;
}

.plan-item-selected {
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px var(--brand-ring);
  z-index: 2;
}

/* Izgara küçültülünce üst üste itilen masalar: kaydetmeden önce görünür olsun. */
.plan-item-clash {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.plan-item-dragging {
  cursor: grabbing;
  opacity: 0.85;
}

.plan-item-name {
  font-weight: 600;
}

.plan-item-capacity {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Köşedeki boyut tutamağı yalnızca seçili masada görünür (küçük masalarda kalabalık yapmasın). */
.plan-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px 0 8px 0;
  background: var(--brand);
  color: var(--on-brand);
  cursor: nwse-resize;
  touch-action: none;
  padding: 0;
  line-height: 1;
}

.plan-tray {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.plan-tray h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.plan-tray-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.plan-tray-items button {
  min-height: 2.75rem;
}

.plan-empty {
  color: var(--text-muted);
  margin: 0;
}

/* Telefonda plan editörü kullanılabilir değil: hücreler dokunulamayacak kadar küçülüyor. */
@media (max-width: 640px) {
  .plan-narrow-warning {
    display: block;
  }
}

.plan-narrow-warning {
  display: none;
}

/* ==========================================================================
   FAZ 23 — Gelir/gider grafiği, kasa kartları, gider ekranı
   Grafik sunucuda üretilen SVG; renkler burada (CSP satır içi stile izin vermiyor, SVG
   sunum nitelikleri yerine sınıf kullanılıyor ki palet tek yerde dursun).
   ========================================================================== */

.finance-card {
  margin-bottom: 0.75rem;
}

.finance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Anahtar kutucuğu: renk kodunu metnin yanında taşır (yalnızca renge bağlı kalmasın diye
   metinde de yazıyor). */
.finance-key::before {
  content: '';
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.35rem;
  border-radius: 2px;
  vertical-align: baseline;
}

.finance-key-income::before {
  background: var(--success);
}

.finance-key-expense::before {
  background: var(--danger);
}

.finance-key-threshold::before {
  height: 0;
  border-top: 2px dashed var(--brand-ink);
  border-radius: 0;
}

.finance-key-max::before {
  background: var(--border-strong);
}

/* Dar ekranda grafik ezilmesin: sütunlar okunaklı kalacak kadar genişlik korunur, gerisi kayar. */
.finance-chart-wrap {
  overflow-x: auto;
}

.finance-chart {
  display: block;
  width: 100%;
  min-width: 480px;
  /* viewBox yüksekliğiyle birebir: dikey ölçek 1 kalsın, çizgi kalınlıkları bozulmasın. */
  height: 240px;
}

.finance-bar-income {
  fill: var(--success);
}

.finance-bar-expense {
  fill: var(--danger);
}

/* Bugünün sütunu hangisiyse arkası hafif boyalı — "en sağdaki bugün mü" sorusu sorulmasın.
   Veri sütunuyla karışmayacak kadar açık bir ton. */
.finance-today {
  fill: var(--surface-raised);
}

/* Ölçeği aşan günün tepesindeki işaret. */
/* Kırpma işareti, gider sütununun kendi renginden AYRI olmalı. */
.finance-clip-cap {
  fill: var(--danger-bright);
}

.finance-key-clip::before {
  background: var(--danger-bright);
}

.finance-axis {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.finance-threshold {
  stroke: var(--brand-ink);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}

.finance-axis-labels {
  display: flex;
  min-width: 480px;
  margin-top: 0.2rem;
}

.finance-axis-label {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
}

.finance-card-total {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

.dash-subtitle {
  margin: 0.75rem 0 0.5rem;
  font-size: 0.95rem;
}

/* --- Gider ekranı --- */

.expense-form-card {
  margin-bottom: 1rem;
}

.expense-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.expense-field-wide {
  grid-column: 1 / -1;
}

.expense-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.expense-category-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.expense-category-list li:last-child {
  border-bottom: 0;
}

/* Liste satırındaki yıkıcı eylem: dolu kırmızı değil, kırmızı çerçeve. */
.btn-quiet-danger {
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.btn-quiet-danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

@media (max-width: 720px) {
  .finance-legend {
    font-size: 0.85rem;
  }
}

/* --- Hesap bölme: "kim neyi ödüyor" (FAZ 23 ek) --- */

.pos-pay-mode {
  margin-bottom: 0.5rem;
}

.pos-split {
  margin-bottom: 0.75rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.pos-split-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}

.pos-split-row:last-of-type {
  border-bottom: 0;
}

/* Tamamı ödenmiş kalem listede kalıyor (ne ödendiği görünsün) ama geri planda. */
.pos-split-paid {
  opacity: 0.55;
}

.pos-split-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.pos-split-name {
  font-weight: 600;
}

.pos-split-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pos-split-qty {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Sayı artırma okları hem dar kutuda rakamı kırpıyor hem de zaten +/− düğmeleri var. */
.pos-split-input::-webkit-outer-spin-button,
.pos-split-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pos-split-input {
  appearance: textfield;
  -moz-appearance: textfield;
  width: 3.2rem;
  min-height: 44px;
  padding: 0.25rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  box-sizing: border-box;
}

.pos-split-left {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.pos-split-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.pos-split-total {
  margin: 0.5rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: right;
}

/* Bölünmüş ödemede tutar alanı ikincil: tutarı seçim belirliyor, alan yalnızca nakitte
   müşterinin verdiği para. */
.pos-amount-label-split {
  color: var(--text-muted);
}

/* --- Fazla ödeme: bahşiş / para üstü dağıtımı --- */

.pos-tip {
  margin-bottom: 0.75rem;
  padding: 0.6rem;
  border: 1px solid var(--brand-ink);
  border-radius: 8px;
  background: var(--brand-soft);
}

.pos-tip-head {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.pos-tip-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pos-tip-label input {
  width: 100%;
  box-sizing: border-box;
}

.pos-tip-split {
  margin: 0.5rem 0 0;
  font-weight: 600;
}

/* Kartta seçim yok: tutar alanı kilitli, kısayol gizli. */
.pos-tip-locked .pos-tip-label {
  color: var(--text-muted);
}

/* Adisyon panelinde alınmış bölünmüş ödemenin kapsadığı kalemler. */
.pos-payment-items {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ==========================================================================
   FAZ 24 — Ürün tanımlama ekranı (Adisyo düzeni)
   Solda kategori çubuğu, sağda kart ızgarası. Tablo düzeni kaldırıldı: ürün
   yönetiminde asıl iş "ürünü bul → fiyatını/favorisini değiştir", kart bunu
   tek bakışta veriyor.
   ========================================================================== */

.prod-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* --- Kategori çubuğu --- */

.prod-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.prod-cat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch);
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
}

.prod-cat:hover {
  background: var(--bg);
}

.prod-cat.is-active {
  background: var(--cat-soft, var(--bg));
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cat, var(--brand-ink));
}

/* Kategori rengi: adın solunda küçük nokta (renk körlüğünde ad yine okunur). */
.prod-cat-dot {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--cat, var(--border-strong));
}

.prod-cat-name {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.prod-cat-count {
  flex: 0 0 auto;
  min-width: 1.6rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}

.prod-cat-add,
.prod-cat-manage {
  margin-top: 0.3rem;
  color: var(--brand-ink);
  font-size: 0.9rem;
}

.prod-cat-add {
  border-top: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
}

/* --- Arama --- */

.prod-search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.prod-search input {
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
}

/* --- Ürün kartları --- */

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.6rem;
  align-content: start;
}

.prod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem 0.8rem;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  /* Kategori rengi kartın üstünde şerit: ızgaraya uzaktan bakınca kategori blokları ayrışsın. */
  border-top: 4px solid var(--cat, var(--border-strong));
  border-radius: 8px;
}

/* Pasif ürün listede kalır (geri açılabilsin) ama geri planda. */
.prod-card-off {
  opacity: 0.6;
  background: var(--bg);
}

.prod-card-actions {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: flex;
  gap: 0.15rem;
}

.prod-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Yönetim ekranı dokunma hedefi 44px (bkz. docs/ux-audit.md) */
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
}

.prod-icon:hover {
  background: var(--bg);
  color: var(--text);
}

.prod-icon.is-on {
  color: var(--danger);
}

.prod-card-name {
  /* Sağ üstteki iki ikonun altına girmesin */
  margin: 1.6rem 0 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.prod-card-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.prod-card-foot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.prod-card-foot .inline-price {
  flex: 1;
  min-width: 0;
}

.prod-card-foot .inline-price input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.prod-card-price {
  flex: 1;
  font-weight: 700;
}

@media (max-width: 900px) {
  /* Dar ekranda kategori çubuğu üstte yatay şeride dönüyor. */
  .prod-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .prod-sidebar {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .prod-cat {
    flex: 0 0 auto;
  }

  .prod-cat.is-active {
    box-shadow: inset 0 -3px 0 var(--cat, var(--brand-ink));
  }

  .prod-cat-add,
  .prod-cat-manage {
    margin-top: 0;
  }

  .prod-cat-add {
    border-top: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
  }
}

/* ==========================================================================
   FAZ 26 — Terminal kilidi (vardiya devri)
   Oturum açık kalır; kilit ekranı dışındaki her şey AuthMiddleware ile kapanır.
   PIN kimin ise oturum ona geçer.
   ========================================================================== */

/* Üst bardaki kilit düğmesi — iki kabukta da aynı, yalnızca dokunma hedefi farklı:
   yönetimde 44px, POS kabuğunda 56px (bkz. docs/ux-audit.md). */
.pos-lock {
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 0.6rem;
  border: 0;
  border-radius: 8px;
  background: var(--chrome-fill);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
}

.pos-lock:hover {
  background: var(--chrome-fill-strong);
}

.pos-shell .pos-lock {
  min-width: var(--pos-touch);
  min-height: var(--pos-touch);
}

/* Telefonda üst bar kalabalıklaşıyor (geri + başlık + zil + kilit + menü): kullanıcı adı ve
   kilit ikonu düşüyor, kilit "⋯" menüsünden açılıyor — masa adı kırpılmasın. */
@media (max-width: 560px) {
  .pos-menu-user,
  .pos-shell .pos-lock {
    display: none;
  }
}

/* --- Kilit ekranı --- */

.lock-body {
  /* Gradient kaldırıldı (FAZ 27): kilit ekranı da uygulamanın zemininde duruyor. */
  background: var(--bg);
}

.lock-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  box-sizing: border-box;
}

.lock-card {
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  padding: 2rem;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-deep);
  text-align: center;
}

.lock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--bg);
  font-size: 1.4rem;
}

.lock-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
}

.lock-subtitle {
  margin: 0.4rem 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.lock-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

/* PIN alanı: rakamlar iri ve aralıklı, dokunmatik kasada uzaktan okunsun. */
.lock-pin {
  font-size: 1.6rem;
  letter-spacing: 0.4em;
  text-align: center;
}

.lock-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.lock-key {
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 600;
}

.lock-key:hover {
  background: var(--surface-top);
}

.lock-key-wide {
  font-size: 0.95rem;
}

.lock-logout {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* Çıkış ikincil: asıl eylem PIN ile devam etmek. */
.lock-logout-btn {
  width: 100%;
  min-height: var(--touch);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-decoration: underline;
}

.lock-logout-btn:hover {
  color: var(--text);
}

/* Giriş ve kilit ekranındaki tema düğmesi: bağlantı gibi sessiz, kartın dışında ortalanmış —
   oranın birincil eylemi giriş yapmak, tema değil. */
.theme-toggle-quiet {
  display: block;
  margin: 0.75rem auto 0;
  min-height: var(--touch);
  padding: 0.5rem 0.9rem;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.theme-toggle-quiet:hover {
  background: transparent;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Açık tema (FAZ 28). Varsayılan koyu; bu blok yalnızca <html data-theme="light">
   iken devreye girer. Tercih sunucu tarafında çerezde tutuluyor (App\Support\Theme),
   JS kapalıyken de çalışsın ve sayfa ilk boyamada doğru renkte gelsin diye.

   Burada YALNIZCA token'lar yeniden tanımlanır — tek bir bileşen kuralı tekrarlanmaz.
   Yeni bir ekran sabit renk yazarsa bu tema sessizce bozulur.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] {
  --chrome: #ffffff;
  --bg: #f1f2f4;
  --surface-low: #e9ebee;
  --surface: #ffffff;
  --surface-raised: #f4f5f7;
  --surface-top: #e7e9ec;

  --border: rgba(27, 31, 35, 0.12);
  --border-strong: rgba(27, 31, 35, 0.22);

  --text: #16191d;
  --text-muted: #5a6168;
  --text-faint: #6e757c;

  /* --brand (dolgu) ve --on-brand bilerek DEĞİŞMİYOR: kehribar dolgu + koyu metin
     her iki temada da 7.4:1. Değişen yalnızca mürekkep hâli. */
  --brand-ink: #8a5d10;
  --brand-soft: rgba(226, 160, 63, 0.18);
  --brand-ring: rgba(226, 160, 63, 0.45);

  /* Anlamsal METİN tonları koyultuldu: açık tonlar beyaz üstünde 3:1'in altında kalıyordu.
     Dolu düğme tonları (--success-fill / --danger-fill) değişmedi; beyaz metinle
     her zeminde okunuyorlar. */
  --success: #2f7a4a;
  --success-soft: rgba(47, 122, 74, 0.12);
  --danger: #b03a35;
  --danger-soft: rgba(176, 58, 53, 0.12);
  --danger-bright: #8c2a26;
  --warn: #8a6410;
  --warn-soft: rgba(138, 100, 16, 0.12);
  --info: #2a6396;
  --info-soft: rgba(42, 99, 150, 0.12);

  --chrome-fill: rgba(27, 31, 35, 0.06);
  --chrome-fill-strong: rgba(27, 31, 35, 0.12);
  --wash: rgba(27, 31, 35, 0.04);
  --wash-strong: rgba(27, 31, 35, 0.08);
  --grid-line: rgba(27, 31, 35, 0.06);
  --grid-line-strong: rgba(27, 31, 35, 0.09);

  --tile-hover: brightness(0.97);

  --shadow-float: 0 8px 24px rgba(27, 31, 35, 0.14);
  --shadow-card: 0 18px 40px -28px rgba(27, 31, 35, 0.35);
  --shadow-deep: 0 24px 50px -30px rgba(27, 31, 35, 0.45);
  --shadow-up: 0 -8px 12px -10px rgba(27, 31, 35, 0.25);

  color-scheme: light;
}

/* Kategori kartlarının zemini: koyu temada antrasitin o renge çalan basamağı, açık temada
   pastel. `--cat` (dolgu/işaret tonu) iki temada da aynı — üstünde beyaz metin okunuyor. */
:root[data-theme="light"] .cat-color-none    { --cat-soft: #f2f0ec; }
:root[data-theme="light"] .cat-color-kahve   { --cat-soft: #f0e8e1; }
:root[data-theme="light"] .cat-color-kirmizi { --cat-soft: #fae3e3; }
:root[data-theme="light"] .cat-color-turuncu { --cat-soft: #fbe9d6; }
:root[data-theme="light"] .cat-color-sari    { --cat-soft: #faf1cd; }
:root[data-theme="light"] .cat-color-yesil   { --cat-soft: #e2f1e2; }
:root[data-theme="light"] .cat-color-turkuaz { --cat-soft: #ddf0f0; }
:root[data-theme="light"] .cat-color-mavi    { --cat-soft: #e2ecfa; }
:root[data-theme="light"] .cat-color-mor     { --cat-soft: #ece2f7; }
:root[data-theme="light"] .cat-color-pembe   { --cat-soft: #fae0ef; }
:root[data-theme="light"] .cat-color-gri     { --cat-soft: #ebedee; }