@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --red: #AA2B31; --red-hover: #892b34;
    --green: #10b981; --blue: #3b82f6; --blue-hover: #2563eb; --orange: #f59e0b;
    --bg: #D1D1D1; --surface: #F3F3F3;
    --border: #C4C4C4; --border-focus: #ABABAB;
    --text: #1A1A1A; --text-muted: #282828;
    --glass: rgba(255, 255, 255, 0.85);
    --scrollbar-thumb: rgba(0,0,0,0.22); --scrollbar-thumb-hover: rgba(0,0,0,0.38);
    --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 25px -5px rgba(0,0,0,0.08);
    --shadow-lg: 0 25px 50px -12px rgba(0,0,0,0.15);
    --radius: 12px;
}
.logo-dark { display: none !important; }
[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark  { display: block !important; }

[data-theme="dark"] {
    --bg: #1A1A1A; --surface: #282828;
    --border: #3A3A3A; --border-focus: #4A4A4A;
    --text: #F3F3F3; --text-muted: #D1D1D1;
    --glass: rgba(26, 26, 26, 0.85);
    --scrollbar-thumb: rgba(255,255,255,0.2); --scrollbar-thumb-hover: rgba(255,255,255,0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }
body { background: var(--bg); color: var(--text); line-height: 1.6; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
.hidden { display: none !important; }

header { background: var(--surface); height: 54px; box-sizing: border-box; padding: 0 2rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; z-index: 1000; box-shadow: var(--shadow-sm); }
.logo { display: flex; align-items: center; cursor: pointer; }
header .logo { margin-left: -18px; }
.logo img { display: block; }

.btn { padding: 10px 20px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; outline: none; }
.btn:hover { background: var(--bg); border-color: var(--border-focus); color: var(--text); transform: translateY(-1px); }
.btn-active { background: var(--text) !important; color: var(--bg) !important; }
.btn-dark { background: var(--blue); color: #fff; border: none; }
.btn-dark:hover { background: var(--blue-hover); color: #fff; }
.btn-red { background: var(--red); color: #fff; border: none; }
.btn-red:hover { background: var(--red-hover); color: #fff; }
.btn-green { background: var(--green); color: #fff; border: none; }
.btn-green:hover { background: #0ea471; color: #fff; }

#app-container { display: flex; flex: 1; overflow: hidden; }

/* #sub-nav is the flex item that changes width — main gets pushed right.
   #sub-nav-inner is always 260px wide; overflow:hidden on the parent clips it
   to 49px while collapsed, then reveals all 260px when expanded. */
#sub-nav { width: 49px; flex-shrink: 0; overflow: hidden; z-index: 200; transition: width 0.18s ease; background: var(--surface); border-right: 1px solid var(--border); }
#sub-nav.sb-expanded { width: 260px; box-shadow: 6px 0 24px rgba(0,0,0,0.3); }
/* Side padding is 2.5px in BOTH collapsed and expanded so the icons never shift
   horizontally when the bar opens — only the width grows and the labels fade in.
   overflow-y:auto (scrollbar hidden) so the wheel scrolls even while collapsed. */
#sub-nav-inner { width: 260px; height: 100%; display: flex; flex-direction: column; padding: 20px 2.5px; gap: 6px; overflow-y: auto; scrollbar-width: none; box-sizing: border-box; }
#sub-nav-inner::-webkit-scrollbar { display: none; }
#sub-nav-pj-name { font-size: 11px; font-weight: 900; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); padding-bottom: 10px; white-space: nowrap; opacity: 0; transition: opacity 0.15s; }
.sidebar-label { font-size: 10px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 15px; margin-bottom: 5px; padding-left: 8px; white-space: nowrap; opacity: 0; transition: opacity 0.15s; }
#sub-nav.sb-expanded #sub-nav-pj-name, #sub-nav.sb-expanded .sidebar-label { opacity: 1; }
#sub-nav:not(.sb-expanded) #sub-nav-pj-name,
#sub-nav:not(.sb-expanded) .sidebar-label { opacity: 0 !important; }
.sidebar-btn { justify-content: flex-start; text-align: left; padding: 10px 10px; font-size: 12px; width: 100%; border: none; background: transparent; cursor: pointer; border-radius: 8px; font-weight: 600; color: var(--text-muted); text-transform: none !important; white-space: nowrap; overflow: hidden; gap: 0; }
/* sb-ico is 24px wide. Collapsed bar is 49px, so an icon must centre at 24.5px.
   Collapsed we tighten #sub-nav-inner's side padding to 2.5px: 2.5 (inner) + 10 (btn)
   = 12.5px left offset → icon centre 12.5 + 12 = 24.5px = ½ of 49 ✓. #top-nav-group's
   own padding is stripped when collapsed so its icons line up identically. */
.sb-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; flex-shrink: 0; font-size: 14px; overflow: hidden; box-sizing: border-box; }
.sb-txt { white-space: nowrap; margin-left: 24px; }
#sub-nav:not(.sb-expanded) #top-nav-group { background: transparent; border-radius: 0; }
/* Toggle arrow flips to point right when collapsed */
#sub-nav:not(.sb-expanded) #sidebar-toggle-btn .sb-ico { transform: scaleX(-1); }
.sidebar-btn:hover { background: var(--bg); color: var(--text); }
.sidebar-btn.btn-active { background: rgba(225,29,72,0.1) !important; color: var(--red) !important; font-weight: 800; border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; }

/* A feature the account's plan does not include. Left visible on purpose — a
   customer should be able to see what they are not buying — but plainly inert.
   Pointer events stay on so the tooltip explaining why still appears; the click
   itself is refused in showView, which every navigation goes through. */
.sidebar-btn.plan-locked { opacity: .38; cursor: not-allowed; }
.sidebar-btn.plan-locked:hover { background: transparent; color: var(--text-muted); }
.sidebar-btn.plan-locked .sb-txt::after { content: ' 🔒'; font-size: 9px; opacity: .8; }

/* Feature chips in the subscriptions table */
.feat-wrap { display: flex; flex-wrap: wrap; gap: 4px; }
.feat-chip {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    background: var(--bg); border: 1px solid var(--border);
    font-size: 10px; font-weight: 700; color: var(--text); white-space: nowrap;
}
#sub-nav.global-view .sidebar-project-item { opacity: 0.25; pointer-events: none; cursor: default; transition: opacity 0.2s; }

/* ── Auto-retract nav bar (Settings ▸ System Settings ▸ Navigation Bar = Auto) ──
   The bar keeps its 49px in-flow footprint so page content never shifts; the
   inner panel is absolutely positioned and slides out to 260px as an overlay ON
   TOP of the page on hover, then retracts when the mouse leaves. */
#sub-nav.nav-auto { overflow: visible; width: 49px; position: relative; }
#sub-nav.nav-auto #sub-nav-inner {
    position: absolute; top: 0; left: 0; height: 100%;
    width: 49px; overflow: hidden;
    background: var(--surface); border-right: 1px solid var(--border);
    z-index: 300; box-shadow: none;
    transition: width 0.18s ease;
}
#sub-nav.nav-auto:hover #sub-nav-inner {
    width: 260px; overflow-y: auto; scrollbar-width: none;
    box-shadow: 6px 0 24px rgba(0,0,0,0.3);
}
#sub-nav.nav-auto:hover #sub-nav-inner::-webkit-scrollbar { display: none; }
#sub-nav.nav-auto:hover #sub-nav-pj-name,
#sub-nav.nav-auto:hover .sidebar-label { opacity: 1 !important; }
/* Restore the Workspace group's card look on hover (the collapsed rule above
   strips its background/padding; without sb-expanded it'd stay stripped, so the
   section looks like it's missing when the overlay is open). */
#sub-nav.nav-auto:hover #top-nav-group { background: var(--bg); border-radius: 10px; }
#sub-nav.nav-auto #sidebar-toggle-btn { display: none; }

/* Custom icon glyphs: rendered via CSS mask so the solid-black source PNG
   inherits the current text color (works in both light and dark theme, and
   on hover/active states) instead of always showing as flat black. */
.nav-icon { display:inline-block; width:15px; height:15px; flex-shrink:0; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; vertical-align:-3px; }
/* Left nav-bar icons 20% larger (scoped to #sub-nav; the .sb-ico container stays
   24px so the centre — and therefore the collapsed centring — is unchanged). */
#sub-nav .nav-icon { width: 18px; height: 18px; }
#sub-nav .sb-ico { font-size: 17px; }

/* ── Overview "Test-3" (ported from a v0.dev design, wired to live data) ──────
   Prefixed .t3-* classes, scoped under .t3-scope so nothing collides with
   the app's own components. Extra design tokens defined for light + dark. */
.t3-scope { --surface-2:#EAEAEA; --track:#C4C4C4; --t3-shadow:0 1px 2px rgba(26,26,26,.08),0 1px 3px rgba(26,26,26,.06); --radius-sm:8px; --tint-red:rgba(170,43,49,.10); --tint-green:rgba(16,185,129,.12); --tint-blue:rgba(59,130,246,.12); --tint-orange:rgba(245,158,11,.14); font-variant-numeric:tabular-nums; color:var(--text); }
[data-theme="dark"] .t3-scope { --surface-2:#2F2F2F; --track:#3A3A3A; --t3-shadow:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.35); --tint-red:rgba(170,43,49,.20); --tint-green:rgba(16,185,129,.16); --tint-blue:rgba(59,130,246,.16); --tint-orange:rgba(245,158,11,.16); }
.t3-scope *,.t3-scope *::before,.t3-scope *::after{box-sizing:border-box}
.t3-scope .t3-label{font-size:9.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);opacity:.72;margin:0}
.t3-scope .t3-num{font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.t3-scope .t3-sub{font-size:11px;color:var(--text-muted);opacity:.78;font-weight:600}
.t3-scope .t3-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--t3-shadow);padding:16px;min-width:0;margin:0}
.t3-scope .t3-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.t3-scope .t3-card-title{font-size:12.5px;font-weight:900;letter-spacing:.01em;margin:0}
.t3-scope .t3-topbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.t3-scope .t3-brand{display:flex;align-items:center;gap:10px;min-width:0}
.t3-scope .t3-mark{width:30px;height:30px;flex:none;border-radius:7px;background:var(--red);color:#F3F3F3;display:grid;place-items:center;font-weight:900;font-size:13px;letter-spacing:-.03em}
.t3-scope .t3-brandname{font-size:12px;font-weight:900;letter-spacing:.22em;margin:0}
.t3-scope .t3-brandsub{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);opacity:.7;margin:0}
.t3-scope .t3-spacer{flex:1 1 auto}
.t3-scope .t3-projectline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 6px}
.t3-scope .t3-project-name{font-size:22px;font-weight:900;letter-spacing:-.025em;margin:0}
.t3-scope .t3-project-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none}
.t3-scope .t3-project-meta li{font-size:11px;font-weight:600;color:var(--text-muted);opacity:.85}
.t3-scope .t3-project-meta b{font-weight:800;color:var(--text)}
.t3-scope .t3-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:9.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;border:1px solid transparent;white-space:nowrap}
.t3-scope .t3-pill .t3-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.t3-scope .t3-pill--ok{color:var(--green);background:var(--tint-green);border-color:var(--green)}
.t3-scope .t3-pill--risk{color:var(--orange);background:var(--tint-orange);border-color:var(--orange)}
.t3-scope .t3-pill--muted{color:var(--text-muted);background:var(--surface-2);border-color:var(--border)}
.t3-scope .t3-handover{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--t3-shadow);padding:8px 14px}
.t3-scope .t3-handover .t3-big{font-size:24px;font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--red)}
.t3-scope .t3-kpis{display:grid;gap:12px;margin-bottom:12px;grid-template-columns:repeat(6,minmax(0,1fr))}
.t3-scope .t3-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--t3-shadow);padding:13px 14px 12px;min-width:0;display:flex;flex-direction:column;gap:8px}
.t3-scope .t3-kpi .t3-val{font-size:26px;font-weight:900;letter-spacing:-.035em;line-height:1}
.t3-scope .t3-kpi .t3-val small{font-size:13px;font-weight:800;letter-spacing:-.01em;opacity:.55}
.t3-scope .t3-kpi-foot{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--text-muted);opacity:.85}
.t3-scope .t3-tag{font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:5px;white-space:nowrap}
.t3-scope .t3-tag--red{color:var(--red);background:var(--tint-red)}
.t3-scope .t3-tag--green{color:var(--green);background:var(--tint-green)}
.t3-scope .t3-tag--orange{color:var(--orange);background:var(--tint-orange)}
.t3-scope .t3-tag--blue{color:var(--blue);background:var(--tint-blue)}
.t3-scope .t3-meter{height:4px;border-radius:999px;background:var(--track);overflow:hidden}
.t3-scope .t3-meter>span{display:block;height:100%;border-radius:999px}
.t3-scope .t3-grid{display:grid;gap:12px;margin-bottom:12px}
.t3-scope .t3-grid--3{grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,340px)}
.t3-scope .t3-grid--2{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.t3-scope .t3-grid--head{grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-bottom:16px}
@media (max-width:1180px){.t3-scope .t3-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.t3-scope .t3-grid--3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:900px){.t3-scope .t3-grid--2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.t3-scope .t3-grid--3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.t3-scope .t3-grid--head{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.t3-scope .t3-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.t3-scope .t3-donut-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.t3-scope .t3-donut{position:relative;width:172px;height:172px;flex:none;border-radius:50%}
.t3-scope .t3-donut::after{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.t3-scope .t3-donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:1}
.t3-scope .t3-donut-center .t3-n{font-size:30px;font-weight:900;letter-spacing:-.04em;line-height:1}
.t3-scope .t3-donut-center .t3-l{font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);opacity:.75;margin-top:4px}
.t3-scope .t3-legend{width:100%;display:flex;flex-direction:column;gap:2px}
.t3-scope .t3-legend-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.t3-scope .t3-legend-row:last-child{border-bottom:0}
.t3-scope .t3-swatch{width:9px;height:9px;border-radius:3px;flex:none}
.t3-scope .t3-legend-name{font-size:11.5px;font-weight:700}
.t3-scope .t3-legend-n{font-size:12.5px;font-weight:900;letter-spacing:-.02em}
.t3-scope .t3-legend-p{font-size:10.5px;font-weight:800;color:var(--text-muted);opacity:.8;min-width:34px;text-align:right}
.t3-scope .t3-phases{display:flex;flex-direction:column;gap:12px}
.t3-scope .t3-phase-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px}
.t3-scope .t3-phase-name{font-size:11.5px;font-weight:800;letter-spacing:-.005em}
.t3-scope .t3-phase-right{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.t3-scope .t3-phase-count{font-size:10.5px;font-weight:700;color:var(--text-muted);opacity:.8}
.t3-scope .t3-phase-pct{font-size:11.5px;font-weight:900;letter-spacing:-.02em;min-width:36px;text-align:right}
.t3-scope .t3-bar{height:9px;border-radius:999px;background:var(--track);overflow:hidden;position:relative}
.t3-scope .t3-bar>span{display:block;height:100%;border-radius:999px}
.t3-scope .t3-budget-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.t3-scope .t3-budget-num{font-size:26px;font-weight:900;letter-spacing:-.035em;line-height:1}
.t3-scope .t3-budget-num small{font-size:12px;font-weight:800;opacity:.55}
.t3-scope .t3-stack{height:26px;border-radius:var(--radius-sm);overflow:hidden;display:flex;background:var(--track);border:1px solid var(--border)}
.t3-scope .t3-stack>span{display:block;height:100%}
.t3-scope .t3-budget-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px}
.t3-scope .t3-bl{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}
.t3-scope .t3-bl b{font-weight:900}
.t3-scope .t3-split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.t3-scope .t3-split .t3-v{font-size:14px;font-weight:900;letter-spacing:-.025em;margin-top:5px}
.t3-scope .t3-chart-scroll{overflow-x:auto;overflow-y:hidden;max-width:100%}
.t3-scope .t3-chart-inner{min-width:560px}
.t3-scope .t3-chart svg{display:block;width:100%;height:auto}
.t3-scope .t3-axis{display:flex;justify-content:space-between;gap:4px;margin-top:6px;min-width:560px}
.t3-scope .t3-axis span{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);opacity:.7;flex:1 1 0;text-align:center}
.t3-scope .t3-feed{display:flex;flex-direction:column}
.t3-scope .t3-feed-item{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.t3-scope .t3-feed-item:first-child{padding-top:0}
.t3-scope .t3-feed-item:last-child{border-bottom:0;padding-bottom:0}
.t3-scope .t3-ico{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;font-size:13px}
.t3-scope .t3-ico--green{background:var(--tint-green);color:var(--green)}
.t3-scope .t3-ico--blue{background:var(--tint-blue);color:var(--blue)}
.t3-scope .t3-ico--red{background:var(--tint-red);color:var(--red)}
.t3-scope .t3-ico--orange{background:var(--tint-orange);color:var(--orange)}
.t3-scope .t3-feed-text{font-size:11.5px;font-weight:600;color:var(--text);margin:0}
.t3-scope .t3-feed-text b{font-weight:900}
.t3-scope .t3-feed-time{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);opacity:.7;margin:3px 0 0}

