/* ============================================================================
   سیستم انبارداری و حسابداری کافه
   طراحی: Premium / Modern / iPhone-style Glassmorphism (الهام از Apple، نه کپی)
   نکته: فقط لایه‌ی Visual تغییر کرده — هیچ selector/کلاسی حذف نشده تا با
   app.js / extra.js / loyalty.js / sync.js صد‌درصد سازگار بماند.
   ============================================================================ */

:root {
  /* ---- پالت پایه: سفید / خاکستری / گرافیتی، با یک لهجه‌ی طلایی-اسپرسو خیلی ظریف
     به‌عنوان هویت برند کافه (فقط برای جزئیات کوچک: نوار فعال، جمع فاکتور و…) ---- */
  --graphite-950: 222 14% 8%;
  --graphite-900: 222 13% 11%;
  --graphite-800: 222 11% 15%;
  --graphite-700: 222 9%  20%;
  --graphite-600: 222 7%  32%;
  --graphite-500: 220 6%  46%;
  --graphite-400: 220 8%  62%;
  --graphite-300: 220 14% 80%;
  --graphite-200: 220 20% 90%;
  --graphite-100: 220 25% 96%;
  --graphite-50:  210 30% 99%;

  --ink: 222 16% 14%;
  --ink-soft: 220 8% 46%;
  --line: 220 14% 88%;

  --accent-h: 222 14% 18%;               /* لهجه‌ی اصلی: گرافیتی عمیق، نه رنگی */
  --accent: var(--accent-h);
  --accent-2: 222 30% 32%;               /* برای گرادیان دکمه‌ها */
  --accent-soft: 220 25% 95%;
  --gold: 38 74% 50%;                    /* لهجه‌ی طلایی برند کافه — مصرف کم و دقیق */
  --gold-soft: 38 80% 95%;
  --green: 152 48% 32%;
  --green-soft: 152 45% 94%;
  --red: 4 72% 48%;
  --red-soft: 4 78% 96%;
  --blue: 212 60% 42%;

  /* ---- زمینه‌ی صفحه: سفید/خاکستری با چند نورِ خیلی نرم (بدون رنگ پرمصرف) ---- */
  --bg: hsl(220 25% 97%);
  --bg-glow-1: hsl(220 90% 92% / .55);
  --bg-glow-2: hsl(38 80% 90% / .35);
  --bg-glow-3: hsl(200 60% 92% / .4);

  /* ---- سطوح شیشه‌ای ---- */
  --surface: hsl(0 0% 100% / .72);
  --surface-solid: #fff;
  --surface-2: hsl(220 24% 95% / .9);
  --surface-strong: hsl(0 0% 100% / .92);
  --glass-border: hsl(0 0% 100% / .6);
  --glass-edge: hsl(220 20% 100% / .8);
  --blur: 22px;
  --blur-sm: 12px;

  --text: hsl(var(--ink));
  --text-soft: hsl(var(--ink-soft));
  --border: hsl(var(--line));

  --shadow-xs: 0 1px 1px hsl(220 30% 10% / .04);
  --shadow-sm: 0 1px 2px hsl(220 30% 10% / .05), 0 2px 6px hsl(220 30% 10% / .05);
  --shadow-md: 0 8px 24px -8px hsl(220 30% 12% / .16), 0 2px 6px hsl(220 30% 12% / .06);
  --shadow-lg: 0 24px 60px -18px hsl(220 35% 10% / .28), 0 4px 14px hsl(220 30% 10% / .08);
  --shadow-inset: inset 0 1px 0 hsl(0 0% 100% / .7);

  --radius: 20px;
  --radius-sm: 12px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;

  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 25px;

  --sidebar-w: 252px;
  --ease: cubic-bezier(.22, .8, .3, 1);
}

