/* ============================================================================
   OreTrack ERP — дизайны систем
   ----------------------------------------------------------------------------
   Өнгө, зай, хэмжээг ЭНД нэг удаа тодорхойлж, загвар хуудсуудад давтахгүй.
   Ямар нэг хуудас өөрийн гэсэн өнгө бичих шаардлага гарвал энэ файлд токен
   нэмнэ — тэгвэл бүх модуль нэг дүр төрхтэй хэвээр үлдэнэ.

   Хуучин ангийн нэрүүд (.card .kpi .btn .pill …) БҮГД ажилласаар байна —
   40 загвар хуудас тэднээс хамаардаг тул устгаагүй, зөвхөн сайжруулсан.
   ========================================================================= */

:root{
  /* --- Суурь өнгө --------------------------------------------------------- */
  --bg:#f4f6fa;            /* хуудасны дэвсгэр */
  --surface:#ffffff;       /* карт, хүснэгтийн дэвсгэр */
  --surface-2:#f8fafc;     /* хүснэгтийн толгой, дэд хэсэг */
  --card:var(--surface);   /* хуучин нэр — хэвээр */
  --line:#e4e8ef;          /* зураас, хүрээ */
  --line-soft:#eef1f6;

  /* --- Бичвэр ------------------------------------------------------------- */
  --ink:#111827;           /* үндсэн бичвэр */
  --sub:#5b6676;           /* хоёрдогч бичвэр */
  --muted:#8c97a8;         /* бүдэг */

  /* --- Үндсэн өнгө -------------------------------------------------------- */
  --primary:#2563eb;
  --primary-d:#1d4ed8;
  --primary-l:#eff4ff;     /* сул дэвсгэр — мөрөн дээр хулгана очиход */
  --primary-ink:#1e40af;

  /* --- Төлөв (утга бүрд НЭГ өнгө, модуль болгонд өөр утга ОЛГОХГҮЙ) ------- */
  --ok-b:#ecfdf5;  --ok-t:#047857;  --ok-line:#a7f3d0;   /* амжилт   */
  --wa-b:#fffbeb;  --wa-t:#b45309;  --wa-line:#fde68a;   /* сануулга */
  --ba-b:#fef2f2;  --ba-t:#dc2626;  --ba-line:#fecaca;   /* аюул     */
  --in-b:#eff6ff;  --in-t:#1d4ed8;  --in-line:#bfdbfe;   /* мэдээлэл */
  --nu-b:#f1f5f9;  --nu-t:#475569;  --nu-line:#e2e8f0;   /* төвийг сахисан */

  /* --- Хажуу самбар ------------------------------------------------------- */
  --side:#16202e;
  --side-2:#1d293b;
  --side-ink:#cbd5e1;
  --side-line:#27364b;
  --side-w:264px;      /* лавлагаа зураг: 1536-аас ~17.7% */

  /* --- Хэлбэр, зай -------------------------------------------------------- */
  --radius:10px;
  --radius-lg:14px;
  --radius-sm:7px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 10px 30px rgba(16,24,40,.10);
  --gap:16px;
  --header-h:58px;
  --aside-w:320px;     /* баруун талын мэдээллийн багана ~21% */
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --surface:#131c2b; --surface-2:#0f1826; --line:#22304a;
    --line-soft:#1b2537; --ink:#e6ebf3; --sub:#9aa7b8; --muted:#6b7a90;
    --primary:#60a5fa; --primary-d:#3b82f6; --primary-l:#152238; --primary-ink:#93c5fd;
    --ok-b:#052e1a;  --ok-t:#4ade80;  --ok-line:#14532d;
    --wa-b:#2b1d05;  --wa-t:#fbbf24;  --wa-line:#78350f;
    --ba-b:#2d0b13;  --ba-t:#fb7185;  --ba-line:#7f1d1d;
    --in-b:#0f1e3a;  --in-t:#93c5fd;  --in-line:#1e3a8a;
    --nu-b:#1a2333;  --nu-t:#9aa7b8;  --nu-line:#22304a;
    --side:#0c1420; --side-2:#141e2d; --side-line:#1f2c40;
    --shadow:0 1px 2px rgba(0,0,0,.30); --shadow-lg:0 10px 30px rgba(0,0,0,.45);
  }
}

/* ============================================================ Үндэс ====== */
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
    "PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 4px;font-weight:650;letter-spacing:-.01em}
h1{font-size:19px} h2{font-size:15px} h3{font-size:13.5px}
.muted{color:var(--sub);font-size:12.5px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace;font-size:12.5px}

/* Тоо баруун тийш эгнэнэ. Өмнө нь `class="n"` бичигдсэн ч дүрэм байхгүй тул
   мөнгө, тонн, хувь зүүн тийш эгнэж уншихад хэцүү байв. */
.n{text-align:right;font-variant-numeric:tabular-nums}
th.n,td.n{text-align:right}
.num{font-variant-numeric:tabular-nums}

/* ====================================================== Аппын бүтэц ====== */
.shell{display:flex;min-height:100vh}

