/* سیستم طراحی: طبقِ سندِ هندافِ طراحی (مرداد ۱۴۰۵) — نزدیک به زبانِ بصریِ
   فودپارتنرِ اسنپ‌فود: صورتی/مجنتا برایِ اقدام، سبز برایِ وضعیتِ فعال/لینک،
   قرمز برایِ خطر، کهربایی برایِ در‌انتظار. ساختارِ صفحه‌ها (تب‌های بالا، نه
   سایدبار) و تفکیکِ «جایگاه اول / ابزارها / در انتظار تایید / هشدارها /
   گزارش / آنالیتیکس» عمداً از UXِ قبلیِ همین پروژه حفظ شده — فقط زبانِ
   بصری عوض شده، نه معماریِ اطلاعات. */

@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* فایل‌ها سلف‌هاست‌اند (src/sfbot/web/static/fonts، مجوزِ OFL) — بدونِ
   فونتِ CDN خارجی، طبقِ محدودیتِ VPS ایرانی. */

/* ---------- توکن‌ها ----------
   طبقِ بوردِ بازطراحی (SFBOT Redesign.dc.html، شهریور ۱۴۰۵). هسته‌ی رنگی
   عمداً همان قبلی است -- خویشاوندی با پنلِ خودِ فودپارتنر ارزش دارد، چون
   کاربر هم‌زمان بینِ این دو جابه‌جا می‌شود.

   ⚠️ نام‌هایِ قدیمی پایینِ همین بلاک به‌عنوانِ alias نگه داشته شده‌اند.
   کلِ استایل‌شیت به آن‌ها ارجاع دارد؛ حذفشان یعنی شکستنِ همه‌چیز در یک
   قدم. هرجا که مقدارشان با طرحِ جدید فرق داشت، به مقدارِ جدید نگاشته
   شده‌اند، نه به مقدارِ قدیمی -- پس ظاهر عوض می‌شود بدونِ اینکه چیزی
   بشکند. */
:root {
  /* رنگ */
  --c-primary: #e5116c;      --c-primary-ink: #b70e56;
  --c-primary-soft: #fdeaf2;
  --c-success: #15a05a;      --c-success-soft: #e9f7ef;
  --c-danger: #d63a2e;       --c-danger-soft: #fdecea;
  --c-warning: #e8a417;      --c-warning-soft: #fdf4e3;
  /* ⚠️ رنگِ ششم، افزوده‌ی طراح و مهم‌ترین تصمیمِ رنگیِ این بازطراحی:
     اقدامی که پولِ واقعی خرج می‌کند نه «اصلی» است نه «خطر». این بنفش
     فقط و فقط جایی می‌آید که تراکنشِ مالی رخ می‌دهد، تا کاربر یک
     نشانه‌ی اختصاصی برایِ «این پول خرج می‌کند» یاد بگیرد. */
  --c-spend: #7a3ff2;        --c-spend-soft: #f3eeff;
  --c-text: #1b1b1f;         --c-text-2: #4a4a55;
  --c-muted: #6b6b76;        --c-faint: #9a9aa5;
  --c-bg: #f5f5f7;           --c-surface: #ffffff;
  --c-surface-2: #fafafb;
  --c-border: #dddde4;       --c-border-strong: #c6c6d0;

  /* فاصله (مبنای ۴px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* گردی */
  --radius-field: 10px; --radius-card: 14px;
  --radius-sheet: 20px; --radius-pill: 999px;

  /* تایپوگرافی */
  --font: 'Vazirmatn', Tahoma, sans-serif;
  --fs-display: 26px; --fs-h1: 20px; --fs-h2: 17px;
  --fs-body: 15px;    --fs-sm: 13px; --fs-xs: 11.5px;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;
  --lh-tight: 1.3; --lh-body: 1.7;

  /* سایه و لایه */
  --sh-card: 0 1px 2px rgba(27, 27, 31, .05);
  --sh-raise: 0 4px 16px rgba(27, 27, 31, .09);
  --sh-sheet: 0 -8px 40px rgba(27, 27, 31, .18);
  --z-nav: 40; --z-sheet: 60; --z-toast: 80;

  /* لمس و ساختار */
  --tap: 44px;       /* حداقلِ هدفِ لمسی */
  --nav-h: 64px;     /* نوارِ پاییِن موبایل */
  --ctx-h: 104px;    /* هدرِ زمینه (پنل + چرخه) */
  --sidebar-w: 248px;
  --content-max: 1080px;

  /* ---- نام‌هایِ قدیمی (alias) ---- */
  --c-primary-hover: var(--c-primary-ink);
  --c-border-input: #e7e7ec;
  --c-warning-text: #8a6100;
  --c-danger-soft-border: #f2c7c1;
  --c-warning-soft-border: #f5dfa6;
  --c-locked-bg: #f0f0f3;
  --c-locked-rail: #ededf2;
  --c-locked-text: #c4c4cc;
  --c-chart-1: #e5116c;
  --c-chart-2: #f5a6c6;
  --c-chart-3: #fdeaf2;
  --radius-checkbox: 6px;
  --shadow-card: var(--sh-card);
  --shadow-card-emph: var(--sh-raise);
  --font-body: var(--font);
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  /* ۱۵px/۱.۷ به‌جایِ ۱۴px/۱.۹ -- طبقِ بورد. متن کمی بزرگ‌تر و سطرها
     جمع‌تر: روی گوشی هم خواناتر است هم در یک صفحه بیشتر جا می‌شود. */
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  min-height: 100vh;
  /* صفحه هرگز افقی اسکرول نمی‌گیرد؛ فقط خودِ جدول‌ها داخلِ کانتینرشان. */
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

h1, h2, h3 { font-family: var(--font-body); font-weight: 700; margin: 0; }

button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* اعداد همیشه ایزوله، وگرنه در RTL جابه‌جا می‌شوند (مثلاً «۱۷:۵۶» یا
   مبلغی که کنارش واحد دارد). tabular-nums هم لازم است تا ستونِ مبالغ
   موقعِ به‌روزرسانی نلرزد. `.ltr-num`/`.mono` نام‌هایِ قدیمی‌اند و
   می‌مانند؛ نامِ جدید `.num` است. */
.num, .ltr-num, .mono {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* ---------- جدولِ عریض رویِ موبایل ----------
   راهِ‌حلِ بورد: صفحه اسکرولِ افقی نگیرد، فقط خودِ جدول -- با ستونِ اولِ
   چسبیده تا موقعِ اسکرول معلوم بماند هر ردیف مالِ کدام محله/محصول است. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table-scroll th:first-child,
.table-scroll td:first-child {
  position: sticky;
  right: 0;
  background: var(--c-surface);
}

/* ---------- صفحه‌ی لاگین ---------- */

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--c-bg);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px 28px;
}

