/* =====================================================================
   APEX DESIGN SYSTEM - single source of truth for layout & spacing.
   See replit.md "Design System" for the full guide. Quick reference:
   - Tokens: spacing (--sp-*), fluid type (--fs-*), container widths
     (--container-*), frame dims (--sb-w/--tb-h), breakpoints (--bp-*).
   - Fluid scaling: type & spacing use clamp() so they scale smoothly
     between phone and desktop without a breakpoint per step.
   - Layout primitives (compose pages from these, don't hardcode):
       .container / .container-narrow / .container-wide  -> centered max-width wrapper
       .grid-auto (set --grid-min)  -> columns reflow with auto-fit/minmax
       .stack  (set --stack-gap)    -> vertical rhythm
       .cluster(set --cluster-gap)  -> horizontal wrap group
       .cq                          -> container-query context for widgets
   - Always reference tokens/primitives instead of raw px values.
   ===================================================================== */
:root{
  --bg:#F4F6F9;--bg2:#FFFFFF;--bg3:#F8FAFC;--sbg:#0B1120;
  --white:#FFFFFF;--card:#FFFFFF;--input:#F1F5F9;
  --bdr:#E2E8F0;--bdr2:#CBD5E1;
  --tx:#0F172A;--tx2:#475569;--tx3:#94A3B8;--tx4:#CBD5E1;
  --acc:#1E40AF;--acc2:rgba(30,64,175,.08);
  --grn:#16A34A;--grn2:rgba(22,163,74,.08);
  --red:#DC2626;--red2:rgba(220,38,38,.08);
  --amb:#D97706;--amb2:rgba(217,119,6,.08);
  /* Legacy aliases some views reference - keep mapped to the canonical tokens */
  --mut:var(--tx2);--brd:var(--bdr);--bd:var(--bdr);--yel:var(--amb);
  /* Chart palette: uniform blue family (graduated shades, alternating dark/
     light so ids adjacent in creation order stay visually distinct). All
     shades are dark enough to double as bold value-label text on light bg. */
  --ch1:#1E3A8A;--ch2:#3B82F6;--ch3:#0C4A6E;--ch4:#0EA5E9;--ch5:#1E40AF;--ch6:#0284C7;--ch7:#172554;--ch8:#4B7BD6;
  --r:12px;--r-sm:8px;--r-lg:16px;--r-xl:20px;
  --f:'Aptos','Segoe UI','Plus Jakarta Sans',sans-serif;--m:'Aptos','Segoe UI','Plus Jakarta Sans',sans-serif;
  --shadow:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03);
  --shadow-md:0 4px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:0 8px 30px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.04);
  /* Fluid spacing scale - desktop value = max, tightens smoothly on small screens */
  --sp-xs:clamp(3px,.8vw,4px);--sp-sm:clamp(6px,1.2vw,8px);--sp-md:clamp(12px,2.2vw,16px);--sp-lg:clamp(16px,3vw,24px);--sp-xl:clamp(20px,4vw,32px);
  /* Fluid type scale - use these for text so it scales between phone and desktop */
  --fs-xs:clamp(11.5px,.67rem + .15vw,12.5px);--fs-sm:clamp(12.5px,.78rem + .15vw,13.5px);--fs-base:clamp(12.5px,.78rem + .2vw,13.5px);
  --fs-md:clamp(13px,.78rem + .35vw,15px);--fs-lg:clamp(15px,.85rem + .6vw,18px);--fs-xl:clamp(18px,1rem + 1vw,24px);
  --fs-2xl:clamp(22px,1.2rem + 1.8vw,32px);--fs-3xl:clamp(26px,1.4rem + 2.6vw,40px);
  /* Container widths + responsive page padding (the .container / .ci wrapper) */
  --container-narrow:880px;--container-max:1400px;--container-wide:1680px;--container-pad:var(--sp-lg);
  /* App-frame dimensions (sidebar width, top bar height) */
  --sb-w:260px;--sb-w-mini:68px;--tb-h:54px;
  /* Breakpoint reference (CSS @media can't read vars; keep here as the canonical set) */
  --bp-sm:480px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1280px;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}
