/* =========================================================
   ZEROLO V2 — shared Crexto-warm theme
   Chrome (bg, sidebar, topbar) + glass cards + tokens + motion.
   Link AFTER zerolo-theme.css on every V2 page.
   Page-specific layout (mosaic/hero/kpi) stays inline per page.
   ========================================================= */

/* ---- tokens ---- */
:root{
  --v2-bg:#F6F4EF;
  --v2-card:#FFFFFF;
  --v2-hair:rgba(26,26,26,0.05);
  --v2-ink:#2C2C2A;
  --v2-mute:#63615A;   /* was #6E6C64 — failed AA (4.4-4.5:1) on tinted grounds; see WAG report */
  --v2-teal:#2D8659;
  --v2-teal-d:#1F5E3D;
  --v2-teal-soft:#E3F0E8;
  --v2-ink-blue:#1E3A5F;
  --v2-ink-soft:#E7ECF2;
  --v2-gold:#F7B500;
  --v2-gold-soft:#FBEFD2;
  --v2-tawny:#BA7517;
  --v2-signal:#8B2469;
  --v2-signal-soft:#F6E8F0;
  --v2-shadow:0 1px 2px rgba(26,26,26,.04), 0 8px 24px rgba(26,26,26,.06);
  --v2-shadow-h:0 1px 2px rgba(26,26,26,.05), 0 16px 38px rgba(26,26,26,.12);
}

