/* AU ONE ERP · construction/tracker-pro.css
   ============================================================================
   TRACKER SUBPAGES — PRESENTATION LAYER ONLY  (2026-08-26, owner request:
   "improve and enhance all of the construction tracker subpages. make it look
    professional and minimalist. improve ui/ux and visuals ... so dont edit any
    working code. only the designs. specially the CEO dashboard")

   WHY A SEPARATE FILE, LOADED LAST
   Every rule here overrides markup that already renders correctly. No renderer,
   handler, calculation or class name is touched, so deleting the one <link> in
   construction.html returns the Tracker to its previous appearance exactly.
   That is the point: the visual pass carries no risk to the numbers.

   WHY EVERY SELECTOR IS PREFIXED
   The Tracker's class vocabulary is NOT private. `.sooncard`/`.soonlead` appear
   on eleven Construction screens, `.cdash-sec`/`.cdash-sect` are shared with
   Command Center, `.mxmtot` with Reports and Petty Cash, and `.trktbl`,
   `.trkscroll`, `.trfnote`, `.secttl` and `.hint` with Finance and the Site
   Form. So every rule below is scoped to `.view:has(.trktabs)` — a view that
   actually rendered the Tracker tab bar. Nothing here can reach a screen the
   owner did not ask about. `:has()` is already relied on elsewhere in this
   codebase (site-form.js, msched-calendar.js).

   DESIGN INTENT
   · One accent (olive). State colour is reserved for state, never decoration.
   · Numbers lead: labels shrink and calm down, values grow and tighten.
   · Borders over shadows; one hairline instead of two stacked ones.
   · Colours come only from tokens, so dark theme follows for free.
   ========================================================================= */

/* ── 1 · TAB BAR — a real segmented control ────────────────────────────────
   Was eight outlined buttons that read as eight competing objects. Now one
   inset track of quiet pills, so the active subpage is the only thing with
   weight — marked by an olive underline rather than a heavy fill, which keeps
   it legible when the theme inverts. */
.view:has(.trktabs) .trktabs{
  gap:2px; padding:4px; margin:0 2px 16px;
  background:var(--paper3); border:1px solid var(--line);
  border-radius:13px; width:max-content; max-width:100%;
}
.view:has(.trktabs) .trktab{
  position:relative; border:1px solid transparent; background:transparent;
  color:var(--muted); font-weight:700; font-size:12.5px; padding:7px 14px;
  border-radius:9px; letter-spacing:-.005em;
}
.view:has(.trktabs) .trktab:hover{ background:var(--paper2); color:var(--ink2); }
.view:has(.trktabs) .trktab.on{
  background:var(--paper2); color:var(--ink); border-color:var(--line);
  font-weight:800; box-shadow:0 1px 2px rgba(20,24,28,.07);
}
.view:has(.trktabs) .trktab.on::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px;
  height:2px; border-radius:2px; background:var(--olive);
}
.view:has(.trktabs) .trktab .trksoon{ opacity:.7; font-size:9px; }
@media(max-width:760px){
  .view:has(.trktabs) .trktabs{ width:auto; border-radius:11px; }
  .view:has(.trktabs) .trktab{ padding:7px 11px; font-size:12px; }
  .view:has(.trktabs) .trktab.on::after{ left:11px; right:11px; }
}

/* ── 2 · THE BRIEF — explainer notes stop competing with the data ─────────
   `.trfnote` opens most subpages with a paragraph of methodology. It is
   reference material, not the headline, so it drops to a quiet left-ruled
   brief held to a comfortable measure instead of full-width body copy. */
.view:has(.trktabs) .trfnote{
  font-size:11.5px; line-height:1.55; color:var(--muted);
  border-left:2px solid var(--line2); padding:2px 0 2px 11px;
  margin:0 2px 14px; max-width:78ch;
}
.view:has(.trktabs) .trfnote b{ color:var(--ink2); font-weight:800; }

/* ── 3 · SECTION HEADINGS — a label, then a hairline that finishes the row ── */
.view:has(.trktabs) .cdash-sect{
  font-size:11.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin:0 2px 11px;
}
.view:has(.trktabs) .cdash-sect::before{ width:3px; height:12px; }
.view:has(.trktabs) .cdash-sect::after{
  content:""; flex:1; height:1px; background:var(--line2); margin-left:2px;
}
.view:has(.trktabs) .cdash-sec{ margin:26px 0; }

/* ── 4 · CEO DASHBOARD — hierarchy ────────────────────────────────────────
   Seven equal tiles gave the company's headline number the same weight as its
   seventh-most-important one. Total margin now leads at double width, and the
   supporting metrics settle into a calm four-up rhythm beneath it. */