body{font-family:var(--f);background:var(--bg);color:var(--tx);font-size:var(--fs-base);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.app{display:flex;height:100vh;height:100dvh}

/* SIDEBAR */
.sb{width:var(--sb-w);min-width:var(--sb-w);background:var(--sbg);display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.06);transition:margin-left .25s var(--ease),opacity .25s var(--ease),width .2s var(--ease),min-width .2s var(--ease)}
.app.sb-hidden .mn{flex:1}
.sb-collapse-btn{margin-left:auto;background:none;border:none;color:#64748B;cursor:pointer;padding:4px;border-radius:6px;transition:color .15s,background .15s;display:flex;align-items:center;justify-content:center}
.sb-collapse-btn:hover{color:#94A3B8;background:rgba(255,255,255,.06)}
.sb-expand-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--bdr);background:var(--white);cursor:pointer;flex-shrink:0;transition:background .15s var(--ease)}
.sb-expand-btn:hover{background:var(--bg3)}
.sb-hd{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:12px}
.sb-logo{width:36px;height:36px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:var(--sbg);letter-spacing:0}
.sb-nm{font-weight:700;font-size:14.5px;color:#fff;letter-spacing:.5px}.sb-sub{font-size:11px;color:#64748B;letter-spacing:1.5px;text-transform:uppercase;margin-top:2px}
.sb-nav{flex:1;overflow-y:auto;padding:8px 0}.sb-nav::-webkit-scrollbar{width:2px}.sb-nav::-webkit-scrollbar-thumb{background:#334155;border-radius:2px}
.sb-lbl{font-size:10.5px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:#475569;padding:16px 16px 6px}
.sb-sec{padding:0 10px;margin-bottom:2px}
.sb-i{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r-sm);cursor:pointer;transition:all .2s var(--ease);color:#64748B;font-size:12.5px;font-weight:500;position:relative}
.sb-i:hover{background:rgba(255,255,255,.06);color:#94A3B8}
.sb-i.act{background:rgba(59,130,246,.15);color:#60A5FA}
.sb-i.act::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:#3B82F6}
.sb-ic{width:18px;text-align:center;font-size:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sb-ic svg,.lc{width:16px;height:16px;stroke-width:1.8}
.stab .lc{width:18px;height:18px}
.btn svg,.bg svg{vertical-align:middle;display:inline-block}
.sb-bg{margin-left:auto;font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;background:#3B82F6;color:#fff}
.sb-ft{padding:14px 16px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:10px}
.sb-av{width:32px;height:32px;border-radius:50%;background:#1E293B;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#94A3B8;border:1.5px solid rgba(255,255,255,.1)}
.sb-un{font-size:13.5px;font-weight:600;color:#E2E8F0}.sb-ur{font-size:12px;color:#475569}

/* MAIN */
.mn{flex:1;display:flex;flex-direction:column;overflow:hidden}
.tb{height:var(--tb-h);min-height:var(--tb-h);background:var(--white);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 20px;gap:12px}
.tb-cr{font-size:12.5px;color:var(--tx3)}.tb-cr b{color:var(--tx);font-weight:600}
.tb-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.tb-s{background:var(--input);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:7px 14px;width:260px;font-family:var(--f);font-size:12px;color:var(--tx);outline:none;transition:border .2s var(--ease),box-shadow .2s var(--ease)}
.tb-s:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc2)}
.tb-s::placeholder{color:var(--tx4)}
.tb-sr{position:relative}
.tb-dd{position:absolute;top:calc(100% + 6px);right:0;width:380px;max-height:440px;overflow-y:auto;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:999;padding:6px 0;display:none;animation:dropIn .15s var(--ease)}
.tb-dd.open{display:block}
.tb-dd-cat{padding:6px 16px 2px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--tx3)}
.tb-dd-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;font-size:12.5px;color:var(--tx);transition:background .15s var(--ease)}
.tb-dd-item:hover,.tb-dd-item.sel{background:var(--acc2)}
.tb-dd-item .tb-dd-ic{width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg3)}
.tb-dd-item .tb-dd-ic svg{width:14px;height:14px;color:var(--tx3)}
.tb-dd-item.sel .tb-dd-ic{background:var(--acc2)}
.tb-dd-item.sel .tb-dd-ic svg{color:var(--acc)}
.tb-dd-txt{flex:1;min-width:0}
.tb-dd-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-dd-sub{font-size:12px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-dd-empty{padding:24px;text-align:center;font-size:12px;color:var(--tx3)}
.tb-dd-hint{padding:8px 16px;font-size:12px;color:var(--tx4);border-top:1px solid var(--bdr);margin-top:4px;display:flex;align-items:center;gap:8px}
.tb-dd-hint kbd{background:var(--bg3);border:1px solid var(--bdr);border-radius:4px;padding:2px 6px;font-size:11px;font-family:var(--f)}
.bell-wrap{position:relative}.bell-wrap .btn{overflow:visible}.bell-badge{position:absolute;top:-6px;right:-6px;background:#EF4444;color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--white);pointer-events:none;line-height:1}
.alert-dd{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-height:420px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:999;display:none;overflow:hidden;animation:dropIn .15s var(--ease)}
.alert-dd.open{display:block}
.alert-dd-hdr{padding:14px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.alert-dd-list{max-height:340px;overflow-y:auto;padding:0}
.alert-dd-item{display:flex;align-items:flex-start;gap:10px;padding:12px 18px;border-bottom:1px solid var(--bdr);font-size:12px;transition:background .15s var(--ease)}
.alert-dd-item:hover{background:var(--bg3)}
.alert-dd-item:last-child{border-bottom:none}
/* Clickable (deep-linking) alert items: obvious action affordance */
.alert-dd-act{cursor:pointer}
.alert-dd-act:hover{background:var(--acc2)}
.alert-dd-act:hover .alert-dd-chev{color:var(--acc);transform:translateX(2px)}
.alert-dd-chev{width:14px;height:14px;color:var(--tx3);flex-shrink:0;align-self:center;transition:color .15s var(--ease),transform .15s var(--ease)}
.alert-dd-review{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--acc);margin-top:3px}
.alert-dd-empty{padding:28px;text-align:center;font-size:12px;color:var(--tx3)}
@media(max-width:480px){.alert-dd{right:-60px;width:calc(100vw - 24px);max-width:380px}}
.mbp-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mbp-name{width:200px;flex-shrink:0;min-width:0}
.mbp-nm{font-size:12px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.mbp-bar{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
@media(max-width:640px){.mbp-row{flex-direction:column;align-items:stretch;gap:6px}.mbp-name{width:100%;display:flex;align-items:baseline;gap:8px}.mbp-name .mbp-nm{flex:1;min-width:0}.mbp-name .mo{flex-shrink:0;white-space:nowrap}.mbp-bar{gap:8px}}
.cnt{flex:1;overflow-y:auto;padding:0;scroll-behavior:smooth}.cnt::-webkit-scrollbar{width:5px}.cnt::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:3px}
.ci{padding:var(--container-pad);width:100%}

/* BUTTONS */
.btn{padding:8px 16px;border-radius:var(--r-sm);font-family:var(--f);font-size:12px;font-weight:600;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .2s var(--ease);position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-a{background:var(--acc);color:var(--white)}.btn-a:hover{background:#2563EB;box-shadow:0 2px 8px rgba(30,64,175,.25)}
.btn-g{background:var(--grn);color:#fff}.btn-g:hover{background:#15803D;box-shadow:0 2px 8px rgba(22,163,74,.25)}
.btn-o{background:transparent;color:var(--tx2);border:1px solid var(--bdr2)}.btn-o:hover{border-color:var(--tx3);color:var(--tx);background:var(--bg3)}
/* Aliases used by Estimating: btn-p = primary (btn-a), btn-s = secondary (btn-o), btn-xs = compact */
.btn-p{background:var(--acc);color:var(--white)}.btn-p:hover{background:#2563EB;box-shadow:0 2px 8px rgba(30,64,175,.25)}
.btn-s{background:transparent;color:var(--tx2);border:1px solid var(--bdr2)}.btn-s:hover{border-color:var(--tx3);color:var(--tx);background:var(--bg3)}
.btn-xs{padding:4px 10px;font-size:11px}

/* CARDS */
.cd{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
/* Container queries (opt-in): add class "cq" to a card so it sizes its padding/title
   to the card's own width, not the viewport. Safe by default - only opted-in cards are containers. */
.cd.cq{container-type:inline-size;container-name:card}
@container card (max-width:360px){.cd-h{padding:10px 12px}.cd-b{padding:12px}.cd-t{font-size:var(--fs-sm)}}
.cd-h{padding:14px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
/* Section headers pop: blue title + small accent bar. The bar uses
   currentColor so cards that intentionally recolor their title (e.g. the
   green Earned Revenue card, amber warning cards) keep a matching accent. */
.cd-t{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--acc);letter-spacing:.2px}
.cd-t::before{content:'';width:3px;height:14px;border-radius:2px;background:currentColor;flex-shrink:0}
.cd-b{padding:16px 18px}

/* BADGES */
.bg{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.2px}
.bg-g{background:var(--grn2);color:var(--grn)}.bg-r{background:var(--red2);color:var(--red)}
.bg-b{background:var(--acc2);color:var(--acc)}.bg-a{background:var(--amb2);color:var(--amb)}.bg-o{background:#fff3e0;color:#e65100}

/* TABLE */
.tbl{width:100%;border-collapse:collapse;table-layout:auto}
.tbl th{text-align:left;padding:10px 12px;font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--tx3);background:var(--bg3);border-bottom:1px solid var(--bdr);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--bdr);font-size:12px;white-space:nowrap}
.tbl tr{transition:background .15s var(--ease)}
.tbl tr:hover td{background:rgba(30,64,175,.03)}
/* Sortable column headers (Equipment fleet & rate sheet) */
/* Compact variant for dense read-only previews (payroll CSV preview) */
.tbl-compact th{padding:6px 8px;font-size:10.5px;letter-spacing:.8px}
.tbl-compact td{padding:4px 8px;font-size:11.5px}
.tbl-compact .bg{padding:1px 7px;font-size:11px}
.tbl th.th-sort{cursor:pointer;user-select:none;-webkit-user-select:none}
.tbl th.th-sort:hover{color:var(--tx)}
/* Header/cell alignment helpers - .tbl th's text-align:left otherwise outweighs the bare .r/.c utility */
.tbl th.r,.tbl td.r{text-align:right}
.tbl th.c,.tbl td.c{text-align:center}
/* Standard button row under a table/grid inside a card body */
.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-sm);margin-top:var(--sp-md);padding-top:var(--sp-md);border-top:1px solid var(--bdr)}
/* Compact icon delete button that lines up with .fi inputs in a grid row */
.row-del{width:35px;height:35px;min-width:35px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--red);font-size:12px}

.sb-toggle{display:none;background:none;border:none;color:var(--tx);cursor:pointer;padding:4px}

/* VIEW HEADER - title/subtitle block + action buttons (Job Setup etc.) */
.view-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);margin-bottom:20px}
.view-hd-txt{min-width:0}
.view-hd-actions{display:flex;gap:8px;flex-shrink:0}
/* Pills + "Showing X of Y" line above the project list */
.pp-filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pp-showing{font-size:12px;color:var(--tx3)}

/* RESPONSIVE GRID UTILITIES */
.rg{display:grid;gap:var(--sp-md)}
.rg-2{grid-template-columns:repeat(2,1fr)}
.rg-3{grid-template-columns:repeat(3,1fr)}
.rg-4{grid-template-columns:repeat(4,1fr)}
.rg-5{grid-template-columns:repeat(5,1fr)}
.rg-gap8{gap:var(--sp-sm)}.rg-gap10{gap:10px}.rg-gap16{gap:var(--sp-md)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Add Production loads grid: capped-height scroll pane so the modal never
   grows past the screen - the newest row and the footer buttons stay visible.
   Header + totals rows stay pinned while the pane scrolls. */
.bulk-prod-pane{max-height:clamp(160px,calc(100dvh - 440px),520px);overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bdr);border-radius:var(--r-sm);position:relative;z-index:0}
.bulk-prod-pane thead th{position:sticky;top:0;z-index:2}
.bulk-prod-pane tfoot td{position:sticky;bottom:0;background:var(--bg3);z-index:2}
/* The pane's own stacking context (z-index:0) keeps its sticky header/totals
   beneath the modal's sticky chrome; raise the chrome explicitly too. */
#modal-hd{z-index:5!important}
.modal-footer{z-index:5}
@media(max-width:768px){.bulk-prod-pane{max-height:clamp(140px,calc(100dvh - 520px),400px)}}

/* LAYOUT PRIMITIVES - compose pages from these instead of hardcoding widths/spacing */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}
.container-narrow{max-width:var(--container-narrow)}
.container-wide{max-width:var(--container-wide)}
/* View width caps - centered max-width wrappers (no extra padding; .ci already pads). Use on text-heavy views that read poorly when stretched across ultrawide monitors. */
.vcap{width:100%;max-width:var(--container-max);margin-inline:auto}
.vcap-wide{width:100%;max-width:var(--container-wide);margin-inline:auto}
.vcap-narrow{width:100%;max-width:var(--container-narrow);margin-inline:auto}
.grid-auto{display:grid;gap:var(--sp-md);grid-template-columns:repeat(auto-fit,minmax(min(var(--grid-min,240px),100%),1fr))}
.fgrid{display:grid;gap:var(--sp-sm);grid-template-columns:repeat(auto-fill,minmax(min(var(--fgrid-min,210px),100%),1fr));align-items:start}
.fgrid>div{min-width:0}
.fgrid .fi{width:100%}
.fg-span2{grid-column:span 2}
.fgrid-fit{grid-template-columns:repeat(auto-fit,minmax(min(var(--fgrid-min,210px),100%),1fr))}
.jd-form .ef-l{color:var(--tx3);letter-spacing:.6px;margin-bottom:3px}
.jd-group{border-top:1px solid var(--bdr);margin-top:var(--sp-md);padding-top:var(--sp-md)}
.jd-group:first-child{border-top:0;margin-top:0;padding-top:0}
.jd-gl{font-size:var(--fs-xs);font-weight:800;color:var(--tx3);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-sm)}
.jd-hint{font-size:var(--fs-xs);font-weight:400;color:var(--tx3);text-transform:none;letter-spacing:0;margin-top:3px;line-height:1.4}
.jd-location-grid{grid-template-columns:minmax(260px,2fr) minmax(150px,1fr) minmax(170px,1fr) auto;align-items:end}
.jd-location-action{display:flex;align-items:flex-end}
.jd-location-action .btn{white-space:nowrap}
.jd-location-note{grid-column:1/-1;font-size:var(--fs-xs);color:var(--tx3);line-height:1.35}
.jd-auto-label{display:inline-flex;margin-left:4px;padding:1px 6px;border-radius:999px;background:var(--grn2);color:var(--grn);font-size:10px;font-weight:700;letter-spacing:0;text-transform:none;vertical-align:1px}
.jd-auto-label.manual{background:var(--amb2);color:var(--amb)}
.jd-resolved-field{background:var(--bg3);color:var(--grn)}
.job-pay-card{border-color:rgba(30,64,175,.24)}
.job-pay-card>.cd-h{align-items:flex-start;gap:var(--sp-md)}
.job-pay-sub{font-size:var(--fs-xs);color:var(--tx3);margin-top:2px}
.job-pay-lock{font-size:var(--fs-xs);font-weight:700;color:var(--tx3);display:inline-flex;align-items:center;gap:5px}
.job-pay-summary{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:1px;background:var(--bdr);border-bottom:1px solid var(--bdr)}
.job-pay-summary>div{background:var(--card);padding:10px 12px;min-width:0}
.job-pay-summary span{display:block;font-size:10.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:2px}
.job-pay-summary b{display:block;font-size:var(--fs-sm);overflow-wrap:anywhere}
.job-pay-summary .job-pay-note{grid-column:span 2}
.job-pay-redacted{display:inline-flex;padding:2px 7px;border-radius:999px;background:var(--bg3);color:var(--tx3);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.job-pay-table{min-width:1180px}
.job-pay-table td,.job-pay-table th{font-size:11.5px}
.job-pay-trade td{padding:7px 12px!important;background:var(--bg3)!important;color:var(--acc);font-size:11px!important;font-weight:800;text-transform:uppercase;letter-spacing:.7px}
.job-pay-trade span{color:var(--tx3);font-weight:500;text-transform:none;letter-spacing:0;margin-left:6px}
.job-pay-components{display:block;color:var(--tx3);font-size:10.5px;font-weight:400;white-space:normal;margin-top:2px}
.job-pay-none{text-align:center!important;padding:20px!important;color:var(--tx3)!important}
.job-pay-empty{display:flex;flex-direction:column;gap:3px;padding:4px 0;color:var(--tx2)}
.job-pay-empty span{font-size:var(--fs-xs);color:var(--tx3)}
.job-pay-warning,.job-pay-mode-note,.job-pay-activation{padding:10px 14px;background:var(--amb2);border-bottom:1px solid rgba(217,119,6,.18);font-size:var(--fs-xs);color:var(--tx2)}
.job-pay-mode-note{background:var(--acc2);border-color:rgba(30,64,175,.18)}
.job-pay-import{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);padding:12px 16px;border-top:1px solid var(--bdr);background:var(--bg3)}
.job-pay-import>div{display:flex;flex-direction:column}
.job-pay-import span{font-size:var(--fs-xs);color:var(--tx3)}
.job-pay-form{display:flex;flex-direction:column;gap:var(--sp-md)}
.job-pay-form .job-pay-activation{border:1px solid rgba(217,119,6,.22);border-radius:var(--r-sm)}
.job-pay-edit-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);margin:var(--sp-sm) 0}
.job-pay-edit-head>div{display:flex;flex-direction:column}
.job-pay-edit-head span{font-size:var(--fs-xs);color:var(--tx3)}
.job-pay-edit-row{border:1px solid var(--bdr);border-radius:var(--r-sm);padding:var(--sp-md);margin-bottom:var(--sp-sm);background:var(--bg3)}
.job-pay-edit-identity,.job-pay-edit-rates,.job-pay-edit-meta{display:grid;gap:var(--sp-sm);align-items:end}
.job-pay-edit-identity{grid-template-columns:minmax(180px,1fr) minmax(220px,2fr) auto}
.job-pay-edit-rates{grid-template-columns:repeat(8,minmax(94px,1fr));margin-top:var(--sp-sm)}
.job-pay-edit-meta{grid-template-columns:auto auto minmax(180px,2fr) minmax(130px,1fr) minmax(130px,1fr) auto;margin-top:var(--sp-sm)}
.job-pay-edit-row label{font-size:10.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px}
.job-pay-edit-row label small{display:block;margin-top:2px;color:var(--acc);font-size:9px;font-weight:700;letter-spacing:0;text-transform:none}
.job-pay-field-help{display:block;margin-top:4px;color:var(--tx3);font-size:10.5px;font-weight:400;text-transform:none;letter-spacing:0}
.job-pay-check{display:flex!important;align-items:center;gap:7px;min-height:36px;color:var(--tx2)!important;text-transform:none!important;letter-spacing:0!important}
.job-pay-row-remove{color:var(--red)}
.job-pay-form-error{min-height:18px;color:var(--red);font-size:var(--fs-xs);font-weight:700}
.job-pay-legend{padding:9px 14px;background:var(--bg3);border-top:1px solid var(--bdr);font-size:11px;color:var(--tx2)}
.crew-class-table{min-width:0;width:100%;table-layout:auto}
.crew-class-wrap{overflow-x:auto}
.crew-class-table .job-pay-needs td{background:rgba(245,158,11,.06)}
.job-pay-class-cell{display:flex;align-items:center;gap:5px}
.job-pay-class-cell select{width:230px}
.jp-crew-date{width:140px}
.job-pay-mini{font-size:10px!important;padding:2px 6px!important;min-height:unset}
.job-pay-delete{color:var(--red);margin-left:3px}
.job-pay-row-badge{font-size:10px;margin-left:5px}
.job-pay-audit-label{font-size:10px;color:var(--tx3);margin-left:4px}
.stack{display:flex;flex-direction:column;gap:var(--stack-gap,var(--sp-md))}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster-gap,var(--sp-sm))}
.cq{container-type:inline-size}

