/* ================================================================
   پژوهش آریا راهکار سلامت — Design System  (Refined · Light/Dark)
   Matched to production screenshots: calm navy, blue accent,
   subtle borders, minimal glow, readable custom dropdowns.
   ================================================================ */
   @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

   /* ---------- DARK (default) ---------- */
   :root{
     --bg:#070b14; --bg-2:#0a1020;
     --panel:#0d1424; --panel-2:#111a2e; --elev:#141d33;
     --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.11);
     --input:#0f1728; --input-border:rgba(255,255,255,.1);
     --text:#e9eef8; --text-2:#8b93ad; --text-3:#5a6280;
     --primary:#3b82f6; --primary-2:#2563eb; --primary-soft:rgba(59,130,246,.14);
     --teal:#22d3ee; --teal-2:#2dd4bf;
     --green:#34d399; --amber:#fbbf24; --red:#f87171; --purple:#a78bfa; --pink:#f472b6;
     --sidebar:#0a1120;
     --shadow:0 8px 30px rgba(0,0,0,.4);
     --shadow-sm:0 2px 10px rgba(0,0,0,.25);
     --ring:rgba(59,130,246,.35);
     --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
     --ease:cubic-bezier(.4,.1,.25,1); --spring:cubic-bezier(.34,1.4,.5,1);
     --grad-primary:linear-gradient(135deg,#3b82f6,#2563eb);
     --grad-blue-fade:linear-gradient(180deg,rgba(59,130,246,.28),rgba(34,211,238,.02));
   }
   /* ---------- LIGHT ---------- */
   html[data-theme="light"]{
     --bg:#eef1f7; --bg-2:#e6eaf2;
     --panel:#ffffff; --panel-2:#f7f9fc; --elev:#ffffff;
     --border:rgba(15,25,50,.09); --border-2:rgba(15,25,50,.14);
     --input:#f2f5fa; --input-border:rgba(15,25,50,.14);
     --text:#141c2e; --text-2:#5b6478; --text-3:#8b93a7;
     --primary:#2563eb; --primary-2:#1d4ed8; --primary-soft:rgba(37,99,235,.1);
     --teal:#0891b2; --teal-2:#0d9488;
     --green:#059669; --amber:#d97706; --red:#dc2626; --purple:#7c3aed; --pink:#db2777;
     --sidebar:#ffffff;
     --shadow:0 8px 28px rgba(30,50,90,.1);
     --shadow-sm:0 2px 10px rgba(30,50,90,.06);
     --ring:rgba(37,99,235,.28);
   }
   
   *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
   html{scroll-behavior:smooth}
   /* نرم شدن اسکرول: هر ناحیه‌ی قابل‌اسکرول داخل برنامه (لیست‌ها، جدول‌ها، چت، منو، مودال) */
   .nav, .table-wrap, .chat-msgs, .modal, .uperm-list, #pages, .doc-modal-body{
     scroll-behavior:smooth;
   }
   @media (prefers-reduced-motion: reduce){
     html, .nav, .table-wrap, .chat-msgs, .modal, .uperm-list, #pages, .doc-modal-body{
       scroll-behavior:auto;
     }
   }

   /* نرم شدن رفرش: نوار پیشرفت نازک بالای صفحه هنگام آپدیت زنده/رفرش محتوا */
   #live-refresh-bar{
     position:fixed; inset-inline:0; top:0; height:3px; z-index:9999;
     background:linear-gradient(90deg,var(--primary),#60a5fa);
     transform:scaleX(0); transform-origin:right; /* RTL: از راست پر می‌شود */
     opacity:0; transition:transform .32s ease, opacity .18s ease;
     pointer-events:none; border-radius:0 0 4px 4px;
   }
   #live-refresh-bar.on{ transform:scaleX(1); opacity:1; }
   #live-refresh-bar.done{ transform:scaleX(1); opacity:0; }

   /* نرم شدن رفرش: محو‌شدن/ظاهرشدن ملایم محتوای صفحه هنگام رفرش زنده به‌جای پرش ناگهانی */
   .page.soft-fade-out{ opacity:.35; transition:opacity .16s ease; }
   .page.soft-fade-in{ opacity:1; transition:opacity .22s ease; }

   /* پاپ‌آپ اعلان در گوشه‌ی صفحه (مثل تلگرام) — جدا از toast عمومی */
   #notif-toast-wrap{
     position:fixed; top:18px; left:18px; z-index:300;
     display:flex; flex-direction:column; gap:10px;
     width:320px; max-width:calc(100vw - 32px);
     pointer-events:none;
   }
   .notif-toast{
     pointer-events:auto; cursor:pointer;
     display:flex; align-items:flex-start; gap:10px;
     background:var(--elev); border:1px solid var(--border-2); border-radius:var(--r-lg);
     box-shadow:var(--shadow); padding:12px 14px;
     transform:translateX(-120%); opacity:0;
     transition:transform .32s var(--spring,cubic-bezier(.2,.8,.2,1)), opacity .28s ease;
   }
   .notif-toast.in{ transform:translateX(0); opacity:1; }
   .notif-toast.out{ transform:translateX(-120%); opacity:0; }
   .notif-toast .nt-ic{
     flex-shrink:0; width:36px; height:36px; border-radius:50%;
     display:flex; align-items:center; justify-content:center;
     background:var(--primary-soft); color:var(--primary);
   }
   .notif-toast .nt-body{ min-width:0; flex:1 }
   .notif-toast .nt-title{ font-weight:700; font-size:13px; margin-bottom:2px }
   .notif-toast .nt-text{ font-size:12px; color:var(--text-2,#64748b); overflow:hidden;
     display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
   .notif-toast .nt-close{
     flex-shrink:0; width:20px; height:20px; border-radius:50%; border:none; background:transparent;
     color:var(--text-3,#94a3b8); cursor:pointer; display:flex; align-items:center; justify-content:center;
   }
   .notif-toast .nt-close:hover{ background:var(--border-2); }
   @media (max-width:640px){
     #notif-toast-wrap{ left:8px; right:8px; width:auto; top:8px; }
   }

   @media (max-width:768px), (pointer:coarse){
     input,select,textarea,button,.input{font-size:16px !important}
   }
   body{font-family:'Vazirmatn',system-ui,sans-serif;background:var(--bg);color:var(--text);
     min-height:100vh;overflow-x:hidden;line-height:1.7;-webkit-font-smoothing:antialiased;
     transition:background .4s var(--ease),color .3s var(--ease)}
   a{color:inherit;text-decoration:none}
   button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
   input,select,textarea{font-family:inherit}
   svg{width:20px;height:20px;flex-shrink:0}
   ::selection{background:var(--primary-soft)}
   
   /* subtle ambient */
   .ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
     radial-gradient(900px 500px at 92% -8%,rgba(59,130,246,.08),transparent 60%),
     radial-gradient(700px 500px at 5% 100%,rgba(34,211,238,.05),transparent 60%);}
   html[data-theme="light"] .ambient{background:
     radial-gradient(900px 500px at 92% -8%,rgba(59,130,246,.06),transparent 60%),
     radial-gradient(700px 500px at 5% 100%,rgba(8,145,178,.04),transparent 60%);}
   .grain{display:none}
   
   /* ---------- Surfaces ---------- */
   .panel,.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
   .panel{padding:22px;margin-bottom:20px}
   .card{padding:20px}
   .card-hover{transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
   .card-hover:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--shadow)}
   .glass,.glass-strong{background:var(--panel);border:1px solid var(--border)}
   
   /* ---------- Layout ---------- */
   .app{display:flex;min-height:100vh}
   .sidebar{width:262px;flex-shrink:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
     padding:16px 12px;gap:4px;background:var(--sidebar);border-inline-start:1px solid var(--border);z-index:40}
   .brand{display:flex;align-items:center;gap:11px;padding:6px 8px 15px;border-bottom:1px solid var(--border);margin-bottom:8px}
   .brand-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--grad-primary);color:#fff;box-shadow:0 4px 14px rgba(59,130,246,.35)}
   .brand-logo svg{width:22px;height:22px}
   .brand h1{font-size:13.5px;font-weight:800}
   .brand p{font-size:10px;color:var(--text-2)}
   .nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;padding-inline-start:2px}
   .nav-item{display:flex;align-items:center;gap:11px;padding:9.5px 13px;border-radius:var(--r-md);
     font-size:13px;font-weight:600;color:var(--text-2);transition:all .2s var(--ease);position:relative}
   .nav-item svg{width:18px;height:18px}
   .nav-item:hover{color:var(--text);background:var(--panel-2)}
   .nav-item.active{color:#fff;background:var(--grad-primary);box-shadow:0 4px 14px rgba(59,130,246,.32);font-weight:700}
   .nav-item .badge{margin-inline-start:auto;font-size:10px;font-weight:700;padding:1px 8px;border-radius:var(--r-pill);background:var(--panel-2);color:var(--primary)}
   .nav-item.active .badge{background:rgba(255,255,255,.22);color:#fff}
   .nav-sep{font-size:9.5px;font-weight:700;color:var(--text-3);padding:12px 13px 4px;letter-spacing:.04em}
   
   .main{flex:1;min-width:0;display:flex;flex-direction:column}
   .topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:13px 24px;
     background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
   .topbar h2{font-size:19px;font-weight:800}
   .topbar .sub{font-size:11.5px;color:var(--text-2)}
   .page-wrap{padding:24px;flex:1}
   
   .icon-btn{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--text-2);
     transition:all .2s var(--ease);position:relative;border:1px solid transparent}
   .icon-btn:hover{background:var(--panel);color:var(--text);border-color:var(--border)}
   .icon-btn .dot{position:absolute;top:6px;left:6px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
     background:var(--red);color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
   .search-box{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-md);background:var(--input);
     border:1px solid var(--input-border);min-width:210px;color:var(--text-2)}
   .search-box input{background:none;border:none;outline:none;color:var(--text);font-size:12.5px;width:100%}
   .avatar{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;font-weight:800;
     background:var(--grad-primary);color:#fff}
   
   /* sound toggle bottom-left like screenshots */
   .sound-btn{position:fixed;bottom:18px;left:18px;width:44px;height:44px;border-radius:var(--r-pill);z-index:50;
     display:grid;place-items:center;color:var(--text-2);background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
   .sound-btn:hover{color:var(--primary)}
   
   /* ---------- Buttons ---------- */
   .btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:var(--r-md);font-size:12.5px;font-weight:700;
     transition:all .2s var(--ease);white-space:nowrap;border:1px solid transparent}
   .btn svg{width:16px;height:16px}
   .btn:active{transform:scale(.97)}
   .btn-primary{background:var(--grad-primary);color:#fff;box-shadow:0 3px 12px rgba(59,130,246,.3)}
   .btn-primary:hover{filter:brightness(1.07)}
   .btn-green{background:linear-gradient(135deg,var(--green),#059669);color:#fff}
   .btn-green:hover{filter:brightness(1.07)}
   .btn-ghost{background:var(--panel);border-color:var(--border);color:var(--text)}
   .btn-ghost:hover{background:var(--panel-2);border-color:var(--border-2)}
   .btn-danger{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
   .btn-danger:hover{background:color-mix(in srgb,var(--red) 24%,transparent)}
   .btn-sm{padding:7px 12px;font-size:12px;border-radius:var(--r-sm)}
   .btn-block{width:100%;justify-content:center}
   
   /* ---------- Chips / filters ---------- */
   .chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
   .chip{padding:7px 15px;border-radius:var(--r-pill);font-size:12px;font-weight:700;color:var(--text-2);
     background:var(--panel);border:1px solid var(--border);transition:all .2s var(--ease)}
   .chip:hover{color:var(--text);border-color:var(--border-2)}
   .chip.active{color:#fff;background:var(--grad-primary);border-color:transparent}
   
   /* iOS segmented */
   .segment{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--input);border:1px solid var(--border)}
   .segment button{padding:6px 15px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;color:var(--text-2);transition:all .25s var(--ease)}
   .segment button.active{background:var(--grad-primary);color:#fff}
   
   /* iOS toggle */
   .switch{width:46px;height:26px;border-radius:var(--r-pill);background:var(--input-border);position:relative;transition:background .3s;cursor:pointer;flex-shrink:0}
   .switch::after{content:'';position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;background:#fff;transition:all .3s var(--spring);box-shadow:0 1px 4px rgba(0,0,0,.3)}
   .switch.on{background:var(--primary)}
   .switch.on::after{right:calc(100% - 24px)}
   
   /* ---------- KPI cards ---------- */
   .kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
   .kpi{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-sm);transition:border-color .25s,transform .25s}
   .kpi:hover{border-color:var(--border-2);transform:translateY(-2px)}
   .kpi .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:13px}
   .kpi .label{font-size:11.5px;color:var(--text-2);font-weight:600}
   .kpi .val{font-size:25px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
   .kpi .sub{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;margin-top:7px}
   .c-blue .ic{background:var(--primary-soft);color:var(--primary)} .c-blue .sub{color:var(--primary)}
   .c-teal .ic{background:color-mix(in srgb,var(--teal) 15%,transparent);color:var(--teal)} .c-teal .sub{color:var(--teal)}
   .c-green .ic{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)} .c-green .sub{color:var(--green)}
   .c-amber .ic{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)} .c-amber .sub{color:var(--amber)}
   .c-red .ic{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)} .c-red .sub{color:var(--red)}
   .c-purple .ic{background:color-mix(in srgb,var(--purple) 15%,transparent);color:var(--purple)} .c-purple .sub{color:var(--purple)}
   
   /* big stat cards (accounting/partners) */
   .stat-big{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;display:flex;align-items:flex-start;justify-content:space-between}
   .stat-big.ring-green{border-color:color-mix(in srgb,var(--green) 35%,transparent)}
   .stat-big.ring-red{border-color:color-mix(in srgb,var(--red) 35%,transparent)}
   .stat-big .lbl{font-size:12px;color:var(--text-2)}
   .stat-big .num{font-size:26px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;direction:ltr;text-align:right}
   .stat-big .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
   
   /* ---------- Panel head ---------- */
   .panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
   .panel-head h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
   .panel-head h3 svg{color:var(--primary);width:18px;height:18px}
   .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
   .head-actions{display:flex;gap:9px;flex-wrap:wrap}
   
   /* ---------- Tables (straight divider lines, even rows) ---------- */
   .table-wrap{overflow-x:auto;border-radius:var(--r-lg);-webkit-overflow-scrolling:touch}
   #pages table, .panel table, .table-wrap table{
     width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px;
     table-layout:auto;
   }
   #pages thead th, .panel thead th, .table-wrap thead th{
     text-align:right; padding:0 14px; height:44px;
     font-size:11px; font-weight:700; color:var(--text-2);
     white-space:nowrap; vertical-align:middle !important;
     background:color-mix(in srgb,var(--panel-2) 55%, transparent);
     border:none;
     box-shadow: inset 0 -1px 0 var(--border-2);
     position:sticky; top:0; z-index:1;
   }
   #pages tbody td, .panel tbody td, .table-wrap tbody td{
     padding:0 14px; height:52px; max-height:52px;
     white-space:nowrap; vertical-align:middle !important;
     border:none !important;
     box-shadow: inset 0 -1px 0 var(--border-2);
     line-height:1.35;
   }
   #pages tbody tr, .panel tbody tr, .table-wrap tbody tr{
     transition:background .15s; height:52px;
   }
   #pages tbody tr:hover, .panel tbody tr:hover{background:var(--panel-2)}
   #pages tbody tr:last-child td, .panel tbody tr:last-child td{box-shadow:none}
   /* multi-line note under name: don't break row height rhythm */
   #pages tbody td .text-xs, #pages tbody td .text-2.fw-500{
     display:block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
     line-height:1.2; margin-top:2px;
   }
   #pages tbody td .row-actions,
   #pages tbody td .stock-step,
   #pages tbody td .dd,
   #pages tbody td .badge-s,
   #pages tbody td .inv-pill,
   #pages tbody td .inv-pill2,
   #pages tbody td .btn,
   #pages tbody td .act{
     vertical-align:middle; display:inline-flex; align-items:center;
   }
   #pages tbody td .act{justify-content:center}
   #pages tbody td .row-actions{gap:4px; flex-wrap:nowrap}
   #pages tbody td .dd{min-width:120px}
   #pages tbody td .dd-btn{height:34px; min-height:34px; padding:0 10px}
   #pages tbody td .stock-step{height:34px}
   #pages tbody td .badge-s, #pages tbody td .inv-pill2{max-width:100%; overflow:hidden; text-overflow:ellipsis}
   .cell-strong{font-weight:700}
   .mono{font-variant-numeric:tabular-nums;direction:ltr;display:inline-block}
   
   /* ---------- Badges ---------- */
   .badge-s{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3.5px 10px;border-radius:var(--r-pill)}
   .badge-s::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
   .b-blue{color:var(--primary);background:var(--primary-soft)}
   .b-teal{color:var(--teal);background:color-mix(in srgb,var(--teal) 13%,transparent)}
   .b-green{color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent)}
   .b-amber{color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent)}
   .b-red{color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent)}
   .b-purple{color:var(--purple);background:color-mix(in srgb,var(--purple) 13%,transparent)}
   .b-gray{color:var(--text-2);background:var(--panel-2)}
   
   /* ---------- Forms + custom dropdown (readable!) ---------- */
   .field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
   .field label{font-size:12px;font-weight:600;color:var(--text-2)}
   .input,textarea.input{width:100%;padding:11px 14px;border-radius:var(--r-md);font-size:13px;color:var(--text);
     background:var(--input);border:1px solid var(--input-border);outline:none;transition:all .2s var(--ease)}
   .input::placeholder{color:var(--text-3)}
   .input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring);background:var(--panel)}
   .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 16px}
   
   /* Custom dropdown — matches theme, fully readable */
   .dd{position:relative}
   .dd-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:11px 14px;border-radius:var(--r-md);
     font-size:13px;font-weight:600;color:var(--text);background:var(--input);border:1px solid var(--input-border);transition:all .2s}
   .dd-btn:hover{border-color:var(--border-2)}
   .dd.open .dd-btn{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
   .dd-btn .chev{width:16px;height:16px;color:var(--text-2);transition:transform .25s}
   .dd.open .dd-btn .chev{transform:rotate(180deg)}
   .dd-menu{position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:60;background:var(--elev);border:1px solid var(--border-2);
     border-radius:var(--r-md);box-shadow:var(--shadow);padding:5px;max-height:260px;overflow-y:auto;
     opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:all .2s var(--ease);transform-origin:top}
   .dd.open .dd-menu{opacity:1;transform:none;pointer-events:auto}
   .dd-opt{padding:9px 12px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;transition:background .15s;display:flex;align-items:center;gap:8px}
   .dd-opt:hover{background:var(--panel-2)}
   .dd-opt.sel{background:var(--primary-soft);color:var(--primary)}
   .dd-opt .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
   
   /* row actions */
   .row-actions{display:flex;gap:5px}
   .act{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--text-2);transition:all .18s}
   .act svg{width:15px;height:15px}
   .act:hover{background:var(--panel-2);color:var(--primary)}
   .act.danger:hover{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
   .act.ok:hover{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
   
   /* entity card (devices/repairs/technicians/partners) */
   .ec{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-sm);transition:all .25s var(--ease)}
   .ec:hover{border-color:var(--border-2);transform:translateY(-2px);box-shadow:var(--shadow)}
   .ec-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal)}
   .ec-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:3px 0}
   .ec-row .k{color:var(--text-2)} .ec-row .v{font-weight:700}
   .ec-line{height:3px;border-radius:2px;margin-top:14px}
   
   /* ---------- Modal ---------- */
   .modal-back{position:fixed;inset:0;z-index:100;background:rgba(3,6,14,.6);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
   .modal-back.show{opacity:1;pointer-events:auto}
   .modal{width:100%;max-width:560px;max-height:90vh;overflow-y:auto;background:var(--elev);border:1px solid var(--border-2);border-radius:var(--r-xl);padding:24px;box-shadow:var(--shadow);transform:scale(.94) translateY(14px);transition:transform .32s var(--spring)}
   .modal-back.show .modal{transform:none}
   .modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
   .modal-head h3{font-size:17px;font-weight:800}
   
   /* drawer */
   .drawer{position:fixed;top:0;right:0;height:100vh;width:330px;z-index:60;padding:18px;display:flex;flex-direction:column;gap:12px;
     background:var(--sidebar);border-inline-start:1px solid var(--border-2);transform:translateX(100%);transition:transform .4s var(--spring);box-shadow:var(--shadow)}
   .drawer.show{transform:none}
   .msg{display:flex;gap:10px;padding:11px;border-radius:var(--r-md);background:var(--panel-2);transition:background .18s}
   .msg:hover{background:var(--panel)}
   .msg .av{width:36px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;flex-shrink:0;position:relative}
   
   /* notif dropdown */
   .notif-drop{position:absolute;top:50px;left:0;width:320px;background:var(--elev);border:1px solid var(--border-2);border-radius:var(--r-lg);
     box-shadow:var(--shadow);padding:7px;z-index:70;transform:scale(.95) translateY(-6px);opacity:0;pointer-events:none;transform-origin:top left;transition:all .25s var(--spring)}
   .notif-drop.show{transform:none;opacity:1;pointer-events:auto}
   .notif-item{display:flex;gap:10px;padding:11px;border-radius:var(--r-md);transition:background .18s}
   .notif-item:hover{background:var(--panel-2)}
   .notif-item .ni{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
   
   /* daily popup */
   .daily-pop{position:fixed;bottom:22px;right:22px;z-index:90;width:340px;background:var(--elev);border:1px solid var(--border-2);border-radius:var(--r-xl);
     padding:20px;box-shadow:var(--shadow);transform:translateY(140%);opacity:0;transition:all .5s var(--spring)}
   .daily-pop.show{transform:none;opacity:1}
   .daily-pop .bell-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber);animation:ring 1.4s var(--spring) 2}
   @keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(9deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
   
   /* toast */
   .toast-wrap{position:fixed;top:18px;right:50%;transform:translateX(50%);z-index:200;display:flex;flex-direction:column;gap:9px;align-items:center}
   .toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;
     background:var(--elev);border:1px solid var(--border-2);box-shadow:var(--shadow);transform:translateY(-24px);opacity:0;animation:toastIn .45s var(--spring) forwards}
   .toast svg{width:17px;height:17px}
   @keyframes toastIn{to{transform:none;opacity:1}}
   
   /* charts */
   .chart-box{position:relative;height:270px;width:100%}
   .chart-box.sm{height:210px}
   .chart-box canvas{width:100%!important}
   .chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
   .chart-legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2)}
   .chart-legend i{width:9px;height:9px;border-radius:3px}
   
   /* matrix */
   .matrix td,.matrix th{text-align:center}
   .perm-table td:first-child,.perm-table th:first-child{text-align:right;min-width:190px}
   .perm-table th{font-weight:800;font-size:12.5px;color:var(--text-2);white-space:nowrap}
   .matrix-sep td{text-align:right!important;background:var(--panel-2);color:var(--primary);font-weight:800;font-size:12px;padding:7px 12px!important;letter-spacing:.2px}
   .chk.chk-lock{opacity:.55;cursor:not-allowed;pointer-events:none}
   .matrix td:first-child,.matrix th:first-child{text-align:right}
   .chk{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--input-border);display:inline-grid;place-items:center;cursor:pointer;transition:all .2s var(--spring);background:var(--input)}
   .chk svg{width:14px;height:14px;opacity:0;transform:scale(.5);transition:all .2s var(--spring);color:#fff}
   .chk.on{background:var(--primary);border-color:transparent}
   .chk.on svg{opacity:1;transform:none}
   
   /* login */
   .login-screen{min-height:100vh;display:grid;place-items:center;padding:24px}
   .login-card{width:100%;max-width:410px;background:var(--panel);border:1px solid var(--border-2);border-radius:var(--r-xl);padding:36px 30px;text-align:center;box-shadow:var(--shadow)}
   .login-card .logo{width:66px;height:66px;border-radius:20px;margin:0 auto 18px;display:grid;place-items:center;background:var(--grad-primary);color:#fff;box-shadow:0 8px 24px rgba(59,130,246,.35)}
   .login-card .logo svg{width:34px;height:34px}
   .otp-row{display:flex;gap:9px;justify-content:center;direction:ltr;margin:18px 0}
   .otp-row input{width:50px;height:58px;text-align:center;font-size:22px;font-weight:800;border-radius:var(--r-md);background:var(--input);border:1px solid var(--input-border);color:var(--text);outline:none;transition:all .2s}
   .otp-row input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
   
   /* utils */
   .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
   .grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
   .flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
   .gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.wrap{flex-wrap:wrap}.flex-1{flex:1}.min-w-0{min-width:0}
   .mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
   .text-2{color:var(--text-2)}.text-3{color:var(--text-3)}.text-sm{font-size:12px}.text-xs{font-size:11px}
   .fw-800{font-weight:800}.fw-700{font-weight:700}.hidden{display:none!important}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
   .divider{height:1px;background:var(--border-2);margin:16px 0;border:none}
   .pulse{width:8px;height:8px;border-radius:50%;background:var(--green);position:relative}
   .pulse::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--green);animation:pulse 1.9s var(--ease) infinite}
   @keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2);opacity:0}}
   .bar{height:7px;border-radius:var(--r-pill);background:var(--panel-2);overflow:hidden}
   .bar>span{display:block;height:100%;border-radius:var(--r-pill);background:var(--grad-primary)}
   .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--spring)}
   .reveal.in{opacity:1;transform:none}
   .page{display:none;animation:pageIn .4s var(--ease)}.page.active{display:block}
   @keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
   /* v9: soft in-page updates must not replay pageIn / reveal */
   body.soft-nav .page,
   .page.soft-updating{animation:none !important}
   body.soft-nav .reveal,
   .page.soft-updating .reveal{opacity:1 !important;transform:none !important;transition:none !important}
   .stock-val{transition:color .15s ease}
   .stock-val.flash{color:var(--primary)}
   tr.row-flash{background:color-mix(in srgb,var(--primary) 10%,transparent);transition:background .35s ease}
   
   .menu-toggle{display:none}
   .sidebar-close{display:none !important}
   .sidebar-backdrop{
     display:none; position:fixed; inset:0; z-index:45;
     background:rgba(3,6,14,.55); backdrop-filter:blur(3px);
     opacity:0; pointer-events:none; transition:opacity .28s var(--ease);
   }
   .sidebar-backdrop.show{opacity:1; pointer-events:auto}

   /* =========================
      RESPONSIVE — TABLET ≤1024
      ========================= */
   @media(max-width:1024px){
     .menu-toggle{display:grid !important}
     .sidebar-close{display:grid !important; flex-shrink:0}
     .sidebar-backdrop{display:block}

     .sidebar{
       position:fixed !important;
       top:0; right:0; left:auto;
       width:min(300px, 88vw);
       height:100vh; height:100dvh;
       transform:translateX(110%);
       transition:transform .38s var(--spring);
       z-index:50;
       box-shadow:var(--shadow);
       padding-top:max(12px, env(safe-area-inset-top));
       padding-bottom:max(12px, env(safe-area-inset-bottom));
     }
     .sidebar.open{transform:translateX(0)}
     body.sidebar-open{overflow:hidden; touch-action:none}

     .main{width:100%; min-width:0}
     .topbar{
       padding:10px 12px;
       gap:8px;
       flex-wrap:nowrap;
     }
     .topbar h2{font-size:16px; line-height:1.3}
     .topbar .sub{display:none}
     .page-wrap{padding:14px 12px 28px}

     .search-box{min-width:0; width:min(160px, 28vw); padding:8px 10px}
     .search-box input{font-size:12px}

     .drawer{width:min(400px, 94vw); max-width:100vw}
     .notif-drop{width:min(320px, calc(100vw - 24px)); left:auto; right:0}

     .kpi-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
     .grid-2,.grid-3{grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:12px}
     .form-grid{grid-template-columns:1fr 1fr; gap:0 12px}

     .page-head{flex-direction:column; align-items:stretch; gap:10px; margin-bottom:14px}
     .head-actions{width:100%; display:flex; flex-wrap:wrap; gap:8px}
     .head-actions .btn{flex:1 1 auto; justify-content:center; min-height:42px}

     .panel{padding:14px}
     .panel-head{gap:8px; margin-bottom:12px}
     .panel-head h3{font-size:14px}

     .chart-box{height:220px; min-height:200px}
     .chart-box.sm{height:180px; min-height:160px}

     .stat-big .num{font-size:20px}
     .modal{max-width:min(560px, calc(100vw - 20px)); padding:18px; max-height:min(92vh, 92dvh)}
     .modal-back{padding:12px; align-items:end}
     .modal-lg{max-width:min(720px, calc(100vw - 16px))}

     .table-wrap{
       overflow-x:auto; -webkit-overflow-scrolling:touch;
       margin-inline:-4px; padding-bottom:4px;
     }
     table{font-size:12px; min-width:640px}
     thead th, tbody td{padding:11px 12px}

     .btn{min-height:40px; padding:10px 14px; font-size:13px}
     .icon-btn{width:42px; height:42px; flex-shrink:0}
     .nav-item{padding:12px 14px; font-size:14px; min-height:44px}
     .nav-item svg{width:20px; height:20px}

     .chat-room-shell{max-width:100%; min-height:min(75vh, 620px)}
     .support-layout{grid-template-columns:1fr !important}

     .sound-btn{bottom:max(14px, env(safe-area-inset-bottom)); left:max(14px, env(safe-area-inset-left))}
   }

   /* =========================
      RESPONSIVE — PHONE ≤768
      ========================= */
   @media(max-width:768px){
     /* جلوگیری از زوم خودکار iOS Safari هنگام فوکوس روی فیلدها
        (هر input با font-size زیر 16px باعث زوم صفحه می‌شود) */
     input, textarea, select, .input{font-size:16px !important}
     .otp-row input{font-size:20px !important}
     .topbar{
       padding:8px 10px;
       gap:6px;
       position:sticky;
       top:0;
     }
     .topbar > div:not([style*="margin"]) { min-width:0; flex:1 }
     .topbar h2{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw}
     /* collapse top search into icon-row space */
     .topbar .search-box{
       display:none; /* use page-level search boxes which are full width */
     }
     .topbar .flex.items-center.gap-3{gap:4px !important}

     .page-wrap{padding:12px 10px 32px}

     .kpi-grid{grid-template-columns:1fr 1fr; gap:8px}
     .kpi{padding:12px}
     .kpi .val{font-size:20px}
     .kpi .label{font-size:11px}
     .kpi .ic{width:36px; height:36px}

     .grid-2,.grid-3{
       grid-template-columns:1fr !important;
       gap:10px;
     }
     .form-grid{grid-template-columns:1fr !important}

     .page-head{margin-bottom:12px}
     .head-actions{flex-direction:column}
     .head-actions .btn{width:100%; flex:none}

     .panel{padding:12px; border-radius:var(--r-md)}
     .ec{padding:12px}

     .chart-box{height:200px; min-height:180px}
     .chart-box.sm{height:170px; min-height:150px}

     .stat-big{padding:14px; flex-wrap:wrap; gap:10px}
     .stat-big .num{font-size:18px}

     table{min-width:560px; font-size:11.5px}
     thead th, tbody td{padding:10px 10px}

     .chips{gap:6px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px}
     .chip{flex:0 0 auto; padding:8px 12px; font-size:12px; min-height:36px}

     .btn{width:auto; font-size:12.5px}
     .btn-block{width:100%}
     .btn-sm{min-height:38px; padding:8px 12px}

     .drawer{
       width:100vw; max-width:100vw;
       padding:12px;
       padding-top:max(12px, env(safe-area-inset-top));
       padding-bottom:max(12px, env(safe-area-inset-bottom));
     }
     .drawer-view{gap:10px}
     .chat-msgs{min-height:40vh}
     .chat-composer .input{font-size:16px} /* prevent iOS zoom */
     .chat-room-shell{min-height:calc(100dvh - 140px); border-radius:var(--r-md)}
     .chat-room-msgs{min-height:45vh}
     .chat-room-head{padding:12px; flex-wrap:wrap}
     .chat-room-composer{padding:10px; gap:8px}
     .chat-room-composer .input{font-size:16px}

     .notif-drop{
       position:fixed; top:60px; left:10px; right:10px; width:auto;
       max-height:min(70vh, 480px); overflow-y:auto;
     }

     .modal-back{padding:0; align-items:stretch; place-items:end center}
     .modal{
       max-width:100vw; width:100%;
       max-height:min(94dvh, 94vh);
       border-radius:var(--r-xl) var(--r-xl) 0 0;
       padding:16px 14px calc(16px + env(safe-area-inset-bottom));
       transform:translateY(20px);
     }
     .modal-back.show .modal{transform:none}
     .modal-lg{max-width:100vw}
     .form-grid .field{grid-column:1 / -1}

     .login-screen{padding:16px}
     .login-card{padding:24px 18px; border-radius:var(--r-lg)}
     .otp-row input{width:42px; height:50px; font-size:18px}

     .date-row{flex-wrap:wrap}
     .date-row .input{min-width:0; flex:1 1 140px}
     .code-field{flex-wrap:wrap}

     .segment{flex-wrap:wrap}
     .segment button{flex:1 1 auto; min-height:40px}

     /* stock stepper readable on phone */
     .stock-step{gap:6px}
     .stepper-btn{width:34px; height:34px; min-width:34px}

     .row-actions{gap:4px; flex-wrap:nowrap}
     .act{width:34px; height:34px}

     .daily-pop{left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); width:auto}

     /* avatar in topbar slightly smaller */
     .topbar .avatar{width:36px; height:36px; font-size:14px}

     .support-layout{gap:12px}
     .peer-chip{font-size:12px; padding:8px 12px; min-height:36px}
   }

   /* =========================
      RESPONSIVE — SMALL ≤480
      ========================= */
   @media(max-width:480px){
     html{font-size:15px}
     body{line-height:1.65}

     .topbar h2{font-size:14px; max-width:38vw}
     .page-wrap{padding:10px 8px 36px}

     .kpi-grid{grid-template-columns:1fr; gap:8px}
     .kpi{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:2px 10px; align-items:center}
     .kpi .ic{grid-row:1 / span 2}
     .kpi .val{font-size:22px}
     .kpi .sub{grid-column:2}

     .sidebar{width:min(320px, 92vw)}
     .brand h1{font-size:12.5px}
     .brand p{font-size:9.5px}

     table{min-width:520px}
     .panel-head{flex-direction:column; align-items:stretch}
     .panel-head .search-box{width:100%; min-width:0}

     .search-box{width:100%; min-width:0}
     #pages .search-box{width:100% !important; min-width:0 !important}

     .btn{font-size:13px; padding:11px 14px; min-height:44px}
     .icon-btn{width:44px; height:44px}

     .chart-box{height:190px}
     .toast{max-width:calc(100vw - 24px); font-size:13px}

     .chat-bubble{max-width:90%; font-size:13.5px}
     .chat-from{font-size:11px}

     .dd-menu{max-height:50vh}
   }

   /* Landscape phones */
   @media(max-width:900px) and (max-height:500px) and (orientation:landscape){
     .sidebar{width:min(260px, 70vw)}
     .chart-box{height:160px; min-height:140px}
     .chat-room-shell{min-height:calc(100dvh - 100px)}
     .modal{max-height:96dvh}
   }

   /* Prefer larger tap targets on coarse pointers */
   @media(pointer:coarse){
     .nav-item,.btn,.icon-btn,.chip,.act,.stepper-btn,.peer-chip{touch-action:manipulation}
     .nav-item{min-height:46px}
     .btn{min-height:44px}
   }
   ::-webkit-scrollbar{width:8px;height:8px}
   ::-webkit-scrollbar-track{background:transparent}
   ::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:8px}
   
   /* ---------- date field + today btn + code field + range ---------- */
   .date-row{display:flex;gap:8px}
   .date-row .input{flex:1}
   .btn-today{white-space:nowrap;padding:0 14px;border-radius:var(--r-md);background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:12px;border:1px solid transparent;display:flex;align-items:center;gap:6px}
   .btn-today:hover{background:color-mix(in srgb,var(--primary) 20%,transparent)}
   .code-field{display:flex;gap:8px;align-items:center}
   .code-field .input{flex:1;font-family:monospace;letter-spacing:.5px;color:var(--primary);font-weight:700}
   .code-regen{width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--panel-2);color:var(--text-2);border:1px solid var(--border)}
   .code-regen:hover{color:var(--primary);border-color:var(--border-2)}
   .rng{width:100%;-webkit-appearance:none;height:7px;border-radius:9px;background:var(--panel-2);outline:none}
   .rng::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:0 2px 6px rgba(59,130,246,.4)}
   .rng-val{font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}
   .modal-lg{max-width:720px}
   
   /* ---------- print ----------
      NOTE: #print-area was a legacy print target from an older implementation
      and is never populated by app.js anymore (see App.showPrintModal, which
      uses #doc-modal-host / #doc-sheet instead). The old #print-area print
      rules used `body *{visibility:hidden!important}` — since visibility:hidden
      (unlike display:none) still occupies layout space, and #doc-modal-host is
      appended as the LAST child of <body> (after the full #app-root dashboard),
      this created a real risk of the dashboard's hidden-but-still-laid-out
      height pushing the actual printable content down past the first page,
      and of two competing "hide everything except X" rules fighting by CSS
      specificity instead of intent. Removed as dead/conflicting code — the
      single #doc-modal-host print block below (search "In-page print / excel
      modal") is the only print path that should exist now. */
   #print-area{display:none}
   
   /* ===== v3 patches: date picker + premium donuts ===== */
   .hidden-date{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
   .date-pick-btn{position:relative;cursor:pointer;overflow:hidden}
   .date-pick-btn input[type=date]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
   .date-row{display:flex;align-items:center;gap:8px}
   .date-row .input{flex:1}
   .chart-box{position:relative}
   .chart-box canvas{filter:drop-shadow(0 8px 18px rgba(59,130,246,.18))}
   .chart-legend{display:flex;flex-wrap:wrap;gap:10px 14px;padding:4px 8px 12px;justify-content:center}
   .chart-legend span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2);font-weight:600}
   .chart-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 15%,transparent)}
   .donut-wrap{position:relative}
   .panel .chart-box{min-height:240px}
   .panel .chart-box.sm{min-height:190px}
   .btn-today{white-space:nowrap}
   .mono{font-variant-numeric:tabular-nums}
   /* (legacy #print-area @media print block removed — see note above #print-area) */
   
   /* v5 ops ui */
   .date-row.compact{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
   .date-row.compact .date-input{flex:1;min-width:0;padding:10px 12px}
   .date-row.compact .btn-today{padding:8px 10px;font-size:11px;white-space:nowrap}
   .hidden-date{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
   .segment button{padding:8px 12px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border);font-size:12px;font-weight:700}
   .segment button.active{background:var(--primary-soft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 40%,transparent)}
   .segment{display:flex;gap:6px}
   #acc-live .num{font-size:18px}
   
   #print-frame{position:fixed!important;width:0!important;height:0!important;border:0!important;opacity:0!important}
   button.badge-s{font:inherit}
   
   /* ===== In-page print / excel modal (works in iframe previews) ===== */
   #doc-modal-host{position:relative;z-index:10000}
   .doc-modal-back{position:fixed;inset:0;background:rgba(3,8,18,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10000}
   .doc-modal{width:min(920px,100%);max-height:92vh;background:#fff;color:#0f172a;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden}
   .doc-modal-wide{width:min(1100px,100%)}
   .doc-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:#0d1424;color:#e9eef8;border-bottom:1px solid rgba(255,255,255,.08)}
   .doc-modal-title{font-weight:800;font-size:13px}
   .doc-modal-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
   .doc-modal-body{overflow:auto;padding:16px;background:#f8fafc}
   .doc-modal .sheet{background:#fff;border-radius:12px;padding:12px}
   .excel-preview-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
   .excel-preview-table{width:100%;border-collapse:collapse;font-size:12px;background:#fff}
   .excel-preview-table th{background:#1e4f9c;color:#fff;padding:8px;text-align:right}
   .excel-preview-table td{border:1px solid #cbd5e1;padding:7px 8px;text-align:right}
   .excel-preview-table tr:nth-child(even) td{background:#f8fafc}
   #doc-excel-dl{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
   @media print{
     /* display:none (not just visibility:hidden) so the dashboard is actually
        removed from layout — otherwise its full height still reserves space
        above #doc-modal-host (which is appended last, as a sibling of these),
        pushing the real print content past page 1 and leaving it blank. */
     .app,.ambient,#login-screen{display:none!important}
     body *{visibility:hidden!important}
     #doc-modal-host, #doc-modal-host *{visibility:visible!important}
     #doc-modal-host{position:static!important}
     .doc-modal-back{position:static;background:#fff;padding:0;display:block}
     .doc-modal{box-shadow:none;max-height:none;width:100%;border-radius:0}
     .doc-modal-bar,.doc-modal-actions{display:none!important}
     .doc-modal-body{padding:0;background:#fff}
   }
   
   #doc-excel-btn,#doc-pdf-btn{cursor:pointer}
   .doc-modal-actions .btn{white-space:nowrap}
   
   a.btn, a.btn-green, a.btn-primary{display:inline-flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}
   #doc-excel-link,#doc-pdf-btn,[data-action]{pointer-events:auto!important;cursor:pointer!important;position:relative;z-index:2}
   .doc-modal-actions{position:relative;z-index:5}
   .doc-modal-back{z-index:10050!important}
   
   /* ================= Persian (Jalali) calendar picker ================= */
   .jcal-back{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;background:rgba(3,7,18,.55);backdrop-filter:blur(3px);animation:jcalFade .15s ease}
   @keyframes jcalFade{from{opacity:0}to{opacity:1}}
   .jcal{width:min(340px,92vw);background:var(--panel);border:1px solid var(--border-2);border-radius:18px;box-shadow:var(--shadow);padding:14px;font-family:'Vazirmatn',sans-serif;color:var(--text);animation:jcalPop .18s cubic-bezier(.2,.8,.3,1)}
   @keyframes jcalPop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
   .jcal-bar{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:12px}
   .jcal-title{display:flex;align-items:center;gap:8px}
   .jcal-title b{font-size:15px;font-weight:800;min-width:120px;text-align:center}
   .jcal-sel{font-family:'Vazirmatn',sans-serif;font-weight:800;font-size:14px;color:var(--text);background:var(--input);border:1px solid var(--border-2);border-radius:10px;padding:6px 10px;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;text-align:center;text-align-last:center;transition:.15s;max-height:34px}
   .jcal-sel:hover,.jcal-sel:focus{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
   .jcal-msel{min-width:96px}
   .jcal-ysel{min-width:74px}
   .jcal-title{gap:8px}
   .jcal-nav,.jcal-y{width:32px;height:32px;border-radius:10px;border:1px solid var(--border);background:var(--input);color:var(--text-2);font-size:18px;line-height:1;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center}
   .jcal-nav:hover,.jcal-y:hover{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}
   .jcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
   .jcal-wd{text-align:center;font-size:12px;font-weight:700;color:var(--text-3);padding:6px 0}
   .jcal-e{visibility:hidden}
   .jcal-d{aspect-ratio:1;border:1px solid transparent;background:transparent;color:var(--text);border-radius:10px;font-size:14px;font-family:'Vazirmatn',sans-serif;cursor:pointer;transition:.12s;display:inline-flex;align-items:center;justify-content:center}
   .jcal-d:hover{background:var(--primary-soft);color:var(--primary)}
   .jcal-d.t{border-color:var(--primary);color:var(--primary);font-weight:800}
   .jcal-d.sel{background:var(--primary);color:#fff;font-weight:800;border-color:var(--primary)}
   .jcal-foot{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
   

/* ================= Inventory status pill + stock stepper ================= */
.inv-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap;border:1px solid transparent}
.inv-pill .inv-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 20%,transparent)}
.inv-pill.b-green{color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.inv-pill.b-amber{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent);border-color:color-mix(in srgb,var(--amber) 32%,transparent)}
.inv-pill.b-red{color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.stock-step{display:inline-flex;align-items:center;gap:8px}
.stock-step .stock-val{min-width:52px;text-align:center;font-weight:700}
.stepper-btn{width:26px;height:26px;border-radius:8px;border:1px solid var(--input-border);background:var(--input);color:var(--text-2);display:inline-grid;place-items:center;cursor:pointer;transition:all .15s}
.stepper-btn:hover{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}
.stepper-btn svg{width:14px;height:14px}

/* ================= Per-user permissions modal ================= */
.uperm-list{max-height:52vh;overflow-y:auto;margin:2px -4px;padding:0 4px}
.uperm-sep{font-size:11.5px;font-weight:800;color:var(--primary);letter-spacing:.2px;padding:12px 4px 6px;position:sticky;top:0;background:var(--panel);z-index:1}
.uperm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background .15s;border:1px solid transparent}
.uperm-row:hover{background:var(--panel-2);border-color:var(--border)}
.uperm-name{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text)}
.uperm-name svg{width:16px;height:16px;color:var(--text-2)}
.uperm-tag{font-size:10px;font-weight:800;color:var(--amber);background:color-mix(in srgb,var(--amber) 15%,transparent);padding:2px 7px;border-radius:var(--r-pill)}

/* ================= Login error shake ================= */
@keyframes loginShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.login-card.shake{animation:loginShake .5s cubic-bezier(.36,.07,.19,.97) both}


/* ================= Inventory availability badge (v6, refined) ================= */
.inv-pill2{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:var(--r-pill);font-size:12px;font-weight:700;line-height:1;border:1px solid transparent;white-space:nowrap}
.inv-pill2 .inv-ic{display:inline-grid;place-items:center}
.inv-pill2 .inv-ic svg{width:14px;height:14px}
.inv-pill2 .inv-txt{letter-spacing:.1px}
.inv-pill2 .inv-bar{width:44px;height:5px;border-radius:99px;background:color-mix(in srgb,currentColor 20%,transparent);overflow:hidden;display:inline-block;flex:none}
.inv-pill2 .inv-bar i{display:block;height:100%;border-radius:99px;background:currentColor;transition:width .3s ease}
.inv-pill2.ok{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.inv-pill2.low{color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent);border-color:color-mix(in srgb,var(--amber) 32%,transparent)}
.inv-pill2.out{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent);border-color:color-mix(in srgb,var(--red) 30%,transparent)}



/* ================= v10: live chat + clickable notifs ================= */
.drawer{width:360px;max-width:94vw}
.drawer-view{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;height:100%}
.drawer-view.hidden{display:none !important}

.chat-peer-av{
  width:36px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#fff;flex-shrink:0;background:var(--primary);
}
.msg{cursor:pointer;border:1px solid transparent}
.msg.active,.msg:hover{border-color:var(--border);background:var(--panel)}
.msg .av .online-dot{
  position:absolute;bottom:0;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--green);border:2px solid var(--panel-2)
}
.msg .unread-pill{
  min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--primary);
  color:#fff;font-size:10px;font-weight:800;display:inline-grid;place-items:center
}
.msg .role-tag{
  font-size:10px;font-weight:700;color:var(--text-3);
  background:var(--panel);border:1px solid var(--border);padding:1px 6px;border-radius:99px
}

.chat-msgs{
  flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;
  padding:8px 2px;border-radius:var(--r-md);background:var(--panel);
  border:1px solid var(--border)
}
.chat-bubble{
  max-width:82%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.55;
  word-break:break-word;position:relative
}
.chat-bubble.me{
  align-self:flex-start; /* RTL: me on right visually via flex-start in rtl */
  background:color-mix(in srgb,var(--primary) 22%,var(--panel-2));
  border:1px solid color-mix(in srgb,var(--primary) 35%,transparent);
  border-bottom-right-radius:4px;color:var(--text)
}
.chat-bubble.them{
  align-self:flex-end;
  background:var(--panel-2);border:1px solid var(--border);
  border-bottom-left-radius:4px;color:var(--text)
}
.chat-bubble .meta{
  display:flex;gap:8px;align-items:center;justify-content:flex-end;
  margin-top:4px;font-size:10px;color:var(--text-3);font-weight:600
}
.chat-day-sep{
  align-self:center;font-size:10px;font-weight:700;color:var(--text-3);
  background:var(--panel-2);border:1px solid var(--border);padding:2px 10px;border-radius:99px;margin:4px 0
}
.chat-composer{display:flex;gap:8px;align-items:center}
.chat-composer .input{flex:1;min-width:0}

.notif-item{cursor:pointer;border:1px solid transparent}
.notif-item:hover{border-color:var(--border)}
.notif-item.unread{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.notif-item .notif-actions{margin-top:6px;display:flex;gap:6px}
.notif-empty{padding:28px 12px;text-align:center;color:var(--text-2);font-size:13px}

/* support page chat cards */
.support-layout{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){
  .support-layout{grid-template-columns:1.1fr .9fr}
}
.peer-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;
  border:1px solid var(--border);background:var(--panel-2);font-size:12px;font-weight:600;cursor:pointer
}
.peer-chip:hover{border-color:var(--primary);color:var(--primary)}



/* ================= v10.1 dedicated chat rooms + ticket from-account ================= */
.chat-from{
  font-size:10.5px;font-weight:800;color:var(--text-3);margin-bottom:4px;letter-spacing:.1px
}
.chat-bubble.me .chat-from{color:color-mix(in srgb,var(--primary) 80%,var(--text-2))}
.chat-text{white-space:pre-wrap;word-break:break-word}

.ticket-meta{display:flex;flex-direction:column;gap:4px;text-align:right}
.ticket-meta .k{color:var(--text-3);font-size:11px;font-weight:700;margin-inline-end:4px}
.ticket-meta b{font-size:12px;font-weight:700;color:var(--text)}
.ticket-from b{color:var(--primary)}
.ticket-to b{color:var(--teal)}

.chat-rooms-grid{display:flex;flex-direction:column;gap:10px}
.chat-room-card{cursor:pointer}

.chat-room-shell{
  display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;
  min-height:min(70vh,640px);max-width:920px
}
.chat-room-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--panel-2) 70%,transparent)
}
.chat-room-msgs{
  flex:1;min-height:320px;max-height:none;border:none;border-radius:0;
  padding:14px 16px;background:var(--bg-2)
}
.chat-room-composer{
  padding:12px 14px;border-top:1px solid var(--border);background:var(--panel)
}
.chat-room-me b{color:var(--text)}


/* ================= v11 mobile polish extras ================= */
html, body { max-width: 100%; }
img, svg, canvas, video { max-width: 100%; height: auto; }
.page, .page-wrap, .main, .app { min-width: 0; }
.wrap { flex-wrap: wrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* full-width search boxes inside pages on small screens */
@media(max-width:768px){
  #pages .search-box,
  #pages .panel-head .search-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 100%;
  }
  #pages .panel-head {
    align-items: stretch;
  }
  #pages .flex.gap-3.mb-3,
  #pages .flex.justify-between.items-center.mb-3 {
    flex-direction: column;
    align-items: stretch !important;
  }
  #pages .flex.gap-3.mb-3 > .chips,
  #pages .flex.justify-between.items-center.mb-3 > .chips {
    width: 100%;
  }
  /* prevent horizontal page bleed from wide tables (vertical stays visible so dropdown menus like .dd-menu can float outside the panel) */
  #pages .panel { overflow-x: hidden; overflow-y: visible; }
  #pages .table-wrap { max-width: 100%; overflow-x: auto; }

  /* make export/print toolbars stack */
  #pages .head-actions .btn,
  #acc-live + .flex .btn {
    min-height: 44px;
  }

  /* inventory stock controls larger */
  .stock-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .stock-val { font-size: 14px; font-weight: 800; min-width: 2.5ch; text-align: center; }

  /* dd dropdown full width fields */
  .field .dd { width: 100%; }
  .dd-btn { width: 100%; justify-content: space-between; min-height: 44px; }
}

