/**
 * Supply Panel Component Styles
 * Extracted from inline styles for better maintainability.
 * Uses CSS custom properties for theme compatibility.
 */

/* ==========================================================================
   Layout Components
   ========================================================================== */

/* Filter Bar */
.sp-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.sp-filter-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sp-filter-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Grid Layouts */
.sp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.sp-kpi-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.sp-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.sp-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.sp-stats-card {
    padding: 16px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border-default);
    border-radius: 8px;
    text-align: center;
}

.sp-stats-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--sp-text-primary);
}

.sp-stats-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sp-text-muted);
    margin-top: 4px;
}

/* ==========================================================================
   Card Components
   ========================================================================== */

/* Base Card */
.sp-card {
    background: var(--sp-bg-card);
    border-radius: 8px;
    border: 1px solid var(--sp-border-default);
}

.sp-card-mb {
    margin-bottom: 20px;
}

/* Card Header */
.sp-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--sp-border-default);
}

.sp-card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sp-border-default);
}

/* Card Body */
.sp-card-body {
    padding: 20px;
}

/* Card Footer */
.sp-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--sp-border-default);
}

/* KPI Card */
.sp-kpi-card {
    background: var(--sp-bg-card);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--sp-border-default);
}

/* ==========================================================================
   Typography
   ========================================================================== */

/* Section Title */
.sp-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-text-primary);
}

.sp-section-subtitle {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--sp-text-muted);
}

/* KPI Label */
.sp-kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-text-muted);
    margin: 0;
}

/* KPI Value */
.sp-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--sp-text-primary);
    margin: 8px 0 0 0;
    letter-spacing: -0.02em;
}

.sp-kpi-sublabel {
    margin: 4px 0 0 0;
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-kpi-value-row {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sp-kpi-value-row .sp-kpi-value {
    margin: 0;
}

/* KPI Change indicator */
.sp-kpi-change {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 13px;
}

.sp-change-indicator {
    font-size: 12px;
    font-weight: 500;
    margin: 0;
}

.sp-change-positive {
    color: var(--sp-accent-positive);
}

.sp-change-negative {
    color: #ef4444;
}

.sp-change-label {
    color: var(--sp-text-muted);
    font-size: 10px;
}

/* Filter Label */
.sp-filter-label {
    font-size: 13px;
    color: var(--sp-text-secondary);
}

/* Muted Text */
.sp-text-muted {
    font-size: 11px;
    color: var(--sp-text-muted);
    margin: 4px 0 0 0;
}

/* ==========================================================================
   Button Components
   ========================================================================== */

/* Secondary Button */
.sp-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-text-secondary);
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border-default);
    border-radius: 6px;
    cursor: pointer;
}

.sp-btn-secondary:hover {
    background: var(--sp-bg-card-hover);
}

/* Button Group */
.sp-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   Dropdown Components
   ========================================================================== */

.sp-dropdown {
    position: relative;
    display: inline-block;
}

.sp-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border-default);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--sp-text-primary);
    cursor: pointer;
}

.sp-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--sp-bg-dropdown);
    border: 1px solid var(--sp-border-default);
    border-radius: 6px;
    overflow: hidden;
    min-width: 140px;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.sp-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--sp-text-secondary);
    border: none;
    cursor: pointer;
    background: transparent;
}

.sp-dropdown-item:hover,
.sp-dropdown-item.active {
    background: var(--sp-bg-card-hover);
}

.sp-dropdown-item.active {
    color: var(--sp-accent-positive);
}

/* Dropdown chevron icon */
.sp-dropdown-chevron {
    opacity: 0.5;
    transition: transform 0.2s;
}

.sp-dropdown-chevron.open {
    transform: rotate(180deg);
}

/* ==========================================================================
   Table Components
   ========================================================================== */

.sp-table {
    width: 100%;
    border-collapse: collapse;
}

.sp-table-container {
    padding: 0;
    overflow-x: auto;
}

.sp-table-scroll {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

/* Table Header Cell */
.sp-th {
    padding: 12px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-color-brand);
    border-bottom: 1px solid var(--sp-border-default);
}

.sp-th-right {
    text-align: right;
}

.sp-th-sticky {
    position: sticky;
    top: 0;
    background: var(--sp-bg-card);
}

/* Table Data Cell */
.sp-td {
    padding: 14px 20px;
    font-size: 13px;
    color: var(--sp-text-primary);
    border-bottom: 1px solid var(--sp-border-subtle);
}

.sp-td-secondary {
    color: var(--sp-text-secondary);
}

.sp-td-right {
    text-align: right;
}

.sp-td-bold {
    font-weight: 500;
}

.sp-td-primary {
    font-weight: 500;
    color: var(--sp-text-primary);
}

.sp-tfoot-row {
    background: var(--sp-bg-card);
    border-top: 2px solid var(--sp-border-default);
}

.sp-tfoot-row td {
    padding: 12px 20px;
}

/* Small padding variant (for revenue table) */
.sp-th-sm {
    padding: 10px 16px;
}

.sp-td-sm {
    padding: 10px 16px;
}

/* ==========================================================================
   Alert/Message Components
   ========================================================================== */

.sp-error-box {
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
}

.sp-error-title {
    font-weight: 600;
    color: #f87171;
    margin: 0;
}

.sp-error-message {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #fca5a5;
}

/* Warning Box (yellow/amber) */
.sp-warning-box {
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 8px;
}

.sp-warning-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sp-warning-icon {
    flex-shrink: 0;
    color: #eab308;
    margin-top: 2px;
}

.sp-warning-title {
    font-weight: 600;
    color: #fbbf24;
    margin: 0;
}

.sp-warning-message {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #fcd34d;
}

.sp-warning-hint {
    margin: 12px 0 0 0;
    font-size: 13px;
    color: #a3a3a3;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.sp-empty-state {
    padding: 48px;
    background: var(--sp-bg-card);
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--sp-border-default);
}

.sp-empty-message {
    color: var(--sp-text-muted);
    margin: 0;
    font-size: 14px;
}

.sp-empty-cell {
    padding: 32px;
    text-align: center;
    font-size: 13px;
    color: var(--sp-text-muted);
}

.sp-empty-state-sm {
    padding: 48px;
    text-align: center;
}

.sp-empty-icon {
    margin: 0 auto 12px;
    color: var(--sp-text-muted);
}

.sp-empty-hint {
    margin: 4px 0 0 0;
    font-size: 11px;
    color: var(--sp-text-muted);
}

/* ==========================================================================
   Alert Cards
   ========================================================================== */

.sp-alert-card {
    padding: 16px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border-default);
    border-radius: 8px;
}

.sp-alert-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-alert-title {
    font-weight: 600;
}

.sp-alert-message {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: var(--sp-text-muted);
}

/* ==========================================================================
   Legend
   ========================================================================== */

.sp-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sp-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.sp-legend-label {
    font-size: 11px;
    color: var(--sp-text-muted);
}

/* ==========================================================================
   KPI Icon Badge
   ========================================================================== */

.sp-kpi-icon-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sp-icon-badge {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-icon-badge-purple {
    background: rgba(167, 139, 250, 0.15);
}

/* ==========================================================================
   Chart Components
   ========================================================================== */

.sp-chart-container {
    position: relative;
    height: 300px;
}

.sp-chart-container-sm {
    padding: 20px;
    height: 280px;
}

/* ==========================================================================
   Shimmer Loading Animation
   ========================================================================== */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer {
    background: linear-gradient(90deg,
        var(--sp-bg-card) 25%,
        color-mix(in srgb, var(--sp-border-default) 50%, var(--sp-bg-card)) 50%,
        var(--sp-bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    border-radius: 4px;
}

/* ==========================================================================
   Fade Slide Up Animation
   ========================================================================== */

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.kpi-card {
    animation: fadeSlideUp 0.4s ease-out forwards;
}

.kpi-card:nth-child(1) { animation-delay: 0ms; }
.kpi-card:nth-child(2) { animation-delay: 50ms; }
.kpi-card:nth-child(3) { animation-delay: 100ms; }
.kpi-card:nth-child(4) { animation-delay: 150ms; }
.kpi-card:nth-child(5) { animation-delay: 200ms; }

.chart-section {
    animation: fadeSlideUp 0.5s ease-out forwards;
    animation-delay: 250ms;
    opacity: 0;
}

.table-section {
    animation: fadeSlideUp 0.5s ease-out forwards;
    animation-delay: 400ms;
    opacity: 0;
}

/* ==========================================================================
   Skeleton Loading Components
   ========================================================================== */

.sp-skeleton-flex {
    display: flex;
    gap: 8px;
}

.sp-skeleton-flex-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-skeleton-bar-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.sp-skeleton-chart {
    padding: 20px;
    height: 300px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.sp-skeleton-horizontal-bars {
    padding: 20px;
    height: 240px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-skeleton-table-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
}

/* ==========================================================================
   Info Badge
   ========================================================================== */

.sp-info-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sp-text-muted);
}

/* ==========================================================================
   No Competitors Warning (centered)
   ========================================================================== */

.sp-no-data-warning {
    padding: 24px;
    text-align: center;
}

.sp-no-data-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(234, 179, 8, 0.1);
    border-radius: 50%;
    margin-bottom: 12px;
}

.sp-no-data-title {
    font-weight: 600;
    color: #fbbf24;
    margin: 0 0 4px 0;
}

.sp-no-data-message {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin: 0;
}

/* ==========================================================================
   Chart Container Variants
   ========================================================================== */

.sp-chart-container-240 {
    position: relative;
    height: 240px;
}

.sp-chart-container-280 {
    position: relative;
    height: 280px;
}

/* ==========================================================================
   Skeleton Bar Chart (Benchmark)
   ========================================================================== */

.sp-skeleton-bar-chart {
    padding: 20px;
    height: 320px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 20px;
}

.sp-skeleton-bar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

/* ==========================================================================
   Skeleton Grid Table
   ========================================================================== */

.sp-skeleton-grid-6 {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--sp-border-default);
}

