/* ============================================================
   حبوبات و خشکبار باقری — Design System
   Navy + Green + White | Mobile-First | CSS only
   Compatible with all existing HTML class names
   ============================================================ */

:root{
  /* Core palette (Option 3 reference) */
  --color-primary:#0B1F3A;
  --color-primary-dark:#071628;
  --color-primary-soft:#132A4A;
  --color-accent:#20A879;
  --color-accent-dark:#178A63;
  --color-accent-soft:#E7F6F0;
  --color-bg:#F5F7F9;
  --color-surface:#FFFFFF;
  --color-surface-2:#EEF1F5;
  --color-border:#E2E7EE;
  --color-text:#1A2332;
  --color-text-muted:#6A7383;
  --color-success:#20A879;
  --color-danger:#E04545;
  --color-warning:#D9980B;
  --color-info:#2F6FED;

  --shadow-xs:0 1px 2px rgba(11,31,58,.04);
  --shadow-sm:0 2px 8px rgba(11,31,58,.06);
  --shadow-md:0 6px 20px rgba(11,31,58,.08);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:20px;
  --radius-pill:999px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --touch:44px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --font:-apple-system,BlinkMacSystemFont,'Vazirmatn','Segoe UI',Tahoma,sans-serif;

  /* Legacy aliases — do not remove */
  --primary:var(--color-primary);
  --primary-dark:var(--color-primary-dark);
  --primary-soft:var(--color-primary-soft);
  --accent:var(--color-accent);
  --accent-dark:var(--color-accent-dark);
  --accent-soft:var(--color-accent-soft);
  --bg:var(--color-bg);
  --surface:var(--color-surface);
  --surface-2:var(--color-surface-2);
  --text:var(--color-text);
  --muted:var(--color-text-muted);
  --success:var(--color-success);
  --danger:var(--color-danger);
  --warning:var(--color-warning);
  --border:var(--color-border);
  --shadow:var(--shadow-sm);
  --shadow-sm:0 2px 8px rgba(11,31,58,.06);
  --radius:var(--radius-md);
  --radius-sm:12px;
  --paper:var(--color-bg);
  --paper-2:var(--color-surface);
  --card:var(--color-surface);
  --ink:var(--color-text);
  --ink-soft:var(--color-text-muted);
  --olive:var(--color-accent);
  --olive-dark:var(--color-primary);
  --gold:var(--color-accent);
  --gold-soft:var(--color-accent-soft);
  --rust:var(--color-danger);
  --amber:var(--color-warning);
  --red:var(--color-danger);
  --line:var(--color-border);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  background:var(--color-bg);
  color:var(--color-text);
  min-height:100vh;
  font-size:15px;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* ===================== HEADER ===================== */
header{
  padding:calc(12px + var(--safe-top)) 16px 14px;
  text-align:center;
  background:var(--color-primary);
  border-bottom:1px solid rgba(255,255,255,0.08);
  color:#fff;
  position:relative;
  z-index:5;
}
header h1{
  margin:0;
  font-size:1.08rem;
  font-weight:800;
  color:#fff;
  letter-spacing:.15px;
  line-height:1.35;
}
header p{
  margin:3px 0 0;
  font-size:.75rem;
  color:rgba(255,255,255,.68);
  font-weight:500;
  line-height:1.4;
}

/* ===================== NAV (top bar only — never match .bottom-nav) ===================== */
nav#nav{
  display:flex;
  overflow-x:auto;
  gap:6px;
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  position:sticky;
  top:0;
  z-index:10;
  -webkit-overflow-scrolling:touch;
  padding:8px 10px;
  box-shadow:var(--shadow-xs);
  scrollbar-width:none;
}
nav#nav::-webkit-scrollbar{display:none;}
nav#nav button,
nav#nav a.nav-link{
  flex:0 0 auto;
  min-width:auto;
  min-height:34px;
  padding:6px 12px;
  border:1px solid transparent;
  background:transparent;
  font-family:inherit;
  font-size:.76rem;
  font-weight:600;
  color:var(--color-text-muted);
  cursor:pointer;
  border-radius:var(--radius-pill);
  white-space:nowrap;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .12s,color .12s;
}
nav#nav button.active,
nav#nav a.nav-link.active{
  color:#fff;
  background:var(--color-primary);
  border-color:var(--color-primary);
}
nav#nav a.nav-link:active,
nav#nav button:active{opacity:.85;}

/* ===================== MAIN ===================== */
main{
  padding:14px 14px calc(88px + var(--safe-bottom));
  max-width:720px;
  margin:0 auto;
}