/* safe area for notched phones */
@supports(padding: max(0px)){
  .topbar {
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .sidebar {
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* reduce motion if user prefers */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ================= v13: perfectly straight table dividers + no flicker ================= */
#pages .table-wrap table,
.panel > .table-wrap table,
.panel .table-wrap table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
#pages .table-wrap thead th,
#pages .table-wrap tbody td{
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 var(--border-2) !important;
  vertical-align: middle !important;
}
#pages .table-wrap tbody tr{
  height: 52px;
}
#pages .table-wrap tbody td{
  height: 52px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-inline: 14px !important;
}
#pages .table-wrap thead th{
  height: 44px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-inline: 14px !important;
}
#pages .table-wrap tbody tr:last-child td{
  box-shadow: none !important;
}
/* kill flash/reload feel */
tr.row-flash, .row-flash{ background: transparent !important; transition: none !important; }
.stock-val.flash, .live-tick{ transition: color .12s ease; }
body.live-mode .page,
body.soft-nav .page,
.page.soft-updating{
  animation: none !important;
}
body.live-mode .reveal,
body.soft-nav .reveal,
.page.soft-updating .reveal{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* when same-page content swaps, never fade the shell */
#pages .page{
  will-change: auto;
}
#pages .page.soft-updating{
  opacity: 1 !important;
  filter: none !important;
}



