/*
 * Refresh (v9.51): the shared building blocks in one style across the CRM
 * and the portal. Loaded last, after workspace-studio.css.
 *
 * Tabs and filters are one quiet switcher; figure cards lose their coloured
 * bars; Sonar and Pulse lose their banner, put their figures first and
 * "What stands out" after them; Echo's filters, tags and buttons match.
 */

/* ---- Tabs and filters: one quiet segmented control everywhere ---- */
.workspace-v2 :is(.vqa-seg,.vqs .vqs-seg,.stage-tabs,.tabs:not(.portal-navigation),.vqc-chips){background:#eef0f3!important;border:0!important;border-radius:10px!important;padding:3px!important;gap:2px!important;box-shadow:none!important;display:inline-flex!important;width:auto!important;flex-wrap:wrap;margin:0!important}
.workspace-v2 :is(.vqa-seg button,.vqs .vqs-seg button,.stage-tab,.tabs:not(.portal-navigation)>*,.vqc-chip){background:transparent!important;border:0!important;color:#475569!important;border-radius:8px!important;padding:6px 12px!important;min-height:30px!important;font-size:13px!important;font-weight:500!important;box-shadow:none!important}
.workspace-v2 :is(.vqa-seg button.on,.vqs .vqs-seg button.on,.stage-tab.active,.tabs:not(.portal-navigation)>.active,.tabs:not(.portal-navigation)>.on,.vqc-chip.on,.vqc-chip.active){background:#fff!important;color:#0f172a!important;box-shadow:0 1px 2px #0f172a1a,0 0 0 1px #0f172a0d!important;font-weight:600!important}
.workspace-v2 :is(.stage-tab,.vqc-chip) :is(.n,b,span){background:transparent!important;color:#94a3b8!important;font-weight:500!important}
.workspace-v2 .stage-tabs,.workspace-v2 .tabs:not(.portal-navigation){margin-bottom:16px!important}
.workspace-v2 .vqc-directory-card>.vqc-chips{margin:16px 16px 0!important}

/* ---- Sonar, Pulse, Echo (the analytics module) ---- */
.workspace-v2 .vqa{display:flex!important;flex-direction:column;gap:14px}
.workspace-v2 .vqa>*{order:5;margin:0!important}
.workspace-v2 .vqa>.vqa-hero{display:none!important}
.workspace-v2 .vqa>.vqa-filters:has(.vqa-seg){order:0}
.workspace-v2 .vqa>.vqa-kpis{order:1}
.workspace-v2 .vqa>.vqa-card:has(>.vqa-insights){order:2}
/* toolbars sit on the page, not in boxes */
.workspace-v2 .vqa>.vqa-filters{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;display:flex!important;align-items:center;gap:12px;flex-wrap:wrap}
.workspace-v2 .vqa>.vqa-filters+.vqa-filters{margin-top:-4px!important}
.workspace-v2 .vqa .vqa-filters .vqa-note{font-size:12.5px!important;color:#64748b!important;flex:1;min-width:200px}
.workspace-v2 .vqa .vqa-filters select{min-height:34px;border-radius:8px!important;border:1px solid #e6e8ec!important;background:#fff!important;padding:4px 10px;font-size:13px}
/* buttons */
.workspace-v2 :is(.vqa-btn,.vqs .vqs-btn){background:#fff!important;border:1px solid #e6e8ec!important;color:#0f172a!important;border-radius:8px!important;font-weight:600!important;font-size:13px!important;padding:7px 12px!important;box-shadow:0 1px 2px #0f172a0a!important}
.workspace-v2 :is(.vqa-btn,.vqs .vqs-btn):hover{border-color:#c9d3f7!important}
.workspace-v2 .vqa-btn.primary,.workspace-v2 .vqa-btn[data-sn="play"]{background:#0f172a!important;border-color:#0f172a!important;color:#fff!important}
/* figure cards: no coloured top bar, figure first */
.workspace-v2 :is(.vqa-kpi,.vqs .vqs-kpi){border-top:1px solid #e6e8ec!important;background:#fff!important;padding:16px 18px!important;border-radius:14px!important}
.workspace-v2 .vqa-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
@media(max-width:1100px){.workspace-v2 .vqa-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.workspace-v2 :is(.vqa-kpi .l,.vqs .vqs-kpi .l){min-height:0!important;font-size:12.5px!important;font-weight:500!important;color:#64748b!important}
.workspace-v2 :is(.vqa-kpi .v,.vqs .vqs-kpi .v){font-size:28px!important;font-weight:650!important;letter-spacing:-.02em!important;color:#0f172a!important;margin:8px 0 6px!important}
.workspace-v2 .vqa-kpi :is(.f,.d,.s,small,.vqe-n){font-size:12px!important;color:#64748b!important;line-height:1.5}
/* chips */
.workspace-v2 .vqa-chip{border-radius:999px!important;font-weight:600!important;font-size:11.5px!important;padding:1px 8px!important;border:0!important;background:#eef0f3!important;color:#475569!important}
.workspace-v2 .vqa-chip.good,.workspace-v2 .vqa-chip.up{background:#e7f7ef!important;color:#0f9f6e!important}
.workspace-v2 .vqa-chip.bad,.workspace-v2 .vqa-chip.down{background:#fdecea!important;color:#d4473b!important}
.workspace-v2 .vqa-chip.warn{background:#fef3e2!important;color:#b45309!important}
/* "What stands out": a compact panel with meaningful marks */
.workspace-v2 .vqa-card:has(>.vqa-insights){padding:18px 20px!important}
.workspace-v2 .vqa-card:has(>.vqa-insights)>h3{font-size:15px!important}
.workspace-v2 .vqa-insights{gap:2px!important}
.workspace-v2 .vqa-insights li{padding:8px 10px;border-radius:8px;align-items:center!important}
.workspace-v2 .vqa-insights li:hover{background:#f7f8fa}
.workspace-v2 .vqa-insights .vqa-ic{width:24px!important;height:24px!important;border-radius:7px!important;font-size:0!important;display:grid!important;place-items:center;background:#eef2ff!important;color:#3159e8!important;flex:0 0 24px}
.workspace-v2 .vqa-insights .vqa-ic:before{content:'✦';font-size:12px}
.workspace-v2 .vqa-insights .vqa-ic:is(.warn,.bad):before{content:'!';font-weight:700}
.workspace-v2 .vqa-insights .vqa-ic:is(.warn,.bad){background:#fef3e2!important;color:#b45309!important}
.workspace-v2 .vqa-insights .vqa-ic:is(.up,.good):before{content:'↑'}
.workspace-v2 .vqa-insights .vqa-ic:is(.up,.good){background:#e7f7ef!important;color:#0f9f6e!important}
.workspace-v2 .vqa-insights .vqa-ic.down:before{content:'↓'}
.workspace-v2 .vqa-insights .vqa-ic.down{background:#fdecea!important;color:#d4473b!important}
.workspace-v2 .vqa-insights li>span:last-child{font-size:13.5px;color:#334155}
/* cards and section titles */
.workspace-v2 .vqa-card{padding:20px!important;border-radius:14px!important}
.workspace-v2 .vqa-card>h3{font-size:15px!important;font-weight:650!important;letter-spacing:-.01em!important;color:#0f172a!important;margin:0 0 2px!important}
.workspace-v2 .vqa-sub{font-size:12.5px!important;color:#64748b!important;margin-bottom:14px!important}
/* tables inside the module */
.workspace-v2 :is(.vqa-tablewrap,.vqa-table){border:0!important;background:transparent!important}
.workspace-v2 .vqa-table th{background:#fafbfc!important;color:#64748b!important;font-size:12px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;border-bottom:1px solid #e6e8ec!important}
.workspace-v2 .vqa-table td{font-size:13px!important;border-bottom:1px solid #eef0f3!important;padding:10px 12px!important}
.workspace-v2 .vqa-table tbody tr:hover td{background:#fafbff!important}
/* the call search form: a tidy filter bar */
.workspace-v2 .vqa>form.vqa-card{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 12px!important;align-items:end;padding:16px!important}
.workspace-v2 .vqa>form.vqa-card label.vqe-n{font-size:11.5px!important;color:#64748b!important;font-weight:500!important;display:flex;flex-direction:column;gap:4px}
.workspace-v2 .vqa>form.vqa-card :is(input,select){min-height:34px;border:1px solid #e6e8ec!important;border-radius:8px!important;padding:4px 10px!important;font-size:13px!important;background:#fff!important;width:100%}
.workspace-v2 .vqa>form.vqa-card label.vqe-n:has(input[type=search]),.workspace-v2 .vqa>form.vqa-card label.vqe-n:has(input[placeholder*="Topic"]){grid-column:span 2}
/* the call page */
.workspace-v2 .vqa audio{width:min(100%,640px)!important;height:40px;border-radius:10px}
.workspace-v2 .vqa .vqa-big{font-size:30px!important;font-weight:650!important;color:#0f172a}
.workspace-v2 .vqa .sn-turn{border:0!important;background:#f3f4f6!important;border-radius:14px 14px 14px 4px!important;padding:9px 13px!important;font-size:13.5px;line-height:1.55}
.workspace-v2 .vqa .sn-turn.agent{background:#eef2ff!important;border-radius:14px 14px 4px 14px!important}
.workspace-v2 .vqe-words span{border-radius:999px!important;background:#f7f8fa;font-size:12.5px!important}

/* ---- Figure tiles elsewhere: drop the old blue dash ---- */
.workspace-v2 .kpi:before,.workspace-v2.crm-shell .kpi:before{display:none!important;content:none!important}
.workspace-v2 .kpi-row:not(.dashboard-summary) .kpi{border-radius:14px!important;border:1px solid #e6e8ec!important;box-shadow:0 1px 2px #0f172a0a!important;padding:16px 18px!important;background:#fff!important}
.workspace-v2 .kpi-row:not(.dashboard-summary) .kpi .label{color:#64748b!important;text-transform:none!important;letter-spacing:0!important;font-weight:500!important}
.workspace-v2 .kpi-row:not(.dashboard-summary) .kpi .value{font-size:24px!important;font-weight:650!important;letter-spacing:-.02em!important;margin-top:6px!important}

/* ---- Empty states ---- */
.workspace-v2 :is(.empty,.vqa-empty,.vqc-empty){text-align:center;color:#64748b!important;font-size:13px!important;padding:36px 20px!important}
.workspace-v2 :is(.empty,.vqa-empty):before{content:'';display:block;width:40px;height:40px;margin:0 auto 12px;border-radius:12px;background:#eef2ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233159e8' stroke-width='1.8'%3E%3Cpath d='M4 13h4l2 3h4l2-3h4'/%3E%3Cpath d='M5 13l2-7h10l2 7v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center/20px no-repeat}

/* ---- Forms (Settings and the like) ---- */
.workspace-v2 .field label,.workspace-v2 label.field-label{font-size:12px!important;font-weight:600!important;color:#334155!important;text-transform:none!important;letter-spacing:0!important}
.workspace-v2 .content :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border:1px solid #e6e8ec!important;border-radius:8px!important;background:#fff!important;font-size:13.5px!important}
.workspace-v2 .content :is(input,select,textarea):focus{border-color:#3159e8!important;box-shadow:0 0 0 3px #eef2ff!important;outline:0}

/* ---- Agent cards ---- */
.workspace-v2 .agent-card,.workspace-v2 [class*=agent-card]{border-radius:14px!important}

/* tables: headings line up with their columns; Sonar's call list reads left to right */
.workspace-v2 .vqa-table th{text-align:right!important}.workspace-v2 .vqa-table th:first-child{text-align:left!important}
.workspace-v2 .vqsn .vqa-table :is(th,td){text-align:left!important}
/* mood: soft pills */
.workspace-v2 .vqe-pill{border-radius:999px!important;font-size:11.5px!important;font-weight:600!important;padding:2px 9px!important}
.workspace-v2 .vqe-pill.mood-positive{background:#e7f7ef!important;color:#0f7a55!important}
.workspace-v2 .vqe-pill.mood-neutral{background:#f1f3f6!important;color:#475569!important}
.workspace-v2 .vqe-pill.mood-negative{background:#fdecea!important;color:#c0392b!important}
/* the call page's checklist: ticks and crosses */
.workspace-v2 .sn-checklist .vqa-ic.up:before{content:'✓'}
.workspace-v2 .sn-checklist .vqa-ic.down:before{content:'✕'}

/* ---- Echo ---- */
.workspace-v2 .vqs-cats button{border:1px solid #e6e8ec!important;background:#fff!important;color:#334155!important;font-weight:500!important;font-size:12.5px!important}
.workspace-v2 .vqs-cats button:hover{border-color:#c9d3f7!important}
.workspace-v2 .vqs-cats button.on{background:#0f172a!important;border-color:#0f172a!important;color:#fff!important}
.workspace-v2 .vqs-cats button b{color:#94a3b8!important;font-weight:500!important}
.workspace-v2 .vqs-cats button.on b{color:#cbd5e1!important}
.workspace-v2 .vqs-tabs button.on{color:#0f172a!important;border-bottom-color:#0f172a!important}
.workspace-v2 :is(.vqs-tag,.vqs-chip,.vqs-pill){border-radius:999px!important;background:#eef2ff!important;color:#3159e8!important;border:0!important;font-weight:600!important;font-size:11px!important;padding:2px 8px!important}
.workspace-v2 .vqs-card{border-radius:14px!important;border:1px solid #e6e8ec!important;box-shadow:0 1px 2px #0f172a0a!important}
.workspace-v2 .vqs-card:hover{box-shadow:0 10px 30px -12px #0f172a26!important}
.workspace-v2 .vqs-tcard .vqs-btn:last-child,.workspace-v2 .vqs-btn.primary{background:#0f172a!important;border-color:#0f172a!important;color:#fff!important}
.workspace-v2 .vqs-tico{border-radius:10px!important;background:#f7f8fa!important}
.workspace-v2 .vqs-recs{background:#f7f8ff!important;border-color:#e6e8ec!important}
.workspace-v2 .vqs-banner{border-radius:12px!important}
.workspace-v2 .vqs-step-number{background:#0f172a!important;color:#fff!important}

/* ---- Phones (v9.51.1) ---- */
/* The bottom tabs: their own layer above the page, the button itself always
   the tap target, and no double-tap zoom delay. */
.mobile-nav{z-index:120!important;transform:translateZ(0);-webkit-transform:translateZ(0);touch-action:manipulation}
.mobile-nav-item{touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
.mobile-nav-item>*{pointer-events:none}
@media(max-width:860px){
  .workspace-v2.crm-shell .topbar{flex-direction:column!important;align-items:stretch!important;gap:12px!important;padding:16px 16px 8px!important}
  .workspace-v2.crm-shell .topbar-heading{align-items:flex-start!important;gap:12px!important}
  .workspace-v2.crm-shell .topbar-heading .hamburger{flex:0 0 40px;width:40px;height:40px;margin-top:2px}
  .workspace-v2.crm-shell .topbar .workspace-eyebrow>b:first-child,.workspace-v2.crm-shell .topbar .workspace-eyebrow>span:first-of-type{display:none}
  .workspace-v2.crm-shell .topbar h1{font-size:22px!important}
  .workspace-v2.crm-shell .topbar-actions{justify-content:flex-start!important;flex-wrap:nowrap!important;width:100%}
  .workspace-v2.crm-shell .topbar-actions .btn{flex:1;justify-content:center}
  .workspace-v2.crm-shell .vq-greet-meta button{font-size:12px}
  .workspace-v2.crm-shell .dashboard-summary .kpi .value{font-size:20px!important;white-space:normal}
  .workspace-v2.crm-shell .dashboard-summary .kpi .label{font-size:12px!important}
  .workspace-v2.crm-shell .content{padding:8px 16px 110px!important}
}

/* ---- Appointments: one colour per kind (v9.52), CRM and portal calendars ---- */
.appt-kind-meeting{--appt:#2f6fde}.appt-kind-demo{--appt:#7c4dde}.appt-kind-call{--appt:#139a6b}.appt-kind-follow_up{--appt:#e2701f}
.workspace-v2 :is(.calendar-booking,.work-event).appt{background:var(--appt)!important;border:0!important;border-left:0!important;color:#fff!important;border-radius:8px!important;padding:6px 8px!important;box-shadow:0 1px 2px #0f172a1a!important;text-align:left;line-height:1.35;font-size:11px!important}
.workspace-v2 :is(.calendar-booking,.work-event).appt *{color:#ffffffd9!important}
.workspace-v2 :is(.calendar-booking,.work-event).appt strong{color:#fff!important;font-weight:600!important;font-size:11.5px!important}
.workspace-v2 :is(.calendar-booking,.work-event).appt:hover{filter:brightness(1.07);box-shadow:0 4px 12px -4px var(--appt)!important}
.workspace-v2 .work-event.appt .pill{background:#ffffff2e!important;color:#fff!important;border:0!important}
.workspace-v2 .calendar-agenda-card.appt{border-left:4px solid var(--appt)!important}
/* finished, missed and cancelled: still readable, visibly quieter */
.workspace-v2 :is(.calendar-booking,.work-event).appt.appt-completed{opacity:.78}
.workspace-v2 :is(.calendar-booking,.work-event).appt.appt-no_show{background:repeating-linear-gradient(135deg,var(--appt) 0 7px,color-mix(in srgb,var(--appt) 78%,#000) 7px 9px)!important}
.workspace-v2 :is(.calendar-booking,.work-event).appt.appt-cancelled{background:#e9ecf0!important;box-shadow:none!important}
.workspace-v2 :is(.calendar-booking,.work-event).appt.appt-cancelled *{color:#64748b!important;text-decoration:line-through}
.appt-legend{display:flex;width:fit-content;gap:16px;flex-wrap:wrap;align-items:center;margin:4px 0 12px;padding:7px 14px;background:#fff;border:1px solid #e6e8ec;border-radius:999px;font-size:12.5px;color:#475569}
.appt-legend span{display:inline-flex;align-items:center;gap:6px}
.appt-legend i{display:inline-block!important;flex:0 0 10px;width:10px!important;height:10px!important;border-radius:3px;background:var(--appt)!important}
.appt-legend .appt-cancelled-key i{background:#e9ecf0;border:1px solid #cbd5e1}
/* busy days: slim one-line tiles (full details on hover), and from five, three plus "+N more" */
.workspace-v2 :is(.calendar-booking,.work-event).appt.appt-compact{padding:4px 7px!important;margin-bottom:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;line-height:1.3;font-size:0!important}
.workspace-v2 :is(.calendar-booking,.work-event).appt.appt-compact strong{font-size:11px!important;display:inline}
.workspace-v2 .work-event.appt.appt-compact>:not(strong){display:none!important}
.workspace-v2 :is(.calendar-day,.work-day):not(.appt-all) .appt-extra{display:none!important}
.workspace-v2 .appt-more{display:block;width:100%;border:0;background:transparent;color:#3159e8;font:inherit;font-size:11.5px;font-weight:600;text-align:left;padding:2px 4px;cursor:pointer}
.workspace-v2 .appt-more:hover{text-decoration:underline}
.workspace-v2 :is(.calendar-day,.work-day).appt-all .appt-more{display:none}