/* ============================================================
   Dealers Think — Rate CRM (admin.html) page-specific layer.
   Load order: shared/styles.css → shared/dt-bridge.css → admin.css.
   The generic reskin (dt tokens, legacy-token bridge, shell + component
   restyle) lives in shared/dt-bridge.css. This file holds only what is
   admin-specific: the v11 Dashboard, v12 Client Pipeline + Detail, and
   a few admin-only shell rules.
   ============================================================ */

/* admin-only shell rules */
.three-panel.no-list .list-panel{display:none;}   /* dashboard is two-panel */
.sim-banner{background:var(--pop); color:#fff;}
#rrNavBadge{background:var(--pop) !important; color:#fff !important;}

/* Topbar logo column — dark, continuous with the sidebar (matches Service BDC):
   the Dealers Think lockup fills the topbar's left 208px so the search field
   starts above the content area instead of at the page edge. */
.topbar{padding-left:0;}
.topbar-logo{width:208px; flex:none; align-self:stretch; background:var(--side-bg); padding-left:18px; display:flex; align-items:center; position:relative; z-index:1; box-shadow:0 1px 0 0 var(--side-bg); transition:width .16s ease;}
.topbar-logo .dt-logo{display:inline-flex; flex-direction:column; align-items:flex-start; line-height:.78; user-select:none;}
.topbar-logo .dt-logo .d{font-family:'Allura',cursive; font-size:21px; line-height:.7; color:#fff; text-transform:none; letter-spacing:0; margin-left:-2px;}
.topbar-logo .dt-logo .t{display:inline-flex; align-items:flex-end; gap:2px;}
.topbar-logo .dt-logo .t b{font-family:'Sora',sans-serif; font-weight:700; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#fff;}
.topbar-logo .dt-logo .dot{width:5px; height:5px; border-radius:50%; background:var(--neon); box-shadow:0 0 8px var(--neon); margin-bottom:1px;}
.app.nav-rail .topbar-logo{width:56px; padding-left:0; justify-content:center;}
.app.nav-rail .topbar-logo .dt-logo{display:none;}
/* collapsed rail shows the DT monogram mark instead of the full lockup */
.topbar-logo .dt-mark{display:none;}
.app.nav-rail .topbar-logo .dt-mark{display:block;}
/* the logo column joins the sidebar's hover/focus peek — otherwise the dark
   column stays 56px while the sidebar under it expands to 208px */
.app.nav-rail:has(.sidebar:hover) .topbar-logo, .app.nav-rail:has(.sidebar:focus-within) .topbar-logo{width:208px; padding-left:18px; justify-content:flex-start;}
.app.nav-rail:has(.sidebar:hover) .topbar-logo .dt-logo, .app.nav-rail:has(.sidebar:focus-within) .topbar-logo .dt-logo{display:inline-flex;}
.app.nav-rail:has(.sidebar:hover) .topbar-logo .dt-mark, .app.nav-rail:has(.sidebar:focus-within) .topbar-logo .dt-mark{display:none;}

/* With the lockup in the topbar, the product switcher pill is the sidebar's
   first item. Breathing room above it (the pin now docks in the Settings row). */
.sidebar{padding-top:10px;}

/* ---------- v11 DASHBOARD ---------- */
.dash-lead{font-size:14.5px; color:var(--ink-soft);}
.dash-lead b{color:var(--ink); font-weight:600;}

.attention{margin:18px 0 0; background:var(--dt-surface); border:1px solid var(--dt-border); border-left:3px solid var(--pop); border-radius:14px; box-shadow:var(--dt-shadow); padding:16px 20px;}
.attention-head{display:flex; align-items:center; gap:10px;}
.attention-head .p{width:7px;height:7px;border-radius:50%;background:var(--pop);box-shadow:0 0 8px rgba(var(--pop-rgb),.6);}
.attention-head .lbl{font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:1.5px; color:var(--pop-ink); font-weight:700;}
.att-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px;}
.att-tile{display:flex; align-items:center; gap:12px; background:var(--dt-surface-2); border:1px solid var(--dt-border); border-radius:11px; padding:13px 15px; cursor:pointer; text-align:left; font-family:inherit;}
.att-tile:hover{border-color:var(--ink);}
.att-tile .ic{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;}
.att-tile .ic.neon{background:rgba(var(--neon-rgb),.14);color:var(--neon-ink);}
.att-tile .ic.pop{background:rgba(var(--pop-rgb),.13);color:var(--pop-ink);}
.att-tile .t{font-size:14px; font-weight:700; color:var(--ink); display:block;}
.att-tile .s{font-size:12px; color:var(--ink-soft);}
.att-tile .arr{color:var(--ink-faint); font-size:15px;}

.dash-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px;}
.dash-stat{background:var(--dt-surface); border:1px solid var(--dt-border); border-radius:16px; box-shadow:var(--dt-shadow); padding:20px; cursor:pointer; transition:transform .15s, box-shadow .15s; text-align:left; font-family:inherit;}
.dash-stat:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.dash-stat .row{display:flex; align-items:center; justify-content:space-between;}
.dash-stat .tile{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(var(--neon-rgb),.14);color:var(--neon-ink);}
.dash-stat .tile svg{width:18px;height:18px;stroke:currentColor;}
.dash-stat .tile.pop{background:rgba(var(--pop-rgb),.13);color:var(--pop-ink);}
.dash-stat .tag{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--ink-faint);}
.dash-stat .tag.on{color:var(--neon-ink); font-weight:700;}
.dash-stat .num{font-size:36px; font-weight:800; letter-spacing:-1.5px; color:var(--ink); margin-top:14px; line-height:1;}
.dash-stat .lab{font-size:13px; color:var(--ink-soft); margin-top:6px;}
.dash-stat .act{font-size:12.5px; color:var(--neon-ink); font-weight:600; margin-top:12px; padding-top:12px; border-top:1px solid var(--dt-border-soft);}