.auth-card .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-primary);
  margin-bottom: 6px;
}

.auth-card h1 { font-size: 22px; margin-bottom: 8px; }
.auth-card .auth-note { font-size: 11.5px; color: var(--c-faint); margin-bottom: 24px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--c-muted); margin-bottom: 6px; }
.field input {
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: var(--radius-field);
  color: var(--c-text);
  padding: 12px 14px;
  font-size: 15px;
  height: 48px;
}
.field input:focus { border-color: var(--c-primary); border-width: 1.5px; }

.password-field { position: relative; }
.password-field input { padding-left: 56px; }
.password-toggle {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  border: none;
  background: none;
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 0 8px;
}

.error-text { color: var(--c-danger); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ---------- دکمه‌ها ---------- */

.btn {
  border: none;
  border-radius: var(--radius-field);
  padding: 13px 24px;
  font-size: 13.5px;
  font-weight: 700;
  transition: transform 0.08s ease, opacity 0.15s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-hover); }

.btn-ghost { background: var(--c-surface); border: 1.5px solid var(--c-primary); color: var(--c-primary); }
.btn-ghost:hover { background: var(--c-primary-soft); }

.btn-danger { background: var(--c-danger-soft); border: 1px solid var(--c-danger-soft-border); color: var(--c-danger); }
.btn-danger:hover { background: #fbe4e1; }

/* ---------- دکمه‌ی پول‌خرج‌کن ----------
   ⚠️ مهم‌ترین تصمیمِ بازطراحی. تا امروز «اجرای دستی الان» -- که یک
   تراکنشِ مالیِ واقعی راه می‌اندازد -- دقیقاً شبیهِ «بیدینگ‌های امروز»
   بود که فقط یک لیست باز می‌کند. حالا رنگِ اختصاصیِ خودش را دارد، و
   هرجا می‌آید باید آیکونِ کیفِ پول و سقفِ مبلغ همراهش باشد.

   نه «اصلی» است (چون اصلی یعنی «کارِ عادی») و نه «خطر» (چون خطر یعنی
   «چیزی را خراب می‌کنی»). این یک دسته‌ی سومِ مستقل است: «پول خرج
   می‌کند». */
.btn-spend {
  background: var(--c-spend);
  color: #fff;
  border: none;
  font-weight: var(--fw-semi);
}
.btn-spend:hover { background: #6a34d8; }
.btn-spend[disabled] { background: var(--c-faint); }

/* نوارِ اقدامِ مالی -- دکمه‌ی spend هیچ‌وقت لختِ وسطِ محتوا نمی‌نشیند. */
.spend-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  background: var(--c-spend-soft);
  border: 1px solid #ddd0fb;
  border-radius: var(--radius-card);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.spend-bar .spend-note {
  font-size: var(--fs-sm);
  color: #4c2b8f;
  line-height: var(--lh-tight);
}
.spend-bar .spend-note strong { font-weight: var(--fw-semi); }

.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 12.5px; border-radius: 10px; }

@media (max-width: 640px) {
  .btn { min-height: 48px; }
}

/* ---------- لینک ثانویه ---------- */

.link-secondary {
  color: var(--c-success);
  font-weight: 700;
  font-size: 13px;
  background: none;
  border: none;
  text-decoration: none;
  padding: 0;
}
.link-secondary::after { content: ' ‹'; }
.link-secondary:hover { color: var(--c-success); opacity: 0.8; }

/* ---------- برچسبِ وضعیت ---------- */

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}
.status-pill--active { background: var(--c-success-soft); color: var(--c-success); }
.status-pill--inactive { background: var(--c-danger-soft); color: var(--c-danger); }
.status-pill--pending { background: var(--c-warning-soft); color: var(--c-warning-text); }
.status-pill--locked { background: var(--c-locked-bg); color: var(--c-muted); }

/* ---------- پوسته‌ی اصلی اپ: سایدبار (دسکتاپ) / نوارِ پایینِ چسبان (موبایل) ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--c-surface);
  border-inline-start: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.rail-brand { display: flex; align-items: baseline; gap: 10px; padding: 0 10px; margin-bottom: 20px; }
.rail-brand .mark { color: var(--c-primary); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
.rail-brand h1 { font-size: 15px; }

.tab {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--c-muted);
  padding: 11px 12px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-field);
  text-align: right;
  white-space: nowrap;
}
.tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.tab:hover { color: var(--c-text); background: var(--c-bg); }
.tab.is-active { color: var(--c-primary); background: var(--c-primary-soft); font-weight: 700; }

.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 62px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-start { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar-end { display: flex; align-items: center; gap: 14px; }

.topbar select {
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  color: var(--c-text);
  border-radius: var(--radius-field);
  padding: 8px 12px;
  font-size: 13.5px;
  height: 40px;
}

.topbar-panel-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  padding: 8px 4px;
}

/* سوییچرِ پنل: کنترلِ سراسریِ ساختن/انتخابِ پنل در topbar، شبیهِ سوییچرِ
   شعبه‌ی خودِ اپِ فودپارتنر — پاپ‌آورِ ساختِ پنل زیرِ دکمه شناور می‌شود. */