/* RESPONSIVE */
@media(max-width:768px){
  .sb{position:fixed;left:calc(-1 * var(--sb-w) - 20px);top:0;bottom:0;z-index:900;width:var(--sb-w);transition:left .3s var(--ease);box-shadow:4px 0 24px rgba(0,0,0,.35)}
  .sb.open{left:0}
  .sb-toggle{display:block}
  .mob-toggle{display:flex!important;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--bdr);background:var(--white);cursor:pointer;flex-shrink:0;transition:background .15s var(--ease)}
  .mob-toggle:active{background:var(--bg3);transform:scale(.95)}
  .sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);z-index:899;transition:opacity .3s var(--ease)}
  .sb.open~.sb-overlay,.sb-overlay.show{display:block}
  .cnt{margin-left:0;width:100%;padding:14px}
  .ci{padding:var(--sp-md)}
  .tb{padding:8px 14px;gap:8px}
  .tb-s{display:none}
  .g2,.g3,.rg-3,.rg-4,.rg-5{grid-template-columns:1fr 1fr}
  .rg-2{grid-template-columns:1fr 1fr}
  .kpi-r{grid-template-columns:repeat(2,1fr)!important}
  .tbl td,.tbl th{padding:8px 10px;font-size:13px}
  .tbl{min-width:500px}
  /* View header stacks: full-width title block, buttons wrap below it */
  .view-hd{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:14px}
  .view-hd-actions{flex-wrap:wrap}
  .view-hd-actions .btn{flex:1 1 auto}
  /* Pills scroll on their own line; the "Showing X of Y" count drops below */
  .pp-filterbar .pills{max-width:100%}
  .pp-showing{flex-basis:100%}
  .pp-colhdr{display:none!important}
  .pp-desk{display:none!important}.pp-mob{display:block!important}
  .inv-colhdr{display:none!important}
  .inv-desk{display:none!important}.inv-mob{display:block!important}
  .pp-row{overflow:visible}
  .dos-bn{border-radius:var(--r-lg);margin-bottom:var(--sp-md)}
  .dos-bn-top{flex-direction:column;align-items:center;gap:10px;padding:14px 16px 10px;text-align:center}
  .dos-bn-top>span{margin-left:0!important}
  .dos-bn-info{text-align:center;flex:none!important;width:100%}
  .dos-bn-nm{white-space:normal!important;word-break:break-word;font-size:14px}
  .dos-bn-loc{justify-content:center}
  .dos-bn-ctx{flex-direction:column;align-items:center;padding:0 16px 14px;text-align:center;width:100%}
  .dos-bn-meta{gap:8px 12px;flex-wrap:wrap;justify-content:center;width:fit-content;align-self:center}
  .dos-bn-copy{width:100%;justify-content:center;margin-top:8px;padding:10px 14px}
  .utabs{overflow-x:auto;-webkit-overflow-scrolling:touch}.utab{font-size:12px;padding:12px 14px;flex-shrink:0;min-height:44px}
  /* DOS's desktop tab bar is hidden via .dos-desk-section below; other .stabs
     (Yards Inventory/Info, Payroll Review/Process) must stay visible on mobile. */
  .stabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .stab{flex-shrink:0;min-width:max-content}
  .dos-menu{display:block!important;border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:var(--sp-md)}
  .dos-desk-section{display:none!important}
  .dos-content-section{display:none!important}
  .dos-sub-active .dos-home-section{display:none!important}
  .dos-sub-active .dos-content-section{display:block!important}
  .dos-sub-active .dos-sub-back{display:flex!important}
  .dos-sub-active .dos-all-back{display:none!important}
  .wk{display:flex;gap:3px;padding:4px;margin-bottom:var(--sp-md);border-radius:var(--r)}
  .wd{flex:1;min-width:0;padding:8px 4px;border-radius:var(--r-sm);text-align:center}
  .wd-l{font-size:10px;letter-spacing:.5px;line-height:1}.wd-n{font-size:15px;line-height:1.2}
  .cd-h{flex-direction:column;gap:8px;align-items:flex-start}
  .dos-tbl-desk{display:none!important}
  .dos-cards-mob{display:block!important}
  .dos-day-footer{flex-direction:column!important;gap:12px!important;padding:16px!important;align-items:stretch!important;text-align:center;border-radius:var(--r)}
  .dos-day-footer .dos-ft-left{flex-direction:column;gap:4px}
  .dos-day-footer .dos-ft-right{flex-direction:column;gap:8px}
  .dos-day-footer .btn{width:100%;justify-content:center;min-height:48px;font-size:13px;border-radius:var(--r-sm)}
  .dos-add-btn{position:sticky;bottom:0;z-index:10;padding:12px 0;background:linear-gradient(transparent,var(--bg) 30%)}
  .dos-add-btn .btn{min-height:52px;font-size:14px;font-weight:700;border-radius:var(--r)}
  .modal-footer{flex-direction:column;gap:8px}
  .modal-footer .btn{width:100%;justify-content:center;min-height:48px;font-size:14px}
  .pr{grid-template-columns:1fr!important;gap:8px;padding:14px 18px}
  .pr>div{text-align:left!important}
  .pc-bd{grid-template-columns:1fr 1fr 1fr}
  .pg{grid-template-columns:1fr}
  .pills{overflow-x:auto;flex-wrap:nowrap}.pill{flex-shrink:0;white-space:nowrap}
  .dash-pills-desk{display:none!important}.dash-pills-mob{display:block!important}
  #dash-trend-proj{max-width:calc(100vw - 120px)!important}
  #modal-overlay,.modal-overlay{padding:10px!important}
  #modal-box{max-width:100%!important;margin:0;border-radius:var(--r);box-sizing:border-box}
  #modal-box .cd-b,#modal-box>div:not(.modal-footer):not([style*="border-bottom"]){padding-left:16px;padding-right:16px}
  .mf-2,.mf-3,.mf-4{grid-template-columns:1fr!important}
  .mf-row{margin-bottom:12px}
  .mf-label{font-size:12px!important}
  .fi,select.fi,textarea.fi,input[type="text"],input[type="number"],input[type="date"],input[type="email"],input[type="password"],input[type="search"],select,textarea{font-size:16px!important}
  .tb-s{font-size:16px!important}
  .prt-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prt-tabs .utab{flex-shrink:0;white-space:nowrap;min-width:80px;min-height:44px}
  .btn{min-height:44px;min-width:44px;font-size:13px}
  .tbl .btn{min-height:34px;min-width:34px;font-size:13px;padding:4px 10px}
  #login-overlay>div{max-width:100%!important}
  #login-overlay input{font-size:16px!important}
  .sb-i{min-height:48px;padding:12px 14px}
  .pill{min-height:40px;padding:10px 16px}
}
@media(max-width:900px){
  .jd-location-grid{grid-template-columns:1fr 1fr}
  .jd-location-main,.jd-location-note,.jd-location-action{grid-column:1/-1}
}
@media(max-width:480px){
  .ci{padding:12px}
  .g2,.g3,.rg-2,.rg-3,.rg-4,.rg-5{grid-template-columns:1fr}
  .fgrid,.fgrid-fit{grid-template-columns:1fr}
  .fg-span2{grid-column:auto}
  .kpi-r{grid-template-columns:1fr!important}
  .pc-bd{grid-template-columns:1fr}
  .ec-bd{grid-template-columns:1fr 1fr}
  .dos-bn-id{font-size:12px;padding:4px 10px}
  .dos-bn-date-hd{font-size:13px}
  .dos-bn-nm{font-size:14px}
  .utab{font-size:12px;padding:10px 12px}
  .stab .si{font-size:16px}.stab span:not(.si):not(.sc):not(.dos-notes-dot){display:none}
  .stab .sc{font-size:10px}
  .dos-ecard-bd{grid-template-columns:1fr 1fr}
  .dos-day-footer .dos-ft-left span:first-child{font-size:12px}
  .dos-day-footer .dos-ft-left span:last-child{font-size:20px;margin-left:0}
  .jd-location-grid{grid-template-columns:1fr}
  .jd-location-main,.jd-location-note,.jd-location-action{grid-column:auto}
  .jd-location-action .btn{width:100%}
}
@media(min-width:769px){.mob-toggle{display:none!important}.sb-overlay{display:none!important}.pp-mob{display:none!important}
.app.sb-hidden .sb{margin-left:calc(-1 * var(--sb-w));opacity:0;pointer-events:none;overflow:hidden}
.app.sb-hidden .sb-expand-btn{display:flex}
/* Collapsed icon-only rail (desktop) - icons stay visible & clickable */
.app.sb-mini .sb{width:var(--sb-w-mini);min-width:var(--sb-w-mini)}
.app.sb-mini .sb-lbl{display:none}
.app.sb-mini .sb-sec{padding:0 8px}
.app.sb-mini .sb-i{justify-content:center;padding:10px 0;gap:0}
.app.sb-mini .sb-i-l{display:none}
.app.sb-mini .sb-bg{display:none}
.app.sb-mini .sb-i.act::before{top:8px;bottom:8px}
.app.sb-mini .sb-hd{flex-direction:column;gap:8px;padding:14px 0;justify-content:center}
.app.sb-mini .sb-hd>div{display:none}
.app.sb-mini .sb-collapse-btn{margin-left:0;transform:rotate(180deg)}
.app.sb-mini .sb-ft{flex-direction:column;gap:10px;padding:14px 0;justify-content:center}
.app.sb-mini .sb-ft>div:nth-child(2){display:none}}
@media(max-width:768px){.sb-collapse-btn{display:none!important}.sb-expand-btn{display:none!important}}
@media(max-width:768px) and (hover:none) and (pointer:coarse){
  .fi,select.fi{min-height:44px;font-size:16px}
  .utab{min-height:44px}.stab{min-height:40px;padding:10px 14px!important}
  .wd{min-height:52px}
  td,th{padding:10px 12px!important}
}
@supports(padding:max(0px)){
  .sb{padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .cnt{padding-bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-width:768px){
  .job-pay-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .job-pay-summary .job-pay-note{grid-column:span 2}
  .job-pay-import,.job-pay-edit-head{align-items:stretch;flex-direction:column}
  .job-pay-edit-identity,.job-pay-edit-rates,.job-pay-edit-meta{grid-template-columns:1fr 1fr}
  .job-pay-edit-meta .job-pay-row-remove{grid-column:1/-1}
  .crew-class-table{font-size:11px}
  .crew-class-table th,.crew-class-table td{padding:8px 7px!important}
  .crew-class-table th:nth-child(4),.crew-class-table td:nth-child(4),.crew-class-table th:nth-child(5),.crew-class-table td:nth-child(5),.crew-class-table th:nth-child(11),.crew-class-table td:nth-child(11),.crew-class-table th:nth-child(12),.crew-class-table td:nth-child(12),.crew-class-table th:nth-child(13),.crew-class-table td:nth-child(13),.crew-class-table th:nth-child(14),.crew-class-table td:nth-child(14),.crew-class-table th:nth-child(15),.crew-class-table td:nth-child(15){display:none}
  .job-pay-class-cell{align-items:flex-start;flex-direction:column}
  .job-pay-class-cell select{width:min(210px,52vw)}
  .jp-crew-date{width:132px}
}
@media(max-width:480px){
  .job-pay-summary{grid-template-columns:1fr}
  .job-pay-summary .job-pay-note{grid-column:auto}
  .job-pay-edit-identity,.job-pay-edit-rates,.job-pay-edit-meta{grid-template-columns:1fr}
}
.mo{font-family:var(--m);font-size:13.5px}.r{text-align:right}.b{font-weight:700}
/* Numeric displays use the body font (Aptos) with tabular figures so digit columns stay aligned */
.mo,.kpi-v,.dos-bn-id,.dos-bn-we,.dos-bn-pill b,.wd-n,.dos-menu-item .dm-count,.dos-ecard-val,.ec-hrs,.pc-id,.ps-v{font-variant-numeric:tabular-nums}

/* KPI */
.kpi-r{display:grid;gap:var(--sp-md);margin-bottom:var(--sp-lg)}
.kpi{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:16px 18px;position:relative;overflow:hidden;transition:all .2s var(--ease);box-shadow:var(--shadow);min-width:0}
.kpi:hover{border-color:var(--bdr2);box-shadow:var(--shadow-md)}
.kpi-bar{position:absolute;top:0;left:0;right:0;height:3px}
.kpi-l{font-size:11.5px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-v{font-size:20px;font-weight:800;font-family:var(--m);letter-spacing:-0.5px;line-height:1.2;word-break:break-all}
.kpi-s{font-size:12.5px;color:var(--tx3);margin-top:6px;line-height:1.4}
.prog{height:6px;background:#E2E8F0;border-radius:3px;overflow:hidden}.prog-f{height:100%;border-radius:3px;transition:width .4s var(--ease)}

/* WEEK-ENDING CALENDAR PICKER (weCalFieldHtml in app.js) */
.we-cal-wrap{position:relative;display:inline-block}
.we-cal-btn{background:var(--input);border:1px solid var(--bdr);border-radius:6px;padding:6px 12px;font-family:var(--m);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:var(--acc);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.we-cal-btn:hover{border-color:var(--bdr2)}
.we-cal-car{font-size:10px;color:var(--tx3)}
.we-cal-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:998;width:262px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:10px;animation:dropIn .15s var(--ease)}
.we-cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.we-cal-hd b{font-size:12.5px}
.we-cal-nav{width:28px;height:28px;border:none;border-radius:6px;background:var(--bg3);color:var(--tx2);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s var(--ease)}
.we-cal-nav:hover{background:var(--acc2);color:var(--acc)}
.we-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.we-cal-dow{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3);text-align:center;padding:2px 0}
.we-cal-day{font-family:var(--m);font-variant-numeric:tabular-nums;font-size:12px;text-align:center;padding:7px 0;border-radius:6px;border:none;background:none;line-height:1}
span.we-cal-day.dis{color:var(--tx4);cursor:default}
span.we-cal-day.dis.out{color:transparent}
button.we-cal-day.we{background:var(--acc2);color:var(--acc);font-weight:700;cursor:pointer;transition:all .15s var(--ease)}
button.we-cal-day.we:hover{background:var(--acc);color:#fff}
button.we-cal-day.we.sel{background:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(30,64,175,.3)}
button.we-cal-day.we.out{opacity:.5}
.we-cal-hint{font-size:10.5px;color:var(--tx3);text-align:center;margin-top:6px}
@media(max-width:768px){
  .we-cal-pop{width:272px}
  .we-cal-day{padding:10px 0;font-size:13px}
  .we-cal-nav{width:36px;height:36px}
}
@media(max-width:400px){.we-cal-pop{right:-8px}}

/* DOS-SPECIFIC */
.dos-bn{background:linear-gradient(135deg,#0B1120,#162032,#1A2744);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg);margin-bottom:20px;color:#fff;box-shadow:0 4px 24px rgba(11,17,32,.35),0 1px 3px rgba(0,0,0,.1);overflow:hidden}
.dos-bn-top{padding:18px 24px 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dos-bn-id{font-family:var(--m);font-size:13px;font-weight:700;color:#60A5FA;background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.2);padding:5px 12px;border-radius:var(--r-sm);white-space:nowrap;letter-spacing:.5px;flex-shrink:0}
.dos-bn-info{min-width:0;flex:1}
.dos-bn-nm{font-size:15.5px;font-weight:700;color:#F1F5F9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.dos-bn-loc{font-size:13.5px;color:#64748B;margin-top:3px;display:flex;align-items:center;gap:6px}
.dos-bn-ctx{padding:0 24px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dos-bn-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dos-bn-date{font-size:12px;color:#94A3B8;font-weight:500}
.dos-bn-date-hd{font-size:14px;font-weight:700;color:#F1F5F9;letter-spacing:.2px;white-space:nowrap;flex-shrink:0}
.dos-bn-we{font-family:var(--m);font-size:12.5px;font-weight:600;color:#475569;background:rgba(255,255,255,.06);padding:3px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.08)}
.dos-bn-pill{font-size:12.5px;color:#64748B;display:inline-flex;align-items:center;gap:4px}
.dos-bn-pill b{font-family:var(--m);color:#94A3B8;font-weight:600}
.dos-bn-copy{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);font-family:var(--f);font-size:12.5px;font-weight:600;color:#CBD5E1;cursor:pointer;padding:7px 14px;display:inline-flex;align-items:center;gap:6px;transition:all .2s var(--ease)}
.dos-bn-copy:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#F1F5F9}
.dos-bn-id-row{display:flex;align-items:center;gap:10px}
.dos-nav-inline{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:#94A3B8;cursor:pointer;flex-shrink:0;padding:0;transition:background .15s ease}
.dos-nav-inline svg{width:16px;height:16px}
.dos-nav-inline:hover{background:rgba(255,255,255,.2);color:#F1F5F9}
.dos-nav-inline:active{background:rgba(255,255,255,.25);transform:scale(.92)}
.wk{display:flex;gap:3px;margin-bottom:var(--sp-md);background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);padding:4px;box-shadow:var(--shadow)}
.wd{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px;border-radius:var(--r-sm);text-align:center;cursor:pointer;transition:all .2s var(--ease);color:var(--tx3)}
.wd:hover{background:var(--bg);color:var(--tx2)}.wd.act{background:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(30,64,175,.3)}
.wd-l{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:.5}
.wd.act .wd-l{opacity:.9;color:rgba(255,255,255,.7)}.wd-n{font-family:var(--m);font-size:15px;font-weight:700}.wd-l{margin-top:2px}.wd.fu{opacity:.25}
.utabs{display:flex;gap:0;border-bottom:2px solid var(--bdr);margin-bottom:var(--sp-md)}
.utab{padding:12px 18px;font-size:13px;font-weight:700;cursor:pointer;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;background:none;color:var(--tx3);transition:all .2s var(--ease);display:flex;align-items:center;gap:7px;white-space:nowrap}
.utab:hover{color:var(--tx2)}
.utab.act{color:var(--acc);border-bottom-color:var(--acc)}
.stabs{display:flex;gap:0;border-bottom:2px solid var(--bdr);margin-bottom:var(--sp-md)}
.stab{flex:1;padding:12px 14px;text-align:center;font-size:13.5px;font-weight:700;color:var(--tx3);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;background:none;transition:all .2s var(--ease);display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.stab:hover{color:var(--tx2)}
.stab.act{color:var(--acc);border-bottom-color:var(--acc)}
.stab .si{font-size:17px;display:flex;align-items:center;justify-content:center}.stab .sc{font-size:11.5px;font-weight:700;background:var(--bg);padding:2px 7px;border-radius:8px}
.stab.act .sc{background:var(--acc2);color:var(--acc)}

/* DOS MENU NAV (Raken-style list for mobile) */
.dos-menu{display:none}
.dos-menu-item{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--white);border-bottom:1px solid var(--bdr);cursor:pointer;transition:background .15s var(--ease);-webkit-tap-highlight-color:transparent}
.dos-menu-item:first-child{border-radius:var(--r) var(--r) 0 0}
.dos-menu-item:last-child{border-bottom:none;border-radius:0 0 var(--r) var(--r)}
.dos-menu-item:only-child{border-radius:var(--r)}
.dos-menu-item:active{background:var(--bg3)}
.dos-menu-item .dm-ic{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--tx2);flex-shrink:0}
.dos-menu-item .dm-ic svg{width:22px;height:22px}
.dos-menu-item .dm-label{flex:1;font-size:15px;font-weight:600;color:var(--tx)}
.dos-menu-item .dm-count{font-family:var(--m);font-size:13px;font-weight:700;color:var(--tx3);margin-right:4px}
.dos-menu-item .dm-chev{color:var(--tx4);flex-shrink:0;display:flex;align-items:center}
.dos-menu-item .dm-chev svg{width:16px;height:16px}
.dos-notes-dot{width:9px;height:9px;border-radius:50%;background:var(--grn);box-shadow:0 0 0 3px var(--grn2);display:inline-block;flex-shrink:0}
.stab .dos-notes-dot{position:absolute;top:10px;left:calc(50% + 9px)}
.dos-sub-back{display:none;align-items:center;gap:8px;padding:12px 0;margin-bottom:12px;cursor:pointer;color:var(--acc);font-size:14px;font-weight:600;-webkit-tap-highlight-color:transparent}
.dos-sub-back:active{opacity:.7}
.dos-sub-back svg{width:18px;height:18px}
.dos-sub-title{font-size:13px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
.dos-desk-section{display:block}
.dos-content-section{display:block}
.dos-supplement-note{background:var(--grn2);border:1px solid rgba(22,163,74,.25);border-radius:var(--r-sm);padding:9px 12px;margin-bottom:var(--sp-md);font-size:var(--fs-xs);color:var(--tx2)}
.photo-dropzone{background:var(--acc2);border:2px dashed var(--acc);border-radius:var(--r);padding:28px;text-align:center;margin-bottom:var(--sp-md);cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),opacity .15s var(--ease)}
.photo-dropzone.is-dragover{border-color:var(--grn);background:var(--grn2)}
.photo-dropzone.is-uploading{cursor:wait;opacity:.62}
.photo-drop-icon{margin-bottom:6px;color:var(--acc);display:flex;justify-content:center}
.photo-drop-icon svg{width:28px;height:28px}
.photo-drop-title{font-size:var(--fs-sm);font-weight:700;color:var(--acc)}
.photo-drop-help{font-size:var(--fs-xs);color:var(--tx3);margin-top:4px}
.photo-upload-panel{border:1px solid var(--bdr);border-radius:var(--r-sm);background:var(--card);padding:10px 12px;margin-bottom:var(--sp-md)}
.photo-upload-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-xs);font-weight:700;color:var(--tx2);margin-bottom:7px}
.photo-upload-item{display:grid;grid-template-columns:20px minmax(120px,1fr) minmax(150px,auto) auto;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--bdr);font-size:var(--fs-xs)}
.photo-upload-state{width:18px;height:18px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--tx3)}
.photo-upload-item.is-success .photo-upload-state{background:var(--grn2);color:var(--grn)}
.photo-upload-item.is-failed .photo-upload-state{background:var(--red2);color:var(--red)}
.photo-upload-item.is-queued-offline .photo-upload-state{background:var(--amb2);color:var(--amb)}
.photo-upload-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--tx)}
.photo-upload-label{color:var(--tx3);text-align:right}
.photo-upload-item.is-failed .photo-upload-label{color:var(--red)}
.photo-upload-spinner{width:11px;height:11px;border:2px solid var(--bdr2);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite}
.photo-report-summary{background:var(--grn2);border:1px solid rgba(22,163,74,.35);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:12px;font-size:var(--fs-xs);color:var(--grn);font-weight:700;display:flex;align-items:center;gap:6px}
.photo-report-summary svg{width:12px;height:12px;flex-shrink:0}
.photo-report-options{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:150px}
.photo-report-choice{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--tx2);cursor:pointer;white-space:nowrap}
.photo-report-choice input{accent-color:var(--grn);margin:0}
.photo-report-badge{font-size:11px;color:var(--tx4);border:1px solid var(--bdr);border-radius:999px;padding:2px 7px}
.photo-report-badge.is-selected{color:var(--grn);border-color:rgba(22,163,74,.35);background:var(--grn2);font-weight:700}
.photo-notes-control{min-width:230px;padding:6px 8px;font-size:12px}
.photo-note-readonly{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)}
.photo-delete-btn{font-size:12px;padding:6px 10px;color:var(--red);border-color:var(--red)}
.photo-empty{text-align:center;color:var(--tx3);padding:16px!important}
@media(max-width:600px){
  .photo-dropzone{padding:22px 14px}
  .photo-upload-item{grid-template-columns:20px minmax(0,1fr) auto}
  .photo-upload-label{grid-column:2/4;text-align:left}
  .photo-notes-control{min-width:190px}
}

/* PROJECT PICKER */
.pp-mob{display:none}
.pp-row{transition:all .2s var(--ease)!important}
.pp-row:hover{border-color:var(--acc)!important;box-shadow:var(--shadow-md)!important;transform:translateY(-1px)}
@media(min-width:769px){#pp-body-prt{overflow-x:auto}.pp-row-prt{overflow:visible!important}}

/* DOS MOBILE CARDS & FOOTER */
.dos-tbl-desk{display:block}.dos-cards-mob{display:none}
.dos-detail-wrap{max-width:1100px}
.dos-detail-wrap .tbl{table-layout:auto;width:100%;min-width:max-content}
.dos-ecard{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow);transition:all .2s var(--ease)}
.dos-ecard:active{transform:scale(.99)}
.dos-ecard-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--bdr);background:var(--bg3)}
.dos-ecard-num{width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.dos-ecard-nm{font-weight:700;font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dos-ecard-val{font-family:var(--m);font-size:15px;font-weight:800;color:var(--acc);flex-shrink:0}
.dos-ecard-u{font-size:11px;color:var(--tx3);font-weight:500;margin-left:2px}
.dos-ecard-bd{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:10px 14px}
.dos-ecard-bd>div>.ef-l{font-size:var(--fs-xs);font-weight:700;color:var(--tx4);text-transform:uppercase;letter-spacing:.8px}
.dos-ecard-bd>div>.ef-v{font-size:13px;font-weight:500;margin-top:1px}
.dos-day-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-md);padding:14px 18px;background:#0F172A;border-radius:var(--r);color:#fff}
.dos-ft-left{display:flex;align-items:center;gap:12px}
.dos-ft-right{display:flex;align-items:center;gap:14px;font-size:12px;opacity:.8}

/* ENTRY CARDS */
.ec{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow);transition:all .2s var(--ease)}
.ec:active{transform:scale(.99)}
.ec-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--bdr);background:var(--bg3)}
.ec-n{width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.ec-nm{font-weight:700;font-size:12px;flex:1}
.ec-hrs{font-family:var(--m);font-size:15px;font-weight:800;color:var(--acc)}
.ec-u{font-size:11px;color:var(--tx3);font-weight:500}
.ec-bd{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px 10px;padding:10px 14px}
.ef-l{font-size:var(--fs-xs);font-weight:700;color:var(--tx4);text-transform:uppercase;letter-spacing:.8px}.ef-v{font-size:13.5px;font-weight:500;margin-top:1px}

/* PROJECT CARDS */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-md)}
.tbl tr.pr:hover td{background:var(--acc2)}
.tbl tr.pr td{padding:10px 12px;vertical-align:middle;line-height:1.4}
.pc{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .2s var(--ease);box-shadow:var(--shadow)}
.pc:hover{border-color:var(--acc);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pc-h{padding:16px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between}
.pc-id{font-family:var(--m);font-size:13px;font-weight:700;color:var(--acc)}.pc-nm{font-size:12.5px;font-weight:600;margin-top:3px;color:var(--tx)}.pc-loc{font-size:12.5px;color:var(--tx3);margin-top:2px}
.pc-bd{padding:14px 18px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.ps{text-align:center}.ps-v{font-family:var(--m);font-size:15px;font-weight:800}.ps-l{font-size:11px;color:var(--tx4);text-transform:uppercase;letter-spacing:.8px;margin-top:2px}
.pc-f{padding:10px 18px;background:var(--bg3);display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--tx3)}

/* PILLS */
.pills{display:flex;gap:2px;background:var(--bg);border-radius:var(--r-sm);padding:3px;border:1px solid var(--bdr)}
/* pill-row: same component as .pills (used by Estimating) - inline, compact, scrolls sideways on phones */
.pill-row{display:flex;gap:2px;background:var(--bg);border-radius:var(--r-sm);padding:3px;border:1px solid var(--bdr);width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pill-row .pill{flex-shrink:0;white-space:nowrap}
.pill{padding:7px 16px;border-radius:7px;font-size:12px;font-weight:600;color:var(--tx3);cursor:pointer;transition:all .2s var(--ease)}
.pill:hover{color:var(--tx2)}.pill.act{background:var(--acc);color:var(--white);box-shadow:0 2px 6px rgba(30,64,175,.2)}
.dash-pills-mob{display:none}

/* PORT ROW */
.pr{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr 100px 80px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--bdr);cursor:pointer;transition:background .15s var(--ease)}
.pr:hover{background:rgba(30,64,175,.03)}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md)}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-md)}
.mt16{margin-top:var(--sp-md)}.mb16{margin-bottom:var(--sp-md)}.mb20{margin-bottom:20px}
.hidden{display:none!important}
.ct-chev-open{transform:rotate(90deg)}
.fi{background:var(--input);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:8px 12px;font-family:var(--f);font-size:12px;color:var(--tx);outline:none;transition:border .2s var(--ease),box-shadow .2s var(--ease)}
.fi:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc2)}
.ifi{padding:4px 6px;font-size:13px;width:100%}
select.ifi{padding:3px 4px}
@keyframes ifiok{0%{border-color:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.35)}100%{box-shadow:0 0 0 2px rgba(34,197,94,0)}}
.ifi-ok{animation:ifiok 1s var(--ease)}
.fg{margin-bottom:14px}
.fg:last-child{margin-bottom:0}
.fl{display:block;font-size:12.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.fg .fi{width:100%;min-height:44px}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
select.fi{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394A3B8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.an{animation:up .35s var(--ease) both}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

/* UTILITY CLASSES */
.sec-title{font-size:19px;font-weight:800;letter-spacing:-.2px}
.sec-sub{font-size:13px;color:var(--tx2);margin-top:2px}
.sec-label{font-size:13.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px}
.alert-bar{border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13px}
.alert-bar svg{width:14px;height:14px;flex-shrink:0}
.alert-bar-red{background:var(--red2);border:1px solid rgba(220,38,38,.2)}
.alert-bar-red svg{color:var(--red)}
.alert-bar-amb{background:var(--amb2);border:1px solid rgba(217,119,6,.3)}
.alert-bar-amb svg{color:var(--amb)}
.alert-bar-grn{background:rgba(22,163,74,.06);border:1px solid rgba(22,163,74,.2)}
.alert-bar-grn svg{color:#22c55e}
.btn-icon{padding:6px;min-width:32px;min-height:32px;justify-content:center}
.empty-state{text-align:center;color:var(--tx3);padding:24px;font-size:12px}
.card-actions{display:flex;justify-content:flex-end;gap:8px;padding:6px 12px;border-top:1px solid var(--bdr)}

/* ═══ Estimating ═══ */
.est-tbl th{white-space:nowrap}
.est-tbl td{vertical-align:middle}
/* Inline estimating fields keep the compact in-table feel but must read as
   fields in light AND dark: same surface/border tokens as the platform .fi */
.est-inl{background:var(--input);border:1px solid var(--bdr);border-radius:6px;padding:4px 8px;color:var(--tx);font:inherit;font-size:13px;transition:border .2s var(--ease)}
.est-inl:hover:not(:disabled){border-color:var(--bdr2)}
.est-inl:focus{border-color:var(--acc);outline:none;background:var(--white)}
.est-inl:disabled{opacity:.7;background:var(--bg3)}
select.est-inl{cursor:pointer}
.est-title{font-size:20px;font-weight:700;width:280px}
.est-n{width:74px;text-align:right}
/* Editor header band: title row + quiet meta line + actions on the right */
.est-ed-head{align-items:flex-start}
.est-ed-titlerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.est-ed-meta{display:flex;gap:14px;align-items:center;margin-top:8px;flex-wrap:wrap;font-size:12px;color:var(--tx2)}
.est-vers{display:inline-flex;gap:4px;align-items:center}
.est-vers .pill{padding:2px 8px;font-size:11px;min-height:0}
.pg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pg-title{font-size:18px;font-weight:800}
.pg-sub{font-size:12px;color:var(--tx2)}
.pg-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.beta-tag{display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(135deg,#F59E0B,#EF4444);color:#fff;box-shadow:0 0 0 1px rgba(245,158,11,.45)}
.est-ed-actions{display:flex;gap:8px;flex-shrink:0;align-items:flex-start}
/* Overflow menu (Duplicate / New Revision / templates / exports) */
.est-menu{position:relative}
.est-menu-dd{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:5000;padding:6px;animation:dropIn .15s var(--ease)}
.est-menu-dd.open{display:block}
.est-menu-it{display:block;width:100%;text-align:left;background:none;border:none;border-radius:var(--r-sm);padding:8px 12px;font-family:var(--f);font-size:12.5px;font-weight:500;color:var(--tx);cursor:pointer;transition:background .15s var(--ease)}
.est-menu-it:hover{background:var(--acc2);color:var(--acc)}
.est-menu-sep{height:1px;background:var(--bdr);margin:5px 8px}
/* Sticky totals summary bar with the levers expander tucked inside */
.est-sumbar{position:sticky;top:0;z-index:40;display:flex;align-items:flex-start;gap:16px;padding:10px 16px;box-shadow:var(--shadow-md)}
.est-sumbar .est-levers-wrap{flex:1;min-width:0}
.est-levers-wrap{flex:1 1 320px;min-width:0}
.est-levers{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;padding:10px 2px 4px}
.est-levers label{display:inline-flex;align-items:center;gap:6px;color:var(--tx2);white-space:nowrap}
.est-sum-kpis{display:flex;gap:22px;align-items:center;margin-left:auto;padding:2px 0;flex-wrap:nowrap;flex-shrink:0;white-space:nowrap}
/* Vertical entry flow for labor/equipment lines: each line is a stacked block
   whose labeled fields wrap downward - no sideways table scrolling. */
.est-lline{border:1px solid var(--bdr);border-radius:var(--r-sm);background:var(--bg2);padding:8px 10px;margin:6px 0}
.est-lline-hd{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px;font-size:12px}
.est-lline-f{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:flex-end;font-size:12px;color:var(--mut)}
.est-lline-f .est-lf{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.est-lf{font-size:11px;color:var(--tx3);display:inline-flex;gap:4px;align-items:center;white-space:nowrap}
.est-kpi-lg{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.est-kpi-ll{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--tx3)}
.est-kpi-lg b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.est-kpi-sub{font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}
.est-kpi-price b{color:var(--grn)}
/* Expander rows (Drivers / Pipe spec / Hauling / checklist / levers) */
details.est-exp{margin:8px 0;border:1px solid var(--bdr);border-radius:var(--r-sm);background:var(--bg3)}
details.est-exp[open]{background:var(--bg2)}
details.est-exp>*:not(summary){padding:0 12px 10px}
details.est-exp-nest{margin:8px 0 0;background:var(--bg3)}
.est-exp-sum{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:7px 12px;font-size:12px;user-select:none;-webkit-user-select:none}
.est-exp-sum::-webkit-details-marker{display:none}
.est-exp-sum::before{content:'';width:0;height:0;border-left:5px solid var(--tx3);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s var(--ease);flex-shrink:0}
details[open]>.est-exp-sum::before{transform:rotate(90deg)}
.est-exp-t{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--tx2)}
.est-exp-hint{font-size:11.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* GET-style cascading worksheet pieces */
.est-drivers{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--mut);padding-top:2px}
/* Derived (computed) chip: visually distinct from typed inputs, click for math */
.est-drv{background:var(--bg3);border:1px dashed var(--bdr2);border-radius:6px;padding:2px 7px;font-size:12px;color:var(--tx2);cursor:pointer;white-space:nowrap}
.est-drv:hover{border-color:var(--acc)}
.est-src-estimate{background:rgba(148,163,184,.18);color:var(--tx3)}
.est-movers{display:flex;flex-direction:column;line-height:1;gap:2px}
.est-sumstack{padding:6px 10px;margin-top:12px}
.est-sumrow{display:flex;gap:14px;align-items:center;padding:5px 6px;border-radius:6px;text-decoration:none;color:var(--tx)}
.est-sumrow:hover{background:var(--bg3)}
.est-sumnm{font-weight:600;font-size:13px;flex:1}
.est-check{padding:4px 6px;margin-top:12px;border-left:3px solid var(--amb)}
.est-check .est-exp-sum{padding:8px 10px}
.est-check ul{padding:0 12px 10px 30px!important;color:var(--tx2)}
.est-check-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--amb2);color:var(--amb);font-size:11px;font-weight:800}
/* Hover-revealed row/section actions: opacity only (never display/visibility)
   so scripts and keyboard users can still reach the buttons */
.est-rowact{display:inline-flex;gap:4px;opacity:0;transition:opacity .15s var(--ease)}
tr:hover .est-rowact,.est-rowact:focus-within{opacity:1}
.est-scope-act{display:inline-flex;gap:4px;opacity:.25;transition:opacity .15s var(--ease)}
.est-scope:hover .est-scope-act,.est-scope-act:focus-within{opacity:1}
.est-kpi{font-size:12px;color:var(--mut);white-space:nowrap}
.est-kpi b{color:inherit;font-size:13px;margin-left:2px}
.est-scope{padding:16px;margin-top:14px}
.est-scope-hd{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--bdr)}
.est-scope-nm{font-size:16px;font-weight:700;width:200px}
.est-wd-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--mut);margin:6px 0}
.est-wdl{white-space:nowrap;font-size:12px}
.est-sub{margin-top:10px;border-top:1px dashed var(--bdr);padding-top:8px}
/* "+ Pipe spec" adder: clears the spec blocks' floated controls and reads as
   a real control (dashed drop-zone style) so it can't hide below a float. */
