/* ============================================================
   RMH M04 — Theme dùng chung
   LIGHT = PolicyPilot (xanh dương, card trắng) · DARK = RMH (gold, nền đen)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- LIGHT (PolicyPilot) ---- */
  --bg:#F4F5F7; --card:#FFFFFF; --card2:#FAFBFC; --rowh:#F6F8FB;
  --bd:#ECEDF1; --bd2:#E1E3E9;
  --tp:#171A1F; --ts:#6B7280; --tt:#9CA2AD;
  --primary:#2D6BFF; --primary-tx:#FFFFFF; --primary-soft:rgba(45,107,255,.10);
  --ok:#16A34A;   --ok-bg:#E7F6EC;  --ok-tx:#157F3C;
  --danger:#E5484D;--danger-bg:#FCEBEC;--danger-tx:#C0383D;
  --warn:#E0890F; --warn-bg:#FBEFDA; --warn-tx:#946008;
  --asset:#7C5CFC;--asset-bg:#ECE8FB;--asset-tx:#5B43C0;
  --info:#2D6BFF; --info-bg:#E7EEFF; --info-tx:#1D4FD8;
  --gray-bg:#EEF0F3; --gray-tx:#6B7280;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --shadow-hover:0 10px 28px rgba(16,24,40,.10);
  --radius:16px; --radius-sm:11px; --radius-pill:22px; --radius-btn:10px;
}
[data-theme="dark"]{
  /* ---- DARK (RMH gold) — bám T{} của dashboard RMH ---- */
  --bg:#0A0C0F; --card:#111318; --card2:#15181E; --rowh:#181C23;
  --bd:#1E2330; --bd2:#272D3B;
  --tp:#EEE8DC; --ts:#9CA3AF; --tt:#6B7280;
  --primary:#C9A84C; --primary-tx:#10131A; --primary-soft:rgba(201,168,76,.14);
  --ok:#22C55E;   --ok-bg:rgba(34,197,94,.13); --ok-tx:#4ADE80;
  --danger:#EF4444;--danger-bg:rgba(239,68,68,.13);--danger-tx:#F87171;
  --warn:#F59E0B; --warn-bg:rgba(245,158,11,.13);--warn-tx:#FBBF24;
  --asset:#A855F7;--asset-bg:rgba(168,85,247,.15);--asset-tx:#C084FC;
  --info:#3B82F6; --info-bg:rgba(59,130,246,.14);--info-tx:#60A5FA;
  --gray-bg:rgba(255,255,255,.06); --gray-tx:#9CA3AF;
  --shadow:0 1px 3px rgba(0,0,0,.45); --shadow-hover:0 10px 28px rgba(0,0,0,.55);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{margin:0;background:var(--bg);color:var(--tp);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px;line-height:1.5;
  transition:background-color .35s ease,color .35s ease;}
.app{max-width:1180px;margin:0 auto;padding:22px 26px 56px;}

/* ============================================================
   BUTTONS — QUY CHUẨN RMH (đồng nhất light + dark)
   Bo góc 10px · hover = đậm/nhấc bóng · 5 biến thể chuẩn:
   .btn-primary (chính, màu thương hiệu — Duyệt/Xuất) ·
   .btn-soft (phụ, accent nhạt) · .btn-ghost (viền trung tính) ·
   .btn-danger-soft (Trả lại/huỷ nhẹ) · .btn-icon (nút icon vuông)
   ============================================================ */
button{font-family:inherit;cursor:pointer;border:1px solid var(--bd2);background:var(--card);color:var(--tp);
  font-weight:600;border-radius:var(--radius-btn);
  transition:transform .08s ease,background .2s,border-color .2s,box-shadow .2s,color .2s,filter .2s;}
button:active{transform:scale(.97);}
button:disabled{opacity:.5;cursor:not-allowed;}

/* chính — màu thương hiệu (xanh dương light / gold dark) */
.btn-primary{background:var(--primary);color:var(--primary-tx);border-color:var(--primary);font-weight:700;
  box-shadow:0 2px 8px var(--primary-soft);}
.btn-primary:hover:not(:disabled){filter:brightness(.94);box-shadow:0 6px 16px var(--primary-soft);}

/* phụ — accent nhạt (hành động thứ cấp: đánh dấu khớp, định giá...) */
.btn-soft{background:var(--primary-soft);color:var(--primary);border-color:transparent;font-weight:700;}
.btn-soft:hover:not(:disabled){filter:brightness(.97);box-shadow:0 3px 10px var(--primary-soft);}

/* viền — trung tính (đặt lại, thao tác nhẹ) */
.btn-ghost{background:var(--card);border-color:var(--bd2);color:var(--tp);}
.btn-ghost:hover:not(:disabled){background:var(--rowh);border-color:var(--ts);}

/* huỷ nhẹ — đỏ nhạt (Trả lại, từ chối) */
.btn-danger-soft{background:var(--danger-bg);color:var(--danger-tx);border-color:transparent;font-weight:700;}
.btn-danger-soft:hover:not(:disabled){filter:brightness(.97);box-shadow:0 3px 10px var(--danger-bg);}

/* nút icon vuông (theme toggle, logout...) */
.btn-icon{width:38px;height:38px;border-radius:var(--radius-btn);display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--ts);background:var(--card);border:1px solid var(--bd);padding:0;}
.btn-icon:hover:not(:disabled){color:var(--primary);border-color:var(--primary);}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--primary);color:var(--primary-tx);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;box-shadow:0 3px 10px var(--primary-soft);}
.brand-name{font-size:17px;font-weight:800;letter-spacing:-.01em;}
.brand-name span{color:var(--primary);}
.brand-sub{font-size:11.5px;color:var(--ts);}
.topbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ts);
  background:var(--card);border:1px solid var(--bd);border-radius:var(--radius-pill);padding:7px 13px;}
