/* ════════════════════════════════════════════════════════════
   NSCA Platform — DESIGN SYSTEM (component layer)
   Chuẩn hoá giao diện toàn hệ thống theo MOCKUP_HE_THONG_CHUAN.html
   - Nạp SAU theme.css → override hình khối/khoảng cách/typography component.
   - Chỉ skin lại; KHÔNG đổi chức năng. Mọi màu lấy từ token theme.css
     nên tự đúng ở cả Sáng (ngả xanh) lẫn Tối (navy).
   - Vì các trang module được nhúng chung 1 document (index.html), file này
     phủ cho toàn bộ trang đang dùng class .btn/.card/.kpi/table/.badge.
   Phiên bản: 2026-06-27.2
   ════════════════════════════════════════════════════════════ */

/* ───────── Cầu nối token: tên mockup → token theme.css ─────────
   Cho phép dùng nguyên cú pháp component của mockup (var(--accent)…)
   mà vẫn ăn theo bảng màu Sáng/Tối có sẵn. */
:root{
  --accent:var(--b400); --accent-50:var(--b50); --accent-100:var(--b100); --accent-700:var(--b600);
  --green:var(--ok);   --green-bg:var(--ok2);
  --amber:var(--warn); --amber-bg:var(--warn2);
  --red:var(--err);    --red-bg:var(--err2);
  --blue:var(--info);  --blue-bg:var(--info2);
  --slate:var(--text-3); --slate-bg:var(--surface-3);
  --border-3:var(--border-2);
  --g400:var(--ok);                /* vài trang dùng var(--g400) cho giá trị xanh */
  --row-h:46px;
  --sh-card:var(--shadow);
  --sh-pop:var(--shadow-lg);
}

.num,.val,.cell-code,.kpi-val,.kpi-value{ font-variant-numeric:tabular-nums; }
/* Tab module bị tràn topbar → ẩn (chuyển vào menu "▾ Thêm"); dùng class để không
   đụng inline style.display của tab Quản Trị */
.tb-mod.tb-of-hidden{ display:none !important; }

/* ════════════════════════════════════════════════════════════
   1) RE-SKIN component sẵn có (phủ toàn hệ thống)
   ════════════════════════════════════════════════════════════ */

/* ── Nút ── */
.btn{
  height:34px; padding:0 13px; gap:6px;
  border-radius:8px; font-size:12.5px; font-weight:600;
  letter-spacing:0; transition:.12s; line-height:1;
}
.btn-sm{ height:30px; padding:0 10px; font-size:12px; }
.btn-xs{ height:26px; padding:0 9px;  font-size:11px; }
.btn-primary{ background:var(--accent); border-color:var(--accent);
  box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 40%,transparent); }
.btn-primary:hover{ filter:brightness(1.06); background:var(--accent); border-color:var(--accent); }
.btn-secondary{ background:var(--surface); color:var(--text-2); border-color:var(--border-2); }
.btn-secondary:hover{ background:var(--surface-2); border-color:var(--border-2); }
/* bí danh kiểu mockup: .btn.primary */
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 40%,transparent); }
.btn.primary:hover{ filter:brightness(1.06); }

/* ── Thẻ/Panel ── */
.card{ border:1px solid var(--border-2); border-radius:10px; box-shadow:var(--sh-card); }
.card-header{ padding:14px 16px; border-bottom:1px solid var(--border); gap:9px; }
.card-title{ font-size:14px; font-weight:700; letter-spacing:-.1px; }
.card-subtitle{ font-family:var(--font-mono); font-size:11px; }
.card-body{ padding:14px 16px; }

/* ── KPI card sẵn có ── */
.kpi{ border:1px solid var(--border-2); border-radius:10px; padding:16px; box-shadow:var(--sh-card); }
.kpi-label{
  font-family:var(--font-sans); font-size:12px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--text-3); margin-bottom:6px;
}
.kpi-value{ font-size:25px; font-weight:800; letter-spacing:-.6px; }
.kpi-value .unit{ font-size:14px; font-weight:500; color:var(--text-3); }
.kpi::after{ height:3px; opacity:.9; }