html.dark {
  --bg: hsl(224 18% 8%);
  --bg-glow-1: hsl(222 60% 30% / .30);
  --bg-glow-2: hsl(38 60% 30% / .12);
  --bg-glow-3: hsl(200 55% 28% / .18);

  --surface: hsl(224 18% 15% / .58);
  --surface-solid: hsl(224 18% 13%);
  --surface-2: hsl(224 16% 18% / .85);
  --surface-strong: hsl(224 18% 16% / .82);
  --glass-border: hsl(0 0% 100% / .08);
  --glass-edge: hsl(0 0% 100% / .1);

  --text: hsl(220 22% 94%);
  --text-soft: hsl(220 10% 66%);
  --border: hsl(220 12% 26% / .8);

  --accent: 220 14% 78%;
  --accent-2: 220 30% 88%;
  --accent-soft: 220 16% 22%;
  --gold: 38 80% 62%;
  --gold-soft: 38 40% 20%;
  --green-soft: 152 30% 16%;
  --red-soft: 4 42% 18%;

  --shadow-xs: 0 1px 1px #0006;
  --shadow-sm: 0 1px 2px #0007, 0 2px 8px #0004;
  --shadow-md: 0 10px 28px -10px #0009, 0 2px 8px #0006;
  --shadow-lg: 0 28px 70px -20px #000c, 0 6px 18px #0007;
  --shadow-inset: inset 0 1px 0 hsl(0 0% 100% / .06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light; }
html.dark { color-scheme: dark; }

body {
  font-family: 'Vazirmatn', 'SF Pro Display', 'Segoe UI', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.005em;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* نورهای بسیار ظریف پس‌زمینه — ثابت، بدون افکت سنگین */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(680px 480px at 8% -6%, var(--bg-glow-1), transparent 60%),
    radial-gradient(600px 460px at 108% 12%, var(--bg-glow-3), transparent 60%),
    radial-gradient(700px 520px at 40% 118%, var(--bg-glow-2), transparent 60%);
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: hsl(var(--accent)); text-decoration: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsl(220 10% 60% / .4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: hsl(220 10% 50% / .55); }
html.dark ::-webkit-scrollbar-thumb { background: hsl(0 0% 100% / .12); }

/* ---------- چیدمان ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background:
    linear-gradient(190deg, hsl(var(--graphite-900) / .96), hsl(var(--graphite-950) / .98));
  color: hsl(220 25% 96%);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-inline-end: 1px solid hsl(0 0% 100% / .06);
  box-shadow: 6px 0 40px -20px #0009;
}
.sidebar::-webkit-scrollbar-thumb { background: hsl(0 0% 100% / .14); }

.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 20px; }
.brand svg { color: hsl(var(--gold)); flex: 0 0 auto; filter: drop-shadow(0 0 10px hsl(var(--gold) / .35)); }
.brand-t { font-size: var(--text-base); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.brand-s { font-size: var(--text-xs); opacity: .55; margin-top: 1px; }

.nav-group {
  font-size: 10.5px; letter-spacing: .07em; opacity: .4; margin: 16px 10px 7px;
  font-weight: 700; text-transform: uppercase;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-md);
  font-size: var(--text-sm); cursor: pointer; border: 0; background: transparent;
  color: hsl(220 25% 96% / .68); width: 100%; text-align: right;
  transition: background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
  position: relative;
}
.nav-item:hover { background: hsl(0 0% 100% / .07); color: hsl(220 25% 98%); }
.nav-item:active { transform: scale(.985); }
.nav-item.active {
  background: linear-gradient(135deg, hsl(0 0% 100% / .16), hsl(0 0% 100% / .06));
  color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .14), 0 6px 16px -8px #0007;
}
.nav-item.active::before {
  content: ''; position: absolute; inset-inline-start: -14px; top: 50%; translate: 0 -50%;
  width: 3px; height: 16px; border-radius: 3px; background: hsl(var(--gold));
}
.nav-item .ico { width: 17px; height: 17px; flex: 0 0 auto; opacity: .92; }
.nav-badge {
  margin-inline-start: auto; background: linear-gradient(135deg, hsl(4 78% 58%), hsl(var(--red)));
  color: #fff; font-size: 11px; padding: 1px 7px; border-radius: var(--r-pill); font-weight: 600;
  box-shadow: 0 2px 8px hsl(4 70% 45% / .5);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 0 var(--glass-edge) inset, 0 8px 24px -18px #00000022;
}
.topbar h1 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em; }
.topbar .sub { font-size: var(--text-xs); color: var(--text-soft); margin-top: 1px; }
.spacer { margin-inline-start: auto; }
.content { padding: 24px; max-width: 1500px; }

/* ---------- اجزا ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 9px 15px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface-strong); cursor: pointer; font-size: var(--text-sm); font-weight: 500;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  box-shadow: var(--shadow-xs);
  color: var(--text);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}
.btn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary {
  background: linear-gradient(155deg, hsl(var(--accent-2)), hsl(var(--accent-h)));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px -8px hsl(var(--accent-h) / .55), var(--shadow-inset);
}
html.dark .btn-primary { color: hsl(224 20% 12%); }
.btn-primary:hover { box-shadow: 0 10px 24px -8px hsl(var(--accent-h) / .6), var(--shadow-inset); }
.btn-ghost { background: transparent; box-shadow: none; border-color: transparent; backdrop-filter: none; }
.btn-ghost:hover { background: hsl(220 20% 50% / .09); box-shadow: none; transform: none; }
.btn-danger {
  color: hsl(var(--red)); border-color: hsl(var(--red) / .28); background: hsl(var(--red-soft));
  box-shadow: none;
}
.btn-sm { padding: 5px 10px; font-size: var(--text-xs); border-radius: var(--r-sm); }
.icon-btn { padding: 6px; width: 34px; height: 34px; border-radius: var(--r-sm); }

.card {
  background: var(--surface);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  transition: box-shadow .2s var(--ease);
}
.card-h {
  padding: 15px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.card-h h2 { font-size: var(--text-base); font-weight: 700; letter-spacing: -.005em; }
.card-h .hint { font-size: var(--text-xs); color: var(--text-soft); }
.card-b { padding: 18px; }

.grid { display: grid; gap: 14px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpis6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 700px) { .kpis6 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1500px) { .kpis6 { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.kpi { padding: 15px 17px; min-width: 0; overflow: hidden; position: relative; }
.kpi .lbl { font-size: var(--text-xs); color: var(--text-soft); display: flex; align-items: center; gap: 6px; }
.kpi .val {
  font-size: var(--text-xl); font-weight: 700; margin-top: 7px;
  font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; overflow-wrap: normal;
  letter-spacing: -.01em;
}
.kpi .val small { font-size: var(--text-xs); font-weight: 500; color: var(--text-soft); margin-inline-start: 4px; }
.kpi.accent::before, .kpi.good::before, .kpi.warn::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 3px;
}
.kpi.accent::before { background: linear-gradient(180deg, hsl(var(--gold)), hsl(var(--gold) / .3)); }
.kpi.good::before { background: linear-gradient(180deg, hsl(var(--green)), hsl(var(--green) / .3)); }
.kpi.warn::before { background: linear-gradient(180deg, hsl(var(--red)), hsl(var(--red) / .3)); }

/* ---------- جدول ---------- */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
th {
  background: var(--surface-2); font-weight: 600; font-size: var(--text-xs);
  color: var(--text-soft); position: sticky; top: 0; z-index: 2;
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  letter-spacing: .01em;
}
tbody tr { transition: background .12s var(--ease); }
tbody tr:hover { background: hsl(220 30% 50% / .06); }
html.dark tbody tr:hover { background: hsl(0 0% 100% / .04); }
td.num, th.num { font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; background: var(--surface-2); }
.t-scroll { max-height: 62vh; overflow: auto; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--text-xs); font-weight: 600;
}
.pill-ok { background: hsl(var(--green-soft)); color: hsl(var(--green)); }
.pill-bad { background: hsl(var(--red-soft)); color: hsl(var(--red)); }
.pill-warn { background: hsl(var(--gold-soft)); color: hsl(30 80% 34%); }
html.dark .pill-warn { background: hsl(38 40% 22%); color: hsl(38 80% 72%); }
.pill-mut { background: var(--surface-2); color: var(--text-soft); }

/* ---------- فرم ---------- */
.form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 130px; }
.field.grow { flex: 1; }
.field input, .field select, .field textarea { min-width: 0; }
.modal-b .field { flex: 1 1 132px; }
.modal-b .field:has(.check) { flex: 0 0 auto; }
.field label { font-size: var(--text-xs); color: var(--text-soft); font-weight: 500; }
input, select, textarea {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: hsl(0 0% 100% / .7); outline: none;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
  width: 100%; color: var(--text);
}
html.dark input, html.dark select, html.dark textarea { background: hsl(224 16% 12% / .7); }
input:focus, select:focus, textarea:focus {
  border-color: hsl(var(--accent-h) / .55); background: var(--surface-strong);
  box-shadow: 0 0 0 4px hsl(var(--accent-h) / .1);
}
input.mini, select.mini { padding: 5px 8px; font-size: var(--text-xs); }
input[type=number] { font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); }
.check input { width: auto; }