.dash-split{display:grid; grid-template-columns:1fr 340px; gap:16px; margin-top:16px; align-items:start;}
.dash-activity{padding:8px 24px 12px;}
.dash-activity .card-head{display:flex; align-items:center; justify-content:space-between; padding:16px 0 6px;}
.dash-activity h2{font-size:17px; font-weight:700; color:var(--ink); margin:0;}
.ra{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--dt-border-soft); cursor:pointer;}
.ra:last-child{border-bottom:none;}
.ra:hover{background:var(--dt-surface-2); margin:0 -24px; padding-left:24px; padding-right:24px;}
.ra .left{display:flex; align-items:center; gap:11px; min-width:0;}
.ra .ic{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--dt-surface-2);border:1px solid var(--dt-border);color:var(--neon-ink);}
.ra .ic.sub{background:rgba(var(--pop-rgb),.1);border-color:rgba(var(--pop-rgb),.25);color:var(--pop-ink);}
.ra .eyebrow{font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:1px; color:var(--ink-faint);}
.ra .eyebrow.sub{color:var(--pop-ink);}
.ra .name{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ra .date{font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-faint); white-space:nowrap;}

.dash-rail{display:flex; flex-direction:column; gap:16px;}
.rail-card{padding:20px 22px;}
.rail-card h2{font-size:15px; font-weight:700; color:var(--ink); margin:0 0 14px;}
.funnel{display:flex; flex-direction:column; gap:12px;}
.funnel .rt{display:flex; align-items:center; justify-content:space-between; font-size:13px; margin-bottom:5px;}
.funnel .rt .stg{color:var(--ink-soft);}
.funnel .rt .n{font-family:'Space Mono',monospace; color:var(--ink); font-weight:700;}
.funnel .rt .n.zero{color:var(--ink-faint);}
.funnel .bar{height:7px; border-radius:999px; background:var(--dt-surface-2);}
.funnel .bar span{display:block; height:100%; border-radius:999px; background:var(--neon);}
.due-pill{font-family:'Space Mono',monospace; font-size:10px; font-weight:700; color:var(--pop-ink); background:rgba(var(--pop-rgb),.12); padding:2px 8px; border-radius:999px;}
.renewal{display:flex; align-items:center; gap:11px; cursor:pointer;}
.renewal .mono-ava{width:32px;height:32px;border-radius:9px;flex:none;background:var(--dt-surface-2);border:1px solid var(--dt-border);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;font-family:'Space Mono',monospace;}
.renewal .nm{font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
.renewal .due{font-size:11.5px; color:var(--ink-soft);}
.renewal .due.soon{color:var(--pop-ink); font-weight:600;}
.rail-foot{font-size:12.5px; color:var(--neon-ink); font-weight:600; margin-top:16px; padding-top:14px; border-top:1px solid var(--dt-border-soft); cursor:pointer;}
.dash-link{font-size:13px; color:var(--neon-ink); font-weight:600; cursor:pointer;}

/* ---------- v12 CLIENT PIPELINE ---------- */
/* (--ok token comes from dt-bridge.css) */

/* Screen B — client detail */
.dhead{display:flex; align-items:center; gap:13px; margin-bottom:18px;}
.dhead .tile{width:42px;height:42px;border-radius:12px;flex:none;background:rgba(var(--neon-rgb),.14);color:var(--neon-ink);display:flex;align-items:center;justify-content:center;}
.dhead h2{font-size:20px; font-weight:800; letter-spacing:-.5px; margin:0; color:var(--ink);}
.dhead .sub{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}

/* phase progress: caption + thin bar + stepper */
.pcap{font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:1.5px; color:var(--neon-ink); font-weight:700;}
.pbar{height:5px; border-radius:999px; background:var(--dt-surface-2); margin:8px 0 14px; overflow:hidden;}
.pbar span{display:block; height:100%; border-radius:999px; background:var(--neon);}
.psteps{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px;}
.pstep{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:11px; border:1px solid var(--dt-border); background:var(--dt-surface); font-size:12px; color:var(--ink-faint);}
.pstep .n{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;background:var(--dt-surface-2);color:var(--ink-faint);border:1px solid var(--dt-border);}
.pstep.done{color:var(--ink-soft);}
.pstep.done .n{background:rgba(var(--neon-rgb),.16);color:var(--neon-ink);border-color:rgba(var(--neon-rgb),.35);}
.pstep.cur{border-color:rgba(var(--neon-rgb),.55); background:rgba(var(--neon-rgb),.06); color:var(--ink); font-weight:600;}
.pstep.cur .n{background:var(--neon);color:var(--on-neon);border-color:transparent;}

/* money cards */
.money-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px;}
.money{background:var(--dt-surface); border:1px solid var(--dt-border); border-radius:14px; box-shadow:var(--dt-shadow); padding:14px 17px;}
.money .lbl{font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:1px; color:var(--ink-faint);}
.money .val{font-size:20px; font-weight:800; letter-spacing:-.5px; color:var(--ink); margin-top:7px;}
.money.ok .lbl{color:var(--ok);} .money.ok .val{color:var(--ok);}