.sp-skeleton-grid-6-row {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--sp-border-subtle);
}

/* ==========================================================================
   Toggle Button Group (FE-002)
   ========================================================================== */

.sp-toggle-group {
    display: flex;
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    border-radius: 6px;
    overflow: hidden;
}

.sp-toggle-btn {
    padding: 6px 12px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--sp-text-muted);
    transition: background-color 0.15s, color 0.15s;
}

.sp-toggle-btn:hover {
    background: var(--sp-bg-card-hover);
}

.sp-toggle-btn.active {
    background: var(--sp-color-brand);
    color: #fff;
}

/* ==========================================================================
   Grid Variations (FE-002)
   ========================================================================== */

.sp-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.sp-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* ==========================================================================
   List Items (Category/Product) (FE-002)
   ========================================================================== */

.sp-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--sp-bg-input);
    border-radius: 6px;
}

.sp-list-item-content {
    flex: 1;
    min-width: 0;
}

.sp-list-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-list-item-subtitle {
    font-size: 11px;
    color: var(--sp-text-muted);
    margin-top: 2px;
}

.sp-list-item-value {
    text-align: right;
    margin-left: 12px;
}

.sp-list-item-metric {
    font-size: 14px;
    font-weight: 600;
}

.sp-list-item-trend {
    font-size: 10px;
    color: var(--sp-text-muted);
    text-transform: uppercase;
}

.sp-list-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==========================================================================
   Insight/Alert Boxes (FE-002)
   ========================================================================== */

.sp-insight-box {
    margin-bottom: 20px;
    padding: 16px 20px;
    background: rgba(0, 102, 84, 0.12);
    border: 1px solid var(--sp-color-brand);
    border-radius: 8px;
}

.sp-insight-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sp-insight-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--sp-color-success);
}

.sp-insight-text {
    margin: 0;
    font-size: 14px;
    color: var(--sp-text-primary);
    line-height: 1.5;
}

/* ==========================================================================
   Methodology/Legend Items (FE-002)
   ========================================================================== */

.sp-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    font-size: 12px;
}

.sp-legend-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.sp-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 3px;
}