/* Project Items card (Test-4): warehouse→project inventory, two scrolling halves. */
.t3-scope .t3-pi-actions{display:flex;gap:6px}
.t3-scope .t3-pi-btn{width:26px;height:26px;border:none;border-radius:7px;color:#F3F3F3;font-size:17px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .15s}
.t3-scope .t3-pi-btn:hover{filter:brightness(1.08)}
.t3-scope .t3-pi-add{background:var(--green)}
.t3-scope .t3-pi-rem{background:var(--red)}
.t3-scope .t3-pi-body{display:flex;flex-direction:row}
.t3-scope .t3-pi-half{flex:1;min-width:0;overflow-y:auto}
.t3-scope .t3-pi-div{width:1px;background:var(--border);margin:0 14px;flex:none;align-self:stretch}
.t3-scope .t3-pi-label{font-size:9px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);opacity:.72;margin:0 0 6px}
.t3-scope .t3-pi-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.t3-scope .t3-pi-row:last-child{border-bottom:0}
.t3-scope .t3-pi-name{font-size:11.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t3-scope .t3-pi-qty{font-size:12.5px;font-weight:900;color:var(--green);flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.t3-scope .t3-pi-empty{font-size:11px;color:var(--text-muted);font-style:italic;padding:8px 0}

/* Test-4 only: bump every font +20% (×1.2) to counter the zoom:0.8 shrink on text.
   Scoped by #pdash-view-test4 so Test-3 keeps the original scale, and the header
   cluster (in the toolbar, unzoomed) is untouched. Font-size only — no box metrics,
   so card/grid dimensions stay put. */
#pdash-view-test4 .t3-label{font-size:11.4px}
#pdash-view-test4 .t3-sub{font-size:13.2px}
#pdash-view-test4 .t3-card-title{font-size:15px}
#pdash-view-test4 .t3-pill{font-size:11.4px}
#pdash-view-test4 .t3-kpi .t3-val{font-size:31.2px}
#pdash-view-test4 .t3-kpi .t3-val small{font-size:15.6px}
#pdash-view-test4 .t3-kpi-foot{font-size:12.6px}
#pdash-view-test4 .t3-tag{font-size:10.8px}
#pdash-view-test4 .t3-donut-center .t3-n{font-size:36px}
#pdash-view-test4 .t3-donut-center .t3-l{font-size:10.8px}
#pdash-view-test4 .t3-legend-name{font-size:13.8px}
#pdash-view-test4 .t3-legend-n{font-size:15px}
#pdash-view-test4 .t3-legend-p{font-size:12.6px}
#pdash-view-test4 .t3-budget-num{font-size:31.2px}
#pdash-view-test4 .t3-budget-num small{font-size:14.4px}
#pdash-view-test4 .t3-bl{font-size:13.2px}
#pdash-view-test4 .t3-axis span{font-size:10.8px}
#pdash-view-test4 .t3-ico{font-size:15.6px}
#pdash-view-test4 .t3-feed-text{font-size:13.8px}
#pdash-view-test4 .t3-feed-time{font-size:11.4px}
/* Inline-styled bits (Tasks table, status badges, View-Task button, donut %): the
   font-size lives in a style="" attribute, so !important is required to win. */
#pdash-view-test4 .t3-card table{font-size:14.4px!important}
#pdash-view-test4 .t3-card table th{font-size:10.8px!important}
#pdash-view-test4 .status-badge{font-size:10.8px!important}
#pdash-view-test4 .t3-card .btn{font-size:12px!important}
#pdash-view-test4 .t3-donut-center .t3-n span{font-size:19.2px!important}

/* Test-4 layout nudges */
/* Lift the chart body (gridlines, curve, month axis) up 25px; the card-head
   legend (Planned target / Actual) stays where it is. */
#pdash-view-test4 .t3-chart .t3-chart-scroll{margin-top:-25px}
/* First KPI (Overall Complete) matches the Task Status column width (300px); last
   KPI (Phases Done) matches the Recent Activity column width (340px). */
#pdash-view-test4 .t3-kpis{grid-template-columns:minmax(0,300px) repeat(4,minmax(0,1fr)) minmax(0,340px)}
/* Tighten vertical rhythm so the whole view fits one screen (no page scrollbar). */
#pdash-view-test4 .t3-kpis{margin-bottom:10px}
#pdash-view-test4 .t3-grid{margin-bottom:10px}
#pdash-view-test4 .t3-kpi{padding-top:10px;padding-bottom:10px}
/* Project Items card (replaces Budget): +20% font scale like the rest of Test-4. */
#pdash-view-test4 .t3-pi-label{font-size:10.8px}
#pdash-view-test4 .t3-pi-name{font-size:13.8px}
#pdash-view-test4 .t3-pi-qty{font-size:15px}
#pdash-view-test4 .t3-pi-empty{font-size:13.2px}
#pdash-view-test4 .t3-pi-btn{font-size:20.4px}

/* Global nav pill group, pinned above the section-specific sidebar nav */
#top-nav-group { display: flex; flex-direction: column; gap: 2px; background: var(--bg); border-radius: 10px; padding: 0; margin-bottom: 8px; flex-shrink: 0; }
#top-nav-group .sidebar-btn { font-size: 11px; font-weight: 700; padding: 8px 10px; }
#top-nav-group .sidebar-btn:hover { background: var(--surface); }
#top-nav-group .sidebar-btn.btn-active { background: var(--surface) !important; color: var(--text) !important; border-left: none; border-radius: 7px; box-shadow: var(--shadow-sm); }

/* Per-view action toolbar — pill/segmented group, stays at the top of the view content. */
.view-toolbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--bg); border-radius: 10px; padding: 6px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.view-toolbar .btn { height: 34px; min-width: 130px; padding: 0 14px; font-size: 10px; background: var(--surface); border: none; }
.view-toolbar .btn:hover { background: var(--border); transform: none; }
.view-toolbar .btn.btn-active { background: var(--text) !important; color: var(--bg) !important; font-weight: 700; }

main { flex: 1; padding: 2rem; overflow-y: auto; position: relative; scrollbar-gutter: stable; }
.card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); margin-bottom: 24px; padding: 2rem; color: var(--text); position: relative; }
/* Uniform KPI-tile height across the app (Crew & Safety Log's tile height, 96px) —
   forces the tile to that height and vertically centres its contents. */