/* mini-stat dạng pill (trang orders dùng .kpi-mini) */
.kpi-mini{
  display:inline-flex; align-items:center; gap:7px;
  height:32px; padding:0 12px; border-radius:8px;
  font-size:12.5px; font-weight:600; color:var(--text-2);
  background:var(--surface); border:1px solid var(--border-2);
}
.kpi-mini::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--slate); }
.kpi-mini.green::before{ background:var(--green); }
.kpi-mini.blue::before { background:var(--blue); }
.kpi-mini.amber::before{ background:var(--amber); }
.kpi-mini.red::before  { background:var(--red); }
.kpi-mini.purple::before{ background:#7c3aed; }

/* ── Bảng ── */
thead th{
  padding:10px 14px; font-family:var(--font-sans);
  font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase;
  color:var(--text-4); background:var(--surface-2); border-bottom:1px solid var(--border-2);
}
tbody td{ padding:0 14px; height:var(--row-h); font-size:13px; border-bottom:1px solid var(--border); }
tbody tr:hover td{ background:var(--surface-2); }
.td-primary{ color:var(--text); font-weight:600; }

/* ── Badge: bổ sung biến thể màu + chấm (trang dùng .badge.green/.blue/…) ── */
.badge{ gap:5px; padding:3px 9px; border-radius:100px; font-size:11.5px; }
.badge .bd{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.green,.badge-ok    { color:var(--green); background:var(--green-bg); }
.badge.amber,.badge.warn,.badge-warn{ color:var(--amber); background:var(--amber-bg); }
.badge.blue,.badge.info,.badge-info { color:var(--blue);  background:var(--blue-bg); }
.badge.red,.badge.err,.badge-err    { color:var(--red);   background:var(--red-bg); }
.badge.slate,.badge.neutral,.badge-neutral{ color:var(--slate); background:var(--slate-bg); }
.badge.purple{ color:#7c3aed; background:color-mix(in srgb,#7c3aed 14%,transparent); }
/* chấm tròn tự động trước nội dung badge màu */
.badge.green::before,.badge.amber::before,.badge.blue::before,
.badge.red::before,.badge.slate::before,.badge.purple::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;
}

/* ── Input dùng chung (trang dùng .form-inp / .inp-sm — trước đây chưa style) ── */
.form-inp,.inp-sm{
  width:100%; height:36px; padding:0 12px;
  border:1px solid var(--border-2); border-radius:8px;
  background:var(--surface); color:var(--text);
  font-family:inherit; font-size:13px; outline:none; transition:.12s;
}
textarea.form-inp{ height:auto; padding:9px 12px; line-height:1.5; }
.inp-sm{ height:32px; font-size:12.5px; border-radius:7px; }
.form-inp:focus,.inp-sm:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50); }
.form-inp::placeholder,.inp-sm::placeholder{ color:var(--text-4); }

/* ════════════════════════════════════════════════════════════
   2) COMPONENT MỚI kiểu mockup (additive — cho trang chuẩn hoá)
   ════════════════════════════════════════════════════════════ */

/* Tiêu đề trang */
.ph{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.ph-bc{ font-size:12px; color:var(--text-3); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.ph-bc .lk{ cursor:pointer; } .ph-bc .lk:hover{ color:var(--text); }
.ph-tt{ font-size:21px; font-weight:800; letter-spacing:-.45px; display:flex; align-items:center; gap:11px; color:var(--text); }
.ph-sub{ font-size:12.5px; color:var(--text-3); margin-top:4px; }
.acts{ display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; }

/* Panel (bí danh chuẩn của .card) */
.panel{ background:var(--surface); border:1px solid var(--border-2); border-radius:10px; box-shadow:var(--sh-card); overflow:hidden; margin-bottom:14px; }
.panel-hd{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.panel-tt{ font-size:14px; font-weight:700; letter-spacing:-.2px; color:var(--text); }
.panel-link{ font-size:12px; font-weight:600; color:var(--accent); cursor:pointer; display:flex; align-items:center; gap:3px; }
.panel-link:hover{ text-decoration:underline; }
.panel-body{ padding:14px 16px; }

/* Lưới KPI kiểu mockup */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.kpis6{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:18px; }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; }
.kpi-ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--accent-50); color:var(--accent); font-size:17px; }
.kpi-delta{ display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:6px; }
.kpi-delta.up{ color:var(--green); background:var(--green-bg); }
.kpi-delta.down,.kpi-delta.dn{ color:var(--red); background:var(--red-bg); }
.kpi-delta.flat,.kpi-delta.fl{ color:var(--text-3); background:var(--surface-2); }
.kpi-val{ font-size:25px; font-weight:800; letter-spacing:-.6px; margin-top:3px; color:var(--text); }
.kpi-foot{ font-size:11.5px; color:var(--text-4); margin-top:5px; }

