.vs-page {
    min-height: 100vh;
    background: #ffffff;
    color: #1f2433;
    font-family: 'Oswald', sans-serif;
    padding: 28px 24px 60px;
    letter-spacing: 0.2px;
    /* Prevent a fixed-position child (modal, etc.) or any other wide content
       from inducing a body horizontal scrollbar and shifting the page. */
    overflow-x: hidden;
}

.vs-page,
.vs-page input {
    font-family: 'Oswald', sans-serif;
}

/* Buttons inside our page get Oswald, EXCEPT Syncfusion's icon-only buttons.
   Targeting buttons inside our own widgets keeps Sf controls (which depend on
   the e-icons font) from rendering blank icons. */
.vs-page .vs-pill,
.vs-page .vs-metric-pill {
    font-family: 'Oswald', sans-serif;
}

.vs-shell {
    max-width: 1320px;
    margin: 0 auto;
}

/* Header ----------------------------------------------------------- */
.vs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 26px;
}
/* When the controls wrap below the title (viewport too narrow), push the
   controls block to the right edge instead of letting them collapse against
   the left. Looks correct at all widths. */
.vs-header > .vs-controls {
    margin-left: auto;
}

.vs-eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #6c748a;
    margin-bottom: 6px;
}

.vs-venue-name {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
    color: #111827;
}

.vs-range-label {
    margin-top: 6px;
    color: #6c748a;
    font-size: 14px;
}