.kpi-96 { min-height: 96px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
/* Hide the up/down spinners on number inputs that opt in via .no-spin */
.no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.no-spin { -moz-appearance: textfield; appearance: textfield; }

h1 { font-weight: 900; font-size: 2.5rem; letter-spacing: -1.5px; margin-bottom: 1rem; }

/* The picker that sits beside a view heading — the phase in Task Manager and
   Blueprints & Docs, the offer in Offers, the invoice in Invoices. One notch
   below the h1 next to it and unbolded, so it reads as a control rather than a
   second title. Defined once here: four views use it and they must not drift.
   The 2.25rem is 10% down from the h1's 2.5rem. */
.view-picker-label {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 400;
    letter-spacing: -1.5px;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 2px 14px;
}
h2 { font-weight: 800; font-size: 1.1rem; margin-bottom: 1.5rem; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
h2::before { content: ''; display: block; width: 5px; height: 18px; background: var(--red); border-radius: 4px; }

input, select, textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; outline: none; background: var(--bg); font-size: 13px; color: var(--text); font-weight: 500; }

.calc-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 13px; }
.calc-table th { text-align: left; padding: 12px; border-bottom: 2px solid var(--border); color: var(--text-muted); font-size: 10px; text-transform: uppercase; font-weight: 800; }
.calc-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.num { text-align: right; font-weight: 700; }
.calc-table th.num { text-align: right; }
.calc-table input { background: transparent; border: none; width: 100%; color: var(--text); font-weight: 600; outline: none; padding: 8px; }
.calc-table input:focus { background: var(--surface); border-color: var(--border-focus); box-shadow: var(--shadow-sm); border-radius: 4px; }
.table-header { font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 10px; text-transform: uppercase; display: flex; justify-content: space-between; background: var(--bg); padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border); }