.sp-legend-swatch-blue { background: #3b82f6; }
.sp-legend-swatch-green { background: #10b981; }
.sp-legend-swatch-red { background: #ef4444; }
.sp-legend-swatch-gray { background: var(--sp-text-muted); }
.sp-legend-swatch-purple { background: #a78bfa; }
.sp-legend-swatch-orange { background: #f97316; }

.sp-legend-text {
    color: var(--sp-text-muted);
}

.sp-legend-label {
    font-weight: 500;
}

.sp-legend-label-blue { color: #60a5fa; }
.sp-legend-label-green { color: #34d399; }
.sp-legend-label-red { color: #f87171; }
.sp-legend-label-default { color: var(--sp-text-secondary); }

/* ==========================================================================
   Seasonality/Bar Chart Display (FE-002)
   ========================================================================== */

.sp-seasonality-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 120px;
    gap: 8px;
}

.sp-seasonality-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sp-seasonality-value {
    font-size: 11px;
    font-weight: 500;
    color: var(--sp-text-muted);
    margin-bottom: 4px;
}

.sp-seasonality-bar {
    width: 100%;
    background: var(--sp-color-brand);
    border-radius: 4px 4px 0 0;
    opacity: 0.8;
}

.sp-seasonality-label {
    font-size: 10px;
    color: var(--sp-text-muted);
    margin-top: 6px;
}

.sp-seasonality-note {
    margin-top: 12px;
    text-align: center;
    font-size: 11px;
    color: var(--sp-text-muted);
}

/* ==========================================================================
   Table Enhancements (FE-002)
   ========================================================================== */

.sp-table-full {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.sp-table-full th {
    padding: 10px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sp-color-brand);
    border-bottom: 1px solid var(--sp-border-default);
    background: var(--sp-bg-card);
}

.sp-table-full th.right,
.sp-table-full td.right {
    text-align: right;
}

.sp-table-full td {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--sp-text-muted);
    border-bottom: 1px solid var(--sp-border-subtle);
}

.sp-table-full td.primary {
    font-weight: 500;
    color: var(--sp-text-primary);
}

.sp-table-full tfoot tr {
    background: var(--sp-bg-card);
    border-top: 2px solid var(--sp-border-default);
}

.sp-table-full tfoot td {
    padding: 12px;
    font-weight: 600;
}

/* ==========================================================================
   Chart Container Variations (FE-002)
   ========================================================================== */

.sp-chart-360 {
    position: relative;
    height: 360px;
}

.sp-chart-320 {
    position: relative;
    height: 320px;
}

/* ==========================================================================
   Methodology Section (FE-002)
   ========================================================================== */

.sp-methodology-intro {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin: 0 0 16px 0;
}

.sp-methodology-note {
    font-size: 11px;
    color: var(--sp-text-muted);
    margin: 16px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--sp-border-default);
}

/* ==========================================================================
   Color Utilities (FE-002)
   ========================================================================== */

.sp-text-success { color: var(--sp-color-success); }
.sp-text-danger { color: var(--sp-color-danger); }
.sp-text-warning { color: var(--sp-color-warning); }
.sp-text-info { color: var(--sp-color-info); }
.sp-text-blue { color: #3b82f6; }
.sp-text-green { color: #10b981; }
.sp-text-red { color: #ef4444; }
.sp-text-amber { color: #f59e0b; }

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 1280px) {
    .sp-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sp-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sp-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-grid-2col,
    .sp-grid-3col,
    .sp-grid-4col {
        grid-template-columns: 1fr;
    }

    .sp-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .sp-filter-group {
        flex-wrap: wrap;
    }

    .sp-legend-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Trend Stats (Best/Worst Month displays)
   ========================================================================== */

.sp-trend-stats {
    display: flex;
    gap: 16px;
    font-size: 11px;
}

.sp-trend-stat {
    text-align: right;
}

.sp-trend-stat-label {
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sp-trend-stat-value {
    font-weight: 600;
    margin-top: 2px;
}

/* ==========================================================================
   Chart Container Height Variants
   ========================================================================== */

.sp-chart-220 {
    position: relative;
    height: 220px;
    margin-bottom: 24px;
}

.sp-chart-160 {
    position: relative;
    height: 160px;
}

/* ==========================================================================
   Legend Inline (horizontal legend for charts)
   ========================================================================== */

.sp-legend-inline {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 12px;
    font-size: 11px;
}

.sp-legend-inline-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-legend-swatch-sm {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.sp-legend-swatch-success { background: var(--sp-color-success); }
.sp-legend-swatch-warning { background: var(--sp-color-warning); }
.sp-legend-swatch-danger { background: var(--sp-color-danger); }

/* ==========================================================================
   Heatmap Grid Components (RFM)
   ========================================================================== */

.sp-heatmap-wrapper {
    display: flex;
    gap: 8px;
}

.sp-heatmap-ylabel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 8px;
}

.sp-heatmap-ylabel-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sp-heatmap-container {
    flex: 1;
}

.sp-heatmap-grid-wrapper {
    display: flex;
    gap: 4px;
}

.sp-heatmap-row-labels {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 4px;
}

.sp-heatmap-row-label {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 11px;
    color: var(--sp-text-muted);
    width: 16px;
}

.sp-heatmap-cells {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-heatmap-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.sp-heatmap-cell {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.sp-heatmap-col-labels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding-top: 4px;
}

.sp-heatmap-col-label {
    text-align: center;
    font-size: 11px;
    color: var(--sp-text-muted);
}

.sp-heatmap-xlabel {
    text-align: center;
    padding-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sp-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--sp-border-default);
}

.sp-heatmap-legend-swatches {
    display: flex;
    gap: 2px;
}

.sp-heatmap-legend-swatch {
    width: 16px;
    height: 12px;
    border-radius: 2px;
}

.sp-heatmap-swatch-0 { background: var(--sp-bg-input); }
.sp-heatmap-swatch-25 { background: rgba(16, 185, 129, 0.25); }
.sp-heatmap-swatch-50 { background: rgba(16, 185, 129, 0.5); }
.sp-heatmap-swatch-75 { background: rgba(16, 185, 129, 0.75); }
.sp-heatmap-swatch-100 { background: var(--sp-color-success); }

/* ==========================================================================
   Segment Table (RFM)
   ========================================================================== */

.sp-segment-table {
    width: 100%;
    border-collapse: collapse;
}

.sp-segment-table th {
    padding: 12px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-color-brand);
    border-bottom: 1px solid var(--sp-border-default);
}

.sp-segment-table th.right {
    text-align: right;
}

.sp-segment-table td {
    padding: 14px 20px;
    font-size: 13px;
    color: var(--sp-text-primary);
    border-bottom: 1px solid var(--sp-border-subtle);
}

.sp-segment-table td.right {
    text-align: right;
}

.sp-segment-table td.value {
    font-size: 14px;
    font-weight: 600;
}

.sp-segment-table td.muted {
    color: var(--sp-text-muted);
}

.sp-segment-table td.action {
    font-size: 12px;
    color: var(--sp-text-muted);
}

/* Segment name cell with dot indicator */
.sp-segment-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-segment-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sp-segment-info {
    flex: 1;
}

.sp-segment-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-text-primary);
}

.sp-segment-desc {
    font-size: 11px;
    color: var(--sp-text-muted);
    margin-top: 2px;
}

/* ==========================================================================
   Table Legend Footer
   ========================================================================== */

.sp-table-legend {
    padding: 12px 20px;
    border-top: 1px solid var(--sp-border-default);
    display: flex;
    gap: 24px;
}

.sp-table-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-table-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sp-table-legend-label {
    font-size: 11px;
    color: var(--sp-text-muted);
}

/* Table Row Hover */
.sp-table-row-hover {
    transition: background-color 0.15s;
}

.sp-table-row-hover:hover {
    background: var(--sp-bg-card-hover);
}

/* ==========================================================================
   Sortable Table Headers
   ========================================================================== */

.sp-th-sortable {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--sp-border-default);
    position: sticky;
    top: 0;
    background: var(--sp-bg-card);
}

.sp-th-sortable.right {
    text-align: right;
}

.sp-th-sortable.center {
    text-align: center;
}

.sp-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--sp-color-brand);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sp-sort-btn.active {
    color: var(--sp-color-brand);
}

.sp-sort-btn.right {
    margin-left: auto;
}

.sp-sort-icon {
    width: 12px;
    height: 12px;
}

.sp-sort-icon-inactive {
    opacity: 0.4;
}

/* Static table header (non-sortable but same style) */
.sp-th-static {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sp-color-brand);
    border-bottom: 1px solid var(--sp-border-default);
    position: sticky;
    top: 0;
    background: var(--sp-bg-card);
}

.sp-th-static.right {
    text-align: right;
}

.sp-th-static.center {
    text-align: center;
}

/* Purchase Orders table — brand-colour header text (static and sortable) */
.sp-po-table thead th {
    color: var(--sp-color-brand);
}

.sp-po-table thead th .sp-sort-btn,
.sp-table thead th .sp-sort-btn {
    color: var(--sp-color-brand);
}

/* ==========================================================================
   PO Table Data Cells
   ========================================================================== */

.sp-td-po {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--sp-text-primary);
    border-bottom: 1px solid var(--sp-border-subtle);
}

.sp-td-po.bold {
    font-weight: 500;
}

.sp-td-po.secondary {
    color: var(--sp-text-secondary);
}

.sp-td-po.right {
    text-align: right;
}

.sp-td-po.center {
    text-align: center;
}

/* ==========================================================================
   Export Button Group
   ========================================================================== */

.sp-export-btn {
    padding: 6px 12px;
    font-size: 12px;
    color: var(--sp-text-secondary);
    background: transparent;
    border: 1px solid var(--sp-border-default);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.sp-export-btn:hover {
    background: var(--sp-bg-card-hover);
}

/* ==========================================================================
   Chart Sections Stack
   ========================================================================== */

.sp-chart-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.sp-chart-300 {
    padding: 20px;
    height: 300px;
}

/* ==========================================================================
   Conditional Color Classes
   ========================================================================== */

.sp-conditional-success { color: var(--sp-color-success); }
.sp-conditional-warning { color: var(--sp-color-warning); }
.sp-conditional-danger { color: var(--sp-color-danger); }

/* ==========================================================================
   Skeleton Grid Helpers
   ========================================================================== */

.sp-skeleton-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.sp-skeleton-po-table {
    display: grid;
    grid-template-columns: 1fr 1.5fr 0.5fr 1fr 1fr 1fr 0.5fr 1fr 0.5fr 0.5fr 0.5fr 0.8fr 0.5fr;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--sp-border-default);
}

/* ==========================================================================
   Collapsible Section
   ========================================================================== */

.sp-collapsible {
    background: var(--sp-bg-card);
    border-radius: 8px;
    border: 1px solid var(--sp-border-default);
}

.sp-collapsible-trigger {
    width: 100%;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.sp-collapsible-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-text-muted);
}

.sp-collapsible-icon {
    opacity: 0.5;
    transition: transform 0.2s;
}

.sp-collapsible-icon.open {
    transform: rotate(180deg);
}

.sp-collapsible-content {
    padding: 0 20px 20px;
    border-top: 1px solid var(--sp-border-default);
}

.sp-collapsible-inner {
    padding-top: 16px;
}

/* ==========================================================================
   RFM Explanation Grid
   ========================================================================== */

.sp-rfm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.sp-rfm-item {
    padding: 12px;
    background: var(--sp-bg-input);
    border-radius: 6px;
}

.sp-rfm-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-primary);
    margin-bottom: 4px;
}

.sp-rfm-item-desc {
    font-size: 12px;
    color: var(--sp-text-muted);
}

/* ==========================================================================
   Percentage Display
   ========================================================================== */

.sp-pct-sm {
    font-size: 13px;
}

/* Health score with dynamic color via CSS variable */
.sp-health-score {
    color: var(--health-score-color, var(--sp-text-primary));
}

/* ==========================================================================
   Chart Section Divider
   ========================================================================== */

.sp-chart-divider {
    border-top: 1px solid var(--sp-border-default);
    padding-top: 20px;
}

.sp-chart-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-primary);
    margin-bottom: 12px;
}

/* ==========================================================================
   Skeleton Size Helpers
   ========================================================================== */

.sp-skeleton-label {
    height: 11px;
    width: 60%;
    margin-bottom: 12px;
}

.sp-skeleton-value {
    height: 28px;
    width: 50%;
    margin-bottom: 8px;
}

.sp-skeleton-sublabel {
    height: 12px;
    width: 40%;
}

.sp-skeleton-title {
    height: 15px;
    width: 160px;
}

.sp-skeleton-heatmap-cell {
    height: 60px;
    border-radius: 6px;
}

.sp-skeleton-title-wide {
    height: 15px;
    width: 180px;
    margin-bottom: 4px;
}

.sp-skeleton-subtitle {
    height: 12px;
    width: 220px;
}

.sp-skeleton-chart-full {
    height: 100%;
    width: 100%;
    border-radius: 4px;
}

.sp-skeleton-cell {
    height: 10px;
    width: 80%;
}

.sp-skeleton-cell-var {
    height: 14px;
    width: 60%;
}

.sp-skeleton-bar {
    flex: 1;
    height: 50%;
    min-height: 100px;
    border-radius: 4px 4px 0 0;
}

.sp-skeleton-table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--sp-border-subtle);
}

.sp-skeleton-cell-60 { height: 14px; width: 60%; }
.sp-skeleton-cell-50 { height: 14px; width: 50%; }
.sp-skeleton-cell-45 { height: 14px; width: 45%; }

/* ==========================================================================
   Page Title
   ========================================================================== */

.sp-page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--sp-text-primary);
    margin: 0;
}