/* rate-summary stub (phase 1) */
.rate-stub{display:flex; align-items:center; gap:10px; background:var(--dt-surface-2); border:1px solid var(--dt-border); border-radius:11px; padding:11px 14px; font-size:12.5px; color:var(--ink-soft); margin-bottom:20px;}
.rate-stub b{color:var(--ink);}
.rate-stub .x{margin-left:auto; color:var(--neon-ink); font-weight:600; cursor:pointer; white-space:nowrap;}

/* section eyebrow */
.dsec{font-family:'Space Mono',monospace; font-size:10.5px; font-weight:700; letter-spacing:1.5px; color:var(--ink-faint); text-transform:uppercase; border-bottom:1px solid var(--dt-border); padding-bottom:7px; margin-bottom:10px;}

/* meta rail (props) */
.detail-props{background:var(--dt-surface); border-left:1px solid var(--dt-border);}
.mrow{padding:11px 0; border-bottom:1px solid var(--dt-border-soft);}
.mrow .k{font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:1px; color:var(--ink-faint); text-transform:uppercase;}
.mrow .v{font-size:13.5px; color:var(--ink); margin-top:4px; font-weight:600;}
.mrow .v.mono{font-family:'Space Mono',monospace; font-size:12.5px;}
.mrow .big{font-size:24px; font-weight:800; letter-spacing:-.8px; color:var(--neon-ink); margin-top:4px;}
.mrow .big small{font-size:12px; color:var(--ink-soft); font-weight:500; letter-spacing:0; margin-left:7px;}
.dchip{display:inline-flex; align-items:center; gap:6px; font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; border-radius:999px;}
.dchip .dot{width:6px;height:6px;border-radius:50%;}
.dchip.pop{background:rgba(var(--pop-rgb),.12); color:var(--pop-ink); border:1px solid rgba(var(--pop-rgb),.3);}
.dchip.pop .dot{background:var(--pop);}
.dchip.neon{background:rgba(var(--neon-rgb),.14); color:var(--neon-ink); border:1px solid rgba(var(--neon-rgb),.3);}
.dchip.neon .dot{background:var(--neon);box-shadow:0 0 6px var(--neon);}
.dchip.off{background:var(--dt-surface-2); color:var(--ink-faint); border:1px solid var(--dt-border);}
.dchip.off .dot{background:var(--ink-faint);}
.pend-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pop);margin-left:6px;vertical-align:1px;}
.btn-del{background:none;border:none;color:var(--pop-ink);font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;padding:8px 0;}
.btn-del:hover{text-decoration:underline;}

