:root{
  --bg:#f4f6f8; --panel:#ffffff; --panel-alt:#f8f9fb; --input-bg:#fbfcfd; --hover-bg:#f0f2f5;
  --selected-bg:#eef4ff; --border:#e2e6ea; --text:#1f2933; --muted:#6b7684;
  --primary:#2f6fed; --primary-dark:#1e54c4; --danger:#e0453c; --warn:#e0a72c; --ok:#2fb380;
  --diamond:#4fc3f7; --gold:#e0b400; --silver:#9aa5b1; --bronze:#b5713a;
  --radius:10px; --shadow:0 2px 10px rgba(20,30,50,.07); --modal-shadow:0 12px 40px rgba(0,0,0,.25);
  --overlay-backdrop:rgba(15,20,30,.45); --scrollbar-thumb:#c7cfd8; --on-color:#fff;
}
/* ---------- حالت تیره (Dark Mode) ---------- */
/* برای ویزیتورهایی که بیرون زیر نور مستقیم آفتاب یا شب کار می‌کنند. با دکمه‌ی 🌙 در نوار بالا
   فعال/غیرفعال می‌شود و ترجیح کاربر در localStorage مرورگر (فقط همان مرورگر) ذخیره می‌شود. */
:root[data-theme="dark"]{
  --bg:#12161d; --panel:#1b212b; --panel-alt:#20262f; --input-bg:#161b22; --hover-bg:#262e39;
  --selected-bg:#1e3358; --border:#2c3440; --text:#e7ebf0; --muted:#93a0b0;
  --shadow:0 2px 10px rgba(0,0,0,.35); --modal-shadow:0 12px 40px rgba(0,0,0,.55);
  --overlay-backdrop:rgba(0,0,0,.65); --scrollbar-thumb:#3a4351;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
/* فونت اصلی از Vazirmatn به IBM Plex Sans Arabic تغییر کرد تا حس رسمی‌تر/سازمانی‌تری داشته
   باشد؛ Vazirmatn به‌عنوان fallback نگه داشته شده است (بنگرید به توضیح مشابه در
   landing-style.css). */
body{
  font-family:'IBM Plex Sans Arabic', 'Vazirmatn', Tahoma, Arial, sans-serif;
  background:var(--bg); color:var(--text); font-size:14px;
}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:13px;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb); border-radius:8px;}
a{color:var(--primary);}