.search { position: relative; min-width: 210px; }
.search input { padding-inline-start: 34px; }
.search svg { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); color: var(--text-soft); }

/* ---------- بنر / خالی ---------- */
.banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px;
  border-radius: var(--r-md); font-size: var(--text-sm); margin-bottom: 14px;
  border: 1px solid; line-height: 1.55;
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}
.banner-info { background: hsl(var(--accent-soft) / .8); border-color: hsl(var(--accent-h) / .18); }
.banner-warn { background: hsl(var(--red-soft) / .85); border-color: hsl(var(--red) / .25); }
.banner b { font-weight: 700; }
.empty { padding: 46px 16px; text-align: center; color: var(--text-soft); font-size: var(--text-sm); }
.empty svg { opacity: .3; margin-bottom: 8px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 9px 15px; border: 0; background: transparent; cursor: pointer;
  font-size: var(--text-sm); color: var(--text-soft); border-bottom: 2px solid transparent; font-weight: 500;
  transition: color .16s var(--ease), border-color .16s var(--ease);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.tab:hover { color: var(--text); background: hsl(220 20% 50% / .06); }
.tab.active { color: hsl(var(--accent-h)); border-bottom-color: hsl(var(--gold)); font-weight: 700; }
html.dark .tab.active { color: #fff; }

/* ---------- مودال ---------- */
.overlay {
  position: fixed; inset: 0; background: hsl(224 30% 6% / .42);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 100;
  animation: fade .18s var(--ease);
}
.modal {
  background: var(--surface-strong);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: var(--r-lg); width: min(720px, 100%);
  max-height: 88vh; overflow: auto; box-shadow: var(--shadow-lg); border: 1px solid var(--glass-border);
  animation: pop .22s var(--ease);
}
@keyframes fade { from { opacity: 0 } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98) } }
.modal-h { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.modal-h h3 { font-size: var(--text-base); font-weight: 700; letter-spacing: -.005em; }
.modal-b { padding: 20px; display: flex; flex-direction: column; gap: 13px; }
.modal-f {
  padding: 15px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px;
  justify-content: flex-start; background: var(--surface-2);
}

/* ---------- توست ---------- */
.toasts { position: fixed; inset-block-end: 20px; inset-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast {
  background: linear-gradient(155deg, hsl(222 11% 15% / .96), hsl(222 14% 8% / .98));
  color: hsl(220 25% 96%); padding: 11px 16px;
  border-radius: var(--r-md); font-size: var(--text-sm); box-shadow: var(--shadow-lg);
  animation: slide .22s var(--ease); max-width: 340px;
  border: 1px solid hsl(0 0% 100% / .08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.toast.ok { border-inline-start: 3px solid hsl(152 55% 55%); }
.toast.err { border-inline-start: 3px solid hsl(4 75% 62%); }
@keyframes slide { from { opacity: 0; transform: translateY(10px) } }

/* ---------- نمودار ---------- */
.chart { width: 100%; height: auto; max-height: 300px; display: block; }
.chart .bar { transition: opacity .15s var(--ease); cursor: default; }
.chart .bar:hover { opacity: .78; }
.legend { display: flex; gap: 16px; font-size: var(--text-xs); color: var(--text-soft); flex-wrap: wrap; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-inline-end: 5px; }

.recipe-lines { display: flex; flex-direction: column; gap: 7px; }
.recipe-line { display: grid; grid-template-columns: 1fr 110px 90px 34px; gap: 7px; align-items: center; }
.recipe-line .u { font-size: var(--text-xs); color: var(--text-soft); text-align: center; }

.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-soft); }
.small { font-size: var(--text-xs); }
.right { text-align: left; }
.nowrap { white-space: nowrap; }
.flexr { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flexr > select { flex: 1 1 150px; min-width: 0; }
.neg { color: hsl(var(--red)); font-weight: 600; }
.pos { color: hsl(var(--green)); font-weight: 600; }

.hamburger { display: none; }
@media (max-width: 900px) {
  .sidebar {
    position: fixed; inset-inline-start: 0; top: 0; z-index: 60; transform: translateX(100%);
    transition: transform .26s var(--ease); box-shadow: -12px 0 40px #0006;
  }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: inline-flex; }
  .content { padding: 15px; }
  .topbar { padding: 12px 15px; }
  .recipe-line { grid-template-columns: 1fr 90px 34px; }
  .recipe-line .u { display: none; }
  .form-row > .field { flex: 1 1 150px; }
  .form-row > .field.grow { flex: 1 1 100%; }
  .modal-b .field { flex: 1 1 150px; }
}
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  body { background: #fff; }
  body::before { display: none; }
  .card { box-shadow: none; backdrop-filter: none; }
}

/* ==================== بسته توسعه ==================== */
/* صندوق فروش */
.pos-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; }
.pos-cart { position: sticky; top: 14px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: right;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: inherit; font: inherit; cursor: pointer;
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .12s var(--ease);
}
.tile:hover { border-color: hsl(var(--gold) / .55); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tile:active { transform: translateY(0) scale(.98); }
.tile-n { font-weight: 600; font-size: var(--text-sm); line-height: 1.35; }
.tile-p { font-size: var(--text-sm); color: hsl(var(--gold)); font-weight: 700; }
html.dark .tile-p { color: hsl(var(--gold)); }
.cart-lines { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow: auto; }
.cart-line { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 7px; align-items: center; }
.cart-n { min-width: 0; font-size: var(--text-sm); }
.cart-n > div:first-child { font-weight: 600; overflow-wrap: anywhere; }
.cart-q { display: flex; align-items: center; gap: 3px; }
.cart-s { font-size: var(--text-sm); font-weight: 700; min-width: 62px; text-align: left; }
input.mini { padding: 4px 7px; font-size: var(--text-xs); width: 74px; border-radius: var(--r-sm); }
input.mini.c { width: 48px; text-align: center; }
select.mini { padding: 4px 7px; font-size: var(--text-xs); width: auto; border-radius: var(--r-sm); }
.cart-sum { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.cart-sum .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-sm); }
.cart-sum .row.total { border-top: 1px solid var(--border); padding-top: 9px; font-size: var(--text-base); }
.cart-sum .row.total b { color: hsl(var(--gold)); font-size: var(--text-lg); }
html.dark .cart-sum .row.total b { color: hsl(var(--gold)); }

/* ستون‌های پر کردنی */
td.fillcol, th.fillcol { background: hsl(var(--gold) / .1); }
html.dark td.fillcol, html.dark th.fillcol { background: hsl(var(--gold) / .1); }
td.fillcol input { padding: 4px 7px; font-size: var(--text-xs); width: 100%; min-width: 74px; text-align: center; }

/* میله افقی */
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 168px) 1fr auto; gap: 10px; align-items: center; font-size: var(--text-xs); }
.hbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-t { background: var(--surface-2); border-radius: var(--r-pill); height: 15px; overflow: hidden; }
.hbar-f { height: 100%; border-radius: var(--r-pill); transition: width .4s var(--ease); }
.hbar-v { min-width: 74px; text-align: left; color: var(--text-soft); }

