/* ═══════════════════════════════════════════════════════════════════
   omranix-ds.css — سیستم طراحی نسل ۲ عمرانیکس
   ═══════════════════════════════════════════════════════════════════
   اصول (برگرفته از بهترین محصولات ۲۰۲۶ و بومی‌شده برای برند):
   ۱) داده فشرده، قاب سخاوتمند — جدول‌ها متراکم، اطراف‌شان هوا.
   ۲) قاب ساکت — مرز مویی ۱px به‌جای سایه سنگین؛ عمق با لایه، نه افکت.
   ۳) هر کامپوننت داده‌دار «سه حالت» دارد: بارگذاری / خالی / خطا.
   ۴) خلاصه اول، جزئیات با کلیک — نه دیوار اطلاعات در نگاه اول.
   ۵) اعداد همیشه tabular-nums؛ شناسه‌ها هرگز جداکننده هزارگان نمی‌گیرند.
   پیشوند توکن‌ها --az- است و با صفحه dash موجود سازگار می‌ماند.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── رنگ سطح ── */
  --az-bg:#EDF2F0; --az-card:#FFFFFF;
  --az-line:#E1EAE6; --az-line2:#CBD9D3;
  /* ── جوهر ── */
  --az-ink:#152420; --az-ink2:#495C56; --az-ink3:#82958D;
  /* ── برند ── */
  --az-teal:#25695D; --az-teal2:#45B593; --az-amber:#C4701E;
  --az-soft:#E4F2EC; --az-soft2:#F2F8F5;
  /* ── وضعیت ── */
  --az-red:#B4402F;  --az-red-soft:#FCEBE8;
  --az-ok:#1F7A4D;   --az-ok-soft:#E5F4EC;
  --az-warn:#8A5A00; --az-warn-soft:#FBF1DD;
  /* ── عمق (سایه رنگی برند، سبک) ── */
  --az-sh:0 1px 2px rgba(16,42,36,.05),0 8px 24px rgba(16,42,36,.05);
  --az-sh2:0 4px 14px rgba(16,42,36,.09),0 16px 40px rgba(16,42,36,.09);
  /* ── هندسه ── */
  --az-r-s:8px; --az-r-m:13px; --az-r:18px; --az-r-pill:999px;
  /* ── فاصله (گام ۴/۸) ── */
  --az-sp-1:4px; --az-sp-2:8px; --az-sp-3:12px; --az-sp-4:16px;
  --az-sp-5:20px; --az-sp-6:24px; --az-sp-8:32px; --az-sp-10:40px;
  /* ── حرکت ── */
  --az-mo:150ms cubic-bezier(.215,.61,.355,1);
  /* ── چیدمان صدف ── */
  --az-side:264px; --az-side-rail:64px; --az-content-max:1180px;
}

/* ═══════════ پایه ═══════════ */
.az *{box-sizing:border-box}
.az{background:var(--az-bg);color:var(--az-ink);
  font-family:'Vazirmatn',sans-serif;line-height:1.9;font-size:14px}
.az .num,.az .amt{font-variant-numeric:tabular-nums}
.az :focus-visible{outline:2.5px solid var(--az-teal2);outline-offset:2px;border-radius:var(--az-r-s)}
.az ::selection{background:var(--az-soft)}

/* ═══════════ تایپوگرافی ═══════════ */
.az .t-page{font-size:21px;font-weight:900;line-height:1.6;margin:0}
.az .t-sec{font-size:15.5px;font-weight:800;color:var(--az-ink);margin:0}
.az .t-sub{font-size:12.5px;color:var(--az-ink2);margin:0}
.az .t-cap{font-size:11px;font-weight:700;color:var(--az-ink3);letter-spacing:0}
.az .t-kpi{font-size:24px;font-weight:900;line-height:1.35}

/* ═══════════ کارت ═══════════ */
.az .card{background:var(--az-card);border:1px solid var(--az-line);
  border-radius:var(--az-r);box-shadow:var(--az-sh)}