/* ================= v14: perfectly aligned data tables =================
   Screenshots showed broken horizontal rules because each cell had its own
   border and multi-line content (qty+unit, notes) stretched rows unevenly.
   Fix: one continuous divider per ROW, fixed row height, single-line cells,
   consistent alignment classes for text / numbers / badges / actions.
============================================================================= */

#pages .table-wrap,
.panel .table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:var(--panel);
}

#pages .table-wrap table,
.panel .table-wrap table,
table.data-table{
  width:100%;
  border-collapse:collapse !important;
  border-spacing:0 !important;
  font-size:12.5px;
  table-layout:auto;
}

/* Header */
#pages .table-wrap thead th,
.panel .table-wrap thead th,
table.data-table thead th{
  text-align:right;
  height:46px;
  padding:0 14px !important;
  font-size:11px;
  font-weight:700;
  color:var(--text-2);
  white-space:nowrap;
  vertical-align:middle !important;
  background:color-mix(in srgb, var(--panel-2) 80%, transparent);
  border:none !important;
  border-bottom:1px solid var(--border-2) !important;
  box-shadow:none !important;
  position:sticky;
  top:0;
  z-index:2;
}

/* Body cells — ONE shared bottom border on the row via td */
#pages .table-wrap tbody td,
.panel .table-wrap tbody td,
table.data-table tbody td{
  height:52px;
  max-height:52px;
  padding:0 14px !important;
  vertical-align:middle !important;
  white-space:nowrap;
  border:none !important;
  border-bottom:1px solid var(--border-2) !important;
  box-shadow:none !important;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
}

