/* ============================================================
   Invest Planning — Design System theme (Bootstrap 5 override)
   Bước 3 chốt: Pine #0F6B5C + Brass #B0873B, light + dark.
   Nạp SAU bootstrap.min.css. data-bs-theme="dark" đổi token.
   ============================================================ */

:root {
  /* brand */
  --brand-800:#083F38; --brand-700:#0A5249; --brand-600:#0F6B5C; --brand-500:#158777;
  --brand-tint:#E4F0ED; --brand-tint-2:#D2E7E1;
  --brass-700:#8F6B27; --brass-600:#B0873B; --brass-tint:#F4E9D4;
  /* neutrals (green-cool bias) */
  --ink:#14201E; --body:#33403C; --muted:#64726D; --faint:#93A09B;
  --line:#DCE4E1; --line-strong:#C3CEC9;
  --surface:#FFFFFF; --surface-2:#F3F7F5; --surface-3:#EAF1EE; --bg:#E9EFEC;
  /* semantic */
  --success:#2E9E5B; --success-tint:#E1F1E7;
  --warning:#C77D1A; --warning-tint:#F7EAD3;
  --danger:#C0392B;  --danger-tint:#F6E1DE;
  --info:#2F6FBF;    --info-tint:#E1EAF6;
  /* priority A–D / phase 1–3 */
  --pA:#B23B32; --pB:#C1771B; --pC:#3E7CA6; --pD:#6E7B77;
  --ph1:#0F6B5C; --ph1-t:#DCEDE9; --ph2:#4A9184; --ph2-t:#E5F0EE; --ph3:#7FA8A1; --ph3-t:#EDF3F1;
  /* data-viz (validated light) */
  --dv1:#0E8C78; --dv2:#B9781A; --dv3:#2F6FBF; --dv4:#C24A62; --dv5:#7A5AA8;
  --chart-surface:#FCFCFB; --grid:#E7ECEA;

  --font-display:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r-sm:6px; --r-md:9px; --r-lg:12px; --r-xl:16px;
  --sh-1:0 1px 2px rgba(16,32,28,.06),0 1px 1px rgba(16,32,28,.04);
  --sh-2:0 2px 8px rgba(16,32,28,.08),0 1px 2px rgba(16,32,28,.05);
  --sh-3:0 10px 34px rgba(16,32,28,.16);

  /* --- Bootstrap variable bridge --- */
  --bs-primary:#0F6B5C; --bs-primary-rgb:15,107,92;
  --bs-body-color:#33403C; --bs-body-bg:#E9EFEC;
  --bs-border-color:#DCE4E1; --bs-border-radius:9px;
  --bs-body-font-family:var(--font-body);
  --bs-link-color:#0A5249; --bs-link-hover-color:#083F38;
}

[data-bs-theme="dark"] {
  --brand-800:#0C6152; --brand-700:#12796A; --brand-600:#1E9C86; --brand-500:#2FB39C;
  --brand-tint:#123029; --brand-tint-2:#16362E;
  --brass-700:#C79A4A; --brass-600:#D9AE5C; --brass-tint:#2E2410;
  --ink:#EAF1EE; --body:#C4D0CB; --muted:#8D9B95; --faint:#63716B;
  --line:#2A3833; --line-strong:#3B4C46;
  --surface:#141F1C; --surface-2:#182420; --surface-3:#1E2B27; --bg:#0C1413;
  --success:#4FBE7E; --success-tint:#13291C; --warning:#DDA24A; --warning-tint:#2E2410;
  --danger:#E27367; --danger-tint:#301917; --info:#5A93E0; --info-tint:#152436;
  --pA:#D46258; --pB:#D69A44; --pC:#5A93D4; --pD:#8A968F;
  --ph1:#2FB39C; --ph1-t:#14302A; --ph2:#4FA394; --ph2-t:#183029; --ph3:#7FB3AA; --ph3-t:#1C302B;
  --dv1:#1E9C86; --dv2:#B98021; --dv3:#4E86D4; --dv4:#D2617C; --dv5:#9578C8;
  --chart-surface:#141F1C; --grid:#26332E;

  --bs-primary:#1E9C86; --bs-primary-rgb:30,156,134;
  --bs-body-color:#C4D0CB; --bs-body-bg:#0C1413;
  --bs-border-color:#2A3833; --bs-emphasis-color:#EAF1EE;
  --bs-link-color:#2FB39C; --bs-link-hover-color:#2FB39C;
  --bs-secondary-color:#8D9B95; --bs-tertiary-bg:#182420;
}