.panel-switcher { position: relative; display: flex; align-items: center; gap: 8px; }
#jg-panel-select { min-width: 160px; flex: 1 1 auto; }
.panel-switcher-popover {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 20;
  min-width: 280px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px;
  flex-direction: column;
  align-items: stretch;
}
.panel-switcher-popover.is-hidden { display: none; }
.panel-switcher-popover input,
.panel-switcher-popover select { width: 100%; }

.last-run { font-size: 11.5px; color: var(--c-faint); }

.bell-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--c-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bell-btn:hover { background: var(--c-bg); }
.bell-btn svg { width: 19px; height: 19px; }
.bell-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--c-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bell-badge.is-hidden { display: none; }

.avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  border: none;
  font-weight: 700;
  font-size: 13px;
}
.avatar-btn.is-active { background: var(--c-primary); color: #fff; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--c-muted);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chip--active .dot { background: var(--c-success); box-shadow: 0 0 0 3px var(--c-success-soft); }
.chip--analysis .dot { background: var(--c-faint); }

.app-main { max-width: 920px; width: 100%; margin: 0 auto; padding: 28px 24px 80px; }

.view { display: none; }
.view.is-active { display: block; }

/* ---------- هدرِ زمینه: پنلِ فعال + چرخه‌ی ۱۶:۰۰ تا ۱۸:۰۰ ---------- */

.ctx-header {
  display: flex;
  align-items: stretch;
  gap: var(--s-4);
  flex-wrap: wrap;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--sh-card);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.ctx-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 200px;
}
.ctx-panel-name {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctx-panel-meta { font-size: var(--fs-sm); color: var(--c-muted); line-height: var(--lh-tight); }

.cycle { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); justify-content: center; }
.cycle-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.cycle-state { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.cycle-clock { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.cycle-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  overflow: hidden;
}
.cycle-fill { height: 100%; width: 0; background: var(--c-faint); transition: width .4s ease; }
.cycle-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* حالت‌ها -- رنگ فقط وقتی معنا دارد که وضعیت واقعاً عوض شده باشد */
.cycle--before .cycle-state { color: var(--c-muted); }
.cycle--after  .cycle-state { color: var(--c-muted); }
.cycle--after  .cycle-fill  { background: var(--c-border-strong); }
.cycle--live   .cycle-state { color: var(--c-success); }
.cycle--live   .cycle-fill  { background: var(--c-success); }
/* ⚠️ دو دقیقه‌ی آخر جایی است که همه‌چیز تصمیم می‌شود -- اینجا و فقط
   اینجا رابط باید سر و صدا کند. */
.cycle--final  .cycle-state { color: var(--c-primary); }
.cycle--final  .cycle-fill  { background: var(--c-primary); animation: sfpulse 1.4s ease-in-out infinite; }

/* ---------- شیتِ ساخت/ویرایش ----------
   موبایل: باتم‌شیت (شست به لبه‌ی پایین نزدیک‌تر است).
   دسکتاپ: دیالوگِ وسطِ صفحه. */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 27, 31, .45);
  z-index: var(--z-sheet);
}
.sheet {
  position: fixed;
  z-index: calc(var(--z-sheet) + 1);
  inset-inline: 0;
  bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: var(--sh-sheet);
}
.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
/* ⚠️ همین دو خط، خودِ فیکس‌اند: تا دیروز فرم نمی‌گفت داری می‌سازی یا
   ویرایش می‌کنی. */
.sheet-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--c-primary);
  letter-spacing: .04em;
}
.sheet-title { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.sheet-close {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--c-muted);
  border-radius: var(--radius-field);
}
.sheet-close:hover { background: var(--c-bg); color: var(--c-text); }
.sheet-body { padding: var(--s-4); overflow-y: auto; flex: 1 1 auto; }
.sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
  /* روی گوشی، نوارِ ناوبریِ خودِ مرورگر پایین را می‌خورد */
  padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
}
body.sheet-open { overflow: hidden; }

@media (min-width: 700px) {
  .sheet {
    inset-inline: 50%;
    bottom: auto;
    top: 50%;
    transform: translate(50%, -50%);
    width: min(560px, calc(100vw - 48px));
    border-radius: var(--radius-sheet);
    max-height: 84vh;
  }
}

/* ---------- «امشب» ---------- */

.metric-tile--danger .metric-value { color: var(--c-danger); }
.metric-tile--spend  .metric-value { color: var(--c-spend); }

.attention-row {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--radius-field);
  background: var(--c-danger-soft);
  border: 1px solid var(--c-danger-soft-border);
}
.attention-row .label { font-weight: var(--fw-semi); color: var(--c-danger); }
.attention-row .sub { font-size: var(--fs-sm); color: var(--c-text-2); }

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    top: auto;
    height: auto;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-inline-start: none;
    border-top: 1px solid var(--c-border);
    padding: 6px 4px;
    z-index: 20;
  }
  .rail-brand { display: none; }
  .tab { flex-direction: column; gap: 3px; padding: 6px 8px; font-size: 10.5px; border-radius: 10px; }
  .app-content { padding-bottom: 64px; }

  .topbar { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 8px; }
  .topbar-start { flex: 1 1 100%; }
  .topbar-start select { max-width: 100%; }
  .panel-switcher { flex-basis: 100%; }
  .chip { flex-basis: 100%; }
  .app-main { padding: 20px 14px 80px; }
}

/* ---------- بخش‌ها (کارت‌های تنظیمات) ---------- */

.ledger-section {
  margin-bottom: 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}

.ledger-section h2 {
  font-size: 16px;
  color: var(--c-text);
  margin-bottom: 4px;
}

.ledger-section .hint { font-size: 11.5px; color: var(--c-faint); margin-bottom: 10px; line-height: 1.8; }

.ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-locked-bg);
}
.ledger-row:last-child { border-bottom: none; }

.ledger-row .label { color: var(--c-text); font-size: 14px; }
.ledger-row .sub { color: var(--c-faint); font-size: 11.5px; margin-top: 2px; }

.ledger-row .value-group { display: flex; align-items: center; gap: 10px; }
.ledger-row .value { color: var(--c-primary); font-size: 17px; font-weight: 700; direction: ltr; unicode-bidi: isolate; }

