:root{
--bg:#0b1020;--card:#121a33;--card2:#0f1730;--text:#eaf0ff;--muted:rgba(234,240,255,.7);
--border:rgba(234,240,255,.12);
}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{margin:0;background:linear-gradient(180deg,var(--bg),#070a14);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;overflow-x:hidden}
.wrap{max-width:1600px;margin:0 auto;padding:14px}
.top{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
h1{margin:0;font-size:20px;letter-spacing:.2px}
.sub{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.35}
.panel{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid rgba(200,45,45,.45);border-radius:18px;overflow:hidden;box-shadow:0 0 14px rgba(200,40,40,.22),0 0 4px rgba(200,40,40,.14)}
/* Red border + glow on all row/card/tile elements site-wide */
.techRow,.catCard{border-color:rgba(200,45,45,.45) !important;box-shadow:0 0 14px rgba(200,40,40,.22),0 0 4px rgba(200,40,40,.14) !important;}
/* techRows inside pageTechDash — restore original border EXCEPT dashTechRow */
.pageTechDash .techRow:not(.dashTechRow){border-color:var(--border) !important;box-shadow:none !important;}
.techRow.dashTechRow{border-color:rgba(200,45,45,.25) !important;box-shadow:0 0 6px rgba(200,40,40,.10),0 0 2px rgba(200,40,40,.08) !important;}
/* techRows inside route-tech/advisor panels — restore original border */
.route-tech .techRow,.techPickPanel .techRow{border-color:var(--border) !important;box-shadow:none !important;}
.phead{padding:10px 14px 10px;border-bottom:1px solid var(--border)}
.techHeaderPanel .phead,
.techPickPanel .phead,
.advPickPanel .phead{font-size:12px !important}
.titleRow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.h2{font-size:16px;font-weight:1000;letter-spacing:.4px}
.big{font-size:22px;font-weight:var(--HB);text-align:right}
.overallBlock{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.pageServicesDash .techHeaderPanel .overallBlock{gap:0;}
.overallBlock .overallMetric{margin-top:6px;font-size:21px;font-weight:1200;text-align:right}
.overallBlock .tag{margin-top:0}
.tag{font-size:11px;color:var(--muted);text-align:right;margin-top:2px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pill{display:inline-flex;gap:8px;align-items:baseline;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.25)}
.pill .k{font-size:13px;color:rgba(234,240,255,.7) !important;opacity:0.7 !important;font-weight:900;letter-spacing:.2px}
.pill .v{font-size:16px;color:#eaf0ff !important;opacity:1 !important;font-weight:1000;line-height:1}
.pill.pill-sm .k{font-size:13px}
.pill.pill-sm .v{font-size:16px}
.pill.pill-lg .k{font-size:16px}
.pill.pill-lg .v{font-size:19px}
.pill.sold{border-color:rgba(190,255,210,.22)}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:0px}
.controls label{display:block;font-size:11px;color:var(--muted);font-weight:900;letter-spacing:.2px;margin-bottom:6px}
select,input{width:100%;padding:10px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--text);outline:none}
.list{padding:12px}
.techRow{padding:10px 10px;border:1px solid var(--border);border-radius:14px;background:rgba(0,0,0,.18);margin-bottom:10px}
.rowGrid{display:grid;grid-template-columns: 1.6fr repeat(5, .9fr);gap:10px;align-items:center}
@media(max-width:920px){ .rowGrid{grid-template-columns: 1.4fr 1fr 1fr;} .hideSm{display:none} .controls{grid-template-columns:1fr} }
.cell .lbl{display:block;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.2px}
.cell .val{display:block;font-size:14px;font-weight:900;margin-top:2px}
.name a{color:var(--text)}
.name a:visited{color:var(--text)}
.name a:hover{text-decoration:underline}
.footer{padding:12px;color:var(--muted);font-size:12px;text-align:center}
.notice{padding:12px;color:var(--muted);font-size:13px}
.bGreen{color:#7CFFB2}
.bYellow{color:#FFE27A}
.bOrange{color:#FFB86B}
.bRed{color:#FF6B6B}
.statGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.statTile{border:1px solid var(--border);border-radius:14px;padding:14px;min-height:78px;display:flex;flex-direction:column;justify-content:space-between}
.statTile .tLbl{font-size:11px;letter-spacing:.2px;font-weight:1000;opacity:.85}
.statTile .tVal{font-size:22px;font-weight:var(--HB);line-height:1}
.goalLine{margin-top:4px;font-size:9px;color:var(--muted);font-style:italic}
.t1{background:rgba(124,255,178,.14)}
.t2{background:rgba(255,226,122,.14)}
.t3{background:rgba(255,184,107,.14)}
.t4{background:rgba(255,107,107,.14)}
/* === MAIN PAGE EMPHASIS (DESKTOP SAFE) === */
.heroAvg{border:1px solid var(--border);border-radius:16px;padding:14px;background:rgba(124,255,178,.14);text-align:right;min-width:220px}
.heroAvg .num{font-size:32px;font-weight:var(--HB);font-size:11px;font-weight:1000;color:var(--muted)}
.rankUnder{margin-top:6px;font-size:18px;font-weight:1100}
.techTiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.techTile{border:1px solid var(--border);border-radius:14px;padding:12px}
.techTile .tLbl{font-size:11px;font-weight:1000;color:var(--muted)}
.techTile .tVal{font-size:22px;font-weight:1100;margin-top:6px}
.tA{background:rgba(255,226,122,.14)}
.tB{background:rgba(255,184,107,.14)}
.tC{background:rgba(124,255,178,.14)}
.tD{background:rgba(255,107,107,.14)}
.tE{background:rgba(147,197,253,.14)}
/* === Tightened tech cards (desktop) === */
.techRow{background:rgba(0,0,0,.18); margin-bottom:8px}
.techTiles{gap:8px; margin-top:10px}
.techTile{padding:10px}
.techTile .tVal{font-size:20px; margin-top:4px}
.rankUnder{margin-top:4px;font-size:16px;font-weight:1100;color:var(--muted)}
/* === Rank + ASR/RO header sizing === */
.rankUnder{margin-top:6px;font-size:24px;font-weight:1200;color:var(--text);line-height:1}
.asrBlockNum{font-size:24px;font-weight:1200;line-height:1}
.asrBlockLbl{margin-top:6px;font-size:11px;font-weight:1000;letter-spacing:.2px;color:var(--muted);text-align:right}
/* === ASR/RO top-right corner placement === */
.techRow{position:relative}
.asrCorner{position:absolute; top:10px; right:10px; text-align:right}
.techMetaLeft{padding-right:0} /* no corner metric on main rows */
/* Branding */
.brandLogo{height:54px;max-width:45vw;object-fit:contain;display:block}
/* === Team heading emphasis === */
.teamTitle{font-size:28px;font-weight:1200;letter-spacing:.2px}
/* Match header stat size to tech corner */
.heroAvg .num{font-size:24px;font-weight:var(--HB);text-align:right;padding:0;border:none;background:transparent;min-width:0}
.teamStat .num{font-size:24px;font-weight:var(--HB);line-height:1}
.teamStat .lbl{margin-top:6px;font-size:11px;font-weight:1000;letter-spacing:.2px;color:var(--muted)}
/* ranking suffix */
.byAsr{font-size:10px;font-style:italic;font-weight:800;color:var(--muted);margin-left:4px;opacity:.9}
/* === Side-by-side teams on desktop === */
.teamsGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width: 980px){
.teamsGrid{grid-template-columns:1fr}
}
/* Tech detail page: make links white */
#app a{color:var(--text)}
#app a:visited{color:var(--text)}
#app a:hover{text-decoration:underline}
@media (max-width: 980px){
.catHeader{grid-template-columns:1fr}
.catHdrRight{display:flex;align-items:center;gap:10px}
/* Main dashboard team headers (EXPRESS/KIA): allow a middle column for stat pills on the top row */
.catHeaderSplit .catHdrMid{
flex: 1 1 auto;
min-width: 0;
display:flex;
align-items:flex-start;
justify-content:center;
}
.svcGaugeWrap{flex:0 0 auto}
.benchGrid4{grid-template-columns:1fr 1fr}
.detailLower{grid-template-columns:1fr}
}
/* === Compact benchmark tiles (details page) === */
.benchMiniGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.benchMiniGrid .statTile{min-height:72px}
@media (max-width: 980px){
.benchMiniGrid{grid-template-columns:1fr 1fr}
}
/* === Detail header benchmark boxes (compact, aligned with category header) === */
.catTopRow{display:flex;justify-content:space-between;align-items:stretch;gap:12px}
.catLeftStack{display:flex;flex-direction:column;justify-content:space-between}
.benchHdrGrid{display:grid;grid-template-columns:190px 190px 190px;gap:10px;align-items:stretch}
.benchHdrTile{height:100%}
.benchInner{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.benchNum{font-size:18px;font-weight:1200;line-height:1}
.benchLbl{margin-top:6px;font-size:10px;font-weight:1000;letter-spacing:.2px;color:var(--muted)}
.benchNoteSmall{margin-top:8px;font-size:10px;font-style:italic;color:var(--muted);line-height:1.2}
.rightStats{display:flex;gap:14px;align-items:flex-end;text-align:right}
@media (max-width: 1200px){
.benchHdrGrid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width: 980px){
.catTopRow{flex-direction:column}
.rightStats{justify-content:flex-end}
.benchHdrGrid{grid-template-columns:1fr}
}
/* === Details: benchmark tiles === */
.benchTiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.benchTile{border:1px solid var(--border);border-radius:14px;padding:10px;background:rgba(0,0,0,.18)}
.benchHdr{font-size:11px;letter-spacing:.2px;font-weight:1100;color:var(--muted)}
.benchInner2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.benchNum{font-size:18px;font-weight:1200;line-height:1}
.benchLbl{margin-top:6px;font-size:10px;font-weight:1000;letter-spacing:.2px;color:var(--muted)}
.benchNote{margin-top:8px;font-size:10px;font-style:italic;color:var(--muted)}
@media (max-width: 980px){ .benchTiles{grid-template-columns:1fr} }
/* === Details page tweaks (rank-only header + goals text + split benchmark boxes) === */
.detailRank{font-size:18px;font-weight:1100;text-align:right}
.benchSplit{display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:10px;margin-top:10px}
.benchSplit .statTile{min-height:72px}
.goalText{margin-top:10px}
@media (max-width: 980px){
.benchSplit{grid-template-columns:1fr 1fr}
}
/* === Details: compact benchmarks column === */
.detailLower.twoColBench{display:grid;grid-template-columns:360px 1fr !important;gap:12px;align-items:start}
.benchCompact{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px}
.benchCompact .statTile{padding:8px;border-radius:12px;min-height:58px}
.benchCompact .tVal{font-size:18px}
.benchCompact .tLbl{font-size:10px}
.benchCompact .benchNote{font-size:9px;margin-top:6px}
@media (max-width: 720px){
.detailLower.twoColBench{grid-template-columns:1fr !important}
.benchCompact{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 540px){
.benchCompact{grid-template-columns:1fr}
}
/* === Details: stacked technician tiles + benchmarks outlined container === */
.benchWrap{border:1px solid var(--border);border-radius:14px;padding:10px;background:rgba(0,0,0,.18)}
.techStack{display:grid;grid-template-columns:260px;justify-content:start;gap:8px;margin-top:10px}
.techStack .statTile{min-height:58px;padding:8px;border-radius:12px}
.techStack .tVal{font-size:18px}
.techStack .tLbl{font-size:10px}
/* === Size hierarchy: technician tiles slightly larger than benchmark tiles === */
.benchCompact .statTile{min-height:56px;padding:8px}
.benchCompact .tVal{font-size:17px}
.techStack .statTile{min-height:68px;padding:10px}
.techStack .tVal{font-size:20px}
.detailLower.twoColBench{grid-template-columns:360px 1fr !important;}
.techStack .tLbl{margin-bottom:2px;}
/* Override: make technician tiles narrower (width) while keeping height */
.techStack{grid-template-columns:260px;justify-content:start;}
@media (max-width: 980px){ .techStack{grid-template-columns:1fr;} }
/* === Equal-height columns + tighter technician frame === */
.detailLower.twoColBench{align-items:stretch}
.benchWrap{height:100%;display:flex;flex-direction:column}
.techWrapTight{height:100%;display:flex;flex-direction:column;align-items:flex-start}
.techWrapInner{border:1px solid var(--border);border-radius:14px;padding:10px;background:rgba(0,0,0,.18);display:inline-block}
/* === Details: compact category cards for side-by-side categories === */
.categoryGrid{display:grid;grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));gap:10px;align-items:start}
@media (max-width: 760px){ .categoryGrid{grid-template-columns:1fr;} }
.catCard{border:1px solid var(--border);border-radius:16px;padding:10px;background:rgba(0,0,0,.18)}
.catHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.catHdrRight{display:flex;align-items:center;gap:10px}
.svcGaugeWrap{flex:0 0 auto}
.catTitle{font-size:30px;font-weight:var(--HB);line-height:1.06;letter-spacing:.2px}
.catRank{font-size:16px;font-weight:1100;text-align:right;white-space:nowrap}
.catRank .byAsr{font-size:10px;font-style:italic;margin-left:4px;opacity:.9}
.route-tech .catTitle{font-size:30px;font-weight:var(--HB);line-height:1.06;letter-spacing:.2px}
.route-tech .svcGaugeWrap{order:2}
.catCounts{margin-top:6px;font-size:13px;color:var(--muted);font-weight:var(--HB);letter-spacing:.2px}
.catCounts b{color:var(--text)}
.roBtn{display:inline-block;margin-top:8px;font-weight:900;text-decoration:none;border:1px solid var(--border);padding:7px 10px;border-radius:12px;background:rgba(0,0,0,.25);color:var(--text)}
.techTilesRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.techTilesRow .statTile{min-height:62px}
.techTilesRow .tVal{font-size:20px}
.techTilesRow .tLbl{font-size:10px}
.benchTilesGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.benchTilesGrid .statTile{min-height:58px}
.benchTilesGrid .tVal{font-size:17px}
.benchTilesGrid .tLbl{font-size:10px}
.benchTilesGrid .benchNote{margin-top:6px;font-size:9px;font-style:italic;color:var(--muted);line-height:1.15}
/* === Sketch layout: section frame + 2-column category grid === */
.sectionFrame{border:1px solid var(--border);border-radius:18px;padding:14px;background:rgba(0,0,0,.10);margin-top:14px}
.sectionHeader{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px}
.sectionTitle{font-size:18px;font-weight:1200;letter-spacing:.2px}
.sectionMeta{font-size:12px;color:var(--muted);font-weight:900}
.categoryGrid{display:grid;grid-template-columns:repeat(2, minmax(320px, 1fr));gap:14px;align-items:start}
@media (max-width: 980px){ .categoryGrid{grid-template-columns:1fr;} }
.catCard{border:1px solid var(--border);border-radius:16px;padding:12px;background:rgba(0,0,0,.18)}
.catHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.catTitle{font-size:30px;font-weight:var(--HB);line-height:1.06;letter-spacing:.2px}
.catRank{font-size:16px;font-weight:1100;text-align:right;white-space:nowrap}
.catRank .byAsr{font-size:10px;font-style:italic;margin-left:4px;opacity:.9}
.catCounts{margin-top:6px;font-size:13px;color:var(--muted);font-weight:var(--HB);letter-spacing:.2px}
.catCounts b{color:var(--text)}
.roBtn{display:inline-block;margin-top:8px;font-weight:900;text-decoration:none;border:1px solid var(--border);padding:7px 10px;border-radius:12px;background:rgba(0,0,0,.25);color:var(--text)}
.subHdr{margin-top:10px;font-size:12px;color:var(--muted);font-weight:1100;letter-spacing:.25px}
.techTilesRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.benchTilesGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.techTilesRow .statTile{min-height:56px}
.techTilesRow .tVal{font-size:20px}
.techTilesRow .tLbl{font-size:10px}
.benchTilesGrid .statTile{min-height:54px}
.benchTilesGrid .tVal{font-size:17px}
.benchTilesGrid .tLbl{font-size:10px}
.benchTilesGrid .benchNote{margin-top:6px;font-size:9px;font-style:italic;color:var(--muted);line-height:1.15}
/* === Compact tiles + narrower category cards (closer to sketch) === */
.categoryGrid{
grid-template-columns: repeat(auto-fit, 420px) !important;
justify-content: start !important;
}
.catCard{
max-width: 420px;
}
.techTilesRow, .benchTilesGrid{
justify-content: start;
grid-template-columns: repeat(2, 190px) !important;
}
.techTilesRow .statTile, .benchTilesGrid .statTile{
width: 190px;
}
@media (max-width: 920px){
.categoryGrid{ grid-template-columns: 1fr !important; }
.catCard{ max-width: none; }
.techTilesRow, .benchTilesGrid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.techTilesRow .statTile, .benchTilesGrid .statTile{ width: auto; }
}
/* === Force categories to flow side-by-side across the page (auto-fit) === */
.categoryGrid{
display:grid !important;
grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)) !important;
gap:14px !important;
align-items:start !important;
}
/* === Requested tweaks === */
.sectionTitle{font-size:28px !important; letter-spacing:.4px;}
.sectionHeader{margin-bottom:12px !important;}
/* Hide any section subtitle/explainer text */
.sectionFrame .muted, .sectionFrame .sectionMeta, .sectionFrame .sectionSub, .sectionFrame .subtext{display:none !important;}
.catCard{position:relative; padding-bottom:34px !important;}
body.route-tech .catCard{padding-bottom:6px !important;}
body.route-advisor .catCard{padding-bottom:6px !important;}
.roLink{
position:absolute;
left:12px;
bottom:10px;
font-size:11px;
font-weight:600;
color:var(--muted);
text-decoration:underline;
opacity:.95;
}
.roLink:hover{opacity:1}
.benchTag{font-size:10px; font-style:italic; color:var(--muted); margin-left:0}
.midDot{margin:0 6px; color:var(--muted);}
/* === v75 tweaks === */
.roLink{right:12px !important; left:auto !important;}
.catRank .byAsr{display:block;font-size:10px;font-style:italic;opacity:.9;margin-top:2px}
/* === Larger section headings, no subtitle === */
.sectionTitle{font-size:32px !important; font-weight:1300 !important; letter-spacing:.6px !important;}
.sectionMeta,.sectionSub,.sectionFrame .muted{display:none !important;}
/* === FORCE huge area headings + remove any text underneath === */
.sectionTitle{font-size:36px !important;font-weight:1400 !important;letter-spacing:.8px !important;line-height:1.05 !important;}
.sectionHeader{margin-bottom:14px !important;}
.sectionMeta,.sectionSub,.sectionFrame .muted,.sectionFrame .sectionMeta,.sectionFrame .sectionSub{display:none !important;height:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important;}
/* === Hamburger + side menu === */
.titleRow{display:flex;align-items:center;gap:10px}
.hamburger{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--text);font-weight:1200;font-size:18px;cursor:pointer}
.hamburger:hover{background:rgba(0,0,0,.35)}
.sideMenu{position:fixed;top:98px;left:18px;width:260px;max-height:calc(100vh - 130px);display:flex;flex-direction:column;overflow:visible;z-index:120;display:none}
.sideMenu.open{display:flex}
.menuScrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100;display:none}
.menuScrim.open{display:block}
/* ── Mobile-only popovers: hidden on desktop ─────────────────────────────── */
#mtSettingsPopover{display:none}
#mtDatePopover{display:none}
.menuHdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.menuTitle{font-weight:1200;letter-spacing:.2px}
.menuClose{width:34px;height:34px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--text);cursor:pointer}
.menuGroup{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px 10px;background:rgba(255,255,255,.03);margin-top:10px}
.menuGroup summary{display:flex;align-items:center;gap:6px;}
.menuGroup>summary{cursor:pointer;font-weight:1100;list-style:none}
.menuGroup>summary::-webkit-details-marker{display:none}
/* Menu expand/collapse indicator (+ / −) */
.menuGroup>summary::before{
content:"+";
display:inline-flex;
align-items:center;
justify-content:center;
width:14px;
height:14px;
margin-right:2px;
font-weight:1200;
opacity:.9;
}
.menuGroup[open]>summary::before{content:"−";}
.menuSub>summary{list-style:none;cursor:pointer}
.menuSub>summary::-webkit-details-marker{display:none}
.menuSub>summary::before{
content:"+";
display:inline-flex;
align-items:center;
justify-content:center;
width:12px;
height:12px;
margin-right:6px;
font-weight:1200;
opacity:.85;
}
.menuSub[open]>summary::before{content:"−";}
.menuLink{display:block;margin-top:8px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);text-decoration:none;color:var(--text);background:rgba(0,0,0,.18);font-weight:900}
.menuLink:hover{background:rgba(0,0,0,.28)}
/* === Group pages === */
.groupTop{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.groupTitle{font-size:28px;font-weight:1300;letter-spacing:.3px}
.groupFilters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sel{border:1px solid var(--border);background:rgba(0,0,0,.20);color:var(--text);border-radius:12px;padding:8px 10px;font-weight:900}
.smallLabel{font-size:11px;color:var(--muted);font-weight:1000;letter-spacing:.25px}
/* === Goals page: compact service boxes in responsive row === */
.goalsGrid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-top:12px}
.goalBox{padding:10px;flex:1 1 260px;max-width:340px;min-width:210px}
.goalBox .h2{font-size:18px}
.goalBox .sub{font-size:11px}
.goalBox input{font-size:12px}
/* === Goals page: single large editor box === */
.goalsBig{padding:16px;width:65%;max-width:988px;min-width:676px}
.goalsBigTop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.goalsH1{font-size:33px;font-weight:1200;letter-spacing:.6px;line-height:1;margin:0}
.goalsBigHeader{display:flex;justify-content:space-between;align-items:flex-end;margin-top:12px;padding:8px 0;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.ghService{font-size:11px;color:var(--muted);font-weight:1000;letter-spacing:.25px}
.ghMetricCol{display:flex;flex-direction:row;align-items:flex-end; gap:14px; margin-left:auto;}
.ghMetric{font-size:16px;color:var(--muted);font-weight:1000;letter-spacing:.25px;width:3.2em;text-align:center}
.goalsBigBody{margin-top:4px}
.goalRow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.10)}
.goalName{font-weight:1100;letter-spacing:.15px;flex:1;min-width:0;max-width:none;overflow:visible;text-overflow:clip;white-space:normal;line-height:1.12}
.goalFieldCol{display:flex;flex-direction:row;align-items:center; gap:14px; margin-left:auto;}
.gTitle{font-size:15px;font-weight:700;}
.gAvg{font-size:14px;color:rgba(127,200,255,.95);font-weight:500;margin-top:0;padding:3px 8px;}
.gAvgSold{color:rgba(190,255,210,.92)}
.goalRow.tight .gAvg{margin-top:0}
/* Title + info button side by side, top-aligned */
.goalTitleRow{display:flex;align-items:center;gap:8px;}
/* Info button wrapper — positions the popup relative to the button */
.goalInfoWrap{position:relative;display:inline-flex;align-items:center;}
/* Allow health-check popups to escape overflow:hidden panels */
.goalInfoWrap, .goalLeft, .goalTitleRow, .goalsQuads .goalRow, .goalQuadBody{overflow:visible !important;}
/* The ⓘ button */
.goalInfoBtn{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:50%;
border:1px solid rgba(255,255,255,.28);
background:rgba(255,255,255,.07);
color:rgba(200,220,255,.8);font-size:12px;line-height:1;
cursor:pointer;flex-shrink:0;padding:0;
transition:background .15s;
}
.goalInfoBtn:hover{background:rgba(255,255,255,.16);}
/* Popup — hidden by default, shown via .gipVisible */
.goalInfoPopup{
display:none;
position:fixed;
left:0;top:0;
z-index:9999;
min-width:200px;
background:#000;
border:1px solid rgba(255,255,255,.22);
border-radius:12px;
padding:10px 14px;
box-shadow:0 12px 40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);
pointer-events:none;
}
.goalInfoPopup.gipVisible{display:block;}
/* Goals page readability tweaks */
.goalName .gTitle{margin-bottom:0}
.gAvg{margin-top:0}
.gAvg.gAvgSold{margin-top:0}
.goalQuad.brakes .goalQuadBody{margin-top:6px}
.brakesGrid{display:grid;grid-template-columns:0fr 1fr 0fr;gap:10px;transition:grid-template-columns 260ms ease}
.brakesGrid.leftOpen{grid-template-columns:1fr 1fr 0fr}
.brakesGrid.rightOpen{grid-template-columns:0fr 1fr 1fr}
.brPanel{overflow:hidden;opacity:0;transform:translateX(-8px);transition:opacity 220ms ease, transform 220ms ease;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:10px}
.brPanel.right{transform:translateX(8px)}
.brakesGrid.leftOpen .brPanel.left{opacity:1;transform:translateX(0)}
.brakesGrid.rightOpen .brPanel.right{opacity:1;transform:translateX(0)}
.brPanelTitle{font-size:11px;font-weight:1100;letter-spacing:.25px;color:var(--text);margin-bottom:6px}
.brakesMain{min-width:0}
.brakesFooter{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.brakesFooter .btnMini{padding:6px 10px;border-radius:10px;font-size:11px}
.goalMini{width:3.2em;max-width:3.2em;text-align:center;padding:6px 6px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.20);color:var(--text);font-weight:1100;margin-right:75px;}
/* === Goals page: 4 quadrants (Maintenance / Fluids / Brakes / Tires) === */
.goalsBig.halfPage{width:92%;max-width:1700px;min-width:0}
.goalsQuads{display:grid;grid-template-columns:repeat(2,minmax(520px,1fr));gap:14px;margin-top:12px;align-items:start}
.goalQuad{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px;min-width:0;overflow:hidden}
.goalQuad.brakes{align-self:start}
.goalQuad.tires{align-self:start}
.hidden{display:none}
.goalQuadTitle{font-size:22px;font-weight:1200;letter-spacing:.4px;line-height:1.1;margin-bottom:8px;color:var(--text)}
.goalQuadBody{margin-top:4px}
.goalRow.tight{padding:4px 0}
.goalDivider{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.18);font-size:11px;color:var(--muted);font-weight:1000;letter-spacing:.25px}
/* === Goals quadrants: 50/50 two-container layout === */
.goalsQuads .goalQuadHeadRow{
display:flex;
align-items:flex-end;
padding-bottom:6px;
padding-left:30px;
border-bottom:1px solid rgba(255,255,255,.10);
margin-bottom:2px;
margin-right:0!important;
}
.goalsQuads .goalQuadHeadRow .ghName{opacity:0;}
.goalsQuads .goalRow{
display:flex;
align-items:center;
}
/* Left half: service name */
.goalLeft{
flex:0 0 50%;
min-width:0;
overflow:visible;
line-height:1.12;
}
/* Right half: flex row — grCol children divide space equally */
.goalRight{
flex:1 0 50%;
display:flex;
align-items:center;
margin-left:-70px;
}
.goalsQuads .goalQuadHeadRow .goalRight{
justify-content:space-evenly !important;
}
/* Each column cell — flex:1 centers its content regardless of content size */
.grCol{
flex:1;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
.goalRight .goalMini{width:2.4em;max-width:2.4em;height:2.4em;flex-shrink:0;font-size:16px;}
.goalRight .ghMetric{width:100%;text-align:center;}
/* brakes/tires: brLabelCol is auto-width between grCols; top-align for stacking */
.goalQuad.brakes .goalRow.brakeRow .goalRight,
.goalQuad.tires .goalRow.tireRow .goalRight{align-items:flex-start;}
.goalQuad.brakes .goalRow.brakeRow .grCol,
.goalQuad.tires .goalRow.tireRow .grCol{align-items:flex-start; padding-top:4px;}
.goalQuad.brakes .goalRow.brakeRow .brLabelCol,
.goalQuad.tires .goalRow.tireRow .brLabelCol{padding-top:4px;}
/* brakes/tires row outer align */
.goalQuad.brakes .goalRow.brakeRow,
.goalQuad.tires .goalRow.tireRow{align-items:start;}
@media (max-width:720px){
.goalLeft,.goalRight{flex-basis:50%;}
}
@media (max-width:980px){
.goalsBig.halfPage{width:100%;min-width:0}
}
@media (max-width:1100px){
.goalsQuads{grid-template-columns:1fr}
}
@media (max-width:720px){
.goalName{font-weight:1100;letter-spacing:.15px;flex:1;min-width:0;max-width:none;overflow:visible;text-overflow:clip;white-space:normal;line-height:1.12}
}
.fluidsGrid{margin-top:0}
.goalBoxInner{padding:10px;flex:1 1 260px;max-width:340px;min-width:210px}
@media (max-width:720px){
.goalBox,.goalBoxInner{min-width:180px;flex-basis:180px}
}
/* === Goals quadrants: equal sizing (JS sets explicit height) === */
.goalQuad{height:auto}
.goalQuad.equalH{}
/* Label column: stacks RED/YELLOW labels vertically */
.brLabelCol{display:flex;flex-direction:column;gap:6px;align-items:flex-end;justify-content:flex-start;flex-shrink:0;font-size:16px;margin-right:0;}
.brLabelCol .brTag{white-space:nowrap; display:flex; align-items:center; justify-content:flex-end; height:2.4rem; font-size:10px;}
/* Input column: stacks two inputs vertically */
.brInputCol{display:flex;flex-direction:column;gap:6px;align-items:center;}
/* Faded yellow row when RY is off */
.goalQuad.brakes.ry-off .brLabelCol,
.goalQuad.tires.ry-off .brLabelCol{display:none;}
.goalQuad.brakes.ry-off .brYInp,
.goalQuad.tires.ry-off .brYInp{display:none;}
.goalQuad.brakes .rowDisabled .brLabelCol,
.goalQuad.tires .rowDisabled .brLabelCol{display:none;}
.goalQuad.brakes .brCell{display:flex;flex-direction:column;gap:6px}
.goalQuad.brakes .brLbl{font-size:10px;letter-spacing:.25px;color:var(--muted);opacity:.9}
.goalQuad.brakes .brLbl.red{color:rgba(255,255,255,.75)}
.goalQuad.brakes .brLbl.yellow{color:rgba(255,255,255,.55)}
.goalQuad.brakes .brLbl.hide{display:none}
.goalQuad.brakes .brY{opacity:.55}
.goalQuad.brakes .brY.hide{display:none}
.goalQuad.brakes .rowDisabled{opacity:.45}
.brApplyAllRow{display:flex;gap:10px;align-items:center;margin-top:2px;margin-bottom:6px;color:var(--text)}
.brApplyAllRow .q{font-weight:1100;letter-spacing:.2px;font-size:11px}
.brApplyAllRow label{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--text)}
/* === Fluids goals: universal + animated individual grid === */
.fluidsRowWrap{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-top:12px;--fluidsUniH:300px;--fluidsMiniH:calc(var(--fluidsUniH) / 2)}
.goalBox.fluidsUniversal{height:var(--fluidsUniH)}
.fluidsModeRow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.fluidsModeQ{font-size:11px;color:var(--muted);font-style:italic;flex:1}
.fluidsModeToggle{display:flex;align-items:center;gap:8px}
.tLbl{font-size:11px;color:var(--muted);font-weight:900}
.switch{position:relative;display:inline-block;width:38px;height:20px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.18);transition:.2s;border-radius:999px}
.slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background:#fff;transition:.2s;border-radius:50%}
.switch input:checked + .slider{background:rgba(96,165,250,.35)}
.switch input:checked + .slider:before{transform:translateX(17px)}
.fluidsIndWrap{overflow:hidden;max-width:0;opacity:0;transform:translateX(-10px);transition:max-width .28s ease, opacity .2s ease, transform .28s ease}
.fluidsIndWrap.open{max-width:2000px;opacity:1;transform:translateX(0)}
.fluidsIndGrid{display:grid;grid-template-columns:repeat(2,minmax(210px,340px));grid-auto-rows:var(--fluidsMiniH);gap:10px}
.goalBox.fluidMini{max-width:340px;min-width:210px;height:var(--fluidsMiniH);padding:8px;opacity:0;transform:translateY(6px);animation:fluidPop .22s ease forwards}
.fluidsIndWrap.open .goalBox.fluidMini{opacity:1}
@keyframes fluidPop{to{opacity:1;transform:translateY(0)}}
.miniTop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.miniTitle{font-weight:1100;font-size:12px}
.miniMode{display:flex;align-items:center;gap:6px}
.miniLbl{font-size:10px;color:var(--muted);font-weight:900}
.miniSwitch{position:relative;display:inline-block;width:30px;height:16px}
.miniSwitch input{opacity:0;width:0;height:0}
.miniSlider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.18);border-radius:999px;transition:.2s}
.miniSlider:before{content:"";position:absolute;width:12px;height:12px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.2s}
.miniSwitch input:checked + .miniSlider{background:rgba(245,158,11,.30)}
.miniSwitch input:checked + .miniSlider:before{transform:translateX(14px)}
.miniGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.miniGrid label{font-size:10px}
.miniGrid input{font-size:11px;padding:6px 8px}
.miniFoot{display:flex;justify-content:flex-end;margin-top:8px}
.serviceCard .techList{margin-top:10px;border-top:1px dashed rgba(255,255,255,.12);padding-top:8px}
.serviceCard .techList .techRow{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;color:var(--text)}
.serviceCard .techList .techRow a{color:var(--text);text-decoration:none;font-size:13px;font-weight:500;opacity:.9}
.serviceCard .techList .techRow .mini{color:var(--muted);font-size:13px;font-weight:700;opacity:1}
/* ServicesHome technician list: keep name + stats on ONE line */
.serviceCard .techList .techRow{align-items:center;flex-wrap:nowrap;min-width:0}
.serviceCard .techList .techRowLeft{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.serviceCard .techList .techRowLeft a{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.serviceCard .techList .techRow .mini{white-space:nowrap;flex:0 0 auto}
/* === Tile legibility fix (labels above values) === */
.statTile{display:flex;flex-direction:column;justify-content:center}
.statTile .tLbl{margin:0 0 6px 0 !important;line-height:1.05 !important}
.statTile .tVal{margin:0 !important;line-height:1.05 !important}
/* === Checkbox-driven menu (works even if JS fails) === */
.menuToggle{position:absolute;opacity:0;pointer-events:none}
#menuToggle:checked ~ .sideMenu{display:flex}
#menuToggle:checked ~ .menuScrim{display:block}
.hamburger{display:flex;align-items:center;justify-content:center;z-index:80}
.sideMenu{z-index:90}
.menuScrim{z-index:85;cursor:pointer}
.menuClose{display:flex;align-items:center;justify-content:center;cursor:pointer}
/* clickable hamburger */
.hamburger{pointer-events:auto;position:relative;z-index:120}
.rankNum{display:inline-block;min-width:18px;text-align:right;margin-right:8px;opacity:.8;font-weight:700;padding-bottom:1px}
.techRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.techRowLeft{display:flex;align-items:center;min-width:0}
.techRowLeft a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
/* === Filter/Search icon bar + collapsible filter panels === */
.iconBar{display:flex;gap:10px;align-items:center;margin-top:10px}
.pushRight{margin-left:auto}
.appliedInline{display:flex;gap:6px;flex-wrap:wrap;align-items:center;max-width:calc(100% - 120px)}
.filtersText{font-size:12px;color:var(--muted);font-weight:900;line-height:1.2}
.filtersText i{font-style:italic}
.appliedPill{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.14);font-size:12px;font-weight:900;color:var(--muted);white-space:nowrap}
.techH2{font-size:22px;line-height:1.05;}
.iconBtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.iconBtn:hover{background:rgba(0,0,0,.35)}
.trendArrowBtn{
cursor: pointer; background: none; border: none;
padding: 2px 3px; margin: 0 -2px 0 0;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; border-radius: 0; outline: none;
transition: background 120ms, transform 120ms, filter 120ms !important;
}
.trendArrowBtn:hover{background:rgba(255,255,255,.12) !important;transform:scale(1.18) !important;filter:brightness(1.3) !important}
.trendArrowBtn svg{display:block;flex-shrink:0;padding-top:0;}
/* ── Trend arrow positioning wrappers (large/xl focus stats) ── */
.trendArrowWrap{
position: relative;
display: inline-flex;
align-items: center;
}
.trendArrowPos{
position: absolute;
right: calc(100% + 3px);
}
.trendArrowPos-xl{
right: calc(100% + 5px);
}
.iconBtn svg{width:18px;height:18px;display:block}
.ctlPanel{display:none;margin-top:10px}
.ctlPanel.open{display:block}
/* === Technician search modal === */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-start;justify-content:center;padding:90px 14px;z-index:220}
.modal.open{display:flex}
.modalCard{width:min(760px,100%);background:rgba(9,14,26,.98);border:1px solid var(--border);border-radius:18px;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.modalHdr{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.modalTitle{font-weight:1200;letter-spacing:.2px}
.modalList{margin-top:10px;max-height:58vh;overflow:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.resItem{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);text-decoration:none;color:var(--text);font-weight:900}
.resItem:hover{background:rgba(0,0,0,.28)}
.resBadge{font-size:11px;color:var(--muted);font-weight:1100;letter-spacing:.2px;white-space:nowrap}
@media (max-width: 980px){
.goalsBig{width:100%;max-width:none;min-width:0}
}
@media (max-width: 720px){
.goalName{font-weight:1100;letter-spacing:.15px;flex:1;min-width:0;max-width:none;overflow:visible;text-overflow:clip;white-space:normal;line-height:1.12}
}
/* ===== Goals: Brakes (4-field rows) ===== */
.goalQuad.brakes.compact .goalQuadBody{padding:6px 0}
.brakeRow .goalFieldCol{display:none} /* hide legacy col if present */
.brakeFields{width:100%; max-width: 210px; display:flex; flex-direction:column; gap:4px; justify-content:flex-start}
.brRYTop{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px}
.brRYLeft{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px}
.brRYRight{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px}
.qMark{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:99px; border:1px solid rgba(255,255,255,.22); font-size:11px; line-height:1}
.switch.sm{width:34px; height:18px}
.switch.sm .slider:before{height:14px; width:14px; left:2px; bottom:2px}
.switch.sm input:checked + .slider:before{transform:translateX(16px)}
.brColorHdr{font-size:10px; letter-spacing:.06em; color:var(--muted); margin-top:2px}
.brColorHdr.red{color:rgba(255,90,90,.9)}
.brColorHdr.yellow{color:rgba(255,210,90,.9)}
.brColorHdr.hide{display:none}
.brInputsRow{display:grid; grid-template-columns: 1fr 1fr; gap:6px}
.brGlobalRow{margin-top:6px}
.brCell{display:flex; flex-direction:column; gap:6px}
.brLine{position:relative; display:flex; align-items:center; justify-content:flex-start; min-width:0}
.brTag{font-size:10px; letter-spacing:.06em; color:var(--muted); pointer-events:none; white-space:nowrap;}
.brTag.red{color:rgba(255,90,90,.9)}
.brTag.yellow{color:rgba(255,210,90,.9)}
.goalQuad.brakes .rowDisabled .brLabelCol .brTag.yellow,
.goalQuad.tires .rowDisabled .brLabelCol .brTag.yellow{display:none}
.goalQuad.brakes .rowDisabled .brYInp,
.goalQuad.tires .rowDisabled .brYInp{display:none}
.brLine.disabled{opacity:.45}
.brLine.disabled input{pointer-events:none}
.yellowRow.disabled{opacity:.45}
.rowDisabled{opacity:.45}
.rowDisabled .goalInput{pointer-events:none}
.brApplyAll{margin-top:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11px; color:var(--muted)}
.brApplyLbl{font-weight:600; color:rgba(255,255,255,.78)}
.brRadio{display:inline-flex; align-items:center; gap:6px}
/* === Goals (computed pills + notes) === */
.goalsTitleRow{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.goalsPillsWrap{display:flex;align-items:center;gap:6px;margin-top:0}
.goalQuadTop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.goalQuadTopRight{display:flex;align-items:center;gap:6px}
.pillsMini{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pillMini{display:inline-flex;gap:6px;align-items:baseline;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.pillMini .k{font-size:13px;color:rgba(234,240,255,.7) !important;opacity:0.7 !important;font-weight:900;letter-spacing:.2px}
.pillMini .v{font-size:16px;color:#eaf0ff !important;opacity:1 !important;font-weight:1000;line-height:1}
.pillMini.sold{border-color:rgba(190,255,210,.22)}
.serviceAvgs{gap:6px}
.gTitleRow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.aster{color:rgba(255,80,80,.95);font-weight:1200}
.goalNote{color:rgba(255,80,80,.95);font-style:italic;font-size:12px;margin-top:6px}
.brNote{margin-top:6px;margin-bottom:6px}
.goalsH1{font-weight:1400}
.goalQuadTitle{font-weight:1400}
/* Make metric column-header labels bold */
.ghMetric{font-size:11px;color:var(--muted);font-weight:1200;letter-spacing:.25px;width:3.2em;text-align:center}
.menuSub{margin-left:10px;margin-top:8px}
.menuSub summary{font-size:13px;opacity:.9}
.menuTechLink{padding-left:14px;font-size:13px;opacity:.95}
.mIcon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;opacity:.9;vertical-align:middle;flex:0 0 18px}
.menuLink.topLink{margin:8px 10px 12px 10px}
.asrIcon{color:#cfd6e6;}
.asrSvg{display:block;width:18px;height:18px;}
.miniGauge{display:inline-block;width:34px;height:18px;position:relative;overflow:hidden;vertical-align:middle;margin-left:8px}
.miniGauge::before{content:"";position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
background:conic-gradient(from 180deg, rgba(255,60,60,.95) 0 60%, rgba(255,210,70,.95) 60% 80%, rgba(90,220,120,.95) 80% 100%, rgba(0,0,0,0) 0);
}
.miniGauge .needle{position:absolute;left:50%;top:18px;width:2px;height:13px;background:rgba(255,255,255,.95);
transform-origin:bottom center;transform:translateX(-50%) rotate(calc(-90deg + (var(--p,0) * 1.8deg)));
transition:transform .45s ease;
border-radius:2px;
}
.svcGaugeWrap{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:var(--sz,64px);height:var(--sz,64px)}
.svcGauge{width:var(--sz,64px);height:var(--sz,64px);position:relative;display:inline-block;--gCol:rgba(255,80,80,.95);--p:0;--sz:64px}
.svcGauge svg{width:var(--sz,64px);height:var(--sz,64px);display:block;transform:rotate(-90deg)}
.svcGauge .bg{fill:none;stroke:rgba(255,255,255,.14);stroke-width:5}
.svcGauge .fg{fill:none;stroke:var(--gCol);stroke-width:5;stroke-linecap:round;
stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--p));
transition:stroke-dashoffset .65s cubic-bezier(.2,.9,.2,1);
filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.svcGauge .pctText{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:calc(var(--sz,64px)/5.2);font-weight:1000;letter-spacing:.2px;color:rgba(255,255,255,.9)
}
.svcGauge.gGreen{--gCol:rgba(90,220,120,.95)}
.svcGauge.gYellow{--gCol:rgba(255,210,60,.95)}
.svcGauge.gOrange{--gCol:rgba(249,115,22,.95)}
.svcGauge.gRed{--gCol:rgba(255,80,80,.95)}
/* Technician service tile: two stacked metric blocks */
.metricStack{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.metricBlock{display:flex;gap:14px;padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.mbLeft{flex:0 0 130px;display:flex;flex-direction:column;justify-content:center}
.mbKicker{font-size:12px;color:var(--muted);font-weight:900;letter-spacing:.35px;margin-bottom:6px}
.mbStat{font-size:30px;font-weight:1200;line-height:1}
.mbRight{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.mbRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mbItem{min-width:0}
.mbLbl{font-size:13px;color:var(--muted);font-weight:900}
.mbNum{font-size:15px;font-weight:1100;color:rgba(255,255,255,.92)}
.mbNote{margin-left:auto;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-size:11px;opacity:.92;font-weight:600}
.mbGauge{display:flex;align-items:center;justify-content:center}
.mbGauge .svcGauge{--sz:56px}
.mbGauge .pctSub{display:none}
.tVal{display:flex;align-items:center;justify-content:center;gap:8px}
.tVal .num{display:inline-block}
/* Tech details custom header */
body.route-tech .top{display:none !important;}
body.route-tech .techH2{font-size:33px;line-height:1.05;}
@media (max-width: 820px){ body.route-tech .techH2{font-size:26px;} }
body.route-tech .techHeaderPanel{display:block;width:50%;max-width:50%;min-width:420px;}
@media (max-width: 820px){ body.route-tech .techHeaderPanel{display:block;min-width:0;width:100%;max-width:100%;} }
.techTitleRow{display:flex;align-items:flex-start;gap:14px}
.techTitleLeft{display:flex;align-items:center;gap:10px;padding-top:6px;flex:0 0 auto}
.hamburgerMini{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:14px;
border:1px solid rgba(200,45,45,.45);background:linear-gradient(180deg,var(--card),var(--card2));color:var(--text);cursor:pointer;
font-size:32px;line-height:1}
/* Old floating hamburger notches — hidden globally.
pageTopBar hamburger covers desktop; mobileTopBar hamburger covers mobile. */
.techMenuFloat,.trMenuFloat,.advMenuNotch{display:none !important;}
.brandLogoMini{display:none !important;}
/* === Side hamburger: shown at >1440px, hidden otherwise === */
.sideHamburger{
display:none;
position:fixed;
/* Horizontal position is CSS-only — JS never touches left.
scrollbar-gutter:stable on html ensures vw and margin:auto always agree,
eliminating the scrollbar-width/2 drift that previously caused the button
to touch or overlap the panel.
panel_left = max(80px, 50vw − 720px) [wrap-pad(14) + app-margin(66)]
button needs: panel_left − 66px (58px wide + 8px gap)
= max(14px, calc(50vw − 786px)) */
left:max(14px, calc(50vw - 786px));
top:49px; /* wrap.pad(14) + topBar.h(33) + collapsed-margins(-10+12=2) = 49 */
width:58px;height:58px;
border-radius:14px;
border:1px solid rgba(200,45,45,.45);
background:linear-gradient(180deg,var(--card),var(--card2));
color:var(--text);
cursor:pointer;
z-index:80;
align-items:center;justify-content:center;
transition:background .12s;
-webkit-tap-highlight-color:transparent;
}
.sideHamburger:hover{background:rgba(255,255,255,.12);}
body.login-active .sideHamburger{display:none !important;}
@media (min-width:1441px){
.sideHamburger{display:flex;}
.pageTopBarHamburger{display:none !important;}
/* margin-left required at ALL widths >=1441px —
without it the button overlaps panels at every viewport width */
#app{margin-left:66px;}
}
.techNameWrap{flex:1 1 auto;min-width:0}
.techH2Big{font-size:32px;font-weight:1000;line-height:1.05;letter-spacing:.2px}
.techH2Big .teamDot{opacity:.7;font-weight:900}
.techTeamLine{margin-top:6px;font-size:20px;font-weight:900;opacity:.75;letter-spacing:.15px;text-transform:uppercase}
@media (max-width: 820px){
.techH2Big{font-size:26px}
.brandLogoMini{height:28px}
}
.catRank .rankNum{font-size:26px;font-weight:1100;opacity:1;margin:0}
.catRank .rankDen{font-size:inherit;opacity:1;margin-left:0}
.catRank .rankLbl{font-size:8px;opacity:.7;font-weight:900;letter-spacing:.4px;margin-top:4px}
body.route-tech .catTitle{font-size:30px;font-weight:var(--HB);line-height:1.06;letter-spacing:.2px} /* -25% scoped to tech details */
/* === Global typography consistency (v192) === */
:root{
--hdr1:33px; /* main header (matches technician name) */
--hdr2:25px; /* ~75% of hdr1 */
--hdr3:17px; /* ~50% of hdr1 */
--hdrW:900; /* bold */
}
@media (max-width: 820px){
:root{
--hdr1:26px;
--hdr2:20px;
--hdr3:14px;
}
}
/* Main headers */
.techH2,
.goalsH1,
.teamTitle{
font-size:var(--hdr1) !important;
font-weight:var(--hdrW) !important;
letter-spacing:.2px;
}
/* Section / category headers */
.sectionTitle,
.catTitle,
.goalQuadTitle{
font-size:var(--hdr2) !important;
font-weight:var(--hdrW) !important;
letter-spacing:.3px !important;
}
/* Subsection headers (services etc.) */
.groupTitle,
.miniTitle{
font-size:var(--hdr3) !important;
font-weight:var(--hdrW) !important;
}
/* Rankings follow same hierarchy */
.detailRank,
.rankUnder{
font-size:var(--hdr2) !important;
font-weight:var(--hdrW) !important;
}
.catRank,
.rankNum{
font-size:var(--hdr3) !important;
font-weight:var(--hdrW) !important;
}
/* Keep labels readable but bold */
.rankLbl{
font-weight:var(--hdrW) !important;
}
/* === Typography scale override (v194 reset) === */
:root{
/* Use technician name size as the baseline "Main Header" */
--H1:33px;
/* Next section a little smaller */
--H2:26px;
/* Subsections a little smaller than that */
--H3:22px;
/* Standard bold (avoids weird ultra-heavy rendering differences) */
--HB:900;
}
/* Generic header tags */
h1{font-size:var(--H1);font-weight:var(--HB);letter-spacing:.2px}
h2{font-size:var(--H2);font-weight:var(--HB);letter-spacing:.2px}
h3{font-size:var(--H3);font-weight:var(--HB);letter-spacing:.2px}
/* App-specific titles */
.techH2Big,.teamTitle,.goalsH1,.techH2{font-size:var(--H1)!important;font-weight:var(--HB)!important}
.catTitle,.route-tech .catTitle{font-size:30px;font-weight:var(--HB);line-height:1.06;letter-spacing:.2px}
.svcName{font-size:var(--H2)!important;font-weight:var(--HB)!important;letter-spacing:.25px;line-height:1.08}
/* Rankings: always bold; size matches the context (category rank uses H2) */
.catRank{font-size:var(--H2)!important}
/* === Typography scale override (v195) ===
Goal: reduce section size (H2) and increase subsection size (H3)
so hierarchy reads: H1 > H2 > H3, with small, even steps.
*/
:root{
--H1:33px; /* main header */
--H2:23px; /* section/category header (smaller than v194) */
--H3:20px; /* subsection/service header (larger than v194) */
--HB:900;
}
@media (max-width: 820px){
:root{
--H1:28px;
--H2:20px;
--H3:18px;
}
}
/* Ensure the three levels are enforced everywhere */
h1{font-size:var(--H1)!important;font-weight:var(--HB)!important}
h2{font-size:var(--H2)!important;font-weight:var(--HB)!important}
h3{font-size:var(--H3)!important;font-weight:var(--HB)!important}
/* App titles */
.techH2Big,.teamTitle,.goalsH1,.techH2{font-size:var(--H1)!important;font-weight:var(--HB)!important}
.sectionTitle,.catTitle,.goalQuadTitle{font-size:var(--H2)!important;font-weight:var(--HB)!important}
.svcName,.serviceName,.svcTitle{font-size:var(--H2)!important;font-weight:var(--HB)!important;line-height:1.08}
/* Rankings: bold; size follows the header level they sit with */
.rankNum{font-weight:var(--HB)!important}
.catCounts b{font-weight:var(--HB)}
.catCounts b:last-child{font-size:1.45em}
.serviceName{font-size:var(--H2)!important;font-weight:var(--HB)!important;line-height:1.08}
.phead b{font-weight:var(--HB)!important;font-size:1.35em;letter-spacing:.2px}
.phead .tag{font-weight:var(--HB)!important}
/* ---- Typography overrides (v199) ---- */
.catHeader .muted b{font-weight:var(--HB)!important}
.catHeader .muted b:nth-of-type(2){font-size:1.35em}
/* ---- Service tile header (v200) ---- */
.catHeader .muted{font-weight:var(--HB)!important}
.catHeader .muted b{font-weight:var(--HB)!important}
.catHeader .muted b:nth-of-type(2){font-size:1.35em}
.catRank .rankNum,.catRank .rankLbl{font-weight:var(--HB)!important}
/* ===== v201 fixes ===== */
/* 1) Service tile header: swap rank and dial (rank left, dial right) */
.catHeader{justify-content:flex-start!important}
.catHeader .catRank{order:0!important}
.catHeader > div:nth-child(2){order:1!important}
.catHeader .svcGaugeWrap{order:2!important;margin-left:auto}
/* 2) Service tile ranking larger */
.catRank .rankNum{font-size:28px!important;font-weight:var(--HB)!important;line-height:1}
.catRank .rankDen{font-size:16px!important;font-weight:var(--HB)!important}
.catRank .rankLbl{font-size:12px!important;font-weight:var(--HB)!important;letter-spacing:.3px}
/* 3) Revert Sold count under service title back to original size (keep bold) */
.catHeader .muted b{font-weight:var(--HB)!important}
.catHeader .muted b:nth-of-type(2){font-size:1em!important}
/* 4) Category (section) header ASR% and Sold% bigger */
.phead .big{font-size:34px!important;font-weight:var(--HB)!important;line-height:1}
.phead .tag{font-weight:var(--HB)!important}
.phead .titleRow > div:last-child{font-weight:var(--HB)!important}
.phead .titleRow > div:last-child b{font-size:1.25em!important;font-weight:var(--HB)!important}
/* ===== v202 ranking + dial layout ===== */
/* Put dial to the left of ranking, both on far right */
.catHeader{justify-content:flex-start!important}
.catHeader > div:nth-child(2){order:0!important} /* title block */
.catHeader .svcGaugeWrap{order:1!important;margin-left:auto!important}
.catHeader .catRank{order:2!important;margin-left:14px!important}
/* Make both sides of ranking the same size (2/5) */
.catRank .rankNum,
.catRank .rankDen{font-size:28px!important;font-weight:var(--HB)!important;line-height:1}
/* ---- Top Performer name under label (v209) ---- */
.mbSub{margin-top:2px;font-size:11px;opacity:.85;font-weight:650}
.mbSub{font-style:italic}
/* ===== v211: service tile typography ===== */
.catTitle{font-size:20px!important;letter-spacing:.15px}
.catCounts{font-weight:500!important;text-transform:none!important}
.catCounts b{font-weight:500!important}
/* ===== v212: collapsible category sections ===== */
.secHeadRow{display:flex;align-items:center;gap:10px}
.secHeadRow:hover .secToggle{filter:brightness(1.25)}
.secToggle{
width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
border-radius:10px;border:1px solid var(--border);
background:rgba(0,0,0,.18);color:var(--text);
font-weight:900;cursor:pointer;user-select:none;
}
.secToggle:hover{filter:brightness(1.1)}
/* ===== Tech / Advisor Detail: clean secToggle (match Services Dashboard) ===== */
body.route-tech .secHeadRow .secToggle,
body.route-advisor .secHeadRow .secToggle{
width:auto;height:auto;border:none;background:none;border-radius:0;padding:0;
color:rgba(255,255,255,.65);
font-size:22px;font-weight:900;
transition:color 120ms;
}
body.route-tech .secHeadRow:hover .secToggle,
body.route-advisor .secHeadRow:hover .secToggle{color:#fff;}
body.route-tech .secHeadRow .secToggle,
body.route-tech .secHeadRow .techH2,
body.route-advisor .secHeadRow .secToggle,
body.route-advisor .secHeadRow .techH2{cursor:pointer;}
.secCollapsed .list{display:none!important}
/* ===== v213: target ~4 service tiles per row ===== */
.categoryGrid{
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))!important;
gap:12px!important;
}
@media (max-width: 1300px){
.categoryGrid{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))!important;}
}
@media (max-width: 980px){
.categoryGrid{grid-template-columns:1fr!important;}
}
/* ---- v214 top performer gauge ---- */
.mbRow{display:flex;align-items:center;justify-content:space-between}
/* ===== v219: dial stat label under dial ===== */
.svcGaugeLbl{margin-top:4px;text-align:center}
.svcGaugeLbl em{font-style:italic;font-size:11px;opacity:.80;font-weight:650;letter-spacing:.2px}
.svcGaugeCol .svcGaugeLbl{margin-top:4px}
/* ===== v221: keep dial in original header position (between title and rank) ===== */
.catHeader{display:flex;align-items:flex-start!important}
.catHeader .catTitleBlock{order:0!important}
.catHeader .svcGaugeWrap{order:1!important;margin-left:auto!important;margin-right:14px!important}
.catHeader .catRank{order:2!important;margin-left:0!important}
/* ===== v222: stat label centered inside dial ===== */
.pctStack{flex-direction:column;gap:2px}
.pctMain{font-size:calc(var(--sz,64px)/5.2);font-weight:1000;line-height:1}
.pctSub{font-size:10px;opacity:.80;font-style:italic;font-weight:650;letter-spacing:.2px;line-height:1}
/* ===== v240: dial text with arrow + short label ===== */
.pctStack2{display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center}
.pctStack2 .pctMain{font-size:calc(var(--sz,64px)/5.1);font-weight:1000;line-height:1}
.pctStack2 .pctArrow{
margin-top:2px;
font-size:calc(var(--sz,64px)/6.0);
line-height:1;
font-weight:1200;
color:var(--gCol);
filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.pctStack2 .pctSub{font-size:10px;opacity:.80;font-style:normal;font-weight:900;letter-spacing:.3px;line-height:1}
/* ===== v231: watermark ===== */
#buildWatermark{
position:fixed;top:14px;right:14px;z-index:2147483647;
padding:10px 14px;border-radius:14px;
font-weight:1000;letter-spacing:1px;font-size:16px;
border:2px solid rgba(255,255,255,.35);
background:rgba(0,0,0,.45);color:#fff;
backdrop-filter: blur(10px);
pointer-events:none;
}
/* ===== v273_UNIQUE: service tile meta line not bold ===== */
.svcMetaLine{font-weight:500 !important; letter-spacing:.2px; }
/* ===== v276_UNIQUE: reposition category header dials (per reference layout) ===== */
/* Keep category header compact and stable */
.route-tech .secHdrRow{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.route-tech .secHdrLeft{flex:1 1 auto;min-width:520px}
.route-tech .secHdrTop{display:flex;align-items:center;gap:12px}
.route-tech .secHeadRow{display:flex;align-items:center;gap:10px}
/* Place the 3 small dials AFTER the filter description line, pushed to the right */
.route-tech .secSubRow{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
flex-wrap:nowrap;
}
.route-tech .secSubRow .sub{
flex:1 1 auto;
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.route-tech .secMiniDials{
flex:0 0 auto;
display:flex;
align-items:center;
gap:18px; /* spacing so they don't crowd */
}
/* Focus dial immediately LEFT of the ASR/Sold stats stack */
.route-tech .secHdrRight{
display:flex;
align-items:center;
justify-content:flex-end;
gap:22px;
flex:0 0 auto;
}
.route-tech .secFocusDial{order:0; margin:0}
.route-tech .svcSecFocusStats{order:0; text-align:right}
/* Responsive: stack filter line + dials on small widths */
@media (max-width: 980px){
.route-tech .secHdrLeft{min-width:unset}
.route-tech .secSubRow{flex-direction:column; align-items:flex-start}
.route-tech .secSubRow .sub{white-space:normal; overflow:visible}
}
/* ===== v277_UNIQUE: category header dial sizing & spacing to match reference ===== */
/* Small dials */
.route-tech .secMiniDials .svcGaugeWrap{--sz:74px; width:var(--sz); height:var(--sz); flex:0 0 var(--sz);}
.route-tech .secMiniDials .svcGauge{--sz:74px !important; width:var(--sz) !important; height:var(--sz) !important;}
.route-tech .secMiniDials{gap:28px !important;}
/* Focus dial ~2x small, visually like reference */
.route-tech .secFocusDial .svcGaugeWrap{--sz:148px; width:var(--sz); height:var(--sz); flex:0 0 var(--sz);}
.route-tech .secFocusDial .svcGauge{--sz:90px !important; width:var(--sz) !important; height:var(--sz) !important;}
.route-tech .secHdrRight{gap:12px !important;}
/* Keep header height consistent so big dial doesn't clip */
.route-tech .panel .phead{overflow:visible}
/* ===== v278_UNIQUE: force dial order + sizing (high specificity) ===== */
.route-tech .secHdrRight{display:flex !important; align-items:center !important; gap:12px !important;}
.route-tech .secHdrRight .secFocusDial{order:0 !important;}
.route-tech .secHdrRight .svcSecFocusStats{order:0 !important; text-align:right !important;}
.route-tech .secHdrRight .secHdrRank{order:1 !important;}
/* small dials */
.route-tech .secHdrLeft .secMiniDials .svcGauge{--sz:74px !important; width:74px !important; height:74px !important;}
.route-tech .secHdrLeft .secMiniDials .svcGaugeWrap{--sz:74px !important; width:74px !important; height:74px !important; flex:0 0 74px !important;}
.route-tech .secHdrLeft .secMiniDials{gap:28px !important;}
/* focus dial 2x */
.route-tech .secHdrRight .secFocusDial .svcGauge{--sz:90px !important; width:90px !important; height:90px !important;}
.route-tech .secHdrRight .secFocusDial .svcGaugeWrap{--sz:148px !important; width:148px !important; height:90px !important; flex:0 0 148px !important;}
/* ===== v279_UNIQUE: ensure dial wrappers exist + enforce reference sizing ===== */
.route-tech .secMiniDials{display:flex;align-items:center;gap:28px !important;}
.route-tech .secMiniDials .svcGaugeWrap{width:74px !important;height:74px !important;flex:0 0 74px !important;}
.route-tech .secMiniDials .svcGauge{--sz:74px !important;width:74px !important;height:74px !important;}
.route-tech .secHdrRight{display:flex;align-items:center;gap:12px !important;justify-content:flex-end;}
.route-tech .secFocusDial{order:0;}
.route-tech .svcSecFocusStats{order:0;}
.route-tech .secHdrRank{order:1;}
.route-tech .secFocusDial .svcGaugeWrap{width:90px !important;height:90px !important;flex:0 0 148px !important;}
.route-tech .secFocusDial .svcGauge{--sz:90px !important;width:90px !important;height:90px !important;}
/* === Tech details: Top/Bottom 3 panel (scoped; does not affect other pages) === */
.techHeaderWrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width: 980px){ .techHeaderWrap{grid-template-columns:1fr;} }
.techPickPanel{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid rgba(200,45,45,.45);border-radius:18px;overflow:hidden;box-shadow:0 0 14px rgba(200,40,40,.22),0 0 4px rgba(200,40,40,.14)}
.techPickPanel .phead{padding:12px}
.pickHdrRow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.pickHdrLabel{font-size:18px;font-weight:1000;letter-spacing:.2px;opacity:.92}
.pickGrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 680px){ .pickGrid2{grid-template-columns:1fr;} }
.pickBox{background:rgba(0,0,0,.33);border:1px solid rgba(234,240,255,.14);border-radius:14px;padding:10px}
.pickMiniHdr{font-size:16px;color:var(--muted);font-weight:800;letter-spacing:.2px;margin:0 0 8px 0}
.pickList{display:flex;flex-direction:column;gap:8px}
/* Use the same compact look as technician rows on category pages */
body.route-tech .techPickPanel .techRow{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
padding:6px 10px;
margin:0;
}
body.route-tech .techPickPanel .techRowLeft a{max-width:220px}
body.route-tech .techPickPanel .mini{font-size:12px}
/* Highlight target tile when clicked */
.flashPick{
outline:2px solid rgba(147,197,253,.75);
box-shadow:0 0 0 6px rgba(147,197,253,.12);
}
/* === v4: widen tech header + Top/Bottom panel (tech details only) === */
body.route-tech .techHeaderWrap{
grid-template-columns: 1.25fr 1.75fr; /* left header bigger, right panel even wider */
}
/* The tech name header panel was previously constrained to 50% width in older rules */
body.route-tech .techHeaderPanel{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
}
/* Make the tech header box feel larger */
body.route-tech .techHeaderPanel .phead{
padding:10px 14px 10px !important;
}
/* Slightly larger tech name on desktop */
body.route-tech .techH2Big{
font-size:36px !important;
}
@media (max-width: 820px){
body.route-tech .techH2Big{font-size:28px !important;}
}
/* Ensure right panel fills its grid column */
body.route-tech .techPickPanel{
width:100% !important;
}
/* === v5: equal-height header panels + larger Top/Bottom headings + thumbs icons === */
body.route-tech .techHeaderWrap{align-items:stretch;}
body.route-tech .techHeaderWrap > .panel{height:100%;}
body.route-tech .techHeaderPanel,
body.route-tech .techPickPanel{height:100%;}
body.route-tech .techHeaderPanel .phead{height:100%; display:flex; flex-direction:column;}
/* ensure the pills/filters don't force overflow weirdness */
body.route-tech .techHeaderPanel .pills{margin-top:auto;}
/* Make the Top/Bottom titles larger */
body.route-tech .pickMiniHdr{
font-size:16px;
font-weight:800;
letter-spacing:.25px;
text-align:left !important;
}
body.route-advisor .pickMiniHdr{
text-align:left !important;
}
/* Thumbs icons */
.thumbIcon{display:inline-flex; vertical-align:middle; margin-left:8px; transform:translateY(1px);}
.thumbIcon.up{color:rgba(34,197,94,.98);} /* green */
.thumbIcon.down{color:rgba(239,68,68,.98);} /* red */
/* === v6: Service tile stat line smaller + grey (tech details) === */
/* The line like: "0 ASR • 0 SOLD • 62 ROS" */
body.route-tech .svcMetaLine,
body.route-tech .catCounts,
body.route-tech .catHeader .meta,
body.route-tech .catTitle .meta{
color: var(--muted) !important;
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: .15px !important;
}
/* === Services: focus badges are EXACTLY 150% of mini badges === */
.secFocusDial .focusBadgePair .triBadge svg{
width:80px !important;
height:72px !important;
}
.secFocusDial .focusBadgePair .badgeCap.big{
font-size:18px !important;
line-height:1.05 !important;
letter-spacing:.25px !important;
}
/* === Rank badge (PROPORTION-LOCKED to your Paint mock) === */
.rankFocusBadge{
/* Size */
--w: 80px;
--h: 80px;
--r: 18px;
/* Geometry (these 3 are the only “proportion” knobs) */
--line1f: 0.25;
--line2f: 0.75;
--padX: 24px;
width: var(--w);
height: var(--h);
border-radius: var(--r);
border:1px solid rgba(255,255,255,.34);
background:
radial-gradient(120% 120% at 30% 15%, rgba(255,255,255,.14), rgba(0,0,0,0) 55%),
radial-gradient(140% 140% at 70% 85%, rgba(0,0,0,.62), rgba(0,0,0,0) 60%),
linear-gradient(180deg, rgba(18,30,58,.96), rgba(7,10,24,.97));
box-shadow:
0 34px 90px rgba(0,0,0,.78),
0 0 0 1px rgba(255,255,255,.10),
0 0 28px rgba(120,180,255,.12),
inset 0 0 0 1px rgba(255,255,255,.20),
inset 0 0 30px rgba(255,255,255,.10),
inset 0 -26px 34px rgba(0,0,0,.48);
position:relative;
display:block;
overflow:hidden;
}
/* divider lines */
.rankFocusBadge::before,
.rankFocusBadge::after{
content:"";
position:absolute;
left: var(--padX);
right: var(--padX);
height:1px;
background:rgba(255,255,255,.25);
pointer-events:none;
}
.rankFocusBadge::before{ top: calc(var(--h) * var(--line1f)); }
.rankFocusBadge::after{ top: calc(var(--h) * var(--line2f)); }
/* ASR% / SOLD% / GOAL% */
.rankFocusBadge .rfbFocus{
position:absolute;
top: calc(var(--h) * 0.05);
left:0;
right:0;
text-align:center;
font-size: calc(var(--h) * 0.1625);
font-weight:1100;
letter-spacing:.35px;
text-transform:none !important;
color:rgba(234,240,255,.90);
line-height:1;
}
/* # next to the big number (always rendered via pseudo-element to avoid stacking issues) */
.rankFocusBadge .rfbMain{
position:absolute;
top: calc(var(--h) * ((var(--line1f) + var(--line2f)) / 2));
left:0;
right:0;
transform:translateY(-50%);
text-align:center;
font-size: 36px;
height: 50px;
font-weight:1200;
line-height:1;
color:rgba(234,240,255,.96);
}
.rankFocusBadge .rfbMain::before{
content:"";
display:none;
position:absolute;
left: calc(50% - (var(--w) * 0.22));
top: 50%;
transform: translate(-50%,-35%);
font-size: calc(var(--h) * 0.14);
font-weight:1100;
line-height:1;
color:rgba(234,240,255,.90);
}
/* hide any legacy hash nodes if they exist in markup */
.rankFocusBadge .rfbHash{ display:none !important; }
/* of 5 centered between bottom divider and bottom edge */
.rankFocusBadge .rfbOf{
position:absolute;
top: calc(var(--h) * ((var(--line2f) + 1) / 2));
left:0;
right:0;
transform:translateY(-50%);
display:flex;
justify-content:center;
align-items:baseline;
gap: calc(var(--w) * 0.03);
line-height:1;
color:rgba(234,240,255,.90);
}
.rankFocusBadge .rfbOfWord{
font-size: calc(var(--h) * 0.145);
font-weight:1000;
color:rgba(234,240,255,.78);
}
.rankFocusBadge .rfbOfNum{
font-size: calc(var(--h) * 0.165);
font-weight:1100;
color:rgba(234,240,255,.92);
}
/* ── Small (catHeader rows — services dash + tech/advisor detail) ── */
.rankFocusBadge.sm{
--w: 78px;
--h: 78px;
--r: 18px;
--padX: 24px;
--line1f: 0.24;
--line2f: 0.76;
}
.rankFocusBadge.sm .rfbMain{
height: 44px;
}
/* ── Medium (section header rows) ── */
.rankFocusBadge.md{
--w: 86px;
--h: 86px;
--r: 18px;
--padX: 24px;
--line1f: 0.24;
--line2f: 0.76;
}
.rankFocusBadge.md .rfbMain{
font-size: 40px;
height: 44px;
}
.rankFocusBadge.md .rfbOfWord{
padding-bottom: 3px;
}
/* ── Large ── */
.rankFocusBadge.lg{
--w: 98px;
--h: 98px;
--r: 18px;
--padX: 24px;
--line1f: 0.24;
--line2f: 0.76;
}
.rankFocusBadge.lg .rfbMain{
font-size: 46px;
height: 50px;
}
.rankFocusBadge.lg .rfbOf{
padding-bottom: 3px;
}
/* prevent legacy x/x line from overlapping if present */
.overallBlock .big{ display:none !important; }
/* === Diag triangle badges (emoji-style SVG) === */
.diagTriBtn{ line-height:0; }
.diagTriSvg{ overflow:visible; }
.diagTriSvg text{ font-family: inherit; }
/* =====================================================================================
PIN ONLY: keep existing rank badge size/style exactly as-is.
This block ONLY ensures the badge stays inside the service tile header and
moves/shrinks with the tile (no separate sizing rules).
===================================================================================== */
/* Service tile header is the positioning context */
.catHeader{
display:flex;
align-items:flex-start;
gap:10px;
flex-wrap:nowrap;
min-width:0;
}
/* Allow the title/meta column to shrink so the badge stays inside the header */
.catHeader > div:nth-child(2){
flex:1 1 auto;
min-width:0;
}
/* Keep dial and rank on the right, and keep rank from wrapping out of the header */
.catHeader .svcGaugeWrap{
flex:0 0 auto;
}
.catHeader .catRank{
flex:0 0 auto;
display:flex;
align-items:flex-start;
justify-content:flex-end;
white-space:nowrap;
min-width:0;
}
/* Ensure the badge itself never stretches or wraps */
.catHeader .rankFocusBadge,
.catHeader .rankFocusBadge.sm{
flex:0 0 auto;
display:block;
}
/* Keep everything clipped inside the tile (prevents badge from floating outside) */
.catCard{overflow:hidden;}
/* ===============================
FIX: Tech Details header spacing + restore Top/Bottom 3 layout
- Remove equal-height stretching (it created blank space under filters)
- Ensure Top/Bottom panel uses original stacked ASR + SOLD layout
=============================== */
/* Stop forcing equal-height columns in the tech header row */
body.route-tech .techHeaderWrap{
align-items:flex-start !important;
}
/* ===============================
EXPRESS / KIA main headers: stat pills placement
- Move pills to the very top of the header row
- Nudge slightly to the right
=============================== */
.catHeaderSplit .catHdrMid{
align-self:flex-start;
justify-content:flex-start;
margin-top:-10px; /* pull pills to very top */
margin-left:14px; /* slight right nudge */
}
.catHeaderSplit .dashPills2Row{
margin-top:0;
}
body.route-tech .techHeaderWrap > .panel{
height:auto !important;
}
body.route-tech .techHeaderPanel,
body.route-tech .techPickPanel{
height:auto !important;
}
/* Let the tech header content size naturally (no giant empty area below filters) */
body.route-tech .techHeaderPanel .phead{
height:auto !important;
display:block !important;
}
body.route-tech .techHeaderPanel .pills{
margin-top:12px !important;
}
/* Restore Top/Bottom panel to the original behavior (ASR row over SOLD row) */
body.route-tech .techPickPanel .phead{
display:block !important;
grid-template-columns:unset !important;
gap:unset !important;
align-items:unset !important;
}
body.route-tech .techPickPanel .pickRow{
margin-top:14px !important;
}
body.route-tech .techPickPanel .pickRow:first-child{
margin-top:0 !important;
}
/* === FIX: Top/Bottom 3 rows too tall (force compact rows like reference) === */
body.route-tech .techPickPanel .pickBox{
height:auto !important;
min-height:0 !important;
}
body.route-tech .techPickPanel .pickList{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
height:auto !important;
}
body.route-tech .techPickPanel .pickList > .techRow{
flex:0 0 auto !important;
height:auto !important;
min-height:unset !important;
align-items:center !important;
}
body.route-tech .techPickPanel .techRow{
padding:6px 12px !important;
}
/* === FIX: ServicesHome diagSection phead top padding — match techHeaderPanel 14px top === */
body.route-servicesHome .techPickPanel.diagSection > .phead{
padding-top:15px !important;
}
/* === FIX: ServicesHome pickBox rows too tall — mirror route-tech compact rules === */
body.route-servicesHome .techPickPanel .pickBox{
height:auto !important;
min-height:0 !important;
}
body.route-servicesHome .techPickPanel .pickList{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
height:auto !important;
}
body.route-servicesHome .techPickPanel .pickList > .techRow{
flex:0 0 auto !important;
height:auto !important;
min-height:unset !important;
align-items:center !important;
}
body.route-servicesHome .techPickPanel .techRow{
padding:6px 12px !important;
width:100% !important;
box-sizing:border-box !important;
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:10px !important;
}
body.route-servicesHome .techPickPanel .techRowLeft{
flex:1 1 0 !important;
min-width:0 !important;
display:flex !important;
align-items:center !important;
overflow:hidden !important;
}
body.route-servicesHome .techPickPanel .techRowLeft a,
body.route-servicesHome .techPickPanel .techRowLeft .tbJump{
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
min-width:0 !important;
}
body.route-servicesHome .techPickPanel .techRow .mini{
flex:0 0 auto !important;
white-space:nowrap !important;
text-align:right !important;
margin-left:auto !important;
}
/* ===========================
ServicesHome list row fix
- Keep service name + metric on ONE row
- Do NOT affect Technician Dashboard lists
=========================== */
/* Service cards: prevent the left column from stacking name + mini on separate lines */
.serviceCard .techList .techRow{
align-items:center;
flex-wrap:nowrap;
}
/* If ServicesHome rows use a left wrapper (first child div) that stacks name + mini,
force it into a single-line row. */
.serviceCard .techList .techRow > div:first-child{
display:flex;
align-items:center;
gap:10px;
min-width:0; /* allow ellipsis */
}
/* Make sure the "mini" metric doesn't drop to a new line */
.serviceCard .techList .techRow > div:first-child .mini{
margin:0;
white-space:nowrap;
}
/* Keep the main label single-line (ellipsis if needed) */
.serviceCard .techList .techRow > div:first-child a,
.serviceCard .techList .techRow > div:first-child button,
.serviceCard .techList .techRow > div:first-child span,
.serviceCard .techList .techRow > div:first-child div{
white-space:nowrap;
}
/* Ellipsis for long service names */
.serviceCard .techList .techRow .tbJump,
.serviceCard .techList .techRow a{
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
}
/* Right side metric: never wrap */
.serviceCard .techList .techRow > .mini,
.serviceCard .techList .techRow > div:last-child{
white-space:nowrap;
}
/* ===========================
RenderTech Top/Bottom 3: keep each row on ONE line
- Scope tightly to Tech Details Top/Bottom panel only
=========================== */
/* Ensure the left side (rank + service name + %) stays on a single horizontal line */
body.route-tech .techPickPanel .pickList .techRow{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
flex-wrap:nowrap !important;
}
/* Left cluster: rank + name + mini metric inline */
body.route-tech .techPickPanel .pickList .techRow > div:first-child{
display:flex !important;
align-items:center !important;
min-width:0 !important; /* enable ellipsis */
}
/* Prevent the mini metric (ASR%/Sold%) from dropping to a 2nd line */
body.route-tech .techPickPanel .pickList .techRow > div:first-child .mini{
margin:0 !important;
white-space:nowrap !important;
}
/* Keep the service name to one line (ellipsis if too long) */
body.route-tech .techPickPanel .pickList .techRow a,
body.route-tech .techPickPanel .pickList .techRow .tbJump,
body.route-tech .techPickPanel .pickList .techRow .nm,
body.route-tech .techPickPanel .pickList .techRow span,
body.route-tech .techPickPanel .pickList .techRow button{
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
max-width:100% !important;
}
/* Right-side metric: never wrap */
body.route-tech .techPickPanel .pickList .techRow > .mini,
body.route-tech .techPickPanel .pickList .techRow > div:last-child{
white-space:nowrap !important;
}
/* =====================================================================================
FIX: ServicesHome technician list rows must be ONE LINE (ONLY .serviceCard .techList)
- ServicesHome service tiles render the meta (.mini) under the name, causing 2 rows.
- We keep everything on a single flex row: rank + name (ellipsis) + meta (no wrap).
===================================================================================== */
.serviceCard .techList .techRow{
flex-wrap:nowrap !important;
align-items:center !important;
}
/* The common ServicesHome structure: an inner wrapper containing rank + link + .mini */
.serviceCard .techList .techRow > div:first-child{
display:flex !important;
align-items:center !important;
gap:10px !important;
min-width:0 !important;
flex:1 1 auto !important;
}
/* If a dedicated left wrapper exists, treat it the same */
.serviceCard .techList .techRow .techRowLeft{
display:flex !important;
align-items:center !important;
gap:10px !important;
min-width:0 !important;
flex:1 1 auto !important;
}
/* Tech name: single line with ellipsis */
.serviceCard .techList .techRow a{
display:block !important;
min-width:0 !important;
flex:1 1 auto !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* Meta line: must stay inline on the SAME row */
.serviceCard .techList .techRow .mini{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
margin-left:auto !important;
white-space:nowrap !important;
}
.serviceCard .techList .techRow .mini *{white-space:nowrap !important;}
/* ===== ServicesHome ONLY: keep technician row truly one-line (prevent inner wrapping) ===== */
.serviceCard .techList .techRow{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
flex-wrap:nowrap !important;
min-width:0 !important; /* allow children to shrink/ellipsis */
}
.serviceCard .techList .techRowLeft{
display:flex !important;
align-items:center !important;
gap:10px !important;
min-width:0 !important;
flex:1 1 auto !important;
}
.serviceCard .techList .techRowLeft .rankNum{
flex:0 0 auto !important;
font-size:15px !important;
font-weight:700 !important;
opacity:.8 !important;
}
.serviceCard .techList .techRowLeft a{
flex:1 1 auto !important;
min-width:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* The right-side meta MUST NOT wrap to a second line */
.serviceCard .techList .techRow .mini{
flex:0 1 auto !important;
min-width:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-align:right !important;
}
/* If any
somehow sneaks in, hide it (forces one-line rendering) */
.serviceCard .techList .techRow .mini br{display:none !important;}
/* Technician Dashboard header: C1/C2/C3 on one row (3 equal columns) */
.techHeaderPanel .dashTopRow{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 14px;
align-items:start;
}
.techHeaderPanel .dashTopC{min-width:0;}
.techHeaderPanel .dashTopC1{display:flex; gap:10px; align-items:flex-start;}
.techHeaderPanel .dashTopC2{display:flex; justify-content:flex-start;}
.techHeaderPanel .dashTopC3{display:flex; justify-content:flex-end;}
/* Filters grid inside C2 */
.techHeaderPanel .dashFilters2x2{
display:grid;
grid-template-columns: max-content max-content;
gap:10px 12px;
align-items:start;
}
/* Make selects shrink to content */
.techHeaderPanel .dashFilters2x2 select{
width:auto;
min-width: 160px;
}
/* Pills container below title row */
.techHeaderPanel .dashPills .pills{margin-top:10px;}
/* === Technician Dashboard header adjustments (C1 pills under team line, C3 focus stats like category headers) === */
.techHeaderPanel .dashTopC1 .techNameWrap{display:flex;flex-direction:column;align-items:flex-start;}
.techHeaderPanel .dashTopC1 .dashPills{margin-top:10px;}
.techHeaderPanel .dashTopC1 .dashPills .pills{margin-top:0;}
/* Focus stats (C3) mimic category header panels */
.techHeaderPanel .dashFocusStats{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;}
.techHeaderPanel .dashFocusNum{font-size:36px;font-weight:1200;line-height:1;color:var(--text);}
@media (max-width:700px){ .techHeaderPanel .dashFocusNum{font-size:30px;} }
.techHeaderPanel .dashFocusNumSmall{font-size:28px;font-weight:1200;line-height:1;color:var(--text);}
@media (max-width:700px){ .techHeaderPanel .dashFocusNumSmall{font-size:24px;} }
.techHeaderPanel .dashFocusLbl{margin-top:0;font-size:11px;font-weight:1000;letter-spacing:.2px;color:var(--muted);}
/* Make Technician Dashboard focus stats bold (C3) */
.techHeaderPanel .dashTopC3 .focusStat .statVal,
.techHeaderPanel .dashTopC3 .focusStat .statLbl{
font-weight: 1000 !important;
}
/* ===== PATCH (2026-02-16): Tech header width shift + equal-height columns =====
- TechName panel 15% narrower, Diag panel 15% wider
- Force equal-height stretch between the two panels
This block is intentionally last to override earlier "Stop forcing equal-height" rules.
*/
body.route-tech .techHeaderWrap{
display:grid !important;
/* Give the diag section more horizontal room by shrinking the tech-name header column ~15% */
grid-template-columns: minmax(0,0.72fr) minmax(0,1.28fr) !important;
gap:14px !important;
align-items:stretch !important;
}
@media (max-width: 980px){
body.route-tech .techHeaderWrap{
grid-template-columns:1fr !important;
}
}
/* === Advisor Detail: stack header + pick panel on mobile === */
@media (max-width: 980px){
body.route-advisor .techHeaderWrap{
grid-template-columns:1fr !important;
}
}
body.route-tech .techHeaderWrap > .panel{
height:100% !important;
}
body.route-tech .techHeaderPanel,
body.route-tech .techPickPanel{
height:100% !important;
min-height:0 !important;
}
/* Tech header (left): keep content top-to-bottom without blank space weirdness */
body.route-tech .techHeaderPanel .phead{
height:100% !important;
display:flex !important;
flex-direction:column !important;
min-height:0 !important;
}
body.route-tech .techHeaderPanel .pills{
margin-top:12px !important; /* no forced 'auto' push */
}
/* Diag (right): allow internal scroll so Bottom 3 cannot be clipped */
body.route-tech .techPickPanel{
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
min-height:0 !important;
}
body.route-tech .techPickPanel .phead{
flex:1 1 auto !important;
min-height:0 !important;
overflow:auto !important;
}
/* === FORCE Tech panel widths (no body class dependency) === */
.techHeaderWrap{
display:grid !important;
grid-template-columns: 0.85fr 1.15fr !important;
align-items: stretch !important;
}
.techHeaderWrap > .panel{ min-width:0 !important; }
.techPickPanel{ overflow-x:hidden !important; }
.techPickPanel .phead{ overflow-x:hidden !important; }
/* === TECH DETAILS: give the diag section more horizontal room (prevents top-right cutoff) === */
/* NOTE: uses !important to override any inline grid-template-columns coming from renderTech.js */
.techHeaderWrap{
grid-template-columns: minmax(0,0.70fr) minmax(0,1.30fr) !important;
}
.techHeaderWrap > *{min-width:0}
.techHeaderWrap .techHeaderPanel,
.techHeaderWrap .techPickPanel{min-width:0}
/* avoid long rows forcing overflow inside the panel (panels have overflow:hidden) */
.techHeaderWrap .techPickPanel *{min-width:0}
/* === TECH DETAILS: enforce column-based sizing (shrink left panel width) ===
The left header panel previously had width/max-width set to 50% which prevents the grid
split from actually shrinking the panel. These overrides ensure the grid controls sizing. */
.techHeaderWrap .techHeaderPanel,
.techHeaderWrap .techPickPanel{
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
/* Slightly stronger shrink (~15% less than original 1fr/1fr split) */
.techHeaderWrap{
display: grid !important;
grid-template-columns: minmax(0,0.72fr) minmax(0,1.28fr) !important;
align-items: stretch !important;
}
/* === TECH DETAILS: Top/Bottom 3 boxes breathing room from icons === */
/* Move the two TB boxes (columns 2 & 3) slightly to the right so triangle/check icons don't feel cramped */
.techPickPanel.diagSection .pickRow > div:nth-child(2),
.techPickPanel.diagSection .pickRow > div:nth-child(3){
margin-left: 0 !important;
}
/* Inter-column space controlled by inline gap:12px */
.techPickPanel.diagSection .pickRow{
column-gap: 12px !important;
}
/* === SERVICES DASHBOARD: same pickbox gap fix for both advisors + technicians view === */
body.route-servicesHome .techPickPanel.diagSection .pickRow > div:nth-child(2),
body.route-servicesHome .techPickPanel.diagSection .pickRow > div:nth-child(3){
margin-left: 0 !important;
}
body.route-servicesHome .techPickPanel.diagSection .pickRow{
column-gap: 12px !important;
}
/* === Main Technician Dashboard header filters: always visible + shorter fields (70% shorter) === */
.techHeaderPanel .mainFiltersBar{margin-top:10px; display:flex; align-items:flex-end; gap:12px;}
.techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;}
.techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen > div{min-width:0;}
.techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen select{
width:auto !important;
min-width:150px !important;
max-width:200px !important;
}
.techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen .csel-wrap{
width:auto !important;
min-width:150px !important;
max-width:180px !important;
}
/* === PATCH 2026-02-18: Dashboard + Team header typography + pills sizing === */
/* 2) Keep dashboard filters wider (prevents “short again” regressions) */
.techHeaderPanel .phead .mainFiltersBar .controls.mainAlwaysOpen select{
min-width:150px !important;
max-width:200px !important;
}
.techHeaderPanel .phead .mainFiltersBar .controls.mainAlwaysOpen .csel-wrap{
width:auto !important;
min-width:150px !important;
max-width:220px !important;
}
/* 3) Top-right Focus stats: make the LOWER (non-focus) value white (keep labels grey) */
.techHeaderPanel .overallBlock .bigSub,
.techHeaderPanel .dashFocusNumSmall{
color:var(--text) !important;
}
/* 4) EXPRESS / KIA category headers: team name 32px, technician count grey */
.catHeaderSplit .catTitle{
font-size:32px !important;
line-height:1.05 !important;
}
.catHeaderSplit .svcMetaLine{
color:var(--muted) !important;
}
/* 5) Technician list rows (main dashboard): tech names 22px */
.techRow.dashTechRow .techRowLeft a{
font-size:22px !important;
font-weight:900 !important;
line-height:1.1 !important;
}
/* 6) Mini-stats line under tech names: keep grey + consistent dot spacing */
.techRow.dashTechRow .mini{
color:var(--muted) !important;
font-weight:900 !important;
}
.techRow.dashTechRow .mini .midDot{
margin:0 6px;
color:var(--muted);
}
/* === PATCH 2026-02-18: tech name sizing === */
/* Main dashboard technician name size */
.techRow .name, .techRow .name a{
font-size:22px !important;
font-weight:800;
line-height:1.05;
}
/* === Service category cards: service title size (Rotate, Alignment, etc.) === */
body.route-tech .svcName,
body.route-tech .serviceName,
body.route-tech .svcTitle{
font-size:26px !important;
font-weight:var(--HB) !important;
line-height:1.08 !important;
}
/* === Tech header panel: technician name size === */
body.route-tech .techH2Big{font-size:34px !important;}
/* === Service category cards: metric typography === */
.metricBlock .mbKicker{font-size:16px !important;}
.metricBlock .mbLbl{font-size:14px !important;}
/* === Technician Dashboard: lower (non-focus) stat values white, titles stay grey === */
.techHeaderPanel .dashFocusNumSmall,
.techHeaderPanel .overallBlock .bigSub,
.techHeaderPanel .overallBlock .subNum,
.techHeaderPanel .focusStat .statVal.small,
.techHeaderPanel .focusStat .statVal.secondary{
color:var(--text) !important;
}
.techHeaderPanel .dashFocusLbl,
.techHeaderPanel .overallBlock .tag,
.techHeaderPanel .focusStat .statLbl,
.techHeaderPanel .focusStat .statTitle{
color:var(--muted) !important;
}
/* === Service category cards: metric block dividers (ASR/RO vs Team Avg/Goal/Top Performer) === */
.metricBlockDivided{gap:0 !important;}
.metricBlockDivided .mbLeft{
padding-right:14px !important;
border-right:1px solid rgba(255,255,255,.22) !important; /* thin grey vertical line */
}
.metricBlockDivided .mbRight{
padding-left:14px !important;
}
.metricBlockDivided .mbRight .mbRow{
padding:6px 0 !important;
}
.metricBlockDivided .mbRight .mbRow + .mbRow{
border-top:1px solid rgba(255,255,255,.22) !important; /* thin grey horizontal lines */
}
/* Mini stats under technician names (tech rows) */
.pageTechDash .techRow .cell .val{font-size:15px !important;line-height:1.05 !important;}
.pageTechDash .techRow .cell .lbl{font-size:11px !important;line-height:1.05 !important;text-transform:none !important;}
/* Category title rows (section headers): bottom (secondary) focus stat value white, title stays grey */
.route-tech .secHdrStats .statVal.secondary,
.route-tech .secHdrStats .statVal.small,
.route-tech .secHdrStats .dashFocusNumSmall{
color:var(--text) !important;
}
.route-tech .secHdrStats .statLbl,
.route-tech .secHdrStats .dashFocusLbl{
color:var(--muted) !important;
}
/* renderTech section headers actually use .secStatVal / .secStatTitle with inline colors */
body.route-tech .secHdrStats .secStatBlock:last-child .secStatVal{color:#fff !important;}
/* Label opacity standardized to 70% (patch 2026-03-23) */
body.route-tech .secHdrStats .secStatTitle{color:rgba(255,255,255,.70) !important;}
/* === renderTech: section header right cluster (mini dials + focus dial) === */
body.route-tech .secHdrRight{
display:flex;
align-items:center;
gap:22px;
}
body.route-tech .secHdrRight .secMiniDials{
display:flex;
align-items:center;
gap:8px;
flex-wrap:nowrap;
}
body.route-tech .secHdrRight .secMiniDials .svcGaugeWrap{
flex:0 0 auto;
}
body.route-tech .svcGauge .pctTitle{
white-space:normal;
}
/* === renderTech: section header pills next to section name (Avg ODO / ROs / ASRs / Sold/ASR) === */
body.route-tech .secNamePills{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-left:6px;
margin-top:2px;
}
/* === renderTech only: Section header stat pills directly below the section title (techH2) === */
body.route-tech .secNamePills{
/* force onto its own line directly under the title within the flex title wrapper */
flex: 0 0 100% !important;
width: 100% !important;
order: 2 !important;
display: flex !important;
flex-wrap: nowrap !important; /* one row */
gap: 8px !important;
align-items: center !important;
justify-content: flex-start !important;
margin-top: 6px !important;
/* Align first pill with start of category title text — matches advisor detail (38px) + services dashboard (32px) */
margin-left: 0 !important;
padding-left: 38px !important;
}
body.route-tech .titleRow .techH2{
order: 1 !important;
}
/* === Diag pie chart labels/lines === */
body.route-tech .techPickPanel.diagSection .diagPieWrap{display:flex;align-items:center;justify-content:center;margin-top:10px}
body.route-tech .techPickPanel.diagSection .diagPieSvg{width:185px;height:185px;display:block;overflow:visible}
body.route-tech .techPickPanel.diagSection .diagPieTxt{fill:#fff;font-weight:700;font-size:20px}
body.route-tech .techPickPanel.diagSection .diagPieLeader{stroke:rgba(255,255,255,.9);stroke-width:1}
body.route-tech .techPickPanel.diagSection .diagPieRing{stroke:rgba(255,255,255,.85);stroke-width:1.2}
/* === Diag pie interactions (tech details only) === */
body.route-tech .techPickPanel.diagSection .diagPieWrap,
body.route-tech .techPickPanel.diagSection .diagPieSvg{
cursor:pointer;
}
body.route-tech .techPickPanel.diagSection .diagPieSlice{
cursor:pointer;
transition:filter 140ms ease, opacity 140ms ease, transform 140ms ease;
opacity:.92;
transform-origin:50% 50%;
}
body.route-tech .techPickPanel.diagSection .diagPieSlice:hover{
opacity:1;
filter:brightness(1.35) drop-shadow(0 6px 10px rgba(0,0,0,.35));
transform:scale(1.02);
}
/* === PATCH 2026-02-24: svcMetaLine (tech details) font + casing ===
- Set muted svcMetaLine to 14px
- Preserve casing (ROs / ASRs / Sold) by disabling uppercase transforms
Scoped to tech details only.
*/
body.route-tech .muted.svcMetaLine,
body.route-tech .svcMetaLine{
font-size:14px !important;
text-transform:none !important;
letter-spacing:.2px !important;
font-weight:900 !important;
color: rgba(234,240,255,.75) !important;
}
/* === Advisor Dashboard pill text === */
.pageAdvisorDash .advRow .pill .k{
color:#fff !important;
opacity:0.7 !important;
text-transform:none !important;
}
.pageAdvisorDash .advRow .pill .v{
color:#fff !important;
}
.pageAdvisorDash .advRow .pill,
.pageAdvisorDash .advRow .pill *{
color:#fff !important;
}
/* Comp-class pills: force .v text to #fff regardless of base .pill .v color */
.pageAdvisorDash .advRow .pill.compR .v,
.pageAdvisorDash .advRow .pill.compY .v,
.pageAdvisorDash .advRow .pill.compG .v,
.pageAdvisorDash .advRow .pill.compO .v{
color:#fff !important;
}
/* Ensure pill text/content sits above the ::before color overlay */
.pageAdvisorDash .advRow .pill > *{
position:relative;
z-index:2;
}
/* More space between pillGroup containers; tighter gap between focus pills and rank badge */
.pageAdvisorDash .advRow .pills{
gap:16px !important;
}
.pageAdvisorDash .advRow .dashRight{
gap:6px !important;
}
/* Match gap inside focusGroup to the between-container gap */
.pageAdvisorDash .advRow .pillGroup.focusGroup{
gap:16px !important;
}
/* === Technician Dashboard pill text: 10% smaller than advisor dashboard === */
.pageTechDash .techRow.dashTechRow .pill .k{
font-size:12px !important;
line-height:1 !important;
text-transform:none !important;
letter-spacing:.22px !important;
font-weight:1000 !important;
opacity:0.7 !important;
color:#fff !important;
}
/* Comp pill labels only: 11px */
.pageTechDash .techRow.dashTechRow .pill.compR .k,
.pageTechDash .techRow.dashTechRow .pill.compY .k,
.pageTechDash .techRow.dashTechRow .pill.compG .k,
.pageTechDash .techRow.dashTechRow .pill.compO .k{
font-size:11px !important;
}
.pageTechDash .techRow.dashTechRow .pill .v{
font-size:20px !important;
line-height:1 !important;
font-weight:1000 !important;
color:#fff !important;
}
.pageTechDash .techRow.dashTechRow .pillGroup.focusGroup .pill .v{
font-size:21px !important;
}
/* === PATCH 2026-02-25: Requested sizing tweaks ===
NOTE: Focus stat labels in the main dashboard header are inline-styled in
renderMain.js (13px top / 11px bottom). This rule is kept only for any
other .tag elements inside the tech header panel that are NOT focus stats. */
.pageTechDash .techHeaderPanel .overallBlock .tag,
.pageTechDash .techHeaderPanel .tag{
font-size:13px !important;
}
/* Tech Details: section header right stats — sizes now handled by graduated rules (patch 2026-03-23) */
/* Flat override removed; see secStatBlock:first-child / :last-child rules below */
/* === PATCH 2026-02-25: CatHeader (EXPRESS/KIA) right stats sizing + muted tags === */
/* Sizes updated to MEDIUM standard by patch 2026-03-23: top lbl 12px, bot lbl 11px */
.pageTechDash .catHeaderSplit .catRank .rankNum.sub{font-size:26px !important;}
.pageTechDash .catHeaderSplit .catRank .rankLbl{
font-size:12px !important;
color:rgba(255,255,255,.70) !important;
}
.pageTechDash .catHeaderSplit .catRank .rankLbl.sub{
font-size:11px !important;
color:rgba(255,255,255,.70) !important;
}
/* === catCard header dial: 68px on ALL pages (Services, Tech, Advisor) ===
Targets the service catCards (Rotate, Alignment, etc.) ONLY.
Does NOT affect the Category titleRow dials (Maintenance/Fluids/Brakes/Tires).
*/
.pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGaugeWrap,
body.route-tech .catCard .catHeader .svcGaugeWrap,
body.route-tech .catCard .techCatHdrRight .svcGaugeWrap,
body.route-advisor .catCard .sdCatHdrRow .sdCatDialCol .svcGaugeWrap {
--sz:68px !important;
width:68px !important;
height:68px !important;
flex:0 0 68px !important;
}
.pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGauge,
body.route-tech .catCard .catHeader .svcGauge,
body.route-tech .catCard .techCatHdrRight .svcGauge,
body.route-advisor .catCard .sdCatHdrRow .sdCatDialCol .svcGauge {
--sz:68px !important;
width:68px !important;
height:68px !important;
}
/* catCard header dial label: 68px width, centered */
.pageServicesDash .sdCatHdrRow .sdCatDialCol .svcGaugeLbl,
body.route-tech .catCard .techCatHdrRight .svcGaugeLbl,
body.route-advisor .catCard .sdCatHdrRow .sdCatDialCol .svcGaugeLbl {
width:68px !important;
padding-left:0 !important;
padding-right:0 !important;
margin-left:0 !important;
margin-right:0 !important;
left:auto !important;
right:auto !important;
}
/* === PATCH 2026-02-25: CatCard dial label +% and Category header dial label ASR/RO === */
/* Service catCards (Rotate, Alignment, etc.): dial label 10px and append % (ASR% / Sold%) */
body.route-tech .catCard .catHeader .svcGauge .pctSub{
font-size:10px !important;
letter-spacing:.25px !important;
}
body.route-tech .catCard .catHeader .svcGauge .pctSub::after{
content:"%";
margin-left:1px;
}
/* Category titleRows (Maintenance, Fluids, Brakes, Tires): show ASR/RO instead of ASR% inside mini + focus dials */
body.route-tech .secMiniDials .svcGauge .pctSub,
body.route-tech .secFocusDial .svcGauge .pctSub{
position:relative !important;
color:transparent !important; /* hide original (e.g., ASR%) */
}
body.route-tech .secMiniDials .svcGauge .pctSub::after,
body.route-tech .secFocusDial .svcGauge .pctSub::after{
content:"ASR/RO";
position:absolute;
left:50%;
transform:translateX(-50%);
color:rgba(255,255,255,.90);
white-space:nowrap;
}
/* PATCH 2026-02-25 removed — canonical MEDIUM block now owns secStatVal/secStatTitle sizing. */
/* === PATCH 2026-02-27: Rank Badge font weight ===
Force Rank Badge typography to 1000 weight (per request).
*/
.rankFocusBadge .rfbFocus,
.rankFocusBadge .rfbMain,
.rankFocusBadge .rfbMain::before,
.rankFocusBadge .rfbOfWord,
.rankFocusBadge .rfbOfNum{
font-weight:1000 !important;
}
/* === Unified section header spacing ===
gap:22px between dial cluster / rank badge / stats; badge centered.
secHdrStats has margin-left:-10px (injected) to keep badge→stats at 12px effective.
*/
body.route-tech .panel > .phead > .titleRow .secHdrRight{
gap:12px !important;
}
body.route-tech .panel > .phead > .titleRow .secHdrRight .secHdrRank{
margin:0 !important;
align-self:center !important;
}
/* PATCH 2026-02-25 color override removed — canonical .secHdrStats .secStatVal { color:#fff } now owns this. */
/* === Service Settings page === */
/* Shrink-to-fit panel + two-column table (service name + minimum miles input) */
.svcSetPanel{
display:inline-block;
width:fit-content;
max-width:100%;
}
.svcSetPanel .phead{width:fit-content}
.svcSetMinMilesHeading{
font-size:22px;
font-weight:1000;
letter-spacing:.4px;
color:rgba(234,240,255,.90);
margin-top:18px;
margin-bottom:4px;
padding-left:2px;
}
.svcSetGrid{
margin-top:8px;
display:grid;
grid-template-columns:repeat(2, auto);
gap:10px;
width:fit-content;
max-width:100%;
}
.svcSetHdr{
display:flex;
align-items:center;
justify-content:flex-start;
/* Remove the pill/border look (requested) */
padding:0;
border:none;
border-radius:0;
background:transparent;
font-size:15px;
color:rgba(234,240,255,.80);
font-weight:1000;
letter-spacing:.2px;
text-transform:none;
width:fit-content;
max-width:100%;
margin-bottom:2px;
}
.svcSetHdrLeft{
flex:0 0 var(--svcSetNameW, 22ch);
min-width:var(--svcSetNameW, 22ch);
padding-right:20px; /* more breathing room between columns */
}
.svcSetHdrRight{flex:0 0 auto}
.svcSetSection{
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
overflow:hidden;
background:rgba(0,0,0,.10);
width:fit-content;
max-width:100%;
}
.svcSetSectionHdr{
padding:10px 12px;
border-bottom:1px solid rgba(255,255,255,.08);
display:flex;
align-items:end;
justify-content:space-between;
font-size:23px;
font-weight:1200;
letter-spacing:.2px;
}
.svcSetSectionHdrName{
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.svcSetSectionHdrMiles{
font-size:15px;
font-weight:1000;
color:rgba(234,240,255,.80);
letter-spacing:.2px;
text-align:center;
width:130px;
flex-shrink:0;
}
.svcSetRows{
padding:10px 12px;
display:grid;
gap:8px;
width:fit-content;
max-width:100%;
}
.svcSetRow{
display:flex;
align-items:center;
gap:20px;
padding:8px 10px;
border-radius:12px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.18);
width:fit-content;
max-width:100%;
}
.svcSetLeft{
min-width:0;
}
.svcSetName{
font-weight:900;
min-width:0;
width:var(--svcSetNameW, 22ch);
flex-shrink:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.svcSetRight{flex-shrink:0;width:130px;display:flex;justify-content:center;}
.svcSetMiles{
width:110px;
padding:8px 10px;
border-radius:10px;
border:1px solid rgba(255,255,255,.14);
background:rgba(0,0,0,.18);
color:var(--text);
outline:none;
}
.svcSetMiles:focus{border-color:rgba(120,190,255,.55)}
/* Op-code / description pills */
.opcPill{
display:inline-flex;
align-items:center;
gap:0;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.13);
border-radius:7px;
overflow:hidden;
max-width:100%;
}
.opcPillText{
font-size:12px;
color:rgba(234,240,255,.9);
padding:3px 6px 3px 8px;
outline:none;
cursor:text;
min-width:2ch;
white-space:normal;
word-break:break-word;
line-height:1.4;
}
.opcDisplayNamePill .opcPillText{
white-space:pre-line;
}
.opcPillText:focus{
background:rgba(79,142,247,.15);
color:#fff;
cursor:text;
}
.opcPillDel{
background:none;
border:none;
border-left:1px solid rgba(255,255,255,.10);
color:rgba(234,240,255,.4);
font-size:13px;
line-height:1;
padding:3px 6px;
cursor:pointer;
font-family:inherit;
flex-shrink:0;
transition:background .12s,color .12s;
}
.opcPillDel:hover{ background:rgba(239,68,68,.18); color:#fca5a5; }
.opcPillAdd{
background:rgba(79,142,247,.12);
border:1px dashed rgba(79,142,247,.35);
color:#93c5fd;
border-radius:7px;
font-size:14px;
font-weight:800;
line-height:1;
padding:3px 8px;
cursor:pointer;
font-family:inherit;
flex-shrink:0;
transition:background .12s,border-color .12s;
}
.opcPillAdd:hover{ background:rgba(79,142,247,.22); border-color:rgba(79,142,247,.6); }
.opcServiceName{
font-size:13px;
font-weight:700;
color:rgba(234,240,255,.9);
outline:none;
display:inline-block;
min-width:4ch;
border-radius:6px;
padding:2px 5px;
cursor:text;
border:1px solid transparent;
transition:border-color .12s, background .12s;
}
.opcServiceName:focus{
border-color:rgba(79,142,247,.4);
background:rgba(79,142,247,.10);
}
/* ===== Goals page: consistency with other settings pages ===== */
/* Header area: add phead-style bottom separator */
.goalsBigTop {
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
margin-bottom: 14px;
}
/* OVERALL GOALS box: replace gray rgba(180,180,180) borders with app-standard white-alpha borders */
.goalsMidGoals {
border-color: rgba(255,255,255,.12) !important;
background: rgba(0,0,0,.15) !important;
}
.goalsMidDivider {
background: rgba(255,255,255,.12) !important;
}
/* Sub description text in Goals header: match .notice sizing */
.goalsBigTop .sub {
font-size: 13px;
line-height: 1.45;
}
/* Quadrant cards: align border-radius + border opacity with svcSetSection */
.goalQuad {
border-radius: 16px !important;
border-color: rgba(255,255,255,.08) !important;
background: rgba(0,0,0,.12) !important;
}
/* Quadrant title: add bottom border like svcSetSectionHdr */
.goalQuadTitle {
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
margin-bottom: 10px !important;
}
/* Head row column separator: softer to match other pages */
.goalQuadHeadRow {
border-bottom-color: rgba(255,255,255,.08) !important;
}
/* Row separators: softer */
.goalRow {
border-bottom-color: rgba(255,255,255,.07);
}
/* Mini goals box (per-quadrant header stat): standard border radius + border */
.miniGoalsBox {
border-radius: 12px !important;
border-color: rgba(255,255,255,.10) !important;
background: rgba(0,0,0,.15) !important;
}
.miniGoalsBox > div[style*="width:1px"] {
background: rgba(255,255,255,.10) !important;
}
/* Goal input: focus state matching svcSetMiles */
.goalMini:focus {
border-color: rgba(120,190,255,.55);
outline: none;
}
/* Row hover: subtle interactive feedback */
.goalRow.tight:hover {
background: rgba(255,255,255,.03);
border-radius: 8px;
transition: background .1s;
}
/* Service name text */
.gTitle {
font-size: 15px;
font-weight: 700;
letter-spacing: .1px;
}
/* Avg stat lines: inline bordered box */
.gAvg {
font-size: 14px;
}
/* Divider between goal groups: softer */
.goalDivider {
border-top-color: rgba(255,255,255,.08) !important;
opacity: .85;
}
/* Apply-all row: muted label color like other settings controls */
.brApplyAllRow .q {
color: var(--muted) !important;
}
.brApplyAllRow label {
color: var(--muted);
}
/* Switch On/Off labels: match muted style */
.swLab {
font-size: 11px;
color: var(--muted);
font-weight: 900;
letter-spacing: .15px;
}
/* === catCard title: 24px === */
/* === catCard title: 22px / 700 === */
.catCard .catTitle { font-size:20px !important; font-weight:700 !important; }
.pageServicesDash .catCard .catTitle { font-size:20px !important; font-weight:700 !important; }
/* === Remove underline from advisor/tech name links in catCards === */
.pageServicesDash .svcTechLeft a,
.pageServicesDash .svcTechRow a,
.serviceCard .techList .techRow a,
.catCard .techList .techRow a { text-decoration:none !important; }
/* === Dial spacing in catcard header row: move dial away from badge === */
.pageServicesDash .catHeader > .catHdrLeft { flex:1 1 auto !important; min-width:0; }
.pageServicesDash .sdCatHdrRow { gap:14px !important; flex:0 0 auto !important; }
/* ============================================================================
PATCH 2026-03-23: Standardized Focus Stat sizes & opacity
─────────────────────────────────────────────────────────────────────────────
Three canonical sizes for all focus-stat blocks (top stat / top label):
LARGE main header panels
top → 38px value / 13px label
bot → 28px value / 11px label
MEDIUM section header panels (Maintenance, Fluids, etc.)
+ catHeaderSplit panels (Express / Kia Technicians)
top → 34px value / 12px label
bot → 26px value / 11px label
SMALL service category header panels (Rotate, Alignment, etc.)
on the Services Dashboard only
top → 26px value / 11px label
bot → 18px value / 9px label
Opacity rule (applied to ALL sizes):
stat values → opacity 1 (100%)
labels → rgba(255,255,255,.70) (70%), opacity 1 on the element
============================================================================ */
/* ── LARGE: Services Dashboard main header labels ──
The injected servicesDashOverrides CSS sets
.pageServicesDash .techHeaderPanel .tag { font-size:14px !important } (0,3,0).
Both labels share the .tag class so we target them via adjacent-sibling
selectors from their preceding value div, giving specificity (0,5,0)
which beats the injected rule even though it has !important. */
.pageServicesDash .techHeaderPanel .overallBlock .bigMain + .tag {
font-size: 13px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
}
.pageServicesDash .techHeaderPanel .overallBlock .overallMetric + .tag {
font-size: 11px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
}
.techHeaderPanel .dashFocusNum {
font-size: 38px !important;
opacity: 1 !important;
}
.techHeaderPanel .dashFocusNumSmall {
font-size: 28px !important;
opacity: 1 !important;
color: var(--text) !important;
}
/* top label 13px, bottom label 11px — two .dashFocusLbl nodes inside .dashFocusStats */
.techHeaderPanel .dashFocusStats > div:first-child .dashFocusLbl {
font-size: 13px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
}
.techHeaderPanel .dashFocusStats > div:last-child .dashFocusLbl {
font-size: 11px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
}
/* fallback for any standalone .dashFocusLbl */
.techHeaderPanel .dashFocusLbl {
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
}
/* ── LARGE: Advisor Dashboard main header (advBigNum / advSubNum) ──
Unscoped: the header HTML wrapper is NOT .advOverallBlock.
!important beats the #advisorDashCSS injected values (no !important). */
.advBigNum {
font-size: 38px !important;
line-height: 1 !important;
opacity: 1 !important;
color: #fff !important;
}
.advBigTag {
font-size: 13px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
margin-top: 6px !important;
}
.advSubNum {
font-size: 28px !important;
line-height: 1 !important;
opacity: 1 !important;
color: #fff !important;
}
.advSubTag {
font-size: 11px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
margin-top: 6px !important;
}
/* ── MEDIUM: catHeaderSplit panels (Express / Kia Technicians) ── */
/* Override base.js dynamic injection (.catRank .rankNum 36px) */
.catHeaderSplit .catRank .rankNum {
font-size: 34px !important;
opacity: 1 !important;
color: #fff !important;
}
.catHeaderSplit .catRank .rankLbl {
font-size: 12px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
}
.catHeaderSplit .catRank .rankNum.sub {
font-size: 26px !important;
opacity: 1 !important;
color: #fff !important;
}
.catHeaderSplit .catRank .rankLbl.sub {
font-size: 11px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
}
/* ── UNIFIED: svcSecFocusStats — base text/color rules (all pages) ── */
/* Container layout & sizing lives in the .lg/.sm variant rules below (~line 4570+) */
.svcSecFocusStats .statValTop {
font-weight: 800 !important;
line-height: 1 !important;
color: #fff !important;
opacity: 1 !important;
}
.svcSecFocusStats .statValBot {
font-weight: 800 !important;
line-height: 1 !important;
color: #fff !important;
opacity: 1 !important;
}
.svcSecFocusStats .statLblTop {
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: .2px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
line-height: 1.05 !important;
text-transform: none !important;
}
.svcSecFocusStats .statLblBot {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .2px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
line-height: 1.05 !important;
text-transform: none !important;
}
/* ── Advisor detail main header stat elements ── */
.advHdrFocusNum {
font-weight: 1000 !important;
letter-spacing: .2px !important;
color: #fff !important;
line-height: 1 !important;
}
.advHdrFocusLbl {
font-weight: var(--HB) !important;
letter-spacing: .3px !important;
color: rgba(255,255,255,.70) !important;
}
.advHdrCmpNum {
font-weight: 1000 !important;
letter-spacing: .2px !important;
color: #fff !important;
line-height: 1 !important;
}
.advHdrCmpLbl {
font-weight: var(--HB) !important;
letter-spacing: .3px !important;
color: rgba(255,255,255,.70) !important;
}
/* ── SMALL: Services Dashboard service category header panels (Rotate, Alignment, etc.) ── */
.pageServicesDash .sdCatFocusStats .sdCatStatTop {
font-size: 30px !important;
opacity: 1 !important;
color: #fff !important;
}
/* Mid and Bot are both the secondary/bottom stat → 22px, full opacity */
.pageServicesDash .sdCatFocusStats .sdCatStatMid,
.pageServicesDash .sdCatFocusStats .sdCatStatBot {
font-size: 22px !important;
opacity: 1 !important;
color: #fff !important;
}
/* top label 11px, bottom label 9px */
.pageServicesDash .sdCatFocusStats > div:first-child .sdCatStatLbl {
font-size: 11px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
}
.pageServicesDash .sdCatFocusStats > div:last-child .sdCatStatLbl {
font-size: 11px !important;
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
}
/* fallback for any .sdCatStatLbl */
.pageServicesDash .sdCatFocusStats .sdCatStatLbl {
color: rgba(255,255,255,.70) !important;
opacity: 1 !important;
}
/* === PATCH 2026-03-24: catCard mbRight stat values → 21px on Advisor & Tech dashboards ===
Targets the .mbNum elements (Team Avg / Goal / Top Performer values) inside
the right-hand column of every metricBlock in catCards.
Scoped to body.route-advisor and body.route-tech to avoid affecting other pages. */
body.route-advisor .catCard .metricBlock .mbNum,
body.route-tech .catCard .metricBlock .mbNum {
font-size: 21px !important;
}
/* ── Hide number-input spinners (up/down arrows) on settings & goals pages ── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
}
/* === PATCH: section-header mini-dial text sizing ===
Targets all dials inside .svcGaugeWrap.mini (section-header mini dials on
Services Dashboard, Advisor Details, and Tech Details). */
.svcGaugeWrap.mini .svcGauge .pctStack2 .pctMain {
font-size: 12px !important;
}
.svcGaugeWrap.mini .svcGauge .pctStack2 .pctArrow {
font-size: 10px !important;
}
.svcGaugeWrap.mini .svcGauge .pctStack2 .pctSub {
font-size: 10px !important;
}
/* === PATCH: focus-dial % number → 14px ===
Covers section-header focus dials only. */
.pageServicesDash .svcSecHeadDials .svcGaugeWrap.focus .pctStack2 .pctMain,
body.route-advisor .secFocusDial .pctStack2 .pctMain,
body.route-tech .secHdrDials .svcGaugeWrap.focus .pctStack2 .pctMain {
font-size: 14px !important;
}
/* === catHeader dials on ALL pages: pctMain 12px, pctArrow 10px, pctSub 10px === */
.pageServicesDash .sdCatHdrRow .pctMain,
body.route-advisor .catCard .sdCatHdrRow .pctMain,
body.route-tech .catCard .catHeader .pctMain {
font-size: 12px !important;
}
.pageServicesDash .sdCatHdrRow .pctArrow,
body.route-advisor .catCard .sdCatHdrRow .pctArrow,
body.route-tech .catCard .catHeader .pctArrow {
font-size: 10px !important;
}
.pageServicesDash .sdCatHdrRow .pctSub,
body.route-advisor .catCard .sdCatHdrRow .pctSub,
body.route-tech .catCard .catHeader .pctSub {
font-size: 10px !important;
}
/* === PATCH 2026-03-30: techRow .cell .lbl and .val → 14px on Advisor & Tech dashboards ===
Base .cell .lbl is 10px; .cell .val is 14px globally. Both pinned to 14px here
scoped to route-advisor and route-tech so other pages are unaffected. */
body.route-advisor .techRow .cell .lbl,
body.route-tech .techRow .cell .lbl {
font-size: 14px !important;
}
body.route-advisor .techRow .cell .val,
body.route-tech .techRow .cell .val {
font-size: 14px !important;
}
/* === Diag panel: pickbox + row height +20% (tech & advisor detail pages) ===
Base pickBox padding: 10px → 12px
route-tech rows: 6px vertical → 7px; route-advisor rows: 10px → 12px */
body.route-tech .techPickPanel.diagSection .pickBox,
body.route-advisor .advPickPanel.diagSection .pickBox,
body.route-servicesHome .techPickPanel.diagSection .pickBox {
padding: 12px !important;
}
body.route-tech .techPickPanel.diagSection .pickList > .techRow {
padding: 5px 10px !important;
margin-bottom: 0px !important;
}
body.route-advisor .advPickPanel.diagSection .pickList > .techRow {
padding: 5px 10px !important;
margin-bottom: 0px !important;
}
body.route-servicesHome .techPickPanel.diagSection .pickList > .techRow {
padding: 5px 10px !important;
margin-bottom: 0px !important;
}
/* === Diag panel: force pickboxes to fill full grid cell width === */
.techPickPanel.diagSection .pickRow > div:nth-child(2),
.techPickPanel.diagSection .pickRow > div:nth-child(3) {
width: 100% !important;
min-width: 0 !important;
}
.techPickPanel.diagSection .pickRow > div:nth-child(2) > .pickBox,
.techPickPanel.diagSection .pickRow > div:nth-child(3) > .pickBox {
width: 100% !important;
box-sizing: border-box !important;
flex: 1 1 auto !important;
}
/* === PATCH: dial ring clip fix ===
The panel/section containers use overflow:hidden for border-radius, which clips
the SVG ring stroke that slightly bleeds outside its viewBox at the top/sides.
Setting overflow:visible on the SVG and its wrapper chain prevents the cutoff
without breaking the panel shape (the panel itself keeps overflow:hidden). */
/* 1. Allow the SVG ring to paint outside its own bounds (stroke bleed ~0.4px) */
.svcGauge svg {
overflow: visible;
}
/* 2. Ensure dial wrappers and column containers don't create new clip contexts */
.svcGaugeWrap,
.svcGaugeCol {
overflow: visible;
}
/* 3. Section header rows that contain dials — allow dials to breathe */
.svcSecHeadDials,
.secHdrDials,
.svcDashSecHeadRight,
.svcDashSecHead,
.route-tech .secHdrRight,
.route-advisor .svcDashSecHeadRight {
overflow: visible !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE-FIRST RESPONSIVE OVERRIDES
Breakpoints: ≤ 768px (tablet/large phone)
≤ 540px (phone)
≤ 420px (small phone)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Base container ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.wrap { padding: 8px; }
}
@media (max-width: 540px) {
.wrap { padding: 6px; }
}
/* ── Side menu: full-width overlay on mobile ────────────────────────────── */
@media (max-width: 768px) {
.sideMenu {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
#app { margin-top: 8px !important; }
}
/* ── Pill sizes ─────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
.pill { padding: 6px 10px; gap: 6px; }
.pill .k { font-size: 11px !important; }
.pill .v { font-size: 14px !important; }
.pill.pill-lg .k { font-size: 13px !important; }
.pill.pill-lg .v { font-size: 16px !important; }
}
/* ── Category grid ──────────────────────────────────────────────────────── */
@media (max-width: 540px) {
.categoryGrid { grid-template-columns: 1fr !important; }
}
/* ── Tech / Advisor header: name + stats ────────────────────────────────── */
@media (max-width: 768px) {
.techTitleRow {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.techRankPinned,
body.route-advisor .techRankPinned {
position: static !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
flex-wrap: wrap !important;
margin-top: 4px !important;
}
/* Advisor header pills row */
body.route-advisor .techTitleRow > div:first-child {
min-width: 0 !important;
}
}
/* Main header panel rank badge: margin-right 0px, no padding-right (Tech + Advisor Detail) */
body.route-tech .techRankPinned .rankFocusBadge,
body.route-advisor .techRankPinned .rankFocusBadge {
margin-right: 0px;
padding-right: 0;
}
/* Advisor detail main header: focus stats block vertically centered */
body.route-tech .techRankPinned > .svcSecFocusStats,
body.route-advisor .techRankPinned > .svcSecFocusStats {
align-self: center;
}
/* ── Advisor big name ───────────────────────────────────────────────────── */
@media (max-width: 540px) {
.techH2Big, body.route-advisor .techH2Big { font-size: 24px !important; }
.techTeamLine { font-size: 16px !important; }
}
/* ── Advisor header: big stat numbers ──────────────────────────────────── */
@media (max-width: 540px) {
.advBigNum, .pageAdvisorDash .advBigNum { font-size: 28px !important; font-weight: 800 !important; }
.advSubNum, .pageAdvisorDash .advSubNum { font-size: 22px !important; font-weight: 800 !important; }
.advBigTag, .pageAdvisorDash .advBigTag { font-size: 11px !important; font-weight: 600 !important; }
.advSubTag, .pageAdvisorDash .advSubTag { font-size: 10px !important; font-weight: 600 !important; }
}
/* ── Section headers (Maintenance, Fluids, etc.) ────────────────────────── */
@media (max-width: 768px) {
/* Allow the right cluster (dials + rank + stats) to wrap below the title */
body.route-advisor .secHdrRight,
body.route-tech .secHdrRight {
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 14px !important;
}
/* Shrink mini dials on tablet */
body.route-advisor .secMiniDials,
body.route-tech .secMiniDials {
gap: 14px !important;
}
body.route-advisor .secMiniDials .svcGaugeWrap,
body.route-tech .secMiniDials .svcGaugeWrap {
width: 56px !important; height: 56px !important; flex: 0 0 56px !important;
}
body.route-advisor .secMiniDials .svcGauge,
body.route-tech .secMiniDials .svcGauge {
--sz: 56px !important; width: 56px !important; height: 56px !important;
}
body.route-advisor .secFocusDial .svcGaugeWrap,
body.route-tech .secFocusDial .svcGaugeWrap {
width: 68px !important; height: 68px !important; flex: 0 0 68px !important;
}
body.route-advisor .secFocusDial .svcGauge,
body.route-tech .secFocusDial .svcGauge {
--sz: 68px !important; width: 68px !important; height: 68px !important;
}
/* Shrink section header stat text */
.secHdrStats .secStatVal { font-size: 26px !important; }
.secHdrStats .secStatBlock:last-child .secStatVal { font-size: 20px !important; }
body.route-advisor .secStatBlock .secStatVal { font-size: 26px !important; }
body.route-advisor .secStatBlock:last-child .secStatVal { font-size: 20px !important; }
body.route-tech .svcSecFocusStats .statValTop { font-size: 26px !important; }
body.route-tech .svcSecFocusStats .statValBot { font-size: 20px !important; }
body.route-advisor .svcSecFocusStats .statValTop { font-size: 26px !important; }
body.route-advisor .svcSecFocusStats .statValBot { font-size: 20px !important; }
}
@media (max-width: 540px) {
/* Stack dials + rank badge + text stats into a tighter layout */
body.route-advisor .secHdrRight,
body.route-tech .secHdrRight {
gap: 10px !important;
}
body.route-advisor .secMiniDials,
body.route-tech .secMiniDials {
gap: 10px !important;
}
body.route-advisor .secMiniDials .svcGaugeWrap,
body.route-tech .secMiniDials .svcGaugeWrap {
width: 48px !important; height: 48px !important; flex: 0 0 48px !important;
}
body.route-advisor .secMiniDials .svcGauge,
body.route-tech .secMiniDials .svcGauge {
--sz: 48px !important; width: 48px !important; height: 48px !important;
}
body.route-advisor .secFocusDial .svcGaugeWrap,
body.route-tech .secFocusDial .svcGaugeWrap {
width: 58px !important; height: 58px !important; flex: 0 0 58px !important;
}
body.route-advisor .secFocusDial .svcGauge,
body.route-tech .secFocusDial .svcGauge {
--sz: 58px !important; width: 58px !important; height: 58px !important;
}
.secHdrStats .secStatVal { font-size: 22px !important; }
.secHdrStats .secStatBlock:last-child .secStatVal { font-size: 17px !important; }
body.route-tech .svcSecFocusStats .statValTop { font-size: 22px !important; }
body.route-tech .svcSecFocusStats .statValBot { font-size: 17px !important; }
body.route-advisor .svcSecFocusStats .statValTop { font-size: 22px !important; }
body.route-advisor .svcSecFocusStats .statValBot { font-size: 17px !important; }
}
/* ── Title row within section panels (titleRow flex) ───────────────────── */
@media (max-width: 768px) {
.panel .phead .titleRow {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
/* Keep the section name + pills on top; right side wraps below */
.panel .phead .titleRow > div:first-child { min-width: 0; }
}
/* ── Category card header: dial + rank + stats ──────────────────────────── */
@media (max-width: 768px) {
body.route-advisor .catCard .catHeader,
body.route-tech .catCard .catHeader {
flex-wrap: wrap !important;
gap: 8px !important;
}
/* Shrink gauges inside catCards */
.catCard .svcGaugeWrap {
width: 56px !important; height: 56px !important; flex: 0 0 56px !important;
}
.catCard .svcGauge {
--sz: 56px !important; width: 56px !important; height: 56px !important;
}
}
@media (max-width: 540px) {
.catCard .svcGaugeWrap {
width: 48px !important; height: 48px !important; flex: 0 0 48px !important;
}
.catCard .svcGauge {
--sz: 48px !important; width: 48px !important; height: 48px !important;
}
body.route-advisor .catTitle,
body.route-tech .catTitle { font-size: 18px !important; }
}
/* ── catCard split header (Express / Kia sections) ──────────────────────── */
@media (max-width: 540px) {
.pageTechDash .catHeaderSplit .catRank .rankNum { font-size: 26px !important; font-weight: 800 !important; }
.pageTechDash .catHeaderSplit .catRank .rankNum.sub { font-size: 20px !important; font-weight: 800 !important; }
}
/* ── metricBlock: left/right layout becomes vertical on small screens ──── */
@media (max-width: 540px) {
.metricBlock.metricBlockDivided {
flex-direction: column !important;
gap: 10px !important;
}
.metricBlock .mbLeft,
.metricBlock .mbRight {
width: 100% !important;
max-width: 100% !important;
border-right: none !important;
border-bottom: 1px solid var(--border);
padding-bottom: 10px !important;
}
.metricBlock .mbRight { border-bottom: none !important; padding-bottom: 0 !important; }
.mbStat { font-size: 28px !important; }
}
/* ── Services Dashboard section header ──────────────────────────────────── */
@media (max-width: 768px) {
.pageServicesDash .svcSecFocusStats { gap: 0 !important; }
.pageServicesDash .svcSecFocusStats .statValTop { font-size: 26px !important; }
.pageServicesDash .svcSecFocusStats .statValBot { font-size: 20px !important; }
}
@media (max-width: 540px) {
.pageServicesDash .svcSecFocusStats .statValTop { font-size: 22px !important; }
.pageServicesDash .svcSecFocusStats .statValBot { font-size: 17px !important; }
}
/* ── Services category header panels (Rotate, Alignment, etc.) ─────────── */
@media (max-width: 768px) {
.svcDashSecHead {
flex-wrap: wrap !important;
gap: 8px !important;
}
.svcDashSecHeadRight { gap: 12px !important; }
.svcDashSecHeadRight .svcGaugeWrap {
width: 52px !important; height: 52px !important;
}
.svcDashSecHeadRight .svcGauge {
--sz: 52px !important; width: 52px !important; height: 52px !important;
}
}
/* ── GP badge and rank badge sizing ────────────────────────────────────── */
@media (max-width: 480px) {
body.route-advisor .gpFocusBadge.lg,
body.route-tech .gpFocusBadge.lg {
--w: 72px !important; --h: 72px !important;
}
body.route-advisor .gpFocusBadge.md,
body.route-tech .gpFocusBadge.md {
--w: 64px !important; --h: 64px !important;
}
/* rank badge */
.rankFocusBadge { width: 64px !important; height: 64px !important; }
.rankFocusBadge .rankNum { font-size: 24px !important; }
}
/* ── Filter controls row ────────────────────────────────────────────────── */
@media (max-width: 540px) {
.advDetailControls .filterRow,
.techDetailControls .filterRow,
body.route-advisor .techHeaderPanel .controls.mainAlwaysOpen .filterRow {
grid-template-columns: 1fr 1fr !important;
}
body.route-advisor .techHeaderPanel .controls.mainAlwaysOpen .filterRow > div:last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 380px) {
.advDetailControls .filterRow,
body.route-advisor .techHeaderPanel .controls.mainAlwaysOpen .filterRow {
grid-template-columns: 1fr !important;
}
}
/* ── secNamePills: tighter padding on mobile ────────────────────────────── */
@media (max-width: 480px) {
body.route-advisor .secNamePills,
body.route-tech .secNamePills {
padding-left: 0 !important;
gap: 6px !important;
}
.secNamePills .pill { padding: 5px 8px !important; }
.secNamePills .pill .k { font-size: 10px !important; }
.secNamePills .pill .v { font-size: 13px !important; }
}
/* ── Tech / Advisor main list pages (rowGrid) ───────────────────────────── */
@media (max-width: 540px) {
.rowGrid {
grid-template-columns: 1fr 1fr 1fr !important;
}
.rowGrid .hideSm { display: none !important; }
}
@media (max-width: 400px) {
.rowGrid { grid-template-columns: 1fr 1fr !important; }
}
/* ── Goals page ─────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
.goalsBig { width: 100% !important; min-width: 0 !important; }
.goalBox, .goalBoxInner { min-width: 0 !important; flex-basis: 100% !important; }
}
/* ── Trend page ─────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
.trendGrid { grid-template-columns: 1fr !important; }
.trendFilters { flex-direction: column !important; gap: 8px !important; }
}
/* ── Prevent overflow on the whole page ────────────────────────────────── */
@media (max-width: 768px) {
.wrap, .panel, .phead { overflow-x: hidden !important; }
/* But keep gauge containers visible */
.svcGaugeWrap, .svcGaugeCol, .svcGauge svg { overflow: visible !important; }
}
/* ── Hamburger menu button: slightly larger tap target on mobile ─────────── */
@media (max-width: 768px) {
.hamburgerMini {
width: 48px !important;
height: 48px !important;
font-size: 24px !important;
}
/* Tech/advisor detail: hamburger floats left; on mobile hide the float,
show it inside the flow */
.techNotchStage .techMenuFloat {
position: static !important;
width: auto !important;
height: auto !important;
margin-bottom: 6px !important;
}
}
/* ── Select / input touch targets ───────────────────────────────────────── */
@media (max-width: 768px) {
select, input { padding: 12px 10px !important; font-size: 16px !important; }
}
/* ── Advisor dashboard: catCard sdCatHdrRow ─────────────────────────────── */
@media (max-width: 540px) {
body.route-advisor .sdCatHdrRow {
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: flex-start !important;
}
body.route-advisor .sdCatFocusStats { gap: 8px !important; }
body.route-advisor .catCard .catHdrLeft { width: 100% !important; }
}
/* ── Tech notch stage: remove absolute positioning on mobile ────────────── */
@media (max-width: 768px) {
.techNotchStage {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.techNotchStage .techMenuFloat {
order: -1;
align-self: flex-start;
left: auto !important;
top: auto !important;
}
.techNotchStage .panel.techHeaderPanel {
width: 100% !important;
max-width: 100% !important;
}
}
/* ── Diagnostic pie: shrink on small screens ────────────────────────────── */
@media (max-width: 540px) {
.diagPieSvg { width: 150px !important; height: 150px !important; }
.advPickPanel.diagSection, .techPickPanel.diagSection {
min-height: 0 !important;
}
}
/* ── Page-specific: Services Dashboard ─────────────────────────────────── */
@media (max-width: 768px) {
.pageServicesDash .svcGrid,
.pageServicesDash .svcStack {
grid-template-columns: 1fr !important;
}
}
/* ── svcInfoPopup: canonical shell (rank badge popups, service info popups, all pages) */
.svcInfoPopup {
position: fixed;
z-index: 9995;
width: 360px;
max-width: calc(100vw - 20px);
background: linear-gradient(160deg, rgba(24,30,50,.99), rgba(10,14,26,.99));
border: 1px solid rgba(255,255,255,.13);
border-radius: 12px;
box-shadow: 0 20px 56px rgba(0,0,0,.60), 0 0 0 1px rgba(255,255,255,.04);
padding: 10px 12px 12px;
font-size: 12px;
font-weight: 600;
line-height: 1.55;
color: rgba(255,255,255,.86);
pointer-events: none;
}
.svcInfoPopup .svcInfoPopHdr {
display: flex;
align-items: flex-start;
gap: 6px;
margin-bottom: 8px;
}
.svcInfoPopup .svcInfoPopTitle {
font-size: 12px;
font-weight: 600;
letter-spacing: .1px;
text-transform: none;
color: #fff;
opacity: 1;
line-height: 1.45;
}
.svcInfoPopup .svcInfoPopCornerIcon {
flex-shrink: 0;
margin-top: 1px;
width: 18px;
height: 18px;
display: block;
opacity: .55;
pointer-events: none;
color: rgba(255,255,255,.9);
}
.svcInfoPopup .svcInfoPopBody {
font-size: 13px;
font-weight: 600;
line-height: 1.55;
color: #fff;
}
/* ── svcInfoPopup: keep within viewport ────────────────────────────────── */
@media (max-width: 540px) {
.svcInfoPopup { width: calc(100vw - 20px) !important; max-width: 100vw !important; }
}
/* ── Rank badge popup: compact — ID specificity beats mobile !important ── */
#rankInfoPopup {
width: max-content !important;
max-width: 260px !important;
padding: 8px 10px !important;
}
#rankInfoPopup .svcInfoPopHdr {
margin-bottom: 0 !important;
}
/* ── Group / bench tiles ────────────────────────────────────────────────── */
@media (max-width: 540px) {
.benchTiles { grid-template-columns: 1fr !important; }
.techStack { grid-template-columns: 1fr !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
SECTION HEADER DIAL VERTICAL ALIGNMENT FIX
Each dial column is (dial circle) + (label below), so its visual center
sits above the column midpoint. When the dial group and rank badge are
flex-centered in the same row the dial circles end up slightly too high.
Fix: shift the dial group containers down with position:relative/top so
the center of the focus dial lands on exactly the same horizontal axis as
the center of the rank badge. The mini dials are already aligned with the
focus dial, so they ride along as a group.
Applies to: Services Dashboard, Advisor Details, Technician Details.
═══════════════════════════════════════════════════════════════════════════ */
/* Services Dashboard — single .svcSecHeadDials wrapper */
.pageServicesDash .svcSecHeadDials {
align-self: flex-start;
margin-top: 3px;
margin-right: 12px;
}
/* Advisor Details — now uses .secHdrDials wrapper (matches Tech Detail) */
body.route-advisor .secHdrDials {
align-self: flex-start;
margin-top: 3px;
margin-right: 12px;
}
/* Technician Details — single .secHdrDials wrapper */
body.route-tech .secHdrDials {
align-self: flex-start;
margin-top: 3px;
margin-right: 12px;
}
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE POLISH — additional responsive overrides
Addresses: dashboard list rows, popup sizing, header pills, top-row wrap
═══════════════════════════════════════════════════════════════════════════ */
/* ── Gauge popup: full-width aware on very small screens ────────────────── */
@media (max-width: 400px) {
.gaugePopup {
max-width: calc(100vw - 16px) !important;
min-width: 160px !important;
padding: 8px 10px !important;
}
}
/* ── Tech dashboard: header pill row wraps on mobile ────────────────────── */
@media (max-width: 768px) {
.techDashTopRow {
flex-wrap: wrap !important;
gap: 8px !important;
}
}
/* ── Advisor dashboard list rows: stack pills below name on mobile ───────── */
@media (max-width: 768px) {
.pageAdvisorDash .advRow {
flex-wrap: wrap !important;
gap: 10px !important;
}
.pageAdvisorDash .advRow .dashLeft {
flex: 1 1 100% !important;
max-width: 100% !important;
}
.pageAdvisorDash .advRow .dashRight {
flex: 1 1 100% !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 8px !important;
}
.pageAdvisorDash .advRow .pills {
transform: none !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.pageAdvisorDash .advRow .pillGroup {
flex-wrap: wrap !important;
}
}
/* ── Technician dashboard list rows: same treatment ─────────────────────── */
@media (max-width: 768px) {
.pageTechDash .techRow.dashTechRow {
flex-wrap: wrap !important;
gap: 10px !important;
}
.pageTechDash .techRow.dashTechRow .techRowLeft {
flex: 1 1 100% !important;
min-width: 0 !important;
}
.pageTechDash .techRow.dashTechRow .dashRight,
.pageTechDash .techRow.dashTechRow .pills {
flex: 1 1 100% !important;
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: flex-start !important;
}
.pageTechDash .techRow.dashTechRow .pillGroup {
flex-wrap: wrap !important;
}
}
/* ── Main dashboard header: filter bar wraps cleanly ────────────────────── */
@media (max-width: 540px) {
.techHeaderPanel .mainFiltersBar {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen {
flex-direction: column !important;
gap: 8px !important;
}
.techHeaderPanel .mainFiltersBar .controls.mainAlwaysOpen > div {
width: 100% !important;
}
}
/* ── Row grid on small phones: 2-col ────────────────────────────────────── */
@media (max-width: 360px) {
.rowGrid {
grid-template-columns: 1fr 1fr !important;
}
}
/* ── Login page: center and pad on mobile ───────────────────────────────── */
@media (max-width: 540px) {
.loginWrap, .loginBox {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 20px 16px !important;
border-radius: 12px !important;
}
}
/* ── Group page bench tiles: single column on small screens ─────────────── */
@media (max-width: 540px) {
.groupGrid, .groupTiles {
grid-template-columns: 1fr !important;
}
}
/* ── Trend page: tighter chart padding on mobile ────────────────────────── */
@media (max-width: 540px) {
.trendChartWrap {
padding: 8px 4px !important;
overflow-x: auto !important;
}
}
/* ── svcGaugeWrap: prevent clipping inside overflow:hidden panels ────────── */
@media (max-width: 768px) {
.svcGaugeWrap {
overflow: visible !important;
}
}
/* ── Dial label text: slightly smaller on phone ─────────────────────────── */
@media (max-width: 540px) {
.svcGaugeLbl {
font-size: 10px !important;
}
}
/* ── Services home: service goal dials wrap ─────────────────────────────── */
@media (max-width: 540px) {
.svcGoalDials, .svcHdrGoalDials {
flex-wrap: wrap !important;
gap: 10px !important;
justify-content: flex-start !important;
}
}
/* ── Advisor detail catCard: header stats row wraps ─────────────────────── */
@media (max-width: 540px) {
body.route-advisor .sdCatHdrStats,
body.route-advisor .catHdrStats {
flex-wrap: wrap !important;
gap: 6px !important;
}
body.route-advisor .statValTop { font-size: 22px !important; }
body.route-advisor .statValBot { font-size: 17px !important; }
}
/* ── Prevent text overflow on name cells in list rows ───────────────────── */
@media (max-width: 540px) {
.val.name, .techName, .advName {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 180px !important;
}
}
/* ── GP toggle button: slightly larger tap target on mobile ─────────────── */
@media (max-width: 768px) {
.gpToggleBtn {
min-width: 44px !important;
min-height: 44px !important;
}
}
/* ── Rank badge focus popup: ensure it fits on mobile ───────────────────── */
@media (max-width: 480px) {
.rankFocusBadge.lg {
width: 60px !important;
height: 60px !important;
}
.rankFocusBadge.lg .rfbMain {
font-size: 12px !important;
}
}
/* ============================================================================
GOAL MODE VISUAL THEME — TECH / ADVISOR DETAIL PAGES
When compareBasis === "goal", apply the same visual treatment as the
Services Dashboard for: rank badges, diagPopRowBtns, pickMiniHdrs,
pickBox techRows, section header stats, and catCard hdrRow stats.
Selector: body[data-tech-compare-basis="goal"]
Set in renderTech.js and renderAdvisorDetail.js.
============================================================================ */
/* ── Rank badge: brighter main number + "of N" text (mirrors .pageServicesDash) */
body[data-tech-compare-basis="goal"] .rankFocusBadge .rfbMain {
color: rgba(234,240,255,1) !important;
}
body[data-tech-compare-basis="goal"] .rankFocusBadge .rfbOfNum {
font-size: calc(var(--h) * 0.165 + 1px) !important;
color: rgba(234,240,255,1) !important;
}
body[data-tech-compare-basis="goal"] .rankFocusBadge .rfbOfWord {
color: rgba(234,240,255,1) !important;
}
body[data-tech-compare-basis="goal"] .rankFocusBadge .rfbFocus {
color: rgba(234,240,255,.80) !important;
}
/* ── diagPopRowBtn (pie-slice popup service list): darker bg, var(--border) border */
body[data-tech-compare-basis="goal"] .diagPopRowBtn {
background: rgba(0,0,0,.22) !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
gap: 10px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* ── pickMiniHdr (Top 3 / Bottom 3 box headers): match services dashboard */
body[data-tech-compare-basis="goal"] .pickMiniHdr {
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
}
/* ── pickBox techRows (the individual rows inside Top/Bottom 3 boxes) */
body[data-tech-compare-basis="goal"] .techPickPanel .pickRowFrame,
body[data-tech-compare-basis="goal"] .advPickPanel .pickRowFrame {
background: rgba(0,0,0,.22) !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important;
padding: 6px 10px !important;
box-sizing: border-box !important;
}
/* ── Section header focus stats: match services dashboard sizing */
body[data-tech-compare-basis="goal"] .secHdrStats .secStatBlock:first-child .secStatVal {
font-size: 30px !important;
color: #fff !important;
}
body[data-tech-compare-basis="goal"] .secHdrStats .secStatBlock:last-child .secStatVal {
font-size: 20px !important;
color: rgba(255,255,255,.75) !important;
}
body[data-tech-compare-basis="goal"] .secHdrStats .secStatTitle {
font-size: 12px !important;
color: rgba(255,255,255,.52) !important;
letter-spacing: .2px !important;
}
body[data-tech-compare-basis="goal"] .svcSecFocusStats .statValTop {
font-size: 30px !important;
color: #fff !important;
}
body[data-tech-compare-basis="goal"] .svcSecFocusStats .statValBot {
font-size: 20px !important;
color: #fff !important;
}
body[data-tech-compare-basis="goal"] .svcSecFocusStats .statLbl {
font-size: 12px !important;
color: rgba(255,255,255,.52) !important;
letter-spacing: .2px !important;
}
/* ── catCard sdCatFocusStats (advisor detail catCard) stat label color */
body[data-tech-compare-basis="goal"].route-advisor .sdCatFocusStats .sdCatStatLbl {
color: rgba(255,255,255,.52) !important;
}
/* ── Main header panel focus stats */
body[data-tech-compare-basis="goal"] .techFocusStatsPinned > div > div:first-child {
font-size: 32px !important;
color: #fff !important;
}
body[data-tech-compare-basis="goal"] .techFocusStatsPinned > div > div:last-child {
font-size: 12px !important;
color: rgba(255,255,255,.52) !important;
letter-spacing: .2px !important;
}
/* ============================================================================
CANONICAL TYPOGRAPHY SYSTEM — FONT SIZES & WEIGHTS (ALL PAGES)
─────────────────────────────────────────────────────────────────────────────
Single authoritative pass for every typographic slot across all pages and
all viewport widths. Placed at the end of app.css so it wins every
same-specificity !important conflict via source order. Where render-file
injected