#pages .table-wrap tbody tr:last-child td,
.panel .table-wrap tbody tr:last-child td,
table.data-table tbody tr:last-child td{
  border-bottom:none !important;
}

#pages .table-wrap tbody tr:hover td{
  background:color-mix(in srgb, var(--panel-2) 70%, transparent);
}

/* Alignment helpers */
#pages .table-wrap .td-name,
#pages .table-wrap td.cell-strong{
  font-weight:700;
  color:var(--text);
  max-width:220px;
}
#pages .table-wrap .td-text{
  color:var(--text-2);
  max-width:200px;
}
#pages .table-wrap .td-num,
#pages .table-wrap td.mono{
  font-variant-numeric:tabular-nums;
  direction:ltr;
  unicode-bidi:plaintext;
  text-align:left !important; /* numbers/codes left-aligned in RTL table for clean columns */
  font-feature-settings:"tnum";
}
#pages .table-wrap .td-center{
  text-align:center !important;
}
#pages .table-wrap .td-actions{
  text-align:center !important;
  width:1%;
  white-space:nowrap;
}

/* Subline under name (note) — single truncated line, does not break row height */
#pages .table-wrap .td-sub,
#pages .table-wrap td .text-xs,
#pages .table-wrap td .text-2.fw-500{
  display:block;
  margin-top:2px;
  font-size:10.5px;
  font-weight:500;
  color:var(--text-3);
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.2;
}