@media(min-width:900px){
  .view:has(.trktabs) .cdash-hero{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
  .view:has(.trktabs) .cdash-hero .chero.feat{ grid-column:span 2; }
}
.view:has(.trktabs) .chero{
  border-radius:14px; padding:15px 16px 14px 19px;
  box-shadow:0 1px 2px rgba(20,24,28,.05);
}
.view:has(.trktabs) .chero::before{ width:2px; }
.view:has(.trktabs) .chero.feat::before,
.view:has(.trktabs) .chero.good::before,
.view:has(.trktabs) .chero.warn::before,
.view:has(.trktabs) .chero.bad::before{ width:3px; }
.view:has(.trktabs) .chero .cl{ font-size:9.5px; letter-spacing:.075em; color:var(--muted2); }
.view:has(.trktabs) .chero .cv{ font-size:clamp(11px,6.2cqi,21px); margin-top:7px; font-weight:700; }
.view:has(.trktabs) .chero.feat .cv{ font-size:clamp(12px,7.4cqi,30px); }
.view:has(.trktabs) .chero .csub{ font-size:10px; margin-top:7px; color:var(--muted2); }
.view:has(.trktabs) .chero:hover{ border-color:var(--line2); }
/* the featured wash read as a warning state on some monitors — softened so
   olive stays an accent rather than a fill */
.view:has(.trktabs) .chero.feat{
  background:linear-gradient(140deg,var(--olive-soft) 0%,var(--paper2) 62%);
  border-color:rgba(var(--olive-rgb),.38);
}

/* ── 5 · BAR CHARTS — thinner tracks, softer fills ───────────────────────── */
.view:has(.trktabs) .cbars{
  padding:16px 17px; border-radius:14px; gap:9px;
  box-shadow:0 1px 2px rgba(20,24,28,.05);
}
.view:has(.trktabs) .cbar-row{ grid-template-columns:minmax(84px,132px) 1fr auto; gap:13px; }
.view:has(.trktabs) .cbar-name{ font-size:11px; font-weight:700; color:var(--ink2); }
.view:has(.trktabs) .cbar-track{ height:7px; border-radius:5px; background:var(--line2); }
.view:has(.trktabs) .cbar-fill{ border-radius:5px; opacity:.88; }
.view:has(.trktabs) .cbar-amt{ font-size:11px; }
.view:has(.trktabs) .cmbar{ height:5px; background:var(--line2); }
.view:has(.trktabs) .cmval{ font-size:11.5px; color:var(--ink2); }

/* ── 6 · PILLS — flatter, so a table full of them stays scannable ────────── */
.view:has(.trktabs) .cpill{
  font-size:9.5px; letter-spacing:.05em; padding:3px 9px 3px 7px;
  border:1px solid transparent;
}
.view:has(.trktabs) .cpill.cp-good{ border-color:rgba(63,125,78,.22); }
.view:has(.trktabs) .cpill.cp-mid { border-color:rgba(224,146,43,.28); }
.view:has(.trktabs) .cpill.cp-bad { border-color:rgba(214,69,63,.22); }
.view:has(.trktabs) .cpill i{ width:6px; height:6px; }
/* A site that has recorded no payables gets a neutral, unalarming chip — it is
   not "risk", it is "we do not know yet", and saying otherwise would be the
   same guessing this pass removed from the figures. */
.view:has(.trktabs) .cpill.cp-none{
  background:var(--paper3); color:var(--muted2); border-color:var(--line2);
  font-size:8.5px; letter-spacing:.04em;
}
.view:has(.trktabs) .cpill.cp-none i{ background:var(--muted2); opacity:.6; }

/* ── 7 · TABLES — the biggest single readability win across every subpage ──
   `.trktbl td` right-aligns everything, so every row started in a different
   place and project names were unreadable down the column. Anchoring the first
   column left, adding a zebra and a hover row, and giving TOTAL a real rule
   turns a wall of digits into something you can read down. */
.view:has(.trktabs) .trkscroll{ border-radius:14px; }
.view:has(.trktabs) .trktbl th{
  font-size:9px; letter-spacing:.06em; padding:10px 12px;
  border-bottom:1px solid var(--line2); background:var(--paper3);
  color:var(--muted2); font-weight:800;
}
.view:has(.trktabs) .trktbl td{ padding:10px 12px; border-bottom:1px solid var(--line2); }
.view:has(.trktabs) .trktbl tbody tr:last-child td{ border-bottom:0; }
.view:has(.trktabs) .trktbl th:first-child,
.view:has(.trktabs) .trktbl td:first-child{
  text-align:left; color:var(--ink); font-weight:700;
}
.view:has(.trktabs) .trktbl tbody tr:nth-child(even) td{
  background:color-mix(in srgb, var(--paper3) 45%, transparent);
}
.view:has(.trktabs) .trktbl tbody tr:hover td{ background:var(--olive-soft); }
/* TOTAL — separated by a rule, not by shouting */
.view:has(.trktabs) .trktbl tr.ceotot td,
.view:has(.trktabs) .trktbl tr.ceotot th{
  border-top:2px solid var(--line2); border-bottom:0;
  background:var(--paper3); color:var(--ink); font-weight:800;
  padding-top:11px; padding-bottom:11px;
}
.view:has(.trktabs) .trktbl tbody tr.ceotot:hover td{ background:var(--paper3); }

/* ── 8 · OPEX CONTROL — the input reads as an input ──────────────────────── */
.view:has(.trktabs) .cdash-opex{ border-radius:14px; }
.view:has(.trktabs) .copex-in label{
  font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted2);
}
.view:has(.trktabs) .copex-in .opexin{
  font-family:'IBM Plex Mono',monospace; font-weight:700;
  border-radius:10px; border:1px solid var(--line);
  background:var(--paper2); transition:border-color .14s, box-shadow .14s;
}
.view:has(.trktabs) .copex-in .opexin:focus{
  outline:0; border-color:var(--olive);
  box-shadow:0 0 0 3px rgba(var(--olive-rgb),.14);
}
.view:has(.trktabs) .copex-note{ font-size:10px; color:var(--muted2); }
.view:has(.trktabs) .opexverdict{ border-radius:12px; font-size:11.5px; line-height:1.5; }

