/* ============================================================
   VOCATECH DASHBOARD v2 — Control Room (2026-04-21)
   Today-only metrics, narrative AI card, hour-of-day chart,
   role-aware quick actions, resources strip linking out.
   ============================================================ */

/* Teal accent — only used for the AI / "brain" surfaces.
   Mirrors the callpop teal on vocatech.com. */
:root {
    --v4-teal:        #0ea5a4;
    --v4-teal-dark:   #0b7f7e;
    --v4-teal-soft:   #e0f7f5;
    --v4-teal-softer: #f0fbfa;
}

.v4-dashboard-v2 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* =============================================================
   DASHBOARD POLISH PASS (2026-04-22)
   Global card-shadow treatment — every major card on the dashboard
   gets a two-layer soft shadow so it lifts off the canvas instead
   of sitting flat on it. One token, applied everywhere for rhythm.
   ============================================================= */
.v4-dashboard-v2 .v4-tile,
.v4-dashboard-v2 .v4-insight-v2,
.v4-dashboard-v2 .v4-dash-card,
.v4-dashboard-v2 .v4-toolkit-card,
.v4-dashboard-v2 .v4-quick-card {
    box-shadow:
        0 1px 2px rgba(14, 39, 73, 0.04),
        0 4px 12px rgba(14, 39, 73, 0.05);
}

/* ===== 1. Hero greeting + status pill ================================== */
.v4-dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.v4-dash-greeting h1 {
    margin: 0 0 6px 0;
    font-size: 34px;
    font-weight: 700;
    color: var(--v4-navy);
    letter-spacing: -0.7px;
    line-height: 1.1;
}
.v4-dash-greeting .v4-dash-sub {
    font-size: 13px;
    color: var(--v4-text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.v4-dash-greeting .v4-dash-sub .sep { color: var(--v4-border); }
.v4-dash-company { font-weight: 600; color: var(--v4-navy); }

.v4-dash-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--v4-border-light);
    background: #fff;
    color: var(--v4-navy);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.15s;
}
.v4-dash-status:hover { border-color: var(--v4-navy); }
.v4-dash-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--v4-text-muted);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.v4-dash-status.is-ok .v4-dash-status-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.16);
}
.v4-dash-status.is-warn .v4-dash-status-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.18);
}