/* Stock stepper: qty + unit stay on ONE horizontal line */
#pages .table-wrap .stock-step{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:34px;
  flex-wrap:nowrap !important;
  white-space:nowrap;
}
#pages .table-wrap .stock-step .stock-val,
#pages .table-wrap .stock-step .mono{
  display:inline-flex !important;
  align-items:center;
  gap:4px;
  min-width:3.2ch;
  justify-content:center;
  font-weight:800;
  white-space:nowrap !important;
  flex-direction:row !important;
}
#pages .table-wrap .stock-step .unit,
#pages .table-wrap .stock-step .text-3,
#pages .table-wrap .stock-step .text-xs{
  display:inline !important;
  margin:0 !important;
  font-size:11px;
  font-weight:600;
  color:var(--text-3);
  white-space:nowrap;
}
#pages .table-wrap .stepper-btn{
  width:30px;
  height:30px;
  min-width:30px;
  flex:none;
  border-radius:9px;
  border:1px solid var(--input-border);
  background:var(--input);
  color:var(--text-2);
  display:inline-grid;
  place-items:center;
}
#pages .table-wrap .stepper-btn:hover{
  color:var(--primary);
  border-color:var(--primary);
}

/* Badges / pills stay single-line and centered */
#pages .table-wrap .badge-s,
#pages .table-wrap .inv-pill2,
#pages .table-wrap .inv-pill{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:5px;
  max-width:100%;
  white-space:nowrap;
  vertical-align:middle;
  line-height:1;
}

