/* ──────────────────────────────────────────────────────────────────
   "Vibe Soft" + Liquid Glass surface system.
   Inspired by Apple's Liquid Glass: vibrant tinted backdrops with
   frosted, layered surfaces on top — inner-lens highlights, soft
   ambient shadows, continuous corner radii.
   ────────────────────────────────────────────────────────────────── */

/* ── Vibrant backdrop ─────────────────────────────────────────── */
/* The mesh of soft colors sits BEHIND the glass; cards refract it. */
.vibe-soft {
    /* Muted mesh (chosen 2026-06-15, replacing the saturated pastel mesh that
       hurt readability). Faint lavender / amber / cyan washes over a near-white
       base. `local` attachment anchors them to the top of the content so the
       reports below the fold sit on the plain neutral — keeping text crisp. */
    background:
        radial-gradient(ellipse 70% 55% at 8% -5%,  rgba(124, 91, 217, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 50% at 92% 18%, rgba(232, 160, 40, 0.08), transparent 60%),
        radial-gradient(ellipse 55% 60% at 25% 80%, rgba(0, 178, 227, 0.08), transparent 60%),
        #F6F6FA;
    background-attachment: local, local, local;
}
.theme-dark .vibe-soft {
    background:
        radial-gradient(ellipse 70% 55% at 8% -5%,  rgba(124, 91, 217, 0.18), transparent 60%),
        radial-gradient(ellipse 60% 50% at 92% 18%, rgba(232, 160, 40, 0.12), transparent 60%),
        radial-gradient(ellipse 55% 60% at 25% 80%, rgba(0, 178, 227, 0.12), transparent 60%),
        #0A0D17;
    background-attachment: local, local, local;
}

/* ── Glass surface — re-usable mixin ─────────────────────────── */
/* Apply via `.vc` or directly as `.glass`. */
.vibe-soft .vc,
.vibe-soft .glass {
    background: rgba(255, 255, 255, 0.48);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
    border: 0.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(255, 255, 255, 0.40),
        inset 1px 0 0 rgba(255, 255, 255, 0.60),
        inset -1px 0 0 rgba(255, 255, 255, 0.40),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.05),
        0 24px 64px rgba(15, 23, 42, 0.05);
    padding: 22px;
    position: relative;
}
.theme-dark .vibe-soft .vc,
.theme-dark .vibe-soft .glass {
    background: rgba(20, 20, 28, 0.55);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    backdrop-filter: blur(32px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03),
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 12px 40px rgba(0, 0, 0, 0.30);
}

.vibe-soft .vc-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 12px;
}
.vibe-soft .vc-title {
    font-size: 15px; font-weight: 600; color: #0F1722;
    letter-spacing: -0.01em;
}
.theme-dark .vibe-soft .vc-title { color: #F0F2F8; }

/* ── Override default .card and .kpi to be glass too ─────────── */
.vibe-soft .card {
    background: rgba(255, 255, 255, 0.48);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
    border: 0.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    padding: 22px;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(255, 255, 255, 0.40),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.05),
        0 24px 64px rgba(15, 23, 42, 0.05);
}
.theme-dark .vibe-soft .card {
    background: rgba(20, 20, 28, 0.55);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    backdrop-filter: blur(32px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.30);
}

.vibe-soft .kpi {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(165%);
    backdrop-filter: blur(24px) saturate(165%);
    border: 0.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    padding: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 6px 20px rgba(15, 23, 42, 0.04);
}
.theme-dark .vibe-soft .kpi {
    background: rgba(22, 22, 30, 0.55);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 20px rgba(0, 0, 0, 0.30);
}