/* ===== 2. Stat tiles (4 across, matching reports) ===================== */
.v4-dash-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    align-items: stretch;
}
.v4-tile {
    background: #fff;
    border: 1px solid var(--v4-border-light);
    border-radius: 3px;
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.15s;
    min-width: 0;
}
.v4-tile:hover {
    border-color: var(--v4-border);
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px rgba(14, 39, 73, 0.05),
        0 14px 28px -12px rgba(14, 39, 73, 0.18) !important;
}
a.v4-tile:hover { cursor: pointer; }
.v4-tile-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--v4-text-muted);
}
.v4-tile-value {
    font-size: 40px;
    font-weight: 700;
    color: var(--v4-navy);
    line-height: 1.0;
    letter-spacing: -1px;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.v4-tile-sub {
    font-size: 12px;
    color: var(--v4-text-muted);
    font-weight: 500;
    margin-top: 4px;
}

/* Direction hint via left stripe — colors mirror reports (navy/blue/teal/red) */
.v4-tile-total    { border-left: 3px solid var(--v4-navy); }
.v4-tile-total .v4-tile-value { color: var(--v4-navy); }
.v4-tile-in       { border-left: 3px solid #3b82f6; }
.v4-tile-in .v4-tile-value    { color: #1d4ed8; }
.v4-tile-out      { border-left: 3px solid var(--v4-teal); }
.v4-tile-out .v4-tile-value   { color: var(--v4-teal-dark); }

.v4-tile-missed   { border-left: 3px solid #cbd5e1; }
.v4-tile-missed.has-activity { border-left-color: #f59e0b; }
.v4-tile-missed.has-activity .v4-tile-value { color: #c2410c; }
.v4-tile-missed.is-urgent {
    border-left-color: #ef4444;
    background: #fff8f7;
}
.v4-tile-missed.is-urgent .v4-tile-value { color: #b91c1c; }
.v4-tile-missed.is-urgent:hover { background: #fff0ee; }

/* Sub-link strip inside the Missed tile (voicemail · unreturned) */
.v4-tile-sublinks {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-weight: 500;
}
.v4-tile-sublink { color: var(--v4-text-muted); }
.v4-tile-sublink.is-urgent { color: #b91c1c; font-weight: 600; }
.v4-tile-sublink-sep { color: var(--v4-border); opacity: 0.8; }

/* ===== 3. AI narrative card =========================================== */
.v4-insight-v2 {
    background: linear-gradient(135deg, #ffffff 0%, var(--v4-teal-softer) 100%);
    border: 1px solid var(--v4-teal-soft);
    border-left: 3px solid var(--v4-teal);
    border-radius: 3px;
    padding: 22px 24px 24px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    min-height: 140px;   /* always substantial, never a thin strip */
}
.v4-insight-v2.tone-warn {
    background: linear-gradient(135deg, #ffffff 0%, #ffedd5 100%);
    border-color: #fdba74;
    border-left: 6px solid #f97316;
    box-shadow: 0 6px 16px -10px rgba(249, 115, 22, 0.55);
}
.v4-insight-v2.tone-urgent {
    background: linear-gradient(135deg, #ffffff 0%, #fee2e2 100%);
    border-color: #fca5a5;
    border-left: 6px solid #ef4444;
    box-shadow: 0 6px 16px -10px rgba(239, 68, 68, 0.55);
}
.v4-insight-v2 .v4-insight-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--v4-teal-dark);
    margin-bottom: 6px;
}
.v4-insight-v2.tone-warn   .v4-insight-eyebrow { color: #c2410c; }
.v4-insight-v2.tone-urgent .v4-insight-eyebrow { color: #b91c1c; }
.v4-insight-v2 .v4-insight-spark {
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
}
.v4-insight-v2 .v4-insight-spark svg { width: 14px; height: 14px; }
.v4-insight-v2 h2 {
    margin: 0 0 6px 0 !important;
    font-size: 22px;
    font-weight: 700;
    color: var(--v4-navy) !important;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.v4-insight-v2 .v4-insight-body {
    margin: 0 0 14px 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #334155;
    max-width: 78ch;
}
/* AI Insight primary CTA — orange so it pops against any tone (teal calm,
   amber warn, red urgent). The navy version was washing out on the teal. */
.v4-insight-v2 .v4-insight-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: var(--v4-brand);
    color: #fff !important;
    border: none;
    border-radius: 3px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.1px;
    text-decoration: none !important;
    transition: all 0.15s;
    box-shadow: 0 10px 24px -8px rgba(240, 160, 48, 0.55),
                0 1px 0 rgba(14,39,73,0.08);
}
.v4-insight-v2 .v4-insight-cta:hover {
    background: var(--v4-brand-hover);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -8px rgba(240, 160, 48, 0.65),
                0 1px 0 rgba(14,39,73,0.08);
}
.v4-insight-v2 .v4-insight-cta svg { width: 15px; height: 15px; }
/* Keep the CTA the brand orange on every tone — the previous navy
   override on .tone-urgent was reading as a solid blue block with
   the white label washing out against the red card tint, making
   the button look "fully blue" with no visible label. Orange stands
   out cleanly on the red (and amber and teal) card backgrounds
   without needing a tone-specific color swap. */

/* ============================================================
   YOUR VOCATECH TOOLKIT — six-tile grid replacing the activity chart
   Custom-designed in-portal tiles, each linking out to the matching
   vocatech.com product page. Zero queries, all-static, FAST.
   ============================================================ */
.v4-toolkit-card > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.v4-toolkit-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--v4-text-muted);
}
.v4-toolkit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 900px) {
    .v4-toolkit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .v4-toolkit-grid { grid-template-columns: 1fr; }
}
.v4-toolkit-tile {
    position: relative;
    /* Lighter than --v4-surface — almost-white so the tiles feel airy,
       not heavy, against the white toolkit card. A 1px border still
       separates them. */
    background: #FAFBFD;
    border: 1px solid var(--v4-border-light);
    border-radius: 4px;
    padding: 14px 14px 14px;
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 138px;
    transition: all 0.18s ease;
    overflow: hidden;
}
.v4-toolkit-tile::after {
    /* subtle diagonal brand wash in the bottom-right that fades in on hover */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at 100% 0%, currentColor 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 0;
}
.v4-toolkit-tile:hover {
    background: #fff;
    border-color: var(--v4-navy);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(14,39,73,0.18);
}
.v4-toolkit-tile:hover::after { opacity: 0.035; }

.v4-toolkit-illus {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14,39,73,0.06);
    color: var(--v4-navy);
    transition: transform 0.2s;
}
.v4-toolkit-illus svg { width: 28px; height: 28px; }
.v4-toolkit-tile:hover .v4-toolkit-illus { transform: scale(1.08) rotate(-2deg); }

.v4-toolkit-title {
    position: relative;
    z-index: 1;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--v4-navy);
    letter-spacing: -0.1px;
    line-height: 1.2;
    margin-top: 2px;
}
.v4-toolkit-desc {
    position: relative;
    z-index: 1;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--v4-text-muted);
    font-weight: 500;
}
.v4-toolkit-arrow {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--v4-text-muted);
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 2;
}
.v4-toolkit-tile:hover .v4-toolkit-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
    color: var(--v4-navy);
}

/* Per-product accent — icon bg tint + hover border + the radial wash color */
.v4-toolkit-tile.tile-apps         { color: #1d4ed8; }
.v4-toolkit-tile.tile-apps .v4-toolkit-illus         { background: rgba(59,130,246,0.14); color: #1d4ed8; }
.v4-toolkit-tile.tile-apps:hover                     { border-color: #3b82f6; }

.v4-toolkit-tile.tile-callpop      { color: var(--v4-teal-dark); }
.v4-toolkit-tile.tile-callpop .v4-toolkit-illus      { background: var(--v4-teal-soft); color: var(--v4-teal-dark); }
.v4-toolkit-tile.tile-callpop:hover                  { border-color: var(--v4-teal); }

.v4-toolkit-tile.tile-textdock     { color: #6d28d9; }
.v4-toolkit-tile.tile-textdock .v4-toolkit-illus     { background: rgba(139,92,246,0.14); color: #6d28d9; }
.v4-toolkit-tile.tile-textdock:hover                 { border-color: #8b5cf6; }

.v4-toolkit-tile.tile-reports      { color: var(--v4-brand-dark); }
.v4-toolkit-tile.tile-reports .v4-toolkit-illus      { background: var(--v4-brand-soft); color: var(--v4-brand-dark); }
.v4-toolkit-tile.tile-reports:hover                  { border-color: var(--v4-brand); }

.v4-toolkit-tile.tile-portal       { color: var(--v4-navy); }
.v4-toolkit-tile.tile-portal .v4-toolkit-illus       { background: rgba(14,39,73,0.09); color: var(--v4-navy); }
.v4-toolkit-tile.tile-portal:hover                   { border-color: var(--v4-navy); }

.v4-toolkit-tile.tile-integrations { color: #047857; }
.v4-toolkit-tile.tile-integrations .v4-toolkit-illus { background: rgba(16,185,129,0.14); color: #047857; }
.v4-toolkit-tile.tile-integrations:hover             { border-color: #10b981; }

/* ===== 4. Activity + Quick actions row =============================== */
.v4-dash-row-activity {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
    align-items: stretch;          /* force both cards to equal height */
}
.v4-dash-card {
    background: #fff;
    border: 1px solid var(--v4-border-light);
    border-radius: 3px;
    padding: 20px 22px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.v4-dash-card > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.v4-dash-card h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--v4-navy);
    letter-spacing: -0.2px;
}
/* ============================================================
   ACTIVITY CHART — "Call activity today"
   Gorgeous-pass redesign (2026-04):
   - Taller canvas (chart 240px)
   - Wider bars with 4px rounded top
   - Subtle dashed gridlines at 0% / 25% / 50% / 75% / 100%
   - Peak label anchored top-right of the chart (not in the card header)
   - Inline legend next to the peak meta
   - "Now" column: gradient fill + orange pulse dot above the bar
   - Hover: saturate + lift, label pops to navy
   ============================================================ */
.v4-activity-card {
    /* a touch more breathing room than sibling cards */
    padding: 20px 22px 18px;
    border-color: var(--v4-border-light);
    box-shadow: 0 1px 0 rgba(14,39,73,0.02);
}
.v4-activity-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.v4-activity-card > header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--v4-navy);
    letter-spacing: -0.2px;
}
.v4-activity-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--v4-text-muted);
    font-weight: 500;
}
.v4-activity-meta strong {
    color: var(--v4-navy);
    font-weight: 700;
}

/* Chart canvas — plotting area + left gutter for gridline labels */
.v4-activity-chart {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 240px;
    padding: 22px 4px 6px 4px;       /* top room for gridline labels */
    margin-top: 4px;
    background-image:
        linear-gradient(to top, rgba(14,39,73,0.06) 1px, transparent 1px),
        linear-gradient(to top, rgba(14,39,73,0.05) 1px, transparent 1px),
        linear-gradient(to top, rgba(14,39,73,0.05) 1px, transparent 1px),
        linear-gradient(to top, rgba(14,39,73,0.05) 1px, transparent 1px);
    background-size:
        100% 100%,   /* baseline 0% */
        100% 75%,
        100% 50%,
        100% 25%;
    background-position:
        0 calc(100% - 16px),
        0 calc(100% - 16px),
        0 calc(100% - 16px),
        0 calc(100% - 16px);
    background-repeat: no-repeat;
}

.v4-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 100%;
    position: relative;
    transition: transform 0.15s;
}
.v4-bar-col:hover {
    transform: translateY(-2px);
    z-index: 2;
}
.v4-bar-stack {
    flex: 1;
    width: 100%;
    max-width: 28px;
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}
/* Stack bars without a gap — use an inset shadow divider between segments
   so stacked totals read as one solid column with a subtle break line. */
.v4-bar {
    width: 100%;
    min-height: 3px;
    transition: filter 0.15s, transform 0.15s;
}
.v4-bar-in  { background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); }
.v4-bar-out { background: linear-gradient(180deg, #2dd4bf 0%, var(--v4-teal) 100%); }
/* rounded top corner goes on WHICHEVER segment is on top of the stack.
   Because column-reverse + incoming first-in-DOM, incoming renders on top
   when both are present. When only outgoing exists, outgoing is on top. */
.v4-bar-stack .v4-bar:last-child {
    border-radius: 4px 4px 0 0;
}
.v4-bar-col:hover .v4-bar {
    filter: saturate(1.2) brightness(1.04);
}

/* Current-hour marker — clean pulsing dot above the bar, plus subtle
   brand-color tint on the bar itself. No more crooked box-shadow ring. */
.v4-bar-col.is-now::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v4-brand);
    box-shadow: 0 0 0 4px rgba(240,160,48,0.18);
    animation: v4-now-pulse 2.4s ease-in-out infinite;
}
@keyframes v4-now-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(240,160,48,0.18); }
    50%      { box-shadow: 0 0 0 8px rgba(240,160,48,0.06); }
}
.v4-bar-col.is-now .v4-bar-stack {
    filter: drop-shadow(0 4px 10px rgba(240,160,48,0.28));
}
.v4-bar-col.is-now .v4-bar-label {
    color: var(--v4-brand-dark);
    font-weight: 700;
}

.v4-bar-label {
    font-size: 11.5px;
    color: var(--v4-text-muted);
    font-weight: 600;
    letter-spacing: 0.1px;
}
.v4-bar-col:hover .v4-bar-label { color: var(--v4-navy); }

/* Hover tooltip — pure CSS. Reads the column's title attribute via
   ::before content. */
.v4-bar-col[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--v4-navy);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 6px 18px -6px rgba(14,39,73,0.35);
}
.v4-bar-col[title]:hover > .v4-bar-label::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 2px);
    width: 0; height: 0;
    border: 4px solid transparent;
    border-top-color: var(--v4-navy);
    pointer-events: none;
    z-index: 3;
}

/* Inline legend in the header line */
.v4-activity-legend {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    font-size: 12px;
    color: var(--v4-text-muted);
    font-weight: 500;
    margin: 0;
}
.v4-legend-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    vertical-align: -1px;
}
.v4-legend-in  { background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); }
.v4-legend-out { background: linear-gradient(180deg, #2dd4bf 0%, var(--v4-teal) 100%); }

.v4-activity-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px 8px;
    color: var(--v4-text-muted);
    font-size: 13.5px;
}
.v4-activity-empty svg {
    width: 30px; height: 30px;
    color: var(--v4-border);
    flex-shrink: 0;
}

/* Quick actions */
.v4-quick-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.v4-quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--v4-border-light);
    border-radius: 3px;
    background: #fff;
    color: var(--v4-navy);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
}
.v4-quick-item:hover {
    border-color: var(--v4-navy);
    background: var(--v4-surface);
}
.v4-quick-icon {
    width: 32px; height: 32px;
    border-radius: 3px;
    background: var(--v4-surface-alt);
    color: var(--v4-navy);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.v4-quick-icon svg { width: 16px; height: 16px; }
.v4-quick-password .v4-quick-icon {
    background: var(--v4-brand-soft);
    color: var(--v4-brand-dark);
}
.v4-quick-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.v4-quick-title { font-size: 13.5px; font-weight: 600; color: var(--v4-navy); }
.v4-quick-sub   { font-size: 11.5px; font-weight: 500; color: var(--v4-text-muted); }

/* ===== Bottom pill row — 4 equal-width resource buttons =================
   Back to a separate row below the toolkit + quick actions row, matching
   how it was originally — but thinner (10px vertical padding vs 13px) and
   smaller text (12.5px vs 13px) so the row feels subordinate to the content
   above it instead of competing with it. Still stretches across the full
   page width with equal 1/4 columns so it looks intentional, not orphaned.
   ======================================================================= */
.v4-dash-pills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 4px;
}
.v4-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--v4-border-light);
    border-radius: 3px;
    color: var(--v4-navy);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.15s;
    line-height: 1;
    white-space: nowrap;
    box-shadow:
        0 1px 2px rgba(14, 39, 73, 0.04),
        0 4px 12px rgba(14, 39, 73, 0.04);
}
.v4-pill svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--v4-text-muted);
    transition: color 0.15s;
}
.v4-pill:hover {
    border-color: var(--v4-navy);
    transform: translateY(-1px);
    box-shadow:
        0 2px 4px rgba(14, 39, 73, 0.05),
        0 10px 20px -8px rgba(14, 39, 73, 0.18);
}
.v4-pill:hover svg { color: var(--v4-brand); }