/* Action buttons row */
#pages .table-wrap .row-actions{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-wrap:nowrap !important;
}
#pages .table-wrap .act{
  width:32px;
  height:32px;
  flex:none;
}

/* Dropdowns inside tables */
#pages .table-wrap .dd{ min-width:120px; max-width:180px; }
#pages .table-wrap .dd-btn{
  height:34px;
  min-height:34px;
  padding:0 10px;
  width:100%;
}

/* Live feedback without layout jump */
#pages .table-wrap tr.row-live td{
  background:color-mix(in srgb, var(--primary) 8%, transparent) !important;
  transition:background .2s ease;
}
tr.row-flash{ background:transparent !important; }

/* RTL: header labels stay right; numeric columns left for vertical scan */
html[dir="rtl"] #pages .table-wrap thead th{
  text-align:right;
}

/* Responsive: keep alignment, allow horizontal scroll only inside wrap */
@media(max-width:768px){
  #pages .table-wrap thead th,
  #pages .table-wrap tbody td{
    height:48px;
    padding:0 10px !important;
    font-size:12px;
  }
  #pages .table-wrap .td-name{ max-width:140px; }
  #pages .table-wrap .stock-step{ gap:6px; }
  #pages .table-wrap .stepper-btn{ width:28px; height:28px; min-width:28px; }
}