.sp-page-subtitle {
    font-size: 14px;
    color: var(--sp-text-secondary);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   Fullscreen Toggle Button
   ========================================================================== */

.sp-btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Awaiting Data State
   ========================================================================== */

.sp-awaiting-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(234, 179, 8, 0.1);
    border-radius: 50%;
    margin-bottom: 16px;
}

.sp-awaiting-icon {
    color: #eab308;
}

.sp-awaiting-title {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: #fbbf24;
}

.sp-awaiting-message {
    max-width: 400px;
    margin: 0 auto;
}

/* ==========================================================================
   Methodology Grid (2-column)
   ========================================================================== */

.sp-methodology-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

/* ==========================================================================
   Legend Swatch with Icon
   ========================================================================== */

.sp-legend-icon-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.sp-legend-swatch-dashed {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: #6B7280;
    border-style: dashed;
}

/* ==========================================================================
   Tip/Note Footer
   ========================================================================== */

.sp-methodology-tip {
    font-size: 11px;
    color: var(--sp-text-muted);
    margin: 16px 0 0 0;
}

/* ==========================================================================
   Card Margin Utilities
   ========================================================================== */

.sp-card-mt-lg {
    margin-top: 40px;
}

.sp-card-mb-lg {
    margin-bottom: 40px;
}

/* ==========================================================================
   Legend Swatch Color Extensions
   ========================================================================== */

.sp-legend-swatch-blue {
    background: #3b82f6;
}

/* ==========================================================================
   Cohort Skeleton
   ========================================================================== */

.sp-skeleton-cohort-row {
    display: grid;
    grid-template-columns: 120px repeat(12, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.sp-skeleton-cohort-label {
    height: 32px;
    border-radius: 4px;
}

.sp-skeleton-cohort-cell {
    height: 32px;
    border-radius: 4px;
}

/* ==========================================================================
   Cohort Heatmap Legend
   ========================================================================== */

.sp-cohort-legend {
    padding: 16px 20px;
    border-top: 1px solid var(--sp-border-default);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.sp-cohort-legend-title {
    font-size: 12px;
    color: var(--sp-text-muted);
    font-weight: 500;
}

.sp-cohort-legend-items {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.sp-cohort-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-cohort-legend-swatch {
    width: 24px;
    height: 18px;
    border-radius: 3px;
}

.sp-cohort-legend-label {
    font-size: 11px;
    color: var(--sp-text-muted);
}

/* Retention level colors */
.sp-retention-50 { background: #059669; }
.sp-retention-40 { background: #10b981; }
.sp-retention-30 { background: #34d399; }
.sp-retention-20 { background: #6ee7b7; }
.sp-retention-10 { background: #a7f3d0; }
.sp-retention-5  { background: #d1fae5; border: 1px solid var(--sp-border-default); }
.sp-retention-0  { background: var(--sp-bg-input); border: 1px solid var(--sp-border-default); }

/* ==========================================================================
   Inline Dropdown Control
   ========================================================================== */

.sp-inline-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sp-inline-control-label {
    font-size: 12px;
    color: var(--sp-text-muted);
    white-space: nowrap;
}

.sp-inline-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    border-radius: 6px;
    color: var(--sp-text-primary);
    font-size: 13px;
    cursor: pointer;
}

.sp-inline-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--sp-bg-dropdown);
    border: 1px solid var(--sp-border-default);
    border-radius: 6px;
    overflow: hidden;
    z-index: 50;
    min-width: 140px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.sp-flex-shrink-0 {
    flex-shrink: 0;
}

.sp-card-mt {
    margin-top: 20px;
}

/* ==========================================================================
   Product Skeleton
   ========================================================================== */

.sp-skeleton-btn-lg {
    height: 32px;
    width: 180px;
    border-radius: 6px;
}

.sp-skeleton-btn-sm {
    height: 32px;
    width: 50px;
    border-radius: 6px;
}

.sp-skeleton-product-header {
    display: grid;
    grid-template-columns: 2fr repeat(12, 1fr);
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--sp-border-default);
}

.sp-skeleton-product-row {
    display: grid;
    grid-template-columns: 2fr repeat(12, 1fr);
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--sp-border-subtle);
}

.sp-skeleton-cell-sm {
    height: 11px;
    width: 40px;
}

/* ==========================================================================
   Dropdown Variations
   ========================================================================== */

.sp-dropdown-scrollable {
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
}

.sp-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-truncate-180 {
    max-width: 180px;
}

/* ==========================================================================
   Cohort Heatmap Table
   ========================================================================== */

.sp-cohort-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 900px;
}

.sp-cohort-thead {
    position: sticky;
    top: 0;
    z-index: 20;
}

.sp-cohort-th {
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-color-brand);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--sp-bg-card);
}

.sp-cohort-th-left {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 30;
    min-width: 100px;
}

.sp-cohort-th-right {
    text-align: right;
    min-width: 70px;
}

.sp-cohort-th-center {
    text-align: center;
    padding: 14px 8px;
    min-width: 60px;
}

.sp-cohort-td-label {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-text-primary);
    background: var(--sp-bg-card);
    position: sticky;
    left: 0;
    z-index: 10;
    border-bottom: 1px solid var(--sp-border-default);
}

.sp-cohort-td-size {
    padding: 8px 16px;
    font-size: 13px;
    color: var(--sp-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--sp-border-default);
}

.sp-cohort-td-cell {
    padding: 4px;
    border-bottom: 1px solid var(--sp-border-default);
}

.sp-cohort-cell {
    padding: 10px 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-cohort-cell-empty {
    background: var(--sp-bg-input);
    color: var(--sp-text-muted);
    font-weight: 400;
}

/* ==========================================================================
   Customer Engagement Page Styles
   ========================================================================== */

/* CE KPI Grid */
.ce-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.ce-kpi {
    background: var(--sp-bg-card);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--sp-border-default);
}

.ce-kpi-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ce-kpi-icon {
    width: 32px;
    height: 32px;
    background: rgba(0, 102, 84, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-color-brand);
}

.ce-kpi-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ce-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--sp-text-primary);
    line-height: 1;
}

.ce-kpi-value-success { color: var(--sp-color-success); }
.ce-kpi-value-promo { color: var(--sp-color-teal); }
.ce-kpi-value-default { color: var(--sp-text-primary); }

.ce-kpi-desc {
    margin-top: 8px;
    font-size: 11px;
    color: var(--sp-text-muted);
}

/* CE Table Container */
.ce-table-container {
    background: var(--sp-bg-card);
    border-radius: 8px;
    border: 1px solid var(--sp-border-default);
    overflow: hidden;
}

.ce-table-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--sp-border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.ce-table-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-text-primary);
    margin: 0;
}

.ce-table-count {
    font-size: 12px;
    color: var(--sp-text-muted);
    margin: 2px 0 0 0;
}

.ce-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* CE Table Scroll */
.ce-table-scroll {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
}

.ce-table-scroll.fullscreen-mode {
    max-height: none;
    flex: 1;
}

/* CE Table */
.ce-table {
    width: 100%;
    border-collapse: collapse;
}

.ce-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sp-color-brand);
    background: var(--sp-bg-card);
    border-bottom: 1px solid var(--sp-border-default);
    position: sticky;
    top: 0;
    white-space: nowrap;
}

.ce-table thead th.sortable {
    cursor: pointer;
}

.ce-table thead th.sortable:hover {
    color: var(--sp-color-brand);
}

.ce-table thead th.sorted {
    color: var(--sp-color-brand);
}

.ce-table thead th .sort-icon {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
}

.ce-table thead th.right {
    text-align: right;
}

.ce-table tbody td {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--sp-text-primary);
    border-bottom: 1px solid var(--sp-border-subtle);
}

.ce-table tbody tr:hover {
    background: var(--sp-bg-card-hover);
}

/* CE Metric Cells */
.ce-metric {
    font-variant-numeric: tabular-nums;
}

.ce-bar {
    width: 56px;
    flex: none;
    height: 6px;
    background: var(--sp-border-default);
    border-radius: 3px;
    overflow: hidden;
}

.ce-table tr:hover .ce-bar {
    background: var(--sp-border-hover);
}