.est-addspec{clear:both;display:flex;align-items:center;gap:10px;margin:8px 0;padding:8px 10px;border:1.5px dashed var(--bdr);border-radius:var(--r-sm);background:var(--bg2)}
.est-addspec-btn{font-weight:600;white-space:nowrap}
.est-sub-hd{display:flex;gap:10px;align-items:center;font-weight:600;font-size:13px;margin-bottom:4px}
.est-cat-tot{font-size:12px;color:var(--mut);font-weight:400}
.est-rollup{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;padding:8px 10px;background:var(--bg3);border:1px solid var(--bdr);border-radius:8px}
.est-ovrc{white-space:nowrap}
.est-ovr{background:rgba(245,158,11,.18);border-radius:6px;padding:2px 5px;box-shadow:inset 0 0 0 1px rgba(245,158,11,.5)}
.est-ic{cursor:pointer;opacity:.55;font-size:12px;text-decoration:none}
.est-ic:hover{opacity:1}
/* Inherited (followed) value cue - must stay visible on light backgrounds */
.est-inh{font-style:italic;color:var(--tx3);border-style:dashed}
.est-src{font-size:10px;padding:1px 6px;border-radius:8px;background:var(--bg3);color:var(--tx2)}
.est-src-cell{background:rgba(59,130,246,.12);color:#1D4ED8}
.est-src-scope{background:rgba(168,85,247,.12);color:#7E22CE}
.est-src-category{background:rgba(16,185,129,.12);color:#047857}
.est-totrow td{border-top:1px solid var(--bdr);background:var(--bg3)}
.est-grand td{font-size:14px}
.est-st-Draft{background:rgba(148,163,184,.25)}
.est-st-Submitted{background:rgba(59,130,246,.25)}
.est-st-Awarded{background:rgba(16,185,129,.25)}
.est-st-Lost{background:rgba(239,68,68,.25)}
.est-notes{width:100%;min-height:70px;margin-top:6px;background:var(--input);border:1px solid var(--bdr);border-radius:8px;color:var(--tx);padding:8px;font:inherit;font-size:13px}
.est-notes:focus{border-color:var(--acc);outline:none}
/* Estimating modals (mf-grid) follow the platform modal form pattern:
   uppercase mf-labels, .fi-style fields, primary Save aligned right */
.mf-grid .mf-row{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.mf-grid .mf-row>label{font-size:12.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.8px}
.mf-grid input:not([type=checkbox]):not([type=radio]),.mf-grid select,.mf-grid textarea{background:var(--input);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:8px 12px;font-family:var(--f);font-size:13px;color:var(--tx);outline:none;width:100%;transition:border .2s var(--ease)}
.mf-grid input:focus,.mf-grid select:focus,.mf-grid textarea:focus{border-color:var(--acc)}
.mf-grid>.btn{align-self:flex-start;margin-top:2px}
.mf-grid{display:flex;flex-direction:column}
/* Estimating on phones: keep tap targets sane without blowing up compact rows */
@media(max-width:640px){
  .est-inl{min-height:38px}
  .est-title{width:100%;font-size:18px}
  .btn-xs{min-height:36px}
  .est-levers{gap:10px}
  .est-ed-head{flex-direction:column;align-items:stretch}
  .est-ed-actions{width:100%;justify-content:flex-end}
  /* Stack the summary bar: KPIs on top, Levers expander below. Without the
     column layout the full-width KPI row squeezes the Levers <details> to
     0 width in the row flex, so its label wraps vertically (~230px of dead
     whitespace in the card). */
  .est-sumbar{position:static;gap:10px;flex-direction:column-reverse;align-items:stretch}
  .est-sum-kpis{width:100%;justify-content:space-between;margin-left:0}
  .est-levers-wrap{width:100%;flex:none}
  .est-rowact,.est-scope-act{opacity:1}
  .est-exp-hint{white-space:normal}
}

/* ── Clickable info icon + popover (shared pay forms) ── */
.tip-i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--bdr);background:var(--bg3);color:var(--tx3);font-size:10px;font-weight:700;font-style:normal;line-height:1;cursor:pointer;vertical-align:middle;margin-left:4px;padding:0;font-family:inherit}
.tip-i:hover,.tip-i:focus{color:var(--acc);border-color:var(--acc);outline:none}
.tip-pop{position:absolute;z-index:4000;max-width:min(280px,calc(100vw - 16px));background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);box-shadow:0 4px 16px rgba(0,0,0,.35);padding:8px 10px;font-size:12px;color:var(--tx2);font-weight:400;text-align:left;white-space:normal;line-height:1.45}

/* ── Alert deep-link focus flash (employee Pay tab pay-setup row) ── */
@keyframes hlFlash{0%{background:rgba(245,158,11,.28)}100%{background:transparent}}
.hl-flash{animation:hlFlash 2.6s ease-out both;border-radius:4px}

/* Estimating labor source tag: sheet-sourced vs library vs hand-typed lines */
.est-src-tag{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 4px;border-radius:3px;background:var(--brand-soft,#e8f0fe);color:var(--brand,#1a5dc8);vertical-align:middle}
.est-src-tag.est-src-typed{background:var(--bg3,#eee);color:var(--tx3,#888)}