@media (max-width: 900px) {
    .v4-dash-pills { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .v4-dash-pills { grid-template-columns: 1fr; }
}

/* ===== Help + password modals ========================================= */
.v4-help-panel,
.v4-pwd-panel {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.v4-help-panel[hidden],
.v4-pwd-panel[hidden] { display: none; }
.v4-help-backdrop {
    position: absolute; inset: 0;
    background: rgba(14,39,73,0.45);
    backdrop-filter: blur(2px);
}
.v4-help-sheet {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 8px 8px 0 0;
    max-width: 520px;
    width: calc(100% - 24px);
    margin: 0 auto;
    padding: 22px 22px 24px;
    box-shadow: 0 -18px 48px -16px rgba(14,39,73,0.35);
    animation: v4-help-in 0.18s ease-out;
}
@media (min-width: 600px) {
    .v4-help-panel, .v4-pwd-panel { align-items: center; }
    .v4-help-sheet { border-radius: 6px; animation: v4-pop-in 0.14s ease-out; }
}
@keyframes v4-help-in  { from { transform: translateY(30px); opacity: 0; } }
@keyframes v4-pop-in   { from { transform: translateY(8px);  opacity: 0; } }

.v4-help-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--v4-surface-alt);
    color: var(--v4-text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}
.v4-help-close:hover { background: var(--v4-surface); color: var(--v4-navy); }
.v4-help-sheet h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--v4-navy);
    letter-spacing: -0.3px;
}
.v4-help-sheet p {
    margin: 0 0 16px 0;
    font-size: 13.5px;
    color: var(--v4-text-muted);
}
.v4-help-channels,
.v4-pwd-channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.v4-help-channel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-light);
    border-radius: 3px;
    text-decoration: none !important;
    color: var(--v4-navy);
    transition: all 0.15s;
}
.v4-help-channel:hover {
    border-color: var(--v4-navy);
    background: #fff;
    transform: translateY(-1px);
}
.v4-help-channel strong { font-size: 13px; font-weight: 700; color: var(--v4-navy); }
.v4-help-channel span   { font-size: 12px; color: var(--v4-text-muted); font-weight: 500; }