/* ── 9 · DETAILED WEEKLY BUDGET — each site becomes a card ────────────────
   The site header was a bare underlined caption, so on a long page one site's
   rows ran visually into the next one's. Carding them restores the boundary. */
.view:has(.trktabs) .wbsite{
  margin-top:14px; background:var(--paper2);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.view:has(.trktabs) .wbsitehd{
  padding:10px 14px; border-bottom:1px solid var(--line2);
  background:var(--paper3); font-size:11px; letter-spacing:.06em;
  color:var(--ink2);
}
.view:has(.trktabs) .wbwkbody,
.view:has(.trktabs) .wbmonbody{ padding:2px 12px 12px; }
.view:has(.trktabs) .wbwkno{ font-weight:800; color:var(--ink); }
.view:has(.trktabs) .wbchip{ border-radius:8px; font-size:11px; }
.view:has(.trktabs) .wbin{
  border-radius:8px; border:1px solid var(--line);
  transition:border-color .14s, box-shadow .14s;
}
.view:has(.trktabs) .wbin:focus{
  outline:0; border-color:var(--olive);
  box-shadow:0 0 0 3px rgba(var(--olive-rgb),.13);
}
.view:has(.trktabs) .wbamt,
.view:has(.trktabs) .wbpaidamt{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.view:has(.trktabs) .wbfundl{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted2); font-weight:800;
}
.view:has(.trktabs) .wbfundv{
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-variant-numeric:tabular-nums;
}

/* ── 10 · MONTHLY EXPENSE — quieter month rows, firmer month totals ──────── */
.view:has(.trktabs) .mosum{ font-size:12.5px; font-weight:700; padding:11px 13px; }
.view:has(.trktabs) .mxmtot{
  font-family:'IBM Plex Mono',monospace; font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.view:has(.trktabs) .mxauto{ font-size:10px; color:var(--muted2); font-weight:700; }

/* ── 11 · CONSTRUCTION HEAD — the placeholder card stops looking unfinished ─ */
.view:has(.trktabs) .sooncard{ border-radius:16px; box-shadow:0 1px 2px rgba(20,24,28,.05); }
.view:has(.trktabs) .soonlead{ font-size:12.5px; line-height:1.6; color:var(--muted); }

/* ── 12 · KPI STRIP + shared small print ─────────────────────────────────── */
.view:has(.trktabs) .trkkpis{ gap:10px; }
.view:has(.trktabs) .hint{ font-size:10.5px; color:var(--muted2); }
.view:has(.trktabs) .trkhd{ margin:4px 2px 12px; }
.view:has(.trktabs) .gpos{ color:var(--green); }
.view:has(.trktabs) .gneg{ color:var(--red); }

/* ── 13 · MOTION + PRINT ─────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .view:has(.trktabs) .cbar-fill,
  .view:has(.trktabs) .cmfill,
  .view:has(.trktabs) .trktab,
  .view:has(.trktabs) .wbin,
  .view:has(.trktabs) .copex-in .opexin{ transition:none; }
}
@media print{
  .view:has(.trktabs) .trktabs{ display:none; }
  .view:has(.trktabs) .chero,
  .view:has(.trktabs) .cbars,
  .view:has(.trktabs) .wbsite,
  .view:has(.trktabs) .sooncard,
  .view:has(.trktabs) .trkscroll{ box-shadow:none; }
  .view:has(.trktabs) .trktbl tbody tr:nth-child(even) td,
  .view:has(.trktabs) .trktbl tbody tr:hover td{ background:transparent; }
}