/* Tabs */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border-2); margin-bottom:14px; flex-wrap:wrap; }
.tab{ padding:9px 13px; font-size:13px; font-weight:600; color:var(--text-3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; gap:7px; }
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.tab .cnt{ font-size:11px; font-weight:700; background:var(--surface-3); color:var(--text-3); padding:1px 7px; border-radius:100px; }
.tab.active .cnt{ background:var(--accent-100); color:var(--accent); }

/* Toolbar + tìm kiếm trong bảng + segmented */
.toolbar{ display:flex; align-items:center; gap:8px; padding:12px 0; flex-wrap:wrap; }
.toolbar .spacer{ flex:1; }
.tb-search{ position:relative; width:230px; max-width:100%; }
.tb-search .si{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-4); }
.tb-search input{ width:100%; height:32px; border-radius:7px; border:1px solid var(--border-2); background:var(--surface); padding:0 10px 0 32px; font-size:12.5px; outline:none; font-family:inherit; color:var(--text); }
.tb-search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50); }
.seg{ display:inline-flex; border:1px solid var(--border-2); border-radius:7px; overflow:hidden; height:32px; }
.seg button{ border:none; background:var(--surface); padding:0 9px; cursor:pointer; color:var(--text-3); display:flex; align-items:center; }
.seg button.on{ background:var(--accent-50); color:var(--accent); }

