/* PROSPEKT WhatsApp design (v313): the WhatsApp section's look. body.dp-frame = any WhatsApp page (side rail, grouped
   tabs, status row, Manrope); body.dp-page = WhatsApp pages other than the Inbox (cards, tags, tables, text size).
   Set by wa-design.js. The CRM's own pages are not affected. AI stays PROSPEKT purple. */

body.dp-frame{
  --dp-bg:#F4F3EF; --dp-card:#FFFFFF; --dp-line:#E4E2DB; --dp-line2:#EDEBE5; --dp-ink:#1C1C19; --dp-sub:#6E6C64;
  --dp-acc:#1E6B52; --dp-acc-soft:#E7F1EC; --dp-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---- the side menu becomes an icon rail ---- */
body.desk.dp-frame{--side-w:68px}
body.desk.dp-frame #side{padding:16px 8px 12px;background:#14211C}
body.desk.dp-frame #side span:not(.sb-n),
body.desk.dp-frame #side .sb-sec,
body.desk.dp-frame #side .sb-biz{display:none}
body.desk.dp-frame #side .sb-brand{justify-content:center;padding:4px 0 20px}
body.desk.dp-frame #side .sb-item{position:relative;justify-content:center;padding:11px 0;border-radius:10px}
body.desk.dp-frame #side .sb-item.on{background:rgba(255,255,255,.12)}
body.desk.dp-frame #side .sb-n{position:absolute;top:4px;right:6px;min-width:16px;line-height:16px;font-size:10px;padding:0 4px;background:#E5484D;color:#fff}

/* ---- calmer surfaces and type ---- */
body.dp-page .wx-page{background:var(--dp-bg);color:var(--dp-ink)}
body.dp-frame .wx-top{background:#fff;color:var(--dp-ink);border-bottom:1px solid var(--dp-line);padding:8px 20px}
body.dp-frame .wx-top *{color:inherit}
body.dp-frame .wx-top .wx-tag,body.dp-frame .wx-top .wx-num{background:transparent;border:1px solid var(--dp-line);color:var(--dp-sub)}
body.dp-frame .wx-top .wx-t{font-family:var(--dp-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dp-sub)}
body.dp-page .wx-body{padding:24px 28px}
body.dp-page .wx-h1{font-size:24px;font-weight:650;letter-spacing:-.015em}
body.dp-page .wx-titlerow .wx-muted{font-size:13.5px}
body.dp-page .wx-muted{color:var(--dp-sub)}
body.dp-page .wx-h{font-family:var(--dp-mono);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dp-sub);margin-bottom:14px}
body.dp-page .wx-h svg{display:none}

/* flat panels with hairlines */
body.dp-page .wx-card,body.dp-page .fm-tpl,body.dp-page .fm-q,body.dp-page .fm-fs{
  background:var(--dp-card);border:1px solid var(--dp-line);border-radius:8px;box-shadow:none}
body.dp-page .fm-tpl:hover{border-color:var(--dp-acc);box-shadow:none}
body.dp-page .fm-tq{font-family:var(--dp-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dp-acc)}
body.dp-page .wx-alert{background:#fff;border:1px solid var(--dp-line);border-left:3px solid var(--dp-acc);border-radius:6px}

/* tables: mono labels, hairline rows */
body.dp-page .wx-tbl th,body.dp-page .fm-t th{font-family:var(--dp-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dp-sub);border-bottom:1px solid var(--dp-line)}
body.dp-page .wx-tbl td,body.dp-page .fm-t td{border-bottom:1px solid var(--dp-line2)}
body.dp-page .wx-tbl tr:hover td{background:#FAF9F6}
body.dp-page .wx-av{background:#ECEAE3;color:var(--dp-ink)}

/* one accent: tags grey by default; colour only where it matters */
body.dp-page .wx-tag{background:#EFEDE7;color:#46443D;border-radius:5px;font-weight:600}
body.dp-page .wx-tag.ok{background:var(--dp-acc-soft);color:var(--dp-acc)}
body.dp-page .wx-tag.hot,body.dp-page .wx-tag.bad{background:#FBEDEA;color:#B4372B}
body.dp-page .wx-tag.warn{background:#FBF3E4;color:#8A5A10}
body.dp-page .wx-tag.mute{background:transparent;border:1px solid var(--dp-line);color:var(--dp-sub)}

/* buttons, inputs, filter chips */
body.dp-page .wx-btn{border-radius:6px;border-color:var(--dp-line);box-shadow:none}
body.dp-page .wx-btn.pri{background:var(--dp-acc);border-color:var(--dp-acc)}
body.dp-page .wx-page input:not([type=checkbox]):not([type=radio]),body.dp-page .wx-page select,body.dp-page .wx-page textarea{border-color:var(--dp-line);border-radius:6px}
body.dp-page .wx-chips{gap:0;border:1px solid var(--dp-line);border-radius:7px;overflow:hidden;display:inline-flex;flex-wrap:wrap;background:#fff}
body.dp-page .wx-chips > *{border:0 !important;border-radius:0 !important;border-right:1px solid var(--dp-line) !important;background:#fff !important;color:var(--dp-ink) !important;margin:0 !important}
body.dp-page .wx-chips > *:last-child{border-right:0 !important}
body.dp-page .wx-chips > .on{background:var(--dp-acc-soft) !important;color:var(--dp-acc) !important}

/* ---- the 15 tabs become 5 groups + the group's pages ---- */
body.dp-frame .wx-tabs.dp-nav{display:block;align-self:stretch;width:100%;box-sizing:border-box;flex:none;padding:0;background:#fff;border-bottom:1px solid var(--dp-line);overflow:visible}
body.dp-frame .dp-groups{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--dp-line2)}
body.dp-frame .dp-g{display:flex;align-items:center;gap:7px;padding:12px 14px 11px;color:var(--dp-sub);text-decoration:none;font-weight:600;font-size:13.5px;border-bottom:2px solid transparent}
body.dp-frame .dp-g:hover{color:var(--dp-ink)}
body.dp-frame .dp-g.on{color:var(--dp-ink);border-bottom-color:var(--dp-acc)}
body.dp-frame .dp-g i{font-style:normal;font-size:10.5px;font-weight:700;background:#E5484D;color:#fff;border-radius:99px;padding:0 6px;line-height:16px}
body.dp-frame .dp-sub{display:flex;gap:6px;padding:8px 20px;flex-wrap:wrap;background:#FBFAF7}
body.dp-frame .dp-sub .wx-tab{padding:5px 11px;border:1px solid transparent;border-radius:6px;font-size:12.5px;color:var(--dp-sub)}
body.dp-frame .dp-sub .wx-tab svg{display:none}
body.dp-frame .dp-sub .wx-tab:hover{color:var(--dp-ink);background:#fff;border-color:var(--dp-line)}
body.dp-frame .dp-sub .wx-tab.on{background:#fff;border-color:var(--dp-line);color:var(--dp-ink);box-shadow:0 1px 0 rgba(0,0,0,.03)}

/* the preview switch */
/* fixes after the first look */
body.dp-frame .wx-tabs.dp-nav{height:auto !important;max-height:none !important;min-height:0;text-align:left;justify-content:flex-start}
body.dp-frame .dp-groups,body.dp-frame .dp-sub{width:100%;box-sizing:border-box;justify-content:flex-start;margin:0}
body.desk.dp-frame #side .sb-brand img{width:26px;height:26px;object-fit:cover;object-position:left center}
body.dp-page .wx-chips > * .wx-cnt,body.dp-page .wx-chips > * i{color:var(--dp-sub) !important;opacity:1}
/* v2: labels in PROSPEKT's own typeface (Archivo, wide) instead of monospace */
body.dp-page{--dp-mono:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
body.dp-frame .wx-h,body.dp-frame .wx-tbl th,body.dp-frame .fm-t th,body.dp-frame .fm-tq,body.dp-frame .wx-top .wx-t{
  font-stretch:118%;font-weight:650;letter-spacing:.07em}
body.dp-page .wx-h{font-size:11px}
body.dp-page .wx-tbl th,body.dp-page .fm-t th{font-size:10.5px}
body.dp-page .wx-h1{font-stretch:108%;font-weight:700;letter-spacing:-.02em}
body.dp-frame .dp-g{font-stretch:106%}
/* v3: try other fonts (picker on the preview pill). Self-hosted, free for commercial use (SIL OFL). */
@font-face{font-family:'DP Manrope';src:url('../fonts/manrope-var.woff2') format('woff2');font-weight:200 800;font-display:swap}
body.dp-frame{--dp-font:'DP Manrope'}
body.dp-page #view,
body.dp-page #view input,
body.dp-page #view select,
body.dp-page #view textarea,
body.dp-frame #view button{font-family:var(--dp-font),system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
body.dp-frame{--dp-mono:var(--dp-font),system-ui,sans-serif}
body.dp-page .wx-h,
body.dp-page .wx-tbl th,
body.dp-page .fm-t th,
body.dp-page .fm-tq{font-stretch:normal;font-weight:700;letter-spacing:.08em}
body.dp-page .wx-h1{font-stretch:normal;font-weight:700;letter-spacing:-.025em}
/* v7: keep the AI credits button readable (white on purple) in the white header */
body.dp-frame .wx-top .wx-pill.ai,body.dp-frame .wx-top .wx-pill.ai *{color:#fff}
/* v8: WhatsApp pages only (body.dp-page). The CRM's own pages are not touched. */
/* 1. the status strip sits at the right end of the group row (one row less) */
body.dp-frame .dp-groups{align-items:center}
body.dp-frame .dp-groups > .wx-top{margin-left:auto;background:transparent;border:0;padding:0;gap:8px;flex-wrap:nowrap;white-space:nowrap}
body.dp-frame .dp-groups > .wx-top .wx-t{display:none}
/* 2. no second title: the sub-row already names the page */
body.dp-page .wx-titlerow .wx-h1{display:none}
body.dp-page .wx-titlerow{margin-top:-4px}
/* 3. compact number cards */
body.dp-page .rp-kpis{gap:8px}
body.dp-page .rp-kpis div{padding:10px 12px;border-radius:8px;border-color:var(--dp-line)}
body.dp-page .rp-kpis b{font-size:21px;line-height:1.15}
body.dp-page .rp-kpis span{font-size:11.5px;line-height:1.35;display:block}
body.dp-page .wx-stats div,body.dp-page .wx-mini span{padding:8px 10px;border-radius:8px;background:#fff;border-color:var(--dp-line)}
/* 4. page content one step smaller (menus and header stay the same size) */
body.desk.dp-page .wx-page:not(.wx-fill) > .wx-body{zoom:.93}
/* 5. a lighter AI credits button */
body.dp-frame .wx-pill.ai{background:#F3EFFD;border:1px solid #DED3F8}
body.dp-frame .wx-top .wx-pill.ai,body.dp-frame .wx-top .wx-pill.ai *{color:#4B2A9E}
/* 6. lighter funnel rows: white row, thin progress line */
body.dp-page .rp-step{background:#fff;border:1px solid var(--dp-line2);border-radius:8px}
body.dp-page .rp-bar{top:auto;bottom:0;height:3px;background:var(--dp-acc);border-radius:0 3px 3px 0}
body.dp-page .rp-step b{font-size:15px}
body.dp-page .rp-step i{color:var(--dp-acc)}

/* v9: the frame (rail, groups, status) also on the Inbox; the menus in the preview font there too */
body.dp-frame .wx-tabs.dp-nav,
body.dp-frame .wx-tabs.dp-nav *{font-family:var(--dp-font),system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
/* v10: the page-loading line at the top is WhatsApp green on WhatsApp pages (the CRM keeps purple) */
body.dp-frame #pk-nav::before{
  background:linear-gradient(90deg,#128C4A 0%,#1E6B52 45%,#25D366 80%,#D7F5E3 100%);box-shadow:0 0 12px rgba(37,211,102,.55),0 0 3px rgba(18,140,74,.8)}

/* ===================================================================== v314: polish pass (WhatsApp section only) */
/* ---- colours: non-AI purple becomes WhatsApp green; AI stays purple ---- */
body.dp-frame .wx-link{color:var(--dp-acc)}
body.dp-frame .wg-side .linkbtn,body.dp-frame .wg-side a{color:var(--dp-acc)}
body.dp-page details > summary{color:var(--dp-acc)}
body.dp-frame .dk-btn:not(.ghost){background:var(--dp-acc);border-color:var(--dp-acc)}
body.dp-frame .dk-btn:not(.ghost):hover{background:#17573F;border-color:#17573F}
body.dp-frame .dk-btn.ghost.on{border-color:var(--dp-acc);color:var(--dp-acc)}
body.dp-frame #view[data-zoom="wa-auto"] input[type=checkbox],body.dp-frame #view[data-zoom="wa-auto"] input[type=radio]{accent-color:var(--dp-acc)}
body.dp-frame #view[data-zoom="wa-auto"] .cx-sw input:checked + i{background:var(--dp-acc)}
body:not(.desk).in-wa .tab.on{color:#17573F}
body:not(.desk).in-wa .tab.on svg{background:#1E6B52;box-shadow:0 4px 12px -4px rgba(30,107,82,.55)}
body.in-wa .tabbiz{background:linear-gradient(135deg,#1E8A63 0%,#0B3D30 100%);box-shadow:0 6px 16px -8px rgba(11,61,48,.7),inset 0 1px 0 rgba(255,255,255,.14)}

/* ---- long texts never run off the screen ---- */
body.dp-frame .wx-alert{overflow-wrap:anywhere;word-break:break-word}

/* ---- desktop details ---- */
body.dp-page #bt-trig,body.dp-page #bt-fb,body.dp-page #bt-words{width:100%}
body.dp-page .fb-row label{display:inline;font-weight:inherit}
body.dp-page .fb-row select{display:inline-block;width:auto}

/* ---- phones ---- */
/* the frame: group and page rows swipe sideways on one line; the status lives on the Home page there */
body:not(.desk).dp-frame .dp-groups{flex-wrap:nowrap;overflow-x:auto;padding:0 6px;gap:0;scrollbar-width:none}
body:not(.desk).dp-frame .dp-groups::-webkit-scrollbar,body:not(.desk).dp-frame .dp-sub::-webkit-scrollbar{display:none}
body:not(.desk).dp-frame .dp-g{flex:none;padding:12px 11px 11px;font-size:13px}
body:not(.desk).dp-frame .dp-groups > .wx-top{display:none}
body:not(.desk).dp-frame .dp-sub{flex-wrap:nowrap;overflow-x:auto;padding:8px 10px;gap:4px;scrollbar-width:none}
body:not(.desk).dp-frame .dp-sub .wx-tab{flex:none}
/* page and card margins */
body:not(.desk).dp-page .wx-body{padding:12px 12px 100px}
body:not(.desk).dp-page .wx-card{padding:13px 12px}
body:not(.desk).dp-page .wx-titlerow{justify-content:flex-start;gap:8px;margin-bottom:10px}
body:not(.desk).dp-page .wx-titlerow > *{margin-left:0}
body:not(.desk).dp-page .wx-titlerow .wx-sp{display:none}
/* filters: one swipeable row */
body:not(.desk).dp-page .wx-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
body:not(.desk).dp-page .wx-chips::-webkit-scrollbar{display:none}
body:not(.desk).dp-page .wx-chips > *{flex:none;white-space:nowrap}
/* tables become stacked cards */
body:not(.desk).dp-page .wx-tablebox{overflow:visible}
body:not(.desk).dp-page .wx-tbl,body:not(.desk).dp-page .wx-tbl tbody{display:block;width:100%}
body:not(.desk).dp-page .wx-tbl thead{display:none}
body:not(.desk).dp-page .wx-tbl tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:11px 2px;border-bottom:1px solid var(--dp-line2)}
body:not(.desk).dp-page .wx-tbl td{display:block;border:0 !important;padding:0 !important;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip}
body:not(.desk).dp-page .wx-tbl td:first-child{flex:1 1 100%}
body:not(.desk).dp-page .wx-tbl tr:hover td{background:transparent}
/* booking-form settings: the days on their own row, then two even columns */
body:not(.desk).dp-page .wx-vgrid{grid-template-columns:1fr 1fr}
body:not(.desk).dp-page .wx-vgrid > :first-child{grid-column:1 / -1}
@media (max-width:1100px){ body.dp-page .wx-vgrid > :first-child{grid-column:1 / -1} }
/* accounts: the number's details full width, "Belongs to" below */
body:not(.desk).dp-page .wx-nrow .wx-grow{flex:1 1 calc(100% - 60px);min-width:0}
body:not(.desk).dp-page .wx-nrow .wx-nown{flex:1 1 100%;margin:4px 0 0 0}
/* the group chat: one column, the chat first, its details below */
body:not(.desk).dp-frame .wa-desk.wg-desk{display:flex !important;flex-direction:column;height:auto;min-height:0}
body:not(.desk).dp-frame .wg-desk > .wg-chat{width:100%;min-height:62vh}
body:not(.desk).dp-frame .wg-desk > .wg-side{width:100%;max-height:none;position:static;border-left:0;border-top:1px solid var(--dp-line)}

/* ---- v314, round 2 ---- */
/* switches: green for WhatsApp settings; AI switches stay PROSPEKT purple */
body.dp-frame .wx-switch input:checked + span{background:var(--dp-acc)}
body.dp-frame .wx-switch input:focus-visible + span{outline-color:var(--dp-acc)}
body.dp-frame .wx-switch input:is(#ag-on,#lpf-on,#lpf-rem,#is-on):checked + span{background:#5B2BC0}
/* plain links inside WhatsApp pages are green; Follow-ups' ticked stage chips too */
body.dp-page .wx-page a:not([class]){color:var(--dp-acc)}
body.dp-frame #view[data-zoom="wa-auto"] .af-chip:has(input:checked){border-color:#9CCBB5;background:var(--dp-acc-soft);color:#17573F}
/* "Send [right away] after the visit is marked done" reads as one sentence */
body.dp-page .fb-row label{display:block !important}
body.dp-page .fb-row label select{display:inline-block !important;width:auto !important;margin:0 4px}
/* phones */
body:not(.desk).dp-page .wx-h{flex-wrap:wrap;row-gap:4px}
body:not(.desk).dp-page .wx-fill2{grid-template-columns:1fr !important}
body:not(.desk).dp-page .wx-fill2 select,body:not(.desk).dp-page .wx-fill2 input:not([type=checkbox]):not([type=radio]){width:100%}
/* stacked tables: each value carries its column's name */
body:not(.desk).dp-page .wx-tbl td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dp-sub);margin-bottom:2px}
body:not(.desk).dp-page .wx-tbl td[data-label]:not(:first-child){min-width:70px}
/* the drop-off chart swipes sideways instead of squeezing */
body:not(.desk).dp-page .fu-steps{padding-bottom:4px}
body:not(.desk).dp-page .fu-steps > *{flex:0 0 92px}
/* payment-plan rows wrap onto two lines */
body:not(.desk).dp-page .pay-st{flex-wrap:wrap}
body:not(.desk).dp-page .pay-st select{flex:1 1 140px;min-width:0}
/* the group page scrolls on a phone (chat first, then its details) */
body:not(.desk).dp-frame .wa-desk.wg-desk{flex:1 1 0;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* the custom dropdown inside "Send [right away] after the visit…" sits inline in the sentence */
body.dp-page .fb-row .cs-btn{display:inline-flex !important;vertical-align:middle;margin:0 4px;width:auto !important}
/* reply-time targets on a phone: working hours and working days each get the full width */
body:not(.desk).dp-page .sla-grid > :nth-child(n+3){grid-column:1 / -1}
body:not(.desk).dp-frame .wa-desk.wg-desk > *{flex-shrink:0}
body:not(.desk).dp-frame .wg-desk > .wg-side{overflow:visible;height:auto}
/* website chat / Instagram forms: WhatsApp green tint; "Re-read templates" link green (Disconnect stays red) */
body.dp-frame .ig-form{border-color:#CFE3D8;background:#F6FAF8}
body.dp-frame .sheet #wcn-sync{color:var(--dp-acc)}
/* dropdowns inside form fields fill their field (the app's custom dropdown button included) */
body.dp-page .wx-f > .cs-btn,body.dp-page .wx-f .cs-btn{width:100%;justify-content:space-between}
body.dp-page .fb-row .cs-btn{width:auto !important}
/* Follow-ups: the WhatsApp background behind its content */
body.dp-frame #view[data-zoom="wa-auto"],body.dp-frame #view[data-zoom="wa-auto"] > .scroll{background:var(--dp-bg)}
/* bot editor: "When the customer" gets half the row (full row when there are no words to fill in) */
body.dp-page .wx-fill2:has(#bt-trig){grid-template-columns:1fr 1fr}
body.dp-page .wx-fill2:has(#bt-wl[hidden]){grid-template-columns:1fr}
body.dp-page .wx-fill2 + .wx-f{margin-top:10px}

/* v315: no business strip at the top of WhatsApp pages on phones. It appeared while a page loaded and vanished once it
   drew, so the whole page jumped on every tab switch. Switching business stays on the bottom bar's round button. */
body.in-wa:not(.desk) #bizstrip,body.in-wa:not(.desk) .bizstrip{display:none !important}