/* ═══════════════════════════════════════════════════
   LEMON BROTHERS — Components v5
   Opinionated. Dense. Functional premium.
   ═══════════════════════════════════════════════════ */

/* ═══ CARD — liquid glass ═══
   Two painted layers (fill + edge ring) over a blurred backdrop.
   The border is transparent so the border-box gradient paints the
   refractive glass edge; the inset specular line is in --shadow-card. */
:root {
    --card-padding: 22px;
}
@media (max-width: 480px) {
    :root {
        --card-padding: 14px;
    }
}

/* ═══ CARD — liquid glass ═══
   Two painted layers (fill + edge ring) over a blurred backdrop.
   The border is transparent so the border-box gradient paints the
   refractive glass edge; the inset specular line is in --shadow-card. */
.card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        rgba(13, 15, 24, 0.48) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-xl);
    padding: var(--card-padding);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-apple);
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--glass-filter) !important;
    -webkit-backdrop-filter: var(--glass-filter) !important;
    box-shadow: var(--shadow-card) !important;
}
/* Ensure all direct card content renders above background glows and sparklines */
.card > *:not(.kpi-sparkline) {
    position: relative;
    z-index: 2;
}
.card::before {
    display: none !important;
}
.card:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) padding-box,
        rgba(18, 20, 32, 0.58) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover) !important;
    position: relative;
}

/* Specific KPI Card Accent Mappings to match sparkline line colors */
.card-kpi:has(#sparkMargin) { --card-accent: 245, 197, 66; }
.card-kpi:has(#sparkRevenue) { --card-accent: 139, 92, 246; }
.card-kpi:has(#sparkRoas) { --card-accent: 59, 130, 246; }
.card-kpi:has(#sparkAov) { --card-accent: 236, 72, 153; }
.card-kpi:has(#sparkBalance) { --card-accent: 16, 185, 129; }

[data-theme="light"] .card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.20) 100%) padding-box,
        rgba(253, 251, 247, 0.30) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.90) 0%, rgba(27, 24, 22, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="light"] .card:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.30) 100%) padding-box,
        rgba(253, 251, 247, 0.32) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(27, 24, 22, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover) !important;
}

/* ─── Hero card sheen ─── single soft light pass on hover, hero only */
.card-kpi.featured::after {
    display: none !important;
}

/* ═══ KPI CARD ═══ */
.card-kpi {
    display: flex; flex-direction: column;
    min-height: 132px;
    justify-content: space-between;
    position: relative;
}
.card-kpi.featured {
    grid-column: span 2;
    min-height: 148px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        rgba(13, 15, 24, 0.48) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    border-radius: var(--radius-xl);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-apple);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.20),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 4px 15px rgba(0, 0, 0, 0.18),
        0 20px 48px -8px rgba(0, 0, 0, 0.40) !important;
}
.card-kpi.featured:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) padding-box,
        rgba(18, 20, 32, 0.58) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 6px 20px rgba(0, 0, 0, 0.22),
        0 28px 56px -8px rgba(0, 0, 0, 0.50) !important;
}
[data-theme="light"] .card-kpi.featured {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.20) 100%) padding-box,
        rgba(253, 251, 247, 0.30) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.90) 0%, rgba(27, 24, 22, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="light"] .card-kpi.featured:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.30) 100%) padding-box,
        rgba(253, 251, 247, 0.32) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(27, 24, 22, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover) !important;
}
.card-kpi.featured .card-kpi-value {
    font-size: 44px;
    letter-spacing: -0.045em;
    font-weight: 800;
    color: #10b981 !important;
    /* Monolithic hero value — no plate, glow comes from the text itself. */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: 0 0 24px rgba(16, 185, 129, 0.22), 0 1px 6px rgba(0, 0, 0, 0.3);
}
.card-kpi-label, .card-kpi-value, .card-kpi-sub, .card-kpi-bar {
    position: relative;
    z-index: 2;
}
.card-kpi-label {
    font-size: 12px; font-weight: 600;
    color: var(--t-3);
    text-transform: uppercase; letter-spacing: 0.09em;
    line-height: 1;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.card-kpi-value {
    font-size: 34px; font-weight: 700;
    letter-spacing: -0.035em; line-height: 1.04;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
    color: #ffffff !important;

    /* Monolithic: the value sits directly on the card glass — no recessed
       plate, so the card reads as one seamless surface with no inner joints.
       Contrast is held by a soft text-shadow instead of a capsule. */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0;
    padding: 0;
    margin: 6px 0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: baseline;
    width: fit-content;
    z-index: 2;
    white-space: nowrap;
}
.card-kpi-value.big { font-size: 36px; }
.card-kpi-value small {
    font-size: 14px; font-weight: 600;
    opacity: 0.55; margin-left: 2px;
    color: rgba(255, 255, 255, 0.7);
}
.card-kpi-sub {
    display: block; font-size: 11.5px;
    font-weight: 500; color: var(--t-3);
    line-height: 1.3; margin-top: 4px;
}
.card-kpi-sub.muted { color: var(--t-3); }
.card-kpi-sub.good  { color: var(--green); }
.card-kpi-sub.bad   { color: var(--red); }

/* Progress bar */
.card-kpi-bar {
    display: flex; align-items: center; gap: 8px;
    margin-top: auto; padding-top: 10px;
}
.bar-track {
    flex: 1; height: 6px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 99px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.bar-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--c, var(--accent)) 0%, rgba(255, 255, 255, 0.2) 100%);
    box-shadow: 0 0 6px var(--c, var(--accent));
    border-radius: 99px;
    transition: width 1.2s var(--ease-out) 0.25s;
}
.bar-target { font-size: 9px; color: var(--t-3); font-family: var(--font-mono); white-space: nowrap; }

/* ═══ BADGE ═══ */
.badge {
    font-size: 9.5px; font-weight: 700;
    font-family: var(--font-mono);
    padding: 2px 6px; border-radius: 4px;
    display: inline-block; vertical-align: middle;
    letter-spacing: 0.03em;
}
.badge-green { color: var(--green); background: var(--green-dim); }
.badge-red   { color: var(--red);   background: var(--red-dim);   }
.badge-stub  {
    color: rgba(234,179,8,0.8); background: rgba(234,179,8,0.08);
    border: 1px solid rgba(234,179,8,0.15);
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
}

/* ═══ CHART CARD — bypass stacking/backdrop-filter clipping ═══ */
.card-chart { 
    padding: 18px; 
    overflow: visible !important;
    background: transparent !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    border: 1px solid transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
.card-chart:hover {
    z-index: 150 !important;
}
.card.card-chart::before {
    content: '';
    display: block !important;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        rgba(13, 15, 24, 0.48) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    backdrop-filter: var(--glass-filter) !important;
    -webkit-backdrop-filter: var(--glass-filter) !important;
    box-shadow: var(--shadow-card) !important;
    z-index: 1 !important;
    pointer-events: none;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.card.card-chart:hover::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) padding-box,
        rgba(18, 20, 32, 0.58) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
}

/* Light theme overrides for chart cards backing glass */
[data-theme="light"] .card.card-chart::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.20) 100%) padding-box,
        rgba(253, 251, 247, 0.30) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.90) 0%, rgba(27, 24, 22, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="light"] .card.card-chart:hover::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.30) 100%) padding-box,
        rgba(253, 251, 247, 0.32) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(27, 24, 22, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--shadow-card-hover) !important;
}
.card-chart,
.card-chart *,
#chartTurnover,
#chartTurnover *,
.apexcharts-canvas,
.apexcharts-canvas * {
    overflow: visible !important;
}
.card-chart-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.chart-medians-badge {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.03);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.card-chart-head h3,
.card-chart h3 {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--t-2); margin-bottom: 0;
}

/* ═══ SECTION GRIDS ═══ */
.buying-grid,
.warehouse-grid,
.procurement-grid,
.finance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.buying-chart  { grid-column: 1 / 3; }
.buying-metrics{ grid-column: 1 / 3; } /* Symmetrical side-by-side row! */
.buying-profit-card { grid-column: 3 / 5; } /* Symmetrical side-by-side row! */
.buying-traffic-card,
.procurement-chart,
.finance-chart { grid-column: 1 / -1; }

/* ═══ DATA TABLE ═══ */
.data-table {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px;
}
.data-table th {
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--t-3); padding: 7px 12px; text-align: left;
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 8px 12px; font-variant-numeric: tabular-nums;
    border-bottom: 1px solid rgba(255,255,255,0.028);
}
.data-table tbody tr:hover td { background: rgba(255,255,255,0.025); }

.data-table-sm { font-size: 11px; }
.data-table-sm th {
    font-size: 9px; padding: 5px 9px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--t-3); border-bottom: 1px solid var(--border);
}
.data-table-sm th:not(:first-child) { text-align: right; }
.data-table-sm td { padding: 6px 9px; border-bottom: 1px solid rgba(255,255,255,0.025); }
.data-table-sm td:not(:first-child) { text-align: right; }
.data-table-sm tbody tr:nth-child(even) { background: rgba(255,255,255,0.012); }
.data-table-sm tbody tr:hover { background: rgba(255,255,255,0.035); }
.data-table-sm tfoot td { padding: 7px 9px; color: var(--accent); font-weight: 700; }

[data-theme="light"] .data-table td {
    border-bottom: 1px solid rgba(27, 24, 22, 0.06) !important;
}
[data-theme="light"] .data-table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.02) !important;
}
[data-theme="light"] .data-table-sm td {
    border-bottom: 1px solid rgba(27, 24, 22, 0.04) !important;
}
[data-theme="light"] .data-table-sm tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.012) !important;
}
[data-theme="light"] .data-table-sm tbody tr:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* ═══ STATUS PILLS ═══ */
.status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 600; line-height: 1;
    padding: 4px 10px 4px 8px; border-radius: 20px;
    white-space: nowrap;
    transition: all 0.28s;
}
.block-header .status-pill {
    display: none !important;
}
.status-pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
}
.status-pill[data-status="green"] {
    background: var(--green-dim);
    border: 1px solid rgba(52,211,153,0.2);
    color: var(--green);
}
.status-pill[data-status="green"]::before {
    background: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
}
.status-pill[data-status="yellow"] {
    background: var(--yellow-dim);
    border: 1px solid rgba(251,191,36,0.2);
    color: var(--yellow);
}
.status-pill[data-status="yellow"]::before {
    background: var(--yellow);
    box-shadow: 0 0 8px var(--yellow-glow);
}
.status-pill[data-status="red"] {
    background: var(--red-dim);
    border: 1px solid rgba(248,113,113,0.2);
    color: var(--red);
}
.status-pill[data-status="red"]::before {
    background: var(--red);
    box-shadow: 0 0 8px var(--red-glow);
}


/* ═══ SECTION HEAD ═══ */
.section-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.section-head h3 {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--t-2);
}
.section-meta { font-size: 10px; color: var(--t-3); font-weight: 500; }

/* ═══ BLOCK CONTROLS ═══ */
.block-header {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 8px;
    margin-bottom: 18px;
}

/* ═══ GOALS BAR ═══ */
.goals-bar {
    background: var(--glass); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 10px 14px;
}
.goals-row {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.goal-item {
    display: flex; flex-direction: column; gap: 3px;
    padding: 7px 10px; border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.18s;
    cursor: default;
}
.goal-item:hover { border-color: var(--border); background: var(--glass-hover); }
.goal-item .gi-head { display: flex; justify-content: space-between; align-items: baseline; }
.goal-item .gi-label { font-size: 9.5px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.05em; }
.goal-item .gi-pct  { font-size: 10px; font-weight: 700; }
.goal-item .gi-value { font-size: 17px; font-weight: 800; color: var(--t-1); line-height: 1.1; font-variant-numeric: tabular-nums; }
.goal-item .gi-bar  { height: 2px; border-radius: 2px; background: rgba(255,255,255,0.05); overflow: hidden; margin-top: 2px; }
.goal-item .gi-bar-fill { height: 100%; border-radius: 2px; transition: width 1s var(--ease-out) 0.2s; }
.goal-item .gi-target { font-size: 9px; color: var(--t-3); }

/* ═══ METRICS CARD ═══ */
.card-metrics { padding: 18px; }
.card-metrics h3 { font-size: 11px; font-weight: 700; color: var(--t-2); margin-bottom: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.metrics-list { display: flex; flex-direction: column; gap: 9px; }
.metric-line { }
.metric-line .ml-name { font-size: 11px; color: var(--t-2); font-weight: 500; }
.metric-line .ml-val  { float: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric-line .ml-val small { font-weight: 400; color: var(--t-3); font-size: 10px; }
.ml-val.highlight { color: var(--accent); }
.ml-val.good { color: var(--green); }
.ml-val.warn { color: var(--yellow); }
.ml-bar { height: 2px; width: 100%; margin-top: 4px; background: rgba(255,255,255,0.05); border-radius: 99px; overflow: hidden; }
.ml-divider { height: 1px; background: var(--border); margin: 5px 0; }

/* ═══ WAREHOUSE PREMIUM OVERHAUL ═══ */
.card-warehouse-premium {
    --section-accent: 251, 191, 36; /* Amber/Yellow default */
}
.wh-card-icon {
    font-size: 13px;
    opacity: 0.85;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bottleneck badge */
.wh-bottleneck-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 6px;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.08);
}
.wh-bottleneck-badge:empty {
    display: none;
}

/* Warehouse Split Novo/Sokol */
.card-warehouse-split {
    grid-column: span 2 !important;
    padding: 18px;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}
.card-warehouse-split:hover {
    z-index: 150 !important;
}
.card-scenarios-distribution {
    grid-column: span 2 !important;
    padding: 18px;
}
.wh-split-visual-container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    margin-top: 12px;
    flex: 1;
}
.wh-split-metrics {
    flex: 1;
    display: flex;
}
.wh-split-chart-wrap {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.wh-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
    flex: 1;
}
.wh-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.wh-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wh-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.wh-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--t-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-primary);
}
.wh-value-group {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.wh-count {
    font-size: 28px;
    font-weight: 800;
    color: var(--t-1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-family: var(--font-display);
    line-height: 1.1;
}
.wh-label {
    font-size: 10px;
    color: var(--t-2);
    font-weight: 500;
    font-family: var(--font-primary);
}
.wh-progress-wrap {
    width: 100%;
}
.wh-progress-bar {
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    overflow: hidden;
}
[data-theme="light"] .wh-progress-bar {
    background: rgba(0, 0, 0, 0.08) !important;
}
.wh-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.8s ease;
}
.wh-month-group {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
}
.wh-month-label {
    color: var(--t-3);
    font-family: var(--font-primary);
}
.wh-month-val {
    font-weight: 700;
    color: var(--t-1);
    font-family: var(--font-primary);
}
.wh-pct {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--t-3);
    font-family: var(--font-primary);
    white-space: nowrap;
}
.wh-sep {
    width: 1px;
    background: rgba(255, 255, 255, 0.05);
    align-self: stretch;
    margin: 0 4px;
}
[data-theme="light"] .wh-sep {
    background: var(--border) !important;
}