* { -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); background:var(--bg); color:var(--body); }
h1,h2,h3,h4,h5,.h-display { font-family:var(--font-display); color:var(--ink); letter-spacing:-.01em; }
.font-mono { font-family:var(--font-mono); }
.tnum { font-variant-numeric:tabular-nums; }
.text-muted-2 { color:var(--muted)!important; }
.text-faint { color:var(--faint)!important; }
a { text-decoration:none; }

/* ---------- App shell ---------- */
.app { display:flex; min-height:100vh; }
.sidebar {
  width:242px; flex:none; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .sb-brand { padding:16px 18px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.sidebar .sb-brand .logo { width:30px;height:30px;border-radius:8px;background:var(--brand-600);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:15px; }
.sidebar .sb-brand b { font-family:var(--font-display); color:var(--ink); font-size:15px; line-height:1; }
.sidebar .sb-brand small { color:var(--muted); font-size:10.5px; }
.sb-sec { padding:14px 12px 4px; font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); font-weight:700; }
.sb-link { display:flex; align-items:center; gap:11px; padding:8px 12px; margin:1px 8px; border-radius:8px; color:var(--muted); font-size:13.5px; }
.sb-link:hover { background:var(--surface-2); color:var(--ink); }
.sb-link.active { background:var(--brand-tint); color:var(--brand-700); font-weight:600; }
.sb-link .ic { width:18px; text-align:center; flex:none; opacity:.9; }
.sb-link .num { margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--faint); }
.sb-proj { margin:6px 12px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
.sb-proj .lbl { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700; }
.sb-proj select { width:100%; margin-top:5px; font-size:12.5px; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding:11px 22px; display:flex; align-items:center; gap:14px; }
.crumb { font-size:13px; color:var(--muted); }
.crumb b { color:var(--ink); font-weight:600; }
.topbar .spacer { margin-left:auto; }
.icon-btn { width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer; }
.icon-btn:hover { color:var(--ink); background:var(--surface-2); }
.avatar { width:32px;height:32px;border-radius:50%;background:var(--brand-600);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px; }
.content { padding:22px; max-width:1220px; width:100%; }
.page-title { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.page-title h1 { font-size:25px; font-weight:750; margin:0; }
.page-sub { color:var(--muted); font-size:14px; margin:2px 0 20px; }

/* ---------- Surfaces ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.card-pad { padding:18px; }
.block-label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-family:var(--font-body); font-weight:600; border-radius:var(--r-sm); }
.btn-primary { --bs-btn-bg:var(--brand-600); --bs-btn-border-color:var(--brand-600); --bs-btn-hover-bg:var(--brand-700); --bs-btn-hover-border-color:var(--brand-700); --bs-btn-active-bg:var(--brand-800); --bs-btn-color:#fff; --bs-btn-hover-color:#fff; }
.btn-outline-secondary { --bs-btn-color:var(--brand-700); --bs-btn-border-color:var(--line-strong); --bs-btn-hover-bg:var(--surface-2); --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:var(--line-strong); }
.btn-brass { --bs-btn-bg:var(--brass-600); --bs-btn-color:#fff; --bs-btn-hover-bg:var(--brass-700); --bs-btn-hover-color:#fff; --bs-btn-border-color:var(--brass-600); --bs-btn-hover-border-color:var(--brass-700); }
.btn-ghost { --bs-btn-color:var(--muted); --bs-btn-hover-bg:var(--surface-2); --bs-btn-hover-color:var(--ink); border-color:transparent; }
.btn-danger { --bs-btn-bg:var(--danger); --bs-btn-border-color:var(--danger); }

/* ---------- Badges: status / priority / phase ---------- */
.st-badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; line-height:1.3; border:1px solid transparent; }
.st-badge .d { width:7px;height:7px;border-radius:50%;background:currentColor; }
.st-draft { background:var(--surface-3); color:var(--muted); border-color:var(--line-strong); }
.st-pub { background:var(--info-tint); color:var(--info); }
.st-pending { background:var(--warning-tint); color:var(--warning); }
.st-approved { background:var(--success-tint); color:var(--success); }
.st-changes { background:var(--danger-tint); color:var(--danger); }

.pri { width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;color:#fff;font-weight:800;font-size:12px;font-family:var(--font-display); flex:none; }
.pri-A{background:var(--pA);} .pri-B{background:var(--pB);} .pri-C{background:var(--pC);} .pri-D{background:var(--pD);}
.phase { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:2px 9px 2px 5px; font-size:11.5px; font-weight:650; border:1px solid; white-space:nowrap; }
.phase i { width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;font-style:normal;font-weight:800; }
.phase-1{border-color:var(--ph1);background:var(--ph1-t);color:var(--ph1);} .phase-1 i{background:var(--ph1);}
.phase-2{border-color:var(--ph2);background:var(--ph2-t);color:var(--ph2);} .phase-2 i{background:var(--ph2);}
.phase-3{border-color:var(--ph3);background:var(--ph3-t);color:var(--ph3);} .phase-3 i{background:var(--ph3);}

/* ---------- KPI card ---------- */
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 16px; box-shadow:var(--sh-1); position:relative; overflow:hidden; }
.kpi::before { content:""; position:absolute; left:0;top:0;bottom:0; width:3px; background:var(--accent,var(--brand-600)); }
.kpi .k { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.kpi .v { font-size:26px; font-weight:750; color:var(--ink); font-family:var(--font-display); font-variant-numeric:tabular-nums; margin-top:5px; letter-spacing:-.01em; line-height:1.1; }
.kpi .v small { font-size:14px; color:var(--muted); font-weight:600; }
.kpi .sub { font-size:12px; margin-top:5px; }
.delta-up{ color:var(--success); font-weight:650; } .delta-dn{ color:var(--danger); font-weight:650; }

/* ---------- Tables ---------- */
.dt { width:100%; border-collapse:collapse; font-size:13px; }
.dt th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:10px 12px; background:var(--surface-2); border-bottom:1px solid var(--line-strong); white-space:nowrap; }
.dt td { padding:9px 12px; border-bottom:1px solid var(--line); color:var(--body); vertical-align:middle; }
.dt tr:last-child td { border-bottom:none; }
.dt td.num, .dt th.num { text-align:right; font-variant-numeric:tabular-nums; }
.dt tr.cat td { background:var(--surface-3); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--muted); }
.dt tr.tot td { background:var(--surface-2); font-weight:750; color:var(--ink); border-top:2px solid var(--line-strong); }
.dt tbody tr:hover td { background:var(--surface-2); }
.cost-internal { color:var(--muted); font-variant-numeric:tabular-nums; }
.cost-present { color:var(--ink); font-weight:650; font-variant-numeric:tabular-nums; }
.tbl-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); }