/* ===== Responsive ===================================================== */
@media (max-width: 1100px) {
    .v4-dash-tiles       { grid-template-columns: repeat(2, 1fr); }
    .v4-dash-row-activity { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .v4-dash-tiles       { grid-template-columns: repeat(2, 1fr); }
    .v4-tile-value       { font-size: 32px; }
    .v4-insight-v2 h2    { font-size: 19px; }
    .v4-dash-greeting h1 { font-size: 26px; }
    .v4-help-channels,
    .v4-pwd-channels     { grid-template-columns: 1fr; }
}

/* ============================================================
   PROFILE PAGE (/profile/)
   Minimal self-profile styling. Lives here so it ships with the
   same cache-buster as the dashboard.
   ============================================================ */
.v4-profile {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    max-width: 780px;
}
.v4-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.v4-profile-avatar {
    width: 56px; height: 56px;
    border-radius: 3px;
    background: var(--v4-brand-soft);
    color: var(--v4-brand-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.v4-profile-head-text h1 {
    margin: 0 0 4px 0 !important;
    font-size: 26px;
    font-weight: 700;
    color: var(--v4-navy) !important;
    letter-spacing: -0.4px;
    line-height: 1.15;
}
.v4-profile-sub {
    font-size: 13px;
    color: var(--v4-text-muted);
    font-weight: 500;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.v4-profile-sub .sep { color: var(--v4-border); }
.v4-profile-role {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 11px;
    font-weight: 700;
}

.v4-profile-card {
    background: #fff;
    border: 1px solid var(--v4-border-light);
    border-radius: 3px;
    padding: 22px 24px;
    margin-bottom: 14px;
}
.v4-profile-card > header {
    margin-bottom: 18px;
}
.v4-profile-card > header h2 {
    margin: 0 !important;
    font-size: 15px;
    font-weight: 700;
    color: var(--v4-navy) !important;
    letter-spacing: -0.2px;
}
.v4-profile-card > header p {
    margin: 4px 0 0 0;
    font-size: 12.5px;
    color: var(--v4-text-muted);
    font-weight: 500;
}
.v4-profile-card > footer {
    margin-top: 18px;
    display: flex;
    gap: 8px;
}

.v4-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}
.v4-profile-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--v4-text-muted);
    margin-bottom: 4px;
}
.v4-profile-value {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--v4-navy);
}
.v4-profile-field-wide { grid-column: 1 / -1; }