@media(max-width:480px){
  #pages .table-wrap table{ min-width:560px; }
}
/* ================= FINAL TABLE ALIGNMENT FIX ================= */

/* mono must not turn table cells into inline-blocks */
#pages table td.mono,
#pages table th.mono,
#pages .table-wrap td.mono,
#pages .table-wrap th.mono,
.panel table td.mono,
.panel table th.mono {
  display: table-cell !important;
  vertical-align: middle !important;
}

/* keep every cell inside its own column */
#pages table td,
#pages table th,
.panel table td,
.panel table th {
  box-sizing: border-box;
  vertical-align: middle !important;
}

/* numbers and codes */
#pages table td.td-num,
#pages table td.mono,
.panel table td.td-num,
.panel table td.mono {
  text-align: left !important;
  direction: ltr;
  unicode-bidi: plaintext;
  white-space: nowrap !important;
}

/* text columns */
#pages table td.td-name,
#pages table td.td-text,
.panel table td.td-name,
.panel table td.td-text {
  text-align: right !important;
  direction: rtl;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* actions and badges stay centered */
#pages table td.td-center,
#pages table td.td-actions,
.panel table td.td-center,
.panel table td.td-actions {
  text-align: center !important;
  white-space: nowrap !important;
}

/* prevent nested content from changing row height */
#pages table td > *,
.panel table td > * {
  vertical-align: middle !important;
  max-width: 100%;
}

/* continuous, aligned row dividers */
#pages .table-wrap table,
.panel .table-wrap table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

#pages .table-wrap tbody td,
.panel .table-wrap tbody td {
  height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 1px solid var(--border-2) !important;
}

#pages .table-wrap tbody tr:last-child td,
.panel .table-wrap tbody tr:last-child td {
  border-bottom: none !important;
}
/* ================= FINAL TABLE COLUMN ALIGNMENT ================= */

/* جدول باید واقعاً جدول بماند */
#pages .table-wrap table,
#pages table,
.panel .table-wrap table,
.panel table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  direction: rtl !important;
}