/* ── Glass pill / segmented control ─────────────────────────── */
.vibe-soft .seg {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 0.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(15, 23, 42, 0.05);
}
.theme-dark .vibe-soft .seg {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.vibe-soft .seg-item {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    color: rgba(15, 23, 42, 0.62);
    cursor: pointer;
    border: 0; background: transparent;
    font: inherit;
    transition: background .15s, color .15s, box-shadow .15s;
}
.vibe-soft .seg-item.on {
    background: #FFFFFF;
    color: #0F1722;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 4px 12px rgba(15, 23, 42, 0.08);
}
.theme-dark .vibe-soft .seg-item { color: rgba(255, 255, 255, 0.55); }
.theme-dark .vibe-soft .seg-item.on {
    background: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ── Numeric / delta — keep the soft pastel deltas ─────────── */
.vibe-soft .vc-bignum {
    font-size: 44px; font-weight: 700;
    letter-spacing: -0.03em; line-height: 1;
    color: #0F1722;
}
.theme-dark .vibe-soft .vc-bignum { color: #FFFFFF; }
.vibe-soft .vc-bignum.smaller { font-size: 32px; }
.vibe-soft .vc-delta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    background: rgba(46, 184, 113, 0.18);
    color: #1F6F3E;
    margin-left: 10px;
    vertical-align: middle;
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    backdrop-filter: blur(8px) saturate(150%);
}
.vibe-soft .vc-delta.down { background: rgba(229, 72, 77, 0.18); color: #B2331D; }
.vibe-soft .vc-delta.flat { background: rgba(100, 116, 139, 0.18); color: #475569; }
.theme-dark .vibe-soft .vc-delta { color: #5BE08F; }
.theme-dark .vibe-soft .vc-delta.down { color: #FF8C8C; }
.theme-dark .vibe-soft .vc-delta.flat { color: #A0AEC0; }

.vibe-soft .vc-caption {
    font-size: 12px; color: rgba(15, 23, 42, 0.58);
    margin-top: 6px;
}
.theme-dark .vibe-soft .vc-caption { color: rgba(255, 255, 255, 0.55); }
.vibe-soft .vc-eyebrow {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(15, 23, 42, 0.45);
}
.theme-dark .vibe-soft .vc-eyebrow { color: rgba(255, 255, 255, 0.40); }

/* ── Page-head adjustments inside vibe-soft ────────────────── */
.vibe-soft .page-head .page-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.vibe-soft .page-head .page-eyebrow .swatch { border-radius: 999px; }

/* ── Grid system ───────────────────────────────────────────── */
.vibe-soft .grid-soft {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: min-content;
    gap: 16px;
}
.vibe-soft .grid-soft .span-7 { grid-column: span 7; }
.vibe-soft .grid-soft .span-5 { grid-column: span 5; }
.vibe-soft .grid-soft .span-4 { grid-column: span 4; }
.vibe-soft .grid-soft .span-3 { grid-column: span 3; }
.vibe-soft .grid-soft .span-6 { grid-column: span 6; }
.vibe-soft .grid-soft .span-8 { grid-column: span 8; }
.vibe-soft .grid-soft .span-12 { grid-column: 1 / -1; }
@media (max-width: 1240px) {
    .vibe-soft .grid-soft .span-7  { grid-column: span 12; }
    .vibe-soft .grid-soft .span-5  { grid-column: span 12; }
    .vibe-soft .grid-soft .span-4  { grid-column: span 6; }
    .vibe-soft .grid-soft .span-3  { grid-column: span 6; }
    .vibe-soft .grid-soft .span-8  { grid-column: span 12; }
    .vibe-soft .grid-soft .span-6  { grid-column: span 12; }
}
@media (max-width: 760px) {
    .vibe-soft .grid-soft .span-4,
    .vibe-soft .grid-soft .span-3 { grid-column: 1 / -1; }
}

/* ── Tab row — pill style inside vibe-soft ─────────────────── */
.vibe-soft .tab-row {
    border-bottom: 0;
    gap: 4px;
    margin-bottom: 22px;
    background: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 0.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    padding: 4px;
    width: fit-content;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(15,23,42,0.04);
}
.theme-dark .vibe-soft .tab-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}
.vibe-soft .tab-row .tab {
    padding: 8px 14px;
    border-radius: 999px;
    border-bottom: 0;
    font-size: 12px; font-weight: 600;
    color: rgba(15, 23, 42, 0.62);
    margin: 0;
}
.vibe-soft .tab-row .tab.active {
    background: #FFFFFF;
    color: #0F1722;
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.08);
}
.theme-dark .vibe-soft .tab-row .tab { color: rgba(255, 255, 255, 0.55); }
.theme-dark .vibe-soft .tab-row .tab.active {
    background: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
}

/* ── List rows / chips (used by Top calls etc) ──────────────── */
.vibe-soft .list-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.theme-dark .vibe-soft .list-row { border-color: rgba(255, 255, 255, 0.06); }
.vibe-soft .list-row:last-child { border-bottom: 0; }
.vibe-soft .list-row .thumb {
    width: 44px; height: 44px;
    border-radius: 14px;
    background: #EFEEF6;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.vibe-soft .list-row .meta { flex: 1; min-width: 0; }
.vibe-soft .list-row .meta-title {
    font-size: 13px; font-weight: 600; color: #0F1722;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.theme-dark .vibe-soft .list-row .meta-title { color: #F0F2F8; }
.vibe-soft .list-row .tag {
    display: inline-block;
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.60);
    padding: 1px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 600;
    margin-right: 6px;
}
.theme-dark .vibe-soft .list-row .tag { background: rgba(255, 255, 255, 0.06); color: rgba(255,255,255,0.55); }
.vibe-soft .list-row .row-val {
    font-size: 16px; font-weight: 700;
    color: #0F1722;
    background: rgba(255, 255, 255, 0.65);
    padding: 6px 12px;
    border-radius: 12px;
    border: 0.5px solid rgba(255, 255, 255, 0.85);
}
.theme-dark .vibe-soft .list-row .row-val { background: rgba(255,255,255,0.06); color: #FFFFFF; border-color: rgba(255,255,255,0.06); }

/* ── Bubble chart ──────────────────────────────────────────── */
.vibe-soft .bubbles {
    position: relative;
    height: 220px;
    margin-top: 4px;
}
.vibe-soft .bubble {
    position: absolute;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-weight: 700;
    text-align: center;
    color: #0F1722;
    /* Soft glass-y bubble: inner highlight + outer shadow */
    box-shadow:
        inset 0 6px 12px rgba(255, 255, 255, 0.5),
        inset 0 -6px 14px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(15, 23, 42, 0.08);
}
.vibe-soft .bubble .b-pct { font-size: 22px; line-height: 1; }
.vibe-soft .bubble .b-sub { font-size: 10px; font-weight: 600; margin-top: 4px; opacity: 0.78; }

/* ── Action arrow button (top-right of cards) ──────────────── */
.vibe-soft .vc-action {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 0.5px solid rgba(255, 255, 255, 0.85);
    color: #0F1722;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(15,23,42,0.05);
}
.theme-dark .vibe-soft .vc-action {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255,255,255,0.10); color: #FFFFFF;
}
.vibe-soft .vc-action:hover { background: rgba(255, 255, 255, 0.85); }
.vibe-soft .vc-action svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ── Hatch fills for non-highlighted bars (kept) ───────────── */
.vibe-soft .hatch-bar {
    background-image: repeating-linear-gradient(135deg,
        rgba(15,23,42,0.06) 0 3px, transparent 3px 7px);
    background-color: rgba(15,23,42,0.04);
}

/* ── Vertical bars (Activity by day) ───────────────────────── */
.vibe-soft .vbars {
    display: flex; align-items: flex-end; gap: 12px;
    height: 200px;
    margin-top: 14px;
}
.vibe-soft .vbar {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    position: relative;
}
.vibe-soft .vbar .bar {
    width: 100%; max-width: 36px;
    border-radius: 10px 10px 6px 6px;
    position: relative;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.4);
}
.vibe-soft .vbar .bar.bar-hatch {
    background-image: repeating-linear-gradient(135deg, rgba(15,23,42,0.10) 0 3px, transparent 3px 8px);
    background-color: rgba(15,23,42,0.04);
    box-shadow: none;
}
.theme-dark .vibe-soft .vbar .bar.bar-hatch {
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 3px, transparent 3px 8px);
    background-color: rgba(255,255,255,0.05);
}
.vibe-soft .vbar .bar-label-top {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    background: #FFFFFF;
    padding: 3px 8px; border-radius: 8px;
    font-size: 11px; font-weight: 700;
    box-shadow: 0 4px 12px rgba(15,23,42,0.10);
    white-space: nowrap;
}
.theme-dark .vibe-soft .vbar .bar-label-top { background: rgba(255,255,255,0.10); color: #FFFFFF; }
.vibe-soft .vbar .vbar-x { font-size: 11px; color: rgba(15,23,42,0.55); }
.theme-dark .vibe-soft .vbar .vbar-x { color: rgba(255,255,255,0.55); }

/* ── Platform chip cards (Phone / Email) — keep solid for contrast ── */
.vibe-soft .platform {
    background: #14141C;
    color: #FFFFFF;
    border-radius: 16px;
    padding: 10px 14px;
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 120px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}
.vibe-soft .platform .p-num { font-size: 20px; font-weight: 700; }
.vibe-soft .platform .p-ic {
    width: 28px; height: 28px;
    background: rgba(255,255,255,0.12);
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.vibe-soft .platform .p-ic svg { width: 16px; height: 16px; stroke: #FFFFFF; stroke-width: 2; fill: none; }
.vibe-soft .platform.lite { background: linear-gradient(135deg, #FDE89A, #F8D85B); color: #0F1722; box-shadow: 0 8px 20px rgba(248,216,91,0.40); }
.vibe-soft .platform.lite .p-ic { background: rgba(15,23,42,0.10); }
.vibe-soft .platform.lite .p-ic svg { stroke: #0F1722; }

/* ── Chart accent helper classes (still used in some places) ─ */
.vibe-lavender { color: #C7B8F0; fill: #C7B8F0; }
.vibe-yellow   { color: #F8D85B; fill: #F8D85B; }
.vibe-cyan     { color: #5DD5E0; fill: #5DD5E0; }
.vibe-mint     { color: #6BD49A; fill: #6BD49A; }
.vibe-coral    { color: #FF9C8A; fill: #FF9C8A; }
.vibe-ink      { color: #0F1722; fill: #0F1722; }

/* ── Glass overrides on shell chrome (rail / topbar) ──────── */

/* Dark glass rail when vibe-soft mode is in main */
.vibe-soft + nothing { /* anchor for ordering only */ }

/* The rail and topbar live OUTSIDE .vibe-soft (they're grid siblings),
   so we tag <body> with .vibe-mode and target them directly. */
.vibe-mode .rail {
    background: rgba(20, 22, 30, 0.72);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border-right: 0.5px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.04),
        2px 0 24px rgba(15, 23, 42, 0.10);
}
.theme-dark .vibe-mode .rail {
    background: rgba(8, 10, 18, 0.70);
}
.vibe-mode .v1-topbar {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.4),
        0 1px 2px rgba(15, 23, 42, 0.04);
}
.theme-dark .vibe-mode .v1-topbar {
    background: rgba(20, 22, 30, 0.55);
    border-color: rgba(255, 255, 255, 0.06);
}
.vibe-mode .v1-topbar .search-pill {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 0.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(15,23,42,0.05);
}
.theme-dark .vibe-mode .v1-topbar .search-pill {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.06);
}

/* Hide the legacy heavy section labels in the page-head; we use vc-eyebrow now */
.vibe-soft .page-head { margin-bottom: 18px; }

/* Slight extra punch on hover for cards (Apple does a subtle scale + brighter highlight) */
.vibe-soft .vc:hover,
.vibe-soft .card:hover,
.vibe-soft .kpi:hover {
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.40),
        0 2px 4px rgba(15, 23, 42, 0.05),
        0 12px 32px rgba(15, 23, 42, 0.06),
        0 32px 80px rgba(15, 23, 42, 0.05);
}