/* ---------- صفحات ورود/ثبت‌نام/نتیجه پرداخت ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.auth-card{background:var(--panel); border-radius:16px; box-shadow:var(--shadow); padding:32px; width:100%; max-width:420px;}
.auth-card.wide{max-width:520px;}
.auth-card h1{font-size:19px; margin:0 0 4px; text-align:center;}
.auth-card .sub{color:var(--muted); font-size:12.5px; text-align:center; margin-bottom:22px;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--input-bg); color:var(--text);
}
.btn{border:none; border-radius:9px; padding:11px 14px; font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:6px;}
.btn-primary{background:var(--primary); color:var(--on-color); width:100%;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline{background:var(--panel); border:1px solid var(--border); color:var(--text);}
.btn-outline:hover{background:var(--hover-bg);}
.btn-danger{background:#fdecea; color:var(--danger);}
.plan-choice{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.plan-option{border:2px solid var(--border); border-radius:12px; padding:14px; text-align:center; cursor:pointer;}
.plan-option.selected{border-color:var(--primary); background:var(--selected-bg);}
.plan-option .price{font-size:17px; font-weight:800; margin:4px 0;}
.plan-option .per{font-size:11px; color:var(--muted);}
.tier-choice{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px;}
.auth-error{background:#fdecea; color:var(--danger); border-radius:8px; padding:9px 12px; font-size:12.5px; margin-bottom:12px; display:none;}
.auth-footer{text-align:center; margin-top:16px; font-size:12.5px; color:var(--muted);}
.center-icon{font-size:44px; text-align:center; margin-bottom:10px;}

/* ---------- بنر وضعیت اشتراک ---------- */
.sub-banner{background:#fff8e6; border-bottom:1px solid #f3dfa1; color:#7a5b00; padding:9px 16px; font-size:12.5px; display:flex; align-items:center; justify-content:center; gap:10px; text-align:center;}
.sub-banner.danger{background:#fdecea; border-color:#f4c2bd; color:#8a231d;}
.sub-banner button{background:#1f2933; color:#fff; border:none; border-radius:8px; padding:6px 12px; font-size:12px;}

/* ---------- چیدمان اصلی اپ ---------- */
header.topbar{
  display:flex; align-items:center; gap:10px; padding:10px 16px; position:relative;
  background:linear-gradient(90deg,var(--primary-dark),var(--primary));
  color:var(--on-color); flex:0 0 auto; box-shadow:var(--shadow); z-index:20;
}
header.topbar h1{font-size:16px; margin:0; font-weight:700; white-space:nowrap;}
header.topbar .co-name{font-size:12.5px; opacity:.9;}
header.topbar .spacer{flex:1;}
.topbtn{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:var(--on-color);
  border-radius:8px; padding:7px 12px; font-size:12.5px; display:flex; align-items:center; gap:6px;
  white-space:nowrap; transition:.15s;
}
.topbtn:hover{background:rgba(255,255,255,.25);}
/* روی دسکتاپ، این دو عنصر جدید (دکمه‌ی منوی همبرگری و بسته‌بندیِ دکمه‌های نوار بالا) نباید هیچ
   ظاهر/چیدمانی را عوض کنند: دکمه‌ی منو مخفی می‌ماند و بسته‌بندی با display:contents طوری رفتار
   می‌کند که انگار اصلا وجود ندارد و دکمه‌های داخلش مستقیما فرزند فلکس‌باکس نوار بالا هستند -
   دقیقا همان چیدمان قبلی. این دو فقط زیر breakpoint موبایل (پایین‌تر) فعال/تغییر شکل می‌دهند. */
.topbar-menu-btn{display:none;}
.topbar-actions{display:contents;}
.app-shell{display:flex; flex-direction:column; height:100vh; overflow:hidden;}
.layout{flex:1; display:flex; min-height:0;}
aside.sidebar{width:360px; flex:0 0 360px; background:var(--panel); border-left:1px solid var(--border); display:flex; flex-direction:column; min-height:0;}
.sidebar-scroll{overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:14px; flex:1; min-height:0;}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px;}
.card h3{margin:0 0 10px; font-size:13px; color:var(--muted); font-weight:700; display:flex; align-items:center; justify-content:space-between;}
/* آیکون فلش جمع/بازکردن کارت‌های نوار کناری - فقط در عرض موبایل معنی دارد (پایین‌تر آشکار می‌شود)،
   در دسکتاپ همیشه مخفی می‌ماند چون این کارت‌ها در دسکتاپ همیشه باز هستند. */
.card-toggle-icon{display:none;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.btn-sm{padding:6px 9px; font-size:12px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

.shoplist{display:flex; flex-direction:column; gap:8px;}
.shopcard{border:1px solid var(--border); border-radius:9px; padding:9px 10px; cursor:pointer; background:var(--panel); transition:.12s;}
.shopcard:hover{border-color:var(--primary); box-shadow:0 0 0 3px rgba(47,111,237,.08);}
.shopcard.active{border-color:var(--primary); background:var(--selected-bg);}
.shopcard .row{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.shopcard .name{font-weight:700; font-size:13.5px;}
.shopcard .sub{color:var(--muted); font-size:11.5px; margin-top:2px;}
.badge{display:inline-block; border-radius:20px; font-size:10.5px; padding:2px 8px; font-weight:700; white-space:nowrap;}
.b-diamond{background:#e3f7ff; color:#0288d1;}
.b-gold{background:#fff6df; color:#a67c00;}
.b-silver{background:#eef1f4; color:#5b6570;}
.b-bronze{background:#f8e9dd; color:#8a4d1f;}
.b-none{background:#f1f1f1; color:#888;}
.b-active{background:#e5f8ef; color:#1c8f5f;}
.b-inactive{background:#f1f1f1; color:#888;}
.b-blocked{background:#fdecea; color:var(--danger);}
.empty-hint{color:var(--muted); font-size:12.5px; text-align:center; padding:18px 6px;}

main.mapwrap{flex:1; position:relative; min-width:0;}
#map{width:100%; height:100%; touch-action:none;}
.map-toast{position:absolute; top:12px; right:50%; transform:translateX(50%); z-index:500; background:#1f2933; color:var(--on-color); padding:9px 16px; border-radius:20px; font-size:12.5px; box-shadow:var(--shadow); display:none; align-items:center; gap:8px;}
.map-toast button{background:var(--on-color); color:#1f2933; border:none; border-radius:14px; padding:3px 10px; font-size:11.5px; font-weight:700;}
.leaflet-popup-content{font-family:'IBM Plex Sans Arabic','Vazirmatn',Tahoma,sans-serif; direction:rtl; text-align:right;}
.popup-title{font-weight:700; margin-bottom:4px;}
.popup-line{font-size:12px; color:#444; margin:2px 0;}
.popup-actions{margin-top:6px; display:flex; gap:6px;}
.popup-actions button{border:none; border-radius:6px; padding:4px 8px; font-size:11.5px; cursor:pointer;}

.overlay{position:fixed; inset:0; background:var(--overlay-backdrop); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px;}
.overlay.show{display:flex;}
.modal{background:var(--panel); border-radius:14px; width:100%; max-width:640px; max-height:88vh; overflow-y:auto; box-shadow:var(--modal-shadow);}
.modal.wide{max-width:920px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--panel); z-index:2;}
.modal-head h2{font-size:16px; margin:0;}
.modal-head .x{background:none; border:none; font-size:20px; color:var(--muted); line-height:1;}
.modal-body{padding:16px 18px;}
.modal-foot{padding:14px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; position:sticky; bottom:0; background:var(--panel);}
/* چرا overflow-x:auto لازم است: وقتی عرض صفحه کم است (موبایل)، مجموع عرض طبیعی همه‌ی تب‌ها
   (مثلا «تاریخچه خرید و چک‌ها»، «افزودن خرید دستی»، «یادداشت‌ها»، «مخاطبین»، «ویزیت‌ها (GPS)»)
   از عرض مودال بیشتر می‌شود. بدون این قانون، فلکس‌باکس تب‌ها را بی‌قاعده جمع می‌کرد و متن هر
   تب را به چند خط می‌شکست - و بدتر از آن، آخرین تب (که دقیقا تب «ویزیت‌ها (GPS)» است، همان جایی
   که دکمه‌ی دریافت موقعیت هست) کامل از دید بیرون می‌افتاد و اصلا قابل کلیک نبود. حالا نوار
   تب‌ها به‌جای شکستن/بریده‌شدن، به‌صورت افقی اسکرول می‌شود (یک الگوی رایج و آشنا در اپ‌های
   موبایل) و هر تب همیشه در یک خط و کامل نمایش داده می‌شود. */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:14px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tab{padding:8px 14px; font-size:12.5px; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; font-weight:600; flex:0 0 auto; white-space:nowrap;}
.tab.active{color:var(--primary); border-color:var(--primary);}
.tabpane{display:none;}
.tabpane.active{display:block;}
table.datatable{width:100%; border-collapse:collapse; font-size:12.5px;}
table.datatable th, table.datatable td{border-bottom:1px solid var(--border); padding:6px 8px; text-align:right;}
table.datatable th{color:var(--muted); font-weight:700; background:var(--panel-alt);}
.metric-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px;}
.metric{background:var(--panel-alt); border-radius:10px; padding:10px; text-align:center;}
.metric .v{font-size:16px; font-weight:800;}
.metric .l{font-size:11px; color:var(--muted); margin-top:2px;}
.hint{font-size:11.5px; color:var(--muted); line-height:1.7;}
.divider{height:1px; background:var(--border); margin:12px 0;}
.flexrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.switch{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer;}
.switch input{width:auto;}
.toast-msg{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#1f2933; color:var(--on-color); padding:10px 18px; border-radius:10px; font-size:13px; z-index:2000; display:none; box-shadow:var(--shadow); max-width:90vw;}
.search-wrap{position:relative;}
.search-results{position:absolute; top:100%; right:0; left:0; background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); z-index:50; max-height:220px; overflow-y:auto; display:none;}
.search-results div{padding:8px 10px; font-size:12.5px; cursor:pointer; border-bottom:1px solid var(--border);}
.search-results div:hover{background:var(--hover-bg);}
.import-map-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; padding:6px 0; border-bottom:1px dashed var(--border);}
.import-map-row .fld{font-size:12.5px; font-weight:700;}
.blacklist-item{display:flex; justify-content:space-between; align-items:center; padding:8px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px;}
.warn-box{background:#fff8e6; border:1px solid #f3dfa1; color:#7a5b00; border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.8;}
.danger-box{background:#fdecea; border:1px solid #f4c2bd; color:#8a231d; border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.8;}
.ok-box{background:#e9f9f1; border:1px solid #b7e9cf; color:#146c43; border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.8;}
.leaflet-div-icon{background:none; border:none;}
.pin{width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center;}
.pin span{transform:rotate(45deg); font-size:12px; color:#fff; font-weight:800;}

/* ---------- پنل ادمین ---------- */
.admin-wrap{padding:20px; max-width:1100px; margin:0 auto;}
.admin-table{width:100%; border-collapse:collapse; background:var(--panel); border-radius:10px; overflow:hidden; box-shadow:var(--shadow);}
.admin-table th, .admin-table td{padding:10px 12px; text-align:right; border-bottom:1px solid var(--border); font-size:12.5px;}
.admin-table th{background:var(--panel-alt); color:var(--muted);}
.admin-table tr:hover{background:var(--hover-bg);}

/* دستگیره‌ی جمع/بازکردن کامل نوار کناری (فیلترها+ابزارها+لیست فروشگاه‌ها) - فقط در عرض موبایل
   معنی دارد؛ در دسکتاپ همیشه مخفی است چون نوار کناری در دسکتاپ همیشه کنار نقشه دیده می‌شود. */
.sidebar-handle{display:none;}

@media (max-width:900px){
  .layout{flex-direction:column;}
  .sidebar-handle{
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 10px; background:var(--panel); border-bottom:1px solid var(--border);
    cursor:pointer; user-select:none; font-size:12px; font-weight:700; color:var(--muted);
    flex:0 0 auto;
  }
  .sidebar-handle-icon{display:inline-block; font-size:11px; transition:transform .15s ease;}
  /* وقتی نوار کناری کامل پنهان است، نقشه تقریبا تمام صفحه را می‌گیرد و همین دستگیره‌ی کوچک
     بالای آن، همیشه در دسترس، تنها راه بازگرداندنش است. */
  .layout.sidebar-hidden aside.sidebar{display:none;}
  .layout.sidebar-hidden .sidebar-handle-icon{transform:rotate(180deg);}
  /* قبلا اینجا "flex:0 0 46%" بود - یعنی نوار کناری همیشه دقیقا ۴۶ درصد ارتفاع صفحه را می‌گرفت،
     حتی وقتی کارت‌هایش (خلاصه وضعیت/جستجو/فیلترها/ابزارها) بسته بودند - و همان فضای خالی/سفیدِ
     باقی‌مانده زیر کارت‌های بسته بود که نقشه را کوچک نگه می‌داشت. حالا نوار کناری فقط به‌اندازه‌ی
     محتوای واقعی‌اش (کارت‌های بسته + لیست فروشگاه‌ها) جا می‌گیرد و باقی ارتفاع را نقشه می‌گیرد؛
     "max-height" فقط یک سقف است برای وقتی که کاربر چند کارت را باز کند تا نقشه کاملا از صفحه
     بیرون نرود - در آن حالت خودِ نوار کناری مثل قبل داخلی اسکرول می‌شود. */
  aside.sidebar{width:100%; flex:0 1 auto; max-height:46vh; border-left:none; border-bottom:1px solid var(--border);}
  /* فاصله‌ی بین کارت‌ها و پدینگ اطراف‌شان در دسکتاپ برای خوانایی خوب است، ولی روی گوشی وقتی
     ۴ کارت بسته پشت‌سرهم قرار می‌گیرند همین فاصله‌های کوچک هم جمع می‌شوند و فضای زیادی از همان
     ارتفاعِ به‌دست‌آمده را دوباره می‌خورند؛ اینجا کمی جمع‌ترشان می‌کنیم. */
  .sidebar-scroll{gap:8px; padding:10px;}
  .metric-grid{grid-template-columns:repeat(2,1fr);}
  .plan-choice{grid-template-columns:1fr;}
  .tier-choice{grid-template-columns:1fr;}

  /* ---------- نوار بالا در موبایل: ۱۰ دکمه دیگر در یک ردیف جا نمی‌شوند و باعث می‌شدند نوار
     بالا به چند خط بشکند و ارتفاع زیادی از صفحه‌ی کوچک را ببلعد. حالا فقط عنوان و یک دکمه‌ی
     منوی همبرگری (☰) در نوار بالا می‌مانند و بقیه‌ی دکمه‌ها در یک پنل کشویی زیر نوار بالا
     جمع می‌شوند. ---------- */
  header.topbar h1{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex-shrink:1; font-size:14px;}
  header.topbar .co-name{display:none;}
  #stagingBadge{display:none;}
  .topbar-menu-btn{display:flex; flex:0 0 auto;}
  .topbar-actions{
    display:none; position:absolute; top:100%; right:0; left:0; flex-direction:column; gap:6px;
    background:var(--panel); padding:10px; box-shadow:var(--shadow); z-index:30;
    max-height:75vh; overflow-y:auto; border-bottom:1px solid var(--border);
  }
  .topbar-actions.show{display:flex;}
  .topbar-actions .topbtn{
    width:100%; justify-content:flex-start; color:var(--text);
    background:var(--panel-alt); border:1px solid var(--border);
  }
  .topbar-actions .topbtn:hover{background:var(--hover-bg);}

  /* ---------- کارت‌های نوار کناری (خلاصه وضعیت/جستجو/فیلترها/ابزارها) در موبایل به‌صورت
     منوی کشویی/جمع‌شونده درمی‌آیند تا بدون اسکرول زیاد سریع‌تر به لیست فروشگاه‌ها و نقشه برسید؛
     پیش‌فرض همه بسته‌اند (کلاس collapsed از قبل روی خودِ HTML گذاشته شده) و با کلیک روی عنوان هر
     کارت باز/بسته می‌شوند. لیست فروشگاه‌ها عمدا از این رفتار مستثنی است و همیشه باز می‌ماند. در
     دسکتاپ این قانون اصلا اجرا نمی‌شود (چون این بلوک فقط زیر ۹۰۰ پیکسل فعال است) و همه‌ی کارت‌ها
     مثل قبل همیشه باز هستند. ---------- */
  .collapsible-card .card-toggle{cursor:pointer; user-select:none;}
  .collapsible-card .card-toggle-icon{display:inline-block; transition:transform .15s ease; font-size:11px; margin-inline-start:6px; color:var(--muted);}
  .collapsible-card.collapsed .card-toggle-icon{transform:rotate(-90deg);}
  .collapsible-card.collapsed .card-body{display:none;}
  /* وقتی کارت بسته است، دیگر محتوایی زیر عنوان نیست که فاصله‌ی ۱۰ پیکسلی زیر عنوان (margin-bottom
     پیش‌فرض h3) را توجیه کند و پدینگ کارت هم می‌تواند کمی جمع‌تر شود - همین‌ها کنار هم روی ۴ کارت
     جمع می‌شود و فضای واقعی بیشتری به نقشه می‌رسد. */
  .collapsible-card.collapsed{padding-top:9px; padding-bottom:9px;}
  .collapsible-card.collapsed h3{margin-bottom:0;}

  /* ---------- لیست فروشگاه‌ها (که هیچ‌وقت جمع نمی‌شود) قبلا هیچ سقف ارتفاعی نداشت و فقط از طریق
     اسکرول کلِ نوار کناری (که خودش هم سقف ۴۶٪ داشت) محدود می‌شد - یعنی برای این‌که "flex:0 1 auto"
     بالا واقعا نوار کناری را جمع کند، مرورگر مجبور بود اول ارتفاع کامل و نامحدود همین لیست را
     حساب کند (حتی وقتی کارت‌ها همه بسته بودند)، و همان باعث می‌شد نوار کناری باز هم به سقف ۴۶٪
     برسد و نقشه کوچک بماند. حالا خودِ لیست فروشگاه‌ها سقف/اسکرول مستقل خودش را دارد، پس با
     بسته‌بودن کارت‌ها، نوار کناری واقعا کوچک می‌شود و نقشه بزرگ‌تر دیده می‌شود؛ اگر فروشگاه‌های
     زیادی دارید همچنان همه در همین لیست با اسکرول داخلی در دسترس‌اند، چیزی حذف نشده. ---------- */
  .shoplist{max-height:30vh; overflow-y:auto;}
}

/* ---------- عرض گوشی (نه تبلت/لپ‌تاپ کوچک): ردیف‌های دوستونی فرم‌ها با برچسب‌های بلند (مثل
   «سقف اعتبار — اختیاری» یا «تاریخ ویزیت بعدی — اختیاری») در این عرض کم جا نمی‌شوند و برچسب
   می‌شکند. روی تبلت (بین ۴۸۰ تا ۹۰۰ پیکسل) دو ستون هنوز به‌راحتی جا می‌شود، پس این تغییر را
   فقط برای عرض واقعی گوشی محدود می‌کنیم. ---------- */
@media (max-width:480px){
  .row2{grid-template-columns:1fr;}
}

/* ---------- حالت تیره: تیره‌کردن جعبه‌های رنگی که رنگشان ثابت (نه متغیر) تعریف شده ---------- */
/* این باکس‌ها (هشدار/خطا/موفقیت) عمداً رنگ پاستلی ثابت دارند تا در حالت روشن خوانا باشند؛
   در حالت تیره یک نسخه‌ی تیره‌تر با همان رنگ متن جایگزین می‌شود تا هم خوانا بماند و هم چشم را
   در محیط تاریک اذیت نکند. */
:root[data-theme="dark"] .warn-box{background:#3a2f0f; border-color:#5c4a17; color:#f0cf6b;}
:root[data-theme="dark"] .danger-box{background:#3a1815; border-color:#5c2a24; color:#f5a49c;}
:root[data-theme="dark"] .ok-box{background:#123024; border-color:#1e5a41; color:#7fe3b4;}
:root[data-theme="dark"] .auth-error{background:#3a1815; color:#f5a49c;}
:root[data-theme="dark"] .btn-danger{background:#3a1815; color:#f5a49c;}
:root[data-theme="dark"] .sub-banner{background:#3a2f0f; border-color:#5c4a17; color:#f0cf6b;}
:root[data-theme="dark"] .sub-banner.danger{background:#3a1815; border-color:#5c2a24; color:#f5a49c;}
:root[data-theme="dark"] .b-diamond{background:#123244; color:#7fd4f7;}
:root[data-theme="dark"] .b-gold{background:#3a2f0f; color:#f0cf6b;}
:root[data-theme="dark"] .b-silver{background:#2a3138; color:#c3cdd8;}
:root[data-theme="dark"] .b-bronze{background:#3a2510; color:#e0a568;}
:root[data-theme="dark"] .b-none{background:#2a3138; color:#93a0b0;}
:root[data-theme="dark"] .b-active{background:#123024; color:#7fe3b4;}
:root[data-theme="dark"] .b-inactive{background:#2a3138; color:#93a0b0;}
:root[data-theme="dark"] .search-results div{border-bottom-color:var(--border);}
:root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip{background:var(--panel); color:var(--text);}
:root[data-theme="dark"] .popup-line{color:#b7c0cc;}
/* نقشه‌ی OSM خودش تیره نمی‌شود (کاشی‌های آن روی سرور دیگری تولید می‌شوند)؛ برای کاهش خیرگی در
   محیط تاریک، فقط لایه‌ی کاشی‌ها را با فیلتر رنگی معکوس/تیره می‌کنیم، بدون آن‌که روی نشانگرها یا
   پاپ‌آپ‌ها (که در لایه‌های دیگر هستند) اثر بگذارد. */
:root[data-theme="dark"] #map .leaflet-tile-pane{filter:brightness(.72) invert(1) contrast(.9) hue-rotate(200deg) saturate(.7);}
:root[data-theme="dark"] #map .leaflet-marker-pane, :root[data-theme="dark"] #map .leaflet-popup-pane{filter:none;}

/* دکمه‌ی تغییر حالت تیره/روشن در نوار بالا */
#btnThemeToggle{min-width:38px; justify-content:center;}

/* ---------- میان‌برهای صفحه‌کلید ---------- */
.shortcut-hint{opacity:.75; font-size:10.5px; margin-inline-start:4px;}

/* ---------- لیست مخصوص چاپ (آدرس/تلفن کامل، بدون اطلاعات مالی) - فقط هنگام چاپ نمایش داده می‌شود ---------- */
#printOnlyList{display:none;}
#printOnlyList table{width:100%; border-collapse:collapse; font-size:12px;}
#printOnlyList th, #printOnlyList td{border:1px solid #ccc; padding:5px 7px; text-align:right;}
#printOnlyList th{background:#f0f0f0;}
#printOnlyList h3{margin:14px 0 8px;}

/* ---------- حالت چاپ: فقط نقشه و لیست فروشگاه‌ها چاپ شود، نه دکمه‌ها/فیلترها/بنرها ---------- */
@media print{
  /* صرف‌نظر از این‌که کاربر روی صفحه در حالت تیره باشد، خروجی چاپ همیشه روشن/کاغذی بماند تا
     جوهر/تونر چاپگر هدر نرود و متن روی کاغذ سفید خوانا باشد. */
  :root, :root[data-theme="dark"]{
    --bg:#ffffff; --panel:#ffffff; --panel-alt:#f4f4f4; --input-bg:#ffffff; --hover-bg:#f0f0f0;
    --selected-bg:#eef4ff; --border:#ccc; --text:#000000; --muted:#444444;
    --shadow:none; --modal-shadow:none; --overlay-backdrop:transparent;
  }
  .no-print, header.topbar .topbtn, .sub-banner, .map-toast, .toast-msg, .overlay, #offlineBanner{display:none !important;}
  #shopList{display:none !important;}
  #printOnlyList{display:block !important;}
  html, body{height:auto; background:#fff;}
  header.topbar{background:#fff; color:#000; box-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  header.topbar .co-name{color:#000;}
  .app-shell{height:auto; overflow:visible;}
  .layout{flex-direction:column; overflow:visible;}
  aside.sidebar{width:100%; flex:none; border-left:none; overflow:visible;}
  .sidebar-scroll{overflow:visible; padding:0;}
  .card{border:1px solid #ccc; box-shadow:none; break-inside:avoid; margin-bottom:10px;}
  .shopcard{break-inside:avoid; box-shadow:none;}
  main.mapwrap{width:100%; height:420px; position:relative; margin-top:10px; page-break-inside:avoid;}
  #map{height:420px !important;}
}

/* ---------- انتخاب‌گر تاریخ شمسی (تقویم قابل‌کلیک به‌جای ورودی تاریخ میلادی) ---------- */
.jalali-date-input{cursor:pointer; background:var(--input-bg); color:var(--text);}
.jalali-date-input::placeholder{color:var(--muted);}
.jalali-date-input:hover{border-color:var(--primary);}
.jalali-cal-popup{
  position:absolute; z-index:3000; width:232px; background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:10px; box-shadow:var(--modal-shadow);
  padding:10px; font-size:12.5px; direction:rtl;
}
.jc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.jc-title{font-weight:700; font-size:13px;}
.jc-nav{
  background:var(--panel-alt); border:1px solid var(--border); color:var(--text);
  width:26px; height:26px; border-radius:7px; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.jc-nav:hover{background:var(--hover-bg);}
.jc-weekdays{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; color:var(--muted); margin-bottom:2px;}
.jc-wd{padding:4px 0; font-size:11px;}
.jc-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.jc-cell{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.jc-day{border-radius:7px; cursor:pointer;}
.jc-day:hover{background:var(--hover-bg);}
.jc-day.jc-today{border:1px solid var(--primary); color:var(--primary); font-weight:700;}
.jc-day.jc-sel{background:var(--primary); color:var(--on-color); font-weight:700;}
.jc-foot{display:flex; gap:6px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border);}
.jc-today-btn, .jc-clear-btn{
  flex:1; background:var(--panel-alt); border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:6px 8px; font-size:11.5px; cursor:pointer;
}
.jc-today-btn:hover, .jc-clear-btn:hover{background:var(--hover-bg);}
.jc-clear-btn{color:var(--danger);}