.empty-state { padding: 2rem; text-align: center; color: var(--text-muted); font-size: 13px; font-weight: 500; border: 1px dashed var(--border); border-radius: 8px; margin-bottom: 1rem; }

#markup-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 9999; display: none; flex-direction: column; }
/* Doc | Plan switch — which mode the editor is in, and the file's own flag.
   Left position is Doc, right is Plan, matching how it reads. */
#mk-kind-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
#mk-kind-switch button {
    border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
    padding: 9px 14px; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.5px; transition: 0.15s;
}
#mk-kind-switch button:hover { color: var(--text); }
#mk-kind-switch button.on { background: var(--blue); color: #fff; }

/* ── Drawing rail (markup editor) ────────────────────────────────────────────
   A translucent column of every drawing on the project, grouped by phase, so a
   sheet is one click away without leaving the editor. Collapsed it is just its
   arrow; expanded it overlays the workspace rather than resizing the canvas,
   which would force fabric to recalculate its offset on every toggle. */
#drawing-rail {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 210;
    display: flex; align-items: stretch;
    transition: width 0.18s ease;
    width: 208px; pointer-events: none;
}
#drawing-rail.collapsed { width: 30px; }
/* The arrow sits halfway down the left edge, open or shut. */
#rail-toggle {
    pointer-events: auto; flex: 0 0 auto; align-self: center; margin: 0 0 0 4px;
    width: 22px; height: 44px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border); background: var(--glass); color: var(--text-muted);
    backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm); transition: 0.15s;
}
#rail-toggle:hover { color: var(--text); border-color: var(--text); }
#drawing-rail:not(.collapsed) #rail-toggle svg { transform: scaleX(-1); }
#rail-body {
    pointer-events: auto; flex: 1 1 auto; min-width: 0; align-self: stretch;
    margin: 10px 0 10px 6px; padding: 8px; overflow-y: auto; overflow-x: hidden;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--glass);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    backdrop-filter: blur(14px); box-shadow: var(--shadow-lg);
    opacity: 1; transition: opacity 0.15s;
}
#drawing-rail.collapsed #rail-body { display: none; }
.rail-phase {
    font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--text-muted); padding: 8px 4px 5px; position: sticky; top: -8px;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px);
}
.rail-item {
    display: block; width: 100%; text-align: left; cursor: pointer; margin-bottom: 6px;
    padding: 5px; border-radius: 8px; border: 2px solid transparent;
    background: var(--glass);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    transition: 0.15s;
}
.rail-item:hover { background: var(--surface); }
.rail-item img { display: block; width: 100%; height: 62px; object-fit: cover; border-radius: 5px; background: var(--bg); }
.rail-item .rail-name {
    display: block; font-size: 9px; font-weight: 700; margin-top: 4px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The sheet currently open in the editor. */
.rail-item.rail-current { border-color: var(--blue); background: var(--surface); }
.rail-item.rail-current img { opacity: 1; }
.rail-empty { font-size: 10px; color: var(--text-muted); padding: 10px 4px; line-height: 1.5; }

#workspace { flex: 1; width: 100%; position: relative; overflow: hidden; background: #e2e8f0; }
.toolbar { background: var(--glass); backdrop-filter: blur(20px) saturate(140%); padding: 8px 10px; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; align-items: center; position: relative; z-index: 200; box-shadow: var(--shadow-md); }
/* Each tool is an icon with its name underneath, the way the drawing tools in
   Procore read. The bar stays horizontal and in place; only the buttons restack. */
.t-btn { min-width: 52px; padding: 6px 6px 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; transition: 0.2s; box-shadow: var(--shadow-sm); }
.t-lbl { font-size: 8.5px; font-weight: 800; letter-spacing: 0.2px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.t-btn:hover { border-color: var(--text); color: var(--text); transform: translateY(-1px); }
.t-btn.active { background: var(--red); color: #fff; border-color: var(--red); }
.t-divider { width: 1px; height: 34px; background: var(--border); margin: 0 5px; }

#loupe { position: absolute; width: 160px; height: 160px; border: 3px solid var(--red); border-radius: 50%; pointer-events: none; display: none; overflow: hidden; background: #fff; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
#loupe-canvas { background: white; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.visible { display: flex; }
.modal-card { background: var(--surface); padding: 32px; border-radius: 20px; width: 650px; max-width: 100%; border: 1px solid var(--border); max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.pac-container { z-index: 200001 !important; }

/* Record Income/Expense — "Link to Task" groups its options under the phase they
   belong to. Browsers already italicise an <optgroup> label, but say it explicitly
   so a phase heading can never be read as a task. */
.tx-link-task optgroup { font-style: italic; font-weight: 800; color: var(--text-muted); }
.tx-link-task option   { font-style: normal; font-weight: 500; color: var(--text); }

.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.status-open  { background: rgba(148,163,184,0.14); color: var(--text); border: 1px solid var(--border); }
.status-prog  { background: rgba(59,130,246,0.12); color: var(--blue); }
.status-done  { background: rgba(16,185,129,0.1); color: var(--green); }
.status-risk  { background: rgba(234,179,8,0.16); color: #ca8a04; }
.status-issue { background: rgba(170,43,49,0.12); color: var(--red); }
.plan-badge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.8); color:#fff; font-size:9px; font-weight:900; padding:4px 8px; border-radius:4px; text-transform:uppercase; z-index:10; backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.2); }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }

#auth-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: var(--bg); align-items: center; justify-content: center; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 40px; width: 420px; max-width: calc(100vw - 40px); box-shadow: var(--shadow-lg); }
.auth-logo { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; margin-bottom: 8px; color: var(--text); text-align: center; display: flex; align-items: center; justify-content: center; }
.auth-tabs { display: flex; gap: 4px; background: var(--bg); border-radius: 10px; padding: 4px; margin-bottom: 24px; }
.auth-tab { flex: 1; padding: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 7px; transition: all 0.2s; }
.auth-tab-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
#auth-error { font-size: 12px; font-weight: 600; color: var(--red); margin-top: 12px; text-align: center; min-height: 18px; }
.role-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 10px; background: rgba(225,29,72,0.1); color: var(--red); border: 1px solid rgba(225,29,72,0.2); }

/* Sortable table headers */
.th-sort { cursor:pointer; user-select:none; transition:color 0.12s; }
.th-sort:hover { color:var(--text) !important; }
.sort-ind { opacity:0.3; margin-left:3px; font-size:9px; font-style:normal; transition:opacity 0.12s; }
.th-sort-active { color:var(--text) !important; }
.th-sort-active .sort-ind { opacity:1; }

/* Accounts Management table */
.acc-th { text-align:left; padding:12px 16px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-muted); white-space:nowrap; }
.acc-td { padding:14px 16px; font-size:13px; border-bottom:1px solid var(--border); vertical-align:middle; }
.acc-td-name { cursor:pointer; }
.acc-td-muted { color:var(--text-muted); font-size:12px; }
.acc-row { transition:background 0.15s; cursor:pointer; }
.acc-row:hover { background:var(--bg); }
.acc-row-expanded { background:var(--bg); }
.acc-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.5px; }
.acc-badge-green { background:rgba(16,185,129,0.1); color:var(--green); border:1px solid rgba(16,185,129,0.2); }
.acc-badge-red { background:rgba(225,29,72,0.1); color:var(--red); border:1px solid rgba(225,29,72,0.2); }
.acc-badge-neutral { background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }
/* Waiting on the other person — not settled, but not your move either. */
.acc-badge-blue { background:rgba(59,130,246,0.1); color:var(--blue); border:1px solid rgba(59,130,246,0.22); }
.keys-th { text-align:left; padding:8px 12px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); border-bottom:1px solid var(--border); }