/* ===================== TYPOGRAPHY ===================== */
h2.section-title{
  font-size:1.05rem;
  margin:4px 0 14px;
  color:var(--color-primary);
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing:-.2px;
}
h2.section-title::after{
  content:"";
  flex:1;
  border-bottom:1px solid var(--color-border);
  opacity:.9;
}
h3.sub-title{
  font-size:.88rem;
  margin:16px 0 10px;
  color:var(--color-primary);
  font-weight:800;
}

/* ===================== CARDS ===================== */
.cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:14px;
  box-shadow:var(--shadow-xs);
}
.card .label{
  font-size:.7rem;
  color:var(--color-text-muted);
  margin-bottom:6px;
  font-weight:600;
  letter-spacing:.1px;
}
.card .value{
  font-size:1.12rem;
  font-weight:800;
  color:var(--color-text);
  letter-spacing:-.3px;
  line-height:1.25;
}
.card.wide{grid-column:1/-1;}

.accent-olive{color:var(--color-accent-dark) !important;}
.accent-rust{color:var(--color-danger) !important;}
.accent-red{color:var(--color-danger) !important;}
.accent-amber{color:var(--color-warning) !important;}

/* ===================== LISTS ===================== */
.ledger-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 2px;
  border-bottom:1px solid var(--color-border);
  cursor:pointer;
  min-height:52px;
}
.ledger-row:last-child{border-bottom:none;}
.ledger-row .name{
  font-weight:700;
  font-size:1rem;
  color:var(--color-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  line-height:1.35;
}
.ledger-row .filler{
  flex:1;
  border-bottom:none;
  height:0;
  min-width:6px;
}
.ledger-row .amount{
  font-weight:800;
  white-space:nowrap;
  text-align:left;
  flex-shrink:0;
  font-size:.9rem;
  color:var(--color-text);
  letter-spacing:-.2px;
}
.ledger-row .sub{
  font-size:.72rem;
  color:var(--color-text-muted);
  display:block;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
  line-height:1.35;
}
a.ledger-row{
  text-decoration:none;
  color:inherit;
}
a.ledger-row:active{
  background:var(--color-surface-2);
  border-radius:var(--radius-sm);
}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--color-accent);
  color:#fff;
  border:none;
  padding:12px 16px;
  min-height:var(--touch);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-weight:700;
  font-size:.88rem;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 3px 10px rgba(32,168,121,.22);
  transition:transform .1s, opacity .1s;
}
.btn:active{opacity:.9;transform:scale(.98);}
.btn.secondary{
  background:var(--color-surface);
  color:var(--color-primary);
  border:1.5px solid var(--color-border);
  box-shadow:none;
}
.btn.danger{
  background:var(--color-danger);
  box-shadow:0 3px 10px rgba(224,69,69,.2);
}
.btn.small{
  padding:8px 12px;
  font-size:.78rem;
  min-height:36px;
  border-radius:10px;
  box-shadow:none;
}
.btn:disabled{
  opacity:.42;
  cursor:not-allowed;
  box-shadow:none;
}
.btn-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* ===================== CHIPS ===================== */
.chip-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.chip{
  padding:6px 11px;
  border-radius:var(--radius-pill);
  border:1.5px solid var(--color-border);
  background:var(--color-surface);
  font-size:.74rem;
  color:var(--color-text-muted);
  cursor:pointer;
  font-family:inherit;
  font-weight:600;
  min-height:32px;
  line-height:1.2;
}
.chip.active{
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary);
}

/* ===================== FAB ===================== */
.fab{
  position:fixed;
  left:16px;
  bottom:calc(16px + var(--safe-bottom));
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--color-accent);
  color:#fff;
  font-size:1.75rem;
  border:none;
  box-shadow:0 8px 22px rgba(32,168,121,.38);
  cursor:pointer;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.fab:active{transform:scale(.94);}

/* ===================== SHEET / MODAL ===================== */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(11,31,58,.5);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  /* Must be above .bottom-nav (z-index:40) so sheet actions are tappable */
  z-index:60;
}
.sheet{
  background:var(--color-surface);
  width:100%;
  max-width:720px;
  max-height:90vh;
  overflow-y:auto;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  /* Extra bottom padding so primary actions (ثبت) are not flush / covered */
  padding:18px 16px calc(28px + var(--safe-bottom));
  border-top:none;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 -10px 40px rgba(11,31,58,.15);
}
.sheet h3{
  margin:0 0 14px;
  color:var(--color-primary);
  padding-left:32px;
  font-weight:800;
  font-size:1.05rem;
}
.field{margin-bottom:14px;}
.field label{
  display:block;
  font-size:.75rem;
  color:var(--color-text-muted);
  margin-bottom:6px;
  font-weight:600;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:16px;
  background:var(--color-surface);
  color:var(--color-text);
  transition:border-color .15s, box-shadow .15s;
  min-height:46px;
}
.field select{appearance:none;background-image:none;}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px var(--color-accent-soft);
}
.field textarea{resize:vertical;min-height:72px;}