.side{
  width:var(--side-w);flex:0 0 auto;background:var(--side);color:var(--side-ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  overflow-y:auto;transition:width .16s ease;
}
.side::-webkit-scrollbar{width:8px}
.side::-webkit-scrollbar-thumb{background:var(--side-line);border-radius:8px}

.side-brand{
  display:flex;gap:11px;align-items:center;padding:14px 16px;
  border-bottom:1px solid var(--side-line);min-height:var(--header-h);
}
.side-logo{
  width:36px;height:36px;flex:0 0 auto;border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--primary-d));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;
}
.side-name{font-size:13.5px;font-weight:700;line-height:1.2;color:#fff}
.side-sub{font-size:10.5px;opacity:.55;margin-top:2px;line-height:1.3}

.side-nav{flex:1;padding:8px 10px 14px}
.side-sec{
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.42;
  padding:14px 10px 6px;font-weight:700;
}
.side-nav a{
  display:flex;gap:10px;align-items:center;padding:8px 10px;margin-bottom:1px;
  border-radius:var(--radius-sm);color:var(--side-ink);font-weight:500;font-size:13px;
}
.side-nav a:hover{background:var(--side-2);color:#fff;text-decoration:none}
.side-nav a.on{background:var(--primary);color:#fff;font-weight:600}
.side-nav .ico{width:17px;flex:0 0 auto;text-align:center;opacity:.85;font-size:13px}
.side-nav a.on .ico{opacity:1}
.side-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.side-foot{padding:12px 14px;border-top:1px solid var(--side-line);font-size:12px}
.side-foot .who{font-weight:600;color:#fff}
.side-foot .role{opacity:.55;font-size:11px;margin-top:1px}

/* --- Хажуу самбарыг хумих. Зөвхөн CSS — JavaScript хэрэггүй. ------------- */
#side-toggle{display:none}
#side-toggle:checked ~ .shell .side{width:62px}
#side-toggle:checked ~ .shell .side-label,
#side-toggle:checked ~ .shell .side-sub,
#side-toggle:checked ~ .shell .side-name,
#side-toggle:checked ~ .shell .side-sec,
#side-toggle:checked ~ .shell .side-foot .who,
#side-toggle:checked ~ .shell .side-foot .role{display:none}
#side-toggle:checked ~ .shell .side-brand{padding:14px 12px;justify-content:center}
#side-toggle:checked ~ .shell .side-nav a{justify-content:center;padding:9px 0}
.side-burger{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:var(--radius-sm);cursor:pointer;color:var(--sub);flex:0 0 auto;
  font-size:16px;user-select:none;
}
.side-burger:hover{background:var(--line-soft);color:var(--ink)}

/* --- Үндсэн талбар ------------------------------------------------------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:12px;padding:0 20px;min-height:var(--header-h);
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.topbar .grow{flex:1;min-width:0}
.top-title{font-size:15px;font-weight:650;line-height:1.2}
.top-sub{font-size:11.5px;color:var(--muted);line-height:1.3}
.top-search{position:relative;flex:0 1 380px;min-width:0}
.top-search input{padding-left:32px;background:var(--surface-2);border-color:var(--line-soft)}
.top-search .mag{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:13px;pointer-events:none}
.top-user{display:flex;align-items:center;gap:9px;padding-left:12px;
  border-left:1px solid var(--line)}
.top-user .av{width:32px;height:32px;border-radius:50%;background:var(--primary-l);
  color:var(--primary-ink);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12.5px;flex:0 0 auto}
.top-user .nm{font-size:12.5px;font-weight:600;line-height:1.2}
.top-user .rl{font-size:10.5px;color:var(--muted);line-height:1.2}

.content{padding:20px;max-width:1440px;width:100%}

/* ==================================================== Хуудасны толгой ==== */
.page-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.page-head .ttl{font-size:21px;font-weight:680;letter-spacing:-.02em;margin:0}
.page-head .ctx{font-size:12.5px;color:var(--sub);margin-top:2px}
.page-head .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.crumb{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);
  margin-bottom:6px;flex-wrap:wrap}
.crumb a{color:var(--sub)}
.crumb .sep{opacity:.5}

/* ========================================================== Картууд ====== */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px;margin-bottom:var(--gap);box-shadow:var(--shadow);
}
.card-head{display:flex;align-items:center;gap:10px;margin:-2px 0 12px}
.card-head h2{margin:0}
.card-head .more{margin-left:auto;font-size:12px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);margin-bottom:var(--gap);overflow:hidden}
.panel-head{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--line-soft)}
.panel-head h2{margin:0;font-size:14px}
.panel-head .more{margin-left:auto;font-size:12px}
.panel-body{padding:16px}