.v4-profile-row-list {
    display: flex;
    flex-direction: column;
}
.v4-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--v4-border-light);
}
.v4-profile-row:last-child { border-bottom: none; padding-bottom: 0; }
.v4-profile-row:first-child { padding-top: 0; }
.v4-profile-row-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--v4-navy);
}
.v4-profile-row-sub {
    font-size: 12px;
    color: var(--v4-text-muted);
    font-weight: 500;
    margin-top: 2px;
}

.v4-profile-btn {
    padding: 8px 14px;
    border-radius: 3px;
    border: 1px solid var(--v4-border);
    background: #fff;
    color: var(--v4-navy);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.v4-profile-btn:hover {
    border-color: var(--v4-navy);
    background: var(--v4-surface);
}
.v4-profile-btn-ghost { background: var(--v4-surface); }

.v4-profile-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 3px;
    margin-top: 14px;
    color: #92400e;
    font-size: 13px;
    line-height: 1.4;
}
.v4-profile-notice svg {
    width: 18px; height: 18px;
    color: #b45309;
    flex-shrink: 0;
    margin-top: 1px;
}
.v4-profile-notice strong {
    color: #7c2d12;
    font-weight: 700;
    margin-right: 4px;
}

@media (max-width: 640px) {
    .v4-profile-grid { grid-template-columns: 1fr; }
}