/* ═══ TRAFFIC LIGHT ═══ */
.traffic-light {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    background: rgba(0,0,0,0.15);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.03);
    width: fit-content;
}
.tl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.15;
    transition: all 0.3s var(--ease-spring);
    position: relative;
}
.tl-red    { background: #ef4444; }
.tl-yellow { background: #eab308; }
.tl-green  { background: #22c55e; }

.tl-dot.active {
    opacity: 1;
    transform: scale(1.2);
}
.tl-red.active    { box-shadow: 0 0 10px rgba(239,68,68,0.7); }
.tl-yellow.active { box-shadow: 0 0 10px rgba(234,179,8,0.7); }
.tl-green.active  { box-shadow: 0 0 10px rgba(34,197,94,0.7); }

.tl-status-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
}
.tl-status-text.green  { color: #22c55e; }
.tl-status-text.yellow { color: #eab308; }
.tl-status-text.red    { color: #ef4444; }

/* Scenarios Grid */
.scenarios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 14px;
}
.scenario-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.038);
    transition: all 0.22s var(--ease-smooth);
    cursor: default;
}
.scenario-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
.scenario-active {
    background: rgba(52, 211, 153, 0.04) !important;
    border-color: rgba(52, 211, 153, 0.2) !important;
    box-shadow: inset 0 0 12px rgba(52, 211, 153, 0.03);
}
.scenario-actual {
    background: rgba(96, 165, 250, 0.04) !important;
    border-color: rgba(96, 165, 250, 0.2) !important;
    box-shadow: inset 0 0 12px rgba(96, 165, 250, 0.03);
}
.scenario-icon {
    font-size: 14px;
    margin-bottom: 4px;
}
.scenario-label {
    font-size: 8.5px;
    color: var(--t-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.scenario-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--t-1);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.scenario-active .scenario-value { color: var(--green); }
.scenario-actual .scenario-value { color: var(--blue); }

/* Packer list visualizers */
.packer-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--c, var(--t-1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    font-family: var(--font-mono);
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.packer-eff-badge, .packer-cat-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
    display: inline-block;
}


/* ═══ PACKER LIST ═══ */
.packer-summary { display: flex; align-items: center; }
.packer-wh { margin-bottom: 8px; }
.packer-wh-name { font-size: 10px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 4px; }
.packer-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-radius: 6px; transition: background 0.15s; }
.packer-row:hover { background: rgba(255,255,255,0.03); }
.packer-count { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t-1); }

/* ═══ HEALTH MONITOR ═══ */
.health-monitor { margin-bottom: 14px; opacity: 0; transform: translateY(-8px); transition: opacity 0.45s, transform 0.45s; }
.health-monitor.visible { opacity: 1; transform: translateY(0); }
.health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.health-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background:
        var(--tile-fill) padding-box,
        var(--glass-edge) border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    backdrop-filter: var(--glass-filter);
    -webkit-backdrop-filter: var(--glass-filter);
    box-shadow: var(--shadow-card);
    transition: background 0.4s var(--ease-apple), box-shadow 0.4s var(--ease-apple);
}
.health-card:hover {
    background:
        var(--tile-fill-hover) padding-box,
        var(--glass-edge-hover) border-box;
    box-shadow: var(--shadow-card-hover);
}
.health-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.health-body { flex: 1; min-width: 0; }
.health-title { font-size: 10px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.health-dot { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; transition: all 0.4s; display: inline-block; }
.health-metric { font-size: 13px; font-weight: 700; color: var(--t-1); }
.health-reason { font-size: 10px; color: var(--t-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═══ BUYERS PROFIT DASHBOARD ═══ */
.bp-layout { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 14px; height: 620px; align-items: stretch; }
.bp-totals { display: flex; gap: 14px; margin-left: 12px; }
.bp-total { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.bp-total-label { color: var(--t-3); font-weight: 500; }
.bc-total-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.bp-total-val.profit  { color: var(--green); }
.bp-total-val.revenue { color: var(--blue); }
.bp-total-val.spend   { color: var(--red); }

/* Month filter tabs */
.month-tab {
    padding: 4px 10px; font-size: 10px; font-weight: 600;
    font-family: var(--font-primary);
    background: var(--glass); border: 1px solid var(--border);
    border-radius: 6px; color: var(--t-3);
    cursor: pointer; transition: all 0.15s;
}
.month-tab:hover { color: var(--t-2); border-color: var(--border-hover); }
.month-tab.active { background: var(--accent-dim); color: var(--accent); border-color: rgba(245,197,66,0.2); }

.top-buyers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 300px) !important;
    gap: 10px;
    height: auto !important;
}
.buyer-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        rgba(13, 15, 24, 0.48) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--sp-4) !important;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.20),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 4px 15px rgba(0, 0, 0, 0.18),
        0 20px 48px -8px rgba(0, 0, 0, 0.40) !important;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-apple);
}
.buyer-card:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) padding-box,
        rgba(18, 20, 32, 0.58) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 6px 20px rgba(0, 0, 0, 0.22),
        0 28px 56px -8px rgba(0, 0, 0, 0.50) !important;
}

/* User Info & Rank Circle Badge */
.bc-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bc-rank-badge-apple {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--t-2);
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-display);
    flex-shrink: 0;
}
[data-theme="light"] .bc-rank-badge-apple {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: var(--t-2);
}
.bc-rank-badge-apple.is-leader {
    color: var(--accent) !important;
    background: var(--accent-dim) !important;
    border: 1px solid var(--accent-glow) !important;
}
.bc-buyer-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t-1);
    letter-spacing: -0.01em;
}
.bc-leader-tag {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--accent-dim) !important;
    border: 1px solid var(--accent-glow) !important;
    color: var(--accent) !important;
    margin-left: 6px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* Profit badge and focal header styles */
.bc-header-apple {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.bc-header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.bc-header-bottom-row {
    padding-left: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.bc-header-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bc-status-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}
.bc-status-title.is-leader {
    color: var(--accent);
}
.bc-status-title.is-regular {
    color: var(--t-3);
    opacity: 0.8;
}
.bc-profit-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--t-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
    line-height: 1;
}
.bc-profit-focal {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-display);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.bc-profit-focal.profit-pos {
    color: var(--green);
}
.bc-profit-focal.profit-neg {
    color: var(--red);
}
.bc-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.bc-profit-pct-apple {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
}
[data-theme="light"] .bc-profit-pct-apple {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}
.bc-profit-pct-apple.high { color: var(--green); border-color: rgba(52, 211, 153, 0.2); background: rgba(52, 211, 153, 0.04); }
.bc-profit-pct-apple.mid { color: var(--yellow); border-color: rgba(251, 191, 36, 0.2); background: rgba(251, 191, 36, 0.04); }
.bc-profit-pct-apple.low { color: var(--red); border-color: rgba(248, 113, 113, 0.2); background: rgba(248, 113, 113, 0.04); }

/* Dividers */
.bc-divider-apple {
    height: 1px;
    background: var(--border);
    margin: 4px 0 10px 0;
    width: 100%;
    opacity: 0.5;
}

/* Apple Spec-Grid layout style (3x2 details) */
.bc-grid-apple {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}
.bc-grid-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    box-sizing: border-box;
}
/* Left column cells: padding-left: 0, border-right */
.bc-grid-cell:nth-child(odd) {
    padding-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .bc-grid-cell:nth-child(odd) {
    border-right: 1px solid rgba(0, 0, 0, 0.04);
}
/* Right column cells: padding-right: 0 */
.bc-grid-cell:nth-child(even) {
    padding-right: 0;
    padding-left: 12px;
}
/* Row 1 and Row 2 cells: border-bottom */
.bc-grid-cell:nth-child(-n+4) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .bc-grid-cell:nth-child(-n+4) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
/* Row 3: padding-bottom: 0 */
.bc-grid-cell:nth-child(5),
.bc-grid-cell:nth-child(6) {
    padding-bottom: 0;
}
.bc-cell-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--t-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
    margin-bottom: 2px;
}
.bc-cell-val {
    font-size: 19px;
    font-weight: 700;
    color: var(--t-1);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-display);
    letter-spacing: -0.015em;
}
.bc-cell-val-sub {
    font-size: 11px;
    color: var(--t-3);
    font-weight: 400;
    opacity: 0.8;
}

/* Comparison bars */
.bp-compare {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%) padding-box,
        rgba(17, 19, 31, 0.75) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-xl) !important;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0; /* CRITICAL FLEXBOX/GRID SCROLL FIX */
    box-sizing: border-box;
    backdrop-filter: blur(20px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.12),
        0 4px 15px rgba(0, 0, 0, 0.25) !important;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-apple);
}
.bp-compare:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        rgba(23, 26, 42, 0.8) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
.bp-compare-head { display: flex; align-items: center; justify-content: space-between; }
.bp-compare-title { font-size: 10px; font-weight: 700; color: var(--t-2); text-transform: uppercase; letter-spacing: 0.05em; }
.bp-legend { display: flex; gap: 10px; }
.bp-leg { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--t-3); }
.bp-leg-dot { width: 6px; height: 6px; border-radius: 50%; }

.bp-bars {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 4px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; /* Smooth iOS/Safari scrolling */
}
.bp-bars::-webkit-scrollbar {
    width: 6px; /* Slightly wider scrollbar for premium touch targets */
}
.bp-bars::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}
.bp-bars::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16); /* Clearly visible scrollbar thumb */
    border-radius: 4px;
    border: 1px solid transparent;
}
.bp-bars::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}
.bp-row {
    display: flex; flex-direction: column; gap: 3px;
    padding: 7px 9px;
    background: rgba(255,255,255,0.014);
    border-radius: 7px; transition: background 0.18s;
}
.bp-row:hover { background: rgba(255,255,255,0.028); }
.bp-row-head { display: flex; justify-content: space-between; align-items: center; }
.bp-row-name { font-size: 11px; font-weight: 700; color: var(--t-1); }
.bp-row-vals { display: flex; gap: 8px; font-size: 9px; font-family: var(--font-mono); }
.bp-val-item { font-weight: 600; }
.bp-val-item.margin { color: var(--green) !important; }
.bp-val-item.profit { color: var(--blue) !important; }
.bp-val-item.profit.neg { color: var(--red) !important; }
.bp-val-item.spend { color: var(--yellow) !important; }
.bp-bars-container { display: flex; flex-direction: column; gap: 2px; }
.bp-dbar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.04); overflow: hidden; }
.bp-dbar-fill { height: 100%; border-radius: 2px; transition: width 0.7s var(--ease-out) 0.1s; }
.bp-dbar-fill.margin-bar  { background: var(--green) !important; }
.bp-dbar-fill.profit-bar  { background: var(--blue) !important; }
.bp-dbar-fill.spend-bar   { background: var(--yellow) !important; }

/* ═══ TRAFFIC COMPACT ═══ */
.traffic-compact { padding-top: 2px; }
.traffic-bars { display: flex; flex-direction: column; gap: 9px; }
.tf-row { display: grid; grid-template-columns: 78px 1fr 56px; gap: 9px; align-items: center; }
.tf-label { font-size: 11px; font-weight: 600; color: var(--t-1); display: flex; align-items: center; gap: 6px; }
.tf-icon { width: 15px; height: 15px; border-radius: 3px; flex-shrink: 0; }
.tf-bar-wrap { height: 5px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.tf-bar-fill { height: 100%; border-radius: 3px; transition: width 0.7s var(--ease-out); }
.tf-val { font-size: 11px; font-weight: 600; color: var(--t-2); text-align: right; }
.traffic-meta { margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--border); display: flex; gap: 14px; font-size: 10px; color: var(--t-3); }
.traffic-meta strong { color: var(--t-1); }

/* ═══ PACKER TABLE ═══ */
.data-table-sm tbody td:first-child { text-align: center; }

/* ═══ SETTINGS OVERLAY ═══ */
.settings-overlay {
    position: fixed; inset: 0; z-index: 900;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4, 5, 8, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.settings-overlay.visible { opacity: 1; pointer-events: auto; }
.settings-sidebar {
    width: min(640px, 92vw);
    height: min(680px, 90vh);
    background: rgba(10, 11, 18, 0.72) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        0 24px 64px rgba(0, 0, 0, 0.65) !important;
    padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
    overflow: hidden;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.settings-overlay.visible .settings-sidebar { transform: scale(1); opacity: 1; }

.settings-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.settings-tabs {
    display: flex; gap: 4px; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px; padding: 4px;
}
.settings-tab {
    flex: 1; padding: 8px 10px; font-size: 11px; font-weight: 600;
    font-family: var(--font-primary); color: var(--t-3);
    background: transparent; border: none; border-radius: 8px;
    cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.settings-tab svg { width: 14px; height: 14px; opacity: 0.7; transition: opacity 0.2s; }
.settings-tab:hover { color: var(--t-2); }
.settings-tab:hover svg { opacity: 1; }
.settings-tab.active {
    color: var(--accent);
    background: rgba(245, 197, 66, 0.08);
    box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.15);
}
.settings-tab.active svg { opacity: 1; color: var(--accent); }

.settings-layout { display: flex; flex-direction: column; gap: 16px; flex: 1; overflow: hidden; }
.settings-panel { animation: panelIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; height: 100%; overflow: hidden; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-header h3 { font-size: 13px; font-weight: 700; color: var(--t-1); }

/* ═══ FORM ELEMENTS ═══ */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 10px; font-weight: 600; color: var(--t-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.form-input {
    width: 100%; padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px; color: var(--t-1);
    font-family: var(--font-primary); font-size: 12.5px;
    outline: none; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.form-input:focus { border-color: rgba(245, 197, 66, 0.45); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.08); }
.form-input-sm { padding: 6px 10px; font-size: 11.5px; max-width: 120px; }
.form-inline { display: flex; align-items: center; gap: 10px; }
.form-inline label { font-size: 11.5px; white-space: nowrap; margin-bottom: 0; min-width: 90px; text-transform: none; letter-spacing: 0; }
.form-error { color: var(--red); font-size: 11.5px; font-weight: 600; margin-top: 8px; }

/* ═══ BUTTONS ═══ */
.btn-sm {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; font-size: 11.5px; font-weight: 700;
    font-family: var(--font-primary); border: none; border-radius: 9px;
    cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-accent { background: linear-gradient(135deg, #f5c542 0%, #e9a810 100%); color: #0a0a0e; }
.btn-accent:hover { filter: brightness(1.05); box-shadow: 0 8px 24px rgba(245, 197, 66, 0.2); transform: translateY(-1px); }
.btn-accent:active { transform: translateY(0); }
.btn-ghost { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--t-2); }
.btn-ghost:hover { background: var(--glass-hover); color: var(--t-1); border-color: var(--border-hover); }

/* ═══ CHECKBOX / SETTINGS ═══ */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.checkbox-group label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--t-2); cursor: pointer; text-transform: none; letter-spacing: 0; margin-bottom: 0; }
.checkbox-group label input { accent-color: var(--accent); }
.checkbox-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--t-2); cursor: pointer; }
.checkbox-inline input { accent-color: var(--accent); }
.targets-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.display-settings { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.04); border-radius: 12px; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.setting-row:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(255,255,255,0.025); }
.setting-info { flex: 1; min-width: 0; }
.setting-name { font-size: 12px; font-weight: 600; color: var(--t-1); display: block; margin-bottom: 2px; }
.setting-desc { font-size: 10px; color: var(--t-3); }

/* ═══ PREMIUM SETTINGS TARGETS & SCHEDULER ═══ */
/* Fonts & Headings */
.settings-sidebar h2,
.settings-sidebar h3,
.panel-header h3,
.btn-sm,
.settings-tab,
.section-title-bar,
.sync-row-name,
.setting-name {
    font-family: var(--font-display) !important;
}

.targets-sections-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}
.targets-sections-container::-webkit-scrollbar,
.sync-connectors-list::-webkit-scrollbar {
    width: 6px;
}
.targets-sections-container::-webkit-scrollbar-track,
.sync-connectors-list::-webkit-scrollbar-track {
    background: transparent;
}
.targets-sections-container::-webkit-scrollbar-thumb,
.sync-connectors-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}
.targets-sections-container::-webkit-scrollbar-thumb:hover,
.sync-connectors-list::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 197, 66, 0.25);
}
.target-card-section {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 14px;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.target-card-section:hover {
    border-color: rgba(245, 197, 66, 0.15);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.section-title-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--t-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.section-title-bar svg {
    color: var(--accent);
    filter: drop-shadow(0 0 2px rgba(245, 197, 66, 0.3));
}
.target-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 20px;
}
.form-group-card {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    padding-bottom: 6px;
}
.form-group-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.form-group-card label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--t-2);
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.form-group-card .form-input-sm {
    max-width: 100%;
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: right;
    font-family: var(--font-mono);
}