.ce-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ce-bar-fill.green { background: var(--sp-color-success); }
.ce-bar-fill.teal { background: var(--sp-color-teal); }
.ce-bar-fill.gray { background: #666; }

.ce-bar-value {
    font-size: 12px;
    font-weight: 500;
    min-width: 45px;
    text-align: right;
}

.ce-bar-value-success { color: var(--sp-color-success); }
.ce-bar-value-promo { color: var(--sp-color-teal); }
.ce-bar-value-muted { color: #888; }

/* CE Legend */
.ce-legend {
    padding: 14px 20px;
    border-top: 1px solid var(--sp-border-default);
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12px;
}

.ce-legend-title {
    color: #666;
    font-weight: 500;
}

.ce-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ce-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ce-legend-dot-success { background: var(--sp-color-success); }
.ce-legend-dot-muted { background: #444; }

.ce-legend-text {
    color: var(--sp-text-muted);
}

/* CE Empty State */
.ce-empty {
    padding: 48px;
    text-align: center;
}

.ce-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--sp-text-muted);
    margin: 0 auto 12px;
}

.ce-empty-text {
    font-size: 14px;
    color: var(--sp-text-muted);
    margin: 0;
}

/* ==========================================================================
   Metric Filter Dropdowns (inline small filters)
   ========================================================================== */

.sp-metric-filters {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-metric-filter {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-metric-filter-label {
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-metric-filter-dropdown {
    position: relative;
    display: inline-block;
}

.sp-metric-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--sp-border-default);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--sp-text-muted);
    cursor: pointer;
}

.sp-metric-filter-trigger.active {
    border-color: var(--sp-accent-positive);
    color: var(--sp-accent-positive);
}

.sp-metric-filter-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    border-radius: 4px;
    overflow: hidden;
    min-width: 80px;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.sp-metric-filter-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--sp-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
}

.sp-metric-filter-option:hover {
    background: var(--sp-bg-card-hover);
}

.sp-metric-filter-option.active {
    color: var(--sp-accent-positive);
    background: var(--sp-bg-card-hover);
}

.sp-metric-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    font-size: 11px;
    color: var(--sp-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
}

.sp-metric-clear-btn:hover {
    color: var(--sp-text-secondary);
}

/* ==========================================================================
   Table Min-Width Utilities
   ========================================================================== */

.sp-min-w-80 { min-width: 80px; }
.sp-min-w-90 { min-width: 90px; }
.sp-min-w-120 { min-width: 120px; }
.sp-min-w-140 { min-width: 140px; }
.sp-min-w-180 { min-width: 180px; }

/* ==========================================================================
   Fullscreen Button
   ========================================================================== */

.sp-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border-default);
    border-radius: 6px;
    color: var(--sp-text-muted);
    cursor: pointer;
}

.sp-fullscreen-btn:hover {
    background: var(--sp-bg-card-hover);
}

/* ==========================================================================
   Table Skeleton (Customer Engagement)
   ========================================================================== */

.sp-skeleton-ce-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--sp-border-default);
}

.sp-skeleton-ce-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--sp-border-subtle);
}

/* ==========================================================================
   Sort Icon Inactive State
   ========================================================================== */

.sp-sort-icon-inactive {
    opacity: 0.4;
}

/* ==========================================================================
   Additional Skeleton Width Helpers
   ========================================================================== */

.sp-skeleton-cell-65 { height: 14px; width: 65%; }
.sp-skeleton-cell-55 { height: 14px; width: 55%; }

/* ==========================================================================
   Retention Page Styles
   ========================================================================== */

/* Inline change icons */
.sp-change-icon {
    display: inline;
    vertical-align: middle;
}

/* Alert Title Color Variants */
.sp-alert-title-success { color: var(--sp-accent-positive); }
.sp-alert-title-muted { color: var(--sp-text-secondary); }

/* Grid Gap Utilities */
.sp-gap-16 { gap: 16px; }

/* Granularity Filter Dropdown */
.sp-granularity-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-granularity-label {
    font-size: 12px;
    color: var(--sp-text-muted);
}

.sp-granularity-dropdown {
    position: relative;
}

/* Table Header Color Variants */
.sp-th-success { color: var(--sp-color-success); }
.sp-th-danger { color: var(--sp-color-danger); }

/* Understanding Metrics Collapsible (Retention) */
.sp-understanding-section {
    background: var(--sp-bg-card);
    border-radius: 8px;
    border: 1px solid var(--sp-border-default);
}

.sp-understanding-trigger {
    width: 100%;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.sp-understanding-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-text-muted);
}

.sp-understanding-content {
    padding: 0 20px 20px;
    border-top: 1px solid var(--sp-border-default);
}

.sp-understanding-inner {
    padding-top: 16px;
}

.sp-understanding-intro {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin: 0 0 16px 0;
}

.sp-understanding-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-primary);
    margin: 0 0 12px 0;
}

.sp-understanding-note {
    font-size: 11px;
    color: var(--sp-text-muted);
    margin: 0;
}

/* Chart Legend Line Swatch */
.sp-legend-line {
    display: inline-block;
    width: 20px;
    height: 3px;
    border-radius: 2px;
}

.sp-legend-line-green { background: #059669; }
.sp-legend-line-red { background: #dc2626; }

/* ==========================================================================
   Market Share Page Styles
   ========================================================================== */

/* Market Table Container */
.market-table-container {
    background: var(--sp-bg-card);
    border-radius: 8px;
    border: 1px solid var(--sp-border-default);
    overflow: hidden;
}

.market-table-scroll {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;
}

.market-table-scroll.fullscreen-mode {
    max-height: none;
    flex: 1;
}

/* Market Table */
.market-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.market-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sp-color-brand);
    border-bottom: 2px solid var(--sp-border-default);
    background: var(--sp-bg-card);
    position: sticky;
    top: 0;
}

.market-table thead th.right {
    text-align: right;
}

.market-table thead th.min-100 {
    min-width: 100px;
}

.market-table tbody td {
    padding: 12px 16px;
    font-size: 12px;
    color: var(--sp-text-primary);
    border-bottom: 1px solid var(--sp-border-subtle);
}

.market-table tbody td.right {
    text-align: right;
    font-weight: 600;
}

.market-table tbody td.sub {
    padding: 10px 16px;
    padding-left: 40px;
    color: var(--sp-text-secondary);
}

.market-table tbody td.sub.right {
    padding-left: 16px;
    color: var(--sp-text-muted);
}

/* Expand Icon */
.expand-icon {
    display: inline-flex;
    transition: transform 0.2s;
    color: var(--sp-text-muted);
}

.expand-icon.rotated {
    transform: rotate(90deg);
}

/* Category Row */
.category-parent {
    cursor: pointer;
}

.category-parent:hover {
    background: var(--sp-bg-card-hover);
}

.category-child {
    background: var(--sp-bg-input);
}

/* Category Name Cell */
.market-category-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.market-category-name {
    font-weight: 600;
}

.market-category-count {
    font-size: 10px;
    color: var(--sp-text-muted);
    background: var(--sp-bg-input);
    padding: 2px 6px;
    border-radius: 4px;
}

.market-spacer {
    width: 12px;
}

/* Market Table Header */
.market-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sp-border-default);
    flex-shrink: 0;
}

.market-table-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-text-primary);
}

.market-table-subtitle {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--sp-text-muted);
}

.market-table-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Search Input */
.sp-search-wrapper {
    position: relative;
}

.sp-search-input {
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    border-radius: 6px;
    padding: 6px 10px 6px 32px;
    font-size: 13px;
    color: var(--sp-text-primary);
    width: 180px;
    outline: none;
}

.sp-search-input:focus {
    border-color: var(--sp-color-brand);
}

.sp-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

/* Market Skeleton Grid */
.sp-skeleton-market-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--sp-border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sp-skeleton-market-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--sp-border-subtle);
}

.sp-skeleton-market-cell {
    padding: 12px 16px;
}

/* Additional skeleton width utilities */
.sp-skeleton-w-45 { height: 14px; width: 45px; }
.sp-skeleton-w-50 { height: 10px; width: 50px; }
.sp-skeleton-w-60 { height: 10px; width: 60px; }
.sp-skeleton-w-70 { height: 10px; width: 70px; }
.sp-skeleton-w-180 { height: 18px; width: 180px; }

/* Centered skeleton */
.sp-skeleton-center {
    margin: 0 auto;
}

/* ==========================================================================
   Trends Page Styles
   ========================================================================== */

/* Trends Chart Container */
.trends-chart-container {
    background: var(--sp-bg-card);
    border-radius: 8px;
    border: 1px solid var(--sp-border-default);
}

.trends-two-col-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.trends-grid-cell {
    background: var(--sp-bg-card);
    border-radius: 8px;
    border: 1px solid var(--sp-border-default);
}

/* Trends Chart Header */
.trends-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sp-border-default);
    flex-wrap: wrap;
    gap: 12px;
}

.trends-chart-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-text-primary);
}

.trends-chart-subtitle {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--sp-text-muted);
}

.trends-competitor-hint {
    color: var(--sp-accent-positive);
}