/* --- KPI --------------------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:12px;margin-bottom:var(--gap)}
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px;box-shadow:var(--shadow);min-width:0;
}
.kpi .v{font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.2;
  font-variant-numeric:tabular-nums;word-break:break-word}
.kpi .v .u{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px}
.kpi .l{font-size:11.5px;color:var(--sub);margin-top:3px;line-height:1.35}
.kpi .l .zh{display:block;font-size:10.5px;color:var(--muted)}
.kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.kpi-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:14px;flex:0 0 auto;
  background:var(--in-b);color:var(--in-t)}
.kpi-ico.g{background:var(--ok-b);color:var(--ok-t)}
.kpi-ico.w{background:var(--wa-b);color:var(--wa-t)}
.kpi-ico.r{background:var(--ba-b);color:var(--ba-t)}
.kpi-ico.n{background:var(--nu-b);color:var(--nu-t)}
.kpi-tag{margin-left:auto;font-size:11px;font-weight:650;padding:2px 7px;
  border-radius:999px;background:var(--nu-b);color:var(--nu-t);white-space:nowrap}
.kpi-tag.up{background:var(--ok-b);color:var(--ok-t)}
.kpi-tag.down{background:var(--ba-b);color:var(--ba-t)}

/* --- Хоёр баганат байрлал ---------------------------------------------- */
.cols{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:1080px){
  .cols.c2{grid-template-columns:1fr 1fr}
  .cols.c32{grid-template-columns:3fr 2fr}
  .cols.c21{grid-template-columns:2fr 1fr}
}

/* ========================================================= Хүснэгт ======= */
table{width:100%;border-collapse:collapse;font-size:13px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap.sticky{max-height:min(66vh,680px);overflow-y:auto}
.tablewrap.sticky thead th{position:sticky;top:0;z-index:2}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--sub);font-weight:700;padding:9px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--primary-l)}
tfoot th{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:0;
  text-transform:none;font-size:12px;color:var(--ink)}
.table-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-top:1px solid var(--line-soft);font-size:12px;color:var(--sub)}

/* --- Шүүлтүүрийн мөр ---------------------------------------------------- */
.filterbar{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
.filterbar .fld{display:flex;flex-direction:column;gap:3px}
.filterbar .fld > span{font-size:10.5px;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}
.filterbar input,.filterbar select{padding:7px 10px;font-size:13px}

/* ============================================ Төлөв, шошго, анхааруулга == */
/* Өнгө дангаараа утга дамжуулахгүй — бичвэр ҮРГЭЛЖ хамт байна. */
.pill,.badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:650;background:var(--nu-b);color:var(--nu-t);
  border:1px solid transparent;white-space:nowrap;
}
.pill.ok,.badge.ok{background:var(--ok-b);color:var(--ok-t);border-color:var(--ok-line)}
.pill.wa,.badge.wa{background:var(--wa-b);color:var(--wa-t);border-color:var(--wa-line)}
.pill.ba,.badge.ba{background:var(--ba-b);color:var(--ba-t);border-color:var(--ba-line)}
.pill.in,.badge.in{background:var(--in-b);color:var(--in-t);border-color:var(--in-line)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* Баримтын урсгал: НООРОГ → ИЛГЭЭСЭН → БАТЛАГДСАН → НОМ ТАВЬСАН → БУЦААСАН */
.st-DRAFT    {background:var(--nu-b);color:var(--nu-t);border-color:var(--nu-line)}
.st-SUBMITTED{background:var(--in-b);color:var(--in-t);border-color:var(--in-line)}
.st-APPROVED {background:var(--ok-b);color:var(--ok-t);border-color:var(--ok-line)}
.st-POSTED   {background:var(--ok-b);color:var(--ok-t);border-color:var(--ok-line)}
.st-REVERSED {background:var(--ba-b);color:var(--ba-t);border-color:var(--ba-line)}

.alert{padding:11px 14px;border-radius:var(--radius);margin-bottom:12px;font-size:13px;
  border:1px solid transparent;background:var(--nu-b);color:var(--nu-t)}
.alert.ok{background:var(--ok-b);color:var(--ok-t);border-color:var(--ok-line)}
.alert.err{background:var(--ba-b);color:var(--ba-t);border-color:var(--ba-line)}
.alert.wa{background:var(--wa-b);color:var(--wa-t);border-color:var(--wa-line)}
.alert.in{background:var(--in-b);color:var(--in-t);border-color:var(--in-line)}
.alert ul{margin:4px 0 0;padding-left:18px}

/* Дашбоардын анхааруулгын жагсаалт */
.alert-row{display:flex;gap:11px;align-items:flex-start;padding:11px 16px;
  border-bottom:1px solid var(--line-soft)}
.alert-row:last-child{border-bottom:0}
.alert-row .sev{flex:0 0 auto;margin-top:1px}
.alert-row .msg{flex:1;min-width:0;font-size:13px}
.alert-row .met{font-size:11.5px;color:var(--muted);margin-top:2px}
.alert-row .go{flex:0 0 auto;font-size:12px;white-space:nowrap}

/* ========================================================== Маягт ======== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:2px;min-width:0}
.field label{font-size:12px;font-weight:650;color:var(--sub)}
.field .req{color:var(--ba-t)}
input,select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);font-size:13.5px;font-family:inherit;
}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:-1px;
  border-color:transparent}
input:disabled,input[readonly]{background:var(--surface-2);color:var(--sub);cursor:default}
textarea{min-height:74px;resize:vertical}
.hint{font-size:11.5px;color:var(--muted)}
.check{display:flex;align-items:center;gap:8px}
.check input{width:auto}

/* Тооцоологдсон талбар — гараар засах талбараас ЯЛГАГДАЖ харагдана */
.calc{background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--radius-sm);
  padding:8px 11px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}