/* Scheduler & Connectors list */
.sync-connectors-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}
.users-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 6px 10px;
    margin-top: 8px;
}
.sync-row {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.sync-row:hover {
    border-color: rgba(245, 197, 66, 0.15);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.sync-row.disabled {
    border-color: rgba(255, 255, 255, 0.02);
    background: rgba(0, 0, 0, 0.1);
}
.sync-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.sync-row-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.sync-row-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--t-1);
}
.sync-row-desc {
    font-size: 10.5px;
    color: var(--t-3);
    line-height: 1.4;
}
.sync-row-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 20px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: var(--t-3);
    transition: .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider {
    background-color: rgba(245, 197, 66, 0.12);
    border-color: rgba(245, 197, 66, 0.3);
}
.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(18px);
    background-color: var(--accent);
    box-shadow: 0 0 8px rgba(245, 197, 66, 0.4);
}

/* Sub-panel config - Fluid Flex Layout */
.sync-row-config {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 12px 14px;
    transition: opacity 0.28s ease, filter 0.28s ease;
}
.sync-row.disabled .sync-row-config {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(1);
}
.config-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.config-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
    flex: 1;
}
.config-item.form-inline-hours {
    min-width: 165px;
    flex: 1.2;
}
.config-item label {
    font-size: 9px;
    font-weight: 700;
    color: var(--t-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0;
}
.config-item select.form-input-sm,
.config-item input.form-input-sm {
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--t-1);
    outline: none;
}
.config-item select.form-input-sm:focus,
.config-item input.form-input-sm:focus {
    border-color: rgba(245, 197, 66, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

/* Time Hours selector */
.form-inline-hours .hours-range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sync-hour-input {
    width: 50px !important;
    text-align: center;
    padding: 8px 2px !important;
    font-family: var(--font-mono);
    font-weight: 600;
}
.hours-separator {
    font-size: 11px;
    color: var(--t-3);
    white-space: nowrap;
    font-weight: 500;
}


/* ═══ USER AND ROLE CARDS ═══ */
.users-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 4px; }
.user-card {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.user-card:hover {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    transform: translateY(-1px);
}
.user-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.user-card-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.user-card-login {
    font-size: 13px;
    font-weight: 700;
    color: var(--t-1);
}
.user-card-display {
    font-size: 11px;
    color: var(--t-2);
}
.user-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.user-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--t-3);
}
.user-meta-item svg {
    color: var(--t-4);
    flex-shrink: 0;
}
.user-card-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 2px;
}

