/* =====================================================================
   Spenta CRM — design refresh ("Spenta Command"), preview v2
   Signature: the yellow squares of the Spenta logo. Used for the brand,
   for "lit floors" on target towers, and nowhere decorative.
   Typeface: Archivo — expanded width for headings and figures,
   normal width for reading.
   ===================================================================== */
:root {
  --graphite: #2a2e32;
  --charcoal: #505558;
  --yellow: #fcd226;
  /* Spenta yellow as a tiny picture: phone browsers that force their own dark mode
     (Samsung Internet) repaint colours but leave pictures alone */
  --g-img: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAFElEQVR42mPU0jNigAEmBiSAmwMAG/AAkvaF2lEAAAAASUVORK5CYII=");
  --y-img: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAFElEQVR42mP8c0mNAQaYGJAAbg4AY4IB/FiPedEAAAAASUVORK5CYII=");
  --stone: #eef0ee;
  --surface: #ffffff;
  --surface-2: #f7f8f7;
  --ink: #1d2124;
  --ink-2: #464d53;
  --ink-3: #62696f;
  --rule: #dfe3e0;
  --sea: #17707f;
  --sea-soft: #e3f0f1;
  --alert: #b8402c;
  --alert-soft: #f8e9e5;
  --amber: #a86a00;
  --amber-soft: #fbf1dc;
  --floor-off: #e4e7e4;
  --side-ink: #e8eaeb;
  --side-muted: #b3b9bd;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow: 0 1px 2px rgba(29, 33, 36, .06), 0 4px 16px rgba(29, 33, 36, .05);
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --stone: #16191b; --surface: #1f2326; --surface-2: #252a2d; --ink: #eef0f1; --ink-2: #c3c9cd; --ink-3: #a2aaaf;
    --rule: #30363a; --sea: #4fb3c2; --sea-soft: #173238; --alert: #ef8a76; --alert-soft: #3a2220;
    --amber: #e7b04a; --amber-soft: #3a2f17; --floor-off: #30363a; --graphite: #111416;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--stone); color: var(--ink); font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
.wide { font-stretch: 125%; }
.num { font-stretch: 112%; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.01em; }
.muted { color: var(--ink-3); }
.small { font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Shell: sidebar (laptop) / top bar + tab bar (phone) ---------- */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh;
       background: linear-gradient(to right, var(--graphite) 252px, transparent 252px); }
.side { background: var(--graphite); color: var(--side-ink); position: sticky; top: 0; height: 100vh;
        display: flex; flex-direction: column; padding: 20px 14px; overflow-y: auto; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.side .brand img { height: 30px; background: #fff; border-radius: var(--r-sm); padding: 3px 6px; }
.side .brand span { font-weight: 700; font-stretch: 118%; letter-spacing: .01em; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side .grp { color: var(--side-muted); font-size: .76rem; padding: 14px 10px 6px; }
.side a.nav { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-md);
              color: var(--side-ink); text-decoration: none; font-size: .93rem; }
.side a.nav svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.side a.nav:hover { background: rgba(255, 255, 255, .06); }
.side a.nav[aria-current="page"] { background: rgba(252, 210, 38, .14); color: #fff; }
.side a.nav[aria-current="page"] svg { color: var(--yellow); opacity: 1; }
.side .me { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; }
.side .me b { display: block; font-weight: 600; }
.side .me a { color: var(--side-muted); font-size: .8rem; }

.main { min-width: 0; padding: 26px 32px 60px; }
.topbar2 { display: none; }
.tabbar { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; background: none; }
  .side { display: none; }
  .main { padding: 14px 16px 96px; }
  .topbar2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px;
             background: var(--graphite); color: #fff; position: sticky; top: 0; z-index: 5; }
  .topbar2 img { height: 26px; background: #fff; border-radius: var(--r-sm); padding: 2px 5px; }
  .topbar2 .t { font-weight: 700; font-stretch: 118%; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 6;
            background: var(--surface); border-top: 1px solid var(--rule); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none;
              color: var(--ink-3); font-size: .7rem; padding: 4px 0; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--ink); }
  .tabbar a.plus span.sq { width: 46px; height: 46px; margin-top: -20px; border-radius: 14px; background: var(--yellow) var(--y-img) repeat; color: var(--graphite);
                           display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
}

/* ---------- Greeting band ---------- */
.band { background: var(--graphite); color: #fff; border-radius: var(--r-lg); padding: 26px 28px; position: relative; overflow: hidden;
        display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.band h1 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 700; font-stretch: 125%; line-height: 1.1; letter-spacing: -.01em; }
.band p { margin: 8px 0 0; color: #d6dadd; max-width: 52ch; }
.band .when { color: #d6dadd; font-size: .9rem; }
.band .acts { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
/* The Spenta logo (white wordmark, yellow squares) in the top-right corner of the band */
.band { min-height: 176px; }
.band .logo { position: absolute; right: 26px; top: 22px; width: 132px; height: auto; }
.band .hello { padding-right: 150px; }
@media (max-width: 860px) { .band { padding: 20px; min-height: 0; } .band .logo { width: 78px; right: 18px; top: 18px; } .band .hello { padding-right: 0; } .band .when, .band h1 { padding-right: 90px; } }

.btn2 { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: var(--r-md);
        border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: 600 .9rem var(--font);
        text-decoration: none; cursor: pointer; }
.btn2 svg { width: 18px; height: 18px; }
.btn2.yellow { background: var(--yellow) var(--y-img) repeat; border-color: var(--yellow); color: var(--graphite); }
.btn2.ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }

/* ---------- Section heading ---------- */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 12px; }
.sec-h h2 { margin: 0; font-size: 1.05rem; font-weight: 700; font-stretch: 112%; }
.sec-h a { font-size: .85rem; color: var(--ink-2); }
.seg2 { display: inline-flex; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 3px; }
.seg2 button { white-space: nowrap; border: 0; background: transparent; font: 600 .82rem var(--font); color: var(--ink-2); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.seg2 button[aria-pressed="true"] { background: var(--graphite); color: #fff; }

/* ---------- Key numbers ---------- */
.kpis2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
@media (max-width: 860px) { .kpis2 { grid-template-columns: 1fr 1fr; gap: 10px; } .k { padding: 12px 14px; } .k .v { font-size: 1.6rem; } }
.k { background: var(--surface); border-radius: var(--r-md); padding: 16px 18px 14px; box-shadow: var(--shadow);
     text-decoration: none; color: inherit; display: block; border: 1px solid transparent; }
a.k:hover { border-color: var(--rule); }
.k .top { display: flex; justify-content: space-between; align-items: center; color: var(--ink-2); font-size: .86rem; }
.k .top svg { width: 18px; height: 18px; color: var(--ink-3); }
.k .v { font-size: 2.1rem; line-height: 1.1; margin-top: 8px; }
.k .sub { font-size: .8rem; color: var(--ink-3); margin-top: 2px; }
.k.alert .v { color: var(--alert); }
.k .delta { font-size: .78rem; font-weight: 600; padding: 2px 7px; border-radius: 99px; }
.delta.up { background: var(--sea-soft); color: var(--sea); }
.delta.down { background: var(--alert-soft); color: var(--alert); }
.delta.flat { background: var(--surface-2); color: var(--ink-3); }

/* ---------- Panels ---------- */
.grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .grid2 { grid-template-columns: 1fr; } }
.pane { background: var(--surface); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.pane h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.pane .hint { margin: 0 0 14px; font-size: .82rem; color: var(--ink-3); }

/* Trend chart (SVG) */
.chart svg { width: 100%; height: auto; display: block; }
:root { --bar-w: #505558; --bar-r: #a9b0b5; --bar-now: #2a2e32; }
.chart .bar-w { fill: var(--bar-w); }
.chart .bar-r { fill: var(--bar-r); }
.chart .bar-now { fill: var(--bar-now); }
.chart .axis { fill: var(--ink-3); font: 500 11px var(--font); }
.chart .val { fill: var(--ink-2); font: 700 11px var(--font); }
.chart .gl { stroke: var(--rule); stroke-width: 1; }
@media (prefers-color-scheme: dark) { :root { --bar-w: #aab2b7; --bar-r: #5d666c; --bar-now: #fcd226; } .chart .bar-now { fill: url(#yimg); } .band { background: #23282c; border: 1px solid #30363a; } }
.legend { display: flex; gap: 16px; font-size: .8rem; color: var(--ink-2); margin-top: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.legend i.w { background: var(--bar-w); } .legend i.r { background: var(--bar-r); }

/* ---------- Target towers (signature) ---------- */
.towers { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 18px 12px; align-items: start; padding: 4px 2px 2px; }
.tower { text-align: center; text-decoration: none; color: inherit; }
.tower .floors { position: relative; display: flex; flex-direction: column-reverse; gap: 3px; width: 54px; margin: 0 auto; padding: 4px;
                 border: 1px solid var(--rule); border-bottom: 3px solid var(--charcoal); border-radius: 4px 4px 0 0; }
.tower .floors i { height: 9px; background: var(--floor-off); }
.tower .floors i.lit { background: var(--yellow) var(--y-img) repeat; }
.tower.done .floors { border-bottom-color: var(--sea); }
.tower .pct { font-size: 1.25rem; margin-top: 8px; }
.tower .nm { font-size: .76rem; color: var(--ink-2); line-height: 1.25; margin-top: 2px; }
.tower .of { font-size: .72rem; color: var(--ink-3); }
.empty { color: var(--ink-3); font-size: .9rem; padding: 10px 0; }
.empty a { color: var(--ink); font-weight: 600; }

/* ---------- Needs you today ---------- */
.todo { list-style: none; margin: 0; padding: 0; }
.todo li a { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 11px 4px;
             border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.todo li:last-child a { border-bottom: 0; }
.todo .ic { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; }
.todo .ic svg { width: 18px; height: 18px; }
.todo .ic.alert { background: var(--alert-soft); color: var(--alert); }
.todo .ic.amber { background: var(--amber-soft); color: var(--amber); }
.todo .ic.sea { background: var(--sea-soft); color: var(--sea); }
.todo b { font-weight: 600; }
.todo .n { font-size: 1.25rem; }
.todo .d { font-size: .8rem; color: var(--ink-3); }

/* ---------- Sites (management) ---------- */
.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.site { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 16px; text-decoration: none; color: inherit;
        display: block; border: 1px solid transparent; }
a.site:hover { border-color: var(--rule); }
.site .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.site .hd img { max-height: 30px; max-width: 120px; object-fit: contain; }
.site .hd strong { font-stretch: 112%; }
.site .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.site .row3 div { font-size: .74rem; color: var(--ink-3); }
.site .row3 b { display: block; white-space: nowrap; font-size: 1.05rem; color: var(--ink); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.pill { font-size: .74rem; font-weight: 600; padding: 3px 8px; border-radius: 99px; }
.pill.alert { background: var(--alert-soft); color: var(--alert); }
.pill.sea { background: var(--sea-soft); color: var(--sea); }
.pill.plain { background: var(--surface-2); color: var(--ink-3); }

.foot { margin-top: 28px; font-size: .78rem; color: var(--ink-3); }
.skeleton { color: var(--ink-3); padding: 40px 0; }
.toast2 { position: fixed; left: 16px; right: 16px; bottom: 90px; max-width: 480px; margin: 0 auto; z-index: 9; }
.toast2 div { background: var(--graphite); color: #fff; padding: 12px 16px; border-radius: var(--r-md); }

/* =====================================================================
   Dashboard v2, round 2 (owner's feedback 2 Oct 2026)
   ===================================================================== */
/* Money headline in the band */
.band .money { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; color: #e8eaeb; font-size: 1rem; }
.band .money .num { font-size: 1.75rem; color: var(--yellow); background-image: var(--y-img); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.band .money .of { color: #d6dadd; }
/* Pace / status pills (shared) */
.st { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; font-stretch: 100%; }
.st.done, .st.ahead { background: var(--sea-soft); color: var(--sea); }
.st.close { background: var(--amber-soft); color: var(--amber); }
.st.behind { background: var(--alert-soft); color: var(--alert); }
.band .st.done, .band .st.ahead { background: #1f4a50; color: #bfe6ec; }
.band .st.close { background: #4a3c15; color: #f3d48a; }
.band .st.behind { background: #4d2620; color: #f6c1b6; }

/* Period switch + last updated */
.ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
.upd { font-size: .84rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.linkbtn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
           font: 600 .8rem var(--font); padding: 5px 10px; border-radius: var(--r-md); cursor: pointer; min-height: 32px; }
.linkbtn svg { width: 15px; height: 15px; }
.cmp { margin: 0 0 12px; font-size: .82rem; color: var(--ink-2); }
.seg2.period button { padding: 8px 14px; font-size: .86rem; }
@media (max-width: 860px) { .seg2.period { width: 100%; } .seg2.period button { flex: 1; padding: 8px 4px; font-size: .78rem; } }

/* Tables (sites, sales team) */
.pane.flush { padding: 4px 6px; }
.tbl .tr { display: grid; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.tbl .tr:last-child { border-bottom: 0; }
.tbl a.tr:hover { background: var(--surface-2); }
.tbl .th { font-size: .74rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; padding-top: 12px; padding-bottom: 8px; }
.tbl .tr > span { min-width: 0; }
.tbl .tr > span.num { font-size: 1rem; }
.tbl .th > span:nth-child(n+3) { text-align: right; }
.tbl .tr:not(.th) > span:nth-child(n+3) { text-align: right; }
.sitet .tr { grid-template-columns: 30px minmax(160px, 2fr) minmax(118px, 1.3fr) repeat(6, minmax(58px, 1fr)); }
.board .tr { grid-template-columns: 30px minmax(150px, 2fr) minmax(118px, 1.3fr) repeat(5, minmax(60px, 1fr)); }
.board.with-site .tr { grid-template-columns: 30px minmax(130px, 1.6fr) minmax(100px, 1.1fr) minmax(118px, 1.3fr) repeat(5, minmax(56px, 1fr)); }
.board.with-site .tr:not(.th) > span.dk { text-align: left; color: var(--ink-2); font-size: .88rem; }
.board.with-site .th > span:nth-child(3) { text-align: left; }
.tbl .rk { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2);
           font: 700 .8rem var(--font); color: var(--ink-2); }
.tbl .rk.top, .sitet .tr:nth-child(2) .rk { background: var(--yellow) var(--y-img) repeat; color: var(--graphite); }
.tbl .nm { display: flex; align-items: center; gap: 10px; }
.tbl .nm img { height: 24px; width: 64px; object-fit: contain; object-position: left center; flex: none; }
.tbl .nm b { font-weight: 600; }
.tbl .nm small.ph { display: none; }
.tbl .bad { color: var(--alert); }
.tbl .dl { font-size: .72rem; font-weight: 600; margin-left: 2px; }
.dl.up { color: var(--sea); } .dl.down { color: var(--alert); } .dl.flat { color: var(--ink-3); }
.tbl .st { margin-left: 4px; }
.note { font-size: .84rem; color: var(--ink-2); margin: 10px 2px 0; }
@media (max-width: 860px) {
  .tbl .th { display: none; }
  .tbl .tr, .sitet .tr, .board .tr, .board.with-site .tr { grid-template-columns: repeat(3, 1fr); gap: 10px 8px; padding: 14px 10px; }
  .tbl .tr > .rk { grid-column: 1; grid-row: 1; }
  .tbl .tr > .nm { grid-column: 1 / -1; grid-row: 1; padding-left: 36px; }
  .tbl .tr:not(.th) > span:nth-child(n+3) { text-align: left; }
  .tbl .tr > span[data-l]::before { content: attr(data-l); display: block; font: 500 .72rem var(--font); color: var(--ink-2); font-stretch: 100%; }
  .tbl .tr > span.dk { display: none; }
  .tbl .nm small.ph { display: block; color: var(--ink-2); font-size: .78rem; }
  .tbl .nm { flex-wrap: wrap; gap: 2px 10px; }
}

/* Even two-column panels */
.grid2.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .grid2.even { grid-template-columns: 1fr; } }

/* Funnel */
.fun { display: grid; gap: 10px; }
.fr { display: grid; grid-template-columns: minmax(150px, 1.1fr) 2fr 44px 50px; gap: 10px; align-items: center; }
.fr .fl { font-size: .88rem; color: var(--ink); }
.fr .fb { height: 14px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.fr .fb i { display: block; height: 100%; border-radius: 4px; }
.fr .fb i.base { background: var(--graphite); } .fr .fb i.rep { background: var(--charcoal); }
.fr .fb i.bk { background: var(--yellow) var(--y-img) repeat; } .fr .fb i.lost { background: var(--alert); } .fr .fb i.open { background: #a9b0b5; }
.fr .fv { text-align: right; } .fr .fp { text-align: right; font-size: .82rem; color: var(--ink-2); }
@media (prefers-color-scheme: dark) { .fr .fb i.base { background: #d7dbde; } .fr .fb i.rep { background: #8f979c; } }
@media (max-width: 520px) { .fr { grid-template-columns: 1fr 44px 50px; } .fr .fl { grid-column: 1 / -1; } .fr .fb { grid-column: 1; } }

/* Source mix */
.mx { margin-bottom: 14px; }
.mx .mh { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .88rem; margin-bottom: 6px; }
.mx .mh span { color: var(--ink-2); }
.mixbar { display: flex; height: 16px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.mixbar i { display: block; height: 100%; }
.mixbar i.cp, .legend i.cp { background: var(--yellow) var(--y-img) repeat; }
.mixbar i.dir, .legend i.dir { background: var(--charcoal); }
@media (prefers-color-scheme: dark) { .mixbar i.dir, .legend i.dir { background: #8f979c; } }
.srcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.srcs li { display: flex; justify-content: space-between; font-size: .86rem; padding: 4px 0; border-bottom: 1px solid var(--rule); }

/* Target towers: pace marker + state */
.tower .floors .mark { position: absolute; left: -7px; right: -7px; height: 2px; background: var(--ink);
                       bottom: calc(4px + var(--exp) * 117px); border-radius: 2px; }
.tower .st { margin-top: 6px; }
.tower.behind .floors { border-bottom-color: var(--alert); }

/* Sales Manager: chips + call list */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.chip2 { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; background: var(--surface); border-radius: 99px;
         box-shadow: var(--shadow); text-decoration: none; color: var(--ink-2); font-size: .88rem; }
.chip2 b { color: var(--ink); font-size: 1.05rem; }
.chip2.alert b { color: var(--alert); } .chip2.amber b { color: var(--amber); }
.calls { list-style: none; margin: 0; padding: 0; }
.calls li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.calls li:last-child { border-bottom: 0; }
.calls .who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calls .who b { font-size: 1rem; }
.calls .meta { font-size: .8rem; color: var(--ink-2); }
.calls .na { font-size: .82rem; color: var(--ink-2); }
.calls .why { align-self: flex-start; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.why.alert { background: var(--alert-soft); color: var(--alert); } .why.amber { background: var(--amber-soft); color: var(--amber); }
.why.sea { background: var(--sea-soft); color: var(--sea); }
.cbtn { display: flex; gap: 6px; flex: none; }
.ib { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px;
      border-radius: var(--r-md); border: 1px solid var(--rule); background: var(--surface); color: var(--ink); text-decoration: none; font: 600 .84rem var(--font); }
.ib svg { width: 18px; height: 18px; }
.ib.call { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.ib.wa { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
@media (max-width: 860px) {
  .calls li { flex-direction: column; align-items: stretch; }
  .cbtn { display: grid; grid-template-columns: repeat(3, 1fr); }
}

.hint { font-size: .82rem; color: var(--ink-2); }
@media (max-width: 860px) {
  .seg2.period .lg { display: none; }
  .seg2.period button { text-transform: capitalize; }
  .kpis2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sitet .tr > span.opt { display: none; }
}
@media (prefers-color-scheme: dark) { .tbl .nm img { background: #fff; border-radius: 4px; padding: 2px 4px; } }

/* Dark writing on Spenta yellow, drawn from a picture so forced dark modes keep it dark */
.btn2 .ico { width: 18px; height: 18px; }
.tabbar a.plus span.sq .ico { width: 22px; height: 22px; }
.btn2.yellow .lbl, .tbl .rk.top, .sitet .tr:nth-child(2) .rk {
  color: var(--graphite); background-image: var(--g-img); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tbl .rk.top, .sitet .tr:nth-child(2) .rk { background-image: var(--g-img), var(--y-img); -webkit-background-clip: text, border-box; background-clip: text, border-box; }

/* =====================================================================
   Round 3 (D-44): own-target column, folding panels, lost reasons,
   top Channel Partners, one-tap call outcome
   ===================================================================== */
.st.early { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule); }
.band .st.early { background: #3a4045; color: #e3e6e8; border-color: transparent; }
.tbl .tc small { display: block; font-size: .72rem; font-weight: 500; color: var(--ink-2); font-stretch: 100%; }
.tbl .tc small.st { display: inline-block; margin: 3px 0 0; font-weight: 700; }
.tbl .tc small.st.ahead, .tbl .tc small.st.done { color: var(--sea); } .tbl .tc small.st.close { color: var(--amber); }
.tbl .tc small.st.behind { color: var(--alert); } .tbl .tc small.st.early { color: var(--ink-2); }
.cpt .tr { grid-template-columns: 30px minmax(140px, 2.2fr) minmax(62px, .8fr) minmax(70px, .8fr) minmax(86px, 1fr); }
.cpt .tr > span.num { white-space: nowrap; }
.tbl .nm small.ph2 { display: block; color: var(--ink-2); font-size: .78rem; }
.cpt .nm { flex-direction: column; align-items: flex-start; gap: 0; }

/* Folding panels */
details.fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0 0 4px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h3 { margin: 0; flex: 1; }
details.fold > summary .aside { font-size: .84rem; color: var(--ink-2); }
details.fold > summary .chev { width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
                               transform: rotate(45deg); margin: -4px 4px 0; transition: transform .15s; flex: none; }
details.fold:not([open]) > summary .chev { transform: rotate(-45deg); margin-top: 0; }
details.fold:not([open]) { padding-bottom: 14px; }
details.fold > summary + .hint { margin-top: 0; }
.trend-seg { margin: 0 0 10px; }

/* One-tap call outcome */
.calls li { display: block; }
.calls .row1 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.outc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.outc .lab { font-size: .8rem; color: var(--ink-2); margin-right: 2px; }
.oc { white-space: nowrap; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); font: 600 .82rem var(--font);
      padding: 0 12px; min-height: 36px; border-radius: 99px; cursor: pointer; }
.oc[aria-pressed="true"] { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.ocf { margin-top: 10px; padding: 12px; background: var(--surface-2); border-radius: var(--r-md); display: grid; gap: 10px; }
.ocf label { display: grid; gap: 4px; font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.ocf input { font: 400 .95rem var(--font); padding: 9px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm);
             background: var(--surface); color: var(--ink); min-height: 42px; width: 100%; }
.ocf .two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.ocf .fa { display: flex; gap: 8px; flex-wrap: wrap; }
.ocf .err { margin: 0; color: var(--alert); font-size: .85rem; }
.btn2.dark { background: var(--graphite); border-color: var(--graphite); color: #fff; }
@media (prefers-color-scheme: dark) { .btn2.dark { background: #e8eaeb; border-color: #e8eaeb; color: #16191b; } }
@media (max-width: 860px) {
  .calls .row1 { flex-direction: column; align-items: stretch; }
  .ocf .two { grid-template-columns: 1fr; }
  .outc .oc { flex: 1; }
  .outc .lab { width: 100%; }
}

/* Menu page ("More" on phones) */
.me-card { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.me-card span { color: var(--ink-2); font-size: .85rem; }
.mgrp { font-size: .78rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; margin: 18px 4px 8px; }
.mlist { list-style: none; margin: 0; padding: 0; }
.mlist a { display: flex; align-items: center; gap: 14px; padding: 14px 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); font-weight: 500; }
.mlist li:last-child a { border-bottom: 0; }
.mlist svg { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.mlist span { flex: 1; }
.mlist .go { width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-top: 2px solid var(--ink-3); transform: rotate(45deg); }
.skin-top { margin: 0 0 12px; }
.skin-title { margin: 2px 0 0; font-size: 1.6rem; font-weight: 700; font-stretch: 118%; letter-spacing: -.01em; }

/* =====================================================================
   3 Oct (D-45): call card context, WhatsApp menu, visits, pipeline,
   Sourcing Manager and GRE panels
   ===================================================================== */
.stack { display: grid; gap: 14px; align-content: start; }
.calls .facts { font-size: .8rem; color: var(--ink-2); }
.calls .last { font-size: .82rem; color: var(--ink); background: var(--surface-2); border-radius: 6px; padding: 4px 8px; margin-top: 2px; }
.calls .last i { color: var(--ink-3); font-style: normal; }
.tchip { font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); }
.tchip.hot { background: var(--alert-soft); color: var(--alert); } .tchip.warm { background: var(--amber-soft); color: var(--amber); }
.tchip.cold { background: var(--sea-soft); color: var(--sea); }
.wadd { position: relative; }
.wadd > summary { list-style: none; cursor: pointer; }
.wadd > summary::-webkit-details-marker { display: none; }
.wamenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; min-width: 230px; background: var(--surface); border: 1px solid var(--rule);
          border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; display: grid; }
.wamenu a { padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: .9rem; }
.wamenu a:hover { background: var(--surface-2); }
@media (max-width: 860px) { .wamenu { left: 0; right: auto; } }
.visits { display: grid; gap: 10px; }
.vday .vd { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.vday ul { list-style: none; margin: 0; padding: 0; }
.vday li a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); margin-bottom: 4px; text-decoration: none; color: var(--ink); }
.vday li span { font-size: .8rem; color: var(--ink-2); }
.pipe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pbox { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.pbox .pl-l { font-size: .84rem; color: var(--ink-2); font-weight: 600; }
.pbox .pl { font-size: 2rem; font-weight: 700; font-stretch: 112%; color: var(--ink); text-decoration: none; }
.pbox.warn .pl { color: var(--amber); }
.pbox small { color: var(--ink-2); font-size: .76rem; }
.pipet { margin-top: 10px; }
.pipet .tr { grid-template-columns: minmax(120px, 2fr) 1fr 1fr; padding: 8px 6px; }
.pipet .tr:not(.th) > span:nth-child(n+2), .pipet .th > span:nth-child(n+2) { text-align: right; }
.pipet a, .tbl .num a { color: inherit; font-weight: 700; }
@media (max-width: 860px) { .pipet .tr { grid-template-columns: 2fr 1fr 1fr; } .pipet .tr > .nm { grid-column: auto; padding-left: 0; } }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); justify-self: center; }
.dot.active { background: #1f7a4d; } .dot.quiet { background: var(--amber); } .dot.dormant { background: var(--alert); } .dot.never { background: var(--rule); border: 1px solid var(--ink-3); }
.cpt.mine .tr { grid-template-columns: 16px minmax(140px, 2.2fr) minmax(80px, 1fr) minmax(60px, .8fr) minmax(60px, .8fr); }
@media (max-width: 860px) { .cpt.mine .tr > .dot { grid-column: 1; grid-row: 1; margin-top: 6px; } .cpt.mine .tr > .nm { padding-left: 22px; } }
.cl3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cl3 > div { background: var(--surface-2); border-radius: var(--r-md); padding: 10px 12px; font-size: .78rem; color: var(--ink-2); }
.cl3 b { display: block; font-size: 1.5rem; color: var(--ink); }
.clist { list-style: none; margin: 12px 0 0; padding: 0; }
.clist li { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: .88rem; }
.clist li:last-child { border-bottom: 0; }
.clist small { color: var(--ink-2); }
.hours { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 16px; }
.hb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.hb i { display: block; width: 100%; max-width: 26px; background: var(--bar-w); border-radius: 3px 3px 0 0; min-height: 0; }
.hb.now i { background: var(--bar-now); }
.hb b { font-size: .7rem; color: var(--ink-2); min-height: 14px; }
.hb span { font-size: .66rem; color: var(--ink-2); margin-top: 4px; }
.onsite { list-style: none; margin: 0; padding: 0; }
.onsite li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.onsite li:last-child { border-bottom: 0; }
.onsite li div { display: flex; flex-direction: column; }
.onsite li span { font-size: .8rem; color: var(--ink-2); }

/* Role switch for people with several personal roles */
.ctl .seg2.roles + span { margin-left: auto; }
@media (max-width: 860px) { .seg2.roles { width: 100%; } .seg2.roles button { flex: 1; } }