/* ===== Live Calls strip ================================================ */
/* Tight single-row strip above the AI narrative, ALWAYS visible so there's
   no layout shift when a call starts or ends. Two visual states:
     .is-idle   — grey dot, muted copy ("0 live calls right now")
     .is-active — green pulsing dot, names pills
   The element stays in the DOM and the same size across states; just the
   accent color changes. */
.v4-dash-live {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    margin-bottom: 14px;
    /* Match the radius on stat tiles + Today-at-a-glance card so the
       whole dashboard has one rounding rhythm (12px / --v4-radius-lg). */
    border-radius: 12px;
    font-size: 13.5px;
    flex-wrap: wrap;
    transition: background 0.25s ease, border-color 0.25s ease;
}

/* Idle (no live calls) — neutral grey so the strip sits quietly. */
.v4-dash-live.is-idle {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #94a3b8;
    color: #475569;
}
.v4-dash-live.is-idle .v4-dash-live-dot {
    background: #cbd5e1;
    animation: none;
    box-shadow: none;
}
.v4-dash-live.is-idle .v4-dash-live-count,
.v4-dash-live.is-idle .v4-dash-live-label {
    color: #64748b;
    font-weight: 600;
}

/* Active (at least one call live) — green + pulse. */
.v4-dash-live.is-active {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
    color: #14532d;
}
.v4-dash-live.is-active .v4-dash-live-count { color: #166534; font-weight: 800; }
.v4-dash-live.is-active .v4-dash-live-label { color: #166534; font-weight: 600; }

/* Shared layout bits */
.v4-dash-live-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.v4-dash-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: v4-live-pulse 1.6s ease-out infinite;
}
@keyframes v4-live-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.6); }
    70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0);   }
}
.v4-dash-live-count { font-size: 16px; font-weight: 800; }
.v4-dash-live-names {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: #14532d;
}
.v4-dash-live-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 11px;
    background: #ffffff;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    font-weight: 500;
    white-space: nowrap;
}
.v4-dash-live-num {
    color: #14532d;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.v4-dash-live-dur {
    color: #475569;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-size: 12.5px;
}
/* Hunt group / call center pill — brand orange so the eye catches that
   the "on" extension is a group (many potential answerers) rather than a
   single user. Regular extensions keep the calm green pill style. */