.roles-grid { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 4px; }
.role-card { padding: 14px 16px; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.04); border-radius: 14px; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.role-card:hover { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); transform: translateY(-1px); }
.role-card-admin { border-color: rgba(245,197,66,0.12); background: rgba(245,197,66,0.012); }
.role-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.role-id { font-size: 12px; font-weight: 700; color: var(--t-1); font-family: var(--font-mono); }
.role-label { font-size: 11px; color: var(--t-3); margin-left: 8px; }
.role-blocks { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.block-tag { display: inline-flex; padding: 2px 7px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 5px; font-size: 10px; font-weight: 500; color: var(--t-2); }
.role-perms { font-size: 10px; color: var(--t-3); margin-top: 4px; }
.role-badge { display: inline-flex; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.role-admin   { background: rgba(245,197,66,0.08); color: var(--accent); border: 1px solid rgba(245,197,66,0.15); }
.role-manager { background: rgba(59,130,246,0.08); color: var(--blue); border: 1px solid rgba(59,130,246,0.15); }
.role-viewer  { background: rgba(148,163,184,0.08); color: #94a3b8; border: 1px solid rgba(148,163,184,0.15); }

/* ═══ MODAL ═══ */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 950;
    background: rgba(4, 5, 8, 0.4);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-backdrop.visible { opacity: 1; }
.modal-card {
    width: min(440px, 90vw); 
    background: rgba(10, 11, 18, 0.82) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 26px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.65);
    transform: translateY(16px) scale(0.97); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.modal-backdrop.visible .modal-card { transform: translateY(0) scale(1); }
.modal-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 16px; color: var(--t-1); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); }

.settings-user { display: flex; align-items: center; gap: 10px; padding: 8px 11px; background: var(--glass); border: 1px solid var(--border); border-radius: 7px; margin-bottom: 5px; }
.settings-user-name { font-size: 12px; font-weight: 600; }
.settings-user-role { font-size: 10px; color: var(--t-3); }
.settings-user-actions { margin-left: auto; display: flex; gap: 4px; }
.settings-user-btn { padding: 3px 8px; font-size: 10px; background: var(--glass); border: 1px solid var(--border); border-radius: 4px; color: var(--t-2); cursor: pointer; font-family: var(--font-primary); }
.settings-user-btn:hover { background: var(--glass-hover); }
.settings-user-btn.danger { color: var(--red); }

/* ═══ RELIABILITY ═══ */
.reliability-gauge { margin-top: auto; padding-top: 8px; }
.rg-track { height: 4px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; }
.rg-fill  { height: 100%; border-radius: 3px; background: var(--green); transition: width 0.8s var(--ease-out); box-shadow: 0 0 7px rgba(34,197,94,0.3); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1200px) {
    .buying-grid, .warehouse-grid, .procurement-grid, .finance-grid { grid-template-columns: repeat(2, 1fr); }
    .buying-chart, .buying-metrics { grid-column: 1 / -1; }
    .health-grid { grid-template-columns: repeat(2, 1fr); }
    .bp-layout {
        grid-template-columns: 1fr;
        height: auto !important;
        gap: 20px;
    }
    .top-buyers-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 300px) !important;
        height: auto !important;
    }
    .bp-compare {
        height: 380px !important;
    }
}
@media (max-width: 768px) {
    /* 1. LAYOUT & CARD WIDTH FIXES (PREVENT OVERFLOW) */
    :root {
        --card-padding: 10px !important;
    }

    /* Prevent focus auto-zooming on iOS */
    .login-input,
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="email"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Locked login viewport wrapper */
    .login-screen {
        touch-action: none !important;
        overflow: hidden !important;
    }
    
    .dashboard {
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .main-layout {
        min-width: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important; /* Use dynamic viewport height to prevent iOS address bar clipping */
        overflow: hidden !important; /* Disable vertical scroll on outer wrapper */
        display: flex !important;
        flex-direction: column !important;
    }
    
    .content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 100vh !important;
        height: 100dvh !important; /* Full height to allow scrolling under header/footer */
        -webkit-overflow-scrolling: touch !important;
    }
    
    .block {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important; /* Allow easier swipe transitions without heavy stickiness at start */
        overflow-y: auto !important; /* Vertical scroll individual columns */
        overflow-x: hidden !important; /* Prevent horizontal scroll within blocks */
        height: 100% !important;
        padding: calc(74px + env(safe-area-inset-top, 0px)) 8px calc(115px + env(safe-area-inset-bottom, 0px)) !important; /* Clear header & safe area on mobile */
        box-sizing: border-box !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        transition: none !important;
        touch-action: pan-x pan-y !important; /* Allow instant vertical and horizontal touch gestures without delays */
        content-visibility: auto;
        contain-intrinsic-size: 100dvh;
    }

    /* Hide middle collapsible feed "slider" column and scroll navigator */
    .sidebar-feed {
        display: none !important;
        width: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }
    .scroll-navigator {
        display: none !important;
    }

    /* Force all grid rows to span full column, except for warehouse KPI widgets */
    .buying-grid, .procurement-grid, .finance-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .buying-grid > *,
    .procurement-grid > *,
    .finance-grid > * {
        grid-column: 1 / -1 !important;
    }

    /* Fix display:contents collapsing on Safari/iOS by turning groups into grids on mobile */
    .finance-group {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        grid-column: 1 / -1 !important;
    }
    
    /* Force all child cards/charts inside finance-group to take full width and prevent grid columns auto-expansion */
    .finance-group > * {
        grid-column: 1 / -1 !important;
    }
    
    /* Stack traffic source cards vertically to prevent text/layout squishing */
    .traffic-cards-side {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    /* Stack visual container vertically on mobile inside warehouse split cards */
    .wh-split-visual-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    /* Make metrics take full width */
    .wh-split-metrics {
        width: 100% !important;
    }
    
    /* Stack warehouse rows vertically */
    .wh-row {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    /* Hide vertical separator and use a horizontal line or padding instead */
    .wh-sep {
        display: none !important;
    }
    
    /* Enhance wh-item text alignment and layouts on mobile to fit the card */
    .wh-item {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
        background: var(--pane-bg) !important;
        border: 1px solid var(--border) !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
    }
    
    .wh-item .wh-title-group {
        flex: 1 1 100% !important;
        margin-bottom: 2px !important;
    }
    
    .wh-item .wh-value-group {
        flex: 0 0 auto !important;
    }
    
    .wh-item .wh-progress-wrap {
        flex: 1 1 100% !important;
        margin: 4px 0 !important;
    }
    
    .wh-item .wh-month-group {
        flex: 0 0 auto !important;
    }
    
    .wh-item .wh-pct {
        margin-left: auto !important;
        padding-left: 10px !important;
    }
    
    .warehouse-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .warehouse-grid > * {
        grid-column: 1 / -1 !important;
    }
    .warehouse-grid > .card-kpi {
        grid-column: span 1 !important;
    }
    
    .card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Premium Dense Glass Overrides for Mobile Cards (matching PC style contrast) */
    .card,
    .card-kpi.featured,
    .card.card-chart::before {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
            rgba(13, 15, 24, 0.97) padding-box,
            linear-gradient(145deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 100%) border-box !important;
        backdrop-filter: blur(28px) saturate(170%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    }
    [data-theme="light"] .card,
    [data-theme="light"] .card-kpi.featured,
    [data-theme="light"] .card.card-chart::before {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.40) 100%) padding-box,
            rgba(253, 251, 247, 0.98) padding-box,
            linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(27, 24, 22, 0.12) 100%) border-box !important;
    }

    /* Stack all inline grids to single-column on mobile */
    .block-body div[style*="display: grid"],
    .block-body div[style*="display:grid"],
    .card div[style*="display: grid"],
    .card div[style*="display:grid"] {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
        row-gap: 8px !important;
    }

    /* Transform desktop left-border separators to top-border separators inside cards */
    .card div[style*="border-left"]:not(.wh-stock-breakdown) {
        border-left: none !important;
        border-top: 1px solid var(--border) !important;
        padding-left: 0 !important;
        padding-top: 10px !important;
        margin-top: 6px !important;
    }

    /* Premium Compact Grid Layouts for Stock Overview and Illiquid cards on mobile */
    .card-warehouse-premium .wh-stock-grid {
        grid-template-columns: 1fr 1fr !important;
        column-gap: 10px !important;
        row-gap: 8px !important;
        display: grid !important;
    }
    .card-warehouse-premium .wh-stock-breakdown {
        grid-column: span 2 !important;
        border-left: none !important;
        border-top: 1px solid var(--border) !important;
        padding-left: 0 !important;
        padding-top: 10px !important;
        margin-top: 6px !important;
    }
    .card-warehouse-premium .wh-stock-breakdown-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        margin-top: 6px !important;
    }
    .card-warehouse-premium .wh-stock-breakdown-list > div {
        padding: 5px 6px !important;
        gap: 6px !important;
    }
    .card-warehouse-premium .wh-kpi-subgrid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 10px !important;
        row-gap: 8px !important;
    }
    .card-warehouse-premium .wh-kpi-subgrid > div {
        min-width: 0 !important;
    }
    .card-warehouse-premium .wh-kpi-subgrid > div:first-child {
        grid-column: span 2 !important;
        border-bottom: 1px solid var(--border) !important;
        padding-bottom: 8px !important;
    }
    .card-warehouse-premium .wh-kpi-subgrid > div:nth-child(2) {
        grid-column: span 1 !important;
        border-right: 1px solid var(--border) !important;
        padding-right: 10px !important;
    }
    .card-warehouse-premium .wh-kpi-subgrid > div:nth-child(3) {
        grid-column: span 1 !important;
        border-left: none !important;
        padding-left: 0 !important;
    }
    .card-warehouse-premium {
        min-height: 135px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }
    .card-warehouse-premium > div:has(.wh-high-density-badge) {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        margin: 4px 0 !important;
        height: auto !important;
        overflow: visible !important;
    }
    .card-warehouse-premium .card-kpi-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
        margin-top: auto !important;
        padding-top: 6px !important;
    }
    .card-warehouse-premium .card-kpi-bar .bar-track {
        width: 100% !important;
        flex: none !important;
    }
    .card-warehouse-premium .card-kpi-bar .bar-target {
        margin-top: 2px !important;
        font-size: 8.5px !important;
    }
    #chartTurnover {
        height: 220px !important;
    }

    /* Prevent text wrapping issues inside pills, cash labels, table values, and meta elements */
    .status-pill,
    .wh-rank-capsule,
    .kpi-delta,
    .finance-kassa-row .kassa-label,
    .finance-kassa-row .kassa-val,
    .finance-kassa-details span,
    .data-table-sm th,
    .data-table-sm td:not(.notes-column):not(.name-column),
    .card-kpi-sub {
        white-space: nowrap !important;
    }
    .wh-bottleneck-badge {
        white-space: normal !important;
        display: inline-block !important;
        font-size: 8.5px !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }
    .finance-kassa-details {
        padding-left: 4px !important;
        font-size: 9.5px !important;
    }
    .finance-fop-share-row .fop-pct-our {
        font-size: 18px !important;
    }
    .finance-fop-share-row .fop-pct-david {
        font-size: 15px !important;
    }

    /* Top buyers grid responsive adjustment */
    .top-buyers-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        height: auto !important;
        gap: 8px !important;
    }

    /* bp-compare auto-height & mobile limits */
    .bp-compare {
        height: auto !important;
        min-height: 0 !important;
        max-height: 340px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .bp-bars {
        flex: 1 !important;
    }

    /* Table horizontal scroll container */
    #kcTableWrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Goals / highlights vertical stacking overrides */
    .buying-highlights-ribbon,
    .kc-totals-ribbon,
    .goals-row {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
    }

    /* Symmetric 2-column KPI layout for mobile */
    .pb-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .pb-kpi-grid > * {
        grid-column: span 1 !important;
    }
    .pb-kpi-grid > .featured {
        grid-column: span 2 !important;
    }

    /* Spacing & Typography Optimizations for Mobile */
    .block-header h2 {
        font-size: 18px !important;
        letter-spacing: -0.01em !important;
    }
    .section-head h3,
    .card-chart-head h3 {
        font-size: 11px !important;
        letter-spacing: 0.05em !important;
    }
    .card-kpi {
        padding: 8px 10px !important;
    }
    .card-kpi-label {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }
    .card-kpi-value {
        font-size: 20px !important;
        line-height: 1.1 !important;
    }
    .card-kpi-value.big {
        font-size: 22px !important;
        line-height: 1.1 !important;
    }
    .card-kpi-sub {
        font-size: 8.5px !important;
        margin-top: 2px !important;
    }
    .wh-count {
        font-size: 22px !important;
    }
    .data-table td {
        padding: 5px 8px !important;
    }
    .data-table th {
        padding: 5px 8px !important;
    }
    .data-table-sm td {
        padding: 3px 6px !important;
    }
    .data-table-sm th {
        padding: 3px 6px !important;
    }
    .goals-bar {
        padding: 6px 10px !important;
    }
    .goal-item {
        padding: 4px 6px !important;
    }
    .goal-item .gi-value {
        font-size: 15px !important;
    }
    .kpi-sparkline {
        height: 25px !important;
        margin-top: 4px !important;
    }

    /* 2. BLOCK HEADER & TABS SWITCHER SCROLL FIX */
    .block-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        height: auto !important;
        margin-bottom: 12px !important;
    }
    .finance-tabs {
        margin-left: 0 !important;
        width: 100% !important;
        display: flex !important;
        gap: 3px !important;
        padding: 3px !important;
        position: relative !important;
        z-index: 1 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 20px !important;
    }
    [data-theme="light"] .finance-tabs {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(0, 0, 0, 0.06) !important;
    }
    .finance-tabs .tab-indicator {
        position: absolute !important;
        top: 3px !important;
        bottom: 3px !important;
        background: var(--tab-indicator-bg, rgba(255, 255, 255, 0.12)) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 17px !important;
        transition: left 0.28s cubic-bezier(0.25, 1, 0.5, 1), width 0.28s cubic-bezier(0.25, 1, 0.5, 1) !important;
        z-index: 1 !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }
    [data-theme="light"] .finance-tabs .tab-indicator {
        background: #ffffff !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
    .finance-tab {
        flex: 1 !important;
        text-align: center !important;
        padding: 6px 4px !important;
        font-size: 11px !important;
        font-family: var(--font-primary) !important;
        font-weight: 600 !important;
        color: var(--t-3) !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        transition: color 0.25s !important;
        position: relative !important;
        z-index: 2 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .finance-tab.active {
        color: var(--t-1) !important;
    }

    /* 3. TELEGRAM-LIKE BOTTOM CAPSULE NAVIGATION */
    .sidebar {
        position: fixed !important;
        bottom: 8px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        height: 62px !important;
        margin: 0 !important;
        border-radius: 24px !important;
        z-index: 1000 !important;
        flex-direction: row !important;
        overflow: visible !important;
        box-shadow: 
            0 15px 35px rgba(0, 0, 0, 0.45),
            inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    }
    [data-theme="light"] .sidebar {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.72) 100%) padding-box,
                    rgba(27, 24, 22, 0.06) border-box !important;
        border: 1px solid rgba(27, 24, 22, 0.08) !important;
        box-shadow: 
            0 15px 35px -5px rgba(27, 24, 22, 0.16),
            inset 0 1.5px 1px rgba(255, 255, 255, 0.95) !important;
    }

    .sidebar .sf-header,
    .sidebar .sf-footer {
        display: none !important;
    }

    .sidebar-folders {
        flex-direction: row !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 12px !important;
        justify-content: center !important;
        align-items: center !important;
        background: transparent !important;
        border-right: none !important;
    }

    .sf-nav {
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
    }

    .sf-item {
        flex: 1 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 2px 0 !important;
        z-index: 2 !important;
        text-align: center !important;
        -webkit-touch-callout: none !important; /* Disable iOS native long-press popup menu */
        -webkit-user-select: none !important;
        user-select: none !important;
        touch-action: none !important; /* Disable double-tap/gesture delays for instant click events */
        transition: color 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Smooth color morphing */
    }

    .sf-bubble {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }
    
    .sf-bubble svg {
        width: 20px !important;
        height: 20px !important;
        color: inherit !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Synchronized with navigation indicator */
    }

    /* Spring Magnifier active state on bottom tab icons */
    .sf-item.active .sf-bubble svg {
        transform: scale(1.25) !important;
    }

    .sf-label {
        font-family: 'Outfit', 'Inter', sans-serif !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        color: var(--t-3) !important;
        margin-top: 1px !important;
        opacity: 0.75;
        transition: color 0.28s cubic-bezier(0.16, 1, 0.3, 1), font-weight 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .sf-item.active .sf-label {
        opacity: 1;
        font-weight: 700 !important;
    }

    /* Active Highlight styles matching standard accent colors */
    .sf-item[data-section="buying"].active {
        color: #3b82f6 !important;
    }
    .sf-item[data-section="buying"].active .sf-label {
        color: #3b82f6 !important;
    }
    .sf-item[data-section="buying"].active .sf-bubble {
        color: #3b82f6 !important;
    }

    .sf-item[data-section="warehouse"].active {
        color: #f59e0b !important;
    }
    .sf-item[data-section="warehouse"].active .sf-label {
        color: #f59e0b !important;
    }
    .sf-item[data-section="warehouse"].active .sf-bubble {
        color: #f59e0b !important;
    }

    .sf-item[data-section="procurement"].active {
        color: #ef4444 !important;
    }
    .sf-item[data-section="procurement"].active .sf-label {
        color: #ef4444 !important;
    }
    .sf-item[data-section="procurement"].active .sf-bubble {
        color: #ef4444 !important;
    }

    .sf-item[data-section="finance"].active {
        color: #22c55e !important;
    }
    .sf-item[data-section="finance"].active .sf-label {
        color: #22c55e !important;
    }
    .sf-item[data-section="finance"].active .sf-bubble {
        color: #22c55e !important;
    }

    /* 4. ACTIVE BUBBLE SLIDING HIGHLIGHT (LIQUID GLASS) */
    .sf-nav-indicator {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 25% !important;
        height: 100% !important;
        z-index: 1 !important;
        pointer-events: none !important;
        transform-origin: left center !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Enabled for smooth fluid floating transition */
    }
    
    .sf-nav-indicator-glow {
        margin: 0 4px !important;
        height: 50px !important;
        position: absolute !important;
        top: 6px !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        border-radius: 25px !important;
        
        /* 3D Glass Morph Background */
        background: linear-gradient(180deg, 
            rgba(255, 255, 255, 0.12) 0%, 
            rgba(255, 255, 255, 0.03) 40%, 
            rgba(255, 255, 255, 0.01) 60%, 
            rgba(255, 255, 255, 0.08) 100%
        ) !important;
        
        /* Specular borders & shadows */
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        box-shadow: 
            0 8px 24px rgba(0, 0, 0, 0.45),
            inset 0 1.5px 2px rgba(255, 255, 255, 0.25),
            inset 0 -1.5px 2px rgba(0, 0, 0, 0.5) !important;
        
        overflow: hidden;
        /* Disabled nested backdrop blurs on indicator capsule to eliminate severe iOS/Safari rendering lag */
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
    }

    /* Chromatic Aberration Top Edge reflection */
    .sf-nav-indicator-glow::before {
        display: none !important;
    }
    
    /* Glass Shimmer dynamic scroll reflection overlay */
    .sf-nav-indicator-glow::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 400% !important;
        height: 100% !important;
        background: linear-gradient(
            115deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.02) 20%,
            rgba(255, 255, 255, 0.22) 40%,
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0.35) 55%,
            rgba(255, 255, 255, 0.22) 60%,
            rgba(255, 255, 255, 0.02) 80%,
            rgba(255, 255, 255, 0) 100%
        ) !important;
        transform: translate3d(calc(-1 * var(--shimmer-L, 0) * 100%), 0, 0) !important;
        transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
        pointer-events: none !important;
        z-index: 5 !important;
    }
    [data-theme="light"] .sf-nav-indicator-glow::after {
        background: linear-gradient(
            115deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.08) 20%,
            rgba(255, 255, 255, 0.35) 40%,
            rgba(255, 255, 255, 0.55) 45%,
            rgba(255, 255, 255, 0.70) 50%,
            rgba(255, 255, 255, 0.55) 55%,
            rgba(255, 255, 255, 0.35) 60%,
            rgba(255, 255, 255, 0.08) 80%,
            rgba(255, 255, 255, 0) 100%
        ) !important;
    }
    .sf-nav.is-swiping .sf-nav-indicator-glow::after {
        transition: none !important; /* Zero latency during manual swipes */
    }

    [data-theme="light"] .sf-nav-indicator-glow {
        background: linear-gradient(180deg, 
            rgba(255, 255, 255, 0.6) 0%, 
            rgba(255, 255, 255, 0.2) 40%, 
            rgba(255, 255, 255, 0.1) 60%, 
            rgba(255, 255, 255, 0.5) 100%
        ) !important;
        border: 1px solid rgba(var(--indicator-accent, 27, 24, 22), 0.18) !important;
        box-shadow: 
            0 4px 12px rgba(27, 24, 22, 0.08),
            inset 0 1.5px 2px rgba(255, 255, 255, 0.8),
            inset 0 -1px 1px rgba(0, 0, 0, 0.05),
            0 2px 8px rgba(var(--indicator-accent, 27, 24, 22), 0.05) !important;
    }

    .sf-nav:has(.sf-item[data-section="buying"].active) {
        --indicator-accent: 59, 130, 246; /* #3b82f6 */
    }
    .sf-nav:has(.sf-item[data-section="warehouse"].active) {
        --indicator-accent: 245, 158, 11; /* #f59e0b */
    }
    .sf-nav:has(.sf-item[data-section="procurement"].active) {
        --indicator-accent: 239, 68, 68; /* #ef4444 */
    }
    .sf-nav:has(.sf-item[data-section="finance"].active) {
        --indicator-accent: 34, 197, 94; /* #22c55e */
    }

    /* Badge/Notification styling on bottom tabs */
    .sf-badge {
        position: absolute !important;
        top: 2px !important;
        right: calc(50% - 18px) !important;
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(15, 18, 30, 0.95) !important;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        padding: 0.5px 4px !important;
        border-radius: 10px !important;
        min-width: 12px !important;
        z-index: 10 !important;
    }
    [data-theme="light"] .sf-badge {
        border-color: #ffffff !important;
    }

    /* 5. SETTINGS SCREEN MOBILE FIXES */
    .settings-sidebar {
        width: 95vw !important;
        height: 85vh !important;
        padding: 16px !important;
        border-radius: 20px !important;
    }
    .settings-tabs {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .settings-tab {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
    .setting-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .setting-row label {
        align-self: flex-start !important;
    }

    /* ═══ 6. PREMIUM VOLUMETRIC GLASS & DEPTH OVERRIDES (MOBILE) ═══ */

    /* Volumetric Viewport Depth Blurs (optimized for high performance mobile depth) */
    .viewport-blur-top {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(86px + env(safe-area-inset-top, 0px)) !important;
        z-index: 99 !important;
        pointer-events: none !important;
        background: linear-gradient(to bottom, 
            rgba(11, 13, 21, 0.92) 0%, 
            rgba(11, 13, 21, 0.6) 45%, 
            rgba(11, 13, 21, 0) 100%
        ) !important;
        backdrop-filter: blur(14px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
        -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.85) 45%, transparent 100%) !important;
        mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.85) 45%, transparent 100%) !important;
        will-change: opacity;
    }

    [data-theme="light"] .viewport-blur-top {
        background: linear-gradient(to bottom, 
            rgba(249, 246, 240, 0.92) 0%, 
            rgba(249, 246, 240, 0.6) 45%, 
            rgba(249, 246, 240, 0) 100%
        ) !important;
    }

    .viewport-blur-bottom {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100px !important; /* Cozy height, doesn't block dashboard cards */
        z-index: 99 !important; /* sit above cards but under floating navigation capsule (1000) */
        pointer-events: none !important;
        background: linear-gradient(to top, 
            rgba(11, 13, 21, 0.82) 0%, 
            rgba(11, 13, 21, 0.45) 55%, 
            rgba(11, 13, 21, 0) 100%
        ) !important;
        backdrop-filter: blur(12px) saturate(120%) !important; /* Mild fast-to-render blur */
        -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
        will-change: transform, opacity;
    }

    [data-theme="light"] .viewport-blur-bottom {
        background: linear-gradient(to top, 
            rgba(249, 246, 240, 0.82) 0%, 
            rgba(249, 246, 240, 0.45) 55%, 
            rgba(249, 246, 240, 0) 100%
        ) !important;
    }

    /* Fixed absolute header alignment to scroll cards behind it */
    .header {
        position: fixed !important;
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        left: 8px !important;
        right: 8px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        height: 48px !important;
        border-radius: 24px !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01)) !important;
        backdrop-filter: blur(24px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 
            0 20px 40px rgba(0,0,0,0.6), 
            inset 0 1px 1px rgba(255,255,255,0.4), 
            inset 0 -1px 1px rgba(0,0,0,0.2) !important;
        z-index: 100 !important;
        overflow: visible !important; /* Allow pseudo shadow visibility */
        transform: translate3d(0, 0, 0) !important; /* Force GPU hardware-acceleration & Webkit stacking context on iOS/Safari */
    }
    .header::before {
        display: none !important;
    }
    .header::after {
        content: '';
        position: absolute;
        top: 6px; left: 8px; right: 8px; bottom: -8px;
        background: rgba(0, 0, 0, 0.45);
        filter: blur(15px);
        z-index: -1;
        pointer-events: none;
        border-radius: 24px;
    }
    [data-theme="light"] .header {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.65) 100%) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
        box-shadow: 
            0 18px 40px rgba(27, 24, 22, 0.15),
            0 6px 12px rgba(27, 24, 22, 0.06),
            inset 0 2px 2px rgba(255, 255, 255, 1),
            inset 0 -1.5px 2.5px rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme="light"] .header::after {
        background: rgba(27, 24, 22, 0.18) !important;
        filter: blur(15px) !important;
    }

    /* Centered logo inside mobile header container - Fix: prevent double logo */
    .mobile-sf-header .sf-logo {
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }
    .mobile-sf-header .logo-dark {
        display: block !important;
    }
    .mobile-sf-header .logo-light {
        display: none !important;
    }
    [data-theme="light"] .mobile-sf-header .logo-dark {
        display: none !important;
    }
    [data-theme="light"] .mobile-sf-header .logo-light {
        display: block !important;
    }
    #btnSettingsMobile {
        display: none !important;
    }

    /* Expand layouts for mobile edge scrolls and set clear padding offsets */
    .content {
        height: 100vh !important;
        height: 100dvh !important; /* Use dynamic viewport height to prevent iOS address bar clipping */
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        -ms-overflow-style: none !important; /* IE/Edge */
        scrollbar-width: none !important; /* Firefox */
        touch-action: pan-x !important; /* Disable double-tap and gesture delay for instant swipe start */
    }
    .content::-webkit-scrollbar {
        display: none !important; /* Safari/Chrome */
    }



    /* Reset all outline, tap highlights and hover background colors on mobile elements */
    .sidebar, .sidebar-folders, .sf-nav, .sf-item, .sf-bubble, .sf-item *, .sf-bubble * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
        outline: none !important;
    }
    .sf-item:focus, .sf-item:focus-visible, .sf-bubble:focus, .sf-bubble:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Rigorous CSS highlight overrides for mobile to guarantee no dark shadows/underlays appear on pointer release/active touch */
    body .sidebar .sf-item,
    body .sidebar .sf-item:hover,
    body .sidebar .sf-item:active,
    body .sidebar .sf-item.active,
    body .sidebar .sf-item.is-pressed,
    body .sidebar .sf-item:focus,
    body[data-theme="light"] .sidebar .sf-item,
    body[data-theme="light"] .sidebar .sf-item:hover,
    body[data-theme="light"] .sidebar .sf-item:active,
    body[data-theme="light"] .sidebar .sf-item.active,
    body[data-theme="light"] .sidebar .sf-item.is-pressed,
    body[data-theme="light"] .sidebar .sf-item:focus {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    body .sidebar .sf-bubble,
    body .sidebar .sf-item:hover .sf-bubble,
    body .sidebar .sf-item:active .sf-bubble,
    body .sidebar .sf-item.active .sf-bubble,
    body .sidebar .sf-item.is-pressed .sf-bubble,
    body[data-theme="light"] .sidebar .sf-bubble,
    body[data-theme="light"] .sidebar .sf-item:hover .sf-bubble,
    body[data-theme="light"] .sidebar .sf-item:active .sf-bubble,
    body[data-theme="light"] .sidebar .sf-item.active .sf-bubble,
    body[data-theme="light"] .sidebar .sf-item.is-pressed .sf-bubble {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
    }

    /* Premium 3D bubble translation magnifying transitions */
    .sf-bubble {
        transform: translateY(0) scale(1) !important;
        transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Snappier 150ms transition, smoothly fading active glow filters */
        transform-style: preserve-3d !important;
        perspective: 800px !important;
    }
    .sf-item.active .sf-bubble {
        transform: translateY(0) !important;
    }
    .sf-item.is-pressed .sf-bubble,
    .sf-item:active .sf-bubble {
        filter: drop-shadow(0 0 10px rgba(var(--indicator-accent, 255, 255, 255), 0.6)) !important;
    }

    /* Disable pressed indicator bulge and shadow changes on mobile to prevent flashing dark shadows */
    .sf-nav.is-pressing .sf-nav-indicator-glow,
    .sf-nav:active .sf-nav-indicator-glow {
        transform: none !important;
        transition: none !important;
        box-shadow: 
            0 8px 24px rgba(0, 0, 0, 0.45),
            inset 0 1.5px 2px rgba(255, 255, 255, 0.25),
            inset 0 -1.5px 2px rgba(0, 0, 0, 0.5) !important;
    }

    /* Volumetric Liquid Glass Sidebar Navigation Capsule */
    .sidebar {
        position: fixed !important;
        bottom: 8px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        height: 62px !important;
        margin: 0 !important;
        border-radius: 24px !important;
        z-index: 1000 !important;
        flex-direction: row !important;
        overflow: visible !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01)) !important;
        backdrop-filter: blur(24px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 
            0 20px 40px rgba(0, 0, 0, 0.6), 
            inset 0 1px 1px rgba(255, 255, 255, 0.4), 
            inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
    }
    .sidebar::before {
        display: none !important;
    }
    [data-theme="light"] .sidebar {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.65) 100%) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
        box-shadow: 
            0 18px 40px rgba(27, 24, 22, 0.15),
            0 6px 12px rgba(27, 24, 22, 0.06),
            inset 0 2px 2px rgba(255, 255, 255, 1),
            inset 0 -1.5px 2.5px rgba(0, 0, 0, 0.04) !important;
    }

    /* Ambient Depth Shadow underneath the bottom sidebar nav capsule */
    .sidebar::after {
        content: '' !important;
        position: absolute !important;
        top: -8px !important; left: 8px !important; right: 8px !important; bottom: 6px !important;
        background: rgba(0, 0, 0, 0.45) !important;
        filter: blur(15px) !important;
        z-index: -1 !important;
        pointer-events: none !important;
        border-radius: 24px !important;
    }
    [data-theme="light"] .sidebar::after {
        background: rgba(27, 24, 22, 0.18) !important;
        filter: blur(15px) !important;
    }

    /* Heights and Scroll limits for long card contents */
    #packerTableWrap::-webkit-scrollbar,
    .fops-scroll-container::-webkit-scrollbar {
        width: 6px !important;
    }
    #packerTableWrap::-webkit-scrollbar-track,
    .fops-scroll-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.02) !important;
        border-radius: 4px !important;
    }
    #packerTableWrap::-webkit-scrollbar-thumb,
    .fops-scroll-container::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.16) !important;
        border-radius: 4px !important;
        border: 1px solid transparent !important;
        transition: background 0.2s !important;
    }
    #packerTableWrap::-webkit-scrollbar-thumb:hover,
    .fops-scroll-container::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.28) !important;
    }

    /* Adapt grids and table margins to fit without overflow */
    .buying-grid, .warehouse-grid, .procurement-grid, .finance-grid {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .card {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .apexcharts-canvas {
        max-width: 100% !important;
    }
    .kc-enhanced-table {
        table-layout: auto !important;
        width: 100% !important;
    }
    .kc-enhanced-table th, .kc-enhanced-table td {
        padding: 6px 4px !important;
        font-size: 9.5px !important;
    }

    /* Prevent wrapping of text, values, numbers and labels on mobile */
    .card-kpi-value,
    .card-kpi-label,
    .card-kpi-sub,
    .hl-value,
    .hl-label,
    .hl-meta-label,
    .hl-meta-value,
    .bp-compare-title,
    .bp-leg,
    .status-pill,
    .badge,
    .kpi-delta,
    .block-meta,
    .finance-tab {
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
    }

    /* Smooth typographic styling on mobile */
    .card-kpi-label {
        font-size: 9px !important;
        letter-spacing: 0.05em !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
        text-transform: uppercase !important;
    }
    .card-kpi-value {
        font-size: 19px !important;
        letter-spacing: -0.02em !important;
        font-weight: 700 !important;
        margin: 4px 0 !important;
        line-height: 1.1 !important;
    }
    .card-kpi-value.big {
        font-size: 21px !important;
    }
    .card-kpi-sub {
        font-size: 8px !important;
        margin-top: 2px !important;
    }
    .highlight-item {
        min-height: auto !important;
        padding: 8px 10px !important;
        gap: 8px !important;
    }
    .hl-value {
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }
    .hl-label {
        font-size: 8.5px !important;
        margin-top: 0 !important;
    }
    .hl-meta-table {
        margin-top: 4px !important;
        padding-top: 4px !important;
        gap: 2px !important;
    }
    .hl-meta-label, .hl-meta-value {
        font-size: 8.5px !important;
    }

    /* Scrollable tables inside blocks with text wrapping disabled */
    .users-table-wrap,
    .fops-scroll-container,
    #kcTableWrap,
    #packerTableWrap,
    .card:has(table),
    .card-wide:has(table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }
    .data-table th, 
    .data-table td, 
    .data-table-sm th, 
    .data-table-sm td,
    .data-table-sm th *, 
    .data-table-sm td *,
    table th,
    table td {
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        max-width: 150px !important; /* Cap table cell width so scroll snaps quickly */
    }

    /* Hide footer on mobile */
    .footer {
        display: none !important;
    }

    /* Collapsible containers on mobile to prevent layout scrolling traps */
    .collapsible-mobile-container {
        position: relative !important;
        transition: max-height 0.4s ease-in-out !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    .collapsible-mobile-container.collapsed {
        max-height: 180px !important;
        overflow: hidden !important;
    }
    .collapsible-mobile-container.collapsed::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 50px;
        background: linear-gradient(to top, var(--bg-1) 15%, rgba(15, 15, 19, 0) 100%) !important;
        pointer-events: none;
        z-index: 5;
    }
    [data-theme="light"] .collapsible-mobile-container.collapsed::after {
        background: linear-gradient(to top, var(--bg-1) 15%, rgba(244, 239, 230, 0) 100%) !important;
    }

    .collapsible-mobile-btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 8px 0 !important;
        margin-top: 10px !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        color: var(--accent) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        cursor: pointer !important;
        transition: background 0.2s, border-color 0.2s !important;
    }
    [data-theme="light"] .collapsible-mobile-btn {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%) !important;
        border: 1px solid rgba(27, 24, 22, 0.06) !important;
        color: var(--accent) !important;
    }

    /* iOS Native Momentum Scroll Support */
    .block {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Disable layout cards fade-in pop transition on mobile to prevent delayed blur flickers */
    [data-animate="up"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
@media (max-width: 480px) {
    .card-kpi-value { font-size: 17px !important; }
    .goals-row { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ PRINT ═══ */
@media print {
    .goals-bar { break-inside: avoid; }
    .block { break-inside: avoid; page-break-inside: avoid; }
}

/* ═══ NEW: STRATEGIC CEO REDESIGN ═══ */
.kpi-sparkline {
    position: relative;
    margin-left: calc(-1 * var(--card-padding)) !important;
    margin-right: calc(-1 * var(--card-padding)) !important;
    margin-bottom: calc(-1 * var(--card-padding)) !important;
    height: 48px;
    pointer-events: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.kpi-sparkline *,
.apexcharts-canvas,
.apexcharts-canvas * {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.kpi-sparkline .apexcharts-canvas,
.kpi-sparkline .apexcharts-canvas svg {
    width: 100% !important;
}
.apexcharts-background,
rect[class*="apexcharts-background"] {
    fill: transparent !important;
}
.kpi-sparkline .apexcharts-legend {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.kpi-sparkline .apexcharts-xcrosshairs,
.kpi-sparkline .apexcharts-ycrosshairs,
.kpi-sparkline .apexcharts-grid-borders,
.kpi-sparkline .apexcharts-gridline {
    display: none !important;
    stroke: transparent !important;
    stroke-width: 0 !important;
    opacity: 0 !important;
}
/* No opacity hover layer rules to avoid browser compositor bugs */
.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: 4px;
}
.kpi-delta.up {
    color: var(--green);
    background: var(--green-dim);
}
.kpi-delta.down {
    color: var(--red);
    background: var(--red-dim);
}

/* P&L CASCADE WIDGET */
.pnl-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0;
}
.pnl-flow-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pnl-flow-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}
.pnl-flow-label {
    font-weight: 600;
    color: var(--t-2);
}
.pnl-flow-value {
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--t-1);
}
.pnl-flow-bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    position: relative;
    overflow: hidden;
}
.pnl-flow-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1.2s var(--ease-out);
}

/* Tabs inside Finance block */
.finance-tabs {
    display: flex;
    gap: 3px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    margin-left: 12px;
    position: relative;
    z-index: 1;
}
[data-theme="light"] .finance-tabs {
    background: var(--bg-4);
}
.finance-tabs .tab-indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 0;
    background: var(--tab-indicator-bg, var(--accent-dim));
    border: var(--tab-indicator-border, none);
    border-radius: 6px;
    transition: left 0.28s cubic-bezier(0.25, 1, 0.5, 1), width 0.28s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
}
.finance-tab {
    padding: 3px 10px;
    font-size: 10px;
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--t-3);
    background: transparent !important;
    border: none !important;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}
