/* توکن‌های رنگ: تنها جایی که رنگ تعریف می‌شود. تغییر سبز اصلی = تغییر --brand و --bar */
:root {
  --brand: #009865; --bar: #009865;
  /* سبز دیکاتو فقط برای هدر و نوار؛ سطح پرشده (دکمه/چیپ فعال) --brand-strong، متنِ برند --brand-ink (روی زمینه‌ی روشن و روی رنگ‌مایه‌ی ۱۲–۲۰٪ ≥۴.۵:۱) */
  --brand-strong: #00805a; --brand-ink: #006d4b;
  --bg: #f2f6f3; --card: #fff; --text: #14231a; --muted: #5c6c62; --line: #e0e8e2;
  --warn: #f59e0b; --bad: #dc2625; --off: #66756c; --arch: #000;
  --me: #1a73e8; /* نقطه‌ی «موقعیت من» روی نقشه (آبی؛ فقط همین نشانگر) */
  --route: #1259ad; --route-done: #7b828c; --route-peer: #9b2c8f; /* مسیریابی روی نقشه (فاز ۳): طی‌نشده آبیِ کمی تیره‌تر از «یکشنبه» (--d1)، طی‌شده خاکستری؛ بدون هاله و بدون حاشیه‌ی سفید */
  /* متنِ خطا روی زمینه/رنگ‌مایه‌ی روشن (--bad خودش فقط برای سطح پرشده و خط) */
  --bad-ink: #b91c1c;
  /* نارنجیِ ویزیتِ «نبود مسئول فروش»: --warn فقط سطح پرشده با متن تیره؛ --warn-line برای نور/حاشیه/نقطه روی کارت و نقشه (≥۳:۱)، هرگز متن */
  --warn-line: #b45309;
  /* رنگ اختصاصی هر روز هفته (۰ = شنبه … ۶ = جمعه)؛ روی تب روز، نوار کنار کارت و برچسب روز استفاده می‌شود */
  --d0: #e53935; --d1: #1976d2; --d2: #8e24aa; --d3: #00897b; --d4: #c2670a; --d5: #3949ab; --d6: #6d4c41;
  --map-glass: rgb(16 20 24 / .54); --map-glass-nav: rgb(16 20 24 / .62); /* شیشه‌ی دودیِ خنثی برای دکمه‌ها و نوارِ شناورِ نقشه (بدون رنگ سبز) */
  --glass: rgb(255 255 255 / .16); --glass-hi: rgb(0 0 0 / .2); --glass-line: rgb(255 255 255 / .32); --on-bar-2: rgb(255 255 255 / .88); /* شیشه‌ی روی هدر/پنل‌های هدر (مثل دیکاتو)؛ --glass-hi = حالت فعال/فشرده/فوکوس (شیشه‌ی دودی‌تر) */
  --on-brand: #fff; --r: 18px; --nav-h: 64px; --t: .16s; --ease: cubic-bezier(.2, .8, .2, 1);
  --font: Vazirmatn, system-ui, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  color-scheme: light;
}
:root[data-theme=dark] {
  --brand: #1fc58b; --bar: #0b3d2c;
  --brand-strong: #1fc58b; --brand-ink: #1fc58b; --bad-ink: #f87171; --warn-line: #f59e0b;
  --on-brand: #06281c;
  --route: #3a8bd9; --route-done: #9aa3ad; --route-peer: #d77bd0;
  /* روزها در تم تاریک: روشن‌تر تا روی کارت تیره ≥۳:۱ (نوار/حاشیه) و با زمینه‌ی ۱۸٪ و متن عادی ≥۴.۵:۱ */
  --d0: #ff6b66; --d1: #4da3f0; --d2: #c26ad6; --d3: #26b8a6; --d4: #ffa726; --d5: #7b8cf0; --d6: #a1887f;
  --bg: #0e1511; --card: #18211c; --text: #e8f0ea; --muted: #8fa196; --line: #26322b;
  color-scheme: dark;
}
/* رنگ هر آیکون گرد */
.tone-1 { --c: #0d9467 } .tone-2 { --c: #6366f1 } .tone-3 { --c: #b45309 } .tone-4 { --c: #0891b2 }
.tone-5 { --c: #dc2625 } .tone-6 { --c: #8b5cf6 } .tone-7 { --c: #f43f5e } .tone-8 { --c: #e6b00a; --ic: #2b1d00 }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--text); font: 15px/1.7 var(--font); overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ico { display: inline-flex; } .ico svg { width: 24px; height: 24px; }

/* پوسته: هدر ثابت، محتوای اسکرول‌شونده، ناوبری پایین */
/* position: fixed + inset: 0 = دقیقاً ناحیه‌ی دیده‌شده (بدون وابستگی به dvh)؛ پس ناوبری پایین همیشه بدون اسکرول دیده می‌شود */
#app { position: fixed; inset: 0; width: 100%; max-width: 900px; margin-inline: auto; display: flex; flex-direction: column; background: var(--bg); }
.header-slot { background: var(--bar); transition: background var(--t); }
.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 16px; }
.header-text { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.header-logo { width: 48px; height: 48px; flex: none; border-radius: 12px; background: #fff; object-fit: contain; box-shadow: 0 1px 4px rgb(0 0 0 / .2); }
.header-titles { min-width: 0; }
.header h1, .header p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header h1 { font-size: 19px; font-weight: 700; line-height: 1.4; }
.header p { font-size: 13px; opacity: .85; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .16); transition: transform var(--t) var(--ease); }
.icon-btn:active { transform: scale(.9); }

.screen { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 16px 24px; }
.screen.enter { animation: enter .2s var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }

/* شبکه‌ی آیکون‌های گرد */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 22px 8px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.circle { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center;
  color: var(--ic, #fff); background: var(--c); transition: transform var(--t) var(--ease); }
.tile:active .circle { transform: scale(.9); }
.tile-label { font-size: 13px; text-align: center; line-height: 1.4; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 16px; }
.row { display: flex; justify-content: space-between; padding: 12px 0; }
.empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 56px 24px; }
.empty .circle { width: 72px; height: 72px; margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 32ch; }

/* ناوبری پایین */
.nav { flex: none; display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding: 6px 8px calc(env(safe-area-inset-bottom) + 6px); }
.nav-item { flex: 1; min-height: calc(var(--nav-h) - 12px); display: grid; justify-items: center; align-content: center; gap: 2px;
  font-size: 12px; color: var(--muted); border-radius: 14px; transition: color var(--t), background var(--t); }
.nav-item.on { color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 12%, transparent); font-weight: 700; }
.nav-item:active .ico { transform: scale(.88); } .nav-item .ico { transition: transform var(--t) var(--ease); }

.toast { position: fixed; inset-inline: 16px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); margin-inline: auto; width: fit-content; max-width: calc(100% - 32px);
  background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 14px; animation: enter .2s var(--ease); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* فرم، دکمه، فهرست و کلید سه‌حالته (فاز ۳) */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field span { font-size: 13px; color: var(--muted); }
.field input, .search { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); padding: 0 14px; font: inherit; }
.field input:focus, .search:focus { outline: 2px solid var(--brand); border-color: transparent; }
.btn { width: 100%; height: 50px; border-radius: 14px; background: var(--brand-strong); color: var(--on-brand); font-weight: 700; transition: transform var(--t) var(--ease), opacity var(--t); }
.btn:active { transform: scale(.98); } .btn:disabled { opacity: .6; }
.btn.ghost { background: transparent; color: var(--brand-ink); border: 1px solid var(--line); }
.btn.danger { background: transparent; color: var(--bad-ink); border: 1px solid var(--line); }
.btn[aria-disabled=true] { opacity: .5; } /* دکمه‌ی غیرفعال که با لمس دلیلش را می‌گوید (مثل «تحویل بار» بدون پیش‌فاکتور) */
.login { flex: 1; min-height: 0; overflow-y: auto; width: 100%; display: grid; align-content: center; align-content: safe center; gap: 6px; padding: 24px; max-width: 400px; margin: 0 auto; }
.login h1 { text-align: center; font-size: 20px; margin-bottom: 12px; }
.login-logo { width: 112px; height: 112px; border-radius: 28px; margin: 0 auto 8px; display: block; }
.error { color: #dc2625; min-height: 1.4em; font-size: 13px; margin: 0 0 8px; }
.notice { background: color-mix(in srgb, var(--brand) 12%, var(--card)); border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-bottom: 10px; }
.notice.warn { background: color-mix(in srgb, #f59e0b 18%, var(--card)); }
.stack { display: grid; gap: 14px; } .stack .card { padding: 14px 16px; } .card h2 { font-size: 15px; margin-bottom: 8px; }
.hint { color: var(--muted); font-size: 13px; text-align: center; padding: 12px; } .hint.error { color: var(--bad-ink); }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; background: color-mix(in srgb, var(--brand) 18%, var(--card)); color: var(--brand-ink); }
.icon-btn .avatar { width: 100%; height: 100%; background: none; color: #fff; }
.row-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.row-item.wrap { flex-wrap: wrap; } .row-item .seg, .row-wide { width: 100%; flex: 0 0 100%; }
.row-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: start; }
.row-text { display: grid; min-width: 0; } .row-text small { color: var(--muted); }
.contact-search { display: grid; gap: 8px; }
.seg { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, var(--card)); }
.seg button { flex: 1; min-height: 44px; padding: 7px 4px; border-radius: 9px; font-size: 13px; transition: background var(--t), color var(--t); }
.seg .on { background: var(--card); color: var(--brand-ink); font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.header-actions { display: flex; gap: 8px; flex: none; }

/* نشانگر وضعیت همگام‌سازی و صف (فاز ۴) */
.sync-btn { position: relative; --dot: var(--off); }
.sync-btn[data-state=pending], .sync-btn[data-state=syncing] { --dot: var(--warn); --dot-ink: #1d1d1d; }
.sync-btn[data-state=failed] { --dot: var(--bad); }
.sync-btn[data-state=offline] .ico { opacity: .75; }
.sync-btn[data-state=syncing] .ico { animation: spin 1s linear infinite; }
.sync-dot { position: absolute; top: -3px; inset-inline-start: -3px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px; display: grid; place-items: center;
  background: var(--dot); color: var(--dot-ink, #fff); font-size: 11px; font-weight: 700; line-height: 1; border: 2px solid var(--bar); }
.sync-circle { width: 42px; height: 42px; border-radius: 14px; flex: none; --c: var(--brand-strong); --ic: var(--on-brand); }
.sync-circle.offline { --c: var(--off); --ic: #fff; } .sync-circle.pending, .sync-circle.syncing { --c: var(--warn); --ic: #1d1d1d; } .sync-circle.failed { --c: var(--bad); --ic: #fff; }
.sync-circle.syncing .ico { animation: spin 1s linear infinite; }
.chip { flex: none; font-size: 12px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 20%, var(--card)); }
.chip.done { background: color-mix(in srgb, var(--brand) 18%, var(--card)); color: var(--brand-ink); }
.chip.failed { background: color-mix(in srgb, var(--bad) 16%, var(--card)); color: var(--bad-ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* مشتری‌ها و ویزیت (فاز ۵) */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 4px; scrollbar-width: none; } /* ردیف روزها؛ فقط در FilterBar، برای مشتری‌ها و نقشه یکسان */
.chips::-webkit-scrollbar { display: none; }
.chip-btn { flex: none; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 13px; transition: background var(--t), color var(--t); }
.chip-btn { --c: var(--brand-strong); }
.chip-btn[aria-pressed=true] { background: var(--c); color: var(--on-brand); border-color: transparent; }
.chip-btn.day { border-color: var(--c); }
.chip-btn.day[aria-pressed=true] { background: color-mix(in srgb, var(--c) 18%, var(--card)); color: var(--text); font-weight: 700; border: 2px solid var(--c); padding: 5px 13px; }
.chip-btn.today::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-inline-start: 6px; vertical-align: middle; }
.summary { color: var(--muted); font-size: 13px; padding: 0 2px 8px; }
.balance { flex: none; align-self: flex-start; white-space: nowrap; padding: 4px 12px; border-radius: 12px; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--text) 8%, var(--card)); }
.balance.bad { background: color-mix(in srgb, var(--bad) 14%, var(--card)); color: var(--bad-ink); }
.bal-col { flex: none; align-self: flex-start; display: grid; justify-items: center; gap: 1px; min-width: 0; line-height: 1.35; }
.bal-col .balance { align-self: auto; }
.bal-delta { font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bal-delta.ok { color: var(--brand-ink); } .bal-delta.bad { color: var(--bad-ink); }
.bal-when { font-size: 11px; color: var(--muted); white-space: nowrap; }
.balance.ok { background: color-mix(in srgb, var(--brand) 16%, var(--card)); color: var(--brand-ink); }
.cust-line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.cust-line .ico { flex: none; }
.cust-line svg { width: 16px; height: 16px; flex: none; }
.cust-line span { overflow-wrap: anywhere; }
.cust-line.addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* نشانی روی همان خط موبایل؛ بلند باشد کوتاه می‌شود (کامل در پنل ویرایش) */
.cust-line.ok { color: var(--brand-ink); }
.deal-pin { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 14%, var(--card)); }
.deal-pin svg { width: 16px; height: 16px; }
.deal-pin { align-self: flex-start; margin-top: 2px; } /* پیش‌فاکتور (فاز ۴): کنار کادر مانده، هم‌تراز بالای آن؛ رنگ برند (کنتراست آزموده) */
.cust.compact .deal-pin { margin-top: 0; }
/* نوار تاریخچه‌ی ویزیت (فاز ۵): ثابت چپ‌به‌راست، فشرده، غیرتعاملی؛ پیش‌فاکتور = رنگ برند، بدون خرید = خنثی */
.cust-hist { flex: none; display: inline-flex; align-items: center; gap: 4px; direction: ltr; }
.hist-ico { display: inline-flex; } .hist-ico svg { width: 16px; height: 16px; }
.hist-ico.deal { color: var(--brand-ink); } .hist-ico.none { color: var(--muted); }
.cust.compact .hist-ico svg { width: 14px; height: 14px; } .cust.compact .cust-foot.grid .cust-hist { grid-column: 2; justify-self: end; }
.cust-notes { display: grid; gap: 6px; }
.cust-note { font-size: 13px; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 7%, var(--card)); overflow-wrap: anywhere; }
.cust-note.temp { background: color-mix(in srgb, var(--warn) 18%, var(--card)); border-inline-start: 3px solid var(--warn); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 6px; text-align: center; }
.stat small { display: block; color: var(--muted); font-size: 12px; }
.stat b { display: block; margin-top: 2px; font-size: 15px; }
.stat b.bad { color: var(--bad-ink); } .stat b.ok { color: var(--brand-ink); }
.alert-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; margin-bottom: 10px; font-size: 13px; border: 1px solid var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--card)); color: var(--bad-ink); }
.alert-bar svg { width: 22px; height: 22px; flex: none; }
.alert-bar small { display: block; opacity: .85; }
.tag.d { background: color-mix(in srgb, var(--c) 18%, var(--card)); color: var(--text); box-shadow: inset 0 0 0 1px var(--c); }
.filters { display: flex; gap: 8px; padding: 4px 2px 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } /* ردیف دوم فیلترها؛ برای مشتری‌ها و نقشه یکسان */
.filters::-webkit-scrollbar { display: none; }
.filters .chip-btn { position: relative; min-height: 36px; padding: 3px 12px; } /* کوتاه‌تر از چیپ روز؛ سطح لمس با ::before به ۴۴px می‌رسد */
.filters .chip-btn::before { content: ''; position: absolute; inset: -4px 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag { font-size: 12px; line-height: 1.6; padding: 1px 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, var(--card)); }
.tag.bad { background: color-mix(in srgb, var(--bad) 14%, var(--card)); color: var(--bad-ink); }
.tag.ok { background: color-mix(in srgb, var(--brand) 16%, var(--card)); color: var(--brand-ink); }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.days button { min-height: 44px; padding: 8px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 13px; transition: background var(--t), color var(--t); }
.days button { --c: var(--brand-strong); }
.days button[aria-pressed=true] { background: color-mix(in srgb, var(--c) 18%, var(--card)); color: var(--text); font-weight: 700; border: 2px solid var(--c); padding: 7px 0; }
.days button:disabled { opacity: .4; }
a.btn { display: grid; grid-auto-flow: column; place-content: center; gap: 8px; text-decoration: none; }
.btn.sm { height: 44px; display: grid; grid-auto-flow: column; place-content: center; gap: 8px; }
.btn.visit { display: grid; grid-auto-flow: column; place-content: center; gap: 8px; }
.btn.visit.on { background: color-mix(in srgb, var(--brand) 16%, var(--card)); color: var(--brand-ink); border: 1px solid var(--brand); }
.btn-row { display: flex; gap: 8px; } .btn-row > * { flex: 1; }
.btn-row > .btn.sm { min-width: 0; gap: 6px; padding-inline: 4px; white-space: nowrap; } /* سه دکمه‌ی ردیف دوم پنل ارتباط («تحویل بار») در یک خط بماند */
.check { display: flex; align-items: center; gap: 10px; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); }
.field textarea { width: 100%; min-height: 84px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); padding: 10px 14px; font: inherit; resize: vertical; }
.field textarea:focus { outline: 2px solid var(--brand); border-color: transparent; }
.field[hidden] { display: none; }