/* ── Printed report layout ───────────────────────────────────────────────────
   Deliberately NOT inside @media print: _repPrint measures the page bands and
   every block off-screen before it paginates, and a rule that only exists in
   print media would be invisible to that measurement. #print-output is
   display:none on screen, so these never affect the app. */
/* The report is cut into explicit A4 pages by _repPrint — Chrome supports neither
   counter(page) nor @page margin boxes, so a running "1/3" is only possible when
   the pages are ours. Each .rep-page is exactly one sheet: head band, content
   band, foot band, with the margins as padding. */
#print-output .rep-page {
    width: 210mm; height: 297mm; padding: 10mm 12mm; box-sizing: border-box;
    display: flex; flex-direction: column; overflow: hidden;
    page-break-after: always; break-after: page;
}
#print-output .rep-page:last-child { page-break-after: auto; break-after: auto; }
#print-output .rep-page-body { flex: 1 1 auto; min-height: 0; }
#print-output .rep-page-head { flex: 0 0 auto; }
#print-output .rep-page-foot { flex: 0 0 auto; }
/* The letterhead prints at the PNG's own pixel size — no height, width or max-*
   here, so resizing logo_report_top_left.png is what changes it on the page. */
#print-output .rep-runhead     { padding-bottom: 5mm; }
#print-output .rep-runhead img { display: block; }
/* Footer: the caption sits centred on the sheet, the page number hard right. */
/* The gap above the footer lives on the band, not as a margin on the line: a
   child's margin falls outside the band's own box and was not counted when the
   page height was measured, so every first page overflowed by ~25px. */