.ledger-row input.inline-edit {
  width: 110px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  color: var(--c-text);
  border-radius: var(--radius-field);
  padding: 8px 10px;
  height: 40px;
  direction: ltr;
  text-align: right;
}
.ledger-row input.inline-edit:focus { border-color: var(--c-primary); border-width: 1.5px; }

.ledger-empty { padding: 18px 0; color: var(--c-faint); font-size: 13px; }

/* ---------- ردیف‌هایِ پرمعیارِ «تحلیل بیدینگ‌های گذشته» ---------- */
/* کشف کاربر (تستِ زنده رویِ موبایل): این ردیف‌ها شش معیار کنارِ هم دارند
   (بیدینگ، میانگین بازدید/سفارش/هزینه، هزینه/بازدید، هزینه/سفارش) و در
   عرضِ گوشی از باکس می‌زدند بیرون — چون value-group پیش‌فرض wrap نمی‌شود
   و flex-item ها هم پیش‌فرض کوچک‌تر از محتوایشان نمی‌شوند. */
.bh-row { align-items: flex-start; flex-wrap: wrap; }
.bh-row .label { flex: 1 1 100%; font-size: 13px; margin-bottom: 6px; }
.bh-row .value-group { flex: 1 1 100%; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
.bh-row .value {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  /* برچسبِ فارسی + عددِ لاتین در یک span: بدونِ این، جهتِ کلِ عبارت به‌هم
     می‌ریزد (عدد می‌پرد اولِ جمله). */
  direction: rtl;
  unicode-bidi: plaintext;
}
.bh-row .value .n { direction: ltr; unicode-bidi: isolate; }

@media (min-width: 720px) {
  .bh-row .label { flex: 0 0 auto; margin-bottom: 0; }
  .bh-row .value-group { flex: 1 1 auto; justify-content: flex-end; }
}

/* گروهِ محله (صفحه‌ی جایگاه اول): یک کارتِ نرم برای هر محله، شیفت‌های
   همان محله به‌صورتِ ردیف‌های تودرتو زیرش — تا لیستِ بسته‌های بیدینگ به‌جایِ
   یک لیستِ تخت، به‌تفکیکِ محله دیده شود. */
.region-group {
  background: var(--c-locked-bg);
  border-radius: 12px;
  padding: 4px 16px;
  margin-bottom: 12px;
}
.region-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  padding: 12px 0 4px;
}
.region-group .ledger-row { padding: 10px 0; }

/* ---------- فیلدِ مبلغ (تومان) ---------- */

.amount-field { position: relative; display: inline-flex; align-items: center; }
.amount-field input.amount-input {
  height: 48px;
  min-width: 150px;
  border: 1px solid var(--c-border-input);
  border-radius: var(--radius-field);
  padding: 0 52px 0 14px;
  direction: ltr;
  text-align: right;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
  background: var(--c-surface);
}
.amount-field input.amount-input:focus { border-color: var(--c-primary); border-width: 1.5px; }
.amount-field input.amount-input.has-error { border-color: var(--c-danger); background: var(--c-danger-soft); color: var(--c-danger); }
.amount-field .unit {
  position: absolute;
  left: 14px;
  color: var(--c-faint);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}
.field-helper { font-size: 11.5px; color: var(--c-faint); margin-top: 6px; line-height: 1.8; }
.field-helper.is-error { color: var(--c-danger); }

/* ---------- کارتِ رادیویی (حالتِ اجرای پنل) ---------- */

.radio-card-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
@media (max-width: 480px) { .radio-card-group { grid-template-columns: 1fr; } }
.radio-card {
  border: 1px solid var(--c-border-input);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  cursor: pointer;
}
.radio-card.is-selected { border: 1.5px solid var(--c-primary); background: var(--c-primary-soft); }
.radio-card .title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.radio-card .title .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--c-border-input); flex-shrink: 0; }
.radio-card.is-selected .title .dot { border-color: var(--c-primary); background: var(--c-primary); }
.radio-card .desc { font-size: 11.5px; color: var(--c-faint); margin-top: 4px; }
/* «انتخاب کردی ولی هنوز ذخیره نشده» باید دیده شود، وگرنه کاربر فکر
   می‌کند حالت عوض شده و نشده. */
.hint--warn { color: var(--c-warning-text); font-weight: 600; }

/* حکمِ دبل‌چکِ روزانه. ⚠️ عمداً `.chip` نیست: آن یکی زیرِ ۷۶۸ پیکسل
   `flex-basis:100%` می‌گیرد (برایِ نوارِ بالا نوشته شده) و اینجا رویِ
   گوشی از ردیف بیرون می‌زد. */
.check-verdict {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.check-verdict--ok { background: var(--c-success-soft); color: var(--c-success); }
.check-verdict--off { background: var(--c-danger-soft); color: var(--c-danger); }

/* ---------- بلوکِ فیلد (لیبل + کنترل) ---------- */

.field-block { margin-bottom: 14px; }
.field-block-row { display: flex; gap: 16px; flex-wrap: wrap; }
/* ⚠️ هر `display` صریحی از خاصیتِ `hidden` جلو می‌زند -- بلوکِ ساعتِ
   تخفیف با وجودِ hidden=true دیده می‌شد، چون .field-block-row روی
   display:flex بود. این یک قاعده جلویِ تکرارِ همین اشتباه را در کلِ
   صفحه می‌گیرد. */
[hidden] { display: none !important; }
.field-block-row .field-block { flex: 1; min-width: 180px; }

/* لیستِ انتخابِ محصول/دسته از منویِ یک شعبه. سقفِ ارتفاع عمدی است:
   یک شعبه به‌راحتی ۱۵۰ محصولِ فعال دارد و بدونِ اسکرولِ داخلی، دکمه‌ی
   «ایجادِ تخفیف» چند صفحه پایین‌تر می‌افتد. */
.picker-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  margin-top: 8px;
}
.picker-list .ledger-row:last-child { border-bottom: none; }
/* دسته‌ی زیرِ ۵ محصولِ فعال. ⚠️ بسته نیست -- دو دسته‌ی کوچک رویِ هم
   می‌توانند از حد رد شوند. این فقط علامتی است که در یک نگاه دیده شود. */