.close-x{
  position:absolute;
  left:12px;
  top:12px;
  background:var(--color-surface-2);
  border:none;
  font-size:1.2rem;
  color:var(--color-text-muted);
  cursor:pointer;
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.close-x:active{background:var(--color-border);}

.empty{
  text-align:center;
  color:var(--color-text-muted);
  padding:32px 14px;
  font-size:.9rem;
  line-height:1.6;
}

.badge{
  display:inline-block;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  font-size:.68rem;
  font-weight:700;
}
.badge.pending{background:#FFF5DF;color:#9A7000;}
.badge.cleared{background:var(--color-accent-soft);color:var(--color-accent-dark);}
.badge.low{background:#FDECEC;color:var(--color-danger);}

.toast{
  position:fixed;
  bottom:calc(84px + var(--safe-bottom));
  left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--color-primary);
  color:#fff;
  padding:11px 18px;
  border-radius:var(--radius-pill);
  font-size:.82rem;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s, transform .2s;
  z-index:70;
  white-space:nowrap;
  max-width:90vw;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:var(--shadow-md);
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ===================== SEARCH (no reflow risk) ===================== */
input[type="search"],
input#customer-search,
input#product-search,
input#supplier-search,
input#invoice-search,
input#payment-search,
input#check-search,
input#visit-search,
input#prospect-search,
input#list-search-input,
main .field input,
main input[placeholder*="جستجو"],
main input[placeholder*="جستجوی"]{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:16px;
  background:var(--color-surface);
  color:var(--color-text);
  margin-bottom:2px;
  min-height:46px;
  box-shadow:var(--shadow-xs);
}
main input:focus,
input[type="search"]:focus{
  outline:none;
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px var(--color-accent-soft);
}
main select,
.field select,
#payment-sort,
#check-sort,
#visit-sort,
#prospect-sort,
#invoice-sort,
#product-sort,
#supplier-sort,
#customer-sort{
  width:100%;
  padding:11px 12px;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:15px;
  background:var(--color-surface);
  color:var(--color-text);
  min-height:44px;
}
.field select{
  font-size:16px;
}

/* ===================== DASHBOARD ===================== */
.dash-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
}
.dash-stat{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:14px 12px;
  box-shadow:var(--shadow-xs);
}
.dash-stat .label{
  font-size:.68rem;
  color:var(--color-text-muted);
  margin-bottom:6px;
  font-weight:600;
}
.dash-stat .value{
  font-size:1.05rem;
  font-weight:800;
  color:var(--color-text);
  letter-spacing:-.25px;
  line-height:1.25;
}
.dash-stat.wide{grid-column:1/-1;}
@media (min-width:380px){
  .dash-stats{grid-template-columns:1fr 1fr 1fr;}
  .dash-stat.wide{grid-column:1/-1;}
}

.dash-section-label{
  font-size:.82rem;
  font-weight:800;
  color:var(--color-primary);
  margin:10px 0 10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.dash-section-label::after{
  content:"";
  flex:1;
  border-bottom:1px solid var(--color-border);
}

.dash-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:16px;
}
@media (min-width:420px){
  .dash-grid{grid-template-columns:repeat(4,1fr);}
}
@media (min-width:640px){
  .dash-grid{grid-template-columns:repeat(5,1fr);gap:10px;}
}

a.dash-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:88px;
  padding:10px 4px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  text-decoration:none;
  color:var(--color-text);
  box-shadow:var(--shadow-xs);
  transition:transform .1s, box-shadow .1s;
}
a.dash-tile:active{
  transform:scale(.96);
  box-shadow:none;
}
a.dash-tile .dash-ico{
  width:40px;
  height:40px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-accent-soft);
}
a.dash-tile .dash-ico svg{
  width:20px;
  height:20px;
  display:block;
  stroke:var(--color-primary);
  color:var(--color-primary);
}
a.dash-tile .dash-title{
  font-size:.72rem;
  font-weight:700;
  text-align:center;
  color:var(--color-primary);
  line-height:1.25;
  padding:0 2px;
}
a.dash-tile .dash-sub{
  font-size:.62rem;
  color:var(--color-text-muted);
  text-align:center;
  margin-top:-2px;
  line-height:1.2;
}

.dash-activity{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:2px 12px 6px;
  margin-bottom:14px;
  box-shadow:var(--shadow-xs);
}
.dash-activity .ledger-row{cursor:default;min-height:48px;}
.dash-activity a.ledger-row{cursor:pointer;}