#print-output .rep-page-foot { padding-top: 5mm; }
#print-output .rep-runfoot {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    border-top: 1px solid #ddd; padding-top: 4px;
    font-size: 9px; letter-spacing: 0.3px; color: #aaa;
}
#print-output .rep-runfoot > span { flex: 1 1 0; }
#print-output .rep-foot-mid { text-align: center; }
#print-output .rep-foot-pg  { text-align: right; white-space: nowrap; }
/* A drawing prints as one image filling the sheet, letterhead and footer intact. */
#print-output .rep-page-image .rep-page-body { display: flex; align-items: center; justify-content: center; }
#print-output img.rep-plan { max-width: 100%; max-height: 100%; object-fit: contain; }
#print-output .rep-banner   { text-align: center; border-bottom: 4px solid #000; padding-bottom: 18px; margin-bottom: 10px; }

@media print {
    /* Zero page margins leave the browser no room for its own header and footer, so
       the "date · page title" line and the "127.0.0.1:5500 · 1/1" line are dropped.
       The report supplies its own margins — see .rep-page below. */
    @page { margin: 0; }

    /* Only the report prints. Hidden by display, not visibility, so #print-output can
       stay in normal flow — as an absolutely positioned box it did not fragment
       across pages and every report longer than one sheet printed truncated.
       app._repOut() guarantees it is a direct child of body before any print. */
    body > *:not(#print-output) { display: none !important; }
    body { margin: 0; }
    #print-output { position: static; width: auto; margin: 0; padding: 0; display: block !important; box-sizing: border-box; }
    /* Reports are ink on paper, never the app's theme — in dark mode var(--text) is
       near-white and the whole report used to print as unreadable pale grey. */
    #print-output { color: #111 !important; background: #fff !important; }
    #print-output h1, #print-output h2, #print-output h3, #print-output h4, #print-output p, #print-output th, #print-output strong { color: #111; }

    header, aside, #markup-overlay, .modal-overlay, #sub-nav { display: none !important; }
    .calc-table { border: 1px solid #000; border-collapse: collapse; width: 100%; }
    .calc-table th, .calc-table td { border: 1px solid #ccc; padding: 8px; text-align: left; }
    .calc-table th { background-color: #f9f9f9 !important; -webkit-print-color-adjust: exact; }
    .num { text-align: right; }
}

@media (max-width: 800px) {
    #mobile-menu-btn { display: block !important; }
    #sub-nav {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--shadow-lg);
        z-index: 9999 !important;
        overflow: visible;
    }
    #sub-nav.mobile-open {
        transform: translateX(0);
    }
    /* On mobile the drawer itself slides in/out — #sub-nav-inner just fills it,
       no separate hover-expand behavior (touch has no hover). */
    #sub-nav-inner {
        position: static !important;
        width: 100% !important;
        height: 100%;
        overflow-y: auto;
        transition: none;
    }
    #sub-nav-pj-name, .sidebar-label { opacity: 1 !important; }
    #mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 9998;
        backdrop-filter: blur(3px);
    }
    #mobile-overlay.active {
        display: block;
    }
    main { padding: 1rem; }
    h1 { font-size: 1.8rem; }
    div[style*="grid-template-columns"],
    #pdash-stats {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .card { padding: 1rem; overflow-x: auto; }
    .calc-table { min-width: 650px; }
    .toolbar { justify-content: center; }
}

.phase-drop-target { outline: 2px dashed var(--accent, #6366f1) !important; outline-offset: 2px; background: rgba(99,102,241,0.06) !important; }
.sp-drop-target { outline: 2px dashed var(--accent, #6366f1) !important; outline-offset: 2px; background: rgba(99,102,241,0.06) !important; }