/* Trends Button Group */
.trends-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Toggle Button */
.sp-toggle-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sp-text-secondary);
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border-default);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}

.sp-toggle-btn-sm:hover {
    background: var(--sp-bg-card-hover);
}

.sp-toggle-btn-sm.active {
    color: var(--sp-accent-positive);
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--sp-accent-positive);
}

/* Trends Table */
.trends-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 400px;
}

.trends-table {
    width: 100%;
    border-collapse: collapse;
}

.trends-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-color-brand);
    border-bottom: 1px solid var(--sp-border-default);
    position: sticky;
    top: 0;
    background: var(--sp-bg-card);
}

.trends-table th.right {
    text-align: right;
}

.trends-table td {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--sp-text-primary);
    border-bottom: 1px solid var(--sp-border-subtle);
}

.trends-table td.right {
    text-align: right;
    color: var(--sp-text-secondary);
}

.trends-table td.empty {
    padding: 32px;
    text-align: center;
    color: var(--sp-text-muted);
}

/* Trends Chart Body */
.trends-chart-body {
    padding: 20px;
}

/* Trends Skeleton */
.trends-skeleton-card {
    background: var(--sp-bg-card);
    border-radius: 8px;
    border: 1px solid var(--sp-border-default);
    margin-bottom: 20px;
}

.trends-skeleton-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sp-border-default);
}

.trends-skeleton-btns {
    display: flex;
    gap: 8px;
}

.trends-skeleton-chart {
    padding: 20px;
    height: 300px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.trends-skeleton-chart-sm {
    padding: 20px;
    height: 250px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.trends-skeleton-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.trends-skeleton-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
}

/* Skeleton Size Helpers for Trends */
.sp-skeleton-title-sm { height: 15px; width: 120px; margin-bottom: 6px; }
.sp-skeleton-subtitle-sm { height: 12px; width: 200px; }
.sp-skeleton-btn { height: 32px; width: 80px; border-radius: 6px; }
.sp-skeleton-btn-xs { height: 32px; width: 50px; border-radius: 6px; }
.sp-skeleton-title-md { height: 15px; width: 140px; }
.sp-skeleton-btn-md { height: 28px; width: 60px; border-radius: 6px; }

/* ==========================================================================
   Subscription Products Page Styles
   ========================================================================== */

/* Subscription Skeleton KPI Grid */
.subprod-skeleton-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.subprod-skeleton-kpi-card {
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    border-radius: 12px;
    padding: 20px;
}

/* Subscription Skeleton Table */
.subprod-skeleton-section {
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    border-radius: 12px;
    padding: 24px;
}

.subprod-skeleton-title { height: 18px; width: 170px; margin-bottom: 8px; }
.subprod-skeleton-subtitle { height: 13px; width: 200px; margin-bottom: 20px; }
.subprod-skeleton-table-wrapper { overflow-x: auto; }
.subprod-skeleton-table { width: 100%; border-collapse: collapse; }

.subprod-skeleton-th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sp-border-default);
}

.subprod-skeleton-row {
    border-bottom: 1px solid var(--sp-border-subtle);
}

.subprod-skeleton-td {
    padding: 14px 16px;
}

/* Skeleton size helpers for subscription products */
.sp-skeleton-w-35 { height: 10px; width: 35px; }
.sp-skeleton-w-40 { height: 10px; width: 40px; }
.sp-skeleton-w-60-sm { height: 10px; width: 60px; }
.sp-skeleton-w-80 { height: 11px; width: 80px; }
.sp-skeleton-w-90 { height: 14px; width: 90px; }
.sp-skeleton-w-55 { height: 14px; width: 55px; }
.sp-skeleton-w-65 { height: 14px; width: 65px; }

/* Chart Placeholders */
.subprod-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

.subprod-chart-section {
    border: 1px dashed var(--sp-border-default);
}

.subprod-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.subprod-awaiting-badge {
    font-size: 10px;
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 500;
}

.subprod-chart-placeholder {
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.subprod-chart-placeholder-icon {
    opacity: 0.4;
    margin-bottom: 12px;
}

.subprod-chart-placeholder-text {
    font-size: 14px;
    margin: 0;
    color: var(--sp-text-muted);
}

.subprod-chart-placeholder-subtext {
    font-size: 12px;
    margin: 8px 0 0 0;
    color: var(--sp-text-muted);
}

.subprod-chart-canvas {
    height: 280px;
}

/* Data Integration Info Box */
.subprod-info-box {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border-default);
    border-radius: 8px;
    padding: 16px;
    margin-top: 24px;
}

.subprod-info-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.subprod-info-icon {
    opacity: 0.5;
}

.subprod-info-text {
    color: var(--sp-text-muted);
    font-size: 13px;
    margin: 0;
}

.subprod-info-strong {
    color: var(--sp-text-secondary);
}

.subprod-info-code {
    background: var(--sp-bg-card-hover);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* Dropdown Chevron Auto-margin */
.sp-chevron-right {
    margin-left: auto;
}

/* ==========================================================================
   Subscription Predictions Page Styles
   ========================================================================== */

/* Subscription Predictions Skeleton KPI Grid */
.subpred-skeleton-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.subpred-skeleton-kpi-card {
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    border-radius: 12px;
    padding: 20px;
}

/* Subscription Predictions Skeleton Section */
.subpred-skeleton-section {
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.subpred-skeleton-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.subpred-skeleton-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.subpred-skeleton-table-wrapper { overflow-x: auto; }
.subpred-skeleton-table { width: 100%; border-collapse: collapse; }

.subpred-skeleton-th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sp-border-default);
}

.subpred-skeleton-row {
    border-bottom: 1px solid var(--sp-border-subtle);
}

.subpred-skeleton-td {
    padding: 14px 16px;
}

/* Skeleton size helpers for subscription predictions */
.sp-skeleton-h11 { height: 11px; }
.sp-skeleton-h12 { height: 12px; }
.sp-skeleton-h13 { height: 13px; }
.sp-skeleton-h14 { height: 14px; }
.sp-skeleton-h18 { height: 18px; }
.sp-skeleton-h24 { height: 24px; }
.sp-skeleton-h28 { height: 28px; }

.sp-skeleton-w75pct { width: 75%; }
.sp-skeleton-w50pct { width: 50%; }
.sp-skeleton-w70pct { width: 70%; }

.sp-skeleton-w100 { width: 100px; }
.sp-skeleton-w130 { width: 130px; }
.sp-skeleton-w140 { width: 140px; }
.sp-skeleton-w160 { width: 160px; }
.sp-skeleton-w200 { width: 200px; }
.sp-skeleton-w220 { width: 220px; }
.sp-skeleton-w280 { width: 280px; }

.sp-skeleton-rounded-full { border-radius: 9999px; }
.sp-skeleton-rounded-circle { border-radius: 50%; }

.sp-skeleton-mb-4 { margin-bottom: 4px; }
.sp-skeleton-mb-6 { margin-bottom: 6px; }
.sp-skeleton-mb-10 { margin-bottom: 10px; }
.sp-skeleton-mb-20 { margin-bottom: 20px; }

/* Section Header Flex */
.subpred-section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* Small fixed-width skeleton elements */
.sp-skeleton-w-24 { width: 24px; }
.sp-skeleton-w-40 { width: 40px; }
.sp-skeleton-w-55 { width: 55px; }
.sp-skeleton-w-90 { width: 90px; }

/* ==========================================================================
   Product Deep Dive Page Styles
   ========================================================================== */

/* Page Title Wrapper */
.deepdive-page-header {
    margin-bottom: 24px;
}

/* Product Selector Dropdown - Text Truncation */
.deepdive-selector-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deepdive-loading-text {
    color: var(--sp-color-brand);
}

.deepdive-chevron {
    flex-shrink: 0;
}

/* Product Selector Search Dropdown */
.deepdive-dropdown-scrollable {
    max-height: 350px;
}

.deepdive-search-wrapper {
    padding: 8px 12px;
    border-bottom: 1px solid var(--sp-border-default);
    position: sticky;
    top: 0;
    background: var(--sp-bg-dropdown);
    z-index: 10;
}

.deepdive-search-inner {
    position: relative;
}

.deepdive-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sp-text-muted);
}

.deepdive-search-input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    border-radius: 6px;
    font-size: 13px;
    color: var(--sp-text-primary);
    outline: none;
}

.deepdive-product-list {
    max-height: 280px;
    overflow-y: auto;
}

.deepdive-dropdown-item-sm {
    font-size: 13px;
}

.deepdive-sku-hint {
    color: var(--sp-text-muted);
    font-size: 11px;
}