/* Hide top nav on dashboard — tiles are the main nav */
body.page-dashboard #nav,
body[data-page="dashboard"] #nav{
  display:none !important;
}

/* ===================== SETTINGS / REPORTS ===================== */
/* .settings-warn removed here on 2026-08-20: fully and permanently shadowed
   by the local <style> block in settings.html (loads after this file, sets
   every property this rule set). Verified zero live usage elsewhere. */
.settings-section{margin-bottom:22px;}
.settings-section h3{
  font-size:.95rem;
  margin:0 0 10px;
  font-weight:800;
  color:var(--color-primary);
}
.report-section{margin-bottom:20px;}
.report-section h3{
  font-size:.92rem;
  margin:0 0 10px;
  font-weight:800;
  color:var(--color-primary);
}
.report-note{
  font-size:.72rem;
  color:var(--color-text-muted);
  margin:6px 0 0;
  line-height:1.5;
}
.page-skeleton-note{
  color:var(--color-text-muted);
  padding:24px 12px;
  font-size:.88rem;
  line-height:1.7;
}
.page-title-bar{margin:0 0 12px;}
.auto-backup-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid var(--color-border);
}
.auto-backup-row:last-child{border-bottom:none;}

/* ===================== PROSPECT ===================== */
.rank-pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  color:#fff;
  font-weight:800;
  font-size:.72rem;
}
.converted-banner{
  background:var(--color-accent);
  color:#fff;
  border-radius:var(--radius-md);
  padding:12px 14px;
  margin-bottom:12px;
  font-weight:700;
  font-size:.9rem;
}
.prospect-subnav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.chip-opt{
  border:1.5px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text);
  border-radius:11px;
  padding:10px 12px;
  font-size:.84rem;
  cursor:pointer;
  font-family:inherit;
  text-align:right;
  min-height:42px;
}
.chip-opt.selected{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
  font-weight:700;
}
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px;}
.live-score{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  margin-bottom:12px;
  background:var(--color-surface);
  box-shadow:var(--shadow-xs);
}
.live-score .num{
  font-size:1.7rem;
  font-weight:800;
  color:var(--color-primary);
  letter-spacing:-.5px;
}
.rank-badge{
  padding:5px 12px;
  border-radius:var(--radius-pill);
  color:#fff;
  font-weight:800;
  font-size:.85rem;
}
.q-block{
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px dashed var(--color-border);
}
.q-title{
  font-weight:700;
  margin-bottom:8px;
  font-size:.88rem;
  color:var(--color-primary);
}
.debt-row a{text-decoration:none;color:inherit;}

/* ===================== INVOICE PRINT DOCUMENT ===================== */
/* روی صفحه دیده نمی‌شود، اما display:none نیست — عمداً.
   اگر این ناحیه display:none باشد و فقط داخل @media print به block تبدیل شود،
   کروم هرگز یک paint واقعی از <img> داخلش انجام نداده، و در لحظه‌ی چاپ
   به‌جای تصویر یک آیکون broken-image (علامت سؤال) رسم می‌کند — حتی اگر
   تصویر کاملاً load/decode شده باشد. به همین دلیل به‌جای display:none از
   position:fixed + خارج از صفحه استفاده می‌شود: عنصر همیشه در درخت
   layout/paint واقعی مرورگر هست (مثل holder مربوط به Export)، فقط دیده نمی‌شود. */
#printArea{
  position:fixed;
  left:-99999px;
  top:0;
  width:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
}