.picker-list .ledger-row.is-thin .sub { color: var(--c-warning-text); }
#dc-source-search { margin-top: 8px; }

/* آکاردئونِ گروهِ محصول: اول فقط سرِ گروه‌ها دیده می‌شود، کلیک که شد
   محصولاتِ همان گروه باز می‌شوند. */
.picker-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  background: var(--c-bg);
  border: none;
  border-bottom: 1px solid var(--c-border);
  font: inherit;
  color: var(--c-text);
  text-align: right;
  cursor: pointer;
}
.picker-group:hover { background: var(--c-surface-2, var(--c-bg)); }
.picker-group.is-open { background: transparent; font-weight: 600; }
.picker-group-caret { color: var(--c-faint); font-size: 11px; flex: none; }
.picker-group-name { flex: 1; min-width: 0; }
.picker-group-count { color: var(--c-faint); font-size: 11.5px; flex: none; }
.picker-group.has-picked .picker-group-count { color: var(--c-primary); font-weight: 600; }
/* محصولاتِ داخلِ گروه یک پله تورفته‌اند تا سلسله‌مراتب دیده شود. */
.picker-group-body { padding-right: 18px; }
.picker-group-body .ledger-row { border-bottom: 1px solid var(--c-border); }

/* ورودیِ «یکی‌یکی»: کادرِ نام + دکمه‌ی افزودن، کنارِ هم */
.inline-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.inline-add input { flex: 1; min-width: 0; }
.inline-add .btn { flex: none; }

/* لیستِ چیزهایی که تا الان انتخاب/اضافه شده‌اند */
.picked-list {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  margin-top: 8px;
}
.picked-list .ledger-row:last-child { border-bottom: none; }

/* خطِ راهنمایِ زیرِ لیست، سه حالته. رنگ اینجا حرفِ اصلی را می‌زند:
   «هنوز نمی‌شود ثبت کرد» با «شاید مشکلی پیش بیاید» یکی نیست. */
.field-helper--ok { color: var(--c-success); }
.field-helper--warn { color: var(--c-warning-text); }
.field-helper--error { color: var(--c-danger); }
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--c-muted); margin-bottom: 6px; }

.day-overrides-panel {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.day-overrides-panel.is-hidden { display: none; }
.day-overrides-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-border);
}
.day-overrides-row:last-child { border-bottom: none; }
.day-overrides-row .day-name { font-size: 13px; font-weight: 600; color: var(--c-text); min-width: 70px; }

.checkbox-label-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--c-text);
}

/* ---------- کامبوباکس (انتخاب یا افزودن) ---------- */

.combobox { position: relative; }
.combobox input {
  height: 44px;
  min-width: 160px;
  border: 1px solid var(--c-border-input);
  border-radius: var(--radius-field);
  padding: 0 14px;
  font-size: 13px;
  color: var(--c-text);
  background: var(--c-surface);
}
.combobox input:focus { border-color: var(--c-primary); border-width: 1.5px; }
.combobox-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  min-width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-field);
  box-shadow: var(--shadow-card);
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}
.combobox-menu.is-hidden { display: none; }
.combobox-option {
  padding: 9px 12px;
  font-size: 13px;
  border-radius: 8px;
  color: var(--c-text);
}
.combobox-option:hover, .combobox-option.is-active { background: var(--c-primary-soft); }
.combobox-option--add {
  color: var(--c-success);
  font-weight: 700;
  border-top: 1px solid var(--c-locked-bg);
  margin-top: 4px;
  padding-top: 10px;
}
.combobox-option--add:hover { background: var(--c-success-soft); }

/* ---------- دراپ‌داون‌های معمولی ---------- */

select.select-field {
  height: 44px;
  border: 1px solid var(--c-border-input);
  border-radius: var(--radius-field);
  padding: 0 12px;
  font-size: 13px;
  color: var(--c-text);
  background: var(--c-surface);
}

/* ---------- منطقه‌ی خطر (سوییچ اضطراری) ---------- */

.danger-zone {
  border: 1.5px solid var(--c-danger-soft-border);
  border-inline-end: 5px solid var(--c-danger);
  border-radius: 12px;
  background: var(--c-danger-soft);
  box-shadow: none;
}
.danger-zone h2 { color: var(--c-danger); }
.danger-zone .ledger-row { border-bottom: none; }

.info-box {
  border: 1.5px solid var(--c-warning-soft-border);
  border-radius: 12px;
  background: var(--c-warning-soft);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--c-warning-text);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-text);
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-checkbox);
  accent-color: var(--c-primary);
}

.is-hidden { display: none; }

/* ---------- سوییچ (توگل) ---------- */

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  flex-shrink: 0;
}
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute;
  inset: 0;
  background: var(--c-border);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.switch .track::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}
.switch input:checked + .track { background: var(--c-success); }
.switch input:checked + .track::after { transform: translateX(-22px); }
.switch input:focus-visible + .track { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ---------- گروهِ شیفت (۴ گزینه‌ی ثابت) ---------- */

.shift-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  .shift-group { grid-template-columns: repeat(2, 1fr); }
}
.shift-option {
  border: 1px solid var(--c-border-input);
  border-radius: var(--radius-field);
  background: var(--c-surface);
  color: var(--c-text);
  padding: 10px 8px;
  font-size: 13px;
  text-align: center;
}
.shift-option.is-selected { border: 1.5px solid var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; }

/* ---------- سگمنتِ دوحالته (suggest/auto) ---------- */

.segment {
  display: inline-flex;
  background: var(--c-locked-bg);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
}
.segment.is-locked { background: var(--c-locked-rail); }
.segment button {
  border: none;
  background: transparent;
  color: var(--c-muted);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
}
.segment.is-locked button { color: var(--c-locked-text); cursor: not-allowed; }
.segment button.is-active {
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.segment button.is-active.is-auto {
  background: var(--c-primary);
  color: #fff;
  box-shadow: none;
}

/* ---------- فرم ردیف جدید ---------- */

.add-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px dashed var(--c-border);
}
.add-row.is-hidden { display: none; }
.add-row input, .add-row select {
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  color: var(--c-text);
  border-radius: var(--radius-field);
  padding: 0 10px;
  height: 40px;
  font-size: 13px;
}
.add-row input { width: 130px; }

