/* ===================== فونت وزیرمتن (لوکال) ===================== */
@font-face{font-family:'Vazirmatn';src:url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('/static/fonts/Vazirmatn-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('/static/fonts/Vazirmatn-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}

/* ===================== تم تاریک (پیش‌فرض) ===================== */
:root{
  --bg:#0a0f1e; --bg-grad1:#0a0f1f; --bg-grad2:#0d1428;
  --card-a:#161f42; --card-b:#121936; --card2:#1c2750;
  --line:#25315f; --line-soft:#1e2951;
  --txt:#e8ecf8; --mut:#94a3c4; --dim:#6b7ba3;
  --acc:#4f7cff; --acc2:#7c5cff; --acc-soft:rgba(79,124,255,.16);
  --ok:#22c98a; --warn:#f6a821; --bad:#f4556b; --info:#2bb5e0;
  --ok-bg:rgba(34,201,138,.16); --warn-bg:rgba(246,168,33,.16);
  --bad-bg:rgba(244,85,107,.16); --info-bg:rgba(43,181,224,.16);
  --mut-bg:rgba(148,163,196,.14);
  --topbar:rgba(11,16,32,.85); --side:rgba(13,19,42,.96);
  --sh:0 6px 28px rgba(0,0,0,.35);
  --hover:rgba(79,124,255,.07);
  --chart-grid:rgba(37,49,95,.55);
  --tip-bg:#0d1327;
  --r:16px;
}

/* ===================== تم روشن ===================== */
html[data-theme="light"]{
  --bg:#f4f6fc; --bg-grad1:#eef2fb; --bg-grad2:#f7f9fe;
  --card-a:#ffffff; --card-b:#fbfcff; --card2:#eef2fa;
  --line:#dde4f2; --line-soft:#e8edf7;
  --txt:#16203a; --mut:#5b6b8c; --dim:#8494b3;
  --acc:#3563e9; --acc2:#7048e8; --acc-soft:rgba(53,99,233,.12);
  --ok:#0f9d6a; --warn:#c77700; --bad:#d63a52; --info:#0d86ab;
  --ok-bg:rgba(15,157,106,.12); --warn-bg:rgba(199,119,0,.12);
  --bad-bg:rgba(214,58,82,.12); --info-bg:rgba(13,134,171,.12);
  --mut-bg:rgba(91,107,140,.12);
  --topbar:rgba(255,255,255,.88); --side:rgba(255,255,255,.97);
  --sh:0 4px 20px rgba(24,40,90,.08);
  --hover:rgba(53,99,233,.06);
  --chart-grid:rgba(200,210,230,.7);
  --tip-bg:#ffffff;
}

body{
  font-family:'Vazirmatn',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  background:linear-gradient(180deg,var(--bg-grad1),var(--bg-grad2) 60%,var(--bg));
  color:var(--txt);min-height:100vh;font-size:14px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}
a{color:inherit;text-decoration:none}
.layout{display:flex;min-height:100vh}

/* ===================== آیکون‌ها ===================== */
.ic{flex:0 0 auto;vertical-align:-.18em}
.ic-wrap{display:inline-flex;align-items:center;gap:8px}

/* ===================== سایدبار ===================== */
.sidebar{
  width:248px;flex:0 0 248px;background:var(--side);
  border-inline-end:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:40;transition:background .3s,border-color .3s;
}
.brand{display:flex;gap:12px;align-items:center;padding:20px 18px;border-bottom:1px solid var(--line)}
.brand-logo{
  width:42px;height:42px;border-radius:13px;flex:0 0 42px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  display:grid;place-items:center;font-weight:700;font-size:19px;color:#fff;
  box-shadow:0 4px 16px rgba(79,124,255,.35);
}
.brand-txt b{display:block;font-size:15px;font-weight:700}
.brand-txt span{font-size:11.5px;color:var(--mut)}

.nav{padding:14px 10px;display:flex;flex-direction:column;gap:3px;flex:1;overflow:auto}
.nav-i{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;
  color:var(--mut);font-size:14px;transition:.18s;border:1px solid transparent;
}
.nav-i .ic{width:19px;height:19px;opacity:.85}
.nav-i:hover{background:var(--card2);color:var(--txt)}
.nav-i.on{
  background:linear-gradient(90deg,var(--acc-soft),transparent);
  color:var(--txt);border-color:var(--acc);font-weight:600;
}
.nav-i.on .ic{color:var(--acc);opacity:1}

.side-foot{padding:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.ro-badge{
  background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok);
  font-size:11.5px;padding:8px 10px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.ro-badge .ic{width:15px;height:15px}
.logout{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12.5px;color:var(--bad);padding:9px;
  border:1px solid var(--bad);border-radius:9px;transition:.18s;opacity:.85;
}
.logout:hover{background:var(--bad-bg);opacity:1}
.logout .ic{width:15px;height:15px}

/* ===================== بالای صفحه ===================== */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:14px;padding:14px 24px;
  border-bottom:1px solid var(--line);background:var(--topbar);
  backdrop-filter:blur(14px);position:sticky;top:0;z-index:30;transition:background .3s;
}
.topbar h1{font-size:18px;font-weight:700;flex:1}
.burger{
  display:none;background:var(--card2);border:1px solid var(--line);color:var(--txt);
  width:38px;height:38px;border-radius:10px;cursor:pointer;place-items:center;
}
.top-right{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--mut)}
.live{display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 9px var(--ok);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.clock{font-variant-numeric:tabular-nums}

/* دکمه تغییر تم */
.theme-btn{
  background:var(--card2);border:1px solid var(--line);color:var(--mut);
  width:38px;height:38px;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;transition:.2s;
}
.theme-btn:hover{color:var(--acc);border-color:var(--acc);transform:rotate(-18deg)}
.theme-btn .ic{width:18px;height:18px}
html[data-theme="light"] .theme-btn .ic-moon{display:none}
html:not([data-theme="light"]) .theme-btn .ic-sun{display:none}

.content{padding:22px 24px 44px;flex:1}

/* ===================== کارت‌ها ===================== */
.grid{display:grid;gap:15px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g23{grid-template-columns:2fr 1fr}
.g32{grid-template-columns:1fr 2fr}

.card{
  background:linear-gradient(160deg,var(--card-a),var(--card-b));
  border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh);
  transition:background .3s,border-color .3s;
}
.card h3{font-size:14.5px;margin-bottom:15px;display:flex;align-items:center;gap:9px;font-weight:700}
.card h3 .ic{width:18px;height:18px;color:var(--acc)}
.card h3 .sub{font-size:11.5px;color:var(--dim);font-weight:400;margin-inline-start:auto}

.kpi{position:relative;overflow:hidden}
.kpi::before{
  content:'';position:absolute;top:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));
}
.kpi .lbl{font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:7px}
.kpi .val{font-size:27px;font-weight:700;margin:9px 0 5px;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.kpi .sub{font-size:11.5px;color:var(--dim)}
.kpi.ok::before{background:linear-gradient(90deg,var(--ok),#14b8a6)}
.kpi.warn::before{background:linear-gradient(90deg,var(--warn),#fb923c)}
.kpi.bad::before{background:linear-gradient(90deg,var(--bad),#f87171)}
.kpi.info::before{background:linear-gradient(90deg,var(--info),#38bdf8)}
.kpi .ico{position:absolute;top:16px;inset-inline-end:16px;color:var(--txt);opacity:.1}
.kpi .ico .ic{width:26px;height:26px}
.kpi.ok .ico{color:var(--ok);opacity:.22}
.kpi.warn .ico{color:var(--warn);opacity:.22}
.kpi.bad .ico{color:var(--bad);opacity:.22}
.kpi.info .ico{color:var(--info);opacity:.22}
.up{color:var(--ok)} .down{color:var(--bad)}

/* ===================== جدول ===================== */
.tbl-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
#tbl table{min-width:1050px}
thead th{
  background:var(--card2);padding:11px 12px;text-align:right;font-weight:600;
  color:var(--mut);font-size:12px;white-space:nowrap;position:sticky;top:0;
}
tbody td{padding:10px 12px;border-top:1px solid var(--line-soft);white-space:nowrap}
tbody tr:hover{background:var(--hover)}
tbody tr.clickable{cursor:pointer}
thead th[data-s]{transition:.15s;user-select:none;cursor:pointer}
thead th[data-s]:hover{color:var(--txt);background:var(--acc-soft)}
thead th.sorted{color:var(--acc);font-weight:700}
.btn-g.on{background:var(--acc-soft);color:var(--acc);border-color:var(--acc)}
.num{font-variant-numeric:tabular-nums;direction:ltr;text-align:left;unicode-bidi:plaintext}
/* سرستون عددی باید دقیقاً هم‌جهت و هم‌تراز محتوای زیرش باشد */
thead th.num{direction:ltr;text-align:left}
/* ستون‌های شمارشی کوتاه، وسط‌چین تا زیر عنوانشان بنشینند */
th.c,td.c{text-align:center;direction:ltr}
td.c{font-variant-numeric:tabular-nums}
/* ستون شناسه عددی */
td.tgid{font-variant-numeric:tabular-nums;direction:ltr;text-align:left;
        color:var(--mut);font-size:12.5px}

.badge{display:inline-block;padding:3px 9px;border-radius:7px;font-size:11.5px;font-weight:500;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-bad{background:var(--bad-bg);color:var(--bad)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-info{background:var(--info-bg);color:var(--info)}
.b-mut{background:var(--mut-bg);color:var(--mut)}
.b-acc{background:var(--acc-soft);color:var(--acc)}

/* ===================== فرم‌ها ===================== */
input,select,button{font-family:inherit;font-size:13.5px}
.inp,select.inp{
  background:var(--card2);border:1px solid var(--line);color:var(--txt);
  padding:9px 13px;border-radius:10px;outline:none;transition:.18s;
}
.inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.btn{
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:none;
  padding:9px 18px;border-radius:10px;cursor:pointer;font-weight:600;transition:.18s;
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-g{background:var(--card2);border:1px solid var(--line);color:var(--mut)}
.btn-g:hover{color:var(--txt)}
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:15px}

.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  padding:6px 13px;border-radius:9px;background:var(--card2);border:1px solid var(--line);
  color:var(--mut);cursor:pointer;font-size:12.5px;transition:.18s;
  display:inline-flex;align-items:center;gap:6px;
}
.chip:hover{color:var(--txt)}
.chip.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc);font-weight:600}
.chip .ic{width:15px;height:15px}

.pager{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:16px;flex-wrap:wrap}
.pager button{
  background:var(--card2);border:1px solid var(--line);color:var(--mut);
  padding:7px 13px;border-radius:9px;cursor:pointer;min-width:38px;transition:.18s;
}
.pager button:hover:not(:disabled){color:var(--txt);border-color:var(--acc)}
.pager button.on{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600}
.pager button:disabled{opacity:.35;cursor:not-allowed}

.chart-box{position:relative;height:290px}
.chart-sm{height:225px}

.mb{margin-bottom:15px}
.muted{color:var(--mut)}
.dim{color:var(--dim)}
.small{font-size:12px}
.center{text-align:center}
.loading{text-align:center;padding:36px;color:var(--dim)}
.spin{
  display:inline-block;width:26px;height:26px;border:3px solid var(--line);
  border-top-color:var(--acc);border-radius:50%;animation:sp .8s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}

.bar-row{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.bar-lbl{flex:0 0 130px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;height:9px;background:var(--card2);border-radius:6px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:6px;transition:width .6s}
.bar-val{flex:0 0 76px;text-align:left;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--mut)}

/* ===================== ورود ===================== */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{
  width:100%;max-width:392px;background:linear-gradient(160deg,var(--card-a),var(--card-b));
  border:1px solid var(--line);border-radius:22px;padding:38px 32px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-card .brand-logo{width:58px;height:58px;font-size:26px;margin:0 auto 16px;border-radius:18px}
.login-card h2{text-align:center;font-size:20px;margin-bottom:6px;font-weight:700}
.login-card p.sub{text-align:center;color:var(--mut);font-size:12.5px;margin-bottom:26px}
.login-card label{display:block;font-size:12.5px;color:var(--mut);margin:14px 0 6px}
.login-card .inp{width:100%}
.login-card .btn{width:100%;margin-top:22px;padding:12px}
.err{
  background:var(--bad-bg);border:1px solid var(--bad);color:var(--bad);
  padding:10px 13px;border-radius:10px;font-size:12.5px;margin-bottom:16px;
  display:flex;align-items:center;gap:8px;justify-content:center;
}
.login-foot{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:20px;font-size:11.5px;color:var(--mut);
}
.login-foot .ic{width:14px;height:14px}
.login-theme{
  position:fixed;top:18px;inset-inline-end:18px;
}

.stat-line{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px;gap:12px}
.stat-line:last-child{border-bottom:none}
.stat-line b{font-variant-numeric:tabular-nums;text-align:left}

/* ===================== واکنش‌گرا ===================== */
@media(max-width:1180px){.g4{grid-template-columns:repeat(2,1fr)}.g23,.g32{grid-template-columns:1fr}}
@media(max-width:860px){
  html,body{overflow-x:hidden;max-width:100%}
  .layout{width:100%;overflow-x:hidden}
  .sidebar{position:fixed;top:0;inset-inline-start:0;transform:translateX(100%);transition:transform .25s}
  .sidebar.open{transform:translateX(0)!important}
  .main{width:100%;max-width:100%;min-width:0}
  .burger{display:grid}
  .g3,.g2{grid-template-columns:1fr}
  .content{padding:16px}
  .topbar{padding:12px 16px}
  .topbar h1{font-size:16px}
}
@media(max-width:520px){.g4{grid-template-columns:1fr}.kpi .val{font-size:23px}.clock{display:none}}