/* ---- warm gradient field (Crexto) ---- */
body{
  /* warm amber pool (top-right) + cool teal-mint glow (top-left) over a slightly deeper
     cream base — gives the field visible warm↔cool depth without going loud */
  background:
    radial-gradient(1500px 950px at 84% -8%, #FAECCE 0%, rgba(250,236,206,.46) 30%, rgba(250,236,206,0) 66%),
    radial-gradient(1200px 820px at 100% 32%, #F9ECCB 0%, rgba(249,236,203,.30) 40%, rgba(249,236,203,0) 70%),
    radial-gradient(1150px 820px at -2% 4%, #EDF6F1 0%, rgba(237,246,241,.55) 34%, rgba(237,246,241,0) 62%),
    linear-gradient(155deg, #F9F7F2 0%, #F6F3E9 52%, #EDEBDF 100%);
  background-attachment:fixed;
}

/* ---- slim floating sidebar ---- */
.sidebar{ width:228px; top:14px; bottom:14px; left:14px; border-radius:22px; transition:width .22s cubic-bezier(.4,0,.2,1); position:fixed; }
/* sidebar bg image overlay (matches live app) */
.sidebar::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.30; border-radius:22px;
  background:url('sidebar-bg.png') center/cover no-repeat; }
.sidebar > *{ position:relative; z-index:1; }

/* ---- 'Zerolo works with' footer block (matches live) ---- */
.sb-works{ margin:0 16px 12px; }
.sb-works-lbl{ display:block; color:rgba(255,255,255,.5); font-size:12px; font-weight:500; letter-spacing:.08em; margin:0 0 6px 2px; }
.sb-works-row{ display:flex; align-items:stretch; border-radius:12px; background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); }
.sb-works-cell{ flex:1; display:flex; align-items:center; justify-content:center; gap:9px; padding:7px 4px; }
.sb-works-cell img{ width:26px; height:26px; border-radius:7px; object-fit:contain; flex-shrink:0; }
.sb-works-cell p{ line-height:1.1; }
.sb-works-cell .wk-sm{ color:rgba(255,255,255,.5); font-size:12px; }
.sb-works-cell .wk-b{ color:rgba(255,255,255,.8); font-size:12px; font-weight:700; }
.sb-works-div{ width:1px; background:rgba(255,255,255,.2); margin:9px 0; }
.sidebar.collapsed .sb-works{ display:none; }
.main{ margin-left:256px; transition:margin-left .22s cubic-bezier(.4,0,.2,1); }
.sb-logo{ height:60px; }
.sb-item{ font-size:13.5px; padding:9px 12px; }
.sb-section{ font-size:12px; }

/* ============ COLLAPSIBLE SIDEBAR (icon-only) ============ */
.sb-collapse-btn{ margin-left:auto; width:26px; height:26px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.06); cursor:pointer; transition:background .15s, color .15s, transform .2s; }
.sb-collapse-btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
.sb-collapse-btn svg{ width:18px; height:18px; }

.sidebar.collapsed{ width:72px; overflow:visible; }
.sidebar.collapsed .sb-nav{ overflow:visible; padding:16px 12px; }
.main.shifted{ margin-left:100px; }
.sidebar.collapsed .sb-collapse-btn{ width:34px; height:34px; margin:0 auto; }
.sidebar.collapsed .sb-collapse-btn svg{ width:18px; height:18px; }
.sidebar.collapsed .sb-foot > div:not(.sb-foot-avatar){ display:none; }
.sidebar.collapsed .sb-foot{ justify-content:center; padding:14px 0; gap:0; }
.sidebar.collapsed .sb-label,
.sidebar.collapsed .sb-section,
.sidebar.collapsed .sb-chev,
.sidebar.collapsed .sb-badge,
.sidebar.collapsed .sb-foot-name,
.sidebar.collapsed .sb-foot-role{ display:none; }
/* logo: full white wordmark expanded; hidden when collapsed */
.sb-logo-img{ height:26px; width:auto; display:block; }
.sb-logo-icon{ display:none; }
.sidebar.collapsed .sb-logo-full,
.sidebar.collapsed .sb-logo-icon{ display:none !important; }
.sidebar.collapsed .sb-logo{ justify-content:center; padding:0; }
.sidebar.collapsed .sb-item{ position:relative; justify-content:center; padding:11px 0; border-radius:12px; width:44px; margin:0 auto; }
.sidebar.collapsed .sb-item.active{ border-radius:12px; }
.sidebar.collapsed .sb-group{ position:relative; }
.sidebar.collapsed .sb-group .sb-item{ width:44px; margin:0 auto; }
.sidebar.collapsed .sb-item svg:first-child{ margin:0; }
/* dot replaces hidden badge */
.sidebar.collapsed .sb-item:has(.sb-badge)::after,
.sidebar.collapsed .sb-group:has(.sb-badge) .sb-item::after{
  content:''; position:absolute; top:8px; right:14px; width:7px; height:7px; border-radius:50%;
  background:var(--roi-gold); box-shadow:0 0 0 2px var(--carbon); }

/* flyout submenu on hover (collapsed) */
.sb-flyout{ position:absolute; left:calc(100% + 10px); top:0; min-width:172px; background:var(--carbon);
  border:0.5px solid rgba(255,255,255,.1); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5);
  padding:7px; opacity:0; visibility:hidden; transform:translateX(-6px); pointer-events:none;
  transition:opacity .15s, transform .15s, visibility .15s; z-index:120; }
.sb-flyout::before{ content:''; position:absolute; left:-10px; top:0; width:10px; height:100%; }
.sb-flyout-title{ font-size:12px; font-weight:600; color:rgba(255,255,255,.45); padding:5px 10px 7px;
  text-transform:uppercase; letter-spacing:.05em; }
.sb-flyout a{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
  font-size:13px; color:rgba(255,255,255,.75); white-space:nowrap; }