.v4-dash-live-name.is-group {
    background: #fff7ed;
    border-color: #fed7aa;
}
.v4-dash-live-name.is-group .v4-dash-live-num { color: #9a3412; }
.v4-dash-live-name.is-group .v4-dash-live-dur { color: #c2410c; }
.v4-dash-live-dir { color: #16a34a; font-weight: 700; }
.v4-dash-live-on { color: #475569; margin-left: 4px; }
.v4-dash-live-more { color: #15803d; font-weight: 600; font-style: italic; }

/* ===== Dashboard search autocomplete ================================== */
/* Dropdown that appears beneath the dashboard search input. Hits
   /ajax/search.php (Companies / Login Users / Extensions). */
.v4-dash-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 12px 36px -12px rgba(15, 23, 42, 0.22),
                0 4px 12px -4px rgba(15, 23, 42, 0.08);
    z-index: 50;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px 0;
}
.v4-dash-search-dropdown[hidden] { display: none; }
.v4-dash-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13.5px;
    color: #0f172a;
    text-decoration: none;
    border-left: 2px solid transparent;
}
.v4-dash-search-item:hover { background: #f8fafc; border-left-color: var(--v4-brand, #F89939); }
.v4-dash-search-type {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #64748b;
    padding: 2px 7px;
    background: #f1f5f9;
    border-radius: 3px;
    min-width: 72px;
    text-align: center;
}
.v4-dash-search-label { font-weight: 600; }
.v4-dash-search-sub { color: #64748b; font-size: 12.5px; margin-left: auto; }
.v4-dash-search-empty {
    padding: 14px 16px;
    font-size: 13px;
    color: #64748b;
    font-style: italic;
}
/* The search input's parent needs to be relative so the dropdown anchors. */
.v4-dash-hero { position: relative; }