/* ---------- فیش‌های اقدام در انتظار تایید (عنصر شاخص) ---------- */

.ticket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px 16px;
}

.ticket {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ticket.is-financial { border-color: var(--c-primary); }
.ticket.is-financial .ticket-head { border-bottom-color: var(--c-primary); }

.ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1.5px dashed var(--c-border);
}
.ticket .num { font-size: 11px; color: var(--c-faint); direction: ltr; unicode-bidi: isolate; }
.ticket .tool { font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.ticket .amount { font-size: 20px; font-weight: 700; color: var(--c-primary); direction: ltr; unicode-bidi: isolate; }
.ticket .meta { font-size: 12px; color: var(--c-muted); margin-top: 6px; }

.ticket .actions { display: flex; gap: 8px; margin-top: 14px; }
.ticket .btn-approve {
  flex: 1;
  background: var(--c-success);
  color: #fff;
  border: none;
  border-radius: var(--radius-field);
  padding: 10px;
  font-weight: 700;
  font-size: 13px;
}
.ticket .btn-reject {
  flex: 1;
  background: var(--c-danger-soft);
  border: 1px solid var(--c-danger-soft-border);
  color: var(--c-danger);
  border-radius: var(--radius-field);
  padding: 10px;
  font-weight: 700;
  font-size: 13px;
}

.ticket.is-deciding { opacity: 0.4; transform: scale(0.98); pointer-events: none; }

.ticket-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--c-faint);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-card);
}

/* ---------- هشدارها ---------- */

.alert-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-inline-start: 3px solid var(--c-danger);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-inline-start-width: 3px;
  border-radius: var(--radius-field);
  margin-bottom: 10px;
}
.alert-row.is-resolved { border-inline-start-color: var(--c-border); opacity: 0.6; }
.alert-row .msg { font-size: 14px; }
.alert-row .when { font-size: 11px; color: var(--c-faint); margin-top: 4px; direction: ltr; unicode-bidi: isolate; }

/* ---------- داشبورد ---------- */

.dashboard-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--c-warning-soft);
  border: 1.5px solid var(--c-warning-soft-border);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--c-warning-text);
  font-weight: 600;
}
.dashboard-banner.is-empty { background: var(--c-success-soft); border-color: var(--c-success); color: var(--c-success); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
.stat-card .n { font-size: 26px; font-weight: 700; color: var(--c-primary); direction: ltr; unicode-bidi: isolate; }
.stat-card .l { font-size: 12px; color: var(--c-muted); margin-top: 4px; }

/* ---------- گزارش روزانه ---------- */

.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.report-stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
  text-align: center;
}
.report-stat .n { font-size: 26px; font-weight: 700; }
.report-stat .l { font-size: 12px; color: var(--c-muted); margin-top: 4px; }
.report-stat.success { border-top-color: var(--c-success); }
.report-stat.success .n { color: var(--c-success); }
.report-stat.rejected { border-top-color: var(--c-danger); }
.report-stat.rejected .n { color: var(--c-danger); }
.report-stat.flagged { border-top-color: var(--c-warning); }
.report-stat.flagged .n { color: var(--c-warning-text); }

/* ---------- جدول/لیست ---------- */

.data-table-head {
  display: flex;
  justify-content: space-between;
  background: #fafafc;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-faint);
  border-radius: 8px;
}

/* ---------- نمودارِ ستونی (بدون کتابخانه) ---------- */

.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding: 8px 0; }
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bar-chart .bar { width: 100%; max-width: 28px; border-radius: 4px 4px 0 0; background: var(--c-chart-3); }
.bar-chart .bar-col.is-index .bar { background: var(--c-chart-1); }
.bar-chart .bar-label { font-size: 10.5px; color: var(--c-faint); }
.chart-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--c-muted); margin-top: 8px; }
.chart-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 4px; vertical-align: -1px; }

@media (max-width: 640px) {
  .report-grid { grid-template-columns: 1fr; }
  .ledger-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ledger-row .value-group { width: 100%; justify-content: space-between; }
  .rail-top { padding: 12px 16px; }
  .app-main { padding: 20px 14px 60px; }
  .ledger-section { padding: 16px 18px; }
}

.toast {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--c-text);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-field);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 50;
}
.toast.is-visible { opacity: 1; }

/* ---------- انتخاب‌گرِ تاریخِ شمسی (بدونِ کتابخانه) ---------- */

.jalali-date-btn {
  display: block;
  width: 100%;
  text-align: start;
  padding: 10px 12px;
  border: 1px solid var(--c-border-input);
  border-radius: var(--radius-field);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
}
.jalali-date-btn.is-placeholder { color: var(--c-faint); }

