/* ============================================================================
   AU ONE ERP · ceo-dashboard.css
   PRESENTATION ONLY for the CEO Dashboard. No figure, no formula, no section
   is added, removed or reordered here — every rule is scoped to .cdash* /
   .ceotbl / .chero, and removing this one <link> restores the previous look.

   WHAT IT FIXES
   The dashboard stretched edge to edge on a wide monitor, so eight KPI tiles
   sat in one thin band, the bar chart's amounts drifted a metre from their
   labels, and the tables ran to ~2000px with the numbers you actually compare
   pushed apart. Constraining the measure and giving the eight tiles a real
   hierarchy is the whole change: same content, readable in one look.
   ============================================================================ */

/* ── 1 · One measure for the page ─────────────────────────────────────────
   Financial tables are read by scanning DOWN a column, not across a metre of
   whitespace. 1180px keeps the widest table intact while stopping every row
   from spanning the monitor. */
.cdash{ max-width:1180px; margin-inline:auto; }
.cdash + *, .trfnote, .trkupd2{ max-width:1180px; margin-inline:auto; }

/* ── 2 · Hero KPIs: a hierarchy, not eight equal boxes ────────────────────
   Total margin is the headline number — it gets the wide tile. The rest sit in
   a 4-up grid so the eight read as two ranks instead of one thin band. */
