/* TOPBAR_V1 (Seann 2026-11-02): nav as real buttons, right-corner stack, KPI strip on every screen, KPIs-page daily scorecard */
header#top { align-items: center; gap: 14px 18px; }
header#top nav#nav { gap: 8px; align-items: center; align-content: center; }
header#top nav#nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,.30); background: rgba(255,255,255,.08); color: #fff; font-weight: 600; font-size: 13.5px; line-height: 1.2; white-space: nowrap; box-shadow: 0 1px 0 rgba(0,0,0,.18); transition: background .12s; }
header#top nav#nav a:hover { background: rgba(255,255,255,.18) !important; }
header#top nav#nav a.on { background: var(--w-gold, #c9a24a) !important; border-color: var(--w-gold-lt, #e5c77a); color: #1b1b1d; box-shadow: none; }
header#top nav#nav a .pill { margin-left: 2px; }
header#top nav#nav a[hidden], header#top nav#nav .pill[hidden] { display: none !important; } /* keep role hiding (.mgr/.rep/.tdnav use the hidden attribute) */
header#top nav#nav .nav-pop { margin-left: -5px; padding: 3px 6px; border-radius: 7px; }
/* right corner: View as rep -> month -> user badge -> user links */
header#top .who { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; opacity: 1; margin-left: auto; }
header#top .who > #va-wrap, header#top .who > #va-pick { order: 1; margin: 0; }
header#top .who > #hdr-x { order: 2; margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
header#top .who > #who-id { order: 3; }
header#top .who > #who-links { order: 4; }
#who-id { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
#who-id .av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; letter-spacing: .5px; color: #1b1b1d; background: radial-gradient(circle at 35% 35%, var(--w-gold-lt, #e5c77a), var(--w-gold, #c9a24a) 65%, var(--w-orange, #ef6c00)); box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
#who-id .av:empty { display: none; }
#who-id #who { font-weight: 700; font-size: 14px; }
#who-id #bell { color: #fff; text-decoration: none; font-size: 15px; }
#who-links { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#who-links a.link, #who-links button.link { font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.10); cursor: pointer; line-height: 1.2; }
#who-links a.link:hover, #who-links button.link:hover { background: rgba(255,255,255,.22); }
/* KPI strip: replaces the greeting box on every screen */
#warm-hello { display: none !important; }
#kstrip { max-width: 1400px; margin: 12px auto 0; padding: 0 16px; display: grid; grid-template-columns: minmax(110px,.8fr) repeat(5, minmax(0,1fr)); gap: 10px; position: relative; z-index: 1; }
#kstrip .ks-h { display: flex; flex-direction: column; justify-content: center; padding: 6px 4px; }
#kstrip .ks-h b { font-size: 16px; color: #1f3320; } #kstrip .ks-h small { color: #5d5a50; font-size: 12px; }
#kstrip .ks { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid #eadfc4; border-left: 4px solid var(--w-gold, #c9a24a); color: #1d2430; text-decoration: none; box-shadow: 0 1px 3px rgba(60,45,10,.06); min-width: 0; }
#kstrip a.ks[href]:hover { border-color: var(--w-gold, #c9a24a); background: #fffbf1; }
#kstrip .ks b { font-size: 22px; line-height: 1.1; color: #1f3320; }
#kstrip .ks span { font-size: 12.5px; font-weight: 600; color: #3c4a33; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kstrip .ks small { font-size: 11.5px; color: #6b675c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kstrip .ks.od { border-left-color: #c62d21; } #kstrip .ks.od em { font-style: normal; font-weight: 700; color: #b91c1c; background: #fee2e2; padding: 0 6px; border-radius: 8px; }
/* daily scorecard (KPIs page) */
#dsc .sc-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } #dsc .sc-h h3 { margin: 0 0 8px; }
#dsc .sc-g { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
#dsc .sc { border: 1px solid #e5e1d6; border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 3px; }
#dsc .sc span { font-size: 12.5px; font-weight: 600; color: #3c4a33; } #dsc .sc b { font-size: 26px; line-height: 1.1; color: #1f3320; } #dsc .sc b i { font-style: normal; font-size: 15px; color: #6b675c; font-weight: 600; }
#dsc .sc small { font-size: 11.5px; color: #6b675c; } #dsc .sc-n { margin: 8px 0 0; font-size: 12px; }
#dsc .scbar { height: 6px; border-radius: 4px; background: #eee9dc; overflow: hidden; } #dsc .scbar div { height: 100%; background: var(--w-orange, #ef6c00); } #dsc .sc.hit .scbar div { background: #3f7d32; }
@media (max-width: 1100px) { #kstrip { grid-template-columns: repeat(5, minmax(0,1fr)); } #kstrip .ks-h { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; padding: 0 2px; } }
@media (max-width: 760px) {
  header#top { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px; }
  header#top nav#nav { gap: 6px; } header#top nav#nav a { padding: 6px 10px; font-size: 13px; }
  header#top .who { align-items: flex-start; margin-left: 0; }
  #who-links { justify-content: flex-start; }
  #kstrip { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 0 10px; margin-top: 10px; }
  #kstrip .ks { padding: 8px 9px; } #kstrip .ks b { font-size: 19px; } #kstrip .ks span { font-size: 11.5px; white-space: normal; }
  #dsc .sc-g { grid-template-columns: repeat(2, minmax(0,1fr)); } #dsc .sc b { font-size: 22px; }
}
@media print { #kstrip { display: none !important; } }
/* DEDUPE_V1: follow-ups card in the scorecard */
#dsc a.sc { text-decoration: none; color: inherit; } #dsc a.sc:hover { border-color: #c9c2ad; }
#dsc .sc.od { border-left: 4px solid #c62d21; } #dsc .sc.od em { font-style: normal; font-weight: 700; color: #b91c1c; background: #fee2e2; padding: 0 6px; border-radius: 8px; }
@media (max-width: 1100px) and (min-width: 761px) { #dsc .sc-g { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* MONTH_HIDE_V1: no top-bar month in the Logs / Trades windows (Dashboard has its own picker) */
/* GDR_V1: the date toggle shows on every page */ body.nomonth #perbar { display: none !important; }
/* DASH_TOP_V1 */
#dr-bar select, #dr-bar input[type=month] { min-height: 36px; }
@media (max-width: 700px) { #dr-bar { flex-wrap: wrap; } #dr-bar select { flex: 1 1 100%; } #dr-bar .grow { flex-basis: 100%; } }
/* VEH_WIN_V1: the Vehicles window shows only its own tab row (no Logs / Service / other nav, no icon strip) */
body.vehwin #nav a:not([href="#/vehicles"]), body.vehwin #icnav { display: none !important; }
#lgbar .h2ttl { margin-right: 10px; font-size: 15px; align-self: center; }
.td-card > h2 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.td-card > h2 a.sm { font-size: 13px; font-weight: 500; }
.td-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .td-sum { grid-template-columns: 1fr; } }
/* INV_WIN_V1: Inventory window shows only its own nav button */
body.invwin #nav a:not([href="#/inventory"]), body.invwin #icnav { display: none !important; }
/* GDR_V1 global date toggle */
#hdr-x .per-tg.gdr { gap: 4px; padding: 1px 4px; }
#hdr-x .per-tg.gdr input[type=month] { border: 0; background: transparent; font: inherit; max-width: 150px; }
@media (max-width: 700px) { #hdr-x .per-tg.gdr input[type=month] { max-width: 130px; } }
/* NAV_TILES_V1 (Seann 2:06): equal-size tile buttons, icon on top, label below; one row at 1440, side-scroll on mobile */
header#top nav#nav { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
header#top nav#nav a { flex: 0 0 78px; width: 78px; height: 60px; box-sizing: border-box; flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 4px 2px; border-radius: 12px; font-size: 12px; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
header#top nav#nav a[hidden] { display: none !important; }
header#top nav#nav a::before { font-size: 20px; line-height: 1; content: "🔗"; }
header#top nav#nav a[href="#/company"]::before { content: "📊"; } header#top nav#nav a[href="#/rrq"]::before { content: "🪣"; }
header#top nav#nav a[href="#/inbox"]::before { content: "👥"; } header#top nav#nav a[href="#/tasks"]::before { content: "✅"; }
header#top nav#nav a[href="#/calls"]::before { content: "📞"; } header#top nav#nav a[href="#/dash"]::before { content: "📈"; }
header#top nav#nav a[href="#/logs"]::before { content: "📒"; } header#top nav#nav a[href="#/deliveries"]::before { content: "🚚"; }
header#top nav#nav a[href="#/vehicles"]::before { content: "🔁"; } header#top nav#nav a[href="#/inventory"]::before { content: "🚗"; }
header#top nav#nav a[href="#/service"]::before { content: "🔧"; } header#top nav#nav a[href="#/recycling"]::before { content: "♻️"; }
header#top nav#nav a[href="#/deals"]::before { content: "💼"; } header#top nav#nav a[href="#/settings"]::before { content: "⚙️"; }
header#top nav#nav a #rrqn { position: absolute; top: 2px; right: 4px; font-size: 10px; padding: 0 4px; } header#top nav#nav a[href="#/rrq"] { position: relative; }
@media (max-width: 760px) { header#top nav#nav { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } header#top nav#nav a { flex: 0 0 70px; width: 70px; height: 56px; padding: 4px 2px; font-size: 11.5px; } }
/* EXEC_BADGE_V2 */
#top .brand #exec-chip { margin-left: 6px; padding: 1px 7px; font-size: 11px; border-radius: 9px; background: rgba(255,255,255,.92); color: #5b21b6; white-space: nowrap; }
/* LINKS_TILES_V1 */
#lk-menu { width: 520px; } #lk-menu .lk-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 4px 0 8px; }
#lk-menu button.lk-t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 76px; padding: 8px 4px; border: 1px solid #dfe5ee; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); text-align: center; font-size: 12px; line-height: 1.2; }
#lk-menu button.lk-t:hover { background: #fff7ed; border-color: #f59e0b; } #lk-menu .lk-ic { font-style: normal; font-size: 22px; line-height: 1; } #lk-menu .lk-ic img { width: 22px; height: 22px; display: block; }
@media (max-width: 700px) { #lk-menu { width: auto; } #lk-menu .lk-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* LOGS_FULLW_V2: compact Notes (ellipsis, full text on hover) and Status */
body.fullw #l-grid table.grid td[data-k=notes] { min-width: 0; width: 130px; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
body.fullw #l-grid table.grid td[data-k=notes].nx { white-space: normal; max-width: 260px; }
table.grid .cc { min-width: 0 !important; width: 1%; } table.grid td.cc select.ssel { min-width: 0; width: auto; max-width: 92px; padding: 1px 2px; font-size: 11px; border-radius: 10px; }
body.repdeliv #app .tabs-d, body.repdeliv #app .tabs-m { display: none !important; }
/* DASH_OVERFLOW_V1: long per-day charts scroll inside their card instead of widening the page */
#dash, #dash .grid2 > *, #dash-all, #dash-all > * { min-width: 0; } #dash .card { overflow-x: auto; max-width: 100%; }
/* LOG_FS_V1: secondary full-screen button */
#fs-btn { margin-left: 8px; font-size: 12px; padding: 2px 8px; vertical-align: middle; }
body.fsmode header#top, body.fsmode .banner, body.fsmode #kstrip, body.fsmode #icnav, body.fsmode #lgbar { display: none !important; }
body.fsmode main { max-width: none !important; padding: 4px 6px !important; margin: 0 !important; }
/* NAV_TILES_V1 mobile containment: nav scrolls inside the header; date toggle fits the screen */
header#top nav#nav { min-width: 0; max-width: 100%; }
@media (max-width: 760px) { header#top { overflow-x: hidden; } header#top > * { min-width: 0; max-width: 100%; } #hdr-x { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; box-sizing: border-box; } #hdr-x .per-tg.gdr { flex: 1 1 200px; min-width: 0; display: flex; } #hdr-x .per-tg.gdr select { flex: 1 1 auto; min-width: 0; width: 0; } #hdr-x .per-tg.gdr input[type=month] { flex: 0 1 120px; min-width: 0; } }
/* HOT_BTN_V1: accented hot-button tiles */
header#top nav#nav a.hot { background: linear-gradient(180deg, #f59e0b, #d97706); border-color: #fbbf24; color: #1f1300; }
header#top nav#nav a.hot:hover { filter: brightness(1.06); }
header#top nav#nav a[href="#/newcust"]::before { content: "➕"; } header#top nav#nav a[href="#/appraise"]::before { content: "🔍"; }
.rh-won { background: #dcfce7; color: #166534; } .rh-lost { background: #fee2e2; color: #991b1b; } .rh-pending { background: #fef3c7; color: #92400e; }
/* LOGS_CLEAN_V1 (Seann 2:21): Logs tabs + Deliveries open straight into the log - no Today strip, scorecards, brand marks, greeting or profile card; compact nav tiles */
body.fullw #kstrip, body.fullw #icnav, body.fullw #dsc, body.fullw #warm-hello, body.fullw .warm-rail, body.fullw .warm-empty, body.fullw #warm-under, body.fullw #exec-chip, body.fullw #top #who, body.fullw #top .who .av, body.fullw #top .who [class*=avatar] { display: none !important; }
body.fullw main#app > p.muted:not(.legend) { display: none !important; }
body.fullw main#app > h1 { font-size: 0; margin: 0 0 4px; min-height: 0; } body.fullw main#app > h1::after { display: none; } body.fullw main#app > h1 #fs-btn { font-size: 12px; margin: 0; float: right; }
body.fullw header#top nav#nav a { flex: 0 0 auto; width: auto; height: 34px; flex-direction: row; gap: 5px; padding: 3px 9px; font-size: 12px; } body.fullw header#top nav#nav a::before { font-size: 14px; }
body.fullw header#top nav#nav a.hot { width: auto; }
/* HOT_BTN_V1: wider tiles so the two-word labels fit */
header#top nav#nav a.hot { flex-basis: 96px; width: 96px; white-space: normal; line-height: 1.05; }
body.fullw header#top .who > #who-id { display: none !important; }
/* HOT_BTN_V2: first two tiles, never scrolled off; smaller 2-line labels */
header#top nav#nav a.hot { flex: 0 0 84px; width: 84px; font-size: 12px; line-height: 1.05; white-space: normal; overflow: hidden; text-overflow: clip; padding: 4px 3px; }
@media (max-width: 760px) { header#top nav#nav a.hot { position: sticky; z-index: 2; } header#top nav#nav a[href="#/newcust"] { left: 0; } header#top nav#nav a[href="#/appraise"] { left: 90px; } }
/* HOT_BTN_V3 (Seann 2:23): hot actions in their own stacked group at the right end of the nav row */
header#top #navrow { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
header#top #navrow > nav#nav { flex: 0 1 auto; min-width: 0; }
header#top #hotbar { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.3); }
header#top #hotbar:not(:has(a:not([hidden]))) { display: none; }
header#top #hotbar a.hot { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.3); border: 0; }
header#top #hotbar a.hot[hidden] { display: none !important; }
header#top #hotbar a.hot-nc { background: #15803d; } header#top #hotbar a.hot-ap { background: #1d4ed8; }
header#top #hotbar a.hot-nc::before { content: "➕"; font-size: 12px; } header#top #hotbar a.hot-ap::before { content: "🔍"; font-size: 12px; }
header#top #hotbar a.hot:hover { filter: brightness(1.1); }
body.vehwin header#top #hotbar, body.invwin header#top #hotbar { display: none; }
@media (max-width: 760px) { header#top #navrow { width: 100%; gap: 6px; } header#top #hotbar { padding-left: 6px; } header#top #hotbar a.hot { height: 25px; padding: 0 8px; font-size: 11px; } }
/* NEWCUST_V1 */
.nc-form .nc-g { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 14px; }
.nc-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; } .nc-form input, .nc-form select { width: 100%; box-sizing: border-box; font-size: 15px; padding: 8px; }
.nc-warn { background: #fff7ed; border: 1px solid #fdba74; margin: 6px 0; }
@media (max-width: 700px) { .nc-form .nc-g { grid-template-columns: 1fr; } }
/* APPRAISE_V2 */
.ap-ask .ap-btns { display: flex; gap: 10px; flex-wrap: wrap; } .ap-ask .ap-btns button { flex: 1 1 200px; font-size: 16px; padding: 14px; }
button.ap-pick { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; padding: 10px; margin: 4px 0; background: #fff; color: #1d2430; border: 1px solid #dfe5ee; border-radius: 10px; } button.ap-pick small { color: #6b7280; }

/* DEALER_LINKS_V1 (Seann 2026-11-02 2:43 PM PT): compact store-website strip in the top panel; photo rails gone, content uses the width */
.warm-rail{display:none!important}
@media (min-width:1600px){main,#icnav,#kstrip{max-width:1760px}}
.dlr{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.dlr-l{font-size:11px;font-weight:700;color:#f5e9c8;margin-right:2px;white-space:nowrap}
.dlr-b{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:11px;text-decoration:none;white-space:nowrap}
.dlr-b:hover{background:rgba(255,255,255,.26)}
.dlr-b b{font-size:10px;background:#f5b400;color:#1d2b12;border-radius:6px;padding:0 4px}
@media (max-width:1280px){.dlr-n{display:none}}
@media (max-width:760px){header#top .who > #hdr-x{flex-wrap:wrap}header#top #hdr-x > #dlr{flex:1 0 100%;order:9;justify-content:flex-start;flex-wrap:nowrap}}

/* TL_COLLAPSE_V1: collapsible Activity timeline on the customer file */
#tl-card .timeline > li.tl-more{display:none}#tl-card.tl-open .timeline > li.tl-more{display:list-item}
#tl-card.tl-hid .timeline,#tl-card.tl-hid .tl-all{display:none}
#tl-card #tl-tg::after{content:'Hide'}#tl-card.tl-hid #tl-tg::after{content:'Show'}
#tl-card .tl-all{margin-top:6px;background:none;border:0;color:#1d4ed8;cursor:pointer;padding:0;font-weight:600}

/* CUSTFILE_BTN_V1 (Seann 2026-11-02 2:48 PM PT): Lead Log 'Customer file' button directly under the Status control, same width, easy to tap */
table.grid td.cc select.ssel{display:block;width:112px!important;max-width:112px!important;min-width:112px!important}
table.grid td.cc a.cf-btn{display:block;box-sizing:border-box;width:112px;margin-top:4px;padding:6px 4px;text-align:center;font-size:12px;font-weight:700;line-height:1.2;border-radius:6px;background:#1f6f3a;color:#fff;text-decoration:none;white-space:nowrap}
table.grid td.cc a.cf-btn:hover{background:#185a2f}
@media (pointer:coarse){table.grid td.cc a.cf-btn{padding:9px 4px;font-size:13px}}
/* DLR_STACK_V1 (Seann 3:08 PM PT, sandbox first): dealer links stacked one per line, compact */
body.sbx .dlr{display:inline-grid;grid-auto-flow:row;gap:0;align-items:start;justify-items:start;line-height:1.15}
body.sbx .dlr-l{font-size:9.5px;margin:0 0 1px}
body.sbx .dlr-b{padding:0 4px;gap:4px;font-size:10.5px;line-height:15px;border:0;background:none;border-radius:4px}
body.sbx .dlr-b:hover{background:rgba(255,255,255,.18)}
body.sbx .dlr-b b{font-size:9px;line-height:13px}
@media (max-width:1280px){body.sbx .dlr-n{display:inline}}
@media (max-width:760px){body.sbx header#top #hdr-x > #dlr{flex:0 0 auto;order:0}}