/* Маягтын бүлэг */
.fset{border:0;margin:0 0 4px;padding:0}
.fset > legend{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:0 0 9px}

/* ========================================================== Товч ========= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 15px;border:1px solid transparent;border-radius:var(--radius-sm);
  background:var(--primary);color:#fff;font-weight:600;font-size:13.5px;
  cursor:pointer;font-family:inherit;white-space:nowrap;line-height:1.4;
}
.btn:hover{background:var(--primary-d);text-decoration:none;color:#fff}
.btn:active{transform:translateY(1px)}
.btn.g{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.g:hover{background:var(--surface-2);color:var(--ink);border-color:var(--muted)}
.btn.sm{padding:5px 11px;font-size:12.5px}
.btn.danger{background:var(--ba-t);color:#fff}
.btn.danger:hover{background:#b91c1c}
.btn[disabled],.btn.off{opacity:.5;pointer-events:none}
.formbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  padding:14px 0 4px;border-top:1px solid var(--line-soft);margin-top:4px}
.formbar .danger-zone{margin-left:auto}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}

/* --- Хэлний сонголт ----------------------------------------------------- */
.langbar{display:flex;gap:3px;background:var(--surface-2);padding:3px;border-radius:999px}
.langbar a{padding:3px 11px;border-radius:999px;font-size:12px;color:var(--sub);font-weight:600}
.langbar a:hover{color:var(--ink);text-decoration:none}
.langbar a.on{background:var(--primary);color:#fff}

/* ==================================================== Хоосон / төлөв ===== */
.empty{padding:34px 20px;text-align:center;color:var(--muted)}
.empty .big{font-size:26px;opacity:.35;margin-bottom:6px}
.empty .t{color:var(--sub);font-weight:600;margin-bottom:3px}

/* ============================================================ Граф ======= */
/* Гадны сан ашиглахгүй — SVG-г шууд зурна. Ингэснээр интернэт удаан, эсвэл
   CDN хаагдсан газраас (Хятад) нээхэд ч граф гарч ирнэ. */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .ax{stroke:var(--line);stroke-width:1}
.chart .gl{stroke:var(--line-soft);stroke-width:1}
.chart text{fill:var(--muted);font-size:9.5px;font-family:inherit}
.chart .b1{fill:var(--primary);opacity:.85}
.chart .b2{fill:var(--ok-t);opacity:.8}
.chart .l1{fill:none;stroke:var(--primary);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.chart .l2{fill:none;stroke:var(--ok-t);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.chart .pt{fill:var(--surface);stroke-width:2}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--sub);
  margin-bottom:10px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}

/* --- Жижиг хэмжүүр (нөөц гэх мэт) --------------------------------------- */
.meter{height:6px;border-radius:999px;background:var(--line-soft);overflow:hidden;margin-top:6px}
.meter > i{display:block;height:100%;background:var(--primary);border-radius:999px}
.stat-line{display:flex;align-items:baseline;gap:8px;padding:9px 0;
  border-bottom:1px solid var(--line-soft)}
.stat-line:last-child{border-bottom:0}
.stat-line .k{font-size:12.5px;color:var(--sub);min-width:0;flex:1}
.stat-line .v{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- Мөр бүрийн жагсаалт (сүүлийн үйл явдал) ---------------------------- */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);
  font-size:12.5px}
.feed li:last-child{border-bottom:0}
.feed .dot{width:7px;height:7px;border-radius:50%;background:var(--primary);
  margin-top:6px;flex:0 0 auto}
.feed .when{margin-left:auto;color:var(--muted);font-size:11.5px;white-space:nowrap}