/* ---------- Tabs / segmented / toggle ---------- */
.subtabs { display:flex; gap:2px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.subtabs button { font:inherit; font-size:13px; padding:9px 15px; color:var(--muted); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; }
.subtabs button.on { color:var(--brand-700); border-bottom-color:var(--brand-600); font-weight:650; }
.tabpane{ display:none; } .tabpane.on{ display:block; }
.seg { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); }
.seg button { font:inherit; font-size:12.5px; padding:6px 13px; border:none; border-right:1px solid var(--line); background:none; color:var(--muted); cursor:pointer; }
.seg button:last-child { border-right:none; }
.seg button.on { background:var(--brand-600); color:#fff; font-weight:600; }
.tgl { display:inline-flex; align-items:center; gap:9px; font-size:12.5px; color:var(--body); cursor:pointer; user-select:none; }
.tgl .track { width:38px;height:21px;border-radius:999px;background:var(--line-strong);position:relative;transition:background .15s;flex:none; }
.tgl .track::after { content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:left .15s; }
.tgl.on .track { background:var(--brand-600); }
.tgl.on .track::after { left:19px; }

/* ---------- Stepper ---------- */
.stepper { display:flex; overflow-x:auto; padding-bottom:6px; align-items:center; }
.stp { display:flex; align-items:center; gap:9px; flex:none; padding-right:6px; }
.stp .dot { width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;font-family:var(--font-mono);flex:none; }
.stp.done .dot { background:var(--brand-600); color:#fff; }
.stp.now .dot { background:var(--surface); color:var(--brand-700); border:2px solid var(--brand-600); }
.stp.todo .dot { background:var(--surface); color:var(--faint); border:1px solid var(--line-strong); }
.stp .lb { font-size:12px; color:var(--muted); white-space:nowrap; }
.stp.now .lb { color:var(--ink); font-weight:650; } .stp.done .lb { color:var(--body); }
.stp .bar { width:30px;height:2px;background:var(--line-strong); }
.stp.done .bar { background:var(--brand-600); }

/* ---------- Alerts ---------- */
.al { display:flex; gap:11px; padding:12px 15px; border-radius:var(--r-md); font-size:13px; align-items:flex-start; border:1px solid; }
.al .ic { flex:none; width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px; }
.al-danger{ background:var(--danger-tint); border-color:color-mix(in srgb,var(--danger) 40%,var(--line)); color:var(--ink); } .al-danger .ic{ background:var(--danger); }
.al-warn{ background:var(--warning-tint); border-color:color-mix(in srgb,var(--warning) 40%,var(--line)); color:var(--ink); } .al-warn .ic{ background:var(--warning); }
.al-info{ background:var(--info-tint); border-color:color-mix(in srgb,var(--info) 40%,var(--line)); color:var(--ink); } .al-info .ic{ background:var(--info); }
.al-success{ background:var(--success-tint); border-color:color-mix(in srgb,var(--success) 40%,var(--line)); color:var(--ink); } .al-success .ic{ background:var(--success); }

/* ---------- Forms ---------- */
.field-lbl { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin-bottom:6px; display:block; }
.form-control, .form-select { border-color:var(--line-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:13.5px; }
.form-control:focus, .form-select:focus { border-color:var(--brand-600); box-shadow:0 0 0 3px var(--brand-tint); }
.inp-group { display:flex; align-items:stretch; border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); }
.inp-group input { border:none; flex:1; font:inherit; font-size:13.5px; padding:8px 12px; background:none; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.inp-group input:focus { outline:none; }
.inp-group .suffix { padding:8px 12px; background:var(--surface-2); color:var(--muted); font-size:12.5px; border-left:1px solid var(--line); display:flex; align-items:center; }

/* ---------- Charts ---------- */
.chartbox { background:var(--chart-surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 16px; }
.chartbox .ct { font-size:13px; font-weight:700; color:var(--ink); font-family:var(--font-display); }
.chartbox .cs { font-size:11.5px; color:var(--muted); margin-bottom:10px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.legend span { display:flex; gap:6px; align-items:center; font-size:11.5px; color:var(--muted); }
.legend i { width:10px;height:10px;border-radius:3px;flex:none; }
.axis { font-size:9.5px; fill:var(--faint); font-family:var(--font-body); }
.note { border:1px solid var(--line); border-left:3px solid var(--brand-600); border-radius:var(--r-md); background:var(--surface); padding:13px 15px; font-size:13px; color:var(--body); }
.note b{ color:var(--ink); }

/* ---------- Investor portal (mobile) ---------- */
.portal { max-width:440px; margin:0 auto; min-height:100vh; background:var(--surface); border-left:1px solid var(--line); border-right:1px solid var(--line); display:flex; flex-direction:column; }
.portal-top { position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line); padding:12px 15px; }
.portal-body { flex:1; padding:14px 15px 96px; display:flex; flex-direction:column; gap:12px; background:var(--bg); }
.portal-sticky { position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line-strong); padding:11px 15px; display:flex; gap:10px; }
.sec-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 15px; box-shadow:var(--sh-1); }
.sec-card .hd { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sec-card .hd h3 { font-size:14.5px; margin:0; }
.cmt-btn { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:3px 9px; font-size:12px; color:var(--muted); cursor:pointer; }
.cmt-btn:hover { color:var(--brand-700); border-color:var(--brand-500); }

.mini-kpi { border:1px solid var(--line); border-radius:9px; padding:9px 11px; }
.mini-kpi .k { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.mini-kpi .v { font-size:19px; font-weight:750; color:var(--ink); font-family:var(--font-display); font-variant-numeric:tabular-nums; margin-top:2px; }

/* ---------- Prototype hub ---------- */
.hub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.hub-card { display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 16px; box-shadow:var(--sh-1); border-top:3px solid var(--zone,var(--line-strong)); }
.hub-card:hover { box-shadow:var(--sh-2); transform:translateY(-1px); transition:.12s; }
.hub-card.soon { opacity:.62; pointer-events:none; }
.hub-card .n { font-family:var(--font-mono); font-size:11px; color:var(--faint); }
.hub-card h4 { font-size:14.5px; margin:5px 0 3px; }
.hub-card p { font-size:12px; color:var(--muted); margin:0; }

:focus-visible { outline:2px solid var(--brand-600); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }
@media (max-width:820px){ .sidebar{ display:none; } .content{ padding:16px; } }