.finance-tab:hover { color: var(--t-2); }
.finance-tab.active {
    color: var(--tab-active-color, var(--t-2)) !important;
}

/* Traffic Toggle Switcher */
.tf-toggle-btn:hover {
    color: var(--clr-text, #fff);
}
.tf-toggle-btn.active {
    background: var(--clr-accent, #f5c542) !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(245,197,66,0.3);
}

/* ═══ Consolidated Traffic Analytics edge-to-edge Panel ═══ */
.traffic-analytics-container {
    padding-top: 8px;
    width: 100%;
}
.traffic-analytics-layout {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

/* Precision Slate Panel (Left Column) - Transparent & Spacious */
.traffic-chart-side {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0 4px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    box-shadow: none;
    backdrop-filter: none;
}

.traffic-cards-side {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
}

/* Source card — liquid glass with a brand accent rail on the left */
.mini-source-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        rgba(13, 15, 24, 0.48) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-xl);
    padding: 16px 16px 16px 19px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-apple);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.20),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 4px 15px rgba(0, 0, 0, 0.18),
        0 20px 48px -8px rgba(0, 0, 0, 0.40) !important;
}
.mini-source-card::before {
    content: '';
    position: absolute;
    top: 14px; bottom: 14px; left: 0;
    width: 3px; border-radius: 0 3px 3px 0;
    background: rgb(var(--glow-rgb));
    box-shadow: none !important;
}

.mini-source-card.fb-card { --glow-rgb: 24, 119, 242; }
.mini-source-card.tt-card { --glow-rgb: 0, 242, 234; }
.mini-source-card.gg-card { --glow-rgb: 245, 197, 66; }

.mini-source-card:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) padding-box,
        rgba(18, 20, 32, 0.58) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 6px 20px rgba(0, 0, 0, 0.22),
        0 28px 56px -8px rgba(0, 0, 0, 0.50) !important;
}

.mini-card-head-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.mini-card-logo-container {
    width: 30px;
    height: 30px;
    border-radius: 50% !important; /* Circle logo */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s, border-color 0.3s;
}
.mini-source-card:hover .mini-card-logo-container {
    background: rgba(var(--glow-rgb), 0.12);
    border-color: rgba(var(--glow-rgb), 0.3);
}
.mini-card-spend-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mini-card-spend-label {
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t-3);
}
.mini-card-spend-amount {
    font-size: 26px;
    font-weight: 800;
    font-family: 'Outfit', 'Inter', sans-serif;
    color: var(--t-1);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.mini-card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    width: 100%;
    margin: 4px 0;
}
.mini-card-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    margin-top: 4px;
}
.mini-card-stat-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}
.mini-card-stat-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-3);
    font-weight: 600;
}
.mini-card-stat-value {
    color: var(--t-2);
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
}