.inv-doc{
  font-family: Vazirmatn, Tahoma, sans-serif;
  color:#0b1f3a;
  direction:rtl;
  text-align:right;
  background:#fff;
  padding:12px 14px;
  box-sizing:border-box;
}
.inv-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:2px solid #0b1f3a;
  padding-bottom:10px;
  margin-bottom:12px;
}
.inv-logo{ flex:0 0 auto; }
.inv-logo img{
  display:block;
  max-height:64px;
  max-width:140px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.inv-brand{ flex:1 1 auto; text-align:center; }
.inv-brand-name{ font-weight:800; font-size:1.05rem; }
.inv-doc-title{ font-weight:600; font-size:.95rem; margin-top:2px; }
.inv-meta{ flex:0 0 auto; font-size:.82rem; line-height:1.6; }
.inv-customer{
  font-size:.88rem;
  line-height:1.7;
  margin-bottom:12px;
}
.inv-table{
  width:100%;
  border-collapse:collapse;
  font-size:.82rem;
  margin-bottom:12px;
}
.inv-table th,.inv-table td{
  border:1px solid #c5d0dc;
  padding:6px 8px;
  text-align:center;
}
.inv-table th{ background:#eef3f8; font-weight:700; }
.inv-totals{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
  margin-top:4px;
}
.inv-totals td{
  padding:5px 8px;
  border-bottom:1px solid #e2e8f0;
}
.inv-totals td:last-child{ text-align:left; font-variant-numeric:tabular-nums; }
.inv-totals .inv-final td{ font-weight:800; border-bottom:2px solid #0b1f3a; }
.inv-signatures{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-top:28px;
  font-size:.85rem;
}
.inv-signatures > div{ flex:1; text-align:center; }
.inv-sig-line{
  margin-top:36px;
  border-bottom:1px solid #0b1f3a;
  height:0;
}

/* ===================== PRINT ===================== */
/* فقط سند داخل #printArea چاپ شود — نه کل صفحه CRM */
@media print{
  body *{ visibility:hidden !important; }
  #printArea, #printArea *{ visibility:visible !important; }
  #printArea{
    display:block !important;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:auto;
    overflow:visible;
    margin:0;
    padding:8px;
    background:#fff !important;
  }
  .overlay,.sheet,header,nav,.fab,.toast,.bottom-nav,button.app-back,main{
    display:none !important;
  }
  body{ background:#fff !important; }
  .inv-logo img{ max-height:72px; max-width:160px; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:360px){
  .dash-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
  a.dash-tile{min-height:80px;padding:8px 2px;}
  a.dash-tile .dash-title{font-size:.68rem;}
  .card .value,.dash-stat .value{font-size:.98rem;}
  main{padding:12px 10px calc(96px + var(--safe-bottom));}
}
@media (min-width:768px){
  main{padding:20px 20px 100px;}
  header h1{font-size:1.12rem;}
  a.dash-tile{min-height:100px;}
  a.dash-tile .dash-title{font-size:.8rem;}
  .cards{gap:12px;}
}


/* ===================== TOP NAV: secondary on mobile ===================== */
/* Bottom nav is primary on phone; keep top nav for larger screens / fallback */
@media (max-width: 900px){
  nav#nav{
    display:none !important;
  }
}
@media (min-width: 901px){
  nav#nav{
    display:flex !important;
  }
  .bottom-nav{ display:none !important; }
  main{ padding-bottom: 40px; }
}

/* Dashboard already hid top nav */
body.page-dashboard #nav{
  display:none !important;
}

/* ===================== BOTTOM NAVIGATION ===================== */
.bottom-nav{
  position:fixed !important;
  top:auto !important;          /* reset any leftover top from generic rules */
  left:0;
  right:0;
  bottom:0;
  height:auto;
  max-height:none;
  width:100%;
  z-index:40;
  display:flex;
  align-items:stretch;
  justify-content:space-around;
  overflow:visible;
  background:var(--color-surface);
  border:none;
  border-top:1px solid var(--color-border);
  border-bottom:none;
  box-shadow:0 -4px 20px rgba(11,31,58,.06);
  padding:6px 4px calc(6px + var(--safe-bottom));
  min-height:calc(56px + var(--safe-bottom));
  -webkit-overflow-scrolling:auto;
}
.bottom-nav-item{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:48px;
  padding:4px 2px;
  border:none;
  background:transparent;
  color:var(--color-text-muted);
  text-decoration:none;
  font-family:inherit;
  font-size:.62rem;
  font-weight:600;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  border-radius:10px;
  line-height:1.15;
}
.bottom-nav-item .bn-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
}
.bottom-nav-item .bn-ico svg{ display:block; }
.bottom-nav-item .bn-label{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0 1px;
}
.bottom-nav-item.active{
  color:var(--color-primary);
  font-weight:800;
  background:var(--color-accent-soft);
  border-radius:12px;
  box-shadow:inset 0 2px 0 0 var(--color-accent);
}
.bottom-nav-item.active .bn-ico{
  color:var(--color-primary);
}
.bottom-nav-item:active{
  background:var(--color-surface-2);
}