.deepdive-no-results {
    padding: 16px;
    text-align: center;
    color: var(--sp-text-muted);
    font-size: 13px;
}

/* Deep Dive Skeleton */
.deepdive-skeleton-selector {
    background: var(--sp-bg-card);
    border-radius: 8px;
    padding: 16px 20px;
    border: 1px solid var(--sp-border-default);
    margin-bottom: 20px;
}

.deepdive-skeleton-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.deepdive-skeleton-kpi-card {
    background: var(--sp-bg-card);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--sp-border-default);
}

.deepdive-skeleton-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.deepdive-skeleton-chart-card {
    background: var(--sp-bg-card);
    border-radius: 8px;
    border: 1px solid var(--sp-border-default);
}

.deepdive-skeleton-chart-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--sp-border-default);
}

.deepdive-skeleton-chart-body {
    padding: 20px;
    height: 280px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* Heatmap Tooltip Content */
.heatmap-tooltip-title {
    font-weight: 600;
    color: var(--sp-text-primary);
}

.heatmap-tooltip-revenue {
    color: var(--sp-color-brand);
    margin-top: 4px;
}

.heatmap-tooltip-units {
    color: var(--sp-text-muted);
}

/* Performance Table Month Cell */
.perf-table-month {
    font-weight: 500;
    color: var(--sp-text-primary);
}

/* Insight Value Font Size Small */
.insight-value-sm {
    font-size: 13px;
}

/* Margin Value Color */
.margin-value-positive { color: var(--sp-color-brand); }
.margin-value-negative { color: #ef4444; }

/* Insight Reorder Rate Highlight */
.insight-value-highlight { color: var(--sp-color-brand); }

/* Skeleton size helpers for deep dive */
.sp-skeleton-w-300 { width: 300px; }
.sp-skeleton-h36 { height: 36px; }
.sp-skeleton-w60pct { width: 60%; }
.sp-skeleton-w55pct { width: 55%; }
.sp-skeleton-w40pct { width: 40%; }
.sp-skeleton-rounded-6 { border-radius: 6px; }
.sp-skeleton-w-140 { width: 140px; }

/* ==========================================================================
   Subscriptions Overview Page Styles
   ========================================================================== */

/* KPI Value Color Variants */
.sp-kpi-value-green { color: var(--sp-accent-positive); }
.sp-kpi-value-blue { color: #3b82f6; }
.sp-kpi-value-purple { color: #a78bfa; }
.sp-kpi-value-amber { color: #f59e0b; }
.sp-kpi-value-red { color: #ef4444; }

/* KPI Value Size Variants */
.sp-kpi-value-sm { font-size: 24px; }

/* Chart container centered variant */
.sp-chart-container-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Frequency section grid layout */
.subover-frequency-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* Card body with right border */
.sp-card-body-border-right {
    border-right: 1px solid var(--sp-border-default);
}

/* Chart container height variants */
.subover-chart-container-260 {
    position: relative;
    height: 260px;
}

/* Table section animation delays */
.table-section-delay-450 {
    animation-delay: 450ms;
}

.table-section-delay-550 {
    animation-delay: 550ms;
}

/* Table cell semantic colors */
.sp-td-positive { color: var(--sp-accent-positive); }
.sp-td-negative { color: #ef4444; }

/* Empty icon size variant */
.sp-empty-icon-48 {
    width: 48px;
    height: 48px;
}

/* Subscriptions Overview Skeleton Styles */
.subover-skeleton-kpi-label {
    height: 11px;
    width: 55%;
    margin-bottom: 12px;
}

.subover-skeleton-kpi-value {
    height: 28px;
    width: 75%;
    margin-bottom: 10px;
}

.subover-skeleton-kpi-sublabel {
    height: 12px;
    width: 45%;
}

.subover-skeleton-kpi-value-only {
    height: 28px;
    width: 75%;
}

.subover-skeleton-chart-title {
    height: 15px;
    width: 150px;
}

.subover-skeleton-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.subover-skeleton-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
}

/* Sortable table header with cursor */
.sp-th-sortable-click {
    cursor: pointer;
}

/* ==========================================================================
   Dashboard Page Styles
   ========================================================================== */

/* Chart section animation delays */
.chart-section-delay-350 {
    animation-delay: 350ms;
}

/* KPI Value without margin (for Active SKUs card) */
.sp-kpi-value-no-margin {
    margin: 0;
}

/* Dashboard skeleton styles */
.dash-skeleton-title {
    height: 15px;
    width: 120px;
}

.dash-skeleton-btn-lg {
    height: 32px;
    width: 70px;
    border-radius: 6px;
}

.dash-skeleton-btn {
    height: 32px;
    width: 50px;
    border-radius: 6px;
}

.dash-skeleton-chart-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
}

.dash-skeleton-sku-title {
    height: 15px;
    width: 150px;
}

.dash-skeleton-sku-label {
    width: 80px;
    height: 14px;
}

.dash-skeleton-sku-bar {
    flex: 1;
    height: 20px;
    border-radius: 4px;
}

.dash-skeleton-table-title {
    height: 15px;
    width: 110px;
}

.dash-skeleton-th {
    height: 11px;
}

.dash-skeleton-th-60 { width: 60px; }
.dash-skeleton-th-55 { width: 55px; }
.dash-skeleton-th-50 { width: 50px; }
.dash-skeleton-th-40 { width: 40px; }

.dash-skeleton-td {
    height: 14px;
}

.dash-skeleton-td-70 { width: 70%; }
.dash-skeleton-td-50 { width: 50%; }
.dash-skeleton-td-45 { width: 45%; }

/* Table grid skeleton sections */
.sp-skeleton-table-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--sp-border-default);
}

.sp-skeleton-table-row {
    padding: 14px 20px;
    border-bottom: 1px solid var(--sp-border-subtle);
}

/* ==========================================================================
   Benchmarks Page Styles
   ========================================================================== */

/* Benchmark skeleton styles */
.bench-skeleton-kpi-label {
    height: 11px;
    width: 70%;
    margin-bottom: 12px;
}

.bench-skeleton-kpi-value {
    height: 28px;
    width: 60%;
    margin-bottom: 10px;
}

.bench-skeleton-kpi-sublabel {
    height: 12px;
    width: 45%;
}

.bench-skeleton-title {
    height: 15px;
    width: 180px;
}

.bench-skeleton-title-sm {
    height: 15px;
    width: 160px;
}

.bench-skeleton-th-50 {
    height: 11px;
    width: 50px;
}

.bench-skeleton-th-80 {
    height: 11px;
    width: 80px;
}

.bench-skeleton-bar-label {
    height: 12px;
    width: 80px;
}

.bench-skeleton-bar {
    width: 80%;
    border-radius: 6px 6px 0 0;
}

.bench-skeleton-td-70 {
    height: 14px;
    width: 70%;
}

/* Awaiting data alert styling */
.bench-awaiting-alert {
    margin-top: 12px;
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.2);
}

.bench-awaiting-icon {
    color: #eab308;
    flex-shrink: 0;
}

.bench-awaiting-title {
    font-size: 12px;
    color: #fbbf24;
    font-weight: 500;
}

.sp-alert-message-lh {
    line-height: 1.5;
}

/* KPI card with reduced opacity */
.sp-kpi-card-muted {
    opacity: 0.7;
}

/* Warning icon color */
.sp-icon-warning {
    color: #eab308;
}

/* Benchmark comparison table */
.bench-table {
    font-size: 12px;
}

.bench-table-head {
    background: var(--sp-bg-card);
}

.bench-th {
    padding: 12px 16px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--sp-border-default);
}

.bench-th-left {
    text-align: left;
    color: var(--sp-color-brand);
}

.bench-th-right {
    text-align: right;
}

.bench-tr {
    border-bottom: 1px solid var(--sp-border-subtle);
}

.bench-td {
    padding: 12px 16px;
    font-size: 12px;
}

.bench-td-month {
    color: var(--sp-text-primary);
    font-weight: 500;
}

.bench-td-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bench-td-brand {
    border-left: 2px solid #10b981;
    color: #10b981;
    font-weight: 600;
}

.bench-td-brand-winner {
    border-left: 2px solid #10b981;
    color: #10b981;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
}

.bench-td-winner {
    font-weight: 600;
    color: var(--sp-text-primary);
}

.bench-td-muted {
    color: var(--sp-text-muted);
}

.bench-winner-icon {
    margin-left: 4px;
    font-size: 10px;
}

.sp-empty-cell-lg {
    padding: 48px;
}

/* ==========================================================================
   Marketing Page Specific Styles (FE-002)
   ========================================================================== */

/* Skeleton chart alignment */
.mkt-skeleton-chart-bottom {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* Truncated description cell */
.mkt-td-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Date range cell */
.mkt-td-date-range {
    font-size: 11px;
    color: var(--sp-text-muted);
}

/* Footer note style */
.mkt-footer-note {
    font-size: 12px;
    color: var(--sp-text-muted);
    margin-top: 16px;
}

/* Rebate table cells */
.mkt-td-muted {
    color: var(--sp-text-muted);
}

.mkt-td-total-rebate {
    font-weight: 600;
    color: #f97316;
}

/* Rebate tfoot row */
.mkt-tfoot-row {
    border-top: 2px solid var(--sp-border-default);
    font-weight: 600;
}

.mkt-tfoot-dash {
    color: var(--sp-text-muted);
}

.mkt-tfoot-orange {
    color: #f97316;
}

/* Our Investment 4-col grid */
.mkt-investment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Chart card container */
.mkt-chart-card {
    background: var(--sp-bg-card);
    border-radius: 10px;
    padding: 20px;
}

/* Chart card title */
.mkt-chart-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-text-primary);
    margin-bottom: 16px;
}