@media (max-width:1100px){ .psteps{grid-template-columns:repeat(2,1fr);} .money-grid{grid-template-columns:1fr;} }

/* client list cards (middle panel) */
.cli{padding:13px 15px; border-radius:12px; cursor:pointer; border:1px solid transparent; text-align:left; background:none; font-family:inherit; width:100%; display:block;}
.cli:hover{background:var(--dt-surface); border-color:var(--dt-border); box-shadow:var(--dt-shadow);}
.cli.on{background:var(--dt-surface); border-color:var(--neon); box-shadow:var(--dt-shadow);}
.cli-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.cli-name{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;}
.cli-sub{font-size:12px; color:var(--ink-faint); margin-top:4px;}
.frac{font-family:'Space Mono',monospace; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; flex:none;}
.frac.p1{color:var(--pop-ink); background:rgba(var(--pop-rgb),.12);}
.frac.p2{color:var(--neon-ink); background:rgba(var(--neon-rgb),.15);}
.stagebar{display:flex; gap:3px; margin-top:9px;}
.stagebar i{height:4px; flex:1; border-radius:2px; background:var(--dt-border);}
.stagebar i.on{background:var(--neon);}
.stagebar i.on.pop{background:var(--pop);}

/* pipeline snapshot (Screen A main) */
.snapshot{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px;}
.snap{background:var(--dt-surface); border:1px solid var(--dt-border); border-radius:14px; box-shadow:var(--dt-shadow); padding:16px 18px; cursor:pointer; text-align:left; font-family:inherit;}
.snap:hover{border-color:var(--ink);}
.snap .row{display:flex; align-items:center; justify-content:space-between;}
.snap .lbl{font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:1px; color:var(--ink-faint);}
.snap .num{font-size:28px; font-weight:800; letter-spacing:-1px; color:var(--ink); margin-top:10px;}
.snap .num.zero{color:var(--ink-faint);}
.snap .dot{width:8px;height:8px;border-radius:50%;}
.snap .dot.neon{background:var(--neon);box-shadow:0 0 6px var(--neon);}
.snap .dot.pop{background:var(--pop);}
.snap .dot.off{background:var(--dt-border);}

/* empty-selection state */
.empty-sel{flex:1; display:flex; align-items:center; justify-content:center; min-height:320px; margin-top:10px;}
.empty-sel .box{text-align:center; max-width:380px;}
.empty-sel .icon{width:60px;height:60px;border-radius:17px;margin:0 auto 18px;background:rgba(var(--neon-rgb),.12);border:1px solid rgba(var(--neon-rgb),.32);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--neon-ink);}
.empty-sel h3{font-size:19px; font-weight:800; letter-spacing:-.4px; color:var(--ink); margin:0;}
.empty-sel p{font-size:14px; line-height:1.6; color:var(--ink-soft); margin:8px 0 0;}

@media (max-width:1080px){ .snapshot{grid-template-columns:repeat(2,1fr);} }

@media (max-width:1200px){ .dash-stats{grid-template-columns:repeat(2,1fr);} }
@media (max-width:1020px){ .dash-split{grid-template-columns:1fr;} .att-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important; transition:none !important;}}