.cdash-hero{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px; margin:12px 0 20px;
}
.cdash-hero .chero{
  padding:12px 14px; border-radius:13px; box-shadow:none;
  border-color:var(--line2); transition:border-color .16s, transform .12s;
}
.cdash-hero .chero:hover{ border-color:rgba(var(--olive-rgb,111 125 51),.45); transform:translateY(-1px); }
/* the headline tile spans two columns and carries the accent */
.cdash-hero .chero.feat{
  grid-column:span 2; grid-row:span 2;
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(160deg,rgba(var(--olive-rgb,111 125 51),.16),var(--paper2));
  border-color:rgba(var(--olive-rgb,111 125 51),.4);
}
.chero .cl{
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chero .cv{
  font-size:19px; font-weight:850; letter-spacing:-.6px; margin-top:4px;
  font-variant-numeric:tabular-nums; line-height:1.1; overflow-wrap:anywhere;
}
.cdash-hero .chero.feat .cv{ font-size:clamp(24px,2.4vw,34px); }
.chero .csub{ font-size:10.5px; color:var(--muted); margin-top:4px; line-height:1.35; }
.chero .csub b{ color:var(--ink2); }
/* the money tiles read as one column of figures */
.cdash-hero .chero .cv{ color:var(--ink); }
.cdash-hero .chero.feat .cv{ color:var(--olive-d); }
html[data-theme="dark"] .cdash-hero .chero.feat .cv{ color:#cfe08a; }

/* ── 3 · Section rhythm ───────────────────────────────────────────────────
   Titles were competing with the data. Quieter label, one hairline, tighter
   block spacing — the numbers become the loudest thing on the page. */
.cdash-sec{ margin:20px 0; }
.cdash-sect{
  font-size:10.5px; font-weight:850; letter-spacing:.09em; text-transform:uppercase;
  color:var(--olive-d); padding-bottom:7px; margin-bottom:11px;
  border-bottom:1px solid var(--line2);
  display:flex; align-items:center; gap:8px;
}
html[data-theme="dark"] .cdash-sect{ color:#b9c96a; }

/* ── 4 · Profit by project ────────────────────────────────────────────────
   The amount was floating at the far right of a full-width row, so eye and
   figure never met. Name and amount are now fixed columns either side of the
   bar, and the amount is tabular so the column aligns. */
.cbars{ display:flex; flex-direction:column; gap:5px; }
.cbar-row{
  grid-template-columns:minmax(96px,132px) minmax(0,1fr) minmax(104px,auto);
  gap:12px; padding:3px 2px; border-radius:7px;
  transition:background .14s;
}
.cbar-row:hover{ background:rgba(var(--olive-rgb,111 125 51),.07); }
.cbar-name{
  font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cbar-track{ height:9px; border-radius:5px; background:var(--line2); overflow:hidden; }
.cbar-fill{ height:100%; border-radius:5px; transition:width .5s cubic-bezier(.2,.8,.2,1); }
.cbar-amt{
  font-size:11.5px; font-weight:800; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;
}

/* ── 5 · Tables ───────────────────────────────────────────────────────────
   Sticky header so the column you are scanning keeps its name, tabular figures
   so digits line up, and a hover row so the eye can track across all eight
   columns without losing the line. */
.cdash-tbl{ min-width:0; width:100%; font-size:12px; }
.cdash-tbl thead th{
  position:sticky; top:0; z-index:1;
  background:var(--paper3); backdrop-filter:blur(2px);
  font-size:9.5px; font-weight:850; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:9px 10px; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.cdash-tbl tbody td{ padding:9px 10px; vertical-align:middle; }
.cdash-tbl tbody td.num, .cdash-tbl tbody td:nth-child(n+4){
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.cdash-tbl tbody td:first-child{
  font-weight:800; color:var(--ink); text-align:left; white-space:normal;
  min-width:186px;   /* so the freshness segments below stay on one line */
}
.cdash-tbl tbody tr:hover td{ background:rgba(var(--olive-rgb,111 125 51),.07) !important; }
.cdash-tbl tr.ceotot td{ font-size:12.5px; }
/* the profit-% cell: value above its own bar, both inside the column */
.cmwrap{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:78px; }
.cmval{ font-size:11.5px; font-weight:850; font-variant-numeric:tabular-nums; }
.cmbar{ width:100%; height:5px; border-radius:3px; background:var(--line2); overflow:hidden; }
.cmfill{ height:100%; border-radius:3px; transition:width .5s cubic-bezier(.2,.8,.2,1); }

/* status / priority pills — same colours, less shouting */
.cpill{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-size:9.5px; font-weight:850; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
}
.cpill i{ width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }

/* ── 6 · Per-project freshness line ───────────────────────────────────────
   Sits under the project name, inside the cell it belongs to, so no column
   moves. Muted on purpose: it answers "can I trust this row" without
   competing with the figures it qualifies. */
.cupd{
  display:flex; flex-wrap:wrap; align-items:center; gap:3px 7px;
  margin-top:3px; font-size:9px; font-weight:700; letter-spacing:.01em;
  color:var(--muted); text-transform:none; line-height:1.25;
}
.cupd i{ font-style:normal; opacity:.7; }
.cupd b{ font-weight:800; color:var(--ink2); }
.cupd .cupd-seg{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.cupd .cupd-dot{ width:5px; height:5px; border-radius:50%; background:var(--ok); flex:none; }
.cupd .cupd-dot.stale{ background:var(--amber); }
.cupd .cupd-dot.old{ background:var(--line2); }
.cupd .cupd-none{ opacity:.55; }

/* ── 7 · Print / narrow ───────────────────────────────────────────────────
   The measure cap must not survive into print: paper has its own width. */
@media print{
  .cdash, .cdash + *, .trfnote, .trkupd2{ max-width:none; }
  .cdash-tbl thead th{ position:static; }
  .cupd{ display:none; }
}
@media (max-width:1080px){ .cdash-hero{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .cdash-hero{ grid-template-columns:minmax(0,1fr); }
  .cdash-hero .chero.feat{ grid-column:span 1; grid-row:span 1; }
  .cbar-row{ grid-template-columns:minmax(70px,92px) minmax(0,1fr) auto; gap:8px; }
}
@media (prefers-reduced-motion:reduce){
  .cdash-hero .chero, .cbar-row, .cbar-fill, .cmfill{ transition:none; }
  .cdash-hero .chero:hover{ transform:none; }
}