/* Chart container 280px */
.mkt-chart-280 {
    height: 280px;
}

/* Scrollable table container */
.mkt-table-scroll {
    max-height: 280px;
    overflow-y: auto;
}

/* Icon opacity utility */
.mkt-icon-muted {
    opacity: 0.5;
}

/* Section title with flex */
.mkt-section-title-flex {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Personalized offers section header */
.mkt-po-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-text-primary);
    margin-bottom: 12px;
}

.mkt-po-heading-spaced {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-text-primary);
    margin: 20px 0 12px;
}

/* Times featured cell */
.mkt-td-featured {
    color: var(--sp-text-primary);
    font-weight: 600;
}

/* No data small text */
.mkt-no-data-hint {
    font-size: 12px;
    color: var(--sp-text-muted);
    margin-top: 4px;
}

/* Compare card border */
.mkt-compare-card-bordered {
    border: 1px solid #333;
}

/* Grid with no bottom margin */
.mkt-grid-2-no-mb {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 0;
}

/* Insights footer note */
.mkt-insights-footer {
    font-size: 12px;
    color: var(--sp-text-muted);
    margin-top: 16px;
}

/* Section with dashed border */
.mkt-section-dashed {
    border: 1px dashed var(--sp-border-default);
}

/* Awaiting data badge */
.mkt-awaiting-badge {
    font-size: 10px;
    background: rgba(136, 136, 136, 0.15);
    color: #888;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 500;
}

/* Traffic stats grid */
.mkt-traffic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

/* Traffic stat card */
.mkt-traffic-card {
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

/* Traffic stat label */
.mkt-traffic-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-text-muted);
    margin: 0;
}

/* Traffic stat value */
.mkt-traffic-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--sp-text-muted);
    margin: 8px 0 0 0;
}

.mkt-traffic-value-blue {
    font-size: 28px;
    font-weight: 700;
    color: #3b82f6;
    margin: 8px 0 0 0;
}

.mkt-traffic-value-purple {
    font-size: 28px;
    font-weight: 700;
    color: #8b5cf6;
    margin: 8px 0 0 0;
}

.mkt-traffic-value-green {
    font-size: 28px;
    font-weight: 700;
    color: #10b981;
    margin: 8px 0 0 0;
}

/* Traffic muted opacity */
.mkt-traffic-muted {
    opacity: 0.6;
}

/* Awaiting data card */
.mkt-awaiting-card {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border-default);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

/* Awaiting data icon row */
.mkt-awaiting-icon-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* Awaiting data icon */
.mkt-awaiting-icon {
    color: var(--sp-text-muted);
}

/* Awaiting data title */
.mkt-awaiting-title {
    color: var(--sp-text-muted);
    font-size: 14px;
    font-weight: 500;
}

/* Awaiting data description */
.mkt-awaiting-desc {
    color: var(--sp-text-muted);
    font-size: 13px;
    margin: 0 0 16px 0;
}

/* Awaiting data contact button */
.mkt-awaiting-btn {
    display: inline-block;
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    color: var(--sp-text-muted);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    text-decoration: none;
}

/* Channel contribution grid */
.mkt-channel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Channel card */
.mkt-channel-card {
    background: var(--sp-bg-input);
    border: 1px solid var(--sp-border-default);
    border-radius: 8px;
    padding: 24px;
}

/* Channel donut placeholder */
.mkt-channel-donut-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Channel donut ring */
.mkt-channel-donut-ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 20px solid var(--sp-border-default);
    position: relative;
}

/* Channel donut center */
.mkt-channel-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Channel donut center text */
.mkt-channel-donut-text {
    color: var(--sp-text-muted);
    font-size: 12px;
}

/* Channel legend title */
.mkt-channel-legend-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Channel legend list */
.mkt-channel-legend-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Channel legend item */
.mkt-channel-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Channel legend swatch */
.mkt-channel-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Channel legend label */
.mkt-channel-label {
    color: var(--sp-text-muted);
    font-size: 13px;
}

.mkt-channel-label-active {
    color: var(--sp-text-secondary);
    font-size: 13px;
}

/* Channel legend value */
.mkt-channel-value {
    color: var(--sp-text-muted);
    font-size: 13px;
    margin-left: auto;
}

.mkt-channel-value-active {
    color: var(--sp-text-primary);
    font-size: 13px;
    font-weight: 600;
    margin-left: auto;
}

/* Awaiting data card margin top */
.mkt-awaiting-card-mt {
    margin-top: 16px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border-default);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

/* CTA strong text */
.mkt-cta-strong {
    color: var(--sp-text-primary);
}

/* ==========================================================================
   Brand Selector Spinner (FE-010)
   ========================================================================== */

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sp-spinner {
    width: 14px;
    height: 14px;
    animation: spin 1s linear infinite;
}

.sp-btn-primary {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: var(--sp-color-brand);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.sp-btn-primary:hover {
    background: var(--sp-color-brand-hover);
}

/* Brand selector helpers */
.sp-filter-label-nowrap {
    white-space: nowrap;
}

.sp-brand-name-text {
    font-size: 13px;
    color: var(--sp-text-primary);
}

/* Brand selector dropdown */
.sp-dropdown-inline {
    display: inline-flex !important;
}

.sp-filter-inline-flex {
    display: inline-flex !important;
}

.sp-dropdown-trigger-nowrap {
    white-space: nowrap;
}

/* Spinner opacity */
.sp-spinner-circle {
    opacity: 0.25;
}

.sp-spinner-path {
    opacity: 0.75;
}

/* Brand selector dropdown menu override */
.sp-dropdown-menu-brand {
    min-width: 220px;
    border-radius: 8px;
    margin-top: 8px;
}

/* Brand list scrollable */
.sp-brand-list-scroll {
    max-height: 200px;
    overflow-y: auto;
}

/* Brand item in dropdown */
.sp-dropdown-item-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

/* Spacer for unchecked item */
.sp-icon-spacer {
    width: 14px;
}

/* Apply button container */
.sp-apply-container {
    padding: 10px 12px;
    border-top: 1px solid var(--sp-border-default);
}

/* =============================================
   Product Intelligence — Combined 3-panel card
   ============================================= */
.intel-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: start;
}

.intel-panel {
    padding: 0 24px;
}

.intel-panel:first-child { padding-left: 0; }
.intel-panel:last-child  { padding-right: 0; }

.intel-divider {
    width: 1px;
    background: var(--sp-border-default);
    align-self: stretch;
    min-height: 160px;
}

/* Health stat rows — compact progress-bar style */
.health-stat {
    margin-bottom: 18px;
}

.health-stat:last-child {
    margin-bottom: 0;
}

.health-stat-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}

.health-stat-icon {
    width: 13px;
    height: 13px;
    color: var(--sp-text-muted);
    flex-shrink: 0;
}

.health-stat-label {
    font-size: 12px;
    color: var(--sp-text-muted);
    flex: 1;
    line-height: 1.3;
}

.health-stat-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-primary);
    white-space: nowrap;
}

.health-stat-track {
    height: 4px;
    background: var(--sp-border-subtle);
    border-radius: 2px;
    margin-bottom: 5px;
    overflow: hidden;
}

.health-stat-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Responsive: stack panels vertically on small screens */
@media (max-width: 768px) {
    .intel-grid {
        grid-template-columns: 1fr;
    }
    .intel-divider {
        width: auto;
        height: 1px;
        min-height: 0;
    }
    .intel-panel {
        padding: 16px 0;
    }
    .intel-panel:first-child { padding-top: 0; }
    .intel-panel:last-child  { padding-bottom: 0; }
}