.sb-flyout a:hover{ background:rgba(255,255,255,.1); color:#fff; }
.sb-flyout .sb-badge{ display:inline-flex !important; margin-left:auto; }
.sidebar.collapsed .sb-item:hover > .sb-flyout,
.sidebar.collapsed .sb-group:hover .sb-flyout{ opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; }
.sidebar.collapsed .sb-sub{ display:none !important; }
.sidebar:not(.collapsed) .sb-flyout{ display:none; }

/* ---- transparent warm topbar ---- */
.topbar{ background:transparent; border-bottom:none; height:auto; padding:18px 28px 4px; position:static; }
/* old-theme topbar search -> match the V2 dashboard search pill (white, rounded, shadow) */
.topbar-search{ width:300px !important; max-width:300px; flex:none !important; margin:0 8px 0 0;
  background:#fff !important; border:0.5px solid var(--v2-hair) !important; border-radius:999px !important; padding:10px 16px !important;
  color:var(--v2-mute); font-size:13px; box-shadow:var(--v2-shadow) !important; cursor:text; transition:box-shadow .2s; }
.topbar-search:hover{ box-shadow:var(--v2-shadow-h) !important; }
.topbar-search svg{ width:17px !important; height:17px !important; }
/* push search into the right action cluster (matches dashboard): spacer first, then search + actions */
.topbar-spacer{ order:1; }
.topbar-search{ order:2; }
.addnew-wrap, .btn-add{ order:3; }
.topbar-icon{ order:4; }
.topbar-user{ order:5; }
.v2-content{ padding:22px 28px 36px; max-width:1640px; margin:0 auto; width:100%; }

/* ---- floating top bar (search + actions) ---- */
.v2-bar{ display:flex; align-items:center; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.v2-search{ width:300px; display:flex; align-items:center; gap:9px;
  background:#fff; border:0.5px solid var(--v2-hair); border-radius:999px; padding:10px 16px;
  color:var(--v2-mute); font-size:13px; box-shadow:var(--v2-shadow); cursor:text; transition:width .2s, box-shadow .2s; }
.v2-search:hover{ box-shadow:var(--v2-shadow-h); }
.v2-search svg{ width:17px; height:17px; flex-shrink:0; }
.v2-bar-spacer{ flex:1; }
.v2-pill-btn{ display:flex; align-items:center; gap:7px; background:var(--v2-teal); color:#fff;
  font-size:13px; font-weight:500; padding:10px 18px; border-radius:999px; box-shadow:var(--v2-shadow);
  transition:transform .15s, box-shadow .2s; position:relative; }
.v2-pill-btn:hover{ transform:translateY(-1px); box-shadow:var(--v2-shadow-h); }
.v2-pill-btn svg{ width:16px; height:16px; }
/* old-theme top 'Add new' button -> thrive/teal across all V2 pages */
.btn-add{ background:var(--v2-teal) !important; color:#fff !important; }
.btn-add:hover{ background:var(--v2-teal-d) !important; }
.v2-add-chev{ width:13px !important; height:13px !important; opacity:.8; transition:transform .2s; }
.v2-add-wrap{ position:relative; }
.v2-add-wrap.open .v2-add-chev{ transform:rotate(180deg); }
.v2-add-menu{ position:absolute; right:0; top:calc(100% + 10px); width:266px; background:#fff;
  border:0.5px solid var(--v2-hair); border-radius:16px; box-shadow:0 12px 40px rgba(26,26,26,.16);
  padding:8px; z-index:80; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
  transform-origin:top right; transition:opacity .16s, transform .16s, visibility .16s; }
.v2-add-wrap.open .v2-add-menu{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.v2-add-menu a{ display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:11px; transition:background .12s; }
.v2-add-menu a:hover{ background:#F6F4EE; }
.v2-add-menu a b{ font-size:13px; font-weight:600; color:var(--v2-ink); display:block; }
.v2-add-menu a small{ font-size:12px; color:var(--v2-mute); }
.v2-add-ico{ width:34px; height:34px; border-radius:10px; background:var(--v2-teal-soft); display:flex;
  align-items:center; justify-content:center; flex-shrink:0; }
.v2-add-ico svg{ width:16px; height:16px; color:var(--v2-teal-d); }
.v2-add-div{ height:1px; background:var(--v2-hair); margin:6px 6px; }
.v2-ico-btn{ width:42px; height:42px; border-radius:50%; background:#fff; border:0.5px solid var(--v2-hair);
  display:flex; align-items:center; justify-content:center; color:#5F5E5A; box-shadow:var(--v2-shadow);
  position:relative; transition:transform .15s; }
.v2-ico-btn:hover{ transform:translateY(-1px); }
.v2-ico-btn svg{ width:19px; height:19px; }
.v2-ico-dot{ position:absolute; top:8px; right:9px; min-width:8px; height:8px; border-radius:999px; background:var(--v2-signal); }
.v2-userchip{ display:flex; align-items:center; gap:9px; background:transparent; border:none;
  border-radius:999px; padding:5px 8px 5px 5px; cursor:pointer; transition:opacity .15s; }
.v2-userchip:hover{ opacity:.75; }
.v2-userchip-txt b{ display:block; font-size:12.5px; font-weight:600; color:var(--v2-ink); line-height:1.1; }
.v2-userchip-txt small{ font-size:12px; color:var(--v2-mute); }
.v2-avatar{ width:38px; height:38px; border-radius:50%; background:var(--v2-ink-blue); color:#fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; flex-shrink:0; }
.v2-avatar img{ width:100%; height:100%; object-fit:cover; }

/* ---- welcome + inline stats ---- */
.v2-welcome-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.v2-welcome{ font-size:30px; font-weight:600; color:var(--v2-ink); letter-spacing:-.02em; margin-bottom:4px; }
.v2-welcome .wv{ color:var(--v2-teal); }
.v2-sub{ font-size:13.5px; color:var(--v2-mute); }
.v2-sub b{ color:var(--v2-ink); font-weight:600; }
.v2-topstats{ display:flex; gap:28px; }
.v2-topstat{ cursor:pointer; text-align:center; transition:opacity .15s; }
.v2-topstat:hover{ opacity:.7; }
.v2-topstat b{ display:block; font-size:26px; font-weight:700; color:var(--v2-ink); line-height:1; letter-spacing:-.02em; }
.v2-topstat b small{ font-size:13px; font-weight:500; color:var(--v2-mute); }
.v2-topstat span{ font-size:12px; color:var(--v2-mute); }
.v2-topstat.warn b{ color:var(--v2-signal); }

/* ============ GLASS CARDS (shared + per-page surface classes) ============ */
/* Card surface standard: white 82% + blur — one consistent translucency
   across every UX-v2 card (Nadine, 2026-07-06). FM-specific card classes
   (.sv-card / .z-card / .si-brief …) are included so no card renders solid. */
.card, .v2-card, .v2-panel, .kpi,
.cstat, .cust-card, .gcard,
.score-card, .wow-box, .map-card, .skpi,
.fcard, .pcard, .sum-card{
  background:rgba(255,255,255,0.82) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border:0.5px solid rgba(255,255,255,0.6) !important;
  border-radius:20px; box-shadow:var(--v2-shadow);
}
/* FM-specific card surfaces — same 82% translucency, but keep each card's
   own border/radius (they carry state colours & tighter radii). Background
   only, no !important border so severity outlines survive. */
.sv-card, .z-card, .z-rail-sec, .si-brief, .pv-item, .pv-stat,
.wow-panel, .wow-list{
  background:rgba(255,255,255,0.82) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
}
.v2-card{ padding:18px; transition:transform .18s, box-shadow .2s; }
.v2-card.lift:hover{ transform:translateY(-3px); box-shadow:var(--v2-shadow-h); }

/* ---- generic card head/title/link ---- */
.v2-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.v2-title{ font-size:13px; font-weight:600; color:var(--v2-ink); }
.v2-link{ width:26px; height:26px; border-radius:50%; background:rgba(26,26,26,.04); display:flex;
  align-items:center; justify-content:center; cursor:pointer; transition:background .15s, transform .15s; }
.v2-link:hover{ background:var(--v2-teal-soft); transform:rotate(45deg); }
.v2-link svg{ width:18px; height:18px; color:#5F5E5A; }

/* ---- tag color helpers ---- */
.t-teal{ background:var(--v2-teal-soft); color:var(--v2-teal-d); }
.t-ink{ background:var(--v2-ink-soft); color:var(--v2-ink-blue); }
.t-gold{ background:var(--v2-gold-soft); color:var(--v2-tawny); }
.t-signal{ background:var(--v2-signal-soft); color:var(--v2-signal); }

/* ============ ENTRANCE ANIMATION ============ */
.v2a{ opacity:0; animation:v2rise .55s cubic-bezier(.2,.7,.3,1) forwards; animation-delay:var(--d,0s); }
@keyframes v2rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }

/* ============ RESPONSIVE (sidebar collapse) ============ */
@media (max-width:1024px){
  .sidebar{ display:none; }
  .main{ margin-left:0; }
  .v2-content{ padding:6px 18px 32px; }
  .topbar{ padding:16px 18px 4px; }
}
@media (max-width:760px){
  .v2-userchip-txt{ display:none; } .v2-userchip{ padding:5px; }
}

@media (prefers-reduced-motion:reduce){
  .v2a{ animation:none !important; opacity:1 !important; }
  .sidebar, .main{ transition:none !important; }
}

/* ============ FIXED-VIEWPORT SHELL (Final Polish Spec §02) ============
   Opt-in: add .v2-fixed to .main. The page itself never scrolls — the
   header/context band stays put and each column below scrolls on its own.
   .main is already flex-column and .content already flex:1, so this only
   has to cap the height and hand the overflow down to the columns. */
.main.v2-fixed{ height:100vh; min-height:0; overflow:hidden; }
.main.v2-fixed .topbar{ flex-shrink:0; }
.main.v2-fixed .content{ min-height:0; display:flex; flex-direction:column; overflow:hidden; }

/* the band that stays visible: title, breadcrumb, merged banners */
.v2-fixed-head{ flex-shrink:0; }

/* the region below the fixed band that holds the scrolling columns */
.v2-fixed-body{ flex:1; min-height:0; }

/* a column that scrolls independently of its sibling */
.v2-scroll-col{ height:100%; min-height:0; overflow-y:auto; overscroll-behavior:contain; }

/* thin, low-contrast track · no arrow buttons · scoped to its own column */
.v2-scroll-col{ scrollbar-width:thin; scrollbar-color:rgba(26,26,26,.18) transparent; }
.v2-scroll-col::-webkit-scrollbar{ width:8px; }
.v2-scroll-col::-webkit-scrollbar-track{ background:transparent; }
.v2-scroll-col::-webkit-scrollbar-thumb{ background:rgba(26,26,26,.16); border-radius:999px;
  border:2px solid transparent; background-clip:content-box; }
.v2-scroll-col::-webkit-scrollbar-thumb:hover{ background:rgba(26,26,26,.28); background-clip:content-box; }
.v2-scroll-col::-webkit-scrollbar-button{ display:none; width:0; height:0; }

/* narrow viewports: a side-by-side scroll-lock makes no sense — fall back to page scroll */
@media (max-width:1080px){
  .main.v2-fixed{ height:auto; min-height:100vh; overflow:visible; }
  .main.v2-fixed .content{ overflow:visible; display:block; }
  .v2-fixed-body{ min-height:0; }
  .v2-scroll-col{ height:auto; overflow-y:visible; }
}


/* == TASK5 MOBILE TYPE BUMP == */
/* Mobile type floor-raise (Nadine). MOBILE ONLY — nothing above 760px changes.
   Same size-band remap as the per-screen blocks, applied to the SHARED tokens so the
   screens that get most of their type from here move in lockstep with the rest.
   11/11.5→12.5 · 12/12.5→13.5 · 13/13.5→14.5 · 14/14.5→15.5 · 15/16→17. >=18px untouched. */
@media (max-width:760px){
  .sb-works-lbl{ font-size:13.5px; }
  .sb-works-cell .wk-sm{ font-size:13.5px; }
  .sb-works-cell .wk-b{ font-size:13.5px; }
  .sb-item{ font-size:14.5px; }
  .sb-section{ font-size:13.5px; }
  .sb-flyout-title{ font-size:13.5px; }
  .sb-flyout a{ font-size:14.5px; }
  .v2-search{ font-size:14.5px; }
  .v2-pill-btn{ font-size:14.5px; }
  .v2-add-menu a b{ font-size:14.5px; }
  .v2-add-menu a small{ font-size:13.5px; }
  .v2-userchip-txt b{ font-size:13.5px; }
  .v2-userchip-txt small{ font-size:13.5px; }
  .v2-avatar{ font-size:14.5px; }
  .v2-sub{ font-size:14.5px; }
  .v2-topstat b small{ font-size:14.5px; }
  .v2-topstat span{ font-size:13.5px; }
  .v2-title{ font-size:14.5px; }
}


/* == TASK5 RESIDUE SHARED == */
/* Residue: classes the per-file selector rewrite missed because their font-size is
   declared in a grouped or descendant rule. Listed explicitly rather than with a blunt
   global override, so the cascade stays predictable. MOBILE ONLY. */
@media (max-width:760px){
  .badge,.v2-badge,.lbl,.chip,.tagchip,.bt,.seen,.st,.sb-foot-role,
  .kpi-lbl,.kpi-meta,.u-meta,.ll-cell,.bar-lbl,.gmeta-v,.btn-add,
  td,th{ font-size:13.5px; }
  .badge,.v2-badge,.lbl,.bt,.st{ font-size:12.5px; }  /* badges stay the smallest step */
}


/* ============================================================
   PROGRESS-BAR STRIPE (Nadine) — every progress bar in UX-v2.

   Stripe sits on the FILL. Two things make it read instead of turning to mush:

   1. FEWER STRIPES. The first pass used a 6px pitch, which on a 7px-tall bar packs the
      stripes almost edge to edge — it reads as noise, not texture. Pitch is now 34px
      (8px stripe / 26px gap): distinct, countable diagonals that still read on a 5px bar.

   2. THE STRIPE IS A DARKER SHADE OF THE FILL, not grey. Done with translucent BLACK
      rather than a per-colour variant: black at 18% over teal IS darker teal, over tawny
      IS darker tawny, over gold IS darker gold. So one rule self-adapts to every bar in
      the product — teal, tawny, gold, and the gradient fills — with no per-bar edits and
      no new colour tokens. A grey stripe would have fought the fill colour; this one is
      derived from it.

   The empty track goes back to a flat tint, so the stripe means "progress made".
   ============================================================ */

/* the fill: child of a bar track (mocks use <i>, <div> and <span> interchangeably) */
.v2-striped,
.pgbar > *, .jb-prog-track > *, .bar-track > *, .cov-track > *,
.blrow-prog > *, .bd-prog > *, .z-bar > *, .sv-zrow-bar > *, .sv-zone-bar > *,
.v2-bar-bg > *, .v2-mission-bar > *, .wow-dist-bar > *, .v2-progress > *,
.v2-bardist > *, .ob-prog .seg > *,
.jb-prog-fill, .bar-fill, .cov-fill{
  background-image:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.16) 0 8px,
      transparent 8px 34px) !important;
  background-repeat:repeat;
}

/* tracks stay flat — the stripe is the fill's job now */
.pgbar, .jb-prog-track, .bar-track, .cov-track,
.blrow-prog, .bd-prog, .z-bar, .sv-zrow-bar, .sv-zone-bar,
.v2-bar-bg, .v2-mission-bar, .wow-dist-bar, .v2-progress,
.v2-bardist, .ob-prog .seg{
  background-image:none !important;
}

/* Print: the stripe is decorative — width and the numeric label always carry the value. */
@media print{
  .v2-striped, .jb-prog-fill, .bar-fill, .cov-fill{ background-image:none !important; }
}