/* ===================== MORE SHEET ===================== */
.more-overlay{
  position:fixed; inset:0;
  background:rgba(11,31,58,.45);
  z-index:45;
  opacity:0;
  transition:opacity .2s;
}
.more-overlay.show{ opacity:1; }
.more-sheet{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:46;
  background:var(--color-surface);
  border-radius:20px 20px 0 0;
  padding:10px 16px calc(16px + var(--safe-bottom));
  max-height:78vh;
  overflow-y:auto;
  transform:translateY(110%);
  transition:transform .28s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow:0 -12px 40px rgba(11,31,58,.18);
  -webkit-overflow-scrolling:touch;
}
.more-sheet.show{ transform:translateY(0); }
.more-sheet-handle{
  width:40px; height:4px;
  border-radius:999px;
  background:var(--color-border);
  margin:4px auto 12px;
}
.more-sheet-title{
  font-size:1rem;
  font-weight:800;
  color:var(--color-primary);
  margin:0 0 12px;
  text-align:center;
}
.more-sheet-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}
.more-sheet-item{
  display:block;
  padding:14px 14px;
  border-radius:12px;
  text-decoration:none;
  color:var(--color-text);
  font-weight:700;
  font-size:.92rem;
  background:var(--color-surface);
  border:1px solid var(--color-border);
}
.more-sheet-item.active{
  background:var(--color-accent-soft);
  border-color:var(--color-accent);
  color:var(--color-accent-dark);
}
.more-sheet-item:active{
  background:var(--color-surface-2);
}
.more-sheet-close{
  width:100%;
  margin-top:4px;
}
body.more-open{
  overflow:hidden;
}

/* FAB above bottom nav */
.fab{
  bottom: calc(72px + var(--safe-bottom)) !important;
  z-index: 35;
}
.toast{
  bottom: calc(78px + var(--safe-bottom)) !important;
}

/* Dashboard grid: 2 columns on phone (closer to reference density) */
@media (max-width: 419px){
  .dash-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap:10px;
  }
  a.dash-tile{
    min-height:100px;
    padding:14px 8px;
  }
  a.dash-tile .dash-title{ font-size:.8rem; }
  a.dash-tile .dash-ico{
    width:44px; height:44px;
  }
  a.dash-tile .dash-ico svg{ width:22px; height:22px; }
}


