:root {
  --navy: #12304F; --navy-2: #1E4A78; --orange: #E8792B; --bg: #F4F6F8; --card: #FFFFFF;
  --ink: #1B2430; --mute: #66717F; --line: #DDE3EA; --ok: #1F7A3E; --ok-bg: #E3F3E8;
  --warn: #9A6400; --warn-bg: #FFF3D6; --bad: #B3261E; --bad-bg: #FBE4E2;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); }
a { color: var(--navy-2); }
header { background: var(--navy); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 5; }
header h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .01em; }
header .sub { font-size: 12px; opacity: .75; }
header .spacer { flex: 1; }
header button, header a.btn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; text-decoration: none; }
nav.tabs { display: flex; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 49px; z-index: 4; }
nav.tabs a { flex: 1; text-align: center; padding: 11px 4px; font-size: 13px; font-weight: 600; color: var(--mute); text-decoration: none; border-bottom: 3px solid transparent; }
nav.tabs a.on { color: var(--navy); border-color: var(--orange); }
main { max-width: 720px; margin: 0 auto; padding: 14px 14px 80px; }
.wide main { max-width: 1200px; }
h2 { font-size: 15px; margin: 18px 0 8px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { min-width: 0; }
.grow { flex: 1; }
.list .item { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; text-decoration: none; color: inherit; }
.list .item .t { font-weight: 700; font-size: 15px; }
.list .item .s { color: var(--mute); font-size: 13px; margin-top: 2px; }
.list .item .due { color: var(--bad); font-weight: 600; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; background: var(--bg); color: var(--navy); vertical-align: middle; }
.pill.new { background: #E3ECF7; } .pill.contacted { background: var(--warn-bg); color: var(--warn); }
.pill.conversation, .pill.quoted { background: #FFE9D6; color: #9A4A0F; }
.pill.won { background: var(--ok-bg); color: var(--ok); } .pill.lost, .pill.not_fit { background: var(--bad-bg); color: var(--bad); }
.pill.customer { background: var(--ok-bg); color: var(--ok); }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.actions a, .actions button { display: block; text-align: center; padding: 11px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--navy); font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; }
.actions a.wa { background: #25D366; border-color: #25D366; color: #fff; }
button.primary { background: var(--orange); color: #fff; border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 700; font-size: 14px; cursor: pointer; }
button.primary:disabled { opacity: .5; }
button.ghost { background: transparent; color: var(--navy-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-weight: 600; font-size: 13px; cursor: pointer; }
button.small { padding: 5px 9px; font-size: 12px; }
label { display: block; font-size: 12px; color: var(--mute); margin: 10px 0 4px; font-weight: 600; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; color: var(--ink); }
textarea { min-height: 80px; resize: vertical; }
.draft { background: var(--bg); border-radius: 10px; padding: 10px 12px; margin: 8px 0; white-space: pre-wrap; font-size: 14px; }
.draft .bar { display: flex; gap: 8px; margin-top: 8px; }
.brief { white-space: pre-wrap; }
.muted { color: var(--mute); font-size: 13px; }
.err { color: var(--bad); font-size: 13px; margin-top: 8px; }
.ok { color: var(--ok); font-size: 13px; margin-top: 8px; }
.signin { max-width: 360px; margin: 50px auto; }
.hist .h { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.hist .h b { color: var(--navy); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tile .n { font-size: 26px; font-weight: 800; color: var(--navy); }
.tile .l { font-size: 12px; color: var(--mute); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.scroll { overflow: auto; max-height: 520px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.filters select, .filters input { width: auto; flex: 1; min-width: 120px; }
.mic { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 18px; cursor: pointer; }
.mic.on { background: var(--bad); color: #fff; border-color: var(--bad); }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; display: none; z-index: 20; }
@media (max-width: 480px) { .actions { grid-template-columns: repeat(2, 1fr); } nav.tabs a { font-size: 11.5px; padding: 11px 2px; } }

/* account page: facts on the left, work on the right */
.acct { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.acct .side { position: sticky; top: 100px; }
.acct .side .card { padding: 0; overflow: hidden; }
.acct .photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--bg); }
.acct .facts { padding: 14px; }
.acct .name { font-size: 20px; font-weight: 800; line-height: 1.2; }
.acct .phone { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: .01em; margin: 10px 0 2px; display: flex; align-items: center; gap: 10px; }
.acct .phone a { color: inherit; text-decoration: none; }
.acct .fact { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.acct .fact .k { color: var(--mute); width: 76px; flex: none; }
.acct .fact .v { min-width: 0; overflow-wrap: anywhere; }
.acct .map { width: 100%; height: 220px; border: 0; display: block; border-top: 1px solid var(--line); }
.acct .hours { font-size: 12px; color: var(--mute); margin: 0; padding: 0; list-style: none; }
.acct .hours li.today { color: var(--ink); font-weight: 700; }
.pill.kosher { background: #EEF2FF; color: #3730A3; }
.pill.score { background: var(--navy); color: #fff; min-width: 30px; text-align: center; }
.acct .actions { margin: 12px 14px 0; }
.acct .side .pad { padding: 0 14px 14px; }
@media (max-width: 860px) { .acct { grid-template-columns: 1fr; } .acct .side { position: static; } .acct .map { height: 180px; } }

/* plan: map + walk list */
.plan { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.plan > div:first-child { position: sticky; top: 100px; }
.pmap { height: calc(100vh - 290px); min-height: 360px; border-radius: 12px; border: 1px solid var(--line); z-index: 1; }
.pin { width: 24px; height: 24px; border-radius: 50%; color: #fff; font: 700 11px/24px -apple-system, "Segoe UI", sans-serif; text-align: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pin.static { display: inline-block; background: var(--orange); flex: none; width: 24px; height: 24px; border: 0; box-shadow: none; }
.hotrow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px; }
.hot { flex: none; display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; cursor: pointer; font: inherit; font-size: 12px; color: var(--ink); max-width: 260px; }
.hot b { font-size: 13px; color: var(--navy); }
.hot:hover { border-color: var(--orange); }
@media (max-width: 860px) { .plan { grid-template-columns: 1fr; } .plan > div:first-child { position: static; } .pmap { height: 340px; } }
.list .item.on { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(232,121,43,.25); }
.legbtn { text-decoration: none; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; }
#rlist { max-height: calc(100vh - 230px); overflow: auto; }
@media (max-width: 860px) { #rlist { max-height: none; } }
/* log */
.logt td { font-size: 13px; }
.logt tr.day th { background: var(--bg); color: var(--navy); font-size: 12px; padding-top: 12px; }
.nowrap { white-space: nowrap; }

/* ask: the in-app assistant */
.askfab { position: fixed; right: 18px; bottom: 18px; z-index: 30; background: var(--navy); color: #fff; border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.ask { position: fixed; right: 18px; bottom: 70px; width: min(420px, calc(100vw - 36px)); height: min(560px, calc(100vh - 120px)); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.25); z-index: 31; display: none; flex-direction: column; overflow: hidden; }
.ask.open { display: flex; }
.ask .top { background: var(--navy); color: #fff; padding: 10px 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ask .top button { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 18px; cursor: pointer; }
.ask .log { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ask .m { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; line-height: 1.4; }
.ask .m.u { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.ask .m.a { align-self: flex-start; background: var(--bg); border-bottom-left-radius: 4px; }
.ask .m.a a { font-weight: 700; }
.ask .hint { font-size: 12px; color: var(--mute); padding: 0 12px 8px; }
.ask .hint button { margin: 2px 4px 2px 0; }
.ask form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.ask form input { flex: 1; }

/* ---------- full-window layout (desktop): a filter bar, then columns that scroll on their own ---------- */
body.full main { max-width: none; padding: 12px 16px 14px; display: flex; flex-direction: column; height: calc(100vh - var(--top, 93px)); overflow: hidden; }
body.full main > .bar { flex: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
body.full main > .bar select, body.full main > .bar input { width: auto; flex: 1; min-width: 120px; padding: 8px 10px; }
body.full main > .bar .muted { flex: 3; }
.btnlink { flex: none; text-decoration: none; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; background: var(--card); color: var(--navy-2); white-space: nowrap; }
.cols { flex: 1; min-height: 0; display: grid; gap: 14px; grid-template-rows: minmax(0, 1fr); }
.cols-2 { grid-template-columns: minmax(360px, 1fr) minmax(0, 1.25fr); }
.cols-3 { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(340px, 420px); }
.cols > .col { min-height: 0; overflow: auto; padding-right: 2px; }
.cols > .col.side { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.fillmap { flex: 1; min-height: 300px; border-radius: 12px; border: 1px solid var(--line); z-index: 1; }
.cols h2:first-child { margin-top: 0; }
.card.sticky { position: sticky; top: 0; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.card.empty { background: linear-gradient(180deg, #fff, #F8FAFC); }
.logcols { grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.4fr); }
.matcols { grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.4fr); }
.masonry { column-width: 320px; column-gap: 12px; }
.masonry .card { break-inside: avoid; }
@media (max-width: 1000px) {
  body.full main { height: auto; display: block; overflow: visible; }
  .cols, .cols-2, .cols-3, .logcols, .matcols { display: block; }
  .cols > .col { overflow: visible; margin-bottom: 12px; }
  .cols > .col.side { overflow: visible; }
  .fillmap { height: 340px; flex: none; }
  .card.sticky { position: static; }
}

/* small tiles row */
.tiles.mini { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin: 8px 0; }
.tiles.mini .tile { padding: 8px 10px; }
.tiles.mini .tile .n { font-size: 20px; }
.tile.hot .n { color: var(--orange); }
.tile.good .n { color: var(--ok); }

/* mini bars */
.mbars { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.mbars small { color: var(--mute); font-size: 11px; white-space: nowrap; margin-right: 4px; }
.mbar { display: inline-block; flex: 1; height: 6px; background: var(--bg); border-radius: 99px; overflow: hidden; min-width: 30px; vertical-align: middle; }
.mbar i { display: block; height: 100%; background: var(--navy-2); border-radius: 99px; }
.mbar.food i { background: var(--orange); } .mbar.kosher i { background: #4F46E5; } .mbar.phone i { background: #25D366; } .mbar.hot i { background: linear-gradient(90deg, var(--orange), #F2A65A); }
.mbar.inline { width: 60px; flex: none; }
.pin.static.rank { width: 30px; }
#ranks { flex: none; }
.rankcard { padding: 6px 10px; max-height: 34vh; overflow: auto; margin-bottom: 0; }
.rankcard tr.on td { background: #FFF4EA; }
.hotitem .mbars { margin: 6px 0 2px; }
.howto { margin: 6px 0 0 18px; padding: 0; font-size: 13px; line-height: 1.6; }

/* log charts */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; margin-top: 10px; }
.barcol { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 6px; }
.barcol .stack { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; min-height: 2px; background: var(--bg); }
.barcol .stack i { display: block; min-height: 2px; }
.barcol small { font-size: 9px; color: var(--mute); margin-top: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--mute); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.hbar { display: grid; grid-template-columns: 110px 1fr 36px; align-items: center; gap: 8px; font-size: 13px; margin-top: 7px; }
.hbar .mbar { height: 9px; } .hbar b { text-align: right; }
.tdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* account page in full layout: facts column | two work columns, each scrolls */
body.full .acct { flex: 1; min-height: 0; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
body.full .acct .side { position: static; overflow: auto; min-height: 0; }
body.full .acct .work { overflow: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1200px) { body.full .acct .work { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { body.full .acct { display: block; } body.full .acct .side, body.full .acct .work { overflow: visible; } }
.people { padding: 4px 14px 10px; border-top: 1px solid var(--line); }
.person { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.person:last-child { border-bottom: 0; }
.person .reach { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; }
.person .reach a { font-weight: 600; text-decoration: none; }
.person .walink { color: #128C4A; }
.ctab td { font-size: 13px; }

/* manager pages */
.wideleft { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
.chip { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 6px 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); background: #fff; cursor: pointer; }
.chip input { width: auto; margin: 0; }
.chip:has(input:checked) { border-color: var(--orange); background: #FFF4EA; }
a.item.card { margin-bottom: 10px; }
a.item.card:hover { border-color: var(--orange); }

/* Title Case: every word of every title, tab, button, label and caption starts with a capital.
   Only UI text: business names, notes and other data are left as typed. */
nav.tabs a, header .btn, header button, header h1, button, .btnlink, .legbtn, a.ghost,
h2, th, label, .chip, .pill, .tile .l, .legend span, .hbar > span:first-child,
.card > b:first-child, .card > .row > b, .card > .row > .grow > b, .card.empty > b, .card > div > b:first-child,
.outbtn, .hot b, #rcount2, #dqcount, #rcount, .howto b { text-transform: capitalize; }
/* ...but not where the "title" is a person's or business's name */
td b, .person b, .item .t, .dialcard .name, .acct .name, .ctab b { text-transform: none; }

/* dialer */
.dialcols { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(300px, 380px); }
.dialcard .name { font-size: 22px; font-weight: 800; line-height: 1.2; }
.bignum { font-size: 34px; font-weight: 800; color: var(--navy); letter-spacing: .02em; margin: 12px 0 10px; }
.callbtn { font-size: 17px; padding: 13px 28px; }
#dcall { background: #1F7A3E; }
.dstate { margin: 10px 0 4px; font-size: 15px; }
.dialbrief { background: var(--bg); border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 13px; }
.outs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.outs.dim { opacity: .55; }
.outbtn { padding: 12px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; color: var(--navy); cursor: pointer; text-align: left; }
.outbtn:hover { border-color: var(--orange); background: #FFF4EA; }
.outbtn.good { border-color: #BFE3CB; color: var(--ok); }
.outbtn.bad { border-color: #F2C7C3; color: var(--bad); }
@media (max-width: 1000px) { .bignum { font-size: 28px; } }

/* one heading style everywhere: a single font, Title Case, note on its own line underneath */
h2 { font-size: 16px; font-weight: 800; color: var(--navy); letter-spacing: 0; text-transform: capitalize; margin: 18px 0 4px; }
.cols h2:first-child, .col > h2:first-child { margin-top: 0; }
.secsub { color: var(--mute); font-size: 13px; margin: 0 0 10px; }
/* even boxes that grow downward, never off the side */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: stretch; }
.cardgrid .card { margin: 0; display: flex; flex-direction: column; }
.masonry { column-width: auto; columns: auto; }
/* drop-downs never squeezed to a single letter */
select { min-width: 110px; }
.kindsel { width: 130px; flex: none; }
.row > select { flex: none; width: auto; }
.cols > .col { overflow-x: hidden; }

/* standard lists inside every box */
.blist { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.blist li { margin: 0 0 6px; padding-left: 2px; }
.blist li::marker { color: var(--orange); font-weight: 700; }
ol.blist li::marker { color: var(--navy); }
/* drop-downs read in Title Case too */
select, option { text-transform: capitalize; }
.reachcell { white-space: nowrap; }
.rp { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-right: 4px; background: #E8EEF6; color: var(--navy); }
.rp.wa { background: #DCF5E5; color: #128C4A; } .rp.em { background: #FFEBDC; color: #9A4A0F; }
.clickrows tr[data-sid] { cursor: pointer; }
.clickrows tr[data-sid]:hover td { background: #FFF4EA; }
.wabtn { display: inline-block; text-decoration: none; background: #25D366 !important; color: #fff; border-radius: 10px; font-weight: 700; text-align: center; }
.wabtn:hover { background: #1EBE5A !important; }
.searchlink { font-weight: 800; color: var(--navy-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- business filters (Accounts, Find Leads) and chain tags ---------- */
body.full main > .fwrap { flex: none; }
.fstrip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.fstrip select { width: auto; flex: 0 1 auto; min-width: 150px; padding: 6px 8px; font-size: 13px; }
.fchip { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); background: #fff; cursor: pointer; white-space: nowrap; }
.fchip:hover { border-color: var(--orange); }
.fchip.on, button.ghost.on { border-color: var(--orange); background: #FFF4EA; color: #9A4A0F; }
.pill.chain { background: #E8EEF6; color: var(--navy); white-space: nowrap; }
.pill.chain.corporate { background: #E3E8F0; color: #1E3A5F; }
.pill.chain.franchise { background: #FFEBDC; color: #9A4A0F; }
.pill.chain.local_group { background: var(--ok-bg); color: var(--ok); }
.stars { color: #8A5A00; font-weight: 600; white-space: nowrap; }
tr.clickrow { cursor: pointer; }
tr.clickrow:hover td { background: #FFF8F1; }

/* ---------- Nov 3 review: Today, Plan, Reach Out, Dashboard, Calendar, Manager KPIs ---------- */
.scrollpage { flex: 1; min-height: 0; overflow: auto; padding-right: 2px; }
/* number tiles you can click to filter */
.kstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 10px; }
.ktile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; text-decoration: none; color: inherit; font: inherit; }
.ktile:hover { border-color: var(--orange); }
.ktile.on { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(232,121,43,.25); background: #FFF8F1; }
.ktile .n { font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.ktile.hot .n { color: var(--orange); } .ktile.good .n { color: var(--ok); }
.ktile .l { font-size: 12px; color: var(--mute); text-transform: capitalize; }
/* one account per row, columns lined up */
.atable { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.arow { display: grid; grid-template-columns: 34px minmax(170px, 2.4fr) minmax(80px, .9fr) minmax(70px, .8fr) 70px 100px minmax(110px, 1fr) 70px 52px minmax(80px, .8fr) auto;
  gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--line); font-size: 13px; }
.arow.head { border-top: 0; background: var(--bg); font-size: 11px; font-weight: 700; color: var(--mute); text-transform: capitalize; padding: 6px 10px; }
.arow .nm { min-width: 0; } .arow .nm a { font-weight: 700; color: var(--ink); text-decoration: none; } .arow .nm a:hover { text-decoration: underline; }
.arow .nm small { display: block; color: var(--mute); font-size: 12px; margin-top: 1px; } .arow .nm small.due { color: var(--bad); font-weight: 600; }
.arow .nm .pill.chain { font-size: 10px; padding: 1px 6px; }
.arow .acts { display: flex; gap: 4px; justify-content: flex-end; } .arow button.on { border-color: var(--orange); background: #FFF4EA; }
.arow.flash { background: #FFF1E2; transition: background .3s; }
.arow-hist { padding: 6px 14px 10px 52px; background: #FBFCFD; border-top: 1px dashed var(--line); }
.timeline { list-style: none; margin: 0; padding: 0; } .timeline li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.timeline li:last-child { border-bottom: 0; } .timeline .ic { width: 20px; flex: none; text-align: center; } .timeline .tn { color: var(--ink); margin-top: 2px; white-space: pre-wrap; }
.cols-today { grid-template-columns: minmax(0, 2.3fr) minmax(300px, 1fr); }
.meetings .row { margin-top: 6px; gap: 8px; } .meetings a { font-weight: 600; }
@media (max-width: 1300px) { .arow { grid-template-columns: 30px minmax(150px, 2fr) 80px 70px 64px 92px 110px 64px 46px auto; } .arow > span:nth-child(10) { display: none; } }
@media (max-width: 1000px) { .arow { grid-template-columns: 28px 1fr auto auto; } .arow > span:nth-child(n+3):nth-child(-n+10) { display: none; } .arow.head { display: none; } }
/* Plan */
.cols-plan { grid-template-columns: minmax(0, 2.2fr) minmax(340px, 1fr); }
.smallmap { height: 26vh; min-height: 200px; flex: none; border-radius: 12px; border: 1px solid var(--line); z-index: 1; }
.rsel { flex: 1; min-height: 0; overflow: auto; }
.rlegend { display: flex; flex-wrap: wrap; gap: 6px; } .rlegend.static { margin-top: 10px; }
.rrow { display: grid; grid-template-columns: 40px minmax(160px, 2fr) 50px 96px 82px 46px 52px 56px minmax(90px, 1fr) 76px 150px; gap: 8px; align-items: center;
  padding: 8px 10px; border-top: 1px solid var(--line); font-size: 13px; text-decoration: none; color: inherit; }
.rrow.head { border-top: 0; background: var(--bg); font-size: 11px; font-weight: 700; color: var(--mute); text-transform: capitalize; }
a.rrow:hover { background: #FFF8F1; } .rrow.on { background: #FFF1E2; }
.rrow .nm small, .rrow small { display: block; color: var(--mute); font-size: 11px; }
.rstate { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.rs-avail { background: #E3ECF7; color: #12304F; } .rs-req { background: #EDE5FD; color: #5B21B6; } .rs-queued { background: #FBE3E1; color: #B42318; }
.rs-prog { background: #FFE9D6; color: #9A4A0F; } .rs-done { background: var(--ok-bg); color: var(--ok); }
.fchip.rs-avail.on, .fchip.rs-req.on, .fchip.rs-queued.on, .fchip.rs-prog.on, .fchip.rs-done.on { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }
.pin.static.rank.rs-avail { background: #12304F; color: #fff; } .pin.static.rank.rs-req { background: #7C3AED; color: #fff; } .pin.static.rank.rs-queued { background: #C0392B; color: #fff; }
.pin.static.rank.rs-prog { background: #E8792B; color: #fff; } .pin.static.rank.rs-done { background: #1F7A3E; color: #fff; }
.queue { margin: 6px 0 0; padding-left: 18px; } .queue li { margin: 4px 0; } .queue a { font-weight: 600; margin-right: 6px; }
.ractions .row { margin-top: 8px; gap: 6px; flex-wrap: wrap; }
.okc { color: var(--ok); }
@media (max-width: 1300px) { .rrow { grid-template-columns: 36px minmax(140px, 2fr) 44px 86px 72px 40px 46px 50px 120px; } .rrow > span:nth-child(9), .rrow > span:nth-child(10) { display: none; } }
/* Reach Out */
.commscols { grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) minmax(300px, 400px); }
.viewchips { display: flex; flex-wrap: wrap; gap: 6px; }
.crow .chans { display: flex; gap: 10px; align-items: center; } .crow .chans .due, .crow .due { color: var(--bad); font-weight: 600; }
.list .item.done { opacity: .55; }
.chtabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 8px; }
.chtab { padding: 10px 8px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--navy); }
.chtab.on { border-color: var(--orange); background: #FFF4EA; color: #9A4A0F; } .chtab:disabled { opacity: .4; cursor: not-allowed; }
.facts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 8px; }
.facts2 .fact { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; } .facts2 .fact .k { color: var(--mute); width: 64px; flex: none; }
.outs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; }
.outbtn.on { border-color: var(--orange); background: #FFF4EA; box-shadow: 0 0 0 2px rgba(232,121,43,.25); }
.nextstep { margin-top: 8px; } .picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
a.btnlike { display: inline-block; text-decoration: none; padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; text-transform: capitalize; }
a.primary.btnlike { background: var(--orange); color: #fff; } a.ghost.btnlike { border: 1px solid var(--line); color: var(--navy); background: #fff; }
a.ghost.small.btnlike { padding: 5px 9px; font-size: 12px; }
.scriptpop { position: fixed; inset: 0; background: rgba(18,48,79,.35); display: none; align-items: flex-start; justify-content: flex-end; z-index: 2000; padding: 80px 24px 24px; }
.sp-card { width: min(460px, 100%); max-height: calc(100vh - 110px); overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 16px 18px; }
.sp-card h3 { margin: 10px 0 6px; color: var(--navy); } .sp-card .say { font-size: 17px; font-weight: 600; line-height: 1.45; }
.sp-steps { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.sp-steps span { width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--mute); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sp-steps span.on { background: var(--orange); color: #fff; } .sp-steps span.done { background: var(--ok-bg); color: var(--ok); }
.sp-obj { margin-top: 10px; } .sp-obj summary { cursor: pointer; font-weight: 700; color: var(--navy-2); }
/* Dashboard tiles that open into lists */
.dashcols { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.6fr); }
.btiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.btile { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; color: inherit; }
.btile:hover { border-color: var(--orange); } .btile.on { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(232,121,43,.25); background: #FFF8F1; }
.btile .n { font-size: 24px; font-weight: 800; color: var(--navy); } .btile.hot .n { color: var(--orange); } .btile.good .n { color: var(--ok); }
.btile .t { font-weight: 700; font-size: 13px; } .btile .d { font-size: 12px; color: var(--mute); } .btile.zero { opacity: .55; }
/* Calendar */
.calweek { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; overflow: auto; }
.calday { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; }
.calday.today { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(232,121,43,.2); } .calday.shabbos { background: #F7F8FA; }
.calhead { font-size: 13px; color: var(--mute); } .calhead b { color: var(--navy); font-size: 16px; }
.calev { text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--navy-2); border-radius: 8px; padding: 6px 8px; background: #fff; cursor: pointer; font: inherit; font-size: 12px; color: var(--ink); }
.calev small { display: block; color: var(--mute); } .calev.st-held { border-left-color: var(--ok); } .calev.st-no_show { border-left-color: var(--bad); } .calev.st-canceled { opacity: .5; text-decoration: line-through; }
.calfu { border-top: 1px dashed var(--line); padding-top: 4px; font-size: 12px; } .calfu a { display: block; padding: 3px 0; text-decoration: none; color: var(--ink); font-weight: 600; }
.calfu a small { display: block; color: var(--mute); font-weight: 400; }
.hits { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); z-index: 50; }
.hits a { display: block; padding: 8px 10px; text-decoration: none; color: var(--ink); } .hits a:hover { background: #FFF4EA; } .hits:empty { display: none; }
@media (max-width: 1000px) { .calweek { grid-template-columns: 1fr; } }
/* Manager KPIs */
.kgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kgrid .card { margin: 0; } .kcard .kstrip { margin-top: 8px; }
.tscroll { overflow-x: auto; } .ktable td, .ktable th { white-space: nowrap; } .ktable tr.on td { background: #FFF1E2; }
.daychart { display: flex; align-items: flex-end; gap: 3px; height: 140px; margin-top: 10px; overflow-x: auto; }
.daychart .dc { flex: 1 0 18px; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.daychart .stack { width: 100%; display: flex; flex-direction: column; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 2px; }
.daychart .stack i { display: block; } .daychart small { font-size: 10px; color: var(--mute); margin-top: 2px; }
.kbuckets { margin-top: 4px; min-height: 420px; }

/* guest view */
.guestbar { background: #FFF4E5; border-bottom: 1px solid #F3D3A8; color: #7A4A0B; padding: 7px 16px; font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.guestgo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); text-align: center; } .guestgo .muted { margin-top: 4px; font-size: 12px; }

/* ---------- Reach Out v2: the funnel, the next move, four numbered steps ---------- */
.funnel { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.fstage { flex: 1 1 110px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.fstage .n { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; } .fstage .l { font-size: 13px; font-weight: 700; color: var(--mute); }
.fstage:hover { border-color: var(--orange); } .fstage.on { border-color: var(--orange); background: #FFF4EA; box-shadow: 0 0 0 2px rgba(232,121,43,.25); }
.fstage.on .l { color: #9A4A0F; } .fstage.due .n { color: var(--bad); } .fstage.wonst .n { color: var(--ok); } .fstage.pool { flex: 0 1 120px; background: var(--bg); }
.farrow { align-self: center; color: var(--mute); font-size: 22px; font-weight: 300; } .fsep { width: 1px; background: var(--line); margin: 4px 4px; }
.cbar { margin-bottom: 6px !important; } .cbar .muted { flex: none !important; font-size: 13px; } .muted.small { font-size: 12px; }
.qhead { font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.crow .qn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); font-size: 11px; font-weight: 800; color: var(--mute); flex: none; }
.crow .nm2 { color: var(--navy-2); font-weight: 600; } .crow .due { color: var(--bad); }
.stg { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-right: 4px; text-transform: uppercase; letter-spacing: .03em; vertical-align: 1px; }
.st-new { background: #E3ECF7; color: #12304F; } .st-reaching { background: #FFF1D6; color: #8A5A00; } .st-talking { background: #FFE9D6; color: #9A4A0F; }
.st-meeting { background: #EDE5FD; color: #5B21B6; } .st-quoted { background: #FCE4EC; color: #9D174D; } .st-won { background: var(--ok-bg); color: var(--ok); }
.bizhead .name { font-size: 22px; font-weight: 800; line-height: 1.2; } .bizhead .name a { color: var(--ink); text-decoration: none; }
.stagebig { font-size: 13px; font-weight: 800; padding: 6px 12px; border-radius: 10px; white-space: nowrap; align-self: flex-start; }
.nextmove { margin-top: 12px; border: 2px solid var(--orange); background: #FFF8F1; border-radius: 12px; padding: 12px 14px; }
.nm-k { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9A4A0F; }
.nm-t { font-size: 20px; font-weight: 800; color: var(--navy); margin: 2px 0 4px; } .nm-d { font-size: 14px; color: var(--ink); line-height: 1.45; }
.seqbar { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.seqbar span { flex: 1 1 60px; text-align: center; font-size: 12px; font-weight: 700; padding: 5px 4px; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--mute); }
.seqbar span.done { background: var(--ok-bg); border-color: #BFE3CB; color: var(--ok); } .seqbar span.on { background: var(--orange); border-color: var(--orange); color: #fff; }
.seqbar span.skip { opacity: .45; text-decoration: line-through; }
.step { position: relative; } .stephead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .stephead b { font-size: 16px; } .stephead .muted { font-size: 12px; }
.stepn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 14px; flex: none; }
.chtab.sugg { border-color: var(--orange); } .chtab small { display: block; font-size: 10px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .04em; }
.chtab.on small { color: #9A4A0F; }
.ogroups { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 10px; }
.ogroup { display: flex; flex-direction: column; gap: 6px; } .ogroup .oh { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.ogroup.hit .oh { color: var(--ok); } .ogroup.stop .oh { color: var(--bad); }
.ogroup.hit { display: grid; grid-template-columns: 1fr 1fr; align-content: start; } .ogroup.hit .oh { grid-column: 1 / -1; }
.ogroup .outbtn { padding: 10px; font-size: 13px; }
@media (max-width: 1300px) { .ogroups { grid-template-columns: 1fr; } }
.extra { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-radius: 10px; background: var(--bg); }
.extra select, .extra input { width: auto; } .extra .muted { flex-basis: 100%; font-size: 12px; } .extra.good { background: var(--ok-bg); }
.learn { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
.learn label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--mute); text-transform: none; }
.learn input, .learn select { font-size: 14px; padding: 7px 9px; }
.savebar { display: flex; gap: 8px; margin-top: 12px; } button.primary.big { padding: 14px 18px; font-size: 16px; }
.glance-r { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.glance-r span { color: var(--mute); } .glance-r b { text-align: right; } .glance-p { border-top: 1px solid var(--line); padding-top: 6px; font-size: 13px; }
.funnel.mini { display: flex; gap: 3px; margin: 8px 0; flex-wrap: nowrap; }
.funnel.mini span { flex: 1; font-size: 10px; font-weight: 700; text-align: center; padding: 4px 2px; border-radius: 6px; background: var(--bg); color: var(--mute); }
.funnel.mini span.past { background: #E3F3E8; color: var(--ok); } .funnel.mini span.on { background: var(--orange); color: #fff; }

/* ---------- Agent Desk ---------- */
.goalbar { display: grid; grid-template-columns: minmax(240px, 1.1fr) minmax(0, 2.4fr) minmax(220px, .9fr); gap: 12px; margin-bottom: 10px; }
.goalbar > div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.goal { border: 2px solid var(--orange) !important; background: #FFF8F1 !important; }
.gk { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9A4A0F; }
.gt { font-size: 22px; color: var(--navy); margin: 2px 0 6px; } .gt b { font-size: 30px; }
.gbar { height: 10px; background: #fff; border: 1px solid #F3D3A8; border-radius: 99px; overflow: hidden; } .gbar i { display: block; height: 100%; background: var(--orange); }
.gd { font-size: 12px; color: var(--mute); margin-top: 6px; }
.gmath { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: center; }
.gmath > div { display: flex; flex-direction: column; } .gmath b { font-size: 22px; color: var(--navy); } .gmath span { font-size: 12px; color: var(--mute); line-height: 1.3; }
.grun { display: flex; flex-direction: column; gap: 6px; justify-content: center; } .grun .muted { font-size: 12px; }
@media (max-width: 1200px) { .goalbar { grid-template-columns: 1fr; } .gmath { grid-template-columns: repeat(3, 1fr); } }
.agentcols { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.5fr); }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.agent { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.agent.running { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(232,121,43,.2); }
.agicon { font-size: 22px; width: 30px; flex: none; } .agstat { font-size: 12px; color: var(--mute); } .agstat .hot { color: var(--orange); }
.agjob { font-size: 13px; margin-top: 4px; color: var(--ink); line-height: 1.4; }
.agnote { font-size: 12px; margin-top: 6px; padding: 6px 8px; background: var(--bg); border-radius: 8px; color: var(--navy-2); }
.task { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--navy-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.task.k-claim { border-left-color: #12304F; } .task.k-whatsapp { border-left-color: #25D366; } .task.k-email { border-left-color: #E8792B; }
.task.k-call_plan { border-left-color: #7C3AED; } .task.k-quote { border-left-color: #9D174D; } .task.k-next_step { border-left-color: #B42318; } .task.k-reply { border-left-color: #0E7490; }
.tagent { font-size: 11px; font-weight: 800; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.ttitle { font-weight: 700; font-size: 15px; margin: 4px 0 6px; } .ttitle a { color: var(--ink); text-decoration: none; } .ttitle a:hover { text-decoration: underline; }
.task textarea.tbody { min-height: 80px; font-size: 14px; } .task .tsubj { margin-bottom: 6px; }
.tplain { font-size: 14px; } .treply { background: #ECFEFF; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 13px; }
.tacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; } a.primary.small.btnlike { padding: 6px 10px; font-size: 12px; }
.coach { border: 2px solid var(--navy-2); }

/* recorded calls */
.rec { color: #B42318; font-weight: 700; }
.recrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; } .recrow audio { height: 32px; max-width: 100%; }
details.tx summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--navy-2); }
details.tx pre { white-space: pre-wrap; font: 12px/1.45 inherit; background: var(--bg); border-radius: 8px; padding: 8px 10px; max-height: 260px; overflow: auto; margin: 4px 0 0; }