.az .card-p{padding:var(--az-sp-5) var(--az-sp-6)}
.az .card-hd{display:flex;align-items:center;justify-content:space-between;
  gap:var(--az-sp-3);padding:var(--az-sp-4) var(--az-sp-6);
  border-bottom:1px solid var(--az-line)}
.az .card-ft{padding:var(--az-sp-3) var(--az-sp-6);border-top:1px solid var(--az-line);
  display:flex;justify-content:flex-start;gap:var(--az-sp-2)}
.az .card.is-click{cursor:pointer;transition:border-color var(--az-mo),box-shadow var(--az-mo)}
.az .card.is-click:hover{border-color:var(--az-line2);box-shadow:var(--az-sh2)}

/* ═══════════ نوار سنجه (حداکثر ۵ کارت) ═══════════ */
.az .kpis{display:flex;gap:var(--az-sp-3);flex-wrap:wrap}
.az .kpi{flex:1;min-width:150px;background:var(--az-card);border:1px solid var(--az-line);
  border-radius:var(--az-r-m);padding:var(--az-sp-4) var(--az-sp-5)}
.az .kpi .l{font-size:11.5px;font-weight:700;color:var(--az-ink3)}
.az .kpi .v{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.5}
.az .kpi .d{font-size:11px;font-weight:700}
.az .kpi .d.up{color:var(--az-ok)} .az .kpi .d.dn{color:var(--az-red)}
.az .kpi.hi{background:linear-gradient(145deg,var(--az-teal),#173B35);border-color:transparent}
.az .kpi.hi .l{color:#9CC8BC}.az .kpi.hi .v{color:#fff}

/* ═══════════ دکمه ═══════════ */
.az .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:11px;border:1px solid transparent;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:13px;line-height:1;
  padding:11px 18px;transition:background var(--az-mo),border-color var(--az-mo),color var(--az-mo);
  text-decoration:none;white-space:nowrap}
.az .btn:disabled{opacity:.45;cursor:not-allowed}
.az .btn svg{width:16px;height:16px}
.az .btn-pri{background:var(--az-teal);color:#fff}
.az .btn-pri:hover:not(:disabled){background:#1C5347}
.az .btn-sec{background:var(--az-soft);color:var(--az-teal)}
.az .btn-sec:hover:not(:disabled){background:#D6ECE2}
.az .btn-gh{background:transparent;border-color:var(--az-line2);color:var(--az-ink2)}
.az .btn-gh:hover:not(:disabled){background:var(--az-soft2);color:var(--az-ink)}
.az .btn-dgr{background:var(--az-red-soft);color:var(--az-red)}
.az .btn-amb{background:var(--az-amber);color:#fff}
.az .btn-sm{padding:8px 13px;font-size:12px;border-radius:9px}
.az .btn-ic{width:36px;height:36px;padding:0;border-radius:11px}

/* ═══════════ فرم ═══════════ */
.az .fld{display:flex;flex-direction:column;gap:6px}
.az .fld>label{font-size:12px;font-weight:800;color:var(--az-ink2)}
.az .fld .req{color:var(--az-red)}
.az .in,.az select.in,.az textarea.in{
  font-family:inherit;font-size:13.5px;color:var(--az-ink);
  background:var(--az-card);border:1.5px solid var(--az-line2);
  border-radius:11px;padding:10px 13px;width:100%;
  transition:border-color var(--az-mo),box-shadow var(--az-mo)}
.az .in:focus{outline:none;border-color:var(--az-teal2);
  box-shadow:0 0 0 3.5px rgba(69,181,147,.16)}
.az .in::placeholder{color:var(--az-ink3)}
.az .in.is-err{border-color:var(--az-red);background:#FFFDFC}
.az .fld .msg{font-size:11.5px;color:var(--az-ink3)}
.az .fld .msg.err{color:var(--az-red);font-weight:700}
.az .in-row{display:flex;gap:var(--az-sp-3);flex-wrap:wrap}
.az .in-row>.fld{flex:1;min-width:150px}

/* ═══════════ نشان و وضعیت ═══════════ */
.az .bdg{display:inline-flex;align-items:center;gap:5px;border-radius:var(--az-r-pill);
  font-size:11px;font-weight:800;padding:3.5px 11px;line-height:1.6}
.az .bdg .dot{width:6px;height:6px;border-radius:99px;background:currentColor}
.az .bdg-teal{background:var(--az-soft);color:var(--az-teal)}
.az .bdg-ok{background:var(--az-ok-soft);color:var(--az-ok)}
.az .bdg-warn{background:var(--az-warn-soft);color:var(--az-warn)}
.az .bdg-red{background:var(--az-red-soft);color:var(--az-red)}
.az .bdg-mute{background:#EEF2F0;color:var(--az-ink3)}
.az .bdg-amber{background:#F9EBDC;color:var(--az-amber)}

/* ═══════════ جدول — داده فشرده، قاب سخاوتمند ═══════════ */
.az .tbl-wrap{overflow-x:auto;border:1px solid var(--az-line);
  border-radius:var(--az-r-m);background:var(--az-card)}
.az table.tbl{width:100%;border-collapse:collapse;font-size:12.8px}
.az .tbl thead th{background:var(--az-soft2);color:var(--az-ink2);
  font-weight:800;font-size:11.5px;text-align:right;
  padding:9px 14px;border-bottom:1px solid var(--az-line);white-space:nowrap}
.az .tbl tbody td{padding:9px 14px;border-bottom:1px solid var(--az-line);
  vertical-align:middle}
.az .tbl tbody tr:last-child td{border-bottom:none}
.az .tbl tbody tr{transition:background var(--az-mo)}
.az .tbl tbody tr:hover{background:var(--az-soft2)}
.az .tbl td.amt,.az .tbl th.amt{text-align:left;direction:ltr;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.az .tbl td.id{font-variant-numeric:tabular-nums;letter-spacing:.3px}
.az .tbl .rowact{display:flex;gap:6px;justify-content:flex-end;opacity:0;
  transition:opacity var(--az-mo)}
.az .tbl tr:hover .rowact{opacity:1}

/* ═══════════ زنجیره گردش (stepper) ═══════════ */
.az .chain{display:flex;align-items:stretch;gap:0}
.az .chain .st{flex:1;text-align:center;padding:10px 6px;position:relative;
  background:var(--az-card);border:1px solid var(--az-line)}
.az .chain .st:first-child{border-radius:0 var(--az-r-m) var(--az-r-m) 0}
.az .chain .st:last-child{border-radius:var(--az-r-m) 0 0 var(--az-r-m)}
.az .chain .st+.st{border-right:none}
.az .chain .st .r{font-size:12px;font-weight:800;color:var(--az-ink2)}
.az .chain .st .c{font-size:10.5px;color:var(--az-ink3)}
.az .chain .st.done{background:var(--az-soft2)}
.az .chain .st.done .r{color:var(--az-teal)}
.az .chain .st.on{background:var(--az-teal);border-color:var(--az-teal)}
.az .chain .st.on .r{color:#fff}.az .chain .st.on .c{color:#BFE5D8}

/* ═══════════ برگه (tabs) ═══════════ */
.az .tabs{display:flex;gap:2px;background:#E4EBE8;border-radius:12px;padding:3px;
  width:max-content;max-width:100%;overflow-x:auto}
.az .tab{border:none;background:transparent;font-family:inherit;cursor:pointer;
  font-size:12.5px;font-weight:800;color:var(--az-ink2);
  padding:8px 16px;border-radius:9px;white-space:nowrap;
  transition:background var(--az-mo),color var(--az-mo)}
.az .tab.on{background:var(--az-card);color:var(--az-teal);box-shadow:var(--az-sh)}

/* ═══════════ سه حالت الزامی ═══════════ */
/* ۱) بارگذاری: اسکلت */
@keyframes az-shimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}
.az .sk{border-radius:9px;
  background:linear-gradient(105deg,#E7EDEA 40%,#F3F7F5 50%,#E7EDEA 60%);
  background-size:250% 100%;animation:az-shimmer 1.3s infinite linear}
.az .sk-t{height:13px}.az .sk-t.w40{width:40%}.az .sk-t.w60{width:60%}.az .sk-t.w80{width:80%}
.az .sk-row{display:flex;gap:12px;align-items:center;padding:10px 0}
.az .sk-av{width:34px;height:34px;border-radius:11px;flex-shrink:0}
/* ۲) خالی: آیکون + متن + اقدام */
.az .empty{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:38px 22px;text-align:center}
.az .empty .ic{width:52px;height:52px;border-radius:16px;background:var(--az-soft2);
  border:1px solid var(--az-line);display:flex;align-items:center;justify-content:center;
  color:var(--az-ink3)}
.az .empty .ic svg{width:24px;height:24px}
.az .empty .h{font-size:14px;font-weight:800}
.az .empty .d{font-size:12px;color:var(--az-ink3);max-width:340px;line-height:2}
/* ۳) خطا: قابل بازیابی */
.az .errbox{display:flex;align-items:center;gap:12px;background:var(--az-red-soft);
  border:1px solid #F2CFC8;border-radius:var(--az-r-m);padding:13px 16px}
.az .errbox .t{flex:1;font-size:12.5px;font-weight:700;color:var(--az-red)}

/* ═══════════ کشو، مودال، توست ═══════════ */
.az .ovl{position:fixed;inset:0;background:rgba(16,36,30,.42);
  backdrop-filter:blur(2px);z-index:80}
.az .drawer{position:fixed;top:0;bottom:0;left:0;width:min(430px,94vw);
  background:var(--az-card);z-index:81;box-shadow:var(--az-sh2);
  display:flex;flex-direction:column;border-radius:0 var(--az-r) var(--az-r) 0}
.az .drawer .hd{display:flex;align-items:center;justify-content:space-between;
  padding:var(--az-sp-4) var(--az-sp-6);border-bottom:1px solid var(--az-line)}
.az .drawer .bd{flex:1;overflow-y:auto;padding:var(--az-sp-5) var(--az-sp-6)}
.az .drawer .ft{padding:var(--az-sp-4) var(--az-sp-6);border-top:1px solid var(--az-line);
  display:flex;gap:var(--az-sp-2)}
.az .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(480px,92vw);background:var(--az-card);z-index:82;
  border-radius:var(--az-r);box-shadow:var(--az-sh2);overflow:hidden}
.az .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--az-ink);color:#fff;font-size:12.5px;font-weight:700;
  border-radius:12px;padding:11px 18px;z-index:90;box-shadow:var(--az-sh2)}
.az .toast.ok{background:var(--az-teal)}
.az .toast.err{background:var(--az-red)}

/* ═══════════ ابزارک‌ها ═══════════ */
.az .hr{border:none;border-top:1px solid var(--az-line);margin:var(--az-sp-4) 0}
.az .row{display:flex;align-items:center;gap:var(--az-sp-3)}
.az .row.between{justify-content:space-between}
.az .stack{display:flex;flex-direction:column;gap:var(--az-sp-3)}
.az .avatar{width:34px;height:34px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,var(--az-teal2),var(--az-teal));
  color:#fff;font-weight:900;font-size:13px;
  display:flex;align-items:center;justify-content:center}
.az .avstack{display:flex}
.az .avstack .avatar{width:26px;height:26px;font-size:10.5px;border-radius:9px;
  border:2px solid var(--az-card);margin-left:-7px}
.az .avstack .avatar:first-child{margin-left:0}

/* ═══════════ چاپ ═══════════ */
@media print{
  .az{background:#fff}
  .az .card,.az .kpi,.az .tbl-wrap{box-shadow:none;border-color:#BFCDC7}
  .az .btn,.az .rowact,.az .tabs{display:none !important}
}