.jalali-popup {
  z-index: 60;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  padding: 10px;
  width: min(260px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
}
.jalali-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.jalali-popup-header .jalali-title { font-weight: 700; font-size: 13.5px; }
.jalali-popup-header button {
  border: none;
  background: var(--c-bg);
  color: var(--c-text);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.jalali-popup-header button:hover { background: var(--c-primary-soft); }
.jalali-weekdays, .jalali-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.jalali-weekdays div {
  text-align: center;
  font-size: 10.5px;
  color: var(--c-faint);
  padding: 4px 0;
}
.jalali-days button {
  border: none;
  background: transparent;
  color: var(--c-text);
  font: inherit;
  padding: 6px 0;
  border-radius: 8px;
  cursor: pointer;
}
.jalali-days button:hover { background: var(--c-primary-soft); }
.jalali-days button.is-in-range { background: var(--c-primary-soft); color: var(--c-text); }
.jalali-days button.is-selected { background: var(--c-primary); color: #fff; }
.jalali-days button.is-today { font-weight: 700; text-decoration: underline; }
.jalali-days span.jalali-day-empty { visibility: hidden; }
/* روزهایِ گذشته: دیده می‌شوند ولی خاکستری و بدونِ هیچ هندلرِ کلیکی
   (خواسته‌ی کاربر: تو اسنپ هم نمی‌شود برایِ روزِ گذشته کلیکی خرید). */
.jalali-days span.jalali-day-past {
  text-align: center;
  padding: 6px 0;
  color: var(--c-locked-text);
  cursor: not-allowed;
}
.jalali-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
  font-size: 11px;
  color: var(--c-muted);
  text-align: center;
}

/* ---------- کشو (details/summary) ----------
   خواسته‌ی کاربر: «کشو کشوش کن». عمداً details/summaryِ بومی است نه
   آکاردئونِ جاوااسکریپتی: با صفحه‌کلید و اسکرین‌ریدر کار می‌کند، حالتِ
   بازش را خودِ مرورگر نگه می‌دارد، و اگر جاوااسکریپت هم نرسد محتوا
   دست‌نیافتنی نمی‌شود. */
.drawer {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}
.drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  user-select: none;
}
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::after {
  content: "";
  width: 9px; height: 9px;
  /* عمداً فیزیکی (bottom/right) نه منطقی: در RTL جهتِ منطقی برعکس
     می‌شود و فلش به‌جایِ پایین، به پهلو می‌افتد. */
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
  opacity: .55;
  flex: none;
}
.drawer[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.drawer > summary:hover { background: var(--surface-hover, rgba(0,0,0,.03)); }
.drawer-body { padding: 0 18px 18px; }

/* ---------- بَجِ کشو ----------
   ⚠️ مشکلِ شماره‌ی ۵ سندِ هنداف: صفحه‌ی گزارشات هشت کشویِ بسته بود که
   هیچ‌کدام قبل از باز شدن چیزی نمی‌گفتند -- برایِ فهمیدنِ اینکه اصلاً
   مشکلی هست یا نه باید هر هشت‌تا را باز می‌کردی.

   حالا هر کشو وضعیتش را رویِ عنوان می‌گوید: «۳ محصول خاموش» / «عادی» /
   «بی‌داده». عنوان به عدد وصل است، پس نگاهِ اول کافی است. */
.drawer > summary .drawer-badge { margin-inline-start: auto; }
.drawer-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 1.6;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--c-bg);
  color: var(--c-muted);
  border: 1px solid var(--c-border);
}
.drawer-badge--ok      { background: var(--c-success-soft); color: var(--c-success); border-color: #bfe6cf; }
.drawer-badge--warn    { background: var(--c-warning-soft); color: var(--c-warning-text); border-color: var(--c-warning-soft-border); }
.drawer-badge--danger  { background: var(--c-danger-soft);  color: var(--c-danger);  border-color: var(--c-danger-soft-border); }
.drawer-badge--empty   { background: transparent; color: var(--c-faint); }
.drawer-badge--loading { background: transparent; color: var(--c-faint); animation: sfpulse 1.2s ease-in-out infinite; }
/* بَجِ بی‌متن اصلاً دیده نشود -- وگرنه یک پیلِ خالی کنارِ هر عنوان می‌ماند
   (کشوهایِ تنظیمات اصلاً بَج نمی‌گیرند). */
.drawer-badge:empty { display: none; }

@keyframes sfpulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------- زیرتب‌ها ---------- */
.subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px 18px;
  min-height: var(--tap);
  border-radius: 999px;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .92em;
  cursor: pointer;
  white-space: nowrap;
}

/* بَجِ زیرتب: همان «قبل از باز شدن حرف بزن»، ولی یک سطح بالاتر -- روی
   دکمه‌ای که هنوز کلیک نشده. */
