/* پوستهٔ مشترک پنل‌ها — همان زبان بصری صفحهٔ فرود */
:root{
  --font:"Vazirmatn","IRANSans","Sahel",Tahoma,"Geeza Pro","Noto Naskh Arabic",system-ui,-apple-system,sans-serif;
  --brand:#03592B; --brand-2:#0B7A3E; --brand-hover:#04733A; --brand-deep:#023C1D;
  --tint:#EBF3EE; --tint-2:#DCEAE1;
  --bg:#F8FAF9; --card:#fff; --ink:#0B1710; --ink-2:#2C3D33; --muted:#5F7268; --line:#E2EAE5;
  --amber:#F5C451; --rose:#C7442F; --sky:#3E7FA8; --violet:#7A5AA8;
  --r:16px; --r-lg:22px; --r-xl:28px;
  --sh-sm:0 1px 2px rgba(3,44,22,.05), 0 4px 14px rgba(3,44,22,.05);
  --sh:0 2px 6px rgba(3,44,22,.06), 0 18px 46px rgba(3,44,22,.09);
  --e:cubic-bezier(.22,.8,.3,1);
  --pad:clamp(14px,3vw,26px); --wide:1240px; --head-h:64px;
}
*{box-sizing:border-box}
/* صفت hidden باید همیشه برنده باشد. هر قاعدهٔ display در شیوه‌نامه یا استایل
   درون‌خطی، display:none پیش‌فرض مرورگر را کنار می‌زند و عنصر «پنهان» روی
   صفحه می‌ماند و کلیک‌ها را هم می‌گیرد. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
svg text{font-family:var(--font)}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{margin:0;line-height:1.45;font-weight:800;letter-spacing:-.015em}
h1{font-size:clamp(21px,3vw,28px)} h2{font-size:clamp(18px,2.2vw,22px)} h3{font-size:16px}
p{margin:0}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding-inline:var(--pad)}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- سربرگ ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(248,250,249,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s var(--e)}
.top.is-stuck{border-bottom-color:var(--line)}
.top-row{display:flex;align-items:center;gap:14px;height:var(--head-h)}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;color:var(--brand);font-size:16px}
.logo i{width:30px;height:30px;border-radius:10px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:14px;flex:none}
.top nav{display:flex;gap:6px;margin-inline-start:auto;flex-wrap:wrap}
.top nav a{font-size:14px;font-weight:600;color:var(--ink-2);padding:8px 13px;border-radius:999px;
  transition:background-color .2s var(--e),color .2s var(--e)}
.top nav a:hover{background:var(--tint);color:var(--brand)}
.top nav a.is-on{background:var(--brand);color:#fff}

/* ---------- دکمه‌ها ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:700;border:1.5px solid transparent;border-radius:999px;
  padding:11px 20px;min-height:44px;transition:all .22s var(--e)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(3,89,43,.24)}
.btn-primary:hover{background:var(--brand-hover);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--brand);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand)}
.btn-quiet{background:transparent;color:var(--muted);padding:8px 12px;min-height:38px;font-size:13.5px}
.btn-quiet:hover{color:var(--brand);background:var(--tint)}
.btn-danger{background:#fff;color:var(--rose);border-color:#F0D4CF}
.btn-danger:hover{background:var(--rose);color:#fff;border-color:var(--rose)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.btn-sm{font-size:13px;padding:8px 14px;min-height:36px}

/* ---------- کارت‌ها و شبکه ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,26px)}
.card + .card{margin-top:16px}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.card-head h2,.card-head h3{margin-inline-end:auto}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- عدد و برچسب ---------- */
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.stat b{display:block;font-size:clamp(22px,3vw,30px);font-weight:900;color:var(--brand);line-height:1.25}
.stat span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  border-radius:999px;padding:5px 12px;background:var(--tint);color:var(--brand)}
.chip.amber{background:#FDF4DE;color:#8A6400} .chip.rose{background:#FBEAE6;color:var(--rose)}
.chip.sky{background:#E6F0F6;color:var(--sky)} .chip.gray{background:#EEF2F0;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- فرم ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;
  border:1.5px solid var(--line);border-radius:14px;padding:12px 15px;min-height:48px;
  background:var(--bg);color:var(--ink);transition:border-color .2s var(--e),background-color .2s var(--e)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand);background:#fff}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px}
.field input[dir=ltr]{text-align:start;letter-spacing:.04em}
.err{background:#FBEAE6;color:var(--rose);border-radius:12px;padding:10px 14px;font-size:13.5px;margin-bottom:14px}
.ok{background:var(--tint);color:var(--brand);border-radius:12px;padding:10px 14px;font-size:13.5px;margin-bottom:14px}

/* ---------- جدول ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:660px}
th,td{padding:12px 14px;text-align:start;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--tint);font-weight:800;font-size:12.5px;color:var(--brand);position:sticky;top:0}
tbody tr{transition:background-color .15s var(--e);cursor:pointer}
tbody tr:hover{background:var(--bg)}
tbody tr:last-child td{border-bottom:0}
tbody tr.is-sel{background:var(--tint)}

/* ---------- خط زمانی سفارش ---------- */
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{display:flex;gap:14px;position:relative;padding-bottom:20px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;inset-inline-start:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.tl-item:last-child::before{display:none}
.tl-dot{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#fff;border:2px solid var(--line);color:var(--muted);font-size:12px;z-index:1}
.tl-item.done .tl-dot{background:var(--brand);border-color:var(--brand);color:#fff}
.tl-item.done::before{background:var(--brand)}
.tl-item.now .tl-dot{border-color:var(--brand);color:var(--brand);
  box-shadow:0 0 0 5px var(--tint);animation:tlPulse 2.2s ease-in-out infinite}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 5px var(--tint)}50%{box-shadow:0 0 0 9px rgba(3,89,43,.08)}}
.tl-body b{display:block;font-size:14.5px}
.tl-body span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.tl-item:not(.done):not(.now) .tl-body b{color:var(--muted);font-weight:600}

/* ---------- بازخورد ---------- */
.fb{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.fb + .fb{margin-top:10px}
.fb .ic{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center}
.fb.good .ic{background:var(--tint);color:var(--brand)}
.fb.warn .ic{background:#FDF4DE;color:#8A6400}
.fb .ic svg{width:17px;height:17px}
.fb b{display:block;font-size:14px}
.fb p{font-size:13px;color:var(--muted);margin-top:3px}

/* ---------- ریز ---------- */
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty svg{width:46px;height:46px;margin:0 auto 14px;color:var(--tint-2)}
.bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:999px;
  transition:width .6s var(--e)}
.split{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{font:inherit;font-size:13px;font-weight:600;cursor:pointer;background:#fff;color:var(--ink-2);
  border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;min-height:36px;transition:all .18s var(--e)}
.pill:hover{border-color:var(--brand);color:var(--brand)}
.pill.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
/* پنل راست‌به‌چپ است: inset-inline-end یعنی لبهٔ چپ، پس پنهان‌شدن هم به چپ. */
.drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(560px,100vw);background:#fff;z-index:60;
  box-shadow:20px 0 60px rgba(3,44,22,.2);transform:translateX(-100%);transition:transform .3s var(--e);
  overflow-y:auto;padding:24px;visibility:hidden}
.drawer.is-open{transform:none;visibility:visible}
.scrim{position:fixed;inset:0;background:rgba(11,23,16,.4);z-index:55;opacity:0;pointer-events:none;
  transition:opacity .3s var(--e)}
.scrim.is-on{opacity:1;pointer-events:auto}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- نمودارها ---------- */
.vz-donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.vz-donut svg{width:120px;height:120px;flex:none}
.vz-legend{display:flex;flex-direction:column;gap:6px;font-size:12.5px;min-width:130px}
.vz-key{display:flex;align-items:center;gap:7px;color:var(--ink-2)}
.vz-key i{width:9px;height:9px;border-radius:3px;flex:none}
.vz-key b{margin-inline-start:auto;color:var(--brand)}
.vz-bars{display:flex;flex-direction:column;gap:9px}
.vz-bar{display:grid;grid-template-columns:minmax(78px,32%) 1fr auto;align-items:center;gap:10px;font-size:12.5px}
.vz-bl{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vz-bt{height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.vz-bt i{display:block;height:100%;border-radius:999px;transition:width .6s var(--e)}
.vz-bar b{color:var(--brand);font-size:12.5px}
.vz-radar{width:100%;max-width:240px;height:auto;margin-inline:auto}
.vz-gauge{width:110px;height:110px;flex:none}
.vz-hist{display:flex;align-items:flex-end;gap:4px;height:130px;padding-top:16px}
.vz-hcol{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.vz-hcol i{display:block;width:100%;max-width:38px;background:linear-gradient(180deg,var(--brand-2),var(--brand));
  border-radius:7px 7px 0 0;position:relative;transition:height .6s var(--e)}
.vz-hcol i span{position:absolute;top:-16px;inset-inline:0;text-align:center;font-size:11px;color:var(--brand);font-weight:700}
.vz-hx{margin-top:6px;font-size:11px;color:var(--muted)}