/* Footer bảng + phân trang */
.foot{ display:flex; align-items:center; justify-content:space-between; padding:12px 2px; font-size:12.5px; color:var(--text-3); flex-wrap:wrap; gap:8px; }
.pager{ display:flex; align-items:center; gap:3px; }
.pgbtn{ min-width:30px; height:30px; border-radius:7px; border:1px solid var(--border-2); background:var(--surface); color:var(--text-2); cursor:pointer; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.pgbtn:hover{ background:var(--surface-2); }
.pgbtn.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pgbtn:disabled{ opacity:.4; cursor:default; }

/* Ô khách hàng / mã / giá trị / phụ */
.cust{ display:flex; align-items:center; gap:9px; min-width:0; }
.cust-av{ width:26px; height:26px; border-radius:7px; background:var(--surface-3); color:var(--text-3); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cust-nm{ font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; }
.cell-code{ font-family:var(--font-mono); font-weight:600; font-size:12px; color:var(--text); }
.val{ text-align:right; font-weight:600; color:var(--text); }
.muted{ color:var(--text-3); }

/* Thanh phân tách trạng thái (status breakdown) — prefix dsb- tránh đụng sidebar .sb-* */
.dsb-row{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.dsb-row .lab{ width:120px; flex-shrink:0; }
.dsb-track{ flex:1; height:8px; border-radius:6px; background:var(--surface-2); overflow:hidden; }
.dsb-fill{ height:100%; border-radius:6px; }
.dsb-n{ width:34px; text-align:right; font-weight:700; font-size:12.5px; font-variant-numeric:tabular-nums; }

/* ════════════════════════════════════════════════════════════
   3) Workspace switcher (Không gian phòng) — đầu sidebar
   ════════════════════════════════════════════════════════════ */
.ws{ position:relative; margin:10px; padding:9px 10px; border-radius:9px; border:1px solid var(--sb-border);
  display:flex; align-items:center; gap:10px; cursor:pointer; transition:.12s; }
.ws:hover{ background:var(--sb-hover); }
.ws-mk{ width:28px; height:28px; border-radius:7px; background:var(--sb-accent); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
.ws-meta{ min-width:0; }
.ws-tt{ font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-4); }
.ws-nm{ font-size:13px; font-weight:700; color:var(--sb-text-a); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-cr{ margin-left:auto; color:var(--text-4); flex-shrink:0; }
.sidebar.sb-collapsed .ws{ justify-content:center; padding:9px 0; }
.sidebar.sb-collapsed .ws-meta,
.sidebar.sb-collapsed .ws-cr{ display:none !important; }
/* Dropdown chọn không gian phòng */
.ws-menu{ position:absolute; top:calc(100% + 6px); left:8px; right:8px; z-index:90;
  background:var(--surface); border:1px solid var(--border-2); border-radius:10px;
  box-shadow:var(--shadow-lg); padding:6px; display:none; max-height:62vh; overflow:auto; }
.ws-menu.open{ display:block; }
.ws-opt{ display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:7px;
  cursor:pointer; font-size:13px; font-weight:600; color:var(--text-2); white-space:nowrap; }
.ws-opt:hover{ background:var(--surface-2); color:var(--text); }
.ws-opt.active{ background:var(--accent-50); color:var(--accent); }
.ws-omk{ width:24px; height:24px; border-radius:6px; background:var(--surface-3); color:var(--text-3);
  font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ws-opt.active .ws-omk{ background:var(--accent); color:#fff; }
/* Nút thu/mở sidebar trong cây thư mục */
.sb-fold-btn{ display:flex; align-items:center; justify-content:flex-end; gap:5px;
  width:100%; padding:4px 14px 4px 10px;
  background:none; border:none; border-bottom:1px solid var(--sb-border);
  color:var(--text-4); cursor:pointer; font-size:10px; font-weight:600;
  letter-spacing:.4px; box-sizing:border-box; transition:background .12s, color .12s; }
.sb-fold-btn:hover{ background:var(--sb-hover); color:var(--sb-text-a); }
.sb-fold-btn svg{ width:13px; height:13px; flex-shrink:0; transition:transform .18s; }
.sidebar.sb-collapsed .sb-fold-btn{ justify-content:center; padding:4px 0; }
.sidebar.sb-collapsed .sb-fold-btn svg{ transform:rotate(180deg); }
.sidebar.sb-collapsed .sb-fold-label{ display:none; }

/* ── Responsive nhẹ cho lưới KPI mockup ── */
@media (max-width:1080px){
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .kpis6{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:680px){
  .kpis,.kpis6{ grid-template-columns:repeat(2,1fr); }
  .tb-search{ width:100%; }
}

/* ════════════════════════════════════════════════════════════
   Tay cầm Thu/Mở sidebar — nằm ở MÉP PHẢI cây thư mục (kéo vào / mở ra)
   Vị trí & chiều mũi tên đổi theo trạng thái sidebar bằng selector anh-em ~
   ════════════════════════════════════════════════════════════ */
#sb-edge-toggle{
  position:fixed; top:90px; left:calc(var(--sidebar-w,224px) - 13px); z-index:55;
  width:26px; height:26px; border-radius:50%;
  background:var(--surface); border:1px solid var(--sb-border,var(--border-2));
  color:var(--sb-text,var(--text-3)); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); transition:left .18s ease, background .15s, color .15s, border-color .15s;
}
#sb-edge-toggle:hover{ background:var(--sb-hover,var(--surface-2)); color:var(--sb-text-a,var(--text)); border-color:var(--sb-accent,var(--accent)); }
#sb-edge-toggle svg{ width:15px; height:15px; transition:transform .2s; }
.sidebar.sb-collapsed ~ #sb-edge-toggle{ left:39px; }
.sidebar.sb-hidden ~ #sb-edge-toggle{ left:6px; }
.sidebar.sb-collapsed ~ #sb-edge-toggle svg,
.sidebar.sb-hidden ~ #sb-edge-toggle svg{ transform:rotate(180deg); }
@media (max-width:768px){ #sb-edge-toggle{ display:none; } }