/* ======================================================= Нэвтрэх хуудас == */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 14px}
.auth-box{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:26px;box-shadow:var(--shadow-lg)}
.auth-head{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.auth-head .side-logo{width:44px;height:44px;font-size:18px}
.auth-head .side-name{color:var(--ink)}

/* ==================================================== Дэлгэцийн хэмжээ === */
/* Таблет — хажуу самбар хумигдана, хүснэгт хөндлөн гүйнэ */
@media(max-width:1024px){
  :root{--side-w:210px}
  .content{padding:16px}
  .top-search{flex-basis:220px}
  .top-user .nm,.top-user .rl{display:none}
}
/* Утас — хажуу самбар дээд талд хэвтээ болно */
@media(max-width:820px){
  .shell{flex-direction:column}
  .side{width:100%!important;height:auto;position:static;flex-direction:row;
    overflow-x:auto;align-items:center;border-bottom:1px solid var(--side-line)}
  .side-brand{border-bottom:0;padding:10px 12px;min-height:0}
  .side-nav{display:flex;gap:3px;padding:8px;flex:1}
  .side-nav a{white-space:nowrap}
  .side-sec,.side-foot,.side-sub{display:none}
  .side-burger{display:none}
  .content{padding:13px}
  .topbar{padding:0 13px;gap:8px}
  .top-search{display:none}
  .page-head .ttl{font-size:18px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:9px}
  .kpi .v{font-size:20px}
  .filterbar{padding:10px}
  .filterbar .fld{flex:1 1 130px}
  /* Маягт нэг багана болно */
  .grid{grid-template-columns:1fr}
}

@media print{
  .side,.topbar,.filterbar,.btn,.formbar{display:none!important}
  .content{padding:0;max-width:none}
  .card,.panel{box-shadow:none;border-color:#ccc;break-inside:avoid}
}

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

/* ==========================================================================
   ДАШБОАРД — лавлагаа загварын дагуу (2026-09-18)
   --------------------------------------------------------------------------
   Энэ хэсэг ЗӨВХӨН /dashboard-д үйлчилнэ. Бусад хуудсыг хөндөхгүйн тулд
   бүх дүрэм `.dash` дотор бичигдсэн.
   ========================================================================== */

/* --- Гурван баганат бүтэц: цэс | ажлын талбар | мэдээллийн багана ------- */
.dash{display:grid;gap:16px;grid-template-columns:1fr;align-items:start}
@media(min-width:1280px){
  .dash{grid-template-columns:minmax(0,1fr) var(--aside-w)}
}
.dash-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.dash-aside{min-width:0;display:flex;flex-direction:column;gap:16px}

/* --- Хуудасны гарчиг: монгол дээр, англи доор --------------------------- */
.dash-title{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.dash-title h1{font-size:27px;font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0}
.dash-title .en{font-size:16px;color:var(--muted);font-weight:600;line-height:1.5}
.dash-sub{font-size:13px;color:var(--sub)}
.dash-sub .en{display:block;font-size:11.5px;color:var(--muted)}

/* --- KPI карт ----------------------------------------------------------- */
.kpi5{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.kpi5 .kpi{padding:14px 15px}
.kpi5 .kt{font-size:12.5px;font-weight:650;line-height:1.25}
.kpi5 .ke{font-size:11px;color:var(--muted);line-height:1.3;margin-bottom:9px}
.kpi5 .v{font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.kpi5 .v.off{color:var(--muted);font-weight:600}
.kpi5 .foot{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px}
.kpi5 .cap{color:var(--muted);font-size:11px;line-height:1.3}
.kpi5 .cap .en{opacity:.75}
.trend{font-weight:700;white-space:nowrap}
.trend.up{color:var(--ok-t)} .trend.down{color:var(--ba-t)} .trend.flat{color:var(--muted)}

/* --- Самбарын хоёр хэлт толгой ------------------------------------------ */
.panel-head .ttl{min-width:0}
.panel-head .ttl b{display:block;font-size:14.5px;font-weight:650;line-height:1.25}
.panel-head .ttl span{display:block;font-size:11px;color:var(--muted);line-height:1.3}
.panel-head select{width:auto;padding:5px 9px;font-size:12px;
  background:var(--surface-2);border-color:var(--line)}

/* --- Баруун талын зураг --------------------------------------------------
   Батлагдсан үйлдвэрийн гэрэл зураг ОДООГООР БАЙХГҮЙ. Хамааралгүй сток
   зураг тавихгүй — уул, үйлдвэрийн дүрсийг SVG-ээр өөрсдөө зурсан. Албан
   ёсны зураг гармагц `.banner > img` болгон солино. -------------------- */
.banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);min-height:132px;
  background:linear-gradient(160deg,#1e3a5f 0%,#2b5378 45%,#3d6a92 100%)}
.banner svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.banner .cap{position:relative;padding:16px;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:132px}
.banner .cap b{font-size:17px;font-weight:700;letter-spacing:-.01em;
  text-shadow:0 1px 8px rgba(0,0,0,.45)}
.banner .cap span{font-size:12px;opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.banner .note{position:absolute;right:8px;top:8px;font-size:9.5px;padding:2px 7px;
  border-radius:999px;background:rgba(255,255,255,.18);color:#fff}

/* --- Үйл ажиллагааны төлөв ----------------------------------------------- */
.st-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line-soft)}
.st-row:last-child{border-bottom:0}
.st-row .ic{width:26px;height:26px;border-radius:7px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:12px;
  background:var(--nu-b);color:var(--nu-t)}
.st-row .k{flex:1;min-width:0;font-size:12.5px;line-height:1.3}
.st-row .k .en{display:block;font-size:10.5px;color:var(--muted)}
.st-row .val{text-align:right;font-size:12.5px;font-weight:650;white-space:nowrap}
.st-row .val .en{display:block;font-size:10.5px;font-weight:500;color:var(--muted)}
.st-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  margin-top:5px;background:var(--muted)}
.st-dot.OK{background:var(--ok-t)} .st-dot.WARN{background:var(--wa-t)}
.st-dot.BAD{background:var(--ba-t)} .st-dot.OFF{background:var(--muted);opacity:.55}

/* --- Сүүлийн үйл явдал --------------------------------------------------- */
.acts-list{list-style:none;margin:0;padding:0}
.acts-list li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.acts-list li:last-child{border-bottom:0}
.acts-list .d{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:0 0 auto;
  background:var(--primary)}
.acts-list .d.g{background:var(--ok-t)} .acts-list .d.w{background:var(--wa-t)}
.acts-list .d.n{background:var(--muted)}
.acts-list .tx{flex:1;min-width:0;font-size:12.5px;line-height:1.35}
.acts-list .tx .sub{font-size:11px;color:var(--muted)}
.acts-list .tm{font-size:11px;color:var(--muted);white-space:nowrap;text-align:right}

/* --- Нөөцийн 4 карт ------------------------------------------------------ */
.inv4{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.inv-card{border:1px solid var(--line);border-radius:var(--radius);padding:12px;
  background:var(--surface-2)}
.inv-card .top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.inv-card .nm{font-size:12px;font-weight:650;line-height:1.25;min-width:0}
.inv-card .nm .en{display:block;font-size:10.5px;color:var(--muted);font-weight:500}
.inv-card .v{font-size:19px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.inv-card .v .u{font-size:12px;color:var(--muted);font-weight:600;margin-left:2px}

/* --- Анхааруулгын хүснэгт ------------------------------------------------ */
.alerts-tbl td{vertical-align:middle}
.alerts-tbl .when{white-space:nowrap;color:var(--sub)}
.sev-cell{white-space:nowrap}

/* --- Хугацааны сонголт --------------------------------------------------- */
.period{display:inline-flex;gap:2px;background:var(--surface-2);padding:3px;
  border-radius:999px;border:1px solid var(--line)}
.period a{padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:650;
  color:var(--sub);white-space:nowrap}
.period a:hover{color:var(--ink);text-decoration:none}
.period a.on{background:var(--primary);color:#fff}

/* ======================================================= ШЕЛЛ — нэмэлт === */
/* Цэсний хоёр мөрт шошго: монгол дээр, англи доор */
.side-nav a{align-items:flex-start;padding:7px 10px}
.side-label b{display:block;font-weight:600;font-size:12.5px;line-height:1.3}
.side-label i{display:block;font-style:normal;font-size:10px;opacity:.5;line-height:1.3}
.side-nav a.on .side-label i{opacity:.75}
.side-nav .ico{margin-top:2px}

/* Бүлгийг хумих — <details>, JavaScript хэрэггүй */
.side-group{margin:0}
.side-group > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:6px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.45;
  padding:14px 10px 6px;font-weight:700;color:var(--side-ink)}
.side-group > summary::-webkit-details-marker{display:none}
.side-group > summary::after{content:"⌄";margin-left:auto;font-size:13px;
  transition:transform .15s ease}
.side-group[open] > summary::after{transform:rotate(180deg)}
.side-group > summary:hover{opacity:.8}
.side-group .en{opacity:.6;text-transform:none;letter-spacing:0;font-weight:600}

/* Толгойн хонх ба огноо */
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--radius-sm);color:var(--sub);font-size:16px}
.bell:hover{background:var(--line-soft);color:var(--ink);text-decoration:none}
.bell .cnt{position:absolute;top:2px;right:1px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--ba-t);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.top-when{text-align:right;font-size:11.5px;color:var(--sub);white-space:nowrap;
  line-height:1.3;font-variant-numeric:tabular-nums}
.top-when span{display:block;font-size:10.5px;color:var(--muted)}

@media(max-width:1279px){
  .dash-aside{flex-direction:row;flex-wrap:wrap}
  .dash-aside > *{flex:1 1 300px}
}
@media(max-width:1024px){
  .top-when{display:none}
}
@media(max-width:820px){
  .dash-title h1{font-size:21px}
  .dash-title .en{font-size:13px}
  .side-label i{display:none}
  .side-group > summary{display:none}
  .side-group{display:contents}
}

/* ==========================================================================
   Хүснэгтийн багана — өргөнийг удирдах
   --------------------------------------------------------------------------
   `table-layout:fixed` нь <colgroup>-д зааснаар багана тогтоно. Үүнгүй бол
   хөтөч агуулгаасаа хамаарч өөрөө хуваарилдаг тул «нарийсга» гэсэн заавар
   үйлчлэхгүй. Урт үг нүднээс халихгүйн тулд мөр таслана.
   ========================================================================== */
.tbl-fixed{table-layout:fixed}
/* Өгөгдөл нь урт байж болно (и-мэйл, тайлбар) тул хаанаас ч таслана. */
.tbl-fixed td{overflow-wrap:anywhere}
/* ГАРЧИГ нь ӨӨР: үг дундуураа тасарвал «Байгуул/сан» гэж хоёр мөр болж,
   бичиг давхарласан мэт уншигдахгүй болно. Зөвхөн ЗАЙ дээр тасална. */
.tbl-fixed th{overflow-wrap:normal;word-break:normal;hyphens:none}

/* Баримтын код — жагсаалтын үндсэн таних тэмдэг тул тод, томоор */
/* Баримтын код — жагсаалт, гарчиг, breadcrumb бүхэнд ИЖИЛ харагдана.
   Моноширхэгт фонт нь тоо, үсгийг тэгш байрлуулж, D005 / D050 хоёрыг
   андуурахаас сэргийлнэ. */
.code-cell{font-family:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace;
  font-size:14px;font-weight:700;letter-spacing:.01em}
.code-cell a{color:var(--ink)}
.code-cell a:hover{color:var(--primary)}

/* Нэр — тод биш, ердийн жин (кодоос хоёрдогч) */
.name-cell a{color:var(--ink);font-weight:500}
.name-cell a:hover{color:var(--primary)}

/* Хятад нэр — уншихад тохиромжтой фонт */
.zh-cell{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  font-size:13px}

/* Цэсний SVG дүрс — текст тэмдэгттэй ижил хэмжээтэй байлгана */
.side-nav .ico svg{width:15px;height:15px;display:block;margin:0 auto}

/* ==========================================================================
   Нягт хүснэгт — дэлгэцэнд илүү олон мөр багтаана
   --------------------------------------------------------------------------
   ERP-д мөр бүрийг тансаг өндөр байлгахаас илүү, нэг дэлгэцэнд олон мөр
   харагдах нь чухал. Хэрэглэгч гүйлгэх тусам контекстээ алддаг.
   ========================================================================== */
.tbl-tight td{padding:5px 10px;line-height:1.35}
.tbl-tight th{padding:6px 10px}
.tbl-tight tbody tr:hover td{background:var(--primary-l)}

/* Багана тус бүрийн хайлт — хүснэгтийн толгойн доор суусан мөр */
.filter-row th{padding:5px 6px;background:var(--surface);border-bottom:1px solid var(--line)}
.filter-row input,.filter-row select{padding:4px 7px;font-size:12px;
  background:var(--surface-2);border-color:var(--line-soft);width:100%}
.filter-row input:focus,.filter-row select:focus{background:var(--surface)}
.filter-row .btn{width:auto}

/* Мөрийн үйлдлүүд — хажуу хажуугаа, нарийхан */
.rowacts{white-space:nowrap}
.rowacts .btn{padding:3px 8px;font-size:12px}
.rowacts .btn + .btn{margin-left:3px}
.danger-link{color:var(--ba-t)!important;border-color:var(--ba-line)!important}
.danger-link:hover{background:var(--ba-b)!important;color:var(--ba-t)!important}

/* Устгах хэсэг — маягтын доод талд, бусдаас тусгаарлагдсан */
.danger-zone-box{border:1px solid var(--ba-line);background:var(--ba-b);
  border-radius:var(--radius);padding:14px;margin-top:20px}
.danger-zone-box h3{margin:0 0 5px;color:var(--ba-t);font-size:13.5px}
.danger-zone-box p{margin:0 0 10px;font-size:12.5px;color:var(--ba-t);opacity:.9}
.danger-zone-box ul{margin:0 0 10px;padding-left:18px;font-size:12.5px;color:var(--ba-t)}

/* ==========================================================================
   УТАС — 820px ба түүнээс доош
   --------------------------------------------------------------------------
   Энэ систем дээр БҮХ ажил утсаар хийгдэнэ: пүүчин хаалган дээр, оператор
   шугам дээр, инженер талбай дээр. Тиймээс энэ хэсэг бол нэмэлт биш,
   тэнцүү эрхтэй байрлал.

   Гол зарчмууд:
   · Цэс хажуугаас гарч ирдэг хөшиг (20 холбоос хөндлөн гүйхгүй)
   · Хүснэгтийн эхний багана наалдана — код үргэлж харагдана
   · Хуруунд 44px-ээс багагүй товч
   · Оролтын фонт 16px — эс бөгөөс Safari фокус авахад ойртож томордог
   · iPhone-ы «хамар», доод зураас руу агуулга орохгүй (safe-area)
   ========================================================================== */

/* iPhone-ы аюулгүй бүс */
@supports (padding: max(0px)) {
  /* iPhone дээр апп болж суусан үед агуулга ЦАГНЫ МӨРНИЙ ДООР эхэлдэг.
     Толгойн дээд талд тэр зайг нэмэхгүй бол гарчиг цаг, батарейтай
     давхцана. Дэлгэц бүрэн хэвтээ үед энэ утга 0 болно. */
  .topbar { padding-top: env(safe-area-inset-top);
            min-height: calc(var(--header-h) + env(safe-area-inset-top));
            padding-left: max(13px, env(safe-area-inset-left));
            padding-right: max(13px, env(safe-area-inset-right)); }
  .side { padding-top: env(safe-area-inset-top); }
  .content { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (max-width: 820px) {
  /* ---------------------------------------------------- Цэс = хөшиг ---- */
  .shell { flex-direction: row; }

  .side {
    position: fixed; z-index: 60; top: 0; bottom: 0; left: 0;
    width: 282px !important; max-width: 86vw; height: 100dvh;
    flex-direction: column; overflow-y: auto;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.35);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #side-toggle:checked ~ .shell .side { transform: none; }

  /* Хөшиг нээлттэй үед ард нь бүдэг давхарга — дарвал хаагдана */
  .scrim {
    position: fixed; inset: 0; z-index: 55; background: rgba(8,15,26,.5);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  #side-toggle:checked ~ .shell .scrim { opacity: 1; pointer-events: auto; }

  /* Хумих дүрмүүд утсанд хамаарахгүй — энд чагт нь «нээх» гэсэн утгатай */
  #side-toggle:checked ~ .shell .side-label,
  #side-toggle:checked ~ .shell .side-sub,
  #side-toggle:checked ~ .shell .side-name,
  #side-toggle:checked ~ .shell .side-sec,
  #side-toggle:checked ~ .shell .side-foot .who,
  #side-toggle:checked ~ .shell .side-foot .role { display: revert; }
  #side-toggle:checked ~ .shell .side-brand { padding: 14px 16px; justify-content: flex-start; }
  #side-toggle:checked ~ .shell .side-nav a { justify-content: flex-start; padding: 11px 12px; }

  .side-burger { display: inline-flex; width: 40px; height: 40px; font-size: 19px; }
  .side-group > summary { display: flex; }
  .side-group { display: block; }
  .side-nav a { padding: 11px 12px; }      /* хуруунд тохирсон өндөр */
  .side-label i { display: block; }
  .side-foot { display: block; }

  /* ------------------------------------------------------- Толгой ----- */
  .topbar { gap: 6px; min-height: 54px; }
  .top-user .av { width: 34px; height: 34px; }
  .langbar a { padding: 6px 10px; }

  /* ------------------------------------------------------ Хүснэгт ----- */
  /* Эхний багана наалдана — хөндлөн гүйхэд код нүднээс гарахгүй */
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tablewrap table:not(.as-cards) th:first-child,
  .tablewrap table:not(.as-cards) td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }
  .tablewrap table:not(.as-cards) thead th:first-child { z-index: 3; background: var(--surface-2); }
  .tbl-tight td, .tbl-tight th { padding: 9px 10px; }   /* хуруунд дарахад хангалттай */

  /* --------------------------------------------- Хүснэгт → хөзөр ------ */
  /* `data-label` бүхий хүснэгтийг мөр бүрээр нь карт болгоно. */
  table.as-cards, table.as-cards tbody, table.as-cards tr, table.as-cards td { display: block; width: auto; }
  table.as-cards thead, table.as-cards colgroup, table.as-cards .filter-row { display: none; }
  table.as-cards tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    margin: 0 0 10px; padding: 11px 13px; background: var(--surface);
  }
  table.as-cards tr:hover td { background: transparent; }
  table.as-cards td {
    border: 0; padding: 4px 0; display: flex; gap: 12px; align-items: baseline;
    text-align: left !important;
  }
  table.as-cards td::before {
    content: attr(data-label); flex: 0 0 42%; color: var(--sub);
    font-size: 11.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em;
  }
  table.as-cards td:empty { display: none; }
  /* Эхний нүд бол картын гарчиг */
  table.as-cards td:first-child {
    display: block; font-size: 15px; margin-bottom: 6px;
    padding-bottom: 7px; border-bottom: 1px solid var(--line-soft);
    position: static; box-shadow: none;
  }
  table.as-cards td:first-child::before { display: none; }
  table.as-cards .rowacts { justify-content: flex-end; padding-top: 9px; }
  table.as-cards .rowacts::before { display: none; }

  /* -------------------------------------------------- Маягт, товч ----- */
  /* 16px-ээс бага бол Safari фокус авахад дэлгэцийг ойртуулдаг */
  input, select, textarea { font-size: 16px; padding: 10px 12px; }
  .filterbar input, .filterbar select { font-size: 16px; padding: 9px 11px; }
  .filter-row input, .filter-row select { font-size: 16px; }
  .btn { padding: 11px 16px; font-size: 14px; min-height: 44px; }
  .btn.sm { padding: 8px 12px; font-size: 13px; min-height: 38px; }
  .rowacts .btn { min-height: 38px; }
  .check input[type="checkbox"] { width: 22px; height: 22px; }

  .filterbar { flex-direction: column; align-items: stretch; }
  .filterbar .fld { flex: 1 1 auto; width: 100%; }
  .filterbar .btn { width: 100%; }

  .page-head { gap: 10px; }
  .page-head .acts { margin-left: 0; width: 100%; }
  .page-head .acts .btn { flex: 1; }

  /* --------------------------------------------------- Дашбоард ------- */
  .kpi5, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .inv4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-aside { flex-direction: column; }
  .dash-aside > * { flex: 1 1 auto; }
  .chart { min-height: 150px; }
}

/* Маш нарийн дэлгэц (iPhone SE гэх мэт) */
@media (max-width: 380px) {
  .kpi5, .kpis, .inv4 { grid-template-columns: 1fr; }
  .top-user { display: none; }
}