/* سلول‌ها نباید inline-block باشند */
#pages .table-wrap th,
#pages .table-wrap td,
#pages table th,
#pages table td,
.panel table th,
.panel table td {
  display: table-cell !important;
  box-sizing: border-box !important;
  height: 52px !important;
  padding: 0 14px !important;
  vertical-align: middle !important;
  text-align: right !important;
  direction: rtl !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-2) !important;
}

/* عنوان ستون و مقدار هر ستون هم‌جهت باشند */
#pages .table-wrap th,
#pages table th,
.panel table th {
  height: 46px !important;
  color: var(--text-2) !important;
  font-weight: 700 !important;
  background: var(--panel-2) !important;
  text-align: right !important;
}

/* mono فقط ظاهر عدد را کنترل کند، نه display سلول را */
#pages .table-wrap td.mono,
#pages table td.mono,
.panel table td.mono {
  display: table-cell !important;
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext !important;
  font-variant-numeric: tabular-nums !important;
}

/* کلاس‌های عددی هم دقیقاً زیر عنوان خودشان بمانند */
#pages .table-wrap td.td-num,
#pages table td.td-num,
.panel table td.td-num {
  display: table-cell !important;
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext !important;
}

/* متن‌ها */
#pages .table-wrap td.td-name,
#pages .table-wrap td.td-text,
#pages table td.td-name,
#pages table td.td-text,
.panel table td.td-name,
.panel table td.td-text {
  display: table-cell !important;
  direction: rtl !important;
  text-align: right !important;
}

/* وضعیت و عملیات */
#pages .table-wrap td.td-center,
#pages .table-wrap td.td-actions,
#pages table td.td-center,
#pages table td.td-actions,
.panel table td.td-center,
.panel table td.td-actions {
  display: table-cell !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* محتوای داخل سلول وسط همان سلول بماند */
#pages table td > span,
#pages table td > div,
#pages table td > button,
.panel table td > span,
.panel table td > div,
.panel table td > button {
  vertical-align: middle !important;
  max-width: 100% !important;
}

/* ستون عملیات باریک و ثابت */
#pages table th:last-child,
#pages table td:last-child,
.panel table th:last-child,
.panel table td:last-child {
  width: 120px !important;
}

/* ستون‌های متنی فضای بیشتری بگیرند */
#pages table td.td-name,
.panel table td.td-name {
  min-width: 160px !important;
}

/* ردیف‌ها مرتب و یک‌دست */
#pages table tbody tr,
.panel table tbody tr {
  height: 52px !important;
}

#pages table tbody tr:hover td,
.panel table tbody tr:hover td {
  background: color-mix(in srgb, var(--panel-2) 70%, transparent) !important;
}

#pages table tbody tr:last-child td,
.panel table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* موجودی و badge داخل ستون خودشان */
#pages table .stock-step,
#pages table .badge-s,
#pages table .inv-pill,
#pages table .inv-pill2,
#pages table .row-actions {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* موبایل */
@media (max-width: 768px) {
  #pages .table-wrap table,
  .panel .table-wrap table {
    table-layout: auto !important;
    min-width: 720px !important;
  }

  #pages .table-wrap th,
  #pages .table-wrap td,
  .panel table th,
  .panel table td {
    padding: 0 10px !important;
  }
}


/* ================================================================
   NUMERALS — global policy
   The whole application displays Latin (English) digits. These rules
   stop the browser/font from substituting Persian numerals in any
   context (inputs, tables, charts legends, print output).
   ================================================================ */
html, body, input, select, textarea, button, table, .mono {
  font-variant-numeric: lining-nums tabular-nums;
  -moz-font-feature-settings: "lnum" 1, "tnum" 1;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.mono, .td-num, .num, .val, td.mono, th.mono {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: plaintext;
}


/* ================================================================
   LOGIN — بازطراحی مینیمال و حرفه‌ای
   هدف: فضای تنفس بیشتر، تایپوگرافی آرام‌تر، حذف افکت‌های اضافی و
   یک کارت تمیز که در دو حالت روشن/تاریک یکسان خوب دیده می‌شود.
   ================================================================ */
.login-screen{
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:18px; padding:32px 20px;
}
.login-card{
  width:100%; max-width:400px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:20px;
  padding:40px 34px 34px;
  text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.16);
}
.login-card .logo{
  width:54px; height:54px; border-radius:16px;
  margin:0 auto 20px; display:grid; place-items:center;
  background:var(--primary); color:#fff;
  box-shadow:none;
}
.login-card .logo svg{width:26px;height:26px}

.login-title{font-size:19px;font-weight:700;letter-spacing:-.2px;margin:0}
.login-sub{font-size:13px;color:var(--text-2);margin:6px 0 30px}

/* فیلدها: راست‌چین، با فاصله‌ی یکنواخت */
.login-card .field{text-align:right;margin-bottom:16px}
.login-card .field label{
  display:block;font-size:12.5px;font-weight:500;
  color:var(--text-2);margin-bottom:7px;
}
.login-card .input{
  width:100%; height:44px; padding:0 14px;
  border-radius:11px; font-size:14px;
  background:var(--input); border:1px solid var(--input-border);
  color:var(--text); transition:border-color .16s, box-shadow .16s;
}
.login-card .input:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
}
.login-card .input::placeholder{color:var(--text-3)}

/* دکمه‌ی نمایش/پنهان‌کردن رمز */
.pass-wrap{position:relative}
.pass-wrap .input{padding-inline-start:42px}
.pass-toggle{
  position:absolute; inset-inline-start:6px; top:50%;
  transform:translateY(-50%);
  width:32px; height:32px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  color:var(--text-3); border-radius:8px; transition:color .15s, background .15s;
}
.pass-toggle:hover{color:var(--text-2); background:var(--panel-2)}
.pass-toggle svg{width:17px;height:17px}

.login-row{
  display:flex; align-items:center; justify-content:space-between;
  margin:4px 0 22px; font-size:12.5px;
}
.remember-label{
  display:flex; align-items:center; gap:8px;
  color:var(--text-2); cursor:pointer; user-select:none;
}
.login-link{color:var(--text-2);cursor:pointer;transition:color .15s}
.login-link:hover{color:var(--primary)}

.login-btn{
  width:100%; justify-content:center;
  height:44px; border-radius:11px;
  font-size:14px; font-weight:600;
}
.login-hint{
  font-size:11.5px; color:var(--text-3);
  margin-top:18px; line-height:1.8;
}
.login-otp-text{font-size:13px;color:var(--text-2);line-height:2;margin:0}
.login-foot{font-size:11.5px;color:var(--text-3)}

/* OTP: ارقام لاتین، مربع‌های آرام */
.otp-row{display:flex;gap:8px;justify-content:center;direction:ltr;margin:20px 0 22px}
.otp-row input{
  width:46px; height:52px; text-align:center;
  font-size:19px; font-weight:600; font-variant-numeric:lining-nums;
  border-radius:11px; background:var(--input);
  border:1px solid var(--input-border); color:var(--text);
  outline:none; transition:border-color .16s, box-shadow .16s;
}
.otp-row input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}

@media (max-width:480px){
  .login-screen{padding:24px 16px}
  .login-card{padding:32px 22px 26px; border-radius:18px}
  .otp-row input{width:42px;height:48px;font-size:17px}
}

/* دکمه‌ی ورود: بدون درخشش (glow) — مطابق سبک مینیمال صفحه‌ی لاگین */
.login-card .login-btn,
.login-card .login-btn:hover{
  box-shadow:none !important;
  filter:none !important;
}
.login-card .login-btn:hover{ filter:brightness(1.06) !important; }
.login-card{ backdrop-filter:none; }

/* پنل یادآوری روزانه: وقتی پنهان است نباید کلیک‌ها را بگیرد */
.daily-pop{pointer-events:none}
.daily-pop.show{pointer-events:auto}