.vs-range-pills {
    display: inline-flex;
    background: #ffffff;
    border: 1px solid #e3e7ef;
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.vs-pill {
    background: transparent;
    border: 0;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vs-pill:hover { color: #111827; }

.vs-pill--active {
    background: linear-gradient(135deg, #2c8fb5 0%, #67b7dc 100%);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(103, 183, 220, 0.45);
}

/* Header controls (pills + datepicker) */
.vs-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vs-datepicker {
    width: 350px;
    max-width: 100%;
}

/* QuickBooks-style preset dropdown */
.vs-qb-wrap {
    position: relative;
}

.vs-qb-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
    background-size: 12px;
    border: 1px solid #e1e6f0;
    border-radius: 8px;
    color: #1f2433;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 36px 8px 14px;
    height: 38px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 180px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vs-qb-select:hover {
    border-color: #c7cfdf;
}

.vs-qb-select:focus {
    outline: none;
    border-color: #67b7dc;
    box-shadow: 0 0 0 3px rgba(103, 183, 220, 0.18);
}

/* KPI tiles -------------------------------------------------------- */
.vs-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.vs-kpi {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 22px 22px 20px;
    background: #ffffff;
    border: 1px solid #e6eaf2;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vs-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.vs-kpi::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vs-kpi-glow, transparent);
    opacity: 0.5;
    pointer-events: none;
}

.vs-kpi--violet { --vs-kpi-glow: radial-gradient(circle at 90% -10%, rgba(139, 92, 246, 0.18) 0%, transparent 55%); }
.vs-kpi--teal   { --vs-kpi-glow: radial-gradient(circle at 90% -10%, rgba(20, 184, 166, 0.18) 0%, transparent 55%); }
.vs-kpi--amber  { --vs-kpi-glow: radial-gradient(circle at 90% -10%, rgba(245, 158, 11, 0.20) 0%, transparent 55%); }
.vs-kpi--rose   { --vs-kpi-glow: radial-gradient(circle at 90% -10%, rgba(244, 63, 94, 0.18) 0%, transparent 55%); }
.vs-kpi--indigo { --vs-kpi-glow: radial-gradient(circle at 90% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 55%); }

.vs-kpi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}
.vs-kpi--violet .vs-kpi-icon { color: #7c3aed; }
.vs-kpi--teal   .vs-kpi-icon { color: #0d9488; }
.vs-kpi--amber  .vs-kpi-icon { color: #d97706; }
.vs-kpi--rose   .vs-kpi-icon { color: #e11d48; }
.vs-kpi--indigo .vs-kpi-icon { color: #4f46e5; }

.vs-kpi-body { position: relative; z-index: 1; }

.vs-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    letter-spacing: -0.5px;
}

.vs-kpi-label {
    margin-top: 6px;
    color: #6c748a;
    font-size: 13px;
    font-weight: 500;
}

.vs-delta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.2;
}

.vs-delta--up {
    color: #15803d;
    background: rgba(34, 197, 94, 0.12);
}

.vs-delta--down {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

.vs-delta--neutral {
    color: #6c748a;
    background: #eef1f7;
}

.vs-delta-prev {
    margin-left: 4px;
    font-weight: 400;
    color: inherit;
    opacity: 0.7;
    font-size: 11px;
}

/* Charts ----------------------------------------------------------- */
.vs-charts {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}

@media (max-width: 1100px) {
    .vs-charts { grid-template-columns: 1fr; }
}

.vs-charts-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 22px;
}

.vs-card-head--row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.vs-metric-pills {
    display: inline-flex;
    background: #ffffff;
    border: 1px solid #e1e6f0;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.vs-metric-pill {
    position: relative;
    background: transparent;
    border: 0;
    border-right: 1px solid #e1e6f0;
    color: #5b6478;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 9px 18px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.vs-metric-pill:last-child { border-right: 0; }

.vs-metric-pill:hover {
    color: #111827;
    background: #f7f9fd;
}

.vs-metric-pill--active {
    background: #111827 !important;
    color: #ffffff !important;
    border-right-color: #111827;
}

.vs-metric-pill--active + .vs-metric-pill { border-left: 1px solid #111827; }

.vs-chart--tall { height: 440px; }

.vs-card-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vs-chart-type {
    width: 38px;
    padding: 8px 0 !important;
    text-align: center;
}

.vs-chart-type i { font-size: 14px; }

.vs-chart-type-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
    background-size: 12px;
    border: 1px solid #e1e6f0;
    border-radius: 8px;
    color: #1f2433;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 32px 8px 12px;
    height: 38px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 160px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vs-chart-type-select:hover { border-color: #c7cfdf; }
.vs-chart-type-select:focus {
    outline: none;
    border-color: #67b7dc;
    box-shadow: 0 0 0 3px rgba(103, 183, 220, 0.18);
}

.vs-save-btn {
    background: #ffffff;
    border: 1px solid #e1e6f0;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: all 0.15s ease;
}

.vs-save-btn:hover {
    color: #67b7dc;
    border-color: #67b7dc;
}

.vs-save-btn:active { transform: translateY(1px); }

/* Drag-to-reorder ------------------------------------------------- */
.vs-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 22px;
}

.vs-card-slot {
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.vs-card-slot.dragging { opacity: 0.4; }

.vs-card-slot.drag-over::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 3px;
    background: #67b7dc;
    border-radius: 2px;
    z-index: 5;
}

.vs-drag-handle {
    position: absolute;
    top: 14px;
    left: -22px;
    width: 22px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c7cfdf;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    z-index: 4;
}

.vs-card-slot:hover .vs-drag-handle { opacity: 1; }
.vs-drag-handle:hover { color: #67b7dc; }
.vs-drag-handle:active { cursor: grabbing; }

.vs-stack-bar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

.vs-add-btn {
    background: linear-gradient(135deg, #2c8fb5 0%, #67b7dc 100%);
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 9px 16px;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(103, 183, 220, 0.35);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.vs-add-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

.vs-add-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.vs-add-label {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 8px;
}

.vs-add-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.vs-add-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e1e6f0;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    font-family: 'Oswald', sans-serif;
}

.vs-add-card:hover {
    border-color: #67b7dc;
    background: #f7fbfe;
    transform: translateY(-1px);
}

.vs-add-card > i:first-child {
    font-size: 22px;
    color: #67b7dc;
    flex-shrink: 0;
    width: 26px;
    text-align: center;
}

.vs-add-card > div { flex: 1; }

.vs-add-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2433;
}

.vs-add-card-sub {
    font-size: 12px;
    color: #6c748a;
    margin-top: 2px;
}

.vs-add-card-plus {
    font-size: 18px;
    color: #67b7dc;
}

/* Tab bar ---------------------------------------------------------- */
.vs-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e1e6f0;
    margin-bottom: 22px;
}

.vs-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #6c748a;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 12px 22px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
    font-family: 'Oswald', sans-serif;
}

.vs-tab i { font-size: 16px; }

.vs-tab:hover { color: #111827; }

.vs-tab--active {
    color: #67b7dc;
    border-bottom-color: #67b7dc;
}

.vs-tab-badge {
    background: #f43f5e;
    color: #fff;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.4;
}

/* Errors table ----------------------------------------------------- */
.vs-error-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Oswald', sans-serif;
}

.vs-error-table thead th {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6c748a;
    padding: 10px 14px;
    border-bottom: 1px solid #e1e6f0;
    background: #f7f9fd;
}

.vs-error-table thead th:first-child,
.vs-error-table thead th:nth-child(2) {
    text-align: left;
}

.vs-error-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #eef1f7;
    color: #1f2433;
    font-size: 14px;
    vertical-align: middle;
}

.vs-error-table tbody tr:last-child td { border-bottom: 0; }

.vs-error-table tbody tr:hover { background: #f7f9fd; }

.vs-num { text-align: center; font-variant-numeric: tabular-nums; }

.vs-error-code {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #eef1f7;
    color: #4b5563;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.vs-empty {
    padding: 30px;
    text-align: center;
    color: #6c748a;
    font-style: italic;
}

/* KPI customize cog + modal --------------------------------------- */
.vs-kpis-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.vs-kpi-cog {
    background: #ffffff;
    border: 1px solid #e1e6f0;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.2s ease;
}

.vs-kpi-cog:hover {
    color: #67b7dc;
    border-color: #67b7dc;
    transform: rotate(20deg);
}

.vs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-modal {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
    padding: 24px 26px 20px;
    width: 760px;
    max-width: 95vw;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Oswald', sans-serif;
    margin: auto;
}

.vs-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: #6c748a;
    cursor: pointer;
}
.vs-modal-close:hover { color: #111827; }

.vs-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.vs-modal-sub {
    font-size: 13px;
    color: #6c748a;
    margin-bottom: 18px;
}

.vs-kpi-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin-bottom: 16px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
}

@media (min-width: 900px) {
    .vs-kpi-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vs-kpi-options::-webkit-scrollbar { width: 8px; }
.vs-kpi-options::-webkit-scrollbar-thumb { background: #d6dbe5; border-radius: 4px; }
.vs-kpi-options::-webkit-scrollbar-track { background: transparent; }

.vs-kpi-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e1e6f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #1f2433;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-width: 0;
}

.vs-kpi-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-kpi-option:hover {
    border-color: #c7cfdf;
    background: #f7f9fd;
}

.vs-kpi-option input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: #67b7dc;
    cursor: pointer;
}

.vs-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.vs-modal-btn {
    padding: 9px 18px;
    border-radius: 8px;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.vs-modal-btn--ghost {
    background: transparent;
    color: #4b5563;
    border-color: #e1e6f0;
}
.vs-modal-btn--ghost:hover { background: #f7f9fd; color: #111827; }

.vs-modal-btn--primary {
    background: linear-gradient(135deg, #2c8fb5 0%, #67b7dc 100%);
    color: #ffffff;
}
.vs-modal-btn--primary:hover { filter: brightness(1.05); }

.vs-card {
    background: #ffffff;
    border: 1px solid #e6eaf2;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.vs-card--span2 { /* placeholder for grid layout */ }

.vs-card-head { margin-bottom: 14px; }

.vs-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.vs-card-sub {
    font-size: 12px;
    color: #6c748a;
    margin-top: 2px;
}

.vs-chart {
    width: 100%;
    height: 360px;
}

/* Insights --------------------------------------------------------- */
.vs-insights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 900px) {
    .vs-insights { grid-template-columns: 1fr; }
}

.vs-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vs-rank-row {
    display: grid;
    grid-template-columns: 28px 90px 1fr 80px;
    align-items: center;
    gap: 12px;
}

.vs-rank-num {
    font-weight: 700;
    color: #7c3aed;
    text-align: center;
}

.vs-rank-name {
    color: #1f2433;
    font-weight: 500;
}

.vs-rank-bar {
    background: #eef1f7;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
}

.vs-rank-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.vs-rank-val {
    text-align: right;
    color: #4b5563;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.vs-rank-empty {
    color: #6c748a;
    font-style: italic;
    padding: 12px 0;
    text-align: center;
}

/* Hours mini-grid -------------------------------------------------- */
.vs-hours {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 4px;
    height: 180px;
    align-items: end;
}

.vs-hour {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    gap: 4px;
}

.vs-hour-bar {
    width: 100%;
    height: 100%;
    background: #eef1f7;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.vs-hour-fill {
    width: 100%;
    background: linear-gradient(180deg, #38bdf8, #6366f1);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.4s ease;
}

.vs-hour-label {
    font-size: 9px;
    color: #94a0b8;
    font-variant-numeric: tabular-nums;
}

/* Loading ---------------------------------------------------------- */
.vs-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    gap: 18px;
}

.vs-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #e6eaf2;
    border-top-color: #8b5cf6;
    animation: vs-spin 0.9s linear infinite;
}

@keyframes vs-spin { to { transform: rotate(360deg); } }

.vs-loading-text {
    color: #4b5563;
    font-size: 14px;
}

.vs-loading-text span {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-left: 2px;
    border-radius: 50%;
    background: #4b5563;
    opacity: 0.2;
    animation: vs-dot 1.2s infinite ease-in-out;
}
.vs-loading-text span:nth-child(2) { animation-delay: 0.2s; }
.vs-loading-text span:nth-child(3) { animation-delay: 0.4s; }
@keyframes vs-dot {
    0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-3px); }
}

/* Member-map zip drilldown panel */
.vs-zip-member-list { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.vs-zip-member-row {
    display: flex; align-items: center; gap: 10px;
    text-align: left; width: 100%;
    padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 8px;
    background: #fff; cursor: pointer; font-size: 14px; color: #111827;
    transition: background 120ms ease, border-color 120ms ease;
}
.vs-zip-member-row:hover { background: #f3f4f6; border-color: #4f8cff; }
.vs-zip-member-row i { color: #4f8cff; }
.vs-zip-member-name { flex: 1; }
.vs-zip-member-id { color: #6b7280; font-size: 12px; font-family: ui-monospace, SFMono-Regular, monospace; }
.vs-back-btn {
    background: transparent; border: none; cursor: pointer; padding: 4px 8px;
    margin-right: 6px; color: #4f8cff; font-size: 14px;
}
.vs-back-btn:hover { color: #1e40af; }

/* Map drilldown popup */
.vs-map-popup { max-height: 82vh; overflow-y: auto; }
.vs-map-popup .vs-zip-member-list { max-height: 60vh; overflow-y: auto; padding: 8px 0; }
.vs-map-popup .vs-card-head { border-bottom: 1px solid #e5e7eb; margin-bottom: 12px; padding-bottom: 12px; }

/* Member-detail popup: fixed size regardless of content, internal scroll only */
.vs-memberview-popup {
    width: 1200px !important;
    max-width: 95vw !important;
    height: 750px !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    contain: layout paint style;
}

/* Body-level scroll lock applied when any drilldown popup is open. */
body.vs-no-scroll {
    overflow: hidden !important;
}
.vs-memberview-popup > * {
    max-width: 100%;
    box-sizing: border-box;
}
.vs-memberview-popup #memberdetails-info,
.vs-memberview-popup .member-details {
    flex: 1 1 auto;
    overflow: auto;
    max-width: 100%;
}

/* Isolate the page header so heavy components mounting elsewhere can't reflow
   the date range picker or the preset pills. */
.vs-header {
    contain: layout style;
}

/* In the map-drilldown popup, push the MemberView action buttons
   (Edit Customer / Edit Balance / Activate) down so they don't sit
   flush against the top of the popup. */
.vs-memberview-popup .row-actions {
    margin-top: 50px !important;
}