/* ═══ Elegant Borderless E-Commerce Indicator Bar (5 Columns) ═══ */
.traffic-dashboard-header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
    padding-bottom: 8px;
}
.traffic-db-widget {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: relative;
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
    transition: all 0.22s ease;
}
.traffic-db-widget:hover {
    background: rgba(255, 255, 255, 0.025);
}
.traffic-db-widget-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.traffic-db-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--t-3);
}
.traffic-db-icon {
    opacity: 0.5;
    color: var(--t-3);
    display: flex;
    align-items: center;
}
.traffic-db-value {
    font-size: 19px; /* Big, expensive-looking values */
    font-weight: 800;
    font-family: 'Outfit', 'Inter', sans-serif;
    color: var(--t-1);
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.traffic-db-value.spend {
    color: var(--blue) !important;
    text-shadow: 0 0 15px var(--blue-glow) !important;
}
.traffic-db-value.revenue {
    color: var(--green) !important;
    text-shadow: 0 0 15px var(--green-glow) !important;
}
.traffic-db-value.margin {
    color: var(--purple) !important;
    text-shadow: 0 0 15px var(--purple-glow) !important;
}
.traffic-db-value.netprofit {
    color: var(--pink) !important;
    text-shadow: 0 0 15px var(--pink-glow) !important;
}
.traffic-db-value.roas {
    color: var(--yellow) !important;
    text-shadow: 0 0 15px var(--yellow-glow) !important;
}
.traffic-db-sub {
    font-size: 8px;
    color: var(--t-3);
    font-weight: 500;
    margin-top: 1px;
}

/* Monospaced Currency Detail */
.currency-symbol {
    font-size: 0.85em;
    font-weight: 600;
    opacity: 0.8;
    margin-left: 1px;
    margin-right: 1px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

@media (max-width: 1200px) {
    .traffic-dashboard-header {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

@media (max-width: 992px) {
    .traffic-analytics-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .traffic-chart-left-side,
    .traffic-chart-right-side {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .traffic-dashboard-header {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ═══ ANALYTICS HUB & BALANCES ═══ */
.team-perf-bar-wrapper {
    transition: transform 0.2s ease, opacity 0.2s ease;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.02);
}
.team-perf-bar-wrapper:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(167, 139, 250, 0.15);
}
.low-balance-item {
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.low-balance-item:hover {
    background-color: rgba(239, 68, 68, 0.07) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.low-balance-feed-wrap::-webkit-scrollbar {
    width: 6px;
}
.low-balance-feed-wrap::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}
.low-balance-feed-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
.low-balance-feed-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.data-table-sm th {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--t-3);
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}

/* ═══ TRAFFIC SUB-CHARTS (Horizontal Funnel & Spend Allocation) ═══ */
.traffic-sub-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Symmetrical split! */
    gap: 16px;
    margin-top: 20px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    padding-top: 16px;
}

.sub-chart-card {
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px 20px;
    height: 250px; /* Fixed identical height for absolute symmetry */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01);
    transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sub-chart-card:hover {
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.022);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.sub-chart-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--t-3);
    display: block;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 8px;
}

/* Call Center Table Improvements */
/* Premium Call Center Layout & Cards */
.kc-totals-ribbon {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 12px;
    margin-bottom: 24px;
    width: 100%;
}

.kc-total-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.22s ease-in-out;
    backdrop-filter: blur(8px);
}

.kc-total-card:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.kc-total-card .kc-card-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t-3, #94a3b8);
    font-weight: 500;
}

.kc-total-card .kc-card-value {
    font-size: 19px;
    font-weight: 600;
    color: var(--t-1, #f8fafc);
    font-family: 'Outfit', 'Inter', sans-serif;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.kc-total-card .kc-card-value small {
    font-size: 12px;
    font-weight: 500;
    color: var(--t-3, #94a3b8);
}

/* Enhancing the KC Table */
.kc-enhanced-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.kc-enhanced-table th {
    padding: 10px 12px;
    color: var(--t-3, #94a3b8);
    font-weight: 500;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.kc-enhanced-table th:not(:first-child) {
    text-align: center !important;
}

.kc-enhanced-table tbody tr {
    transition: all 0.2s ease;
}

.kc-enhanced-table tbody tr td {
    padding: 11px 12px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
}

.kc-enhanced-table tbody tr td:not(:first-child) {
    text-align: center !important;
}

.kc-enhanced-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.015) !important;
}

.kc-enhanced-table tfoot td {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.005);
}

.kc-enhanced-table tfoot td:not(:first-child) {
    text-align: center !important;
}

[data-theme="light"] .kc-total-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(27, 24, 22, 0.08) !important;
}
[data-theme="light"] .kc-total-card:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(27, 24, 22, 0.15) !important;
    box-shadow: 0 4px 12px rgba(27, 24, 22, 0.04) !important;
}
[data-theme="light"] .kc-enhanced-table th {
    border-bottom: 1px solid rgba(27, 24, 22, 0.08) !important;
}
[data-theme="light"] .kc-enhanced-table tbody tr td {
    border-bottom: 1px solid rgba(27, 24, 22, 0.04) !important;
}
[data-theme="light"] .kc-enhanced-table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.015) !important;
}
[data-theme="light"] .kc-enhanced-table tfoot td {
    border-top: 1px solid rgba(27, 24, 22, 0.08) !important;
    background: rgba(0, 0, 0, 0.005) !important;
}
[data-theme="light"] .kc-mini-bar {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .kc-mini-fill {
    background: var(--gradient-warning) !important;
}

/* Premium Minimalist Badges (Apple-style) */
.kc-badge-pct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    color: var(--t-1) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.kc-badge-pct::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
}

.kc-badge-pct.green::before {
    background-color: var(--green);
    box-shadow: 0 0 6px var(--green-glow);
}

.kc-badge-pct.yellow::before {
    background-color: var(--yellow);
    box-shadow: 0 0 6px var(--yellow-glow);
}

.kc-badge-pct.red::before {
    background-color: var(--red);
    box-shadow: 0 0 6px var(--red-glow);
}

.kc-badge-pct.blue::before {
    background-color: var(--blue);
    box-shadow: 0 0 6px var(--blue-glow);
}

/* Upgraded Mini Progress Bar */
.kc-mini-bar {
    width: 70px;
    height: 3px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 2px;
    margin: 5px auto 0 auto;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.01);
}

.kc-mini-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .kc-totals-ribbon {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 992px) {
    .traffic-sub-charts-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ═══ CUSTOM HTML NESTED FUNNEL ═══ */
.traffic-funnel-html-container {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Perfect spacing between rows */
    padding: 6px 0;
    flex: 1;
    justify-content: center;
}

.funnel-platform-row {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Breathing room between header and bar */
}

.funnel-platform-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    white-space: nowrap; /* Gurantees no weird vertical text wrapping! */
    line-height: 1;
}

.funnel-platform-name {
    font-weight: 800;
    color: var(--t-1);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
}

.funnel-platform-name .platform-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.funnel-platform-stats {
    font-size: 10px;
    color: var(--t-3);
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
}

.funnel-platform-stats strong {
    color: var(--t-1);
    font-weight: 700;
}

.funnel-bars-container {
    position: relative;
    height: 8px; /* Increased height for solid premium weight */
    background: rgba(255, 255, 255, 0.02);
    border-radius: 99px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.funnel-bar-fill {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 99px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.funnel-bar-fill.leads {
    z-index: 1;
}

.funnel-bar-fill.approved {
    z-index: 2;
}

.funnel-bar-fill.completed {
    z-index: 3;
}

/* Custom legend below */
.funnel-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-3);
}

.funnel-leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.funnel-leg-dot {
    width: 8px;
    height: 4px;
    border-radius: 99px;
}

/* ═══ BUYING HIGHLIGHTS RIBBON ═══ */
.buying-highlights-ribbon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0px 0 16px 0;
}
.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    min-height: 108px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        rgba(13, 15, 24, 0.48) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-xl);
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-apple);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.20),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 4px 15px rgba(0, 0, 0, 0.18),
        0 20px 48px -8px rgba(0, 0, 0, 0.40) !important;
}
.highlight-item:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) padding-box,
        rgba(18, 20, 32, 0.58) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 6px 20px rgba(0, 0, 0, 0.22),
        0 28px 56px -8px rgba(0, 0, 0, 0.50) !important;
}

.hl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex-shrink: 0;
    margin-top: 1px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 2px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255,255,255,0.04);
    filter: saturate(1.1);
}
.hl-content {
    display: flex;
    flex-direction: column;
    gap: 0px;
    flex: 1;
    min-width: 0;
}
.hl-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--t-1);
    letter-spacing: -0.025em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(to bottom, #ffffff 0%, #e2e8f0 100%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.hl-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--t-2);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hl-sub {
    font-size: 9px;
    font-weight: 600;
    color: var(--t-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Aligned Structured Highlights Layout */
.hl-meta-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 6px;
}
.hl-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    line-height: 1.3;
}
.hl-meta-label {
    color: var(--t-3);
    font-weight: 500;
    opacity: 0.85;
}
.hl-meta-value {
    font-weight: 600;
    color: var(--t-1);
    font-variant-numeric: tabular-nums;
}
.hl-meta-value.hl-target {
    color: #22c55e; /* Premium Emerald target green */
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.15);
}
.hl-meta-value.hl-info {
    color: #3b82f6; /* Accent blue */
}
.hl-meta-value.hl-warning {
    color: #f59e0b; /* Amber */
}
.hl-meta-value.hl-muted {
    color: var(--t-2);
}


/* ═══ POWER BI STRATEGIC GRID ═══ */
.pb-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 0 0 12px 0;
}
/* Prevent wrapping of labels, values, currency symbols, and subtexts */
.pb-kpi-grid .card-kpi-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: 100%;
}
.pb-kpi-grid .card-kpi-value {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}
.pb-kpi-grid .card-kpi-sub {
    white-space: nowrap !important;
}

@media (max-width: 1400px) {
    .pb-kpi-grid .card-kpi-value {
        font-size: 28px;
    }
    .pb-kpi-grid .card-kpi.featured .card-kpi-value {
        font-size: 38px;
    }
}

@media (max-width: 1100px) {
    .pb-kpi-grid .card-kpi-value {
        font-size: 24px;
    }
    .pb-kpi-grid .card-kpi.featured .card-kpi-value {
        font-size: 32px;
    }
    .pb-kpi-grid .card-kpi-label {
        font-size: 11px;
    }
    .pb-kpi-grid .card-kpi-sub {
        font-size: 10.5px;
    }
}
.pb-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 0 18px 0;
}

@media (max-width: 992px) {
    .buying-highlights-ribbon {
        grid-template-columns: repeat(2, 1fr);
    }
    .pb-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pb-charts-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 576px) {
    .buying-highlights-ribbon {
        grid-template-columns: 1fr;
    }
    .pb-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .pb-kpi-grid .card.featured {
        grid-column: span 2 !important;
    }
}

/* ═══ PREMIUM DEPT TITLES (NO DOTS) ═══ */
.block .block-title-row h2 {
    display: none !important;
}

.block[data-section="buying"] .block-title-row h2 {
    color: #3b82f6 !important; /* Premium Blue accent */
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.18);
}

.block[data-section="buying"] .block-header {
    display: none !important;
}

.block[data-section="buying-analytics"] .block-title-row h2 {
    color: var(--purple) !important;
    text-shadow: 0 0 30px rgba(167, 139, 250, 0.18);
}

.block[data-section="warehouse"] .block-title-row h2 {
    color: var(--yellow) !important;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.18);
}

.block[data-section="procurement"] .block-title-row h2 {
    color: var(--red) !important;
    text-shadow: 0 0 30px rgba(248, 113, 113, 0.18);
}

.block[data-section="finance"] .block-title-row h2 {
    color: var(--green) !important;
    text-shadow: 0 0 30px rgba(52, 211, 153, 0.18);
}

.settings-overlay .block-title-row h2 {
    color: var(--t-1) !important;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* Premium block-meta capsule badges style */
.block-header .block-title-row {
    align-items: center;
    gap: 12px;
}

.block-header .block-meta {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--t-2) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.04);
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    transition: all 0.2s ease;
    font-variant-numeric: tabular-nums;
}

.block-header .block-meta:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Unified Premium Meta Capsule Group */
.block-meta-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.block-meta-group:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.block-meta-group span {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.block-meta-group .meta-source {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--t-2) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.block-meta-group .meta-divider {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.15);
    user-select: none;
}

.block-meta-group .buying-updated {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--t-3) !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════
   CAPACITY LOGISTICS DASHBOARD — CEO OVERHAUL v5
   ═══════════════════════════════════════════════════ */
.capacity-dashboard {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 16px;
    align-items: stretch;
    box-sizing: border-box;
    margin-top: 4px;
}
.cap-metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1.15fr 0.9fr 0.9fr;
    gap: 10px;
}
.cap-metric-box {
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.22s var(--ease-out);
}
.cap-metric-box:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
.cap-metric-box.featured {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%);
    border-color: rgba(255, 255, 255, 0.05);
}
.cmb-label {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--t-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}
.cmb-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--t-1);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cmb-value.highlight {
    color: var(--yellow);
    text-shadow: 0 0 16px rgba(251, 191, 36, 0.15);
}
.cmb-value.speed {
    color: var(--blue);
    text-shadow: 0 0 16px rgba(96, 165, 250, 0.15);
}
.cmb-sub {
    font-size: 10px;
    color: var(--t-3);
    margin-top: 3px;
}

/* Share distribution bar inside orders */
.cmb-distribution {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
}
.cmb-dist-bar-wrap {
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    overflow: hidden;
}
.cmb-dist-bar {
    height: 100%;
    transition: width 0.8s var(--ease-out);
}
.cmb-dist-bar.vibe {
    background: var(--purple);
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.4);
}
.cmb-dist-bar.warm {
    background: var(--accent);
    box-shadow: 0 0 8px rgba(245, 197, 66, 0.4);
}
.cmb-dist-labels {
    display: flex;
    justify-content: space-between;
    font-size: 8.5px;
    color: var(--t-3);
    font-family: var(--font-mono);
}
.cmb-dist-labels strong {
    color: var(--t-2);
}

/* Stock visualizer sidebar */
.cap-stock-visualizer {
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    gap: 12px;
}
.csv-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.csv-title-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.csv-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--t-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.csv-subtitle {
    font-size: 9px;
    color: var(--t-3);
}
.csv-percentage {
    font-size: 24px;
    font-weight: 900;
    color: var(--green);
    letter-spacing: -0.04em;
    text-shadow: 0 0 20px rgba(52, 211, 153, 0.25);
    line-height: 1;
}

/* Sleek Dual Progress Bar */
.csv-dual-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0;
}
.csv-progress-track {
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.csv-progress-fill {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 99px;
    transition: width 1s var(--ease-out);
}
.csv-progress-fill.after-arrival {
    background: rgba(52, 211, 153, 0.25);
}
.csv-progress-fill.ship-now {
    background: var(--green);
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
}
.csv-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 2px;
}
.csv-leg-item {
    font-size: 9px;
    color: var(--t-3);
    display: flex;
    align-items: center;
    gap: 6px;
}
.csv-leg-item strong {
    color: var(--t-2);
    font-family: var(--font-mono);
}
.csv-leg-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.csv-leg-dot.ship-now {
    background: var(--green);
}
.csv-leg-dot.after-arrival {
    background: rgba(52, 211, 153, 0.35);
}

.csv-footer-metrics {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-xs);
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.02);
}
.csv-foot-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0 12px;
}
.csv-foot-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.csv-foot-metric span {
    font-size: 8px;
    font-weight: 600;
    color: var(--t-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.csv-foot-metric strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--t-2);
    font-family: var(--font-mono);
}

/* 📲 RESPONSIVE OVERRIDES FOR CAPACITY */
@media (max-width: 1200px) {
    .capacity-dashboard {
        grid-template-columns: 1fr;
        height: auto !important;
        gap: 14px;
    }
    .cap-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
    }
}
@media (max-width: 768px) {
    .cap-metrics-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

/* ═══════════════════════════════════════════════════
   ANALYTICAL HUB — PREMIUM CEO OVERHAUL v5
   ═══════════════════════════════════════════════════ */
.analytical-hub-card {
    --section-accent: 167, 139, 250; /* soft purple */
    margin-top: 14px !important;
}

/* Premium finance tab switcher */
.analytical-hub-card .finance-tabs {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 3px;
    display: inline-flex;
    gap: 2px;
}
.analytical-hub-card .finance-tab {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-primary);
    color: var(--t-3);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.analytical-hub-card .finance-tab:hover {
    color: var(--t-1);
    background: rgba(255, 255, 255, 0.02);
}
.analytical-hub-card .finance-tab.active {
    color: var(--purple) !important;
    background: rgba(167, 139, 250, 0.08) !important;
    border: 1px solid rgba(167, 139, 250, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.35);
}

/* Content grid */
.hub-tab-content-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 16px;
    align-items: stretch;
    box-sizing: border-box;
}