/* جستجوی سراسری */
.pal-o { align-items: flex-start; }
.palette {
  background: var(--surface-strong);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); width: min(560px, 94vw); margin-top: 9vh; overflow: hidden;
}
.pal-h { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text-soft); }
.pal-h input { border: 0; background: transparent; padding: 0; font-size: var(--text-base); box-shadow: none; }
.pal-h input:focus { outline: none; box-shadow: none; }
.pal-b { max-height: 52vh; overflow: auto; padding: 7px; }
.pal-i {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: inherit; font: inherit; text-align: right; cursor: pointer;
  transition: background .12s var(--ease);
}
.pal-i:hover, .pal-i.sel { background: hsl(220 30% 50% / .1); }
html.dark .pal-i:hover, html.dark .pal-i.sel { background: hsl(0 0% 100% / .08); }
.pal-i > span:first-child { font-weight: 500; }
.pal-f { padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface-2); }

@media (max-width: 1000px) {
  .pos-wrap { grid-template-columns: 1fr; }
  .pos-cart { position: static; }
}
@media (max-width: 900px) {
  .cart-line { grid-template-columns: 26px 1fr auto; }
  .cart-s { grid-column: 2 / -1; text-align: right; }
}

/* حذف فلش‌های عددی مرورگر برای ظاهر تمیزتر */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-n .small { display: flex; align-items: center; gap: 4px; margin-top: 3px; white-space: nowrap; }
.cart-n .small input.mini { width: 88px; text-align: center; }