/* ===================== DASHBOARD TARGET (read-only Prospect) ===================== */
a.dash-target{
  display:block;
  text-decoration:none;
  color:inherit;
  background:linear-gradient(135deg, #0B1F3A 0%, #143056 100%);
  color:#fff;
  border-radius:16px;
  padding:14px 16px;
  margin:0 0 14px;
  box-shadow:0 6px 18px rgba(11,31,58,.18);
}
a.dash-target.is-done{
  background:linear-gradient(135deg, #178A63 0%, #20A879 100%);
}
.dash-target-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.dash-target-title{
  font-size:.78rem;
  font-weight:700;
  opacity:.9;
}
.dash-target-pct{
  font-size:.85rem;
  font-weight:800;
}
.dash-target-nums{
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.3px;
  margin-bottom:8px;
}
.dash-target-bar{
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  overflow:hidden;
  margin-bottom:8px;
}
.dash-target-bar > span{
  display:block;
  height:100%;
  background:#fff;
  border-radius:999px;
  min-width:0;
}
.dash-target-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:.75rem;
  font-weight:600;
  opacity:.95;
}
.dash-target-link{
  font-size:.72rem;
  opacity:.85;
  font-weight:600;
}
.dash-target-body{
  font-size:.9rem;
  font-weight:700;
  margin-top:4px;
}
.dash-target-done,
.dash-target-remain{
  font-weight:700;
}



/* ===================== INVOICE FORM ROW (UI only) ===================== */
.inv-item-row{
  display:flex; gap:6px; align-items:flex-end; position:relative; flex-wrap:nowrap;
}
.inv-item-product{ flex:1 1 auto; min-width:0; position:relative; }
.inv-item-product .row-product-search[readonly]{
  cursor:pointer; background:var(--color-surface); caret-color:transparent;
}
.inv-item-qty{ flex:0 0 auto; width:5.25rem; min-width:5.25rem; }
.inv-item-price{ flex:0 0 auto; width:7.25rem; min-width:6.5rem; }
.inv-item-price .row-price{ font-size:1.02rem; font-weight:700; font-variant-numeric:tabular-nums; }
.inv-item-qty .row-qty{ font-variant-numeric:tabular-nums; text-align:center; }
.inv-item-del{ flex:0 0 auto; }
.inv-item-del .row-del{ padding:10px 12px; min-width:44px; }

.inv-row-meta{ margin:2px 0 12px; padding:0 2px; }
.inv-row-line-total{
  font-size:.95rem; font-weight:800; color:var(--color-text);
  letter-spacing:-.2px; line-height:1.4; font-variant-numeric:tabular-nums;
  white-space:normal; overflow-wrap:anywhere;
}
.inv-row-line-total strong{ font-weight:800; color:var(--color-primary); }
.inv-row-profit-line{ font-size:.72rem; font-weight:600; margin-top:2px; line-height:1.35; }
.inv-price-info-btn{
  display:inline-flex; align-items:center; margin-top:6px; padding:5px 10px;
  border-radius:999px; border:1px solid var(--color-border); background:var(--color-surface);
  color:var(--color-primary); font-family:inherit; font-size:.72rem; font-weight:700;
  cursor:pointer; min-height:32px; position:relative; z-index:2;
}
.inv-price-info-btn[aria-expanded="true"]{ background:var(--color-accent-soft); border-color:var(--color-accent); }
.inv-price-info-panel{
  margin-top:8px; padding:10px 12px; border:1px solid var(--color-border);
  border-radius:12px; background:var(--color-surface-2); max-width:100%; width:100%;
}
.inv-price-info-panel[hidden]{ display:none !important; }
.inv-price-info-grid{ display:flex; flex-direction:column; gap:10px; }
.inv-price-info-row{ display:flex; flex-direction:column; gap:2px; font-size:.8rem; line-height:1.45; }
.inv-price-info-row .k{ color:var(--color-text-muted); font-weight:600; }
.inv-price-info-row .v{ font-weight:700; color:var(--color-text); font-variant-numeric:tabular-nums; word-break:break-word; }

/* Product selector — wide, height-capped, sticky search (screen only) */
.prod-drop{
  display:none;
  position:fixed;
  z-index:120;
  background:var(--color-surface);
  border:1.5px solid var(--color-border);
  border-radius:14px;
  box-shadow:0 12px 40px rgba(11,31,58,.18);
  overflow:hidden;
  box-sizing:border-box;
}
.prod-drop.is-open{ display:flex !important; flex-direction:column; }
.prod-drop[hidden]{ display:none !important; }
.prod-drop-panel{
  display:flex; flex-direction:column; min-height:0; max-height:inherit; height:100%; overflow:hidden;
}
.prod-drop-search-wrap{
  flex:0 0 auto; padding:10px 10px 8px;
  border-bottom:1px solid var(--color-border);
  background:var(--color-surface);
}
.prod-drop-search{
  width:100%; padding:11px 12px; border:1.5px solid var(--color-border);
  border-radius:11px; font-family:inherit; font-size:16px;
  background:var(--color-surface-2); box-sizing:border-box; min-height:44px;
}
.prod-drop-search:focus{
  outline:none; border-color:var(--color-accent);
  box-shadow:0 0 0 3px var(--color-accent-soft);
}
.prod-drop-list{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0;
}
.prod-drop-item{
  display:flex; flex-direction:column; align-items:stretch; gap:3px;
  padding:12px 14px; border-bottom:1px solid var(--color-border);
  cursor:pointer; text-align:right;
}
.prod-drop-item:active{ background:var(--color-surface-2); }
.prod-drop-name{
  font-size:.92rem; font-weight:700; color:var(--color-text);
  line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.prod-drop-stock{
  font-size:.75rem; font-weight:500; color:var(--color-text-muted); line-height:1.3;
}
.prod-drop-empty{
  padding:20px 14px; text-align:center; color:var(--color-text-muted); font-size:.85rem;
}

/* Keep selector/invoice chrome out of print output */
@media print{
  .prod-drop, .inv-price-info-btn, .inv-price-info-panel{ display:none !important; }
}

@media (min-width:480px){
  .inv-price-info-row{ flex-direction:row; justify-content:space-between; align-items:baseline; gap:12px; }
  .inv-item-qty{ width:5.5rem; min-width:5.5rem; }
  .inv-item-price{ width:8rem; min-width:7rem; }
}
@media (max-width:360px){
  .inv-item-qty{ width:4.85rem; min-width:4.85rem; }
  .inv-item-price{ width:6.4rem; min-width:6.2rem; }
  .inv-row-line-total{ font-size:.9rem; }
}


/* ===================== SHAMSI DATE INPUT ===================== */
.shamsi-date{width:100%;}
.shamsi-date-field{
  display:block;
  width:100%;
  text-align:right;
  padding:11px 14px;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:15px;
  background:var(--color-surface);
  color:var(--color-text);
  min-height:44px;
  box-sizing:border-box;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.shamsi-sheet-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.shamsi-sheet{
  width:100%;
  max-width:480px;
  background:#fff;
  border-radius:14px 14px 0 0;
  padding-bottom:env(safe-area-inset-bottom, 8px);
  box-shadow:0 -4px 24px rgba(0,0,0,.15);
}
.shamsi-sheet-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--color-border, #e5e7eb);
  direction:rtl;
}
.shamsi-sheet-title{
  font-weight:600;
  font-size:15px;
  color:var(--color-text, #1a2332);
}
.shamsi-sheet-btn{
  border:none;
  background:transparent;
  font-family:inherit;
  font-size:16px;
  color:var(--color-primary, #1a3a5c);
  padding:6px 10px;
  cursor:pointer;
  min-height:36px;
}
.shamsi-sheet-done{font-weight:700;}
.shamsi-wheels-wrap{
  position:relative;
  height:180px;
  overflow:hidden;
  direction:rtl;
}
.shamsi-wheels-highlight{
  pointer-events:none;
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:36px;
  margin-top:-18px;
  border-top:1px solid rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.03);
  border-radius:8px;
  z-index:1;
}
.shamsi-wheels{
  display:flex;
  height:100%;
  position:relative;
  z-index:2;
}
.shamsi-wheel{
  flex:1;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  text-align:center;
  scrollbar-width:none;
}
.shamsi-wheel::-webkit-scrollbar{display:none;}
.shamsi-wheel-item{
  height:36px;
  line-height:36px;
  scroll-snap-align:center;
  font-size:17px;
  color:var(--color-text, #1a2332);
  user-select:none;
}
.shamsi-wheel-spacer{
  visibility:hidden;
  pointer-events:none;
}
.shamsi-wheel-item[data-selected="1"]{font-weight:600;}


/* ===================== APP BACK (header, internal pages) ===================== */
header.has-back{
  position:relative;
  padding-inline: 56px 16px; /* room for back control in RTL/LTR */
}
button.app-back{
  position:absolute;
  top:calc(50% + var(--safe-top) * 0.15);
  inset-inline-start: 8px;
  transform: translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:44px;
  min-height:44px;
  padding:6px 10px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-family:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  z-index:6;
  -webkit-tap-highlight-color:transparent;
}
button.app-back:active{
  background:rgba(255,255,255,.22);
}
button.app-back .app-back-ico{
  font-size:1.35rem;
  line-height:1;
  font-weight:400;
  display:inline-block;
  /* In RTL, › points toward previous page visually when mirrored by direction */
  transform: none;
}
html[dir="rtl"] button.app-back .app-back-ico{
  /* keep › as-is; sits on the start (right) side */
}
button.app-back .app-back-txt{
  max-width:4.5rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:360px){
  button.app-back .app-back-txt{ display:none; }
  header.has-back{ padding-inline: 48px 12px; }
}
@media (min-width:901px){
  button.app-back{
    background:rgba(255,255,255,.1);
  }
}
@media print{
  button.app-back{ display:none !important; }
}


/* ===================== REPORTS — پرفروش‌ترین کالاها (scoped, additive only) ===================== */
.report-top-products .rtp-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.report-top-products .rtp-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
}
.report-top-products .rtp-rank{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--color-accent-soft);
  color:var(--color-accent-dark);
  font-size:.72rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  font-variant-numeric:tabular-nums;
}
.report-top-products .rtp-info{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.report-top-products .rtp-name{
  font-weight:700;
  font-size:.88rem;
  color:var(--color-text);
  line-height:1.35;
  overflow-wrap:break-word;
  word-break:break-word;
}
.report-top-products .rtp-qty{
  font-size:.72rem;
  color:var(--color-text-muted);
  font-weight:500;
  line-height:1.35;
}
.report-top-products .rtp-amount{
  flex:0 0 auto;
  font-weight:800;
  font-size:.88rem;
  color:var(--color-text);
  text-align:left;
  white-space:nowrap;
  letter-spacing:-.2px;
  font-variant-numeric:tabular-nums;
  align-self:center;
}
@media (max-width:360px){
  .report-top-products .rtp-row{ padding:10px; gap:8px; }
  .report-top-products .rtp-rank{ width:21px; height:21px; font-size:.68rem; }
  .report-top-products .rtp-amount{ font-size:.82rem; }
  .report-top-products .rtp-name{ font-size:.85rem; }
}


/* ===================== REPORTS — Accordion sections (scoped, additive only) ===================== */
.report-accordion{
  padding:0;
}
.report-accordion-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  background:transparent;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  font-family:inherit;
  text-align:right;
  -webkit-tap-highlight-color:transparent;
  min-height:var(--touch);
}
.report-accordion-header h3{
  margin:0;
}
.report-accordion-chevron{
  flex:0 0 auto;
  position:relative;
  width:20px;
  height:20px;
}
.report-accordion-chevron::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  margin:-5px 0 0 -5px;
  border-right:2px solid var(--color-text-muted);
  border-bottom:2px solid var(--color-text-muted);
  transform:rotate(45deg);
  transition:transform .15s ease, border-color .15s ease;
}
.report-accordion-header.is-open .report-accordion-chevron::before{
  transform:rotate(-135deg);
  border-color:var(--color-primary);
}
.report-accordion-content{
  margin-top:10px;
}
.report-accordion-content[hidden]{
  display:none;
}