/* Sleek sub panels */
.hub-panel {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: all 0.22s var(--ease-out);
}
.hub-panel:hover {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.06);
}
.hub-panel.borderless {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}
.hub-panel.borderless:hover {
    background: transparent;
    border-color: transparent;
}
.hub-panel .panel-head {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.hub-panel .panel-head h4 {
    font-size: 11px;
    font-weight: 700;
    color: var(--t-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* Balances KPI Sub-row */
.hub-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.hub-kpi-subcard {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.hub-kpi-subcard:hover {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(255, 255, 255, 0.06);
}
.hub-kpi-subcard span {
    font-size: 8px;
    font-weight: 600;
    color: var(--t-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hub-kpi-subcard strong {
    font-size: 18px;
    font-weight: 800;
    margin-top: 2px;
    font-family: var(--font-mono);
    line-height: 1.1;
}

/* Donut container */
.hub-chart-subcard {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 220px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.hub-chart-subcard:hover {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Responsive columns stack for Hub content */
@media (max-width: 1200px) {
    .hub-tab-content-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .hub-kpi-row {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 576px) {
    .hub-kpi-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* High density visual indicators for Warehouse KPIs */
.wh-high-density-badge {
    font-size: 9.5px;
    font-weight: 600;
    font-family: var(--font-primary);
    color: var(--yellow);
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 6px;
    padding: 2px 8px;
    line-height: 1.2;
    height: fit-content;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Symmetrical Row 2 layout split */
.wh-scenarios-visual-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}
.wh-scenarios-chart-wrap {
    flex: 1;
}
.wh-scenarios-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 205px;
    flex-shrink: 0;
}
.scenario-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.25s var(--ease-apple);
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.scenario-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
}
.scenario-row.active {
    background: rgba(52, 211, 153, 0.05) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    box-shadow: 
        0 0 12px rgba(52, 211, 153, 0.06),
        inset 0 1px 0 rgba(52, 211, 153, 0.1) !important;
}
.scenario-row.scenario-actual {
    background: rgba(59, 130, 246, 0.06) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    box-shadow: 
        0 0 12px rgba(59, 130, 246, 0.06),
        inset 0 1px 0 rgba(59, 130, 246, 0.1) !important;
}
.scenario-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.scenario-status-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.scenario-names {
    display: flex;
    flex-direction: column;
}
.scenario-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--t-1);
    line-height: 1.2;
}
.scenario-desc {
    font-size: 8.5px;
    color: var(--t-3);
    line-height: 1.1;
    margin-top: 1px;
}
.scenario-value {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--t-1);
}
.scenario-row.active .scenario-value {
    color: var(--green) !important;
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.3);
}
.scenario-row.scenario-actual .scenario-value {
    color: #60a5fa !important;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

.card-chart .fops-scroll-container {
    overflow-y: auto !important;
}

/* Custom scrollbar for FOP list - matching bp-bars */
.fops-scroll-container::-webkit-scrollbar {
    width: 6px;
}
.fops-scroll-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}
.fops-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background 0.2s;
}
.fops-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Packer Summary Board */
.packer-summary-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.packer-summary-subcard {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    transition: all 0.2s ease;
    border-top: 2px solid rgba(251, 191, 36, 0.15);
}
.packer-summary-subcard:hover {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(251, 191, 36, 0.25);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.03);
}
.packer-summary-subcard span.pss-label {
    font-size: 8px;
    font-weight: 600;
    color: var(--t-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.packer-summary-subcard strong.pss-value {
    font-size: 16px;
    font-weight: 800;
    margin-top: 2px;
    font-family: var(--font-mono);
    color: var(--yellow);
    line-height: 1.1;
}

/* Responsiveness overrides */
@media (max-width: 992px) {
    .packer-summary-board {
        grid-template-columns: repeat(2, 1fr);
    }
    .wh-scenarios-visual-container {
        flex-direction: column;
        gap: 16px;
    }
    .wh-scenarios-list {
        width: 100%;
    }
}
@media (max-width: 576px) {
    .packer-summary-board {
        grid-template-columns: 1fr;
    }
}

/* Premium Ranks for Packers Leaderboard */
.wh-rank-capsule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-mono);
}
.wh-rank-capsule.rank-1 {
    background: rgba(251, 191, 36, 0.15);
    color: var(--yellow);
    border: 1px solid rgba(251, 191, 36, 0.3);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.1);
}
.wh-rank-capsule.rank-2 {
    background: rgba(255, 255, 255, 0.08);
    color: var(--t-2);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.wh-rank-capsule.rank-3 {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.wh-rank-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--t-3);
    font-weight: 600;
}

/* Warehouse Selector Active Amber Tab Glow */
#whWarehouseSwitcher {
    --tab-indicator-bg: rgba(251, 191, 36, 0.08);
    --tab-indicator-border: 1px solid rgba(251, 191, 36, 0.18);
    --tab-active-color: var(--yellow);
}

#procWarehouseSwitcher {
    --tab-indicator-bg: rgba(96, 165, 250, 0.08);
    --tab-indicator-border: 1px solid rgba(96, 165, 250, 0.18);
    --tab-active-color: var(--clr-info);
}

/* Warehouse cards — subtle semantic tint, no colored drop-shadows */
.card-warehouse-premium:has(.wh-card-icon[style*="var(--clr-success)"]) {
    --section-accent: 16, 185, 129; /* Green */
}
.card-warehouse-premium:has(.wh-card-icon[style*="var(--clr-info)"]) {
    --section-accent: 96, 165, 250; /* Blue */
}
.card-warehouse-premium:has(.wh-card-icon[style*="var(--purple)"]) {
    --section-accent: 167, 139, 250; /* Purple */
}

/* ═══════════════════════════════════════════
   LIQUID GLASS — static material defined on .card.
   .card-liquid-glass and buying cards simply inherit it; the lemon
   featured tint is already handled by .card-kpi.featured above.
   ═══════════════════════════════════════════ */

/* ═══ SIDEBAR SYSTEM ═══ */
.sidebar {
    width: 80px;
    height: calc(100vh - 8px);
    margin: 4px 0 4px 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    display: flex;
    flex-direction: row;
    padding: 0;
    transition: width 0.3s var(--ease-apple);
    z-index: 950;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.35),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15) !important;
}
.sidebar.expanded {
    width: 80px;
}
[data-theme="light"] .sidebar {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 100%) padding-box,
        rgba(255, 255, 255, 0.22) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(27, 24, 22, 0.08) 70%, rgba(27, 24, 22, 0.22) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    backdrop-filter: blur(40px) saturate(240%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(240%) !important;
    box-shadow: 
        0 35px 70px -15px rgba(27, 24, 22, 0.22),
        0 15px 30px -10px rgba(27, 24, 22, 0.15),
        inset 0 2.5px 1.5px rgba(255, 255, 255, 0.98),
        inset 0 -2.5px 1.5px rgba(27, 24, 22, 0.06) !important;
}

/* Column 1: Folders Bar */
.sidebar-folders {
    width: 100% !important;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 16px 0;
    background: transparent;
    border-right: none;
    box-sizing: border-box;
}
[data-theme="light"] .sidebar-folders {
    background: transparent !important;
    border-right: none !important;
}

[data-theme="light"] .sf-logo {
    filter: 
        contrast(1.06)
        brightness(0.92)
        drop-shadow(0 1px 1px rgba(27, 24, 22, 0.16))
        drop-shadow(0 3px 6px rgba(27, 24, 22, 0.12))
        drop-shadow(0 8px 18px rgba(27, 24, 22, 0.05)) !important;
    opacity: 0.98;
    transition: transform 0.5s var(--ease-spring), filter 0.5s var(--ease-spring) !important;
}

[data-theme="light"] .sf-header {
    position: relative;
    z-index: 1;
}

[data-theme="light"] .sf-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(251, 191, 36, 0.22) 50%, rgba(251, 191, 36, 0) 75%);
    z-index: -1;
    pointer-events: none;
    opacity: 0.9;
    transition: transform 0.5s var(--ease-spring), opacity 0.5s var(--ease-smooth);
}

[data-theme="light"] .sf-header:hover::before {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
}

[data-theme="light"] .sf-header:hover .sf-logo {
    transform: scale(1.06) rotate(-2deg) !important;
    filter: 
        contrast(1.08)
        brightness(0.95)
        drop-shadow(0 2px 3px rgba(27, 24, 22, 0.18))
        drop-shadow(0 6px 14px rgba(27, 24, 22, 0.14))
        drop-shadow(0 14px 28px rgba(27, 24, 22, 0.08)) !important;
    opacity: 1;
}

[data-theme="light"] .sf-bubble {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    color: var(--t-2) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        0 4px 12px rgba(27, 24, 22, 0.04),
        0 1px 3px rgba(27, 24, 22, 0.02) !important;
}

[data-theme="light"] .sf-item:hover .sf-bubble {
    background: rgba(255, 255, 255, 0.8) !important;
    color: var(--t-1) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 
        inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
        0 8px 18px rgba(27, 24, 22, 0.06),
        0 2px 4px rgba(27, 24, 22, 0.03) !important;
    transform: scale(1.04) !important;
}

[data-theme="light"] .sf-item.active .sf-bubble {
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
    border-color: rgba(245, 197, 66, 0.5) !important;
    box-shadow: 
        inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
        0 6px 14px var(--accent-glow),
        0 1px 3px rgba(27, 24, 22, 0.03) !important;
    transform: scale(1.05) !important;
}

[data-theme="light"] .sf-label {
    color: var(--t-2) !important;
    font-weight: 550 !important;
}

[data-theme="light"] .sf-item.active .sf-label {
    color: var(--accent) !important;
    font-weight: 700 !important;
}

[data-theme="light"] .sf-btn {
    background: linear-gradient(135deg, #ffffff, #f4efe6) !important;
    border: 1px solid rgba(27, 24, 22, 0.08) !important;
    color: var(--t-2) !important;
    box-shadow: 
        0 2px 5px rgba(27, 24, 22, 0.03), 
        inset 0 1px 0 #ffffff !important;
}

[data-theme="light"] .sf-btn:hover {
    background: linear-gradient(135deg, #ffffff, #eae4d8) !important;
    color: var(--t-1) !important;
    border-color: rgba(27, 24, 22, 0.14) !important;
    box-shadow: 
        0 4px 10px rgba(27, 24, 22, 0.05), 
        inset 0 1px 0 #ffffff !important;
    transform: translateY(-1px) !important;
}

.sf-header {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    margin-bottom: 20px;
}
.sf-logo {
    display: block;
    margin: 0 auto;
    width: 64px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35));
    transition: transform 0.5s var(--ease-spring), filter 0.5s var(--ease-spring);
}
.logo-dark {
    display: block !important;
}
.logo-light {
    display: none !important;
}
[data-theme="light"] .logo-dark {
    display: none !important;
}
[data-theme="light"] .logo-light {
    display: block !important;
}
.sf-header:hover .sf-logo {
    transform: scale(1.06) rotate(-2deg);
    filter: drop-shadow(0 4px 15px rgba(0,0,0,0.45));
}

.sf-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1;
    width: 100%;
}
.sf-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    width: 100%;
    position: relative;
    cursor: pointer;
}
.sf-bubble {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t-3);
    transition: all 0.25s var(--ease-apple);
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.15);
}
.sf-bubble svg {
    display: block;
    width: 22px;
    height: 22px;
    transition: transform 0.25s var(--ease-apple);
}
.sf-item:hover .sf-bubble svg {
    transform: scale(1.06);
}
.sf-item:hover .sf-bubble {
    background: rgba(255, 255, 255, 0.08);
    color: var(--t-1);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.2),
        0 6px 16px rgba(0, 0, 0, 0.25);
    transform: scale(1.04);
}
.sf-item.active .sf-bubble {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: var(--border-focus);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        0 8px 20px rgba(0, 0, 0, 0.3);
}
.sf-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--t-3);
    text-align: center;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s;
}
.sf-item.active .sf-label {
    color: var(--accent);
    font-weight: 700;
}

/* Badge count indicator on folder */
.sf-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--red, #ef4444);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 99px;
    min-width: 12px;
    text-align: center;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
    border: 1.5px solid rgba(13, 15, 23, 0.8);
}

.sf-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}
.sf-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    color: var(--t-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.sf-btn:hover {
    background: var(--glass-hover);
    color: var(--t-1);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

/* Column 2: Items Feed (collapsible middle column) */
.sidebar-feed {
    width: 280px;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(9, 10, 16, 0.42);
    box-sizing: border-box;
    transition: width 0.3s var(--ease-apple), opacity 0.25s var(--ease-apple);
}
.sidebar:not(.expanded) .sidebar-feed {
    width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
[data-theme="light"] .sidebar-feed {
    background: rgba(244, 239, 230, 0.25) !important;
    border-right: 1px solid rgba(27, 24, 22, 0.08) !important;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.9) !important;
}

.feed-header {
    height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.feed-search-wrap {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.feed-search-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px 8px 32px;
    color: var(--t-1);
    font-family: var(--font-primary);
    font-size: 12px;
    transition: all 0.2s;
}
[data-theme="light"] .feed-search-input {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #111827;
}
.feed-search-input:focus {
    background: rgba(0, 0, 0, 0.45);
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 10px rgba(var(--section-accent, 245, 197, 66), 0.15);
}
[data-theme="light"] .feed-search-input:focus {
    background: #ffffff;
    border-color: var(--accent);
}
.search-icon {
    position: absolute;
    left: 10px;
    color: var(--t-3);
    pointer-events: none;
}

.feed-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s var(--ease-apple);
    position: relative;
    border: 1px solid transparent;
}
.feed-item:hover {
    background: var(--glass-hover);
}
.feed-item.active {
    background: var(--accent-dim);
    border: 1px solid rgba(var(--section-accent, 245, 197, 66), 0.18);
}
.feed-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.feed-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.feed-item-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.feed-item-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="light"] .feed-item-title {
    color: #1f2937;
}
.feed-item-time {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.feed-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.feed-item-text {
    font-size: 11px;
    color: var(--t-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="light"] .feed-item-text {
    color: #6b7280;
}

.feed-footer {
    height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}
[data-theme="light"] .feed-footer {
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.feed-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent-dim);
    border: 1.5px solid rgba(245,197,66,0.35);
    flex-shrink: 0;
}
.feed-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}
.feed-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.feed-user-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--t-1);
}
[data-theme="light"] .feed-user-name {
    color: #111827;
}
.feed-user-role {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Card click highlight pulse keyframes */
@keyframes feedHighlightPulse {
    0% {
        box-shadow: 
            inset 0 1px 0.5px rgba(255, 255, 255, 0.2),
            inset 0 0 0 1px rgba(255, 255, 255, 0.04),
            0 0 0 rgba(var(--section-accent, 245, 197, 66), 0);
        transform: translateY(-2px) scale(1);
    }
    30% {
        box-shadow: 
            inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08),
            0 0 32px rgba(var(--section-accent, 245, 197, 66), 0.7);
        transform: translateY(-5px) scale(1.025);
        border-color: rgba(var(--section-accent, 245, 197, 66), 0.9) !important;
    }
    100% {
        box-shadow: 
            inset 0 1px 0.5px rgba(255, 255, 255, 0.2),
            inset 0 0 0 1px rgba(255, 255, 255, 0.04),
            0 12px 28px -4px rgba(0, 0, 0, 0.45);
        transform: translateY(-2px) scale(1);
    }
}
.card.feed-highlight {
    animation: feedHighlightPulse 1.4s ease-out;
}