/* اعداد شاخص‌ها روی موبایل نصف نشوند */
@media (max-width: 560px) {
  .kpi .val { font-size: clamp(15px, 4.6vw, 21px); }
  .kpi .val small { display: block; margin: 3px 0 0; margin-inline-start: 0; }
}

/* نوار ابزار کارت‌ها روی صفحه‌های کوچک چند خطی شود */
@media (max-width: 780px) {
  .card-h { flex-wrap: wrap; row-gap: 9px; }
  .card-h .spacer { display: none; }
  .card-h .field { flex: 1 1 138px; min-width: 0; }
  .card-h input, .card-h select { min-width: 0; }
}

/* ---- بهبود موبایل ---- */
@media (max-width: 1000px) {
  .pos-cart { order: -1; }            /* سبد خرید روی موبایل بالای محصولات */
  .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 560px) {
  .topbar h1 { font-size: var(--text-base); white-space: nowrap; }
  .topbar .sub { display: none; }
  .tile { padding: 9px 10px; }
}

/* ---- سازگاری بیشتر با موبایل — برای کار راحت ویتر سر میز ---- */
@media (max-width: 900px) {
  /* جلوگیری از زوم خودکار سافاری هنگام فوکوس روی ورودی (باعث می‌شد صفحه بپرد) */
  input, select, textarea { font-size: 16px; }
  input.mini, select.mini { font-size: 16px; padding: 7px 9px; }
  input.mini { width: 90px; }
  input.mini.c { width: 56px; }

  /* دکمه‌ها و آیکون‌ها بزرگ‌تر برای لمس با انگشت */
  .btn { min-height: 40px; padding: 9px 14px; }
  .btn-sm { min-height: 34px; padding: 7px 11px; }
  .icon-btn { width: 40px; height: 40px; }
  .cart-q .icon-btn { width: 34px; height: 34px; }
  .nav-item { padding: 12px 12px; font-size: var(--text-base); }
  .hamburger { width: 42px; height: 42px; }
  #today { display: none; }

  /* نوار ثبت فاکتور همیشه پایین صفحه بماند تا لازم نباشد اسکرول کنی */
  .pos-actions {
    position: sticky; bottom: 0; background: var(--surface-strong);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    padding: 10px 0 6px; margin-top: 8px !important;
    box-shadow: 0 -10px 24px -16px #0008; z-index: 5;
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
}
@media (max-width: 560px) {
  .user-badge span { display: none; }
}