/* =====================================================================
   BuilderOS — app.css   (product application styling)
   Reuses the landing-page brand: navy #0F2A4A + orange #FF7A1A, Inter.
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
:root{
  --navy:#0F2A4A; --navy-2:#16315A; --orange:#FF7A1A; --orange-2:#E25C2D;
  --green:#1F9D55; --blue:#2E5BFF; --purple:#6E3CE2; --pink:#E84A8A;
  --teal:#1FB6B5; --amber:#F4A623; --indigo:#4338CA; --red:#E5484D;
  --ink:#0F2A4A; --ink-2:#3E4C66; --muted:#6B7A90;
  --bg:#F4F7FB; --line:#E6ECF3; --line-2:#EEF2F7; --card:#fff;
  --sh-sm:0 1px 3px rgba(15,42,74,.06),0 1px 2px rgba(15,42,74,.04);
  --sh-md:0 6px 20px rgba(15,42,74,.08); --r:14px; --r-sm:10px;
  --side-w:250px; --top-h:64px;
}
html,body{ margin:0; }
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--ink);
  background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased;
  font-size:14px;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input{ font-family:inherit; }
h1,h2,h3,h4{ margin:0; }
.muted{ color:var(--muted); } .muted2{ color:var(--muted); font-weight:500; font-size:12px; }
.pos{ color:var(--green); } .neg{ color:var(--red); } .warn{ color:var(--amber); }
.c{ text-align:center; } .r{ text-align:right; }
.link{ color:var(--blue); font-weight:600; font-size:13px; } .link:hover{ text-decoration:underline; }
.sw{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }

/* ---------- layout ---------- */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--side-w); z-index:40;
  background:linear-gradient(180deg,#102B4D,#0B2138);
  display:flex; flex-direction:column; padding:18px 14px; color:#cfe;
}
.side-brand{ display:flex; align-items:center; gap:9px; padding:6px 8px 18px; font-size:18px; font-weight:800; color:#fff; }
.side-brand b{ color:var(--orange); font-weight:800; }
.side-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.side-link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:#AFC2DA; font-weight:600; font-size:13.5px; transition:.15s;
}
.side-link .si{ width:18px; text-align:center; font-size:15px; opacity:.9; }
.side-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.side-link.active{ background:linear-gradient(90deg,rgba(255,122,26,.22),rgba(255,122,26,.06)); color:#fff; box-shadow:inset 3px 0 0 var(--orange); }
.side-foot{ display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.side-copilot{ background:linear-gradient(90deg,var(--orange),var(--orange-2)); color:#fff; font-weight:700; padding:10px; border-radius:10px; box-shadow:0 6px 16px rgba(255,122,26,.3); }
.side-copilot:hover{ filter:brightness(1.05); }
.side-back{ color:#8FA6C2; font-size:12.5px; text-align:center; } .side-back:hover{ color:#fff; }

.main{ margin-left:var(--side-w); min-height:100vh; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:30; height:var(--top-h); background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 22px;
}
.topsearch-wrap{ position:relative; flex:1; max-width:520px; }
.ts-ico{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); }
.topsearch{ width:100%; border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 14px 9px 34px; font-size:13.5px; color:var(--ink); }
.topsearch:focus{ outline:none; border-color:#C7D3E6; box-shadow:0 0 0 3px rgba(46,91,255,.1); }
.top-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.icon-btn{ width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; color:var(--ink-2); position:relative; }
.icon-btn:hover{ background:var(--line-2); }
.bell-dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--orange); border:2px solid #fff; }
.avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--navy),var(--blue)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.btn-accent{ background:linear-gradient(90deg,var(--orange),var(--orange-2)); color:#fff; font-weight:700; padding:9px 16px; border-radius:999px; font-size:13px; box-shadow:0 6px 16px rgba(255,122,26,.28); }
.btn-accent:hover{ transform:translateY(-1px); } .btn-accent.sm{ padding:8px 14px; }
.btn-soft{ background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:600; padding:9px 15px; border-radius:999px; font-size:13px; }
.btn-soft:hover{ border-color:#C7D3E6; }
.btn-mini{ background:var(--navy); color:#fff; font-weight:600; font-size:12px; padding:6px 12px; border-radius:8px; } .btn-mini:hover{ background:var(--blue); }
.only-mobile{ display:none; }

.view{ padding:24px 26px 60px; max-width:1480px; width:100%; }

/* ---------- page head / crumb ---------- */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.page-head h1{ font-size:24px; font-weight:800; letter-spacing:-.01em; }
.page-head p{ margin:4px 0 0; color:var(--muted); font-size:13.5px; }
.page-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.crumb{ font-size:13px; color:var(--muted); margin-bottom:8px; } .crumb a{ color:var(--blue); } .crumb span{ margin:0 6px; }
.live-dot{ color:var(--green); font-size:12.5px; font-weight:600; }

/* ---------- grids ---------- */
.grid{ display:grid; gap:16px; margin-bottom:16px; }
.grid-2-1{ grid-template-columns:2fr 1fr; }
.grid-1-1{ grid-template-columns:1fr 1fr; }
.kpi-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:16px; }
.kpi-row-4{ grid-template-columns:repeat(4,1fr); }
.kpi-row-5{ grid-template-columns:repeat(5,1fr); }

/* ---------- KPI cards ---------- */
.kpi-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; box-shadow:var(--sh-sm); }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.kpi-ico{ width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; background:var(--line-2); color:var(--ink-2); }
.kpi-ico.blue{ background:#E8EEFF; color:var(--blue); } .kpi-ico.green{ background:#E1F5EA; color:var(--green); }
.kpi-ico.purple{ background:#EEE7FB; color:var(--purple); } .kpi-ico.orange{ background:#FFEEDD; color:var(--orange-2); }
.kpi-ico.pink{ background:#FCE4EF; color:var(--pink); } .kpi-ico.teal{ background:#DEF5F4; color:var(--teal); }
.kpi-ico.amber{ background:#FDF1D8; color:#B5741A; } .kpi-ico.red{ background:#FCE6E6; color:var(--red); }
.kpi-trend{ font-size:12px; font-weight:700; } .kpi-trend.up{ color:var(--green); } .kpi-trend.down{ color:var(--red); }
.kpi-num{ font-size:23px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.kpi-name{ color:var(--muted); font-size:12.5px; font-weight:600; margin-top:2px; }
.kpi-sub{ font-size:12px; margin-top:2px; } .kpi-spark{ margin-top:8px; }
.spark{ display:block; }

/* ---------- panels ---------- */
.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); overflow:hidden; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; }
.panel-head h3{ font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
.panel-sub{ color:var(--muted); font-weight:500; font-size:11.5px; background:var(--line-2); padding:2px 8px; border-radius:999px; }
.panel-body{ padding:6px 16px 16px; }

/* ---------- generic bars ---------- */
.bar-track{ background:var(--line-2); border-radius:999px; height:8px; overflow:hidden; width:100%; }
.bar-track i{ display:block; height:100%; border-radius:999px; }

/* ---------- pills ---------- */
.pill{ display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
.pill-green{ background:#E3F6EC; color:#16794A; } .pill-amber{ background:#FDF0D9; color:#9C6612; }
.pill-red{ background:#FCE8E8; color:#C13030; } .pill-blue{ background:#E8EEFF; color:#2E50C8; }
.pill-teal{ background:#DEF5F4; color:#127C7B; } .pill-purple{ background:#EEE7FB; color:#5A2EC0; }
.pill-pink{ background:#FCE4EF; color:#C23373; } .pill-gray{ background:#EEF2F7; color:#5A6B82; }

/* ---------- charts ---------- */
.chart{ width:100%; height:auto; display:block; }
.ax-lbl{ font-size:10px; fill:var(--muted); font-family:Inter,sans-serif; }
.ring{ display:block; } .ring-text{ font-size:18px; font-weight:800; fill:var(--ink); font-family:Inter,sans-serif; }
.ring-sub{ font-size:9px; font-weight:600; fill:var(--muted); }
.donut-wrap{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:center; }
.donut-legend{ display:flex; flex-direction:column; gap:7px; min-width:150px; }
.dl-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.dl-dot{ width:10px; height:10px; border-radius:3px; } .dl-name{ flex:1; color:var(--ink-2); } .dl-val{ font-weight:700; }
.hbars{ display:flex; flex-direction:column; gap:11px; }
.hbar-row{ display:grid; grid-template-columns:130px 1fr 46px; align-items:center; gap:10px; font-size:12.5px; }
.hbar-lbl{ color:var(--ink-2); } .hbar-val{ text-align:right; font-weight:700; }

/* ===================== DASHBOARD ===================== */
.ph-list{ display:flex; flex-direction:column; }
.ph-row{ display:grid; grid-template-columns:1.6fr 1fr 44px 60px; align-items:center; gap:12px; padding:11px 6px; border-bottom:1px solid var(--line-2); }
.ph-row:last-child{ border-bottom:0; } .ph-row:hover{ background:var(--bg); border-radius:8px; }
.ph-name{ font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:7px; }
.ph-loc{ color:var(--muted); font-size:12px; margin-top:2px; }
.ph-pct{ text-align:right; font-weight:700; } .ph-delay{ text-align:right; font-size:12px; font-weight:700; }
.gauge-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px 0; justify-items:center; }
.gauge{ padding:6px; }
.insight-list{ display:flex; flex-direction:column; gap:10px; }
.insight{ background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:11px 13px; }
.insight-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.insight-agent{ font-weight:700; font-size:12.5px; color:var(--navy); }
.insight p{ margin:0; font-size:12.5px; color:var(--ink-2); }
.alert-list{ display:flex; flex-direction:column; }
.alert{ display:flex; align-items:flex-start; gap:11px; padding:11px 4px; border-bottom:1px solid var(--line-2); }
.alert:last-child{ border-bottom:0; }
.alert-dot{ width:9px; height:9px; border-radius:50%; margin-top:4px; flex:none; }
.alert-high .alert-dot{ background:var(--red); box-shadow:0 0 0 3px rgba(229,72,77,.16); }
.alert-med .alert-dot{ background:var(--amber); } .alert-low .alert-dot{ background:var(--blue); }
.alert-title{ font-weight:700; font-size:13px; } .alert-mod{ color:var(--muted); font-weight:600; font-size:11px; background:var(--line-2); padding:1px 7px; border-radius:999px; margin-left:5px; }
.alert-detail{ color:var(--muted); font-size:12px; margin-top:2px; } .alert-time{ margin-left:auto; color:var(--muted); font-size:11.5px; white-space:nowrap; }
.act-feed{ display:flex; flex-direction:column; gap:10px; } .act-feed li{ font-size:12.5px; color:var(--ink-2); }
.act-time{ color:var(--muted); font-weight:600; margin-right:8px; } .act-who{ font-weight:700; color:var(--navy); }
.agent-strip{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
.agent-chip{ background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:12px 8px; text-align:center; position:relative; transition:.15s; }
.agent-chip:hover{ box-shadow:var(--sh-md); transform:translateY(-2px); }
.ac-ico{ width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; margin-bottom:6px; }
.ac-name{ display:block; font-size:11px; font-weight:600; color:var(--ink-2); line-height:1.25; white-space:pre-line; }
.ac-status{ position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%; }
.ac-status.active{ background:var(--green); box-shadow:0 0 0 3px rgba(31,157,85,.18); } .ac-status.idle{ background:var(--gray); background:#C5CFDD; }

/* agent colour tints */
.a-blue{ background:#E8EEFF; color:var(--blue); } .a-pink{ background:#FCE4EF; color:var(--pink); }
.a-green{ background:#E1F5EA; color:var(--green); } .a-purple{ background:#EEE7FB; color:var(--purple); }
.a-orange{ background:#FFEEDD; color:var(--orange-2); } .a-indigo{ background:#E7E7FB; color:var(--indigo); }
.a-teal{ background:#DEF5F4; color:var(--teal); } .a-amber{ background:#FDF1D8; color:#B5741A; }

/* ===================== PROJECTS ===================== */
.seg-row{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.seg{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-weight:600; font-size:13px; color:var(--ink-2); display:flex; align-items:center; gap:7px; }
.seg:hover{ border-color:#C7D3E6; }
.seg.on{ background:var(--navy); color:#fff; border-color:var(--navy); }
.seg-n{ background:rgba(255,255,255,.18); padding:0 7px; border-radius:999px; font-size:11px; }
.seg:not(.on) .seg-n{ background:var(--line-2); color:var(--muted); }
.proj-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.proj-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--sh-sm); transition:.15s; display:block; }
.proj-card:hover{ box-shadow:var(--sh-md); transform:translateY(-2px); border-color:#D7E0EC; }
.proj-card-top{ display:flex; gap:14px; align-items:center; }
.proj-meta{ flex:1; } .proj-name{ font-weight:800; font-size:15.5px; display:flex; align-items:center; gap:8px; }
.proj-loc{ color:var(--muted); font-size:12.5px; margin:3px 0 6px; }
.proj-tags{ display:flex; gap:6px; flex-wrap:wrap; } .proj-tags span{ font-size:11px; background:var(--line-2); color:var(--ink-2); padding:2px 8px; border-radius:999px; font-weight:600; }
.proj-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2); }
.proj-stats small{ color:var(--muted); font-size:11px; display:block; margin-bottom:3px; } .proj-stats b{ font-size:13px; }

/* project detail */
.gantt{ display:flex; flex-direction:column; gap:9px; }
.gantt-row{ display:grid; grid-template-columns:96px 1fr 40px; align-items:center; gap:10px; }
.gantt-lbl{ font-size:12px; color:var(--ink-2); font-weight:600; }
.gantt-track{ position:relative; height:18px; background:var(--line-2); border-radius:6px; }
.gantt-plan{ position:absolute; top:0; height:100%; background:#D7E0EC; border-radius:6px; }
.gantt-fill{ position:absolute; top:0; height:100%; border-radius:6px; }
.gantt-pct{ font-size:12px; font-weight:700; text-align:right; }
.gantt-legend,.cf-legend{ display:flex; gap:16px; margin-top:12px; font-size:11.5px; color:var(--muted); }
.ms-list{ display:flex; flex-direction:column; }
.ms-item{ display:flex; align-items:center; gap:11px; padding:10px 2px; border-bottom:1px solid var(--line-2); }
.ms-item:last-child{ border-bottom:0; }
.ms-dot{ width:11px; height:11px; border-radius:50%; flex:none; }
.ms-done{ background:var(--green); } .ms-in-progress{ background:var(--blue); } .ms-at-risk{ background:var(--amber); } .ms-todo{ background:#C5CFDD; }
.ms-body{ flex:1; } .ms-body b{ font-size:13px; } .ms-date{ display:block; color:var(--muted); font-size:11.5px; margin-top:1px; }
.ai-pred{ border-radius:var(--r); padding:15px 17px; margin-bottom:16px; border:1px solid var(--line); }
.ai-pred.risk{ background:linear-gradient(180deg,#FFF7F2,#fff); border-color:#FBD9C6; }
.ai-pred.ok{ background:linear-gradient(180deg,#F1FAF4,#fff); border-color:#CFEBD9; }
.ai-pred-head{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; margin-bottom:8px; }
.ai-spark{ color:var(--orange); } .ai-conf{ color:var(--muted); font-size:12px; font-weight:600; margin-left:auto; }
.ai-pred-list{ display:flex; flex-direction:column; gap:5px; } .ai-pred-list li{ font-size:12.5px; color:var(--ink-2); padding-left:16px; position:relative; }
.ai-pred-list li::before{ content:'•'; position:absolute; left:3px; color:var(--orange); }
.dreport .dr-row{ display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--line-2); font-size:12.5px; }
.dr-work{ margin-top:9px; font-size:12.5px; color:var(--ink-2); } .dr-issue{ margin-top:9px; background:#FCEDE7; color:#B5481F; padding:7px 11px; border-radius:9px; font-size:12px; font-weight:600; }
.dr-ok{ margin-top:9px; color:var(--green); font-size:12px; font-weight:600; }

/* ===================== CRM ===================== */
.funnel{ display:flex; flex-direction:column; gap:8px; }
.fn-row{ display:grid; grid-template-columns:78px 1fr 40px; align-items:center; gap:10px; }
.fn-stage{ font-size:12px; color:var(--ink-2); font-weight:600; }
.fn-bar{ height:30px; border-radius:7px; display:flex; align-items:center; padding-left:11px; color:#fff; font-weight:700; font-size:12.5px; min-width:42px; }
.fn-conv{ font-size:11.5px; color:var(--muted); font-weight:600; text-align:right; }
.score-list{ display:flex; flex-direction:column; gap:11px; }
.score-row{ display:grid; grid-template-columns:1.5fr 1fr 32px; align-items:center; gap:11px; }
.score-name b{ font-size:13px; } .score-name small{ display:block; color:var(--muted); font-size:11px; }
.score-val{ font-weight:800; text-align:right; }
.board{ display:flex; gap:13px; overflow-x:auto; padding-bottom:6px; }
.board-col{ min-width:200px; flex:1; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px; }
.board-col-head{ display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:12.5px; color:var(--ink-2); margin-bottom:9px; padding:0 3px; }
.board-col-head span{ background:#fff; border:1px solid var(--line); padding:0 8px; border-radius:999px; font-size:11px; }
.board-blue{ color:var(--blue); } .board-red{ color:var(--red); } .board-green{ color:var(--green); } .board-gray{ color:var(--ink-2); }
.lead-card,.task-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 11px; margin-bottom:8px; box-shadow:var(--sh-sm); cursor:pointer; transition:.12s; }
.lead-card:hover,.task-card:hover{ box-shadow:var(--sh-md); transform:translateY(-1px); }
.lc-top{ display:flex; justify-content:space-between; align-items:center; } .lc-top b{ font-size:13px; }
.lc-score{ font-size:11px; font-weight:800; color:#fff; padding:1px 8px; border-radius:999px; }
.lc-score.green{ background:var(--green); } .lc-score.blue{ background:var(--blue); } .lc-score.amber{ background:var(--amber); } .lc-score.gray{ background:#9AAAC0; }
.lc-proj{ color:var(--ink-2); font-size:12px; margin:4px 0; } .lc-foot{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); }
.lc-src{ background:var(--line-2); padding:1px 7px; border-radius:999px; font-weight:600; }
.lead-empty{ color:var(--muted); text-align:center; padding:10px; font-size:12px; }

/* ===================== TABLES ===================== */
.table-wrap{ overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; font-size:12.8px; }
.data-table th{ text-align:left; color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.data-table td{ padding:10px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.data-table tr:last-child td{ border-bottom:0; } .data-table tbody tr:hover{ background:var(--bg); }
.data-table th.r,.data-table td.r{ text-align:right; } .data-table th.c,.data-table td.c{ text-align:center; }

/* ===================== PROCUREMENT ===================== */
.vendor-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.vendor-card{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:13px; }
.vc-head{ display:flex; justify-content:space-between; align-items:center; gap:6px; } .vc-head b{ font-size:13.5px; }
.vc-cat{ color:var(--muted); font-size:11.5px; margin:2px 0 10px; }
.vc-meters{ display:flex; flex-direction:column; gap:8px; }
.vc-meters > div{ display:grid; grid-template-columns:62px 1fr 34px; align-items:center; gap:7px; font-size:11px; }
.vc-meters small{ color:var(--muted); } .vc-meters span{ text-align:right; font-weight:700; }
.vc-foot{ display:flex; justify-content:space-between; margin-top:11px; padding-top:10px; border-top:1px solid var(--line); font-size:11.5px; font-weight:600; }

/* ===================== FINANCE ===================== */
.bva{ display:flex; flex-direction:column; gap:11px; }
.bva-row{ display:grid; grid-template-columns:150px 1fr 165px; align-items:center; gap:11px; }
.bva-name{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
.bva-track{ position:relative; height:20px; background:var(--line-2); border-radius:6px; overflow:hidden; }
.bva-spent{ position:absolute; top:0; left:0; height:100%; border-radius:6px; }
.bva-val{ font-size:12px; text-align:right; font-weight:700; }
.forecast-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.fc-cell{ background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:13px; text-align:center; }
.fc-cell small{ color:var(--muted); font-size:11.5px; } .fc-cell b{ display:block; font-size:18px; margin-top:4px; }
.fc-cell.neg-cell{ background:#FFF4F4; border-color:#F6D2D2; }
.fc-note{ grid-column:1/-1; font-size:12px; color:var(--ink-2); background:#FFF7EE; border:1px solid #FBE2C4; border-radius:10px; padding:10px 12px; }

/* ===================== COMPLIANCE ===================== */
.appr-list{ display:flex; flex-direction:column; }
.appr-row{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:13px; padding:11px 2px; border-bottom:1px solid var(--line-2); }
.appr-row:last-child{ border-bottom:0; } .appr-main b{ font-size:13px; } .appr-main small{ display:block; color:var(--muted); font-size:11.5px; margin-top:1px; }
.appr-days{ font-size:12px; font-weight:700; }

/* ===================== TASKS ===================== */
.tc-top{ display:flex; justify-content:space-between; align-items:center; } .tc-id{ color:var(--muted); font-size:11px; font-weight:600; }
.tc-title{ font-weight:700; font-size:13px; margin:6px 0; } .tc-meta{ font-size:11.5px; color:var(--ink-2); }
.tc-foot{ display:flex; justify-content:space-between; margin-top:8px; font-size:11.5px; }
.tc-assignee{ font-weight:600; } .tc-due{ color:var(--muted); }
.tc-contractor{ margin-top:6px; font-size:11px; color:var(--muted); background:#fff; border:1px dashed var(--line); border-radius:7px; padding:3px 7px; display:inline-block; }
.dr-list{ display:flex; flex-direction:column; gap:11px; }
.dr-card{ background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:12px 13px; }
.dr-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; } .dr-head b{ font-size:13px; }
.dr-card p{ margin:7px 0 0; font-size:12.5px; color:var(--ink-2); }

/* ===================== AGENTS + COPILOT ===================== */
.agent-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.agent-tile{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:15px; box-shadow:var(--sh-sm); }
.at-head{ display:flex; justify-content:space-between; align-items:center; }
.at-ico{ width:40px; height:40px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; }
.at-status{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; text-transform:capitalize; }
.at-status.active{ background:#E3F6EC; color:#16794A; } .at-status.idle{ background:#EEF2F7; color:#6B7A90; }
.at-name{ font-weight:800; font-size:14px; margin:11px 0 3px; }
.at-handled{ font-size:17px; font-weight:800; } .at-handled small{ font-size:11px; font-weight:600; color:var(--muted); }
.at-last{ margin-top:8px; font-size:12px; color:var(--ink-2); background:var(--bg); border-radius:9px; padding:8px 10px; }

.cp-console{ display:flex; flex-direction:column; gap:12px; }
.cp-thread-inline{ min-height:200px; max-height:380px; overflow-y:auto; }
.cp-thread{ display:flex; flex-direction:column; gap:12px; }
.cp-msg{ display:flex; gap:9px; max-width:86%; }
.cp-user{ align-self:flex-end; flex-direction:row-reverse; }
.cp-av{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--orange),var(--orange-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; flex:none; }
.cp-bubble{ background:#fff; border:1px solid var(--line); border-radius:13px; padding:11px 13px; font-size:13px; box-shadow:var(--sh-sm); }
.cp-user .cp-bubble{ background:var(--navy); color:#fff; border-color:var(--navy); }
.cp-bot .cp-bubble{ background:#fff; }
.cp-bubble p{ margin:0 0 7px; } .cp-bubble p:last-child{ margin:0; }
.cp-list{ margin:6px 0; display:flex; flex-direction:column; gap:7px; } .cp-list li{ font-size:12.5px; padding-left:4px; }
.cp-li-head{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cp-muted{ color:var(--muted); font-size:11.5px; } .cp-tip{ background:var(--bg); border-radius:9px; padding:8px 10px; font-size:12px; margin-top:8px!important; }
.cp-kv{ display:grid; grid-template-columns:1fr 1fr; gap:5px 16px; margin:7px 0; }
.cp-kv li{ display:flex; justify-content:space-between; font-size:12.5px; border-bottom:1px dashed var(--line); padding:3px 0; }
.cp-table{ width:100%; border-collapse:collapse; margin:7px 0; font-size:12.5px; }
.cp-table th{ text-align:left; color:var(--muted); font-weight:600; font-size:11px; padding:4px 6px; border-bottom:1px solid var(--line); }
.cp-table td{ padding:5px 6px; border-bottom:1px solid var(--line-2); } .cp-table td.r{ text-align:right; font-weight:700; }
.cp-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.cp-chip{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 12px; font-size:12px; font-weight:600; color:var(--ink-2); }
.cp-chip:hover{ border-color:var(--orange); color:var(--orange-2); }
.cp-inputbar{ display:flex; gap:9px; }
.cp-input{ flex:1; border:1px solid var(--line); border-radius:999px; padding:11px 16px; font-size:13.5px; }
.cp-input:focus{ outline:none; border-color:#C7D3E6; box-shadow:0 0 0 3px rgba(46,91,255,.1); }
.cp-send{ background:linear-gradient(90deg,var(--orange),var(--orange-2)); color:#fff; font-weight:700; padding:0 18px; border-radius:999px; font-size:14px; }

/* copilot slide-over */
.copilot{ position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw; background:var(--bg); z-index:60;
  box-shadow:-16px 0 50px rgba(15,42,74,.18); display:flex; flex-direction:column; transform:translateX(102%); transition:transform .28s cubic-bezier(.4,0,.2,1); }
.copilot.open{ transform:translateX(0); }
.cp-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background:#fff; border-bottom:1px solid var(--line); }
.cp-title{ font-weight:800; font-size:15px; display:flex; align-items:center; gap:8px; } .cp-logo{ color:var(--orange); }
.copilot .cp-thread{ flex:1; overflow-y:auto; padding:18px; }
.copilot .cp-chips{ padding:0 18px 10px; } .copilot .cp-inputbar{ padding:12px 18px 18px; background:#fff; border-top:1px solid var(--line); }
.scrim{ position:fixed; inset:0; background:rgba(15,42,74,.32); z-index:55; opacity:0; pointer-events:none; transition:.25s; }
.copilot.open ~ .scrim{ opacity:1; pointer-events:auto; }

/* ===================== SIMULATION MODAL ===================== */
.modal-wrap{ position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-wrap.open{ display:flex; }
.modal-scrim{ position:absolute; inset:0; background:rgba(15,42,74,.4); }
.modal{ position:relative; background:#fff; border-radius:18px; width:560px; max-width:100%; padding:22px 24px; box-shadow:0 30px 80px rgba(15,42,74,.3); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; } .modal-head h3{ font-size:18px; font-weight:800; }
.modal-sub{ color:var(--muted); font-size:13px; margin:4px 0 16px; }
.sim-controls{ display:flex; flex-direction:column; gap:16px; margin-bottom:18px; }
.sim-controls label{ font-size:13px; font-weight:600; color:var(--ink-2); display:flex; flex-direction:column; gap:7px; }
.sim-controls label span{ float:right; color:var(--orange-2); font-weight:800; }
.sim-controls input[type=range]{ width:100%; accent-color:var(--orange); }
.sim-out{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
.sim-card{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:13px; text-align:center; }
.sim-card small{ color:var(--muted); font-size:11px; display:block; margin-bottom:5px; } .sim-card b{ font-size:17px; }
.modal-foot{ margin-top:16px; text-align:center; font-size:11.5px; }

/* ===================== TOAST ===================== */
.toast{ position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); background:var(--navy); color:#fff;
  padding:12px 20px; border-radius:11px; font-size:13px; font-weight:600; box-shadow:var(--sh-md); z-index:80; opacity:0; pointer-events:none; transition:.25s; }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ===================== RESPONSIVE ===================== */
@media(max-width:1200px){
  .agent-strip{ grid-template-columns:repeat(4,1fr); }
  .vendor-grid,.agent-tiles{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:980px){
  .grid-2-1,.grid-1-1{ grid-template-columns:1fr; }
  .kpi-row,.kpi-row-5{ grid-template-columns:repeat(3,1fr); } .kpi-row-4{ grid-template-columns:repeat(2,1fr); }
  .proj-grid{ grid-template-columns:1fr; }
}
@media(max-width:760px){
  .sidebar{ transform:translateX(-102%); transition:transform .25s; box-shadow:16px 0 50px rgba(15,42,74,.2); }
  body.side-open .sidebar{ transform:translateX(0); }
  .main{ margin-left:0; }
  .only-mobile{ display:inline-flex; }
  .kpi-row,.kpi-row-5,.kpi-row-4{ grid-template-columns:repeat(2,1fr); }
  .agent-strip{ grid-template-columns:repeat(2,1fr); }
  .gauge-row{ grid-template-columns:repeat(2,1fr); }
  .view{ padding:18px 16px 50px; }
  .top-actions .btn-accent.sm{ display:none; }
}