/* ═══════════════════════════════════════════
   LIGHT THEME ADAPTATION OVERRIDES
   ═══════════════════════════════════════════ */

/* Settings Overlay Backdrop */
[data-theme="light"] .settings-overlay {
    background: rgba(17, 24, 39, 0.15) !important;
}

/* Settings Sidebar Panel - Liquid glass with deep volumetric shadow */
[data-theme="light"] .settings-sidebar {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(27, 24, 22, 0.12) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    box-shadow: 
        0 32px 80px rgba(17, 24, 39, 0.18),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.98) !important;
}

/* Settings Header */
[data-theme="light"] .settings-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* iOS Segmented Control Style Tabs */
[data-theme="light"] .settings-tabs {
    background: rgba(17, 24, 39, 0.04) !important;
    border: none !important;
    padding: 3px;
    border-radius: 12px;
}
[data-theme="light"] .settings-tab {
    color: var(--t-2) !important;
    font-weight: 600;
}
[data-theme="light"] .settings-tab:hover {
    color: var(--t-1) !important;
}
[data-theme="light"] .settings-tab.active {
    color: var(--accent) !important;
    background: #ffffff !important;
    box-shadow: 
        0 2px 6px rgba(17, 24, 39, 0.08),
        0 1px 2px rgba(17, 24, 39, 0.04) !important;
}
[data-theme="light"] .settings-tab.active svg {
    color: var(--accent) !important;
}

/* Settings Forms & Inputs */
[data-theme="light"] .form-input {
    background: #ffffff !important;
    border: 1px solid rgba(27, 24, 22, 0.22) !important;
    color: #111111 !important;
    box-shadow: 0 1px 2px rgba(27, 24, 22, 0.04) !important;
    color-scheme: light !important;
}
[data-theme="light"] .form-input:focus {
    border-color: var(--accent) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(179, 75, 34, 0.12) !important;
}
[data-theme="light"] .form-input option {
    background-color: #ffffff !important;
    color: #111111 !important;
}
[data-theme="light"] .settings-sidebar label {
    color: var(--t-2) !important;
}
[data-theme="light"] .setting-desc {
    color: var(--t-3) !important;
}
[data-theme="light"] .muted {
    color: var(--t-4) !important;
    opacity: 0.85;
}
[data-theme="light"] .users-table-wrap {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(27, 24, 22, 0.08) !important;
    border-radius: 12px;
    padding: 6px 10px;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        0 2px 6px rgba(27, 24, 22, 0.02) !important;
    margin-top: 8px;
}
[data-theme="light"] .target-card-section,
[data-theme="light"] .sync-row,
[data-theme="light"] .setting-row {
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(27, 24, 22, 0.08) !important;
    box-shadow: none !important;
}
[data-theme="light"] .target-card-section:hover,
[data-theme="light"] .sync-row:hover,
[data-theme="light"] .setting-row:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(245, 197, 66, 0.45) !important;
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.06) !important;
}
[data-theme="light"] .sync-row-config {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(27, 24, 22, 0.08) !important;
}
[data-theme="light"] .form-group-card {
    border-bottom: 1px solid rgba(27, 24, 22, 0.06) !important;
}
[data-theme="light"] .form-group-card:last-child {
    border-bottom: none !important;
}
[data-theme="light"] .data-table th {
    border-bottom: 1px solid rgba(27, 24, 22, 0.1) !important;
    color: var(--t-3) !important;
}
[data-theme="light"] .block-tag {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--t-2) !important;
}

/* Settings Row, User Card & Role Card - Clean glass card style */
[data-theme="light"] .setting-row,
[data-theme="light"] .user-card,
[data-theme="light"] .role-card {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(27, 24, 22, 0.08) !important;
    backdrop-filter: var(--glass-filter) !important;
    -webkit-backdrop-filter: var(--glass-filter) !important;
    box-shadow: 
        0 4px 10px rgba(27, 24, 22, 0.03),
        inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}
[data-theme="light"] .setting-row:hover,
[data-theme="light"] .user-card:hover,
[data-theme="light"] .role-card:hover {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(27, 24, 22, 0.14) !important;
    box-shadow: 
        0 8px 18px rgba(27, 24, 22, 0.06),
        inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
}

/* Make meta text inside cards much more readable */
[data-theme="light"] .user-meta-item {
    color: var(--t-2) !important;
}
[data-theme="light"] .user-meta-item svg {
    color: var(--t-3) !important;
}

/* Role badge colors - Popping with distinct, strong contrast colors */
[data-theme="light"] .role-badge.role-admin {
    background: var(--yellow-dim) !important;
    color: var(--yellow) !important;
    border: 1px solid var(--yellow-glow) !important;
}
[data-theme="light"] .role-badge.role-manager {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #1d4ed8 !important;
    border: 1px solid rgba(37, 99, 235, 0.22) !important;
}
[data-theme="light"] .role-badge.role-viewer {
    background: rgba(100, 116, 139, 0.1) !important;
    color: #475569 !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
}

/* Modals */
[data-theme="light"] .modal-backdrop {
    background: rgba(17, 24, 39, 0.15) !important;
}
[data-theme="light"] .modal-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(27, 24, 22, 0.12) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    box-shadow: 
        0 32px 80px rgba(17, 24, 39, 0.18),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.98) !important;
}
[data-theme="light"] .modal-actions {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Buttons */
[data-theme="light"] .btn-ghost {
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: var(--t-2) !important;
}
[data-theme="light"] .btn-ghost:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: var(--t-1) !important;
}

/* Custom Delete Icon Button */
.btn-danger-icon:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: var(--red) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1) !important;
}

/* Dashboard Metrics Top Ribbon Cards (.highlight-item) - Solid white, clean floating card style */
[data-theme="light"] .highlight-item,
[data-theme="light"] .buyer-card,
[data-theme="light"] .mini-source-card,
[data-theme="light"] .bp-compare {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.20) 100%) padding-box,
        rgba(253, 251, 247, 0.30) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.90) 0%, rgba(27, 24, 22, 0.06) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    backdrop-filter: var(--glass-filter) !important;
    -webkit-backdrop-filter: var(--glass-filter) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="light"] .highlight-item:hover,
[data-theme="light"] .buyer-card:hover,
[data-theme="light"] .mini-source-card:hover,
[data-theme="light"] .bp-compare:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.30) 100%) padding-box,
        rgba(253, 251, 247, 0.40) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(27, 24, 22, 0.10) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    box-shadow: var(--shadow-card-hover) !important;
}

/* Card KPI Values in Light Theme - High contrast text with soft gray capsule */
[data-theme="light"] .card-kpi-value {
    color: var(--t-1) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

[data-theme="light"] .card-kpi-value small {
    color: var(--t-2) !important;
    opacity: 0.75 !important;
}

/* Featured KPI Value (e.g. Margin) in Light Theme - Soft gold capsule with dark gold text */
[data-theme="light"] .card-kpi.featured .card-kpi-value {
    color: var(--green) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ═══════════════════════════════════════════
   OPTION A: DEPARTMENT PANELS (BLOCKS) OVERRIDES
   ═══════════════════════════════════════════ */

/* Light Theme Frosted Glass Department Blocks */
[data-theme="light"] .block {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.30) 100%) padding-box,
        rgba(244, 239, 230, 0.55) padding-box,
        linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(27, 24, 22, 0.08)) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    box-shadow:
        inset 0 1.5px 0.5px rgba(255, 255, 255, 0.8),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3),
        0 12px 32px -12px rgba(27, 24, 22, 0.08) !important;
}

[data-theme="light"] .block:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.40) 100%) padding-box,
        rgba(244, 239, 230, 0.65) padding-box,
        linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(27, 24, 22, 0.12)) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    box-shadow:
        inset 0 1.5px 0.5px rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(255, 255, 255, 0.45),
        0 16px 40px -12px rgba(27, 24, 22, 0.12) !important;
}

/* Light Theme Block Tag Contrast Override */
[data-theme="light"] .block-tag {
    background: rgba(27, 24, 22, 0.04) !important;
    border: 1px solid rgba(27, 24, 22, 0.08) !important;
    color: var(--t-2) !important;
}

/* Light Theme Highlight Card value visibility override */
[data-theme="light"] .hl-value {
    background: linear-gradient(to bottom, var(--t-1) 0%, var(--t-2) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Global SVG Gridline overrides for a soft, dashed, and blurred aesthetic */
.apexcharts-gridline,
.apexcharts-gridline-y {
    stroke-dasharray: 4 !important;
    stroke-opacity: 0.35 !important;
}
.apexcharts-grid-borders,
.apexcharts-grid-borders line {
    display: none !important;
    stroke: transparent !important;
    stroke-width: 0 !important;
    opacity: 0 !important;
}

/* Light Theme Buyer Card elements */
[data-theme="light"] .bc-avatar {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--t-2) !important;
}
[data-theme="light"] .bc-badge {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: var(--t-2) !important;
}
[data-theme="light"] .bc-divider {
    background: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .bc-sub-val.highlight-profit {
    color: #2563eb !important;
}


/* ═══ SCROLL NAVIGATOR WIDGET ═══ */
.scroll-navigator {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 30px;
    padding: 6px;
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.35),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s var(--ease-apple), opacity 0.3s;
}
.scroll-navigator:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)) !important;
}
.scroll-btn {
    background: none;
    border: none;
    color: var(--t-2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
}
.scroll-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: scale(1.1);
}
.scroll-btn:active {
    transform: scale(0.95);
}
.scroll-divider {
    width: 18px;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 2px 0;
}

/* Light theme overrides */
[data-theme="light"] .scroll-navigator {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 100%) padding-box,
        rgba(255, 255, 255, 0.22) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(27, 24, 22, 0.08) 70%, rgba(27, 24, 22, 0.22) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    backdrop-filter: blur(40px) saturate(240%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(240%) !important;
    box-shadow: 
        0 35px 70px -15px rgba(27, 24, 22, 0.22),
        0 15px 30px -10px rgba(27, 24, 22, 0.15),
        inset 0 2.5px 1.5px rgba(255, 255, 255, 0.98),
        inset 0 -2.5px 1.5px rgba(27, 24, 22, 0.06) !important;
}
[data-theme="light"] .scroll-navigator:hover {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.55) 100%) padding-box,
        rgba(244, 239, 230, 0.55) padding-box,
        linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(27, 24, 22, 0.24) 100%) border-box !important;
    background-clip: padding-box, padding-box, border-box !important;
    -webkit-background-clip: padding-box, padding-box, border-box !important;
    border: 1px solid transparent !important;
    box-shadow: 
        0 26px 52px -10px rgba(27, 24, 22, 0.22),
        0 8px 18px -4px rgba(27, 24, 22, 0.14),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
        inset 0 -1.5px 1px rgba(27, 24, 22, 0.04) !important;
}
[data-theme="light"] .scroll-btn {
    color: var(--t-2) !important;
}
[data-theme="light"] .scroll-btn:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--t-1) !important;
}
[data-theme="light"] .scroll-divider {
    background: rgba(0, 0, 0, 0.05);
}

/* Premium Team Performance Styling */
.teams-comparison-bars {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.team-perf-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 18px 24px;
    display: grid;
    grid-template-columns: 60px 1.5fr 1.2fr 1.2fr;
    align-items: center;
    gap: 20px;
    transition: all 0.25s var(--ease-out);
    position: relative;
    overflow: hidden;
}
.team-perf-card:hover {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.team-perf-rank {
    font-size: 24px;
    font-weight: 800;
    color: var(--t-3);
    font-family: var(--font-display);
}
.team-perf-card:nth-child(1) .team-perf-rank {
    color: #f5c542; /* Gold for rank 1 */
    text-shadow: 0 0 12px rgba(245, 197, 66, 0.35);
}
.team-perf-card:nth-child(2) .team-perf-rank {
    color: #a1a1aa; /* Silver for rank 2 */
    text-shadow: 0 0 12px rgba(161, 161, 170, 0.2);
}
.team-perf-card:nth-child(3) .team-perf-rank {
    color: #b45309; /* Bronze for rank 3 */
    text-shadow: 0 0 12px rgba(180, 83, 9, 0.2);
}
.team-perf-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.team-perf-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--t-1);
}
.team-perf-lead {
    font-size: 11.5px;
    color: var(--t-3);
}
.team-perf-lead strong {
    color: var(--t-2);
}
.team-perf-metric-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.team-perf-metric-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-3);
    font-weight: 600;
}
.team-perf-metric-value {
    font-size: 17px;
    font-weight: 700;
    font-family: var(--font-display);
}
.team-perf-metric-value.margin {
    color: var(--t-2);
}
.team-perf-metric-value.net-profit {
    color: var(--green);
}
.team-perf-metric-value.net-profit.neg {
    color: var(--red);
}
.team-perf-progress-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.02);
}
.team-perf-progress-fill {
    height: 100%;
    background: var(--gradient-success) !important;
    width: 0%;
    transition: width 1s var(--ease-apple);
}

[data-theme="light"] .team-perf-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(27, 24, 22, 0.08) !important;
}
[data-theme="light"] .team-perf-card:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(27, 24, 22, 0.15) !important;
    box-shadow: 0 4px 15px rgba(27, 24, 22, 0.04) !important;
}
[data-theme="light"] .team-perf-progress-wrap {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .team-perf-card {
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto auto;
        gap: 12px;
        padding: 16px;
    }
    .team-perf-metric-group {
        grid-column: 2;
    }
}

/* Refined Premium Finance Cards */
.finance-kassa-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0;
}
.finance-kassa-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.finance-kassa-row .kassa-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--t-2);
}
.finance-kassa-row .kassa-val {
    font-size: 15px;
    font-weight: 800;
    color: var(--t-1);
}
.finance-kassa-row.yesterday .kassa-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--t-2);
}
.finance-kassa-details {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--t-3);
    padding-left: 8px;
    margin-top: -2px;
}
.finance-kassa-details span strong {
    color: var(--t-2);
}
.finance-kassa-divider {
    height: 1px;
    background: var(--border);
    margin: 2px 0;
}

.finance-fop-share-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0;
}
.finance-fop-share-row .fop-pct-our {
    font-size: 20px;
    font-weight: 800;
    color: var(--green);
}
.finance-fop-share-row .fop-pct-david {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    margin-left: auto;
}
.finance-fop-share-row .fop-label-our,
.finance-fop-share-row .fop-label-david {
    font-size: 11px;
    color: var(--t-3);
}
.finance-fop-share-sums {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
    color: var(--t-3);
    margin-top: 2px;
}
.finance-fop-share-sums div {
    display: flex;
    justify-content: space-between;
}

/* Global muted text helper */
.muted {
    color: var(--t-3) !important;
    opacity: 0.7;
}

/* Mobile Hover Overrides to Prevent over-illumination and touch-click shifts */
@media (max-width: 768px) {
    .card:hover,
    .card-kpi:hover,
    .card-kpi.featured:hover,
    .block:hover,
    .team-perf-card:hover,
    .settings-user:hover {
        transform: none !important;
        box-shadow: var(--shadow-card) !important;
    }
    
    [data-theme="light"] .card:hover,
    [data-theme="light"] .card-kpi:hover,
    [data-theme="light"] .card-kpi.featured:hover,
    [data-theme="light"] .block:hover,
    [data-theme="light"] .team-perf-card:hover,
    [data-theme="light"] .settings-user:hover {
        transform: none !important;
        box-shadow: var(--shadow-card) !important;
    }
}