.subtab-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  min-width: 18px;
  text-align: center;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  color: var(--c-muted);
}
.subtab-badge--warn { background: var(--c-warning-soft); color: var(--c-warning-text); }
.subtab.is-active .subtab-badge { background: rgba(255,255,255,.25); color: inherit; }
.subtab.is-active {
  background: var(--accent, #1f7a4d);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}

/* ---------- کشویِ گروهِ محصولات ---------- */
/* خواسته‌ی کاربر: گروه مثلِ دکمه باشد، زیرش محصولاتِ خاموش، و شمارنده‌ها
   چه کشو باز باشد چه بسته دیده شوند. پس شمارنده‌ها رویِ خودِ summary
   می‌نشینند نه داخلِ بدنه. */
.group-drawer {
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--surface, #fff);
}
.group-drawer > .group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.group-drawer > .group-summary::-webkit-details-marker { display: none; }
.group-drawer > .group-summary::after {
  content: "";
  width: 8px; height: 8px;
  /* فیزیکی نه منطقی -- در RTL منطقی برعکس می‌شود و فلش به پهلو می‌افتد */
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
  opacity: .5;
  flex: none;
}
.group-drawer[open] > .group-summary::after { transform: rotate(-135deg) translateY(-2px); }
.group-drawer > .group-summary:hover { background: var(--surface-hover, rgba(0,0,0,.03)); }
.group-drawer .group-name { font-weight: 700; }
.group-drawer .group-body { padding: 4px 14px 12px; }
.group-drawer .group-body .ledger-row:first-child { border-top: none; }

/* شمارنده‌ی «خاموش» وقتی صفر نیست باید از دور پیدا باشد */
.value.is-bad { color: hsl(0 72% 42%); font-weight: 700; }

/* ---------- کارتِ معیار (گزارشِ کلیکی) ---------- */
/* ⚠️ چرا گرید و نه یک ردیفِ تک‌خطی: نسخه‌ی قبلی همه‌ی معیارها را در یک
   خطِ افقی می‌چید و رویِ عرضِ گوشی از لبه بیرون می‌زد -- عددها بریده
   می‌شدند. گرید خودش می‌شکند و روی هر عرضی جا می‌شود. */
.ca-card {
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--surface, #fff);
}
.ca-card-sub { padding: 12px; opacity: .95; }
.ca-card-title { font-weight: 700; margin-bottom: 10px; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.metric-tile {
  min-width: 0;                 /* وگرنه محتوایِ بلند گرید را پهن می‌کند */
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-hover, rgba(0,0,0,.03));
}
.metric-label {
  font-size: 12px;
  opacity: .7;
  margin-bottom: 2px;
}
.metric-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;      /* «۲۹٬۱۰۷٬۰۰۰ تومان» باید بشکند نه بیرون بزند */
}

.ca-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ca-pager-count { font-size: 13px; opacity: .75; }
.ca-pager button[disabled] { opacity: .4; cursor: default; }

/* ---------- عرضِ گوشی: هیچ ردیفی نباید از لبه بیرون بزند ---------- */
/* ⚠️ کشفِ کاربر (اسکرین‌شاتِ گوشی): ردیف‌هایِ گزارش چند معیار را در یک خطِ
   افقی می‌چیدند و عددها از لبه بیرون می‌زدند و بریده می‌شدند («…،۶۰۰»).
   قبلاً همین مشکل برایِ ردیف‌هایِ تحلیلِ بیدینگ با `.bh-row` نقطه‌ای حل شده
   بود -- ولی بقیه‌ی صفحه‌ها همان اشکال را داشتند. این قاعده به‌جایِ وصله‌ی
   جدا، همه‌ی ردیف‌ها را روی عرضِ کم می‌شکند.

   دو نکته که بدونشان کار نمی‌کند:
     * flex-item ها پیش‌فرض کوچک‌تر از محتوایشان نمی‌شوند، پس min-width:0
     * جمعِ ارقامِ فارسی می‌تواند از عرضِ خانه بلندتر شود، پس overflow-wrap */
@media (max-width: 640px) {
  .ledger-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .ledger-row .label {
    flex: 1 1 100%;
    margin-bottom: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .ledger-row .value-group {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-width: 0;
  }
  .ledger-row .value {
    font-size: 15px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  /* جدول‌هایِ عریض به‌جایِ کش‌آوردنِ صفحه، خودشان افقی اسکرول شوند */
  .table-wrap { overflow-x: auto; }
}

/* بدنه هرگز نباید افقی اسکرول شود -- محتوایِ عریض داخلِ ظرفِ خودش اسکرول کند */
body { overflow-x: hidden; }

/* ---------- نمودارِ فروشِ ساعتی («امروز») ----------
   ⚠️ میله‌ها با CSS ساخته می‌شوند نه با کتابخانه‌ی نمودار: یک وابستگیِ
   تازه برایِ چیزی که ۲۰ خط CSS است، رویِ صفحه‌ی موبایلِ کاربر فقط
   کندترش می‌کند. */
.hour-chart { display: flex; align-items: flex-end; gap: 4px; min-height: 116px;
  padding: 8px 0 0; overflow-x: auto; }
.hour-col { display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1 0 26px; min-width: 26px; }
.hour-col .bar-wrap { display: flex; align-items: flex-end; height: 84px; width: 100%; }
.hour-col .bar { width: 100%; border-radius: 4px 4px 0 0; background: var(--c-chart-1);
  min-height: 2px; transition: height .2s; }
.hour-col .bar.is-empty { background: var(--c-chart-3); }
.hour-col .hour-label { font-size: 10.5px; color: var(--c-faint); direction: ltr;
  unicode-bidi: isolate; }
.hour-col .hour-count { font-size: 10.5px; font-weight: var(--fw-semi); color: var(--c-text); }

/* ---------- SFBOT-BUNDLE-94: نمودارِ ستونی رویِ گوشی ---------- */
/* کشفِ کاربر: «مشکلش روی گوشی‌هه ... عدد تاریخ زیرش رو عمودی بذاری و
   نوار روز رو لاغرتر کنی درست میشه یحتمل.» درست بود، و علتش این است:

   ⚠️ آیتمِ flex به‌صورتِ پیش‌فرض `min-width: auto` دارد -- یعنی با وجودِ
   `flex: 1` هم نمی‌تواند از عرضِ محتوایش باریک‌تر شود. محتوا لیبلِ تاریخ
   («۰۶/۱۷») است، پس ۱۴ ستون دستِ‌کم
       ۱۴×~۳۶px + ۱۳×۸px ≈ ۶۰۸px
   می‌خواستند، در کارتی که رویِ گوشی ~۳۴۰px است. مازاد از لبه‌ی چپِ کارت
   می‌زد بیرون. اندازه‌گیریِ واقعی (Chromium): در ۳۶۰px سرریزِ ۱۷۴px، در
   ۴۱۲px سرریزِ ۱۲۲px، و آستانه‌اش بینِ ۵۲۰ و ۵۶۰px است -- برایِ همین
   ۶۴۰px (که پروژه از قبل دارد) کلِ بازه‌ی شکسته را می‌پوشاند و ۴۸۰px
   نمی‌پوشاند (در ۴۸۰ هنوز ۵۴px سرریز می‌ماند).

   ⚠️ `writing-mode` نه `transform: rotate` به‌تنهایی. چرخشِ ترنسفورمی فقط
   رنگ‌آمیزی را می‌چرخاند و عرضِ چیدمانِ ستون همان عرضِ افقیِ متن می‌ماند،
   پس سرریز سرِ جایش می‌ماند. `writing-mode` خودِ چیدمان را عمودی می‌کند و
   min-content ستون از ~۳۶px به ~۱۳px می‌افتد. `rotate(180deg)` فقط جهتِ
   خواندن را پایین‌به‌بالا می‌کند (قراردادِ نمودارها)؛ `sideways-lr` همین
   کار را تمیزتر می‌کرد ولی پشتیبانی‌اش رویِ سافاری قابلِ‌اتکا نیست. */
@media (max-width: 640px) {
  .bar-chart { height: 170px; gap: 4px; }
  .bar-chart .bar-col { min-width: 0; }
  .bar-chart .bar { max-width: 14px; }
  .bar-chart .bar-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1;
    font-size: 9.5px;
    white-space: nowrap;
  }
}