/* کارت مشتری (مثل نوروز قدیمی): بالا نام و مانده، خط موبایل+نشانی، یادداشت‌ها، پایین ویزیت/تحویل بار (راست) و آخرین پرداخت (چپ) */
.cust { --c: var(--line); position: relative; display: grid; gap: 8px; background: var(--card); border: 1px solid var(--line); border-inline-start: 5px solid var(--c);
  border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cust input, .cust textarea { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
.cust.swiping { transition: none; will-change: transform; }
.cust.spring-back { transition: transform .46s cubic-bezier(.34, 1.56, .64, 1); }
.cust-hint { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--t); }
.cust.swiping.dir-r .cust-hint { opacity: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%); }
.cust.swiping.dir-l .cust-hint { opacity: 1; background: linear-gradient(270deg, color-mix(in srgb, var(--warn) 18%, transparent), transparent 55%); }
.cust-top { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cust-top:active { opacity: .85; }
.cust-top .row-text { flex: 1; min-width: 0; }
.cust-meta { display: flex; align-items: center; gap: 4px 14px; min-width: 0; }
.cust-meta .cust-line { min-width: 0; }
.cust-meta .cust-line:not(.addr) { flex: none; white-space: nowrap; }
.cust-meta .cust-line.addr { flex: 1; }
.cust-foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.foot-main { flex: 1; min-width: 0; display: grid; gap: 4px; }

/* نور سبزِ متحرک روی خط نقطه‌چین: نشانِ «امروز ویزیت شد» (به‌جای دایره‌ی تیک) */
.cust.visited .cust-foot::before { content: ''; position: absolute; top: -1px; inset-inline: 0; height: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 88%, transparent), transparent); background-size: 55% 100%; background-repeat: no-repeat; background-position: -60% 0;
  box-shadow: 0 0 9px 1.5px color-mix(in srgb, var(--brand) 65%, transparent); filter: brightness(1.3); animation: footGlow 4.2s ease-in-out infinite; }