.theme-toggle{width:38px;height:38px;border-radius:var(--radius-btn);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--ts);background:var(--card);border:1px solid var(--bd);}
.theme-toggle:hover{color:var(--primary);border-color:var(--primary);}

/* ---- stat cards ---- */
.grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.stat{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);padding:16px 17px;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s;animation:fadeUp .5s ease both;}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}
.stat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
.stat-badge{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;}
.stat-arrow{width:30px;height:30px;border-radius:9px;border:1px solid var(--bd);background:var(--card2);color:var(--ts);
  display:flex;align-items:center;justify-content:center;font-size:15px;transition:.2s;}
.stat:hover .stat-arrow{color:var(--primary);border-color:var(--primary);}
.stat-label{font-size:13px;font-weight:600;color:var(--tp);}
.stat-num{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:5px 0 2px;}
.stat-sub{font-size:11.5px;color:var(--ts);}
.bg-ok{background:var(--ok-bg);color:var(--ok);} .bg-do{background:var(--danger-bg);color:var(--danger);}
.bg-cho{background:var(--warn-bg);color:var(--warn);} .bg-as{background:var(--asset-bg);color:var(--asset);}

/* ---- segmented tabs ---- */
.seg{display:inline-flex;gap:5px;background:var(--card);border:1px solid var(--bd);border-radius:var(--radius-pill);padding:5px;margin-bottom:14px;flex-wrap:wrap;}
.seg-btn{border:0;background:transparent;color:var(--ts);font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:var(--radius-pill);}
.seg-btn.on{background:var(--primary);color:var(--primary-tx);box-shadow:0 2px 8px var(--primary-soft);}

/* ---- panel + table ---- */
.panel{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;animation:fadeUp .55s .05s ease both;}
.panel-scroll{overflow-x:auto;}
table.rmh{width:100%;border-collapse:collapse;min-width:920px;}
table.rmh thead th{background:var(--card2);color:var(--ts);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  text-align:left;padding:13px 14px;border-bottom:1px solid var(--bd);white-space:nowrap;}
table.rmh tbody td{padding:13px 14px;border-bottom:1px solid var(--bd);vertical-align:top;}
table.rmh tbody tr{transition:background .15s;}
table.rmh tbody tr:last-child td{border-bottom:0;}
table.rmh tbody tr:hover{background:var(--rowh);}
.c-mn{font-weight:700;}
.c-sub{font-size:11.5px;color:var(--ts);margin-top:2px;}
.mono{font-variant-numeric:tabular-nums;font-size:12px;color:var(--tt);white-space:nowrap;}
.money{font-weight:800;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ---- pills ---- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:var(--radius-pill);white-space:nowrap;}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-ok{background:var(--ok-bg);color:var(--ok-tx);} .pill-do{background:var(--danger-bg);color:var(--danger-tx);}
.pill-cho{background:var(--warn-bg);color:var(--warn-tx);} .pill-as{background:var(--asset-bg);color:var(--asset-tx);}
.why{font-size:11px;color:var(--danger-tx);margin-top:6px;max-width:240px;line-height:1.45;}
.lock{font-size:12px;color:var(--tt);display:inline-flex;align-items:center;gap:5px;}

/* ---- evidence thumbs ---- */
.thumb{width:34px;height:34px;object-fit:cover;border-radius:7px;border:1px solid var(--bd2);cursor:pointer;transition:transform .15s;}
.thumb:hover{transform:scale(1.08);}

/* ---- action buttons in table ---- */
.acts{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.acts .btn-soft{font-size:12px;padding:7px 12px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}

/* ---- footer ---- */
.foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;flex-wrap:wrap;}
.foot a{font-size:12.5px;font-weight:700;text-decoration:none;color:var(--primary);display:inline-flex;align-items:center;gap:5px;margin-right:16px;}
.note{font-size:12px;color:var(--ts);}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);background:var(--tp);color:var(--bg);
  font-size:13px;font-weight:600;padding:11px 20px;border-radius:var(--radius-pill);box-shadow:var(--shadow-hover);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:50;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.empty{text-align:center;color:var(--tt);padding:34px;}

/* ---- animations ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes pop{0%{transform:scale(.9);opacity:0;}100%{transform:scale(1);opacity:1;}}
.stat:nth-child(1){animation-delay:.02s;} .stat:nth-child(2){animation-delay:.08s;}
.stat:nth-child(3){animation-delay:.14s;} .stat:nth-child(4){animation-delay:.20s;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

@media (max-width:860px){.grid-stats{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.app{padding:14px;}.grid-stats{grid-template-columns:1fr 1fr;gap:10px;}}