/* ویزیتِ نارنجی (نبود مسئول فروش): همان نور و حرکت، فقط رنگ */
.cust.visited.norep .cust-foot::before { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--warn-line) 88%, transparent), transparent);
  box-shadow: 0 0 9px 1.5px color-mix(in srgb, var(--warn-line) 65%, transparent); }
@keyframes footGlow { 0% { background-position: -60% 0; opacity: 0; } 12% { opacity: 1; } 50% { background-position: 145% 0; opacity: 1; } 88% { opacity: 0; } 100% { background-position: 160% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cust.visited .cust-foot::before { animation: none; background-position: 50% 0; opacity: .9; } } /* بدون حرکت: همان نور، ثابت (قاعده‌ی عمومی * به pseudo-element نمی‌رسد) */
/* K۴الف کارت فشرده (زیر نقشه): همان اطلاعات کارت کامل با فاصله‌ی کمتر؛ فونت ≥۱۲px، فقط توکن‌های موجود */
.cust.compact { gap: 5px; padding: 8px 10px; }
.cust.compact .cust-top { gap: 8px; }
.cust.compact .balance { padding: 2px 9px; font-size: 13px; }
.cust.compact .bal-delta { font-size: 12px; } .cust.compact .bal-when { font-size: 10.5px; }
.cust.compact .cust-line { font-size: 12px; gap: 5px; }
.cust.compact .cust-line svg { width: 14px; height: 14px; }
.cust.compact .cust-note { font-size: 12px; padding: 3px 8px; }
.cust.compact .cust-notes { gap: 4px; }
.cust.compact .cust-foot.grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 4px 10px; padding-top: 5px; }
.cust.just-visited { animation: visitPop 1.3s ease; }
/* کارتِ مقصدِ مسیریابیِ فعال (customers.js ← .nav-dest): خطِ باریکِ دورِ کارت هم‌رنگِ روز، و آیکونِ موقعیتِ روی کارت رنگی و بزرگ‌تر؛ مشتری بی‌روز = رنگِ برند. رنگ فقط حاشیه/آیکون است، نه متن */
.cust.nav-dest { --dc: var(--c); border-color: var(--dc); box-shadow: inset 0 0 0 .5px var(--dc); }
.cust.nav-dest:not([style*="--c"]) { --dc: var(--brand); }
.cust.nav-dest .cust-line.geo .ico { color: var(--dc); }
.cust.nav-dest .cust-line.geo svg { width: 22px; height: 22px; stroke-width: 2.1; }
@keyframes visitPop { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent); } 35% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand) 16%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

/* پنل‌های داخل کارت (اسوایپ): باز و بسته‌شدن نرم با grid-template-rows؛ بدون محاسبه‌ی ارتفاع با جاوااسکریپت */
.cust-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .28s var(--ease), opacity .2s; }
.cust-panel.open { grid-template-rows: 1fr; opacity: 1; }
.cust-panel-in { min-height: 0; overflow: hidden; }
.cust-panel-body { display: grid; gap: 12px; border-top: 1px dashed var(--line); padding: 10px 2px 2px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-head b { font-size: 14px; }
.panel-x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: color-mix(in srgb, var(--text) 7%, var(--card)); }
.panel-x svg { width: 16px; height: 16px; }
.panel-sec { display: grid; gap: 8px; } .panel-sec > small { font-size: 12px; color: var(--muted); }
.panel-ta { width: 100%; min-height: 60px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 8px 12px; font: inherit; resize: vertical; }
.panel-ta:focus { outline: 2px solid var(--brand); border-color: transparent; }
.panel-dyn { display: grid; gap: 12px; }
.panel-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .panel-sub > small { font-size: 12px; color: var(--muted); }
.link-btn { font-size: 12px; color: var(--brand-ink); padding: 4px 6px; min-height: 44px; }
/* سه‌دکمه‌ی ویزیت (K۲؛ screens/visit-actions.js): پیش‌فاکتور · نداشتن خرید · نبود مسئول فروش (راست → چپ). رنگ‌ها همان جفت‌های سنجیده‌ی .btn و نارنجی ویزیت (--warn-line فقط حاشیه/زمینه‌ی ۱۸٪، متن عادی) */
.vt-box { display: grid; gap: 8px; }
.vt-box .panel-dyn { gap: 4px; }
.vtrio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .vtrio.stack { grid-template-columns: 1fr; }
.vt { min-height: 56px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 6px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; transition: transform var(--t) var(--ease), opacity var(--t); }
.vt:active { transform: scale(.97); } .vt:disabled { opacity: .5; }
.vt .ico svg { width: 18px; height: 18px; }
.vt.sale { background: var(--brand-strong); color: var(--on-brand); border-color: transparent; }
.vt.norep { background: color-mix(in srgb, var(--warn-line) 18%, var(--card)); border-color: var(--warn-line); }
.vtrio.flat { gap: 8px; } /* پنل ارتباط: همان ظاهر ردیف دوم (btn ghost sm)؛ فقط اجازه‌ی شکستن متنِ بلند (نبود مسئول فروش) */
.vtrio.flat .btn.sm { min-width: 0; height: auto; min-height: 44px; gap: 6px; padding: 4px 6px; font-size: 13px; line-height: 1.25; white-space: normal; text-align: center; }
.vtrio.flat .btn.sm.wide { grid-column: 1 / -1; }
.btn.vtb.on { background: color-mix(in srgb, var(--brand) 16%, var(--card)); color: var(--brand-ink); border-color: var(--brand); } /* دکمه‌ای که ویزیتِ امروز با آن ثبت شده (هم‌رنگ .btn.visit.on) */
.btn.vtb.norep.on { background: color-mix(in srgb, var(--warn-line) 18%, var(--card)); color: var(--text); border-color: var(--warn-line); }
.vt.on { background: color-mix(in srgb, var(--brand) 16%, var(--card)); border-color: var(--brand); } .vt.norep.on { border-width: 2px; }
.vt.wide { min-height: 48px; grid-auto-flow: column; justify-content: center; gap: 8px; }
.panel-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn.ghost.geo-btn { color: var(--muted); } .btn.ghost.geo-btn.set { color: var(--brand-ink); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); } /* «ثبت موقعیت»: بی‌رنگ تا ثبت، رنگی بعد از ثبت */
.addr-row { display: flex; gap: 8px; align-items: flex-end; } .addr-row .panel-f { flex: 1; min-width: 0; }
.addr-row .panel-ta { min-height: 44px; max-height: calc(3 * 1.5em + 18px); line-height: 1.5; resize: none; overflow-y: auto; } /* E۱: یک خط؛ با تایپ تا ۳ خط (autogrow در panel-kit.js) */
.addr-row .btn { flex: none; width: auto; height: 44px; padding-inline: 12px; gap: 6px; }
.note-row { display: flex; gap: 8px; align-items: flex-start; } .note-row .panel-ta { flex: 1; min-width: 0; min-height: 44px; max-height: calc(3 * 1.5em + 18px); line-height: 1.5; resize: none; overflow-y: auto; } .note-row .btn { flex: none; width: auto; min-width: 84px; height: 44px; padding-inline: 14px; gap: 6px; } /* ردیف ۱ یادداشت موقت: «ثبت» (راست) + کادر؛ هم‌قد دکمه‌های ردیف پنل */

/* دوبار ضربه: کل کارت به دو نیمه‌ی توپُر تبدیل می‌شود (راست = ویزیت، چپ = تحویل بار) */
.cust.choice-active { z-index: 9; animation: choiceHalo 1.7s ease-in-out infinite; }
@keyframes choiceHalo {
  0%, 100% { box-shadow: 0 10px 26px rgb(0 0 0 / .22), 0 0 0 3px color-mix(in srgb, var(--warn) 38%, transparent); }
  50% { box-shadow: 0 10px 26px rgb(0 0 0 / .22), 0 0 0 3px color-mix(in srgb, var(--warn) 60%, transparent), 0 0 24px 5px color-mix(in srgb, var(--warn) 40%, transparent); }
}
.cust-pop { position: absolute; inset: 0; z-index: 8; display: flex; gap: 5px; padding: 4px; border-radius: inherit; background: var(--card); }
.vcp-half { flex: 1 1 50%; min-width: 0; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px;
  border-radius: calc(var(--r) - 6px); color: #fff; font-weight: 800; font-size: 14px; line-height: 1.3; text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 3px 10px rgb(0 0 0 / .16), inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -2px 4px rgb(0 0 0 / .12);
  transition: filter var(--t), transform var(--t); animation: vcpPop .3s var(--ease) both; }
.vcp-half:nth-child(2) { animation-delay: .05s; }
.vcp-half::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / .08), transparent 50%); }
.vcp-half:active { filter: brightness(.92); transform: scale(.97); }
.vcp-half .ico svg, .vcp-half span, .vcp-half small { position: relative; }
.vcp-half small { font-size: 11px; font-weight: 500; opacity: .9; }
.vcp-yes { background: linear-gradient(150deg, color-mix(in srgb, var(--brand-strong) 90%, #000), color-mix(in srgb, var(--brand-strong) 78%, #000) 65%); color: var(--on-brand); }
.vcp-undo { background: linear-gradient(150deg, #5b6570, #48515c 65%); }
.vcp-load { background: linear-gradient(150deg, #a84e08, #964407 65%); }
.vcp-load.soon { filter: saturate(.5); opacity: .8; }
.cust-pop.closing .vcp-half { animation: none; opacity: 0; transition: opacity .16s; }
/* K۳ مرحله‌ی ۲ دوبار ضربه: سه‌دکمه‌ی ویزیت کل کارت را پر می‌کند؛ زیرمرحله‌ی بدهکار اگر از کارت بلندتر شد اسکرول می‌شود */
.cust-pop.step2 { overflow-y: auto; }
.cust-pop .vt-box { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; }
.cust-pop .vt-box > .vtrio, .cust-pop .vt-box > .panel-dyn { flex: 1 1 auto; }
.cust-pop .vt-box > .panel-dyn { display: flex; flex-direction: column; justify-content: center; }
.cust-pop .vtrio:not(.stack) .vt { min-height: 76px; }
@keyframes vcpPop { from { opacity: 0; transform: scale(.92); } }

/* v1.3.0: فیلدهای پنل ویرایش، دکمه‌ی «نمایش بیشتر» (نگهبان اسکرول بی‌نهایت) */
.panel-f { display: grid; gap: 4px; } .panel-f > small { font-size: 12px; color: var(--muted); }
.panel-in { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 0 12px; font: inherit; }
.panel-in:focus { outline: 2px solid var(--brand); border-color: transparent; }
.panel-in[dir=ltr] { text-align: right; }
.btn.more { width: 100%; margin-top: 8px; color: var(--muted); }
.btn.danger.sm { background: transparent; }

/* فاز ۶: کالاها و پیش‌فاکتور */
.row-item.prod { width: 100%; text-align: start; }
.row-item.prod .row-text { flex: 1; }
.prod-desc { font-size: 12px; line-height: 1.5; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* توضیح کالا: حداکثر دو خط */
.prod-img { position: relative; flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; color: var(--muted); background: color-mix(in srgb, var(--text) 7%, var(--card)); border: 1px solid var(--line); } /* تصویر کالا؛ آیکون جعبه تا بارگذاری/در نبودنِ عکس */
.prod-dbg { white-space: pre-wrap; word-break: break-all; user-select: text; font-size: 11px; line-height: 1.5; text-align: left; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--text) 7%, var(--card)); } /* عیب‌یابی موقت عکس کالا */
.prod-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--card); }
.prod-side { display: grid; justify-items: end; gap: 2px; flex: none; }
.prod-side b { font-size: 14px; }
.pf-list { display: grid; gap: 10px; }
.pf-newbox:not(:empty) { margin-bottom: 10px; }
.pf-new { outline: 1.5px solid color-mix(in srgb, var(--brand) 45%, transparent); }
.pf-card { display: grid; padding: 0; }
.pf-head { display: grid; gap: 4px; width: 100%; text-align: start; padding: 12px 16px; transition: transform var(--t) var(--ease); }
.pf-head:active { transform: scale(.99); }
.pf-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pf-top b:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-amount { color: var(--brand-ink); flex: none; }
.pf-price { display: grid; justify-items: end; gap: 1px; flex: none; line-height: 1.35; }
.pf-old { position: relative; display: inline-block; font: inherit; font-weight: 700; color: var(--muted); text-decoration: none; } /* قیمت اصلی: هم‌اندازه و هم‌رنگ قیمت نهایی؛ خط قرمزِ باریک و کج (۱.۲px، ۸- درجه) به‌جای خط‌خورده‌ی صاف */
.pf-old::after { content: ''; position: absolute; inset-inline: -2px; top: 50%; height: 1.2px; background: var(--bad); border-radius: 1px; transform: rotate(-8deg); pointer-events: none; }
.pf-note { min-height: 44px; max-height: calc(8 * 1.5em + 18px); line-height: 1.5; resize: none; overflow-y: auto; } /* یادداشت پیش‌فاکتور: از یک خط، با متن بزرگ و کوچک می‌شود */
.pf-off { font-size: 12px; font-weight: 700; color: var(--brand-ink); }
.pf-meta { color: var(--muted); }
.pf-num { width: 100%; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 0 10px; font: inherit; text-align: center; }
.pf-num:focus { outline: 2px solid var(--brand); border-color: transparent; }
.pf-num.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--bg)); }
.pfp { display: grid; gap: 8px; border-top: 1px dashed var(--line); padding: 10px 14px 14px; }
.cust > .cust-panel .pfp { padding: 10px 2px 2px; } /* ثبت پیش‌فاکتور درون‌کارتِ مشتری (K۲ب): خودِ کارت padding دارد، مثل cust-panel-body */
.pfp-lines { display: grid; }
/* قلم فشرده: سه ردیف کم‌ارتفاع (سر، چیپ‌ها، فیلدها)؛ هدف لمس عمداً کوچک‌تر از ۴۴px (خواست کاربر) */
.pfp-line { position: relative; display: grid; gap: 0; padding: 6px 18px; border-bottom: 1px dashed var(--line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pfp-line:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 12px; }
/* نشانه‌ی ظریف ژست: ضربه روی لبه‌ی راست = زیاد، لبه‌ی چپ = کم (بدون دکمه) */
/* +/− در مرکزِ فضای خالیِ دو کنارِ چیپ‌ها/فیلدها (ستون‌های ۲×۱۲۴px + فاصله = ۲۵۶px وسط‌چین)؛ بالا-پایینِ ناحیه‌ی بازشده */
.pfp-more-in { position: relative; }
.pfp-more-in::before, .pfp-more-in::after { position: absolute; top: 50%; translate: 0 -50%; font-size: 22px; font-weight: 700; line-height: 1; color: var(--muted); opacity: .45; pointer-events: none; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease), color var(--t) var(--ease); }
.pfp-more-in::before { content: '+'; right: max(14px, calc((100% - 256px) / 4)); margin-right: -.3em; }
.pfp-more-in::after { content: '−'; left: max(14px, calc((100% - 256px) / 4)); margin-left: -.3em; }
.pfp-line.hit-p .pfp-more-in::before, .pfp-line.hit-m .pfp-more-in::after { opacity: 1; transform: scale(1.5); }
.pfp-line.hit-p .pfp-more-in::before { color: var(--brand-ink); }
.pfp-line.hit-m .pfp-more-in::after { color: var(--bad-ink); }
/* نورِ کناری: سبز = زیاد (راست)، قرمز = کم (چپ)؛ سریع می‌آید و محو می‌شود */
/* نورِ پس‌زمینه تا ۳۰٪ عرضِ قلم از همان کناره؛ لایه‌ی شفافِ روی قلم (بدون اثر بر لمس) که فقط opacity‌اش محو می‌شود */
.pfp-line::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.pfp-line.hit-p::after { background: linear-gradient(to left, color-mix(in srgb, var(--brand) 45%, transparent), transparent 30%); animation: pfp-glow .6s var(--ease) both; }
.pfp-line.hit-m::after { background: linear-gradient(to right, color-mix(in srgb, var(--bad) 45%, transparent), transparent 30%); animation: pfp-glow .6s var(--ease) both; }
@keyframes pfp-glow { 0% { opacity: 1; } 100% { opacity: 0; } }
/* عددِ تعداد: زیاد = از پایین بالا می‌آید، کم = از بالا پایین؛ با کمی بزرگ‌نمایی */
.pfp-qn { display: inline; font: inherit; } .pfp-qn.bump-p, .pfp-qn.bump-m { display: inline-block; } /* عدد تعداد هم‌خط و هم‌اندازه‌ی متن واحد؛ فقط هنگام انیمیشن inline-block */
.pfp-qn.bump-p { animation: pfp-bump-p .38s var(--ease); }
.pfp-qn.bump-m { animation: pfp-bump-m .38s var(--ease); }
@keyframes pfp-bump-p { 0% { transform: translateY(70%) scale(1.5); opacity: 0; color: var(--brand-ink); } 100% { transform: none; opacity: 1; } }
@keyframes pfp-bump-m { 0% { transform: translateY(-70%) scale(1.5); opacity: 0; color: var(--bad-ink); } 100% { transform: none; opacity: 1; } }
/* قطعه‌ی انتخابیِ «کارتن / عدد»: شبیه دکمه‌ی انتخابی؛ کارتن فعال، عدد تا آمدن فروش عددی غیرفعال */
.pfp-line:last-child { border-bottom: 0; }

.pfp-head { display: flex; align-items: center; gap: 8px; }

.pfp .pf-num.pfp-q { flex: none; width: 48px; height: 34px; font-weight: 700; font-size: 14px; border-color: var(--brand-strong); border-radius: 10px; }
.pfp-price { display: flex; align-items: center; gap: 8px; flex: none; }
.pfp-name .pfp-qty { color: var(--muted); white-space: nowrap; }
.pfp-price { margin-inline-start: auto; }
.pfp-head .pfp-name > b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* چیپ‌ها و فیلدهای تخفیف وسط‌چین و باریک‌اند تا دو کناره (زیر تعداد و زیر جمع) خالی بماند و ضربه‌ی زیاد/کم راحت باشد */
/* قلم پیش‌فاکتور: بسته = فقط نام و قیمت؛ لمس = باز شدن چیپ‌ها/فیلدهای تخفیف و نشانه‌های +/− (مثل قبل)؛ باز/بسته نرم با grid-template-rows */
.pfp-head { cursor: pointer; min-height: 32px; }
.pfp-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.pfp-more.open { grid-template-rows: 1fr; }
.pfp-more-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .28s; }
.pfp-more.open .pfp-more-in { visibility: visible; transition-delay: 0s; }
.pfp-more.open .pfp-more-in { padding-top: 4px; }
.pfp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 124px)); justify-content: center; gap: 4px 8px; } /* باریک و وسط‌چین */
/* چیپ قیمت (هم‌سبکِ چیپ روزهای هفته): فقط یکی فعال است؛ فعال = زمینه‌ی کم‌رنگ + حاشیه‌ی رنگی، غیرفعال = بی‌رنگ. چیپ توپر نیست تا جلب توجه نکند */


.pfp-chip { justify-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 28px; padding: 0 3px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 11px; white-space: nowrap; min-width: 0; overflow: hidden; font-size: 10.5px; }


.pfp-chip b { font-size: 10.5px; }
.pfp-chip.on { border-color: color-mix(in srgb, var(--brand-strong) 65%, var(--line)); color: var(--text); font-weight: 700; } /* فعال = فقط حاشیه‌ی رنگیِ ظریف، بدون زمینه و بدون تغییر اندازه */


.pfp-chip.off { opacity: .5; }

/* فیلد تخفیف: ورودی + کلید دوحالته‌ی [درصد | مبلغ] چسبیده به آن */

.pfp-dfield { display: flex; align-items: stretch; height: 36px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.pfp-dfield.has { border-color: color-mix(in srgb, var(--brand-strong) 65%, var(--line)); } /* فقط فیلدِ دارای مقدار: حاشیه‌ی رنگیِ ظریف، بدون زمینه */
.pfp-dfield:focus-within { outline: 2px solid var(--brand); border-color: transparent; }

.pfp .pfp-dfield .pf-num { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; background: transparent; text-align: start; padding: 0 5px; font-size: 12px; }
.pfp .pfp-dfield .pf-num:focus { outline: 0; }


.pfp-segb { flex: none; width: 26px; height: 36px; display: grid; place-items: center; color: var(--muted); transition: background var(--t) var(--ease), color var(--t) var(--ease); }


.pfp-segb .ico, .pfp-segb svg { width: 16px; height: 16px; }
.pfp-segb.on { background: color-mix(in srgb, var(--muted) 16%, var(--card)); color: var(--text); }
.pfp-dfield.has .pfp-segb.on { color: var(--brand-ink); }
.pfp-dfield.off { opacity: .5; }
.pfp-dfield.off .pf-num { pointer-events: none; }
.pfp-line-head { display: flex; align-items: center; gap: 8px; }
.pfp-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.pfp-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfp-name small { color: var(--muted); flex: none; }
.pfp-line-total { flex: none; font-size: 14px; color: var(--brand-ink); }
.pfp .pf-num { height: 44px; padding: 0 4px; font-size: 14px; }
.pfp-warn { color: var(--bad-ink); }
.pfp-disc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pfp-disc-row .pfp-dfield { width: 150px; }
.pfp-total { display: grid; gap: 2px; }
.pfp-sub { color: var(--muted); }
.pfp-final { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.pfp-adder, .pfp-results { display: grid; gap: 6px; }
.pfp-adder:empty { display: none; }
.pfp-prod { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; text-align: start; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.pfp-prod-side { display: grid; justify-items: end; flex: none; }
.pfp-prod-side small { color: var(--muted); }
.pfp-cust { display: grid; gap: 6px; }
.pfp-cust:empty { display: none; }
.pfp-who { width: 100%; }
.pfp-change { color: var(--brand-ink); flex: none; }
.pfp-prod-side .pfp-warn { color: var(--bad-ink); }
@media (prefers-reduced-motion: reduce) { .pfp-more { transition: none; } .pf-head, .pfp-segb, .pfp-more-in::before, .pfp-more-in::after { transition: none; } .pfp-line.hit-p::after, .pfp-line.hit-m::after, .pfp-qn.bump-p, .pfp-qn.bump-m { animation: none; } }

/* U۴: کارت‌های بالای صفحه (مخاطب جدید، یادداشت سریع) و اجزای فشرده‌ی پنل */
.panel-ta.one { min-height: 44px; resize: none; }
.panel-ta.one.grow { max-height: calc(5 * 1.5em + 18px); line-height: 1.5; overflow-y: auto; } /* یادداشت پنل ویرایش: تک‌خطی، با تایپ تا ۵ خط */
.panel-more { border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; font-size: 13px; }
.panel-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--muted); list-style-position: inside; }
.panel-more[open] { padding-bottom: 12px; } .panel-more[open] > summary { margin-bottom: 8px; }
.note-fields { gap: 8px; }
.note-opts { display: flex; align-items: center; gap: 12px; min-height: 44px; } .note-opts .panel-in { flex: 1; min-width: 0; }
.pick-contact { width: 100%; text-align: start; min-height: 56px; }
.cust.found { animation: foundPulse 1.6s ease; }
@keyframes foundPulse { 0%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 55%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .cust.found { animation: none; outline: 2px solid var(--brand); } }
.pf-card > .cust-panel .cust-panel-body { padding: 10px 14px 14px; } /* پنل داخل کارت‌های بالای صفحه (کارتِ pf-card بدون padding است) */

/* پنل گسترش‌شونده‌ی زیر هدر (U۵): مخاطب فعال و وضعیت همگام‌سازی؛ جایگزین برگه‌ی پایین‌بازشو */
.icon-btn[aria-expanded=true] { background: rgb(255 255 255 / .34); }
.hp-host { background: var(--bg); } /* پشت گوشه‌های گرد پایینِ پنل سبزِ هدر دیده نشود */
.hp { background: var(--card); color: var(--text); border-radius: 0 0 22px 22px; }
.hp-scroll { display: grid; gap: 10px; align-content: start; max-height: 62vh; max-height: 62dvh; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 2px; }
.hp-scroll .row-item:last-child { border-bottom: 0; } .hp-scroll .row-text small { white-space: normal; }
.hp-sync { display: grid; gap: 2px; }
.hp-grip { width: 100%; height: 44px; display: grid; place-items: center; } /* نوار پایین پنل: ضربه یا کشیدن به بالا = بستن */
.hp-grip::before { content: ''; width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
.hp-status { width: 100%; min-height: 52px; text-align: start; } .hp-status > .ico:last-child { color: var(--muted); flex: none; }
.hp-self { min-height: 44px; flex: none; }
.pk-slot { min-height: 56px; } /* فاز ۹: ردیف مخاطب فعال ↔ کادر جستجو بدون پرش ارتفاع */
.pk-active { min-height: 56px; border-radius: var(--r); } .pk-active:active { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.pk-cue { margin-inline-start: auto; flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--muted); opacity: .7; } .pk-cue .ico svg { width: 18px; height: 18px; }
.pk-slot .contact-search { padding: 0; }
.hp-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, var(--card)); color: var(--brand-ink); transition: transform var(--t) var(--ease), background var(--t); }
.hp-ico .ico svg { width: 20px; height: 20px; } .hp-ico:active { transform: scale(.92); }
.hp-ico.danger { background: color-mix(in srgb, var(--bad) 12%, var(--card)); color: var(--bad-ink); }
.hp-ico.danger.armed { background: var(--bad); color: #fff; }

/* نقشه (۷الف) */
.screen:has(.map-page) { padding: 20px 8px 0; display: flex; flex-direction: column; overflow: hidden; } /* بالا ۲۰px مثل .screen؛ کناره‌ی نوار فیلتر با padding-inline ۸px به ۱۶px می‌رسد */
.map-page { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.map-box { flex: 1; min-height: 240px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); z-index: 0; }
/* فاز ۱۳: .map-stage والدِ مشترکِ نقشه و کارت است. کارت فشرده‌ی مشتری روی پایینِ نقشه شناور است (نقشه با باز/بسته‌شدنش کوچک/بزرگ نمی‌شود)؛
   bottom ۲۶px (= CARD_BOTTOM در screens/map.js) تا نوشته‌ی حق‌نشرِ نقشه دیده بماند؛ کنترل‌های بالا-چپ دور از آن‌اند. سقف ارتفاع ۷۰٪ نقشه و بعد از آن اسکرول داخلی.
   overflow-x پنهان: اسوایپ کارت نوار افقی نسازد. سایه روی خودِ ظرف است تا برش نخورد؛ پس‌زمینه و حاشیه از خودِ .cust (هر دو تم). */
.map-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.map-card { position: absolute; inset-inline: 8px; bottom: 26px; z-index: 5; max-height: 70%; overflow: hidden auto; border-radius: var(--r); box-shadow: 0 6px 22px rgb(0 0 0 / .3); }
.map-card[hidden] { display: none; }
.map-card .cust { margin-bottom: 0; }
/* پنل رو به بالا (کلاس up را createCardLayers با گزینه‌ی up می‌گذارد): پنل در شبکه‌ی کارت اول می‌آید و چون کارت پایین لنگر است، با بازشدن به بالا رشد می‌کند؛ خط‌چینِ جداکننده زیر پنل */
.cust > .cust-panel.up { order: -1; }
.cust-panel.up .cust-panel-body { border-top: 0; border-bottom: 1px dashed var(--line); padding: 2px 2px 10px; }
.cust > .cust-panel.up .pfp { padding: 2px 2px 10px; }
/* دکمه‌های روی نقشه (همه‌ی `.map-btn`ها؛ خواست کاربر): شیشه‌ای و دایره‌ای ۴۴px مثل `.icon-btn` هدر (حاشیه‌ی `--glass-line`، بلور، آیکون سفید).
   شیشه‌ی سفید ۱۶٪ هدر روی کاشی‌های روشن نقشه دیده نمی‌شود؛ پس زمینه = شیشه‌ی دودیِ خنثی `--map-glass` (بدون سبز) تا آیکون سفید روی کاشی سفید هم ≥۳:۱ بماند.
   روشن (`aria-pressed=true`) = شیشه‌ی دودی‌تر + حلقه‌ی سفید ۲px (نه روشن‌تر؛ مثل `--glass-hi`) تا فرقش فقط به رنگ نباشد. هر دکمه‌ی تازه‌ی روی نقشه همین کلاس را بگیرد. */
.map-ctl { display: flex; flex-direction: column; gap: 8px; }
.map-btn { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 0; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(150deg, rgb(255 255 255 / .1), rgb(255 255 255 / 0) 55%), var(--map-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 rgb(255 255 255 / .28), 0 2px 10px rgb(0 0 0 / .25);
  transition: transform var(--t) var(--ease), background var(--t), box-shadow var(--t); }
.map-btn:active { transform: scale(.9); }
.map-btn .ico svg { width: 22px; height: 22px; }
.map-btn[aria-pressed=true] { background: linear-gradient(rgb(0 0 0 / .22), rgb(0 0 0 / .22)), var(--map-glass); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .92), 0 2px 8px rgb(0 0 0 / .3); }
/* «موقعیت من»: پایین-راستِ نقشه، فرزندِ `.map-stage` (نه کنترل Leaflet) تا رویِ کارتِ شناور بیاید؛ `right` فیزیکی عمداً است (در RTL، inset-inline-end = چپ).
   `--lift` را screens/map.js (locateLift) از ارتفاع کارت می‌گذارد تا دکمه همیشه بالای کارت بماند؛ bottom ۲۶px = پایین کارت (بالای نوشته‌ی حق‌نشر). */
.map-locate { position: absolute; right: 10px; bottom: calc(26px + var(--lift, 0px)); z-index: 6; transition: bottom .16s var(--ease), transform var(--t) var(--ease), background var(--t), box-shadow var(--t); }
.map-locate[hidden] { display: none; }
/* قطب‌نما: بالا-راستِ نقشه (right فیزیکی)، دکمه‌ی شیشه‌ای مثل بقیه؛ سوزن (.ico) با زاویه‌ی شمال می‌چرخد (transform از screens/map.js)؛ ضربه = برگشت نرم به شمال */
.map-compass { position: absolute; top: 10px; right: 10px; z-index: 6; }
.map-compass[hidden] { display: none; }
.map-compass .ico { display: grid; place-items: center; will-change: transform; }
.map-locate[aria-busy=true] .ico { animation: locBusy 1s ease-in-out infinite; }
/* ردیابی روشن (دنبال‌کردنِ موقعیت من): حلقه‌ی نبضیِ آرام دور دکمه تا وقتی روشن است؛ فقط transform/opacity. بدون حرکت: حلقه‌ی ثابت */
.map-locate[aria-pressed=true]::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; pointer-events: none; animation: locPulse 1.8s ease-out infinite; }
@keyframes locPulse { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-locate[aria-pressed=true]::after { animation: none; transform: scale(1.25); opacity: .55; } }
@keyframes locBusy { 50% { opacity: .35; } }
/* مسیریابی زنده روی نقشه (فاز ۳): خط‌ها در pane اختصاصیِ بالای کاشی و زیرِ مارکرها (js/route-layer.js)؛ رنگ فقط از توکن */
.route-left { stroke: var(--route); stroke-opacity: 1; fill: none; pointer-events: none; }
.route-done { stroke: var(--route-done); stroke-opacity: .9; fill: none; pointer-events: none; }
/* مسیر همکاران (فاز ۶): نازک‌تر و کم‌رنگ‌تر از مسیرِ خودم، رنگِ جدا؛ طی‌شده همان خاکستری */
.route-peer-left { stroke: var(--route-peer); stroke-opacity: .8; fill: none; pointer-events: none; }
.route-peer-done { stroke: var(--route-done); stroke-opacity: .55; fill: none; pointer-events: none; }
.route-peer-dest { fill: var(--route-peer); fill-opacity: 1; stroke: none; pointer-events: none; }
.ppl-lbl .ppl-nav { color: var(--route-peer); }
/* نوار مسیریابی (فاز ۳ و ۵): شیشه‌ای مثل دکمه‌های نقشه، هم‌ارتفاعِ «موقعیت من» (۴۴px) و کنارِ آن؛ `left` فیزیکی تا جای دکمه‌ی راست آزاد بماند.
   از راست (RTL): «قبلی» · اطلاعات (`.map-nav-i`) · «بعدی»؛ دکمه‌ها فقط با «نزدیک‌ترین» روشن (`hidden`) و جای/اندازه‌ی نوار ثابت می‌ماند (پرش ندارد). */
.map-nav { position: absolute; left: 8px; right: 64px; bottom: calc(26px + var(--lift, 0px)); z-index: 6; min-height: 44px; box-sizing: border-box; padding: 0 4px; border-radius: 22px; color: #fff; display: flex; align-items: center; gap: 2px; direction: rtl;
  background: var(--map-glass-nav); /* متن ۱۲–۱۳px: غلیظ‌تر از دکمه‌ی نقشه تا روی کاشیِ سفید هم ≥۴٫۵:۱ بماند (scripts/contrast.mjs) */
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 rgb(255 255 255 / .28), 0 2px 10px rgb(0 0 0 / .25);
  transition: bottom .16s var(--ease), opacity var(--t); }
.map-nav[hidden] { display: none; }
.map-nav-i { flex: 1; min-width: 0; align-self: stretch; box-sizing: border-box; padding: 4px 10px; display: grid; align-content: center; gap: 0; border-radius: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--t) var(--ease); }
.map-nav-i:active { transform: scale(.98); }
.map-nav-i[tabindex="-1"] { cursor: default; }
.map-nav-t { font-size: 13px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-nav-s { font-size: 12px; line-height: 1.35; color: #fff; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.map-nav-f { font-style: normal; font-size: 11px; padding: 0 7px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--glass-line); }
.map-nav.arrived .map-nav-s { color: #fff; font-weight: 700; }
/* «قبلی/بعدی»: هدفِ لمس ۴۴px؛ غیرفعال = کم‌رنگ ولی ضربه می‌پذیرد (صفحه علت را toast می‌کند)؛ «بعدی» پس از «رسیدی» برجسته (cue) و بدونِ پرشِ خودکار */
.map-nav-b { flex: none; min-width: 44px; height: 44px; box-sizing: border-box; padding: 0 8px; border: 0; border-radius: 22px; background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 2px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background var(--t), opacity var(--t), transform var(--t) var(--ease); }
.map-nav-b[hidden] { display: none; }
.map-nav-b .ico svg { width: 20px; height: 20px; }
.map-nav-b:active { background: rgb(255 255 255 / .18); transform: scale(.95); }
.map-nav-b[aria-disabled=true] { opacity: .5; }
.map-nav-b.cue { background: var(--brand-strong); color: var(--on-brand); animation: navCue 1.6s ease-in-out infinite; }
@keyframes navCue { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .map-nav-b.cue { animation: none; } }
/* «من» روی نقشه: همان آیکون‌های همکاران؛ دایره‌ی دقت `.me-ring` زیرش */
.me-ring { fill: var(--me); fill-opacity: .13; stroke: var(--me); stroke-opacity: .45; stroke-width: 1; }
.pin-wrap { background: none; border: 0; direction: ltr; } /* جعبه‌ی مارکر LTR تا مرکز دایره دقیقاً روی مختصات بنشیند؛ متن نام در .pin-label راست‌به‌چپ می‌ماند */
.pin { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; width: max-content; transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% + 5.5px + var(--dy, 0px))); } /* دایره پایینِ جعبه و برچسب بالا-وسطِ آن؛ مرکزِ دایره (۵٫۵px از پایین) دقیقاً روی مختصات */
.pin i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .4); }
.pin.seen i { opacity: .45; }
.pin.norep i { opacity: 1; box-shadow: 0 0 0 2.5px var(--warn-line), 0 1px 4px rgb(0 0 0 / .4); } /* نارنجی: کامل‌رنگ تا حلقه دیده شود (ویزیت‌شده‌ی عادی کم‌رنگ می‌ماند) */
.pin.sel i { transform: scale(1.35); } /* مارکرِ مشتریِ بازِ زیر نقشه (K۴ب)؛ بدون انیمیشن */
.pin.arch { transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% + 4.5px + var(--dy, 0px))); } .pin.arch i { width: 9px; height: 9px; background: var(--arch); } /* آرشیوی‌ها در نقشه: مارکر مشکیِ ۹px، قابل‌لمس */
.pin.debt i { box-shadow: 0 0 0 2px var(--bad), 0 1px 4px rgb(0 0 0 / .4); }
.pin.norep.debt i { box-shadow: 0 0 0 2px var(--bad), 0 0 0 4px #fff, 0 0 0 6.5px var(--warn-line), 0 1px 4px rgb(0 0 0 / .4); } /* قرمز و نارنجی از نظر روشنایی نزدیک‌اند؛ شکاف سفید حلقه‌ها را (حتی برای کوررنگی) جدا می‌کند */
.pin-label { direction: rtl; display: grid; font-size: 12px; line-height: 1.3; padding: 1px 6px; border-radius: 8px; background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--text); border: 1px solid var(--line); }
.leaflet-container .pin-label { font-family: var(--font); } /* Leaflet فونت Helvetica/Arial را روی کل نقشه می‌گذارد؛ برچسب مارکر باید مثل بقیه‌ی اپ Vazirmatn باشد (ارقام و جداکننده‌ی هزارگان) */
.pin-label small { font-size: 12px; font-weight: 700; color: var(--bad-ink); white-space: nowrap; } /* مانده: پررنگ مثل کادر مانده‌ی کارت */
.pin.sel .pin-label { border-color: var(--brand); box-shadow: 0 2px 8px rgb(0 0 0 / .22); } /* برچسبِ مارکرِ انتخاب‌شده (فاز ۱۲): حاشیه‌ی برند + سایه تا از برچسب‌های دیگر جدا دیده شود */
/* مقصدِ مسیریابی: خودِ مارکرِ مشتری (بدون حلقه‌ی جدا) کمی بزرگ‌تر و برچسبِ نام/مانده‌اش همیشه نمایان است (screens/map.js ← pinHtml)؛ جای مرکزِ دایره ثابت می‌ماند (۷٫۵ = نیمِ ۱۵px) */
.pin.dest { transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% + 7.5px + var(--dy, 0px))); }
.pin.dest i { width: 15px; height: 15px; border-width: 2.5px; }
.pin.dest .pin-label { font-weight: 700; border-color: var(--c); }
.pick-page { gap: 8px; } .pick-page .map-box { margin-top: 0; } /* حالت انتخاب موقعیت (E۳الف): نوار بالا + نقشه‌ی بدون مشتری */
.pick-bar { flex: none; display: grid; gap: 8px; padding: 10px 12px; }
/* مسیر چندتوقفه (۷ب): نوار زیر نقشه، فهرست درون‌نوار، خط مسیر و شماره‌ی توقف */
.rt-line { stroke: var(--brand-strong); stroke-width: 4; stroke-opacity: .85; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.rt-straight { stroke-dasharray: 8 8; }
.rt-n { min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; border-radius: 10px; background: var(--brand-strong); color: var(--on-brand); border: 2px solid #fff; font-size: 12px; font-weight: 700; line-height: 1; transform: translate(8px, -28px); pointer-events: none; box-shadow: 0 1px 4px rgb(0 0 0 / .4); }
.pick-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 20px; }
.pick-hint { color: var(--muted); font-size: 13px; } .pick-coords { font-size: 13px; font-weight: 700; color: var(--text); }
.pick-btns { display: flex; gap: 8px; } .pick-btns .btn.sm { width: auto; min-width: 0; padding-inline: 12px; white-space: nowrap; } .pick-btns .btn.sm:last-child { flex: 1; } /* «تأیید» عمل اصلی و پهن‌ترین */
.pick-wrap { background: none; border: 0; direction: ltr; }
.pick-pin { width: 100%; height: 100%; cursor: grab; touch-action: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .45)); }
.pick-pin svg { display: block; width: 100%; height: 100%; fill: var(--bar); stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; } /* --bar: روی کاشی‌های روشنِ نقشه در هر دو تم دیده می‌شود (نه سبز روشنِ تم تاریک) */
.pick-pin circle { fill: #fff; stroke: none; }

/* جستجوی هدر: ذره‌بین ← کادر؛ باز بودن عنوان و آیکون‌های دیگر را پنهان می‌کند */
.hs { display: contents; }
.hs-box { display: none; }
.hs.open .hs-btn { display: none; }
.hs.open .hs-box { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; height: 44px; padding-inline: 4px 14px; border-radius: 22px; background: var(--card); color: var(--text); animation: enter .2s var(--ease); }
.hs-close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); }
.hs-input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; }
.header:has(.hs.open) .header-text { display: none; }
.header-actions:has(.hs.open) { flex: 1; }
.header-actions:has(.hs.open) > :not(.hs) { display: none; }

/* پنل‌ها و فیلدهای بازشوی هدر: هم‌رنگ خودِ هدر (--bar) و دکمه‌ها/فیلدها شیشه‌ای (نیمه‌شفاف + حاشیه‌ی روشن)؛ مثل برنامه‌ی دیکاتو.
   فقط داخل .hp و .hs-box؛ بقیه‌ی صفحه‌ها همان کارت/سفید می‌مانند. رنگ متن همه سفید (≥۳:۱ روی --bar؛ scripts/contrast.mjs). */
.icon-btn, .hs-box, .hp .search, .hp .field input, .hp .chip-btn, .hp .btn, .hp .seg, .hp .hp-ico, .hp .hp-status, .hp .chip, .hp .notice { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.icon-btn { box-shadow: inset 0 0 0 1px var(--glass-line); }
.hp { background: var(--bar); color: #fff; }
.hp-host { background: var(--bg); }
/* H۱: پنل زیر هدر = کشیده‌شدنِ خودِ هدر سبز به پایین. خودِ پنل همیشه کدر است (بدون fade) و فقط ارتفاعش رشد می‌کند، پس لبه‌ی گردِ پایینش
   پایین می‌رود؛ محتوا جدا و کمی دیرتر محو/وارد می‌شود. بسته‌شدن وارونه است: اول محتوا محو، بعد جمع‌شدن (جمع ۲۸۰ms = CLOSE_MS). */
.cust-panel.hp { opacity: 1; box-shadow: 0 8px 18px transparent; transition: grid-template-rows .24s var(--ease) .04s, box-shadow .24s var(--ease); }
.cust-panel.hp.open { box-shadow: 0 8px 18px rgb(0 0 0 / .16); transition: grid-template-rows .28s var(--ease), box-shadow .28s var(--ease); }
.hp .hp-body { opacity: 0; transform: translateY(-6px); transition: opacity .12s, transform .12s; }
.hp.open .hp-body { opacity: 1; transform: none; transition: opacity .2s .06s, transform .28s var(--ease) .06s; }
.hp-host > .hp:not(:last-child) { border-radius: 0; box-shadow: none; } /* تعویض مستقیم دو پنل: پنلِ در حال بسته‌شدن بالاست؛ بدون درز و گوشه‌ی گرد بین دو سطح سبز */
.hp .row-item { border-bottom-color: var(--glass-line); }
.hp small, .hp .hint { color: var(--on-bar-2); } .hp .hint.error { color: #fff; font-weight: 700; }
.hp-grip::before { background: rgb(255 255 255 / .55); }
.hp .search, .hp .field input { background: var(--glass); border: 1px solid var(--glass-line); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); }
.hp .search::placeholder, .hp .field input::placeholder { color: var(--on-bar-2); }
.hp .search:focus, .hp .field input:focus { outline: 2px solid #fff; border-color: transparent; background: var(--glass-hi); }
.hp .chip-btn, .hp .btn, .hp .btn.danger { background: var(--glass); color: #fff; border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14); transition: transform var(--t) var(--ease), background var(--t); }
.hp .chip-btn:active, .hp .btn:active, .hp .hp-status:active { background: var(--glass-hi); }
.hp .btn.danger { color: #fff; border-color: rgb(255 200 200 / .6); } /* مخرب = شیشه‌ی همان‌رنگ با متن و حاشیه‌ی صورتی (قرمز روی سبز گل‌آلود می‌شود) */
.hp .seg { background: var(--glass); border: 1px solid var(--glass-line); }
.hp .seg button { color: #fff; }
.hp .seg .on { background: var(--glass-hi); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-line); }
.hp .avatar { background: var(--glass-hi); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-line); }
.hp .hp-ico { background: var(--glass); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-line); }
.hp .hp-ico.danger { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 200 200 / .6); }
.hp .hp-ico.danger.armed { background: var(--bad); }
.hp .hp-status { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 16px; padding: 8px 12px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .14); }
.hp .hp-status > .ico:last-child { color: var(--on-bar-2); }
.hp .sync-circle { --c: var(--glass-hi); --ic: #fff; box-shadow: inset 0 0 0 1px var(--glass-line); }
.hp .sync-circle.offline { --c: rgb(255 255 255 / .22); } .hp .sync-circle.pending, .hp .sync-circle.syncing { --c: var(--warn); --ic: #1d1d1d; } .hp .sync-circle.failed { --c: var(--bad); --ic: #fff; }
.hp .chip, .hp .chip.done { background: var(--glass); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-line); }
.hp .chip.failed { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 200 200 / .6); }
.hp .notice { background: var(--glass); color: #fff; border: 1px solid var(--glass-line); } .hp .notice.warn { background: color-mix(in srgb, var(--warn) 38%, transparent); }
.hp :focus-visible { outline-color: #fff; }
/* فیلد جستجوی باز‌شده‌ی هدر */
.hs.open .hs-box { background: var(--glass); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 rgb(255 255 255 / .14); }
.hs-close { color: #fff; } .hs-input::placeholder { color: var(--on-bar-2); }

/* لوگوی هدر = دکمه‌ی پنل «مخاطب فعال و حساب» (جای دکمه‌ی پروفایل)؛ هدف لمس ۴۸px */
.header-logo-btn { flex: none; width: 48px; height: 48px; border-radius: 12px; display: block; transition: transform var(--t) var(--ease), box-shadow var(--t); }
.header-logo-btn:active { transform: scale(.92); }
.header-logo-btn[aria-expanded=true] { box-shadow: 0 0 0 3px rgb(255 255 255 / .55); }
/* نوار فیلتر مشترک (مشتری‌ها و نقشه) */
.filter-bar { display: block; }
.map-page .filter-bar { flex: none; padding-inline: 8px; } /* فقط جبرانِ کناره‌ی .screen؛ اندازه و فاصله‌ی چیپ‌ها همان قاعده‌ی مشترک .chips/.filters است */

/* تنظیمات فشرده (بدون اسکرول): ردیف کاربر، تم، سه کاشی و پنل گسترش‌شونده‌ی درجا */
.screen:has(.set) { padding: 10px 12px 12px; }
.set { display: grid; gap: 8px; }
.set .card { padding: 6px 12px; }
.set-prof, .set-row { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.set-prof .row-text { flex: 1; min-width: 0; } .set-prof .row-text small { color: var(--muted); }
.set-row { justify-content: space-between; } .set-row .row-text small { color: var(--muted); font-size: 12px; line-height: 1.4; } .set-row .seg { width: 156px; flex: none; }
.set-out { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); color: var(--bad-ink); font-size: 13px; font-weight: 600; transition: background var(--t), color var(--t), transform var(--t) var(--ease); }
.set-out:active { transform: scale(.96); } .set-out .ico svg { width: 18px; height: 18px; }
.set-out.armed { background: var(--bad); border-color: var(--bad); color: #fff; }
.set-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.set-tile { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 80px; padding: 6px 4px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-align: center; transition: transform var(--t) var(--ease), border-color var(--t), background var(--t); }
.set-tile:active { transform: scale(.96); }
.set-tile .circle { width: 38px; height: 38px; border-radius: 12px; } .set-tile .circle .ico svg { width: 20px; height: 20px; }
.set-tile { min-width: 0; } .set-tile b { font-size: 13px; line-height: 1.4; } .set-tile small { color: var(--muted); font-size: 12px; line-height: 1.3; min-height: 1.3em; }
.set-tile small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-tiles:has(.set-tile:nth-child(5)) { gap: 6px; } .set-tiles:has(.set-tile:nth-child(5)) .set-tile { padding-inline: 2px; } .set-tiles:has(.set-tile:nth-child(5)) .set-tile b { font-size: 12px; } /* پنج کاشی (مدیر): فشرده‌تر تا در یک ردیف بماند */
.set-tile.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--card)); }
.set-panel { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.set-host { min-height: 0; } .set-host .cust-panel-in { padding-bottom: 1px; }
.set-sms { display: grid; gap: 4px; } .set-sms .panel-ta { font-size: 13px; line-height: 1.6; min-height: 0; } .set-tip, .set-prev { color: var(--muted); font-size: 12px; line-height: 1.6; } .set-prev.hint { padding: 0; text-align: start; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.set-sms .btn-row .btn.sm { height: 40px; }
.set-scroll { max-height: min(34vh, 250px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.set-scroll .row-item { padding: 6px 0; } .set-scroll .row-item:last-child { border-bottom: 0; } .set-scroll .avatar { width: 34px; height: 34px; }
.set-day { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; padding: 4px 8px; border-inline-start: 4px solid var(--c, var(--line)); background: color-mix(in srgb, var(--c, var(--line)) 18%, transparent); border-radius: 6px; font-size: 13px; } .set-day small { color: var(--muted); font-size: 12px; } /* فاز ۸: سرگروه روز؛ رنگ روز فقط نوار/زمینه است */
.set-loc-ok { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--brand-ink); } /* تیکِ «ثبت شد»؛ غیرتعاملی */
.set-loc.btn.sm { width: 44px; height: 44px; flex: none; padding: 0; display: grid; place-items: center; border-radius: 50%; color: var(--brand-ink); } .set-loc .ico svg { width: 20px; height: 20px; }
.set-roles { display: grid; gap: 8px; } .set-roles .set-scroll { margin-bottom: 0; }
.set-role { gap: 4px 8px; } .set-role .seg button { min-height: 44px; } /* ردیف نقش‌ها (فاز ۷): فشرده؛ هدف لمس ≥۴۴px */
.set-add { border-top: 1px dashed var(--line); padding-top: 6px; } .set-add summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--brand-ink); list-style: none; }
.set-add summary::-webkit-details-marker { display: none; } .set-add[open] summary { color: var(--muted); }
.set-add .contact-search { padding-bottom: 4px; } .set-add .list { max-height: min(30vh, 220px); overflow-y: auto; overscroll-behavior: contain; }
.set-restore.btn.sm { width: auto; flex: none; padding-inline: 12px; height: 40px; font-size: 13px; }
.set-warn { margin: 0; padding: 6px 12px; font-size: 12px; line-height: 1.6; }

/* چراغ‌های حضور همکاران زیر آیکون ابر هدر: absolute؛ پس اندازه و جای هیچ دکمه‌ی هدر عوض نمی‌شود */
.sync-wrap { position: relative; flex: none; width: 44px; height: 44px; }
.pres { position: absolute; top: calc(100% + 2px); left: 0; display: flex; align-items: center; gap: 5px; pointer-events: none; z-index: 2; }
.pres-dot { --g: #4ade80; position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; pointer-events: auto; background: #8a978f; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85); }
.pres-dot.on { background: var(--g); box-shadow: 0 0 0 1.5px #fff, 0 0 6px 1px var(--g); }
.pres-dot::after { content: ''; position: absolute; inset: -4px -3px -10px; } /* هدف لمس بزرگ‌تر؛ فقط به پایین و کناره‌ها تا به دکمه‌ی ابر نرسد */
.pres-dot.big { width: 12px; height: 12px; pointer-events: none; } .pres-dot.big::after { display: none; }
.pres-more { color: #fff; font-size: 11px; line-height: 1; pointer-events: none; }
.pres-tip { position: fixed; z-index: 60; max-width: min(260px, calc(100vw - 16px)); padding: 8px 12px; border-radius: 12px; display: grid; gap: 2px; background: var(--text); color: var(--bg); font-size: 13px; box-shadow: 0 4px 14px rgb(0 0 0 / .3); animation: enter .2s var(--ease); }
.pres-tip small { font-size: 12px; opacity: .85; }
.pres-tip.on b::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; background: #4ade80; }
.hp-h { margin: 8px 0 0; padding-top: 6px; font-size: 12px; font-weight: 700; color: var(--on-bar-2); }
.hp .pres-dot.big { background: rgb(255 255 255 / .35); box-shadow: 0 0 0 1.5px rgb(255 255 255 / .6); } .hp .pres-dot.big.on { background: var(--g); box-shadow: 0 0 0 1.5px #fff, 0 0 6px 1px var(--g); }
.hp-more { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .pres-tip { animation: none; } }
.hp-sync .row-item { padding: 6px 0; gap: 10px; } .hp-sync .row-text { line-height: 1.55; gap: 0; } .hp-sync .row-text small { font-size: 12px; } .hp-sync .hint { padding: 6px; }

/* ── همکاران روی نقشه (v1.51.0؛ آیکون‌های تصویریِ پیکان‌دار): آدمک/موتورسوار/جعبه‌به‌دست/وانت از بالا با پیکانِ آبیِ جهت؛ هم‌مقیاس (وانت بزرگ‌تر از آدمک).
   ضربه روی آن برچسب نام را باز می‌کند (.open). ناحیه‌ی لمس ۴۴px؛ تصویر (viewBox ۸۰) از آن بیرون می‌زند ولی لمس نمی‌گیرد (pointer-events: none)؛ آفلاین = بی‌رنگ‌وکم‌رنگ */
.ppl-wrap { background: none; border: 0; direction: ltr; }
.ppl { position: relative; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.ppl.off { opacity: .75; }
.ppl-ico { position: absolute; inset: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ppl-ico svg { position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; width: 80px; height: 80px; overflow: visible; pointer-events: none; transform: rotate(var(--ang, 0deg)); will-change: transform; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1.5px rgb(0 0 0 / .35)); }
.ppl.off .ppl-ico svg { filter: grayscale(1) drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1.5px rgb(0 0 0 / .35)); }
.ppl-lbl { display: none; position: absolute; bottom: calc(50% + 42px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 140px; padding: 1px 7px; font-size: 12px; line-height: 1.35; text-align: center; direction: rtl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 8px rgb(0 0 0 / .22); pointer-events: none; }
.ppl.open .ppl-lbl { display: grid; animation: enter .16s var(--ease); }
.ppl-lbl small { font-size: 11px; color: var(--muted); }

/* حالت نمایش (فاز ۱۱): ردیف‌های انتخاب، انتخابگر راننده و نشانه‌ی فقط‌مشاهده */
.lay-gate { display: contents; }
.lay-list { display: grid; gap: 2px; }
.lay-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 4px; border-radius: var(--r); text-align: start; transition: background var(--t); }
.lay-row:active { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.lay-row.on { background: color-mix(in srgb, var(--brand) 10%, var(--card)); }
.lay-row .row-text { flex: 1; min-width: 0; } .lay-row .avatar { width: 34px; height: 34px; }
.lay-row .ico { color: var(--brand-ink); } .lay-row .ico svg { width: 20px; height: 20px; }
.lay-row[disabled] { opacity: .6; }
.lay-me { font-style: normal; font-size: 11px; font-weight: 600; margin-inline-start: 6px; padding: 1px 7px; border-radius: 99px; color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 14%, var(--card)); }
.lay-pick { display: grid; gap: 6px; margin: 8px 0; padding: 12px; }
.lay-note { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin: 2px 2px 0; padding: 3px 10px 3px 12px; border-radius: 99px; font-size: 12px; line-height: 1.5; color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); }
.lay-note[hidden] { display: none; } .lay-note .ico svg { width: 15px; height: 15px; } .lay-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-page .lay-note { margin-inline: 8px; }

/* پیش‌فاکتور درون‌کارت (هر دو کارتِ کامل و فشرده): همه‌ی اطلاعات کارت پنهان؛ فقط پنل می‌ماند. کلاس را card-layers.js می‌گذارد */
.cust.sale-open > :not(.cust-panel) { display: none; }
.cust.sale-open > .cust-panel .pfp { border-top: 0; padding-top: 2px; }
.sale-head { flex-wrap: wrap; row-gap: 4px; }
.sale-head .sale-title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.sale-head .sale-who { font-weight: 700; }
.sale-head .balance { align-self: center; } /* گوشه‌ی بالا-چپ (آخرین فرزندِ ردیف در RTL) */
.pf-note-view { display: block; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); font: inherit; line-height: 1.5; text-align: start; white-space: pre-wrap; overflow-wrap: anywhere; max-height: calc(8 * 1.5em + 18px); overflow-y: auto; cursor: text; }
.pf-note-view[hidden], .pf-note[hidden] { display: none; }
.pfp-lines:empty { display: none; }
.pf-note-view.empty { color: var(--muted); }
.prod-img.sm { width: 32px; height: 32px; border-radius: 9px; } .prod-img.sm svg { width: 18px; height: 18px; } /* عکس کوچک کالا در نتایج «افزودن کالا» (ردیف بزرگ‌تر نمی‌شود) */
.pfp-prod .pfp-name { align-items: center; }