/* Updated styles.css with improved responsive design */

:root {
    --primary-color: #1a1a1a;
    --secondary-color: #333333;
    --accent-color: #ff8034;
    --text-light: #ffffff;
    --text-gray: #aaaaaa;
    --bg-dark: #121212;
    --bg-secondary: #202020;
    --bg-light: #2a2a2a;
    --sidebar-width: 280px;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    background-color: #f8f9fa;
    overflow-x: hidden;
}

/* Improved Responsive Cards */
.card {
    height: 100%;
    transition: all 0.2s ease;
    border: 1px solid rgba(0,0,0,0.1);
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.card-body {
    display: flex;
    flex-direction: column;
}

.metric-cards .card {
    background-color: #f8f9fa;
}

/* Domain Detail Layout */
.domain-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.domain-name {
    font-weight: 700;
    color: #333;
}

.domain-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: #666;
    font-size: 0.9rem;
}

.domain-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.badge-ml {
    background-color: rgba(255, 128, 52, 0.2);
    color: var(--accent-color);
}

.badge-vertical {
    background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

/* Table Responsive Design */
.table-responsive {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

/* Column Visibility Dropdown */
.column-visibility-dropdown {
    z-index: 100;
}

.column-visibility-dropdown .dropdown-menu {
    max-height: 350px;
    overflow-y: auto;
    padding: 0;
}

.column-visibility-dropdown .form-check {
    margin-bottom: 0.5rem;
}

/* Chart Improvements */
.card-header {
    border-bottom: 1px solid #eee;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .domain-name {
        font-size: 1.4rem;
    }
    
    .domain-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .column-visibility-control {
        width: 100%;
        margin-top: 0.5rem;
    }
    
    .domain-daily-table-container {
        overflow-x: auto;
    }
}

/* Make Dash DataTable more responsive */
.dash-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

.dash-spreadsheet-container {
    overflow-x: auto !important;
}

.dash-spreadsheet {
    overflow-x: auto !important;
}

/* Fix chart responsiveness */
.js-plotly-plot, .plot-container {
    width: 100% !important;
}

.plotly, .main-svg {
    width: 100% !important;
}

.modern-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 2rem;
    position: relative;
}

.modern-loading-dots {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.modern-loading-dot {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    animation: dots-loading 1.4s ease-in-out infinite both;
}

.modern-loading-dot:nth-child(1) { animation-delay: -0.32s; }
.modern-loading-dot:nth-child(2) { animation-delay: -0.16s; }
.modern-loading-dot:nth-child(3) { animation-delay: 0s; }

.modern-loading-text {
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    animation: fade-in-out 2s ease-in-out infinite;
}

/* Skeleton Loading for Cards */
.loading-skeleton {
    background: linear-gradient(
        90deg,
        #f0f2f5 25%,
        #e4e7eb 50%,
        #f0f2f5 75%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 8px;
}

.metric-card-skeleton {
    min-height: 140px;
    padding: 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.skeleton-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.skeleton-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border-radius: 4px;
}

.skeleton-title {
    width: 60%;
    height: 12px;
    border-radius: 4px;
}

.skeleton-value {
    width: 80%;
    height: 28px;
    margin-bottom: 12px;
    border-radius: 6px;
}

.skeleton-trend {
    width: 70%;
    height: 14px;
    margin-bottom: 6px;
    border-radius: 4px;
}

.skeleton-trend:last-child {
    width: 60%;
    margin-bottom: 0;
}

/* Chart Loading Skeleton */
.chart-loading-skeleton {
    min-height: 450px;
    background: white;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chart-skeleton-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chart-skeleton-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.chart-skeleton-title {
    width: 200px;
    height: 20px;
    border-radius: 4px;
}

.chart-skeleton-subtitle {
    width: 300px;
    height: 14px;
    border-radius: 4px;
    margin-top: 8px;
}

.chart-skeleton-body {
    flex: 1;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.chart-skeleton-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.dash-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
    padding: 20px;
}

.revenue-forecast-container .dash-loading,
.enhanced-metric-tile .dash-loading,
.chart-loading-skeleton .dash-loading {
    min-height: 200px;
}

.modern-loading-container .dash-spinner,
.chart-loading-skeleton .dash-spinner,
.metric-card-skeleton .dash-spinner {
    border: 3px solid #f3f4f6 !important;
    border-top: 3px solid #667eea !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    animation: spin 1s linear infinite !important;
}

/* Top card metrics loading styles */
#top-card-metrics-loading .dash-loading {
    min-height: 150px;
    background-color: transparent;
}

#top-card-metrics-loading .dash-spinner {
    width: 50px;
    height: 50px;
    border-width: 4px;
    border-top-color: #007bff !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

/* Bootstrap placeholder improvements */
.placeholder-glow .placeholder {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
    background-size: 1000px 100%;
}

/* Card loading skeleton improvements */
.placeholder-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1rem;
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.placeholder-card .placeholder {
    border-radius: 4px;
    margin: 0 auto;
}

.dashboard-container {
    display: block;
    min-height: 100vh;
    width: 100%;
}

/* Logo styling */
.logo {
    height: 40px;
    margin-bottom: 1rem;
}


.section-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eee;
    margin-left: 0.5rem;
}

.filter-group {
    margin-bottom: 1rem;
    position: relative;
}

.filter-label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: #666;
    font-weight: 500;
}

.filter-input, .filter-select {
    width: 100%;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    color: #333;
    padding: 0.6rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.2s;
}

.filter-input:focus, .filter-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(255,128,52,0.15);
    outline: none;
}

/* Enhanced date picker styling */
.date-picker {
    cursor: pointer;
    width: 100% !important;
}

/* Ensure the date picker container takes full width */
.filter-group .DateInput_input {
    width: 100%;
    font-size: 0.9rem;
    padding: 8px 10px;
    border-radius: 4px;
}

/* Make the entire DatePicker component take full width */
.filter-group .SingleDatePickerInput {
    width: 100%;
    display: block;
}

.filter-group .SingleDatePicker {
    width: 100%;
    display: block;
}

/* Ensure the calendar portal appears properly */
.SingleDatePickerInput__withBorder {
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

/* Make date input look consistent with other inputs */
.DateInput {
    width: 100%;
}

.DateInput_input {
    font-weight: 400;
    color: #333;
}

/* Style the calendar when it appears */
.DayPicker {
    box-shadow: 0 2px 15px rgba(0,0,0,0.15);
    border-radius: 6px;
}

/* Style the selected day */
.CalendarDay__selected {
    background-color: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
}

.CalendarDay__selected:hover {
    background-color: var(--accent-color) !important;
    color: white !important;
}

.date-range-presets {
    margin-bottom: 1rem;
}

.preset-btn {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
    border-color: #e0e0e0;
}

.preset-btn.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.apply-filters-btn {
    width: 100%;
    background-color: var(--accent-color);
    border: none;
    color: white;
    padding: 0.75rem;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 1rem;
    transition: all 0.25s;
    box-shadow: 0 2px 6px rgba(255,128,52,0.3);
}

.apply-filters-btn:hover {
    background-color: #e56a20;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255,128,52,0.4);
}

.apply-filters-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(255,128,52,0.3);
}

/* Custom styles for dropdowns */
.filter-select .Select-control {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    height: auto;
    min-height: 38px;
}

.filter-select .Select-control:hover {
    border-color: #ccc;
}

.filter-select .Select-menu-outer {
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.filter-select .Select-option {
    padding: 10px 12px;
}

.filter-select .Select-option.is-focused {
    background-color: rgba(255,128,52,0.05);
}

.filter-select .Select-option.is-selected {
    background-color: rgba(255,128,52,0.1);
    color: #333;
}

/* Custom checkbox styling */
.filter-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.filter-checkbox .custom-control-label {
    font-size: 0.85rem;
    color: #555;
}

/* Main Content Styles - Full width without sidebar */
.main-content {
    flex: 1;
    margin-left: 0;
    padding: 1.5rem 2rem;
    background-color: #f8f9fa;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

.page-header {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #333;
}

/* Chart Tabs */
.chart-tabs {
    margin-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    overflow-x: auto;
}

.chart-tab {
    border: none;
    background: none;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    color: #666;
    opacity: 0.7;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}


.chart-tab.active {
    opacity: 1;
    border-bottom-color: var(--accent-color);
    color: #333;
}

.chart-graph {
    height: 250px;
}
.domain-table-section {
    overflow-x: auto;
    margin-bottom: 2rem;
}

.domain-table-section .dash-table-container {
    min-width: 100%;
}
.chart-dropdown {
    width: 140px;
    font-size: 12px;
}
.domain-table-section .dash-cell {
    font-size: 12px;
    padding: 6px;
    min-width: 80px;
    max-width: 150px;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
}
@media (max-width: 768px) {
    .chart-graph {
        height: 200px;
    }
}
/* Domain Selection with Virtualized Scroll */
.domain-selector-container {
    margin-bottom: 2rem;
}

.domain-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.domain-count {
    font-size: 0.9rem;
    color: #666;
}

.domain-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-height: 120px;
    overflow-y: auto;
    padding: 0.5rem;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #ddd;
    scrollbar-width: thin;
}

.domain-chip {
    padding: 0.5rem 1rem;
    background-color: #f1f1f1;
    color: #333;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.domain-chip:hover {
    background-color: #e0e0e0;
}

.domain-chip.active {
    background-color: var(--accent-color);
    color: white;
}

/* Summary Cards */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.summary-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.5rem;
}

.summary-card-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #333;
}

.summary-card-change {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.summary-card-change.positive {
    color: #28a745;
}

.summary-card-change.negative {
    color: #dc3545;
}

/* Domain Detail Panel */
.domain-detail {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.domain-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.domain-info {
    flex: 1;
    min-width: 300px;
}

.domain-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.domain-meta {
    display: flex;
    gap: 2rem;
    color: #666;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.domain-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.domain-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.domain-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-ml {
    background-color: rgba(255, 128, 52, 0.2);
    color: var(--accent-color);
}

.badge-vertical {
    background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

/* ML Implementation Date Marker */
.ml-date-marker {
    color: var(--accent-color);
    border-left: 2px solid var(--accent-color);
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    background-color: rgba(255, 128, 52, 0.1);
    border-radius: 0 4px 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Metric Cards Grid */
.metric-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.25rem;
}

/* Main metric tiles (Gross / Net / Cool Net / ACPM / GCPM / Bid / Win / Winning).
   Same chrome family as the EOY cards and Key Forecast Insights cards:
   box-shadow outline, hairline top-edge accent reveal on hover, lift on
   hover. Accent defaults to slate during loading (matches the other cards'
   loading hairline); promotes to the dashboard blue once data lands and the
   `.loaded` class is added by the callback. */
.enhanced-metric-card {
    --accent: #94a3b8;
    --accent-soft: rgba(148, 163, 184, 0.12);
    background: white;
    border: 0;
    border-radius: 12px;
    padding: 20px;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 2px rgba(15, 23, 42, 0.03);
    cursor: default;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.enhanced-metric-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-top: 2px solid var(--accent);
    pointer-events: none;
    opacity: 0.35;
    clip-path: inset(0 65% 0 0);
    transition: opacity 0.25s ease,
                clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.enhanced-metric-card.loaded {
    --accent: #007bff;
    --accent-soft: rgba(0, 123, 255, 0.12);
    cursor: pointer;
}

.enhanced-metric-card.loaded:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px #cbd5e0,
        0 6px 18px rgba(15, 23, 42, 0.07);
}

.enhanced-metric-card.loaded:hover::before {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* Eyebrow row: icon chip + uppercase tracked label */
.enhanced-metric-card .metric-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.enhanced-metric-card .metric-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    flex-shrink: 0;
}

.enhanced-metric-card .metric-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 1.2;
}

.enhanced-metric-card .metric-value {
    font-size: 26px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}

.enhanced-metric-card .metric-trend {
    font-variant-numeric: tabular-nums;
}

/* EOD pill: slate instead of bootstrap blue */
.enhanced-metric-card .metric-eod {
    color: #475569 !important;
    border-top-color: #e2e8f0 !important;
}

/* "View hourly →" hover affordance — blue, matches the tile's accent identity. */
.enhanced-metric-card.loaded::after {
    content: "View hourly →";
    position: absolute;
    bottom: 6px;
    right: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #007bff;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.enhanced-metric-card.loaded:hover::after {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 768px) {
    .enhanced-metric-card {
        padding: 16px;
    }
    .enhanced-metric-card .metric-value {
        font-size: 22px;
    }
    .enhanced-metric-card .metric-icon-chip {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
    .metrics-tiles.row [class*="col-"] {
        margin-bottom: 1rem;
    }
    .metrics-tiles.row [class*="col-"]:last-child {
        margin-bottom: 0;
    }
}

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

.enhanced-metric-card {
    animation: slideInUp 0.5s ease-out;
}

.enhanced-metric-card:nth-child(1) { animation-delay: 0.1s; }
.enhanced-metric-card:nth-child(2) { animation-delay: 0.2s; }
.enhanced-metric-card:nth-child(3) { animation-delay: 0.3s; }

/* User Management Table Styling */
.card-body .table tbody,
.table tbody {
    border-style: hidden !important;
}

.card-body .table tbody tr,
.table tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
}

.card-body .table tbody tr:hover,
.table tbody tr:hover {
    background-color: #f7fafc;
}

.card-body .table tbody tr:last-child,
.table tbody tr:last-child {
    border-bottom: none !important;
}

.geo-metric-btn, .device-metric-btn, .os-metric-btn, .browser-metric-btn, .segment-media-type-btn, .throttled-metric-btn {
    background-color: #f8f9fa !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: #495057 !important;
}

.geo-metric-btn:hover, .device-metric-btn:hover, .os-metric-btn:hover, .browser-metric-btn:hover, .segment-media-type-btn:hover, .throttled-metric-btn:hover {
    background-color: #e9ecef !important;
    border-color: rgba(0,0,0,0.2) !important;
    color: #495057 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.geo-metric-btn:active, .device-metric-btn:active, .os-metric-btn:active, .browser-metric-btn:active, .segment-media-type-btn:active, .throttled-metric-btn:active {
    background-color: #dee2e6 !important;
    border-color: rgba(0,0,0,0.25) !important;
    color: #495057 !important;
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
}

.geo-metric-btn:focus, .device-metric-btn:focus, .os-metric-btn:focus, .browser-metric-btn:focus, .segment-media-type-btn:focus, .throttled-metric-btn:focus {
    background-color: #f8f9fa !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: #495057 !important;
    box-shadow: none !important;
    outline: none !important;
}

.geo-metric-btn.active, .device-metric-btn.active, .os-metric-btn.active, .browser-metric-btn.active, .segment-media-type-btn.active, .throttled-metric-btn.active {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
}

.geo-metric-btn.active:focus, .device-metric-btn.active:focus, .os-metric-btn.active:focus, .browser-metric-btn.active:focus, .segment-media-type-btn.active:focus, .throttled-metric-btn.active:focus {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
    outline: none !important;
}

.geo-metric-btn.active:hover, .device-metric-btn.active:hover, .os-metric-btn.active:hover, .browser-metric-btn.active:hover, .segment-media-type-btn.active:hover, .throttled-metric-btn.active:hover {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Override Bootstrap's default button colors for our specific classes */
.btn-light.geo-metric-btn, .btn-light.device-metric-btn, .btn-light.os-metric-btn, .btn-light.browser-metric-btn, .btn-light.segment-media-type-btn, .btn-light.throttled-metric-btn {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
}

.btn-outline-light.geo-metric-btn, .btn-outline-light.device-metric-btn, .btn-outline-light.os-metric-btn, .btn-outline-light.browser-metric-btn, .btn-outline-light.segment-media-type-btn, .btn-outline-light.throttled-metric-btn {
    background-color: #f8f9fa !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: #495057 !important;
}

/* Handle all possible button states more explicitly */
.btn-light.geo-metric-btn:hover, .btn-light.device-metric-btn:hover, .btn-light.os-metric-btn:hover, .btn-light.browser-metric-btn:hover, .btn-light.segment-media-type-btn:hover, .btn-light.throttled-metric-btn:hover {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    color: #ffffff !important;
}

.btn-outline-light.geo-metric-btn:hover, .btn-outline-light.device-metric-btn:hover, .btn-outline-light.os-metric-btn:hover, .btn-outline-light.browser-metric-btn:hover, .btn-outline-light.segment-media-type-btn:hover, .btn-outline-light.throttled-metric-btn:hover {
    background-color: #e9ecef !important;
    border-color: rgba(0,0,0,0.2) !important;
    color: #495057 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.btn-light.geo-metric-btn:focus, .btn-light.device-metric-btn:focus, .btn-light.os-metric-btn:focus, .btn-light.browser-metric-btn:focus, .btn-light.segment-media-type-btn:focus, .btn-light.throttled-metric-btn:focus {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
    outline: none !important;
}

.btn-outline-light.geo-metric-btn:focus, .btn-outline-light.device-metric-btn:focus, .btn-outline-light.os-metric-btn:focus, .btn-outline-light.browser-metric-btn:focus, .btn-outline-light.segment-media-type-btn:focus, .btn-outline-light.throttled-metric-btn:focus {
    background-color: #f8f9fa !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: #495057 !important;
    box-shadow: none !important;
    outline: none !important;
}

.btn-light.geo-metric-btn:active, .btn-light.device-metric-btn:active, .btn-light.os-metric-btn:active, .btn-light.browser-metric-btn:active, .btn-light.segment-media-type-btn:active, .btn-light.throttled-metric-btn:active {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
}

.btn-outline-light.geo-metric-btn:active, .btn-outline-light.device-metric-btn:active, .btn-outline-light.os-metric-btn:active, .btn-outline-light.browser-metric-btn:active, .btn-outline-light.segment-media-type-btn:active, .btn-outline-light.throttled-metric-btn:active {
    background-color: #dee2e6 !important;
    border-color: rgba(0,0,0,0.25) !important;
    color: #495057 !important;
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Force override for all possible Bootstrap button combinations */
[class*="geo-metric-btn"], [class*="device-metric-btn"], [class*="os-metric-btn"], [class*="browser-metric-btn"], [class*="segment-media-type-btn"], [class*="throttled-metric-btn"] {
    transition: all 0.2s ease !important;
}

/* Target any button with our custom classes, regardless of Bootstrap color class */
button.geo-metric-btn, button.device-metric-btn, button.os-metric-btn, button.browser-metric-btn, button.segment-media-type-btn, button.throttled-metric-btn {
    transition: all 0.2s ease !important;
}

/* Override for primary/secondary colors that might be applied by Dash */
.btn-primary.geo-metric-btn, .btn-primary.device-metric-btn, .btn-primary.os-metric-btn, .btn-primary.browser-metric-btn, .btn-primary.segment-media-type-btn, .btn-primary.throttled-metric-btn,
.btn-secondary.geo-metric-btn, .btn-secondary.device-metric-btn, .btn-secondary.os-metric-btn, .btn-secondary.browser-metric-btn, .btn-secondary.segment-media-type-btn, .btn-secondary.throttled-metric-btn,
.btn-success.geo-metric-btn, .btn-success.device-metric-btn, .btn-success.os-metric-btn, .btn-success.browser-metric-btn, .btn-success.segment-media-type-btn, .btn-success.throttled-metric-btn,
.btn-info.geo-metric-btn, .btn-info.device-metric-btn, .btn-info.os-metric-btn, .btn-info.browser-metric-btn, .btn-info.segment-media-type-btn, .btn-info.throttled-metric-btn {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
}

.btn-outline-primary.geo-metric-btn, .btn-outline-primary.device-metric-btn, .btn-outline-primary.os-metric-btn, .btn-outline-primary.browser-metric-btn, .btn-outline-primary.segment-media-type-btn, .btn-outline-primary.throttled-metric-btn,
.btn-outline-secondary.geo-metric-btn, .btn-outline-secondary.device-metric-btn, .btn-outline-secondary.os-metric-btn, .btn-outline-secondary.browser-metric-btn, .btn-outline-secondary.segment-media-type-btn, .btn-outline-secondary.throttled-metric-btn,
.btn-outline-success.geo-metric-btn, .btn-outline-success.device-metric-btn, .btn-outline-success.os-metric-btn, .btn-outline-success.browser-metric-btn, .btn-outline-success.segment-media-type-btn, .btn-outline-success.throttled-metric-btn,
.btn-outline-info.geo-metric-btn, .btn-outline-info.device-metric-btn, .btn-outline-info.os-metric-btn, .btn-outline-info.browser-metric-btn, .btn-outline-info.segment-media-type-btn, .btn-outline-info.throttled-metric-btn {
    background-color: #f8f9fa !important;
    border-color: rgba(0,0,0,0.15) !important;
    color: #495057 !important;
}

/* Performance Scores Grid Styles */
.performance-scores-grid {
    width: 100% !important;
}

.score-item {
    transition: all 0.3s ease !important;
    cursor: pointer;
}

.score-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
    border-color: rgba(0,0,0,0.15) !important;
}

.score-item .score-circle {
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.score-item:hover .score-circle {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15) !important;
}

.score-details {
    flex-grow: 1;
}

/* Responsive grid adjustments */
@media (max-width: 768px) {
    .performance-scores-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .score-item {
        min-height: 80px !important;
        padding: 12px 8px !important;
        flex-direction: row !important;
        text-align: left !important;
    }
    
    .score-item .score-circle {
        width: 50px !important;
        height: 50px !important;
        margin-right: 12px !important;
        margin-bottom: 0 !important;
    }
    
    .score-item .score-circle span {
        font-size: 14px !important;
    }
    
    .score-item .score-details {
        margin-top: 0;
    }
    
    .score-item .score-details > div {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    
    .score-item .score-details i {
        font-size: 12px !important;
        margin-right: 6px !important;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .performance-scores-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 18px !important;
    }
    
    .score-item {
        min-height: 90px !important;
        padding: 16px 12px !important;
    }
    
    .score-item .score-circle {
        width: 55px !important;
        height: 55px !important;
    }
    
    .score-item .score-circle span {
        font-size: 16px !important;
    }
    
    .score-item .score-details > div {
        font-size: 13px !important;
    }
    
    .score-item .score-details i {
        font-size: 14px !important;
    }
}

/* Animation for score items */
.score-item:nth-child(1) { animation: slideInLeft 0.6s ease-out 0.1s both; }
.score-item:nth-child(2) { animation: slideInLeft 0.6s ease-out 0.2s both; }
.score-item:nth-child(3) { animation: slideInLeft 0.6s ease-out 0.3s both; }
.score-item:nth-child(4) { animation: slideInLeft 0.6s ease-out 0.4s both; }
.score-item:nth-child(5) { animation: slideInLeft 0.6s ease-out 0.5s both; }
.score-item:nth-child(6) { animation: slideInLeft 0.6s ease-out 0.6s both; }

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Segment Insights Header Styling */
.segment-insights-header {
    transition: all 0.3s ease;
    animation: fadeInUp 0.6s ease-out;
}

.segment-insights-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}

.domain-icon-circle {
    transition: all 0.3s ease;
}

.segment-insights-header:hover .domain-icon-circle {
    transform: scale(1.05);
    background: rgba(66, 153, 225, 0.15) !important;
}

.insights-metric-item {
    transition: all 0.2s ease;
    padding: 8px;
    border-radius: 6px;
}

.insights-metric-item:hover {
    background: rgba(0,0,0,0.02);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .segment-insights-header .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .segment-insights-header .gap-4 {
        gap: 1rem !important;
        margin-top: 1rem;
    }
}

.enhanced-metric-card:nth-child(4) { animation-delay: 0.4s; }
.enhanced-metric-card:nth-child(5) { animation-delay: 0.5s; }
.enhanced-metric-card:nth-child(6) { animation-delay: 0.6s; }

.metric-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.5rem;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #333;
}

.metric-change {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.metric-change.positive {
    color: #28a745;
}

.metric-change.negative {
    color: #dc3545;
}

/* Chart Sections */
.chart-section {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.chart-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.chart-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.chart-select {
    padding: 0.4rem 1rem;
    border-radius: 4px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: #333;
}

/* Virtual List for Domain Browsing */
.virtual-list-container {
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: white;
    border: 1px solid #ddd;
}

.virtual-list-header {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.virtual-list-scroll {
    height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.virtual-list-row {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eee;
    align-items: center;
}

.virtual-list-row:hover {
    background-color: #f8f9fa;
    cursor: pointer;
}

.virtual-list-row.active {
    background-color: rgba(255, 128, 52, 0.1);
    border-left: 3px solid var(--accent-color);
}

/* Metric Tiles Styling */
.metric-tile {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.metric-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.5rem;
}

.metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #333;
}

.metric-trend {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.9;
    line-height: 1.2;
    padding: 2px 0;
    margin-bottom: 2px;
}

.metric-trend:last-child {
    margin-bottom: 0;
}

.metric-trend .trend-value {
    font-weight: 600;
    font-size: 0.7rem;
    color: #495057;
}

.metric-trend .trend-label {
    font-size: 0.65rem;
    opacity: 0.7;
    font-weight: 400;
    color: #6c757d;
}

.metric-trend i {
    font-size: 0.6rem;
    margin: 0 2px;
}

.metric-trend.positive {
    color: #28a745;
}

.metric-trend.negative {
    color: #dc3545;
}

.metric-trends {
    margin-top: 8px;
    padding: 6px 8px;
    background: linear-gradient(to bottom, rgba(248, 249, 250, 0.3), transparent);
    border-radius: 6px;
    border-top: 1px solid #e9ecef;
}

.metric-trend-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    margin-bottom: 3px;
    padding: 2px 0;
}

.metric-trend-compact:last-child {
    margin-bottom: 0;
}

.metric-trend-compact .trend-info {
    display: flex;
    align-items: center;
    gap: 3px;
}

.metric-trend-compact .trend-value {
    font-weight: 600;
    font-size: 0.65rem;
}

.metric-trend-compact .trend-label {
    font-size: 0.6rem;
    opacity: 0.6;
    font-weight: 400;
}

.metric-trend-compact i {
    font-size: 0.55rem;
    margin-right: 1px;
}

.metrics-timestamp {
    text-align: right;
    font-size: 0.8rem;
}

/* Forecast timestamp styles */
.forecast-timestamp-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.forecast-timestamp-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.forecast-timestamp-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.forecast-timestamp-text {
    margin: 0;
    letter-spacing: 0.5px;
}

/* Revenue Trend Tabs */
.revenue-trend-tabs .nav-link {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}
/* Add these styles to your styles.css file */

/* Skeleton loading animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes dots-loading {
    0% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    20% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
}

@keyframes fade-in-out {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.skeleton {
    background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.pulse {
    animation: pulse 2s infinite;
}

/* Skeleton cards for summary metrics */
.skeleton-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 135px;
}

.skeleton-card-title {
    height: 16px;
    width: 70%;
    margin-bottom: 0.5rem;
}

.skeleton-card-value {
    height: 32px;
    width: 50%;
    margin-bottom: 0.5rem;
}

.skeleton-card-text {
    height: 16px;
    width: 80%;
}

/* Skeleton for domain details */
.skeleton-domain-header {
    background-color: white;
    border-radius: 8px 8px 0 0;
    padding: 1.5rem;
    margin-bottom: 1px;
}

.skeleton-domain-name {
    height: 28px;
    width: 200px;
    margin-bottom: 0.5rem;
}

.skeleton-domain-meta {
    height: 16px;
    width: 60%;
}

.skeleton-metrics-section {
    background-color: white;
    border-radius: 0 0 8px 8px;
    padding: 1.5rem;
}

.skeleton-metric-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.skeleton-metric-card {
    height: 100px;
    border-radius: 8px;
}

.skeleton-chart {
    height: 300px;
    border-radius: 8px;
    margin-top: 1.5rem;
}

/* Skeleton rows for domain list */
.skeleton-list-row {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eee;
    align-items: center;
}

.skeleton-list-cell {
    height: 16px;
    border-radius: 4px;
}
/* Add to styles.css */
/* Fallback loading text */
.loading-text {
    padding: 2rem;
    text-align: center;
    color: #666;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Better spinner color for loading */
.dash-spinner.dash-default {
    margin: 2rem auto;
    border-top-color: var(--accent-color) !important;
}

/* Loading error state */
.loading-error {
    padding: 2rem;
    text-align: center;
    color: #721c24;
    background-color: #f8d7da;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin: 1rem 0;
}

.loading-error i {
    margin-right: 0.5rem;
    color: #dc3545;
}

.loading-error .retry-btn {
    margin-top: 1rem;
    background-color: #dc3545;
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.loading-error .retry-btn:hover {
    background-color: #c82333;
}
/* Responsive Adjustments - No sidebar */
@media (max-width: 768px) {
    .main-content {
        padding: 1rem;
    }
}

.revenue-tab-section {
    background-color: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.revenue-tab-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.revenue-tab-label {
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.revenue-tab-dropdown {
    width: 180px;
    font-size: 0.9rem;
}


.revenue-loading-wrapper {
    min-height: 300px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Segment insights styles */
.segment-insights-section {
    margin-bottom: 2rem;
}

.segment-media-type-btn {
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
}

.segment-card {
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.segment-distribution-chart {
    min-height: 300px;
}

.segment-metric-pill {
    background-color: #f8f9fa;
    border-radius: 30px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.segment-metric-pill .metric-name {
    color: #666;
    font-weight: 500;
    margin-right: 0.5rem;
}

.segment-metric-pill .metric-value {
    font-weight: 600;
    color: #333;
}

.segment-insights-content {
    min-height: 200px;
}

.time-period-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.25rem;
    height: 100%;
}

.time-period-card .period-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.time-period-card .metric-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.time-period-card .metric-label {
    color: #666;
}

.time-period-card .metric-value {
    font-weight: 600;
    color: #333;
}

.geo-table {
    overflow-x: auto;
}

.insights-list {
    list-style-type: none;
    padding-left: 0;
}

.insights-list li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.5rem;
}

.insights-list li:before {
    content: "•";
    color: var(--accent-color);
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .segment-metric-pill {
        width: 100%;
        margin-right: 0;
        justify-content: space-between;
    }
}

/* Segment Insights styles */
.score-circle {
    transition: transform 0.3s ease;
}

.score-circle:hover {
    transform: scale(1.1);
}

.segment-insights-container .card {
    transition: box-shadow 0.3s ease;
}

.segment-insights-container .card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Highlight ACPM in time period cards */
.text-primary .fw-bold {
    position: relative;
}

.text-primary .fw-bold::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #007bff;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.text-primary .fw-bold:hover::after {
    transform: scaleX(1);
}

/* Style the map tooltip */
.geo-map-tooltip {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Domain dropdown styling */
.domain-dropdown {
    width: 100%;
    margin-bottom: 1rem;
}

.domain-dropdown .Select-control {
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 38px;
}

.domain-dropdown .Select-menu-outer {
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}

.domain-dropdown .Select-option {
    padding: 8px 12px;
}

.domain-dropdown .Select-option.is-focused {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Tab styling */
#domain-detail-tabs .nav-link {
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    color: #007bff;
    border: none;
    background: none;
    transition: all 0.3s ease;
}

#domain-detail-tabs .nav-link:hover {
    color: #0056b3;
    border-color: transparent;
}

#domain-detail-tabs .nav-link.active {
    color: #2d3748 !important;
    background: white;
    border: 1px solid #dee2e6;
    border-bottom: 1px solid white;
    border-radius: 0.375rem 0.375rem 0 0;
}

#domain-detail-tabs .tab-content {
    padding-top: 1rem;
}

.domain-analytics-tabs .nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

.domain-analytics-tabs .nav-link {
    border-radius: 0;
    margin-bottom: -1px;
}

.domain-analytics-tabs .nav-link.active {
    background-color: transparent;
    border: none;
}

/* Hourly Performance Grid Styles */
.hourly-performance-container {
    background-color: #f8f9fa;
}

/* Summary KPI Cards */
.hourly-kpi-card {
    border-left: 4px solid #007bff;
    transition: all 0.2s ease;
}

.hourly-kpi-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px);
}

.hourly-kpi-card.revenue { border-left-color: #10b981; }
.hourly-kpi-card.geo { border-left-color: #4a8cc8; }
.hourly-kpi-card.media { border-left-color: #8b5cf6; }
.hourly-kpi-card.metrics { border-left-color: #6366f1; }
.hourly-kpi-card.viewability { border-left-color: #f59e0b; }
.hourly-kpi-card.dsp { border-left-color: #06b6d4; }
.hourly-kpi-card.device { border-left-color: #8b5cf6; }
.hourly-kpi-card.browser { border-left-color: #06b6d4; }
.hourly-kpi-card.os { border-left-color: #84cc16; }
.hourly-kpi-card.floor { border-left-color: #06b6d4; }

/* Performance Grid Table */
.hourly-performance-table {
    font-family: monospace;
    font-size: 11px;
    border-collapse: collapse;
    width: 100%;
}

.hourly-performance-table th,
.hourly-performance-table td {
    padding: 3px 4px;
    text-align: center;
    border: 1px solid #dee2e6;
    white-space: nowrap;
    min-width: 45px;
}

.hourly-performance-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 10px;
}

.hourly-hour-header {
    background: #e9ecef !important;
    font-weight: 600;
    position: sticky;
    left: 0;
    z-index: 5;
    min-width: 35px !important;
}

.hourly-total-row {
    background: #f8f9fa !important;
    font-weight: 700;
    border-top: 2px solid #495057;
}

.hourly-today-column {
    background: #ffffff !important;
}

.hourly-future-hour {
    background: #f8f9fa !important;
    color: #6c757d;
}

.hourly-current-hour {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

/* Custom performance level colors */
.perf-high { 
    background-color: #66BB6A !important; 
    color: #1B5E20 !important; 
    font-weight: 600 !important;
}

.perf-medium { 
    background-color: #A5D6A7 !important; 
    color: #2E7D32 !important; 
    font-weight: 500 !important;
}

.perf-borderline { 
    background-color: #C8E6C9 !important; 
    color: #388E3C !important; 
    font-weight: normal !important;
}

.perf-low { 
    background-color: #E8F5E9 !important; 
    color: #4CAF50 !important; 
    font-weight: normal !important;
}

.perf-worst { 
    background-color: #FFCDD2 !important; 
    color: #C62828 !important; 
    font-weight: 600 !important;
}

/* Metric buttons */
.hourly-metric-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 4px;
    transition: all 0.2s;
}

.hourly-metric-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Filter controls */
.hourly-filter-section {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 20px;
}

.hourly-filter-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #374151;
}

.hourly-active-filters {
    margin-bottom: 16px;
    padding: 12px;
    background-color: #f0f9ff;
    border-radius: 6px;
    border-left: 4px solid #4a8cc8;
}

/* Grid container */
.hourly-grid-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    /* Start scrolled to the right to show latest data */
    scroll-behavior: smooth;
}

/* Performance table improvements */
.hourly-performance-table {
    font-family: monospace;
    font-size: 11px;
    border-collapse: collapse;
    width: max-content; /* Allow table to extend beyond container */
    min-width: 100%;
    table-layout: auto;
}

.hourly-performance-table th,
.hourly-performance-table td {
    padding: 4px 6px;
    text-align: center;
    border: 1px solid #dee2e6;
    white-space: nowrap;
    min-width: 50px;
    max-width: 80px;
}

/* Sticky columns for hour labels */
.hourly-performance-table .hour-column {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #e9ecef !important;
    font-weight: 600;
    min-width: 50px !important;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

/* Header improvements */
.hourly-performance-table thead th {
    position: sticky;
    top: 0;
    z-index: 15;
    background: #f8f9fa !important;
    font-weight: 600;
    color: #495057;
    font-size: 10px;
    border-bottom: 2px solid #dee2e6;
}

/* Today column highlighting */
.hourly-today-column {
    background: #fff3cd !important;
    border-left: 2px solid #ffc107 !important;
    border-right: 2px solid #ffc107 !important;
}

/* Container responsiveness - Fix overflow issues */
.hourly-performance-container {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
}

/* Ensure main container doesn't overflow */
.container-fluid {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    overflow-x: hidden;
}

/* Fix Bootstrap row overflow */
.row {
    margin-left: 0;
    margin-right: 0;
}

.row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

/* KPI Cards container fix */
.hourly-kpi-cards-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Filter section responsiveness */
.hourly-filter-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Fix dropdown width issues */
.hourly-performance-container .Select-control,
.hourly-performance-container .form-control {
    min-width: 120px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Improve responsive behavior for small screens */
@media (max-width: 1200px) {
    .row > [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 992px) {
    .bg-white.p-3 {
        padding: 12px !important;
    }
    
    .bg-light.p-3 {
        padding: 12px !important;
    }
}

/* Ensure main content container doesn't exceed viewport */
.main-content {
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Sticky headers and totals for hourly performance table */
.hourly-table-container {
    position: relative;
    max-height: 100vh;
    overflow: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f8f9fa !important;
    border-bottom: 2px solid #dee2e6 !important;
}

.sticky-header-row {
    position: sticky;
    top: 0;
    z-index: 15;
}

.sticky-total {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #e9ecef !important;
    border-top: 2px solid #495057 !important;
    font-weight: 700 !important;
}

.sticky-total-row {
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* Enhanced hour column sticky positioning */
.hourly-performance-table .hour-column {
    position: sticky;
    left: 0;
    z-index: 25;
    background: #e9ecef !important;
    font-weight: 600;
    min-width: 50px !important;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

/* Header hour column gets higher z-index */
.sticky-header.hour-column {
    z-index: 30;
}

/* Total hour column gets medium z-index */
.sticky-total.hour-column {
    z-index: 20;
}

/* Smaller KPI cards to save space */
.hourly-kpi-card {
    height: 80px !important;
    min-height: 80px !important;
}

.hourly-kpi-card .card-body {
    padding: 8px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hourly-performance-table {
        font-size: 9px;
    }
    
    .hourly-performance-table th,
    .hourly-performance-table td {
        padding: 2px 3px;
        min-width: 35px;
    }
    
    .hourly-grid-container {
        max-height: 60vh;
    }
    
    .hourly-kpi-card {
        height: 70px !important;
        min-height: 70px !important;
    }
}

/* Enhanced metric tiles */
.enhanced-metric-tile {
    min-height: 140px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Smooth loading transitions */
.enhanced-metric-tile [id$="-loading-container"],
.enhanced-metric-tile [id$="-content"] {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

/* Revenue forecast container styling */
.enhanced-forecast-chart-section {
    position: relative;
    min-height: 450px;
}

.enhanced-forecast-chart-section [id$="-loading-container"],
.enhanced-forecast-chart-section [id$="-content-container"] {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Chart loading fade-in effect */
.enhanced-forecast-chart-section [id$="-content-container"] {
    animation: fadeInUp 0.6s ease-out;
}

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

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.enhanced-metric-tile:hover {
    border-left-color: #2980b9;
    border-left-width: 6px;
}

/* TODO: Click for details hover effect - commented out as endpoint is not yet active */
/* .enhanced-metric-tile:hover::after {
    content: "Click for details";
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 8px;
    color: #3498db;
    font-weight: 600;
    opacity: 0.8;
} */

.top-performers-list {
    margin-top: 5px;
    padding: 4px 0;
    border-top: 1px solid #eee;
}

.top-performers-list .text-success {
    font-weight: 600;
}

/* Top Performers Container Styling */
.top-performers-container {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

/* Custom scrollbar styling for top performers */
.top-performers-container::-webkit-scrollbar {
    width: 6px;
}

.top-performers-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.top-performers-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.top-performers-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Firefox scrollbar styling */
.top-performers-container {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* CSV Upload Area Styling */
.upload-area {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.upload-area:hover {
    border-color: #5a67d8 !important;
    background-color: #f0f4ff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(90, 103, 216, 0.15);
}

.upload-area:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(90, 103, 216, 0.2);
}

/* Info section styling */
.info-section {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 12px;
    border: 1px solid #e9ecef;
}

/* Fix any layout interference when hidden */
.csv-upload-container {
    position: relative;
    overflow: hidden;
}

.csv-upload-container[style*="display: none"] {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.metric-tile .metric-title {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
}

.metric-tile .metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}

/* Loading state styles for insight content */
.insight-content-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 400px !important;
}

/* Normal state styles for insight content when loaded */
.insight-content-loaded {
    display: block !important;
    min-height: auto !important;
}

/* Enhanced Revenue Forecast Styling */
.enhanced-forecast-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-top: 24px;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.enhanced-forecast-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border-color: #cbd5e0;
}

.enhanced-forecast-header {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    padding: 22px 28px 22px 28px;
    border-bottom: 1px solid #e2e8f0;
}

/* Section headers (Daily / Monthly / Annual) */
.forecast-section-header + div {
    /* Tighten the gap between a section header and its first content block. */
    margin-top: 4px;
}

@media (max-width: 768px) {
    .forecast-section-header {
        margin-top: 28px !important;
    }
}

/* ------------------------------------------------------------------ */
/* Gross / Cool Net segmented toggle (daily + monthly)                */
/* ------------------------------------------------------------------ */
.rev-toggle {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

/* Reset all dbc/Bootstrap default styling on the inner buttons so both pills
   share an identical base in every state (rest, hover, focus, active, visited).
   Bootstrap's .btn-link adds a focus box-shadow ring that can leak through;
   killing border + outline + shadow on every pseudo-state prevents it. */
.rev-toggle .rev-toggle-btn,
.rev-toggle .rev-toggle-btn:hover,
.rev-toggle .rev-toggle-btn:focus,
.rev-toggle .rev-toggle-btn:focus-visible,
.rev-toggle .rev-toggle-btn:focus-within,
.rev-toggle .rev-toggle-btn:active,
.rev-toggle .rev-toggle-btn:visited {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;
    color: #718096 !important;
    padding: 7px 18px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    outline: 0 !important;
    outline-color: transparent !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: color 0.25s ease,
                background-color 0.25s ease,
                box-shadow 0.25s ease;
}

/* Inactive text picks up the brand color so each pill reads as "the green
   option" or "the blue option" even when it isn't selected. */
.rev-toggle .rev-toggle-gross:not(.active) {
    color: #38a169 !important;
}
.rev-toggle .rev-toggle-cool:not(.active) {
    color: #4a8cc8 !important;
}

/* Hover on inactive: preview the active fill — brand background + white text,
   minus the active capsule's shadow so hover stays distinct from selected. */
.rev-toggle .rev-toggle-gross:not(.active):hover {
    background: #38a169 !important;
    background-color: #38a169 !important;
    color: white !important;
}
.rev-toggle .rev-toggle-cool:not(.active):hover {
    background: #4a8cc8 !important;
    background-color: #4a8cc8 !important;
    color: white !important;
}

/* Active capsule: filled brand color with white text. Variants only swap
   the brand color; everything else (shape, shadow, text) is shared. */
.rev-toggle .rev-toggle-btn.active {
    color: white !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}

.rev-toggle .rev-toggle-gross.active {
    background: #38a169 !important;
    background-color: #38a169 !important;
}
.rev-toggle .rev-toggle-cool.active {
    background: #4a8cc8 !important;
    background-color: #4a8cc8 !important;
}

/* ------------------------------------------------------------------ */
/* Revenue Drivers sidebar                                            */
/* ------------------------------------------------------------------ */

/* Time period pill (3Hr / DoD / WoW) — same family as the Gross/Cool Net
   .rev-toggle, scaled down to fit the sidebar header. */
.drivers-time-toggle {
    display: flex;
    width: 100%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.drivers-time-toggle .drivers-time-btn {
    flex: 1;
    background: transparent;
    background-color: transparent;
    border: 0;
    color: #4a5568;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: none;
    outline: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.2s ease,
                background-color 0.2s ease,
                box-shadow 0.2s ease;
}

.drivers-time-toggle .drivers-time-btn:hover:not(.active) {
    background: #007bff;
    background-color: #007bff;
    color: white;
}

.drivers-time-toggle .drivers-time-btn.active {
    background: #007bff;
    background-color: #007bff;
    color: white;
    box-shadow:
        0 1px 2px rgba(0, 123, 255, 0.18),
        0 0 0 1px rgba(0, 123, 255, 0.15);
}

/* Dimension tabs (All / Domain / Geo / DSP / Device / Platform / Media / Source).
   Tightened padding + gap so all 8 fit on a single row at the sidebar's
   ~420 px min-width without needing horizontal scroll. The wrap container
   still uses overflow-x: auto as a safety net for narrower viewports. */
.drivers-dim-tabs-wrap {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
    white-space: nowrap;
    /* Thin horizontal scrollbar (Firefox). */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}
/* Thin horizontal scrollbar (WebKit / Chromium). */
.drivers-dim-tabs-wrap::-webkit-scrollbar {
    height: 2px;
}
.drivers-dim-tabs-wrap::-webkit-scrollbar-track {
    background: transparent;
}
.drivers-dim-tabs-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 999px;
}
.drivers-dim-tabs-wrap::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.drivers-dim-tabs {
    display: flex;
    gap: 3px;
    justify-content: space-between;
}

.drivers-dim-tabs .dim-tab {
    font-size: 10px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    border: 0;
    background: #f1f5f9;
    color: #334155;
    cursor: pointer;
    transition: color 0.2s ease,
                background-color 0.2s ease;
}

.drivers-dim-tabs .dim-tab:hover:not(.active):not(.d-none) {
    background: #e2e8f0;
    color: #1a202c;
}

.drivers-dim-tabs .dim-tab.active {
    background: #007bff;
    color: white;
}

.drivers-dim-tabs .dim-tab.d-none {
    display: none;
}

/* Narrow viewports: relax the no-wrap + scroll fallback if it's still tight. */
@media (max-width: 480px) {
    .drivers-dim-tabs .dim-tab {
        padding: 4px 9px;
    }
}

/* "Overview" button in the summary card — blue ghost button (matches the
   sidebar's blue identity). */
.drivers-overview-btn {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    background: transparent;
    color: #007bff;
    border: 1px solid #007bff;
    border-radius: 6px;
    line-height: 1.4;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.drivers-overview-btn:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

/* Summary card value: refined hierarchy + tabular numerals. */
#revenue-drivers-sidebar #sidebar-total-revenue {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    letter-spacing: -0.015em !important;
    line-height: 1.15 !important;
    font-variant-numeric: tabular-nums;
}

#revenue-drivers-sidebar #sidebar-change-value,
#revenue-drivers-sidebar #sidebar-change-pct {
    font-variant-numeric: tabular-nums;
}

/* Pagination chevrons: blue hover, matching the sidebar's blue identity. */
#revenue-drivers-sidebar #sidebar-prev-page,
#revenue-drivers-sidebar #sidebar-next-page {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#revenue-drivers-sidebar #sidebar-prev-page:hover,
#revenue-drivers-sidebar #sidebar-next-page:hover {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
}

/* Trend items: proper hover state + tabular numerals on values/change. */
#revenue-drivers-sidebar .trend-item {
    transition: background-color 0.15s ease;
}

#revenue-drivers-sidebar .trend-item:hover {
    background-color: #f8fafc;
}

#revenue-drivers-sidebar .trend-item span {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Plotly hover tooltips (daily / monthly / annual forecast charts)   */
/* ------------------------------------------------------------------ */
/* The hoverlabel dict in Plotly only exposes bgcolor / bordercolor /
   font — padding, shadow and radius have to come from CSS targeting the
   SVG elements. The .hoverlayer is a top-level group that sits above
   all clip paths, so drop-shadow renders cleanly. */
.js-plotly-plot .hovertext {
    filter:
        drop-shadow(0 1px 3px rgba(15, 23, 42, 0.08))
        drop-shadow(0 8px 22px rgba(15, 23, 42, 0.14));
}

.js-plotly-plot .hovertext > path.bg {
    stroke: rgba(203, 213, 224, 0.75) !important;
    stroke-width: 1 !important;
    fill: rgba(255, 255, 255, 0.98) !important;
}

/* All text inside the tooltip — enforce the dashboard font stack so
   Plotly's Arial fallback can't leak through. */
.js-plotly-plot .hovertext text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Numeric content (value column) — tabular nums keeps a row of values
   column-aligned inside the multi-line tooltip. */
.js-plotly-plot .hovertext .nums,
.js-plotly-plot .hovertext .legendtext {
    font-variant-numeric: tabular-nums !important;
}

/* Trace name labels (e.g., "Actual Revenue") get slightly bolder
   weight so they read as the label and the value sits beside them. */
.js-plotly-plot .hovertext .name {
    font-weight: 600 !important;
}

/* ------------------------------------------------------------------ */
/* Mini insight chips (monthly + annual mini insights rows)           */
/* ------------------------------------------------------------------ */
.mini-insight-chip {
    --accent: #94a3b8;
    --accent-soft: rgba(148, 163, 184, 0.08);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 11px;
    background: white;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--accent);
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    cursor: pointer;
    font-size: 12px;
    color: #374151;
    font-weight: 500;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.mini-insight-chip .fas {
    color: var(--accent);
    font-size: 13px;
    flex-shrink: 0;
}

.mini-insight-chip:hover {
    background-color: var(--accent-soft);
    border-top-color: var(--accent);
    border-right-color: var(--accent);
    border-bottom-color: var(--accent);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* ------------------------------------------------------------------ */
/* Mini range toggle (1M / 3M / 6M / All) overlaid on the daily chart */
/* ------------------------------------------------------------------ */
.range-toggle {
    --brand: #38a169; /* overridden via inline style based on revenue type */
    display: inline-flex;
    align-items: center;
    gap: 1px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 8px;
    padding: 2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* Zero out every Bootstrap default state so the pills share one base. */
.range-toggle .range-toggle-btn,
.range-toggle .range-toggle-btn:hover,
.range-toggle .range-toggle-btn:focus,
.range-toggle .range-toggle-btn:focus-visible,
.range-toggle .range-toggle-btn:focus-within,
.range-toggle .range-toggle-btn:active,
.range-toggle .range-toggle-btn:visited {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-width: 0 !important;
    color: var(--brand) !important;
    padding: 3px 0 !important;
    min-width: 34px !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    outline: 0 !important;
    outline-color: transparent !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: color 0.2s ease,
                background-color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Hover (inactive only): preview the active fill. */
.range-toggle .range-toggle-btn:not(.active):hover {
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    color: white !important;
}

/* Active capsule: filled brand color with white text + soft shadow. */
.range-toggle .range-toggle-btn.active {
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    color: white !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}

/* ------------------------------------------------------------------ */
/* End-of-year revenue cards                                          */
/* ------------------------------------------------------------------ */
.eoy-cards-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.eoy-card {
    flex: 1;
    min-width: 320px;
    padding: 20px 22px 18px 22px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s ease;
}

.eoy-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e0;
}

.eoy-card-eyebrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.eoy-year-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: #4a5568;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.eoy-year-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.eoy-card-hero {
    font-size: 32px;
    font-weight: 800;
    color: #1a202c;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.eoy-card-range {
    font-size: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.eoy-range-label {
    color: #a0aec0;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: lowercase;
}

.eoy-range-value {
    color: #4a5568;
    font-weight: 700;
}

.eoy-range-sep {
    color: #cbd5e0;
}

.eoy-bar {
    display: flex;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.eoy-bar-fill {
    height: 100%;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.eoy-card-breakdown {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 12px;
    font-variant-numeric: tabular-nums;
}

.eoy-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: #a0aec0;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-right: 6px;
}

.eoy-stat-value {
    font-size: 13.5px;
    font-weight: 700;
    color: #2d3748;
}

@media (max-width: 640px) {
    .eoy-card {
        min-width: 100%;
        padding: 18px;
    }
    .eoy-card-hero {
        font-size: 28px;
    }
}

.enhanced-forecast-chart-section {
    padding: 20px 24px 0 24px;
}

.enhanced-forecast-metrics {
    padding: 0 24px 24px 24px;
}

/* Enhanced Forecast Metric Cards */
/* Refined data tile used in all three Key Forecast Insights sections.
   Brand color is passed in via two CSS custom properties:
     --accent       full brand color (icon + top-edge accent line)
     --accent-soft  same color at ~12% alpha (icon chip background)

   The 1px slate outline is drawn with a box-shadow inset so the ::before
   accent stripe can sit at the true top edge of the card (overlapping it),
   not one pixel below a separate top border. */
.enhanced-forecast-metric-card {
    --accent: #94a3b8;
    --accent-soft: rgba(148, 163, 184, 0.12);
    background: white;
    border-radius: 12px;
    padding: 18px 18px 16px 18px;
    cursor: pointer;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 2px rgba(15, 23, 42, 0.03);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Accent stripe lives in ::before with its own top-corner radii so the line
   *follows* the card's curve instead of being clipped by it. At rest a
   clip-path reveals only the top-left arc plus a short horizontal extension;
   on hover the clip-path opens to the right, sweeping the line through the
   top-right arc. */
.enhanced-forecast-metric-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-top: 2px solid var(--accent);
    pointer-events: none;
    opacity: 0.45;
    clip-path: inset(0 65% 0 0);
    transition: opacity 0.25s ease,
                clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.enhanced-forecast-metric-card:hover {
    box-shadow:
        0 0 0 1px #cbd5e0,
        0 6px 18px rgba(15, 23, 42, 0.07);
    transform: translateY(-2px);
}

.enhanced-forecast-metric-card:hover::before {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.metric-card-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.metric-card-eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    flex-shrink: 0;
}

.metric-card-eyebrow-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 1.2;
}

.metric-card-value {
    font-size: 22px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: -0.015em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}

.metric-card-subtitle {
    font-size: 12px;
    color: #718096;
    line-height: 1.4;
    font-weight: 500;
}

.enhanced-forecast-metrics-container {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f7fafc;
}

.forecast-metrics-header {
    margin-bottom: 16px;
}

/* Monthly + Annual sub-charts row */
.enhanced-forecast-sub-charts {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid #f7fafc;
}

.enhanced-forecast-sub-charts .js-plotly-plot {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

/* Responsive Design for Forecast Cards */
@media (max-width: 768px) {
    .enhanced-forecast-card {
        margin-top: 16px;
        border-radius: 8px;
    }
    
    .enhanced-forecast-header {
        padding: 16px 20px;
    }
    
    .enhanced-forecast-chart-section {
        padding: 16px 20px 0 20px;
    }
    
    .enhanced-forecast-metrics {
        padding: 0 20px 20px 20px;
    }
    
    .enhanced-forecast-metric-card {
        padding: 14px 14px 12px 14px;
        margin-bottom: 12px;
    }

    .metric-card-value {
        font-size: 19px;
    }

    .metric-card-eyebrow-label {
        font-size: 10px;
    }
}


/* Annual Forecast Insights layout */
.annual-forecast-columns {
    display: flex;
    gap: 16px;
}

.annual-forecast-column {
    flex: 1;
    min-width: 0;
}

.annual-forecast-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width: 992px) {
    .annual-forecast-columns {
        flex-direction: column;
    }

    .annual-forecast-column {
        margin-bottom: 16px;
    }
}

@media (max-width: 576px) {
    .annual-forecast-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Annual Revenue Charts layout */
.annual-charts-wrapper {
    display: flex;
    gap: 16px;
    margin-bottom: -16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    padding: 8px;
}

.annual-chart-item {
    flex: 1;
}

@media (max-width: 768px) {
    .annual-charts-wrapper {
        flex-direction: column;
        gap: 0;
    }
}

/* Enhanced Modal Styles for Job History and Active Jobs */
/* Override Bootstrap modal-xl default width */
.modal.fade#bulk-results-modal .modal-dialog.modal-xl {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 1rem auto !important;
}

/* More specific selector to override Bootstrap */
#bulk-results-modal.modal .modal-dialog {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 1rem auto !important;
}

/* Force width with highest specificity */
body .modal#bulk-results-modal .modal-dialog {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 1rem auto !important;
}

#bulk-results-modal .modal-content {
    max-height: 90vh !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

#bulk-results-modal .modal-header {
    border-bottom: 1px solid #e9ecef !important;
    background-color: #f8f9fa !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 1.25rem 1.5rem !important;
}

#bulk-results-modal .modal-body {
    padding: 1.5rem !important;
    overflow: hidden !important;
}

#bulk-results-modal .modal-footer {
    border-top: 1px solid #e9ecef !important;
    background-color: #f8f9fa !important;
    border-radius: 0 0 12px 12px !important;
    padding: 1rem 1.5rem !important;
}

/* Enhanced Modal Styles for Admin Flagged Response Detail */
/* Use flexbox to center the modal */
div#admin-flagged-detail-modal.modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

div#admin-flagged-detail-modal.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Override Bootstrap modal-xl default width for flagged response modal */
div#admin-flagged-detail-modal {
    --bs-modal-width: 95vw !important;
}

div#admin-flagged-detail-modal > div.modal-dialog {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
}

div#admin-flagged-detail-modal.modal .modal-dialog.modal-xl {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
}

/* More specific selector to override Bootstrap */
#admin-flagged-detail-modal.modal .modal-dialog {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
}

/* Force width with highest specificity */
body .modal#admin-flagged-detail-modal .modal-dialog {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
}

body div.modal#admin-flagged-detail-modal .modal-dialog {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
}

html body div.modal.fade#admin-flagged-detail-modal .modal-dialog.modal-xl {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
}

.wide-modal .modal-dialog {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
}

#admin-flagged-detail-modal .modal-content {
    max-height: 90vh !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

#admin-flagged-detail-modal .modal-header {
    border-bottom: 1px solid #e9ecef !important;
    background-color: #f8f9fa !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 1.25rem 1.5rem !important;
}

#admin-flagged-detail-modal .modal-body {
    padding: 1.5rem !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
}

#admin-flagged-detail-modal .modal-footer {
    border-top: 1px solid #e9ecef !important;
    background-color: #f8f9fa !important;
    border-radius: 0 0 12px 12px !important;
    padding: 1rem 1.5rem !important;
}

/* Ensure modal content is responsive */
@media (max-width: 768px) {
    .modal.fade#bulk-results-modal .modal-dialog.modal-xl,
    #bulk-results-modal.modal .modal-dialog,
    body .modal#bulk-results-modal .modal-dialog {
        max-width: 98vw !important;
        width: 98vw !important;
        margin: 0.5rem auto !important;
    }
    
    #bulk-results-modal .modal-content {
        max-height: 95vh !important;
    }
}

/* Domain Alerts Toast System */
.alerts-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    pointer-events: none;
}

/* Ensure minimized toast container allows pointer events */
.alerts-toast-container .alerts-toast-minimized {
    pointer-events: auto !important;
}

.alerts-toast {
    pointer-events: auto;
    background: white;
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    border-left: 4px solid #fff59d;
}

.alerts-toast .toast-header {
    background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 16px;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
    position: relative;
}

.alerts-toast #alerts-summary {
    background: linear-gradient(135deg, #fafbfc 0%, #f1f3f4 100%);
    border-bottom: 1px solid #e8eaed;
    font-size: 0.85rem;
    padding: 12px 16px;
    color: #5f6368;
    font-weight: 400;
    letter-spacing: 0.025em;
    line-height: 1.4;
}

/* Style the summary text specifically */
.alerts-toast #alerts-summary #alerts-summary-text {
    color: #5f6368;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

/* Add subtle separators between priority levels */
.alerts-toast #alerts-summary #alerts-summary-text {
    opacity: 0.85;
}

/* Subtle styling for the summary section */
.alerts-toast #alerts-summary {
    position: relative;
}

/* Add a very subtle shadow to the summary section */
.alerts-toast #alerts-summary::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e8eaed 50%, transparent 100%);
}

.alerts-toast .toast-body {
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

/* Alert Items Styling */
.alerts-toast .card {
    border: 1px solid #f1f3f4;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.alerts-toast .card:hover {
    border-color: #e8eaed;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    background: #fafbfc;
}

.alerts-toast .card-body {
    padding: 12px;
}

.alerts-toast .card .mt-2.pt-2 {
    background-color: #f8f9fa;
    margin: 8px -12px -12px -12px;
    padding: 8px 12px 12px 12px;
    border-radius: 0 0 8px 8px;
}

.alerts-toast .badge {
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 12px;
}

/* Domain Alerts Accordion */
.domain-alerts-accordion .accordion-item {
    border: none;
    background: transparent;
    margin-bottom: 8px;
}

.domain-alerts-accordion .accordion-button {
    background: #ffffff;
    border: 1px solid #f1f3f4;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #5f6368;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.domain-alerts-accordion .accordion-button::after {
    margin-left: auto;
}

.domain-alerts-accordion .accordion-button:not(.collapsed) {
    background: #f8f9fa;
    border-color: #dadce0;
    color: #3c4043;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.domain-alerts-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.15rem rgba(95, 99, 104, 0.15);
    border-color: #dadce0;
    background: #f8f9fa;
}

/* Accordion content styling */
.domain-alerts-accordion .accordion-collapse {
    border: none;
    background: transparent;
}

.domain-alerts-accordion .accordion-body {
    padding: 16px;
    background: #ffffff;
    border: 1px solid #f1f3f4;
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin-top: -1px;
}

/* Subtle hover effects for accordion items */
.domain-alerts-accordion .accordion-button:hover {
    background: #fafbfc;
    border-color: #e8eaed;
}

/* Make alert type badges more subtle */
.alerts-toast .alert-type-badge {
    background: #f1f3f4 !important;
    color: #5f6368 !important;
    border: 1px solid #e8eaed;
    font-weight: 400;
    opacity: 0.9;
}

/* Subtle styling for alert content */
.alerts-toast .alert-content {
    color: #5f6368;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Make severity badges more refined */
.alerts-toast .severity-badge {
    font-weight: 500;
    opacity: 0.85;
}

/* Alert count badge styling in accordion title */
.domain-alerts-accordion .accordion-button .alert-count-badge {
    display: inline-block;
    background: #ff6b6b;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
    min-width: 24px;
    text-align: center;
}

.domain-alerts-accordion .accordion-button:hover .alert-count-badge {
    background: #ff5252;
    box-shadow: 0 3px 6px rgba(255, 107, 107, 0.4);
}

.domain-alerts-accordion .accordion-button:not(.collapsed) .alert-count-badge {
    background: #ee5a52;
    box-shadow: 0 3px 8px rgba(238, 90, 82, 0.4);
}

/* Publisher name chip styling in accordion title */
.domain-alerts-accordion .accordion-button .publisher-chip {
    display: inline-block;
    background: #80868b;
    color: #ffffff;
    border: 1px solid #9aa0a6;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 12px;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.3px;
}

.domain-alerts-accordion .accordion-button:hover .publisher-chip {
    background: #5f6368;
    border-color: #80868b;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.domain-alerts-accordion .accordion-button:not(.collapsed) .publisher-chip {
    background: #5f6368;
    color: #ffffff;
    border-color: #80868b;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}

/* Left side wrapper for domain and alert count */
.domain-alerts-accordion .accordion-button .left-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Domain name styling - maintain default accordion button font size */
.domain-alerts-accordion .accordion-button .domain-name {
    margin-right: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #202124;
}

/* Publisher filter chips - horizontal scrollable */
.publisher-chips-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.publisher-chips-scroll::-webkit-scrollbar {
    height: 4px;
}

.publisher-chips-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.publisher-chips-scroll::-webkit-scrollbar-thumb {
    background: #dadce0;
    border-radius: 2px;
}

.publisher-chips-scroll::-webkit-scrollbar-thumb:hover {
    background: #bdc1c6;
}

/* Publisher chip buttons */
.publisher-chip-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #f1f3f4;
    color: #5f6368;
    border: 1px solid #dadce0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.publisher-chip-btn:hover {
    background: #e8eaed;
    border-color: #bdc1c6;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.publisher-chip-btn.active {
    background: #202124;
    color: #ffffff;
    border-color: #202124;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.publisher-chip-btn.active:hover {
    background: #3c4043;
    border-color: #3c4043;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.publisher-chip-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 33, 36, 0.2);
}

/* Subtle button styling */
.alerts-toast .btn-outline-primary {
    border-color: #dadce0;
    color: #5f6368;
    background: transparent;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.alerts-toast .btn-outline-primary:hover {
    border-color: #bdc1c6;
    background: #f8f9fa;
    color: #3c4043;
    transform: none;
}

.alerts-toast .btn-outline-success {
    border-color: #dadce0;
    color: #5f6368;
    background: transparent;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.alerts-toast .btn-outline-success:hover {
    border-color: #bdc1c6;
    background: #f8f9fa;
    color: #3c4043;
    transform: none;
}

.domain-alerts-accordion .accordion-button::after {
    background-size: 16px;
    transition: transform 0.3s ease;
    opacity: 0.7;
}

/* Improve spacing and typography */
.domain-alerts-accordion .accordion-item {
    margin-bottom: 8px;
    border: none;
    background: transparent;
}

/* Subtle divider between accordion items */
.domain-alerts-accordion .accordion-item:not(:last-child) {
    border-bottom: 1px solid #f1f3f4;
    padding-bottom: 8px;
}

.domain-alerts-accordion .accordion-body {
    padding: 8px 0;
    background: transparent;
}

/* Alert Type Icons */
.alerts-toast .fa-dollar-sign {
    color: #28a745;
}

.alerts-toast .fa-server {
    color: #ffc107;
}

.alerts-toast .fa-users {
    color: #17a2b8;
}

.alerts-toast .fa-chart-line {
    color: #6f42c1;
}

.alerts-toast .fa-exclamation-triangle {
    color: #dc3545;
}

/* View Button Styling */
.alerts-toast .btn-outline-primary {
    border-width: 1px;
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.alerts-toast .btn-outline-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.alerts-toast .btn-outline-success {
    border-width: 1px;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    min-width: 32px;
}

.alerts-toast .btn-outline-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

/* Minimize/Maximize button styling */
.alerts-toast .btn-minimize,
.alerts-toast .btn-maximize {
    background: #f8f9fa;
    border: 1px solid #e8eaed;
    font-size: 1rem;
    font-weight: 400;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    opacity: 0.8;
    color: #5f6368;
    line-height: 1;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Icon styling for minimize/maximize buttons */
.alerts-toast .btn-minimize i,
.alerts-toast .btn-maximize i {
    font-size: 0.9rem;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure maximize button in minimized toast is clickable and styled consistently */
.alerts-toast-minimized .btn-maximize {
    z-index: 10001 !important;
    pointer-events: auto !important;
    position: relative;
    cursor: pointer !important;
    background: #f8f9fa !important;
    border: 1px solid #e8eaed !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    padding: 6px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    opacity: 0.8 !important;
    color: #5f6368 !important;
    line-height: 1 !important;
    min-width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.alerts-toast-minimized .btn-maximize:hover {
    opacity: 1 !important;
    background-color: #e8eaed !important;
    color: #3c4043 !important;
    border-color: #dadce0 !important;
    transform: scale(1.05);
}

.alerts-toast .btn-minimize:hover,
.alerts-toast .btn-maximize:hover {
    opacity: 1;
    background-color: #e8eaed;
    color: #3c4043;
    border-color: #dadce0;
    transform: scale(1.05);
}

/* Ensure minimize/maximize buttons are always visible */
.alerts-toast .btn-minimize:focus,
.alerts-toast .btn-maximize:focus {
    outline: 2px solid #dadce0;
    outline-offset: 2px;
    background-color: #e8eaed;
}

/* Make sure the buttons have proper contrast */
.alerts-toast .btn-minimize,
.alerts-toast .btn-maximize {
    text-shadow: none;
}

/* Minimized toast styling */
.alerts-toast-minimized {
    background: white;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-left: 3px solid #fff59d;
    transition: all 0.3s ease;
    z-index: 10000 !important;
    pointer-events: auto !important;
    position: relative;
}

.alerts-toast-minimized:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Smooth transitions for minimized toast */
.alerts-toast-minimized {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon styling consistency for minimized toast */
.alerts-toast-minimized .btn-maximize i {
    font-size: 0.9rem;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alerts-toast-minimized .toast-header {
    background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 16px;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    position: relative;
}

/* Improved spacing for minimized toast content */
.alerts-toast-minimized .toast-header .d-flex {
    gap: 12px;
}

/* Style the title text in minimized toast */
.alerts-toast-minimized .toast-header small {
    font-size: 0.9rem;
    color: #5f6368;
    white-space: nowrap;
}

/* Style the alert count badge in minimized toast */
.alerts-toast-minimized .toast-header .badge {
    font-size: 0.75rem;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive Design for Alerts Toast */
@media (max-width: 768px) {
    .alerts-toast-container {
        bottom: 10px;
        right: 10px;
        left: 10px;
    }
    
    .alerts-toast {
        width: 100% !important;
        max-width: none;
    }
    
    .alerts-toast #alerts-toast-body {
        max-height: 300px;
    }
    
    .alerts-toast .card-body {
        padding: 10px;
    }
    
    .alerts-toast .accordion-button {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}

/* Animation for toast appearance */
@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.alerts-toast.show {
    animation: slideInFromBottom 0.3s ease-out;
}

/* Hover effects for better interactivity */
.alerts-toast:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

/* Custom scrollbar for toast body */
.alerts-toast #alerts-toast-body::-webkit-scrollbar {
    width: 6px;
}

.alerts-toast #alerts-toast-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.alerts-toast #alerts-toast-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.alerts-toast #alerts-toast-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Alerts Count Badge Styling */
#alerts-count-badge {
    margin-left: 16px !important;
    font-size: 0.75rem !important;
    min-width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    font-weight: 600 !important;
}

/* Alerts Count Indicator Styling */
#alerts-count-indicator {
    font-size: 0.7rem !important;
    min-width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

#alerts-count-indicator.bg-success {
    background-color: #28a745 !important;
}

#alerts-count-indicator.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

#alerts-count-indicator.bg-danger {
    background-color: #dc3545 !important;
}

/* Domain Analytics Alerts Section */
.domain-selector-container .btn-outline-warning {
    border-width: 2px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.domain-selector-container .btn-outline-warning:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.domain-selector-container .btn-outline-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

/* Tab Alerts Count Styling */
#domain-tab-alerts-count {
    font-size: 0.7rem !important;
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 6px !important;
    font-weight: 600 !important;
}

#domain-tab-alerts-count.bg-success {
    background-color: #28a745 !important;
}

#domain-tab-alerts-count.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

#domain-tab-alerts-count.bg-danger {
    background-color: #dc3545 !important;
}

/* ============================================
   Coolsense AI Chat Interface Styles
   ============================================ */

/* Chat session item hover effects */
.chat-session-item:hover {
    background: #f7fafc !important;
    border-color: #cbd5e0 !important;
}

.chat-session-item:hover[style*="background: #f7fafc"] {
    background: #edf2f7 !important;
}

/* Chat messages container scrollbar */
#coolsense-chat-messages::-webkit-scrollbar {
    width: 8px;
}

#coolsense-chat-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#coolsense-chat-messages::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

#coolsense-chat-messages::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Chat input focus state */
#coolsense-chat-input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none;
}

/* Message animation */
@keyframes slideInMessage {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-session-item,
#coolsense-chat-messages > div {
    animation: slideInMessage 0.3s ease-out;
}

/* Responsive adjustments for Coolsense */
@media (max-width: 992px) {
    #coolsense-chat-messages {
        max-height: calc(100vh - 500px) !important;
    }
}

@media (max-width: 768px) {
    .coolsense-sidebar {
        display: none;
    }
    
    #coolsense-chat-messages {
        max-height: calc(100vh - 450px) !important;
    }
}

/* Loading state for Coolsense */
#loading-coolsense {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Badge improvements in Coolsense */
.badge {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Button hover effects in chat */
#coolsense-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

/* Card hover in chat data */
.card:hover {
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* Smooth transitions */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

button, a {
    transition: all 0.2s ease;
}

/* Coolsense specific table styles */
#coolsense-chat-messages table {
    font-size: 13px;
}

#coolsense-chat-messages table th {
    background: #f7fafc;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #4a5568;
}

#coolsense-chat-messages table td {
    vertical-align: middle;
}

/* Download button animation */
.btn-primary:active {
    transform: scale(0.98);
}

/* Chat history sidebar scrollbar */
.chat-session-item:first-child {
    margin-top: 0;
}

/* Welcome screen question buttons */
#coolsense-chat-messages .btn-light:hover {
    background-color: #f7fafc !important;
    color: #2d3748 !important;
    border-color: #4299e1 !important;
    transform: translateX(3px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#coolsense-chat-messages .btn-light {
    transition: all 0.3s ease;
}

/* Welcome screen cards hover */
#coolsense-chat-messages .card:hover {
    border-color: #cbd5e0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Chat session buttons - remove default button styling */
.chat-session-item {
    font-family: inherit;
    line-height: inherit;
}

.chat-session-item:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2);
}

/* Flag Response Button Styles */
.flag-response-btn:hover {
    background: #fef2f2 !important;
    color: #f56565 !important;
    border-color: #fecaca !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(245, 101, 101, 0.2) !important;
}

/* Enhanced Metric Card – clickable hover hint */
.enhanced-metric-card {
    position: relative;
    overflow: hidden;
}

/* Shared pill treatment for the metrics-footer row.
   Border-radius mirrors the metric cards (8px) for visual continuity.
   .revenue-metrics-hint  → click-affordance hint on the left.
   .revenue-metrics-timestamp → "Last updated" stamp on the right.
   While loading, the pill contains a skeleton bar — strip the blue
   chrome so only the shimmer is visible. */
.revenue-metrics-hint,
.revenue-metrics-timestamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    background: linear-gradient(135deg,
                                rgba(0, 123, 255, 0.08),
                                rgba(0, 123, 255, 0.02));
    border: 1px solid rgba(0, 123, 255, 0.22);
    border-radius: 8px;
    font-size: 12px;
    color: #4a5568;
    box-shadow: 0 1px 2px rgba(0, 123, 255, 0.05);
}

.revenue-metrics-hint:has(> .loading-skeleton),
.revenue-metrics-timestamp:has(> .loading-skeleton) {
    background: transparent;
    border-color: #e2e8f0;
    box-shadow: none;
}

.revenue-metrics-hint-icon {
    color: #007bff;
    font-size: 12px;
}

.revenue-metrics-hint-action {
    color: #007bff;
    font-weight: 600;
}

.revenue-metrics-hint-arrow {
    color: #007bff;
    font-size: 10px;
}

.enhanced-metric-card.loaded:hover {
    box-shadow: 0 4px 12px rgba(0,123,255,0.18) !important;
    transform: translateY(-2px);
    border-color: #007bff !important;
}

/* Leaderboard Table Height Fix */
#lb-table-data-container .dash-spreadsheet-container {
    max-height: 750px !important;
}

#lb-table-data-container .dash-spreadsheet-inner {
    max-height: 700px !important;
}

#lb-table-data-container .dash-freeze-top {
    max-height: 650px !important;
}

#lb-table-data-container .dash-spreadsheet-inner table {
    height: auto !important;
}

/* Leaderboard Table Scrollbar Styling */
#lb-table-data-container ::-webkit-scrollbar,
#lb-table-data-container .dash-spreadsheet-container::-webkit-scrollbar,
#lb-table-data-container .dash-spreadsheet-inner::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

#lb-table-data-container ::-webkit-scrollbar-track,
#lb-table-data-container .dash-spreadsheet-container::-webkit-scrollbar-track,
#lb-table-data-container .dash-spreadsheet-inner::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 3px !important;
}

#lb-table-data-container ::-webkit-scrollbar-thumb,
#lb-table-data-container .dash-spreadsheet-container::-webkit-scrollbar-thumb,
#lb-table-data-container .dash-spreadsheet-inner::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 3px !important;
}

#lb-table-data-container ::-webkit-scrollbar-thumb:hover,
#lb-table-data-container .dash-spreadsheet-container::-webkit-scrollbar-thumb:hover,
#lb-table-data-container .dash-spreadsheet-inner::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

#lb-table-data-container *,
#lb-table-data-container .dash-spreadsheet-container,
#lb-table-data-container .dash-spreadsheet-inner {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Hide the outer scrollbar on the table container (keeps only inner body scrollbar) */
#lb-table-data-container .dash-table-container {
    overflow: visible !important;
}

#lb-table-data-container .dash-spreadsheet-container {
    overflow-y: hidden !important;
    overflow-x: auto !important;
}

#lb-table-data-container .dash-spreadsheet-inner {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Ensure the freeze-top area (body scroll container) has proper scrolling */
#lb-table-data-container .dash-freeze-top {
    overflow-y: auto !important;
}

/* Remove scrollbar from Card wrapper */
#lb-table-content .card,
#lb-table-content .card-body {
    overflow: visible !important;
    height: auto !important;
}

#lb-table-content {
    overflow: visible !important;
}

/* Remove scrollbar from the outer table wrapper */
#lb-data-table {
    overflow-y: hidden !important;
}

/* Ensure pagination is visible */
#lb-pagination-info {
    display: flex !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 100 !important;
    background-color: #ffffff !important;
    margin-top: 0 !important;
    padding: 12px 16px !important;
    min-height: 48px !important;
}

#lb-data-table ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

#lb-data-table ::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 3px !important;
}

#lb-data-table ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 3px !important;
}

#lb-data-table ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* Edit Team Button Hover Effect */
.edit-team-btn-hover:hover {
    opacity: 1 !important;
    background: #f7fafc !important;
    color: #2d3748 !important;
}

/* ==========================================
   Revenue Drivers Sidebar Styles
   ========================================== */

/* Trend item hover effect */
.trend-item:hover {
    background: #f7fafc !important;
}

/* Revenue drivers sidebar scrollbar */
#revenue-drivers-sidebar::-webkit-scrollbar {
    width: 4px;
}

#revenue-drivers-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#revenue-drivers-sidebar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

#revenue-drivers-sidebar::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Sticky behavior is applied to the outer wrapper Div in layouts/main.py;
   stacking another `position: sticky` on the inner card here can shift its
   computed position and break alignment with the metric grid in the parallel
   column. Leaving the inner card non-sticky. */

/* Hide sidebar on mobile */
@media (max-width: 991px) {
    #revenue-trends-content {
        flex-direction: column !important;
    }
    
    #revenue-trends-content > div:last-child {
        max-width: 100% !important;
        min-width: 100% !important;
        margin-top: 20px;
    }
}

/* Dimension tab pills animation */
.btn-group .btn {
    transition: all 0.15s ease;
}

/* Pagination button styles */
#sidebar-prev-page:disabled,
#sidebar-next-page:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Updated sidebar responsive for wider layout.
   Scoped to min-width:992px so these fixed-width clamps apply ONLY in the
   side-by-side layout. Below 992px the layout stacks (see the max-width:991px
   rule above) and the sidebar must be a full-width 100% block; without the
   min-width guard these later, equal-specificity rules would win on source
   order and re-pin the stacked sidebar to ~340-380px — overflowing narrow
   phones and leaving it misaligned with the full-width cards above it. */
@media (min-width: 992px) and (max-width: 1400px) {
    #revenue-trends-content > div:last-child {
        min-width: 380px !important;
        max-width: 420px !important;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    #revenue-trends-content > div:last-child {
        min-width: 340px !important;
        max-width: 380px !important;
    }
}

/* Hourly metrics modal – wider than default xl (1140px), above alert toasts.
   IMPORTANT: size the .modal-dialog, NOT the #id (which is the fixed full-screen
   .modal overlay). Sizing the overlay pins it to the left edge and throws the
   centering off (uneven side gaps). This matches the combination-finder modal. */
#hourly-metrics-modal,
.hourly-metrics-modal-wrapper.modal {
    --bs-modal-width: 92vw !important;
}
#hourly-metrics-modal .modal-dialog,
#hourly-metrics-modal.modal .modal-dialog.modal-xl,
.hourly-metrics-modal-wrapper .modal-dialog,
body .modal#hourly-metrics-modal .modal-dialog,
html body div.modal.fade#hourly-metrics-modal .modal-dialog.modal-xl {
    max-width: 92vw !important;
    width: 92vw !important;
}
#hourly-metrics-modal .modal-content {
    max-height: 90vh !important;
}

/* ------------------------------------------------------------------ */
/* Hourly Metrics modal — mini summary cards + Today/Yesterday toggle */
/* ------------------------------------------------------------------ */

/* Mini summary cards (Peak / Low / Total / EOD).
   Same chrome family as the EOY cards and Key Forecast Insights cards:
   box-shadow outline, hairline top-edge accent that reveals on hover,
   lift on hover, icon chip, tabular numerals on the value. */
.hourly-mini-card {
    --accent: #94a3b8;
    --accent-soft: rgba(148, 163, 184, 0.12);
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 2px rgba(15, 23, 42, 0.03);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.hourly-mini-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-top: 2px solid var(--accent);
    pointer-events: none;
    opacity: 0.45;
    clip-path: inset(0 65% 0 0);
    transition: opacity 0.25s ease,
                clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hourly-mini-card:hover {
    box-shadow:
        0 0 0 1px #cbd5e0,
        0 6px 18px rgba(15, 23, 42, 0.07);
    transform: translateY(-2px);
}

.hourly-mini-card:hover::before {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.hourly-mini-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.hourly-mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    flex-shrink: 0;
}

.hourly-mini-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 1.2;
}

.hourly-mini-value {
    font-size: 19px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: -0.015em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.hourly-mini-subtitle {
    font-size: 11px;
    color: #718096;
    margin-top: 4px;
    line-height: 1.4;
}

/* Chart + Table panels inside the modal body. Same box-shadow outline chrome
   as the cards on the main page, with a quiet header bar that uses the modal
   body's existing soft-gray fill so the two regions visually separate without
   needing a heavy border between them. */
.hourly-panel {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 3px rgba(15, 23, 42, 0.04);
}

.hourly-panel-header {
    padding: 12px 18px;
    background: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
}

/* Hourly modal DataTable — row hover + small refinements that the table's
   inline style props can't express. The hover bg sits just above the zebra
   fill so the user gets immediate feedback on which row they're inspecting. */
.hourly-panel .dash-spreadsheet-container .dash-spreadsheet-inner tr {
    cursor: pointer;
}

.hourly-panel .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
    background-color: rgba(45, 55, 72, 0.05) !important;
}

/* Keep the sticky Hour column readable when the row is being hovered. */
.hourly-panel .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td.column-0 {
    background-color: rgba(248, 250, 252, 0.95) !important;
}

/* Uppercase tracked column headers — adds editorial polish to the dark bar. */
.hourly-panel .dash-spreadsheet-container .dash-header th .column-header-name {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ------------------------------------------------------------------ */
/* Hourly modal metric dropdown — scoped to this one dropdown so the   */
/* refined styling doesn't leak into other dcc.Dropdowns on the page.  */
/* ------------------------------------------------------------------ */
#hourly-modal-metric-dropdown .Select-control {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: white !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    height: 34px !important;
    min-height: 34px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#hourly-modal-metric-dropdown .Select-control:hover {
    border-color: #cbd5e0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

#hourly-modal-metric-dropdown.is-focused:not(.is-open) > .Select-control {
    border-color: #2d3748 !important;
    box-shadow: 0 0 0 3px rgba(45, 55, 72, 0.08) !important;
}

#hourly-modal-metric-dropdown .Select-value-label,
#hourly-modal-metric-dropdown .Select-placeholder {
    color: #1a202c !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 32px !important;
    padding-left: 12px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

#hourly-modal-metric-dropdown .Select-arrow {
    border-color: #4a5568 transparent transparent !important;
    border-width: 5px 4px 0 !important;
}

#hourly-modal-metric-dropdown.is-open .Select-arrow {
    border-color: transparent transparent #4a5568 !important;
    border-width: 0 4px 5px !important;
}

#hourly-modal-metric-dropdown .Select-menu-outer {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    background: white !important;
}

#hourly-modal-metric-dropdown .Select-option {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    color: #2d3748 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    cursor: pointer !important;
}

#hourly-modal-metric-dropdown .Select-option.is-focused {
    background-color: #f1f5f9 !important;
    color: #1a202c !important;
}

#hourly-modal-metric-dropdown .Select-option.is-selected {
    background-color: rgba(45, 55, 72, 0.08) !important;
    color: #1a202c !important;
    font-weight: 600 !important;
}

/* Section headers inside the dropdown menu (── Revenue ──, ── CPM ── …) */
#hourly-modal-metric-dropdown .Select-option.is-disabled {
    color: #94a3b8 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 10px 14px 4px 14px !important;
    background: transparent !important;
    cursor: default !important;
    letter-spacing: 0.4px !important;
}

/* ------------------------------------------------------------------ */
/* Hourly modal frame + entrance animation                            */
/* ------------------------------------------------------------------ */
.hourly-metrics-modal-wrapper .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.10),
        0 24px 64px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

/* Refined close button — slate ghost that fills on hover. */
.hourly-metrics-modal-wrapper .modal-header .btn-close {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: transparent;
    background-size: 12px 12px;
    opacity: 0.55;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    padding: 0;
    margin: 0 0 0 12px;
}

.hourly-metrics-modal-wrapper .modal-header .btn-close:hover {
    background-color: #f1f5f9;
    opacity: 1;
}

.hourly-metrics-modal-wrapper .modal-header .btn-close:focus {
    box-shadow: 0 0 0 3px rgba(45, 55, 72, 0.10);
    outline: 0;
}

/* Entrance animation — Bootstrap fade + a small scale settle. */
.hourly-metrics-modal-wrapper.fade .modal-dialog {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease;
    transform: scale(0.98);
    opacity: 0;
}

.hourly-metrics-modal-wrapper.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Filter summary chip (right side of the modal header)               */
/* ------------------------------------------------------------------ */
.hourly-filter-summary {
    font-size: 11.5px;
    font-weight: 600;
    color: #4a5568;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 4px 12px;
    letter-spacing: 0.1px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hourly-filter-summary:empty {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Empty state (no hourly data) — refined illustration card           */
/* ------------------------------------------------------------------ */
.hourly-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.hourly-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 22px;
    margin-bottom: 14px;
    box-shadow: 0 0 0 6px rgba(241, 245, 249, 0.6);
}

.hourly-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.hourly-empty-subtitle {
    font-size: 12.5px;
    color: #718096;
    max-width: 360px;
    line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Mobile responsive — modal header collapses to a stack              */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .hourly-metrics-modal-wrapper .modal-header > .d-flex {
        gap: 8px !important;
    }
    #hourly-modal-metric-dropdown {
        width: 100% !important;
        min-width: 100% !important;
    }
    .hourly-filter-summary {
        order: 99;
        margin-left: 0 !important;
        margin-top: 4px;
    }
}

/* ================================================================== */
/* Revenue Driver Breakdown modal                                     */
/* Same chrome family as the Hourly Metrics modal, with the blue       */
/* identity inherited from the Revenue Drivers sidebar.                */
/* ================================================================== */

.revenue-driver-modal-wrapper .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.10),
        0 24px 64px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

/* Close button — slate ghost. */
.revenue-driver-modal-wrapper .modal-header .btn-close {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: transparent;
    background-size: 12px 12px;
    opacity: 0.55;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    padding: 0;
    margin: 0 0 0 12px;
}
.revenue-driver-modal-wrapper .modal-header .btn-close:hover {
    background-color: #f1f5f9;
    opacity: 1;
}
.revenue-driver-modal-wrapper .modal-header .btn-close:focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
    outline: 0;
}

/* Entrance animation — Bootstrap fade + a small scale settle. */
.revenue-driver-modal-wrapper.fade .modal-dialog {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease;
    transform: scale(0.98);
    opacity: 0;
}
.revenue-driver-modal-wrapper.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
}

/* Segmented track shared by the time-period (3Hr/DoD/WoW) and view
   (Breakdown/Analysis) toggles inside the modal header. */
.modal-segmented-track {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 3px;
}

.modal-segmented-track .modal-segmented-btn {
    /* Inline styles from _time_btn_style() control active vs inactive bg/text;
       this only handles the hover state for inactive buttons. */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover preview = fill to active style (matches the Today/Yesterday toggle's
   pattern from the Hourly modal, but with blue instead of dark slate). */
.modal-segmented-track .modal-segmented-btn:hover {
    background: #007bff !important;
    background-color: #007bff !important;
    color: white !important;
}

/* Overview chip — blue identity, matches the sidebar's blue accents. */
.modal-overview-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: #007bff;
    background: rgba(0, 123, 255, 0.10);
    border: 1px solid rgba(0, 123, 255, 0.20);
    border-radius: 999px;
    padding: 4px 12px;
    letter-spacing: 0.2px;
}

/* Metric dropdown — same refined treatment as the hourly modal, with the
   blue identity for focus instead of slate. */
#modal-metric-selector .Select-control {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: white !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    height: 32px !important;
    min-height: 32px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#modal-metric-selector .Select-control:hover {
    border-color: #cbd5e0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

#modal-metric-selector.is-focused:not(.is-open) > .Select-control {
    border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12) !important;
}

#modal-metric-selector .Select-value-label,
#modal-metric-selector .Select-placeholder {
    color: #1a202c !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 30px !important;
    padding-left: 12px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

#modal-metric-selector .Select-arrow {
    border-color: #4a5568 transparent transparent !important;
    border-width: 5px 4px 0 !important;
}

#modal-metric-selector.is-open .Select-arrow {
    border-color: transparent transparent #4a5568 !important;
    border-width: 0 4px 5px !important;
}

#modal-metric-selector .Select-menu-outer {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    background: white !important;
}

#modal-metric-selector .Select-option {
    padding: 8px 14px !important;
    font-size: 12px !important;
    color: #2d3748 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    cursor: pointer !important;
}

#modal-metric-selector .Select-option.is-focused {
    background-color: rgba(0, 123, 255, 0.08) !important;
    color: #1a202c !important;
}

#modal-metric-selector .Select-option.is-selected {
    background-color: rgba(0, 123, 255, 0.15) !important;
    color: #007bff !important;
    font-weight: 600 !important;
}

#modal-metric-selector .Select-option.is-disabled {
    color: #94a3b8 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 10px 14px 4px 14px !important;
    background: transparent !important;
    cursor: default !important;
    letter-spacing: 0.4px !important;
}

/* ------------------------------------------------------------------ */
/* Revenue Drivers sidebar metric dropdown                            */
/* Scoped to #sidebar-metric-selector. Same refined treatment as the   */
/* modal dropdowns, with the sidebar's blue identity for focus + active*/
/* ------------------------------------------------------------------ */
#sidebar-metric-selector .Select-control {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: white !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    height: 30px !important;
    min-height: 30px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#sidebar-metric-selector .Select-control:hover {
    border-color: #cbd5e0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

#sidebar-metric-selector.is-focused:not(.is-open) > .Select-control {
    border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12) !important;
}

#sidebar-metric-selector .Select-value-label,
#sidebar-metric-selector .Select-placeholder {
    color: #1a202c !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    line-height: 28px !important;
    padding-left: 10px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

#sidebar-metric-selector .Select-arrow {
    border-color: #4a5568 transparent transparent !important;
    border-width: 5px 4px 0 !important;
}

#sidebar-metric-selector.is-open .Select-arrow {
    border-color: transparent transparent #4a5568 !important;
    border-width: 0 4px 5px !important;
}

#sidebar-metric-selector .Select-menu-outer {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    background: white !important;
}

#sidebar-metric-selector .Select-option {
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    color: #2d3748 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    cursor: pointer !important;
}

#sidebar-metric-selector .Select-option.is-focused {
    background-color: rgba(0, 123, 255, 0.08) !important;
    color: #1a202c !important;
}

#sidebar-metric-selector .Select-option.is-selected {
    background-color: rgba(0, 123, 255, 0.15) !important;
    color: #007bff !important;
    font-weight: 600 !important;
}

#sidebar-metric-selector .Select-option.is-disabled {
    color: #94a3b8 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 9px 12px 3px 12px !important;
    background: transparent !important;
    cursor: default !important;
    letter-spacing: 0.4px !important;
}

@media (max-width: 768px) {
    .revenue-driver-modal-wrapper .modal-header > .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    #modal-metric-dropdown-wrapper {
        width: 100% !important;
    }
}

/* ------------------------------------------------------------------ */
/* Revenue Driver modal — inner content (summary card, breakdown grid, */
/* breakdown items, breadcrumb, empty state).                          */
/* ------------------------------------------------------------------ */

/* Summary card: Current Period | change badge | Comparison Period */
.driver-summary-card {
    background: white;
    border-radius: 12px;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 22px 24px;
    margin-bottom: 20px;
}

.driver-summary-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-bottom: 8px;
    line-height: 1.2;
}

.driver-summary-value-current {
    font-size: 28px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.driver-summary-value-compare {
    font-size: 22px;
    font-weight: 600;
    color: #4a5568;
    letter-spacing: -0.01em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.driver-summary-date {
    font-size: 11px;
    color: #a0aec0;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* Change badge — pill with icon + delta + pct */
.driver-summary-change {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 22px;
    border-radius: 12px;
    border: 1px solid;  /* color set inline per direction */
}

.driver-summary-change-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.driver-summary-change-pct {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Once the summary card's three col-md-4 columns stack (<768px), Current
   Period floats left and Comparison Period floats right (its `text-end`) —
   lopsided. Center all three columns so they align consistently. */
@media (max-width: 767.98px) {
    .driver-summary-card .row > [class*="col-"] {
        text-align: center !important;
    }
    .driver-summary-card .driver-summary-eyebrow {
        justify-content: center !important;
    }
    /* Same fix for the loading skeleton: its Comparison column right-aligns its
       bars via inline marginLeft:auto — center every stacked bar to match. */
    .driver-summary-skel .row > [class*="col-"] {
        text-align: center !important;
    }
    .driver-summary-skel .row > [class*="col-"] > div {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Vertical breathing room between the three stacked sections (loaded +
       skeleton) — they otherwise butt right up against each other. */
    .driver-summary-card .row > [class*="col-"]:not(:last-child),
    .driver-summary-skel .row > [class*="col-"]:not(:last-child) {
        margin-bottom: 16px;
    }
}

/* Breakdown grid cards — one per dimension */
.driver-breakdown-card {
    background: white;
    border-radius: 12px;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    height: 100%;
    transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.driver-breakdown-card:hover {
    box-shadow:
        0 0 0 1px #cbd5e0,
        0 6px 18px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.driver-breakdown-card-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

.driver-breakdown-card-header-icon {
    color: #4a5568;
    margin-right: 8px;
    font-size: 13px;
}

.driver-breakdown-card-header-label {
    font-weight: 700;
    font-size: 13px;
    color: #1a202c;
    letter-spacing: -0.005em;
}

/* Section labels inside the breakdown card (Top Gainers / Top Losers) */
.driver-section-label {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.driver-section-label.gainers {
    background: #f0fdf4;
    color: #166534;
    border-bottom: 1px solid #d1fae5;
}

.driver-section-label.losers {
    background: #fef2f2;
    color: #991b1b;
    border-bottom: 1px solid #fee2e2;
}

.driver-section-label .fas {
    margin-right: 6px;
    font-size: 11px;
}

/* Breakdown item rows — clickable for drilldown */
.driver-breakdown-item {
    padding: 8px 14px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-variant-numeric: tabular-nums;
}

.driver-breakdown-item:hover {
    background-color: #f8fafc;
}

.driver-breakdown-item:last-child {
    border-bottom: 0;
}

/* Breadcrumb refresh */
.driver-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    background: white;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 2px rgba(15, 23, 42, 0.03);
}

.driver-breadcrumb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: #f1f5f9;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.driver-breadcrumb-chip:hover {
    background: #e2e8f0;
    color: #1a202c;
    border-color: #cbd5e0;
}

.driver-breadcrumb-chip.is-active {
    background: rgba(0, 123, 255, 0.10);
    color: #007bff;
    border-color: rgba(0, 123, 255, 0.25);
    cursor: default;
}

.driver-breadcrumb-separator {
    color: #cbd5e0;
    font-size: 10px;
    margin: 0 2px;
}

/* Empty state — same DNA as the hourly modal's empty state. */
.driver-empty-state {
    background: white;
    border-radius: 12px;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.driver-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 22px;
    margin-bottom: 14px;
    box-shadow: 0 0 0 6px rgba(241, 245, 249, 0.6);
}

.driver-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.driver-empty-subtitle {
    font-size: 12.5px;
    color: #718096;
    max-width: 380px;
    line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Driver stat cards — same DNA as .hourly-mini-card                  */
/* Box-shadow outline, top-edge accent reveal on hover, icon chip,    */
/* tabular-num value, colored delta beneath.                          */
/* ------------------------------------------------------------------ */
.driver-stat-card {
    --accent: #94a3b8;
    --accent-soft: rgba(148, 163, 184, 0.12);
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 2px rgba(15, 23, 42, 0.03);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.driver-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-top: 2px solid var(--accent);
    pointer-events: none;
    opacity: 0.45;
    clip-path: inset(0 65% 0 0);
    transition: opacity 0.25s ease,
                clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.driver-stat-card:hover {
    box-shadow:
        0 0 0 1px #cbd5e0,
        0 6px 18px rgba(15, 23, 42, 0.07);
    transform: translateY(-2px);
}

.driver-stat-card:hover::before {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.driver-stat-card-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.driver-stat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    flex-shrink: 0;
}

.driver-stat-card-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 1.2;
}

.driver-stat-card-value {
    font-size: 19px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: -0.015em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.driver-stat-card-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.driver-stat-card-delta .fas {
    font-size: 10px;
}

/* ============================================================
   Combination Finder modal (light — matches Revenue Driver modal)
   ============================================================ */
/* Match the Overview modal's full width (92vw).
   Bootstrap 5 sizes modals via the --bs-modal-width custom property, so we
   override that on the modal itself, then escalate .modal-dialog selectors to
   beat the theme's !important rules — the same proven pattern used by the other
   wide modals in this app (e.g. #admin-flagged-detail-modal). */
#combination-finder-modal,
.combination-finder-modal-wrapper.modal {
    --bs-modal-width: 92vw !important;
}
#combination-finder-modal .modal-dialog,
#combination-finder-modal.modal .modal-dialog.modal-xl,
.combination-finder-modal-wrapper .modal-dialog,
body .modal#combination-finder-modal .modal-dialog,
html body div.modal.fade#combination-finder-modal .modal-dialog.modal-xl {
    max-width: 92vw !important;
    width: 92vw !important;
}
#combination-finder-modal .modal-content,
.combination-finder-modal-wrapper .modal-content {
    max-height: 90vh !important;
}

.combo-view { color: #2d3748; }

/* Segment card — same chrome as the Overview impact-area card
   (white, 1px ring + soft shadow, hover-lift; no hard border or left rail). */
.combo-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px 22px 16px 22px;
    margin-bottom: 16px;
    box-shadow: 0 0 0 1px #e2e8f0, 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: box-shadow .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
    display: flex; flex-direction: column;
}
.combo-card:hover {
    box-shadow: 0 0 0 1px #cbd5e0, 0 6px 18px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

/* Segment dimension chips sit in the title row (left of the change value) */
.combo-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.combo-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px;
    padding: 3px 8px; font-size: 11px; font-weight: 600; color: #334155; white-space: nowrap;
    min-width: 0;
}
.combo-chip .fas { font-size: 9px; color: #94a3b8; flex-shrink: 0; }
/* Publisher-domain chip: wider room + soft-wrap so "PublisherName / domain.com"
   never has to be truncated. The chip takes a full row in the chip grid so it
   can grow to fit, and breaks across lines if the publisher name is very long. */
.combo-chip--pub {
    align-items: flex-start;
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex-basis: 100%;
    max-width: 100%;
    padding: 6px 10px;
}
.combo-chip--pub .fas { margin-top: 3px; }

/* Causal lead sentence under the title */
.combo-lead { font-size: 12.5px; line-height: 1.55; color: #475569; margin: 8px 0 0 0; }

/* Matrix row — request → bid-req-total → bid-req-to-DSP */
.combo-matrix {
    display: flex; align-items: stretch; gap: 8px;
    margin-top: 12px; padding: 10px 12px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.combo-matrix-cell { flex: 1; min-width: 0; }
.combo-matrix-label {
    font-size: 9px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #94a3b8;
}
.combo-matrix-vals { font-size: 12.5px; font-weight: 700; color: #1a202c; margin-top: 2px; }
.combo-matrix-delta { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.combo-matrix-sub { color: #2d3748; font-weight: 600; }
.combo-matrix-arrow { font-size: 20px; color: #cbd5e0; align-self: center; line-height: 1; }

/* In-card KPI row: let the block hairlines below be the only dividers */
.combo-card .driver-impact-stats { border-bottom: none; margin-bottom: 0; padding-bottom: 4px; }

/* Story / when / substitution sections — article-style hairline separators */
.combo-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.combo-block-label {
    font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: #94a3b8; margin-bottom: 10px;
}

/* Attribution diverging bars */
.combo-attr-row { display: grid; grid-template-columns: 1fr 130px 66px; align-items: center; gap: 10px; margin-bottom: 7px; }
.combo-attr-label { display: flex; align-items: center; gap: 7px; min-width: 0; }
.combo-kind-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.combo-attr-name { font-size: 11.5px; font-weight: 600; color: #2d3748; white-space: nowrap; }
.combo-attr-delta { font-size: 10px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-attr-track { position: relative; height: 14px; border-radius: 3px; background: #f1f5f9; }
.combo-attr-axis { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: #cbd5e0; }
.combo-attr-fill { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; opacity: 0.9; }
.combo-attr-val { font-size: 11.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* Funnel */
.combo-funnel-track {
    display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 6px;
}
.combo-funnel-node { flex: 1; min-width: 56px; text-align: center; padding: 0 4px; }
.combo-funnel-stage { font-size: 8.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #94a3b8; }
.combo-funnel-val { font-size: 14px; font-weight: 700; color: #1a202c; margin: 2px 0; font-variant-numeric: tabular-nums; }
.combo-arrow { font-size: 9px; font-weight: 600; }
.combo-funnel-conn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 2px; }
.combo-funnel-caret { color: #cbd5e0; font-size: 14px; line-height: 1; }
.combo-funnel-rate { font-size: 10px; font-weight: 600; color: #4a5568; margin-top: 3px; font-variant-numeric: tabular-nums; }
.combo-funnel-rate-label { font-size: 7.5px; letter-spacing: 0.4px; text-transform: uppercase; color: #a0aec0; }

/* Pricing */
.combo-price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.combo-price-cell { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; }
.combo-price-cell.warn { border-color: #fde68a; background: #fffbeb; }
.combo-price-label { font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #94a3b8; }
.combo-price-vals { font-size: 12px; margin-top: 3px; color: #718096; font-variant-numeric: tabular-nums; }
.combo-price-cur { color: #1a202c; font-weight: 700; }
.combo-price-note { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: #b45309; display: flex; align-items: center; }
.combo-price-delta { font-size: 10.5px; color: #94a3b8; margin-top: 3px; font-variant-numeric: tabular-nums; }
.combo-price-sub { color: #94a3b8; }
.combo-price-cell.ghost { background: #f1f5f9; border-style: dashed; }

/* States */
.combo-empty { padding: 24px; text-align: center; color: #a0aec0; font-size: 12px; border: 1px dashed #e2e8f0; border-radius: 10px; background: #fff; }

/* Filter + pager toolbar — flat row with hairline bottom, matching the
   Overview/Analysis views' .driver-filter-bar pattern (no box). */
.combo-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 6px;
    padding: 4px 2px 14px 2px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 18px;
}
.combo-toolbar-label {
    /* same type treatment as .driver-filter-group-label */
    font-size: 9.5px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 1.4px; white-space: nowrap;
}

/* GROUP BY control — segmented-pill track, matching the time selector
   (.modal-segmented-track). Lives in the modal header beside the time toggle.
   RadioItems keeps its value wiring; CSS turns the radios into pills and hides
   the native inputs. */
.combo-grain-radio {
    display: inline-flex; align-items: center; gap: 2px;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 3px;
}
.combo-grain-radio .combo-grain-input {
    position: absolute; opacity: 0; width: 0; height: 0;
    margin: 0; pointer-events: none;
}
.combo-grain-radio .combo-grain-pill {
    display: inline-flex; align-items: center;
    margin: 0 !important; padding: 5px 14px;
    font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.1px;
    color: #4a5568; border-radius: 6px; cursor: pointer; user-select: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* Hover preview fills blue, same as the time toggle. */
.combo-grain-radio .combo-grain-pill:hover {
    background: #007bff; color: white;
}
/* Active pill (selected radio). */
.combo-grain-radio .combo-grain-pill:has(.combo-grain-input:checked) {
    background: #007bff; color: white;
    box-shadow: 0 1px 2px rgba(0, 123, 255, 0.18);
}
.combo-toolbar-sep {
    width: 1px; align-self: stretch; background: #e2e8f0; margin: 2px 4px;
}
/* Publisher/domain search — same control language as the sidebar's metric dropdown. */
.combo-toolbar-search {
    width: 190px; height: 30px; padding: 0 10px;
    font-size: 11.5px; font-weight: 600; color: #1a202c;
    border: 1px solid #e2e8f0; border-radius: 8px; background: white;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.combo-toolbar-search:hover {
    border-color: #cbd5e0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.combo-toolbar-search::placeholder { color: #a0aec0; font-weight: 500; }
.combo-toolbar-search:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12);
}

/* Combinations filter dropdowns — replica of #sidebar-metric-selector, scoped
   to .combo-filter-dd. */
.combo-filter-dd .Select-control {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: white !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    height: 30px !important;
    min-height: 30px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.combo-filter-dd .Select-control:hover {
    border-color: #cbd5e0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
.combo-filter-dd.is-focused:not(.is-open) > .Select-control,
.combo-filter-dd .Select.is-focused:not(.is-open) > .Select-control {
    border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12) !important;
}
.combo-filter-dd .Select-value-label,
.combo-filter-dd .Select-placeholder {
    color: #1a202c !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    line-height: 28px !important;
    padding-left: 10px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
.combo-filter-dd .Select-placeholder {
    color: #a0aec0 !important;
    font-weight: 500 !important;
}
.combo-filter-dd .Select-input {
    height: 28px !important;
}
.combo-filter-dd .Select-input > input {
    font-size: 11.5px !important;
    line-height: 28px !important;
    padding: 0 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
/* Center the value and clear × inside the 30px control (stock CSS assumes
   36px). NB: dash puts className on the .Select root itself — compound
   selector, not descendant. */
.combo-filter-dd.Select--single > .Select-control .Select-value {
    line-height: 28px !important;
    padding-left: 0 !important;
}
.combo-filter-dd .Select-clear-zone {
    vertical-align: middle !important;
    color: #94a3b8 !important;
}
.combo-filter-dd .Select-clear-zone:hover { color: #dc2626 !important; }
.combo-filter-dd .Select-clear {
    font-size: 15px !important;
    line-height: 28px !important;
    display: inline-block !important;
}
.combo-filter-dd .Select-arrow {
    border-color: #4a5568 transparent transparent !important;
    border-width: 5px 4px 0 !important;
}
.combo-filter-dd.is-open .Select-arrow,
.combo-filter-dd .Select.is-open .Select-arrow {
    border-color: transparent transparent #4a5568 !important;
    border-width: 0 4px 5px !important;
}
.combo-filter-dd .Select-menu-outer {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    background: white !important;
}
.combo-filter-dd .Select-option {
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    color: #2d3748 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    cursor: pointer !important;
}
.combo-filter-dd .Select-option.is-focused {
    background-color: rgba(0, 123, 255, 0.08) !important;
    color: #1a202c !important;
}
.combo-filter-dd .Select-option.is-selected {
    background-color: rgba(0, 123, 255, 0.15) !important;
    color: #007bff !important;
    font-weight: 600 !important;
}
.combo-toolbar-btn {
    /* matches .driver-impact-drill-btn: ghost button, blue fill on hover */
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; padding: 5px 12px;
    border-radius: 6px; background: transparent; color: #475569;
    border: 1px solid #e2e8f0; cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.combo-toolbar-btn:hover:not(:disabled) {
    background: #007bff; color: white; border-color: #007bff;
}
.combo-toolbar-btn:disabled { opacity: 0.4; cursor: default; }
.combo-toolbar-pager { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.combo-toolbar-page {
    font-size: 11.5px; font-weight: 600; color: #1a202c;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* "Show more" disclosure for segments beyond the first 12 (zero-callback). */
.combo-more > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: center;
    padding: 9px 14px; margin-bottom: 14px;
    background: #fff; border: 1px dashed #cbd5e0; border-radius: 10px;
    font-size: 12px; font-weight: 600; color: #475569;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.combo-more > summary::-webkit-details-marker { display: none; }
.combo-more > summary:hover { border-color: #007bff; color: #007bff; }
.combo-more[open] > summary { display: none; }
.combo-error { color: #c53030; padding: 16px; border: 1px solid #fed7d7; border-radius: 10px; background: #fff5f5; font-size: 13px; }
.combo-skel {
    border-radius: 4px;
    background: linear-gradient(90deg, #edf2f7 25%, #e2e8f0 37%, #edf2f7 63%);
    background-size: 400% 100%; animation: combo-shimmer 1.4s ease infinite;
}
@keyframes combo-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Baseline chip — verdict headline + self-explaining detail line */
.combo-baseline {
    display: flex; align-items: flex-start; font-size: 11.5px; font-weight: 600;
    border: 1px solid; border-radius: 8px; padding: 8px 11px; margin: 4px 0;
}
.combo-baseline-icon { margin-top: 2px; }
.combo-baseline-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.combo-baseline-title { font-weight: 600; line-height: 1.45; }
.combo-baseline-sub {
    font-size: 10.5px; font-weight: 500; line-height: 1.5; opacity: 0.82;
}

/* Sparkline caption */
/* Hourly trend chart — mirrors the Hourly Metrics modal trend chart */
.combo-spark-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 6px 4px 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.combo-spark-card .js-plotly-plot,
.combo-spark-card .plot-container { background: transparent !important; }
.combo-spark-cap {
    font-size: 11.5px; font-style: italic; color: #718096;
    margin-top: 8px; padding-left: 2px;
}
/* Inline call-out when the comparison series is genuinely empty */
.combo-spark-cap-empty { color: #b45309; font-style: normal; font-weight: 600; }

/* Story rail (request → revenue) */
.combo-rail { position: relative; }
.combo-step { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.combo-step-marker { position: relative; width: 12px; flex-shrink: 0; display: flex; justify-content: center; }
.combo-step-dot {
    width: 11px; height: 11px; border-radius: 50%; margin-top: 3px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e2e8f0; z-index: 1;
}
/* connector line down to the next step */
.combo-step:not(.last) .combo-step-marker::after {
    content: ""; position: absolute; top: 14px; bottom: -3px; left: 50%;
    width: 2px; transform: translateX(-50%); background: #e2e8f0;
}
.combo-step-body { flex: 1; min-width: 0; }
.combo-step-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.combo-step-label { font-size: 12px; font-weight: 700; color: #1a202c; }
.combo-step-flow { font-size: 11.5px; color: #4a5568; font-variant-numeric: tabular-nums; }
.combo-step-contrib {
    margin-left: auto; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.combo-step-contrib.rev { font-size: 13px; }
.combo-step-note { font-size: 11.5px; color: #718096; line-height: 1.4; margin-top: 2px; }
/* The primary funnel count flow at each node reads as the headline metric. */
.combo-step-flow { font-weight: 600; color: #2d3748; }
/* Conversion-rate chip under each funnel node (bid rate, win rate, etc.). */
.combo-step-rate {
    display: inline-flex; align-items: baseline; gap: 6px;
    margin-top: 4px; padding: 2px 8px;
    background: #f1f5f9; border-radius: 6px;
    font-variant-numeric: tabular-nums;
}
.combo-step-rate-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: #94a3b8;
}
.combo-step-rate-val { font-size: 11.5px; font-weight: 700; color: #2d3748; }
/* Cross-funnel rates (bid success, fill) shown on the impression node. */
.combo-step-extra {
    display: block; margin-top: 3px; font-size: 10.5px; color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* Substitution — explicit swap line + plain-language note + caveat */
.combo-sub-row {
    display: flex; align-items: flex-start; font-size: 12px; color: #2d3748;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 8px 11px; margin-bottom: 6px;
}
.combo-sub-row > .fas { color: #7c3aed; margin-top: 3px; }
.combo-sub-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.combo-sub-swap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.combo-sub-dim {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: #7c3aed;
}
.combo-sub-val {
    font-size: 11px; font-weight: 600; color: #2d3748; background: white;
    border: 1px solid #e2e8f0; border-radius: 5px; padding: 1px 7px;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo-sub-arrow { font-size: 10px; color: #94a3b8; }
.combo-sub-chg { font-weight: 700; font-size: 11.5px; margin-left: 2px; }
.combo-sub-note { font-size: 10.5px; color: #64748b; line-height: 1.5; }

@media (max-width: 575.98px) {
    .combo-attr-row { grid-template-columns: 1fr 90px 56px; }
    .combo-price-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Analysis + Overview cards grid — two columns on wide screens, single on
   narrow. Replaces the previous full-width vertical stack. */
#analysis-cards-container,
#impact-scan-cards-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#analysis-cards-container > .driver-insight-card,
#impact-scan-cards-list > .driver-impact-area-card {
    margin-bottom: 0;  /* grid gap replaces the per-card mb-3 */
}

@media (max-width: 900px) {
    #analysis-cards-container,
    #impact-scan-cards-list {
        grid-template-columns: 1fr;
    }
}

/* Empty state inside the cards grid spans the full row so it's centered
   visually rather than drifting into the first column. */
#analysis-cards-container > .driver-empty-state,
#impact-scan-cards-list > .driver-empty-state {
    grid-column: 1 / -1;
}

/* ------------------------------------------------------------------ */
/* Insight cards — hero header + metric grid                          */
/* Top row: severity chip (left) + category text (right).             */
/* Body: hero title + description paragraph.                          */
/* Metric grid: 2 rows (labels above values), column-aligned.         */
/* Action footer: arrow + text, clean and direct.                     */
/* ------------------------------------------------------------------ */
.driver-insight-card {
    background: white;
    border-radius: 12px;
    padding: 18px 22px 16px 22px;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 3px rgba(15, 23, 42, 0.03);
    transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}

.driver-insight-card:hover {
    box-shadow:
        0 0 0 1px #cbd5e0,
        0 6px 18px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.driver-insight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.driver-insight-severity-chip {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid;
    /* color, background, borderColor set inline */
}

.driver-insight-category {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    text-align: right;
}

.driver-insight-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.35;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.driver-insight-description {
    font-size: 12.5px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 14px;
}

/* Metric grid — labels and values in parallel rows, column-aligned. */
.driver-insight-metrics {
    padding: 12px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    margin-top: auto;  /* push to bottom if card has extra space */
}

.driver-insight-metric-row {
    display: grid;
    grid-template-columns: repeat(var(--metric-count, 3), minmax(0, 1fr));
    gap: 4px 18px;
    font-variant-numeric: tabular-nums;
}

.driver-insight-metric-row.labels {
    margin-bottom: 4px;
}

.driver-insight-metric-label {
    font-size: 9.5px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.driver-insight-metric-value {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    /* color set inline based on direction */
}

.driver-insight-action {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
    margin-top: 12px;
    font-weight: 500;
}

.driver-insight-action-arrow {
    color: #94a3b8;
    font-weight: 700;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Impact Area cards — article-snippet style (matches insight cards)  */
/* ------------------------------------------------------------------ */
.driver-impact-area-card {
    background: white;
    border-radius: 12px;
    padding: 18px 22px 14px 22px;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 3px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    /* Grid items default to min-width:auto, which lets non-shrinkable content
       push the card wider than its track and overflow to the right on small
       screens. min-width:0 lets it shrink so its children can wrap/ellipsize. */
    min-width: 0;
}

.driver-impact-area-card:hover {
    box-shadow:
        0 0 0 1px #cbd5e0,
        0 6px 18px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.driver-impact-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.driver-impact-eyebrow-rank {
    color: #cbd5e0;
    font-variant-numeric: tabular-nums;
}

.driver-impact-eyebrow-type {
    color: #475569;
    text-transform: uppercase;
}

.driver-impact-eyebrow-change {
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    /* color set inline */
}

.driver-impact-eyebrow-sep {
    color: #cbd5e0;
    margin: 0 2px;
}

.driver-impact-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.driver-impact-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.3;
    letter-spacing: -0.015em;
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.driver-impact-change-value {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    /* color set inline */
}

.driver-impact-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

.driver-impact-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.driver-impact-stat-label {
    font-size: 9.5px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.driver-impact-stat-value {
    font-size: 13px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: -0.01em;
}

.driver-impact-stat-delta {
    font-size: 11px;
    font-weight: 600;
    /* color set inline based on direction */
}

.driver-impact-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 8px;
}

.driver-impact-drill-btn {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.driver-impact-drill-btn:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

/* ------------------------------------------------------------------ */
/* Filter bar — no box, flat row with subtle hairline below            */
/* ------------------------------------------------------------------ */
.driver-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 6px;
    padding: 4px 2px 14px 2px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 18px;
}

.driver-filter-group-label {
    font-size: 9.5px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    white-space: nowrap;
    margin-left: 6px;
}

.driver-filter-group-label:first-child {
    margin-left: 0;
}

.driver-filter-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.driver-filter-sep {
    width: 1px;
    align-self: stretch;
    background: #e2e8f0;
    margin: 2px 4px;
}

/* ------------------------------------------------------------------ */
/* Section heads (Insights / Impact Areas)                            */
/* ------------------------------------------------------------------ */
.driver-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.driver-section-head-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.driver-section-head-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 1.6px;
}

.driver-section-head-count {
    font-size: 12px;
    font-weight: 600;
    color: #1a202c;
    font-variant-numeric: tabular-nums;
}

.driver-section-head-sev {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.driver-section-head-sep {
    color: #cbd5e0;
    margin: 0 4px;
}

.driver-section-head-visible {
    font-size: 11px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Embedded mini-insights inside an Impact Area card — article style  */
/* ------------------------------------------------------------------ */
.driver-impact-insights {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.driver-impact-insight {
    padding: 10px 0;
}

.driver-impact-insight:first-child {
    padding-top: 0;
}

.driver-impact-insight:last-child {
    padding-bottom: 0;
}

.driver-impact-insight:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}

.driver-impact-insight-eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-bottom: 5px;
    /* color set inline based on severity */
}

.driver-impact-insight-title {
    font-size: 12px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.4;
    letter-spacing: -0.005em;
    margin-bottom: 3px;
    overflow-wrap: anywhere;
}

.driver-impact-insight-desc {
    font-size: 11px;
    color: #64748b;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.driver-impact-insights-empty {
    font-size: 11.5px;
    color: #94a3b8;
    font-style: italic;
    padding: 4px 0;
}

/* ------------------------------------------------------------------ */
/* Filter pills inside the Analysis view (severity/category/scope/dir) */
/* ------------------------------------------------------------------ */
.analysis-filter-pill {
    /* Inline style from _FILTER_PILL_BASE handles the bulk; this only adds
       a refined hover state for inactive (not-yet-styled-active) pills. */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.analysis-filter-pill:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e0 !important;
    color: #1a202c !important;
}

/* Today / Yesterday segmented pill — matches the Gross/Cool Net toggle DNA. */
.hourly-date-toggle {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.hourly-date-toggle .hourly-date-toggle-btn,
.hourly-date-toggle .hourly-date-toggle-btn:hover,
.hourly-date-toggle .hourly-date-toggle-btn:focus,
.hourly-date-toggle .hourly-date-toggle-btn:focus-visible,
.hourly-date-toggle .hourly-date-toggle-btn:active,
.hourly-date-toggle .hourly-date-toggle-btn:visited {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: #4a5568 !important;
    padding: 5px 14px !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: color 0.25s ease,
                background-color 0.25s ease,
                box-shadow 0.25s ease;
}

.hourly-date-toggle .hourly-date-toggle-btn:hover:not(.active) {
    background: #2d3748 !important;
    background-color: #2d3748 !important;
    color: white !important;
}

.hourly-date-toggle .hourly-date-toggle-btn.active {
    background: #2d3748 !important;
    background-color: #2d3748 !important;
    color: white !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(15, 23, 42, 0.10) !important;
}

/* Ensure hourly modal + backdrop sit above alert toasts (z-index 9999–10001) */
.hourly-metrics-modal-wrapper.modal {
    z-index: 10100 !important;
}

/* Revenue Driver Breakdown Modal - above backdrop, matching hourly metrics modal */
.revenue-driver-modal-wrapper.modal {
    z-index: 10100 !important;
}

/* Users page modals – same z-index so they appear above header/sidebar/alert toasts */
.users-page-modal-wrapper.modal {
    z-index: 10100 !important;
}

/* Size the .modal-dialog only — NOT #revenue-driver-modal itself, which is the
   fixed full-screen .modal overlay. Sizing the overlay pins the whole modal to
   the left edge (uneven side gaps / off-centre). */
#revenue-driver-modal,
.revenue-driver-modal-wrapper.modal {
    --bs-modal-width: 92vw !important;
}
#revenue-driver-modal .modal-dialog,
#revenue-driver-modal.modal .modal-dialog.modal-xl,
.revenue-driver-modal-wrapper .modal-dialog,
body .modal#revenue-driver-modal .modal-dialog,
html body div.modal.fade#revenue-driver-modal .modal-dialog.modal-xl {
    max-width: 92vw !important;
    width: 92vw !important;
}

#revenue-driver-modal .modal-content {
    max-height: 90vh !important;
}

.modal-backdrop.show {
    z-index: 10099 !important;
}

/* ── Allowlist drag-and-drop ── */
.al-drag-card {
    cursor: grab;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.al-drag-card:active {
    cursor: grabbing;
}
.al-drag-card.dragging {
    opacity: 0.35;
    transform: scale(0.97);
    border-style: dashed !important;
    border-color: #a0aec0 !important;
}
.al-drop-lane {
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.15s;
}
.al-drop-lane.drag-over {
    border-color: #007bff !important;
    box-shadow: inset 0 0 0 2px rgba(0, 123, 255, 0.15), 0 0 12px rgba(0, 123, 255, 0.1) !important;
    background-color: #f0f7ff !important;
}
.al-drop-lane.drag-over .al-lane-drop-hint {
    display: flex !important;
}

/* ── DSP Rules Accordion ── */
.dsp-rules-accordion .accordion-item {
    border: none;
    background: transparent;
    margin-bottom: 4px;
}
.dsp-rules-accordion .accordion-item:not(:last-child) {
    border-bottom: 1px solid #f1f3f4;
    padding-bottom: 4px;
}
.dsp-rules-accordion .accordion-button {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0;
    font-weight: 500;
    color: #4a5568;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 0;
}
.dsp-rules-accordion .accordion-button:not(.collapsed) {
    background: #f8fafc;
    border-color: #d2d6dc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.dsp-rules-accordion .accordion-button:hover {
    background: #fafbfc;
    border-color: #d2d6dc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.dsp-rules-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.15rem rgba(66, 153, 225, 0.15);
    border-color: #a0aec0;
}
.dsp-rules-accordion .accordion-button::after {
    flex-shrink: 0;
    opacity: 0.4;
    margin-left: 10px;
    background-size: 14px;
}
.dsp-rules-accordion .accordion-body {
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-top: none;
    border-radius: 0 0 10px 10px;
}
.dsp-rules-accordion .accordion-collapse {
    border: none;
}

/* ── Title elements (injected by JS) ── */
.dsp-acc-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.dsp-acc-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f5f0ff, #ede5ff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6f42c1;
    font-size: 12px;
}
.dsp-acc-icon--global {
    background: linear-gradient(135deg, #e8f4fd, #d0e8f9);
    color: #2b6cb0;
}
.dsp-acc-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dsp-acc-name {
    font-weight: 700;
    font-size: 0.82rem;
    color: #1a202c;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsp-acc-sub {
    font-size: 0.62rem;
    color: #a0aec0;
    line-height: 1.2;
}
.dsp-acc-sub--mono {
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: -0.3px;
}
.dsp-acc-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-left: auto;
    padding-right: 6px;
}
.dsp-acc-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s;
}
.dsp-acc-badge i {
    font-size: 8px;
}
.dsp-acc-badge--incl {
    background: #f0fff4;
    color: #22543d;
    border: 1px solid #c6f6d5;
}
.dsp-acc-badge--excl {
    background: #fff5f5;
    color: #9b2c2c;
    border: 1px solid #fed7d7;
}
.dsp-acc-badge--exp {
    background: #ebf8ff;
    color: #2a4365;
    border: 1px solid #bee3f8;
}
.dsp-rules-accordion .accordion-button:hover .dsp-acc-badge--incl {
    background: #c6f6d5;
}
.dsp-rules-accordion .accordion-button:hover .dsp-acc-badge--excl {
    background: #fed7d7;
}
.dsp-rules-accordion .accordion-button:hover .dsp-acc-badge--exp {
    background: #bee3f8;
}

/* ── Floor Controller badge variants ── */
.dsp-acc-badge--rules {
    background: #e6fffa;
    color: #234e52;
    border: 1px solid #b2f5ea;
}
.dsp-acc-badge--sync {
    background: #f0fff4;
    color: #276749;
    border: 1px solid #c6f6d5;
}
.dsp-acc-badge--unsync {
    background: #fffaf0;
    color: #7b341e;
    border: 1px solid #feebc8;
}
.dsp-rules-accordion .accordion-button:hover .dsp-acc-badge--rules {
    background: #b2f5ea;
}
.dsp-rules-accordion .accordion-button:hover .dsp-acc-badge--sync {
    background: #c6f6d5;
}
.dsp-rules-accordion .accordion-button:hover .dsp-acc-badge--unsync {
    background: #feebc8;
}

/* Cool Net Revenue toggle button styles */
#btn-cool-net-revenue {
    border-color: #4a8cc8 !important;
    color: #4a8cc8 !important;
}
#btn-cool-net-revenue:hover,
#btn-cool-net-revenue.active {
    background-color: #4a8cc8 !important;
    border-color: #4a8cc8 !important;
    color: white !important;
}
#btn-monthly-cool {
    border-color: #4a8cc8 !important;
    color: #4a8cc8 !important;
}
#btn-monthly-cool:hover,
#btn-monthly-cool.active {
    background-color: #4a8cc8 !important;
    border-color: #4a8cc8 !important;
    color: white !important;
}

/* ── Partition Checks heatmap ────────────────────────────────────
 * Subtle cell-hover lift gives operators tactile feedback when
 * pointing at a cell, and a rich custom tooltip surfaces full
 * partition / hour / state / size info without obscuring the grid.
 * CSS-only — no JS or Dash callbacks needed.
 */
.mli-pchk-cell {
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.mli-pchk-cell:hover {
    transform: scale(1.6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 3;
}

/* Minimal hover tooltip — two short lines, white card, hairline border.
 * The cell colour already shows the state, so the tooltip only adds
 * the data that the colour can't convey: exact partition path, hour,
 * counts, and size. No arrow, no shadow drama. */
.mli-pchk-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    z-index: 1000;
    padding: 6px 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.1s ease, transform 0.1s ease, visibility 0s 0.1s;
    white-space: nowrap;
}
/* Right-edge cells: anchor to the cell's right edge so the tooltip
 * doesn't extend past the viewport. */
.mli-pchk-tooltip.mli-pchk-tooltip--right {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(3px);
}
/* Top-row cells: anchor BELOW the cell so the tooltip doesn't get
 * clipped by the scrolling card's top edge. Modern browsers compute
 * overflow-y as auto whenever overflow-x is auto (CSS spec rule), so
 * the card clips vertical overflow regardless of our wishes — flipping
 * top-row tooltips downward is the cleanest CSS-only fix. */
.mli-pchk-tooltip.mli-pchk-tooltip--below {
    bottom: auto;
    top: calc(100% + 6px);
    transform: translateX(-50%) translateY(-3px);
}
.mli-pchk-tooltip.mli-pchk-tooltip--below.mli-pchk-tooltip--right {
    transform: translateX(0) translateY(-3px);
}
.mli-pchk-cell:hover .mli-pchk-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.1s ease, transform 0.1s ease, visibility 0s;
}
.mli-pchk-cell:hover .mli-pchk-tooltip.mli-pchk-tooltip--right {
    transform: translateX(0) translateY(0);
}
.mli-pchk-cell:hover .mli-pchk-tooltip.mli-pchk-tooltip--below {
    transform: translateX(-50%) translateY(0);
}
.mli-pchk-cell:hover .mli-pchk-tooltip.mli-pchk-tooltip--below.mli-pchk-tooltip--right {
    transform: translateX(0) translateY(0);
}

/* Floor-type non-ML drill-down cards (📊 Floor Pricing → Overview).
 * Hover lifts the card slightly and brightens the border; active card
 * gets a subtle persistent emphasis. Card colors are inline (per
 * floor_type) so this rule stays color-agnostic. */
.mli-ft-noml-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07),
                0 1px 2px rgba(15, 23, 42, 0.04);
    border-color: #cbd5e1 !important;
}
.mli-ft-noml-card:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.mli-ft-noml-card:focus-visible {
    outline: 2px solid #185FA5;
    outline-offset: 2px;
}

/* ────────────────────────────────────────────────────────────────────
   Floor-type drill-down — segments list & skeleton loader
   (📊 Floor Pricing → Overview → Non-ML breakdown → drill-down card)
   ──────────────────────────────────────────────────────────────────── */

/* Skeleton placeholders — diagonal shimmer over a neutral gray band.
 * Animation is GPU-friendly (background-position only). */
.mli-ft-skeleton-line {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #eef0f4 0%,
        #f8fafc 45%,
        #f8fafc 55%,
        #eef0f4 100%
    );
    background-size: 200% 100%;
    animation: mli-ft-skel-shimmer 1.5s ease-in-out infinite;
}
@keyframes mli-ft-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Segment rows — indexed, monospace, copy-on-hover. */
.mli-ft-seg-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 12px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s ease;
}
.mli-ft-seg-row:last-child { border-bottom: none; }
.mli-ft-seg-row:nth-child(even) { background: rgba(15, 23, 42, 0.015); }
.mli-ft-seg-row:hover { background: rgba(24, 95, 165, 0.05); }

/* Hide copy icon by default; reveal on row hover. */
.mli-ft-seg-copy {
    opacity: 0;
    transition: opacity 0.12s ease;
    display: inline-flex;
    align-items: center;
    min-width: 16px;
}
.mli-ft-seg-row:hover .mli-ft-seg-copy { opacity: 1; }

/* Custom scrollbar in the segment list — quieter than the OS default. */
.mli-ft-seg-list::-webkit-scrollbar { width: 8px; }
.mli-ft-seg-list::-webkit-scrollbar-track { background: transparent; }
.mli-ft-seg-list::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}
.mli-ft-seg-list::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* Search input focus state — subtle blue glow matching the page accent. */
#mli-floor-ft-search:focus {
    border-color: #185FA5 !important;
    box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.10);
}

/* ────────────────────────────────────────────────────────────────────
   Rule Engine — "Potential conflicts" panel
   (Sits inside the create-rule form, between match dimensions and the
   action fields. Surfaces overlapping existing rules so the operator
   can knowingly proceed or clear the conflict in place.)
   ──────────────────────────────────────────────────────────────────── */

.mli-ov-conflicts {
    padding: 14px 16px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    /* Subtle left-edge accent — telegraphs "warning" without screaming. */
    border-left: 3px solid #f59e0b;
}

.mli-ov-conflict-row {
    padding: 11px 13px 12px;
    border-radius: 7px;
    background: white;
    border: 1px solid #fde68a;
    margin-bottom: 7px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.mli-ov-conflict-row:last-child { margin-bottom: 0; }
.mli-ov-conflict-row:hover {
    border-color: #f59e0b;
    box-shadow: 0 3px 10px rgba(180, 83, 9, 0.06);
    transform: translateY(-1px);
}

/* Action buttons inside a conflict row — subtle by default, brightened
   on hover to invite interaction without dominating the card. */
.mli-ov-conflict-row button:hover {
    border-color: #b45309;
    box-shadow: 0 1px 3px rgba(180, 83, 9, 0.12);
}

/* ────────────────────────────────────────────────────────────────────
   Rule Engine — Match filter dropdowns
   Same refined treatment as #modal-metric-selector in the Revenue
   Drivers modal so the two surfaces feel like one product. Blue accent
   on focus / selection; soft pill control; floating menu card.
   ──────────────────────────────────────────────────────────────────── */

#mli-ov-flt-dim-dd .Select-control,
#mli-ov-flt-dim-val-dd .Select-control {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: white !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    height: 32px !important;
    min-height: 32px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#mli-ov-flt-dim-dd .Select-control:hover,
#mli-ov-flt-dim-val-dd .Select-control:hover {
    border-color: #cbd5e0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

#mli-ov-flt-dim-dd.is-focused:not(.is-open) > .Select-control,
#mli-ov-flt-dim-val-dd.is-focused:not(.is-open) > .Select-control {
    border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12) !important;
}

#mli-ov-flt-dim-dd .Select-value-label,
#mli-ov-flt-dim-dd .Select-placeholder,
#mli-ov-flt-dim-val-dd .Select-value-label,
#mli-ov-flt-dim-val-dd .Select-placeholder {
    color: #1a202c !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 30px !important;
    padding-left: 12px !important;
    font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace !important;
}

/* Placeholder gets a softer hue so empty state reads as "do something" */
#mli-ov-flt-dim-dd .Select-placeholder,
#mli-ov-flt-dim-val-dd .Select-placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

/* Disabled state for the value dropdown until a dim is picked */
#mli-ov-flt-dim-val-dd.is-disabled .Select-control {
    background: #f8fafc !important;
    border-color: #edf0f4 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}
#mli-ov-flt-dim-val-dd.is-disabled .Select-placeholder {
    color: #cbd5e0 !important;
}

#mli-ov-flt-dim-dd .Select-arrow,
#mli-ov-flt-dim-val-dd .Select-arrow {
    border-color: #4a5568 transparent transparent !important;
    border-width: 5px 4px 0 !important;
}
#mli-ov-flt-dim-dd.is-open .Select-arrow,
#mli-ov-flt-dim-val-dd.is-open .Select-arrow {
    border-color: transparent transparent #4a5568 !important;
    border-width: 0 4px 5px !important;
}

#mli-ov-flt-dim-dd .Select-menu-outer,
#mli-ov-flt-dim-val-dd .Select-menu-outer {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    background: white !important;
    z-index: 100 !important;
    /* Allow the open menu to expand beyond its (compact) trigger so long
     * publisher_ids / bundle_ids / domains aren't truncated. The trigger
     * stays compact; only the dropdown panel grows. */
    min-width: 320px !important;
    width: max-content !important;
    max-width: 560px !important;
}
#mli-ov-flt-dim-val-dd .Select-menu-outer {
    /* Value lists can hold long URLs / segment keys — give them more
     * room than the dim list which is just short label words. */
    min-width: 360px !important;
    max-width: 640px !important;
}

/* Options inside the (now wider) menu — let long values flow on a
 * second line rather than truncating with ellipsis, so the operator
 * can read full publisher_ids etc. */
#mli-ov-flt-dim-dd .Select-option,
#mli-ov-flt-dim-val-dd .Select-option {
    white-space: normal !important;
    word-break: break-all !important;
    line-height: 1.4 !important;
}

/* Closed-state value: keep it tight inside the trigger with an
 * ellipsis so a long selection doesn't push the layout. */
#mli-ov-flt-dim-dd .Select-value-label,
#mli-ov-flt-dim-val-dd .Select-value-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

#mli-ov-flt-dim-dd .Select-option,
#mli-ov-flt-dim-val-dd .Select-option {
    padding: 8px 14px !important;
    font-size: 12px !important;
    color: #2d3748 !important;
    font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace !important;
    cursor: pointer !important;
}
#mli-ov-flt-dim-dd .Select-option.is-focused,
#mli-ov-flt-dim-val-dd .Select-option.is-focused {
    background-color: rgba(0, 123, 255, 0.08) !important;
    color: #1a202c !important;
}
#mli-ov-flt-dim-dd .Select-option.is-selected,
#mli-ov-flt-dim-val-dd .Select-option.is-selected {
    background-color: rgba(0, 123, 255, 0.15) !important;
    color: #007bff !important;
    font-weight: 600 !important;
}

/* Clear "x" affordance — quieter color, brighter on hover */
#mli-ov-flt-dim-dd .Select-clear-zone,
#mli-ov-flt-dim-val-dd .Select-clear-zone {
    color: #cbd5e0 !important;
    padding-right: 4px !important;
    transition: color 0.15s ease;
}
#mli-ov-flt-dim-dd .Select-clear-zone:hover,
#mli-ov-flt-dim-val-dd .Select-clear-zone:hover {
    color: #64748b !important;
}

/* ────────────────────────────────────────────────────────────────────
   📝 Activity Logs → 📉 Segment Drift sub-tab
   Top-of-hour publisher-level segment_key drift surface. Severity cards
   get a subtle lift on hover; table rows get a quiet zebra + hover tint
   for readability across many rows.
   ──────────────────────────────────────────────────────────────────── */

/* Mirrors `.enhanced-metric-card` from the Revenue Trends tab so the two
   surfaces feel like one product. Accent color is per-card via the
   `--accent` / `--accent-soft` CSS variables set inline (driven by drift
   severity). */
.mli-drift-metric-card {
    --accent: #94a3b8;
    --accent-soft: rgba(148, 163, 184, 0.12);
    flex: 0 0 320px;
    background: white;
    border: 0;
    border-radius: 12px;
    padding: 18px;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 1px 2px rgba(15, 23, 42, 0.03);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Animated top accent stripe — narrow by default, expands on hover. */
.mli-drift-metric-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-top: 2px solid var(--accent);
    pointer-events: none;
    opacity: 0.35;
    clip-path: inset(0 65% 0 0);
    transition: opacity 0.25s ease,
                clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.mli-drift-metric-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px #cbd5e0,
        0 6px 18px rgba(15, 23, 42, 0.07);
}

.mli-drift-metric-card:hover::before {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* Eyebrow row: platform chip + publisher-name label */
.mli-drift-metric-card .metric-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    min-width: 0;
}

.mli-drift-metric-card .metric-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
}

.mli-drift-metric-card .metric-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.mli-drift-metric-card .metric-value {
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
}

.mli-drift-metric-card .metric-trend {
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
}

.mli-drift-row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s ease;
}
.mli-drift-row:last-child { border-bottom: none; }
.mli-drift-row:nth-child(even) {
    background: rgba(15, 23, 42, 0.012);
}
.mli-drift-row:hover {
    background: rgba(185, 28, 28, 0.04);   /* faint red tint on hover */
}

/* Search input focus state matches the page accent — same blue as the
   metric / match-filter dropdowns. */
#mli-activity-drift-search-input:focus {
    border-color: #185FA5 !important;
    box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.10);
}

/* Segment-key diff log lines — terminal-inspired log entries. Subtle
   bg shift + marker brighten on hover to indicate live, scannable rows
   without the visual noise of a full row-highlight color. */
.mli-drift-log-line {
    position: relative;
}
.mli-drift-log-line:hover {
    background: #ffffff !important;
}
.mli-drift-log-line:hover > span:first-child {
    filter: brightness(0.85);
}

/* Copy-to-clipboard icon at the trailing edge of each diff line — muted
   by default, lights up alongside the marker on row hover. */
.mli-drift-copy {
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.mli-drift-log-line:hover .mli-drift-copy {
    opacity: 1;
    color: #475569;
}

/* Segment-id sub-line — quiet by default, brightens slightly on row
   hover so the operator notices it without it competing with the key. */
.mli-drift-seg-id {
    transition: color 0.15s ease;
}
.mli-drift-log-line:hover .mli-drift-seg-id {
    color: #64748b;
}

/* Cap the severity-strip scrollbar to a quiet thin track. */
#mli-activity-drift-content > div:nth-child(2) > div:nth-child(2)::-webkit-scrollbar {
    height: 6px;
}
#mli-activity-drift-content > div:nth-child(2) > div:nth-child(2)::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 3px;
}
#mli-activity-drift-content > div:nth-child(2) > div:nth-child(2)::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* ────────────────────────────────────────────────────────────────────
   📉 Segment Drift — Publisher filter dropdown
   Same refined treatment as #modal-metric-selector and the Rule Engine's
   Match filter so the dashboard's dropdowns feel like one family.
   ──────────────────────────────────────────────────────────────────── */

#mli-activity-drift-search-input .Select-control {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: white !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    height: 32px !important;
    min-height: 32px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#mli-activity-drift-search-input .Select-control:hover {
    border-color: #cbd5e0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
#mli-activity-drift-search-input.is-focused:not(.is-open) > .Select-control {
    border-color: #185FA5 !important;
    box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.10) !important;
}

#mli-activity-drift-search-input .Select-value-label,
#mli-activity-drift-search-input .Select-placeholder {
    color: #1a202c !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 30px !important;
    padding-left: 12px !important;
    font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace !important;
}
#mli-activity-drift-search-input .Select-placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

#mli-activity-drift-search-input .Select-arrow {
    border-color: #4a5568 transparent transparent !important;
    border-width: 5px 4px 0 !important;
}
#mli-activity-drift-search-input.is-open .Select-arrow {
    border-color: transparent transparent #4a5568 !important;
    border-width: 0 4px 5px !important;
}

#mli-activity-drift-search-input .Select-menu-outer {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    background: white !important;
    z-index: 100 !important;
    /* Open menu grows beyond the (compact) trigger so long publisher
       names aren't truncated. */
    min-width: 360px !important;
    width: max-content !important;
    max-width: 640px !important;
}
#mli-activity-drift-search-input .Select-option {
    padding: 8px 14px !important;
    font-size: 12px !important;
    color: #2d3748 !important;
    font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace !important;
    cursor: pointer !important;
    white-space: normal !important;
    word-break: break-all !important;
    line-height: 1.4 !important;
}
#mli-activity-drift-search-input .Select-option.is-focused {
    background-color: rgba(24, 95, 165, 0.08) !important;
    color: #1a202c !important;
}
#mli-activity-drift-search-input .Select-option.is-selected {
    background-color: rgba(24, 95, 165, 0.15) !important;
    color: #185FA5 !important;
    font-weight: 600 !important;
}

#mli-activity-drift-search-input .Select-clear-zone {
    color: #cbd5e0 !important;
    padding-right: 4px !important;
    transition: color 0.15s ease;
}
#mli-activity-drift-search-input .Select-clear-zone:hover {
    color: #64748b !important;
}

/* Closed value: ellipsize a long selection inside the compact trigger. */
#mli-activity-drift-search-input .Select-value-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* =========================================================================
   Authenticated header (welcome message + access-level badges + actions)
   Mobile responsiveness. On narrow screens the header stacks vertically:
   the user/greeting block on top, the action buttons wrapping below.
   ========================================================================= */
.auth-header-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
}

@media (max-width: 768px) {
    /* Stack greeting block above the actions instead of side-by-side */
    .auth-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.85rem;
        padding: 1rem 1.1rem !important;
    }

    .auth-header-user {
        width: 100%;
    }

    /* Let the greeting + badges wrap and drop the fixed left margins so
       badges don't push off-screen; use a column-gap for uniform horizontal
       spacing between the username, role chip, and team chip instead. */
    .auth-header-userinfo {
        min-width: 0;
    }

    .auth-header-badges {
        column-gap: 8px;
    }

    .auth-header-badges > span:not(:first-child) {
        margin-left: 0 !important;
    }

    /* Actions become a full-width wrapping row */
    .auth-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    /* Buttons that are visible (display set inline) grow to share the row.
       Hidden buttons keep their inline display:none via higher specificity. */
    .auth-header-actions > .btn {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    /* Tighter avatar spacing and smaller greeting on very small screens */
    .auth-header-user > .rounded-circle {
        width: 38px !important;
        height: 38px !important;
        margin-right: 10px !important;
    }

    /* Give buttons a comfortable minimum so they read as two-per-row */
    .auth-header-actions > .btn {
        flex-basis: calc(50% - 0.25rem);
    }
}

/* =========================================================================
   Revenue Trends tab — mobile responsiveness pass
   -------------------------------------------------------------------------
   Complements the existing rules (metric grid @768, 2-column stacking @991,
   EOY cards @640, annual charts @768). Covers the sections that still
   degraded on phones: the page header, the main tab bar, the Revenue Outlook
   (forecast) card internals, and the Revenue Drivers sidebar internals.
   Several targets carry inline styles from the Python, so overrides here use
   !important where they must beat an inline style.
   ========================================================================= */

/* ---- Page header (icon + title + subtitle + refresh chip) ---- */
@media (max-width: 768px) {
    .page-header {
        padding: 1rem 1.1rem !important;
        margin-bottom: 1.25rem !important;
    }
    .page-header h1 {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }
    .page-header p {
        font-size: 12px !important;
    }
    /* Shrink the leading icon chip so the title keeps room */
    .page-header .fa-chart-line {
        font-size: 20px !important;
    }
}

/* ---- Main tab bar: scroll horizontally instead of wrapping to 2-3 rows.
   #main-tabs is the <ul class="nav nav-tabs"> (dbc 1.5); both selectors below
   cover it whether the id lands on the <ul> or a wrapper. ---- */
@media (max-width: 768px) {
    #main-tabs.nav-tabs,
    #main-tabs .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    #main-tabs::-webkit-scrollbar { height: 3px; }
    #main-tabs::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 999px;
    }
    #main-tabs .nav-item { flex: 0 0 auto; }
    #main-tabs .nav-link { white-space: nowrap; }
}

/* ---- Revenue Outlook (forecast) card ---- */
/* Range toggle (1M/3M/6M/All) is absolutely positioned over the chart at
   left:64px — on a narrow canvas it sits on top of the plotted data / y-axis.
   Pin it to the top-right corner (clear of the left y-axis labels) and shrink. */
@media (max-width: 768px) {
    #range-toggle-track,
    .range-toggle {
        left: auto !important;
        right: 6px !important;
        top: 4px !important;
    }
    .range-toggle .range-toggle-btn {
        min-width: 28px !important;
        font-size: 9.5px !important;
    }
}

@media (max-width: 576px) {
    /* Annual gross / cool-net mini-insight chips: stack the two columns so the
       200px-min chips stop overflowing a ~335px screen (live + skeleton). */
    .annual-mini-insights-row {
        flex-direction: column !important;
    }
    /* Scale the oversized inline headings (inline fontSize → needs !important) */
    .enhanced-forecast-header h3 {
        font-size: 19px !important;
    }
    .forecast-section-header h4 {
        font-size: 16px !important;
    }
}

/* ---- Revenue Drivers sidebar ---- */
@media (max-width: 768px) {
    /* Header row: let the title + metric dropdown wrap; dropdown goes full-width
       instead of a fixed 180px that squeezes the title. */
    .drivers-header-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .drivers-metric-selector-wrap {
        width: 100% !important;
    }
    /* Dimension tabs: begin the (still-scrollable) strip from the left;
       justify-content:space-between reads as broken once it overflows. */
    .drivers-dim-tabs {
        justify-content: flex-start;
    }
    /* Loading overlay: don't lock a 700px height on a shorter stacked layout */
    #sidebar-loading {
        height: auto !important;
        min-height: 400px;
    }
}

@media (max-width: 576px) {
    /* Gainers / Losers: stack vertically so each list gets full width instead
       of two ~150px columns that truncate driver names to nothing. */
    .drivers-gl-split {
        flex-direction: column !important;
    }
    /* Divider between the two lists flips from vertical to horizontal */
    .drivers-gl-split > div:first-child {
        border-right: 0 !important;
        border-bottom: 1px solid #e2e8f0;
    }
}

/* =========================================================================
   Revenue Trends tab — MODALS mobile responsiveness pass
   -------------------------------------------------------------------------
   Covers the three modals reachable from the Revenue Trends tab:
     • Hourly Metrics modal   (#hourly-metrics-modal)   — metric-card click
     • Revenue Driver modal   (#revenue-driver-modal)   — Analysis / Combinations
                                                           / Drilldown / Impact
     • Combination Finder     (#combination-finder-modal)
   The modal shells are already viewport-sized + scrollable; the remaining
   breakage is a few non-wrapping control/content rows, oversized body
   padding, and the cramped hourly data table. Inline-styled targets need
   !important to override.
   ========================================================================= */

/* ---- Shared: dialog placement on phones ----
   Center every Revenue-Trends modal with a small, EVEN gap on all four sides.
   Width/height are on the .modal-dialog (never the #id overlay); centered=True
   + scrollable=True keep it vertically centred and fully on-screen. 94vw / 94vh
   gives ~3vw sides and ~3vh top/bottom — a small, uniform inset from the edge. */
@media (max-width: 768px) {
    #hourly-metrics-modal .modal-dialog,
    #revenue-driver-modal .modal-dialog,
    #combination-finder-modal .modal-dialog {
        width: 94vw !important;
        max-width: 94vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    #hourly-metrics-modal .modal-content,
    #revenue-driver-modal .modal-content,
    #combination-finder-modal .modal-content {
        max-height: 94vh !important;
    }

    /* Tighter body padding to reclaim horizontal room */
    #hourly-modal-body {
        padding: 0.85rem !important;
    }
    /* Shrink the data table so more of its 14 columns are visible before
       the (already-present) horizontal scroll kicks in */
    .hourly-panel .dash-spreadsheet-container td,
    .hourly-panel .dash-spreadsheet-container th,
    .hourly-panel .dash-cell,
    .hourly-panel .dash-header {
        font-size: 10.5px !important;
        padding: 4px 6px !important;
    }
    .hourly-mini-value {
        font-size: 17px !important;
    }
}

/* ---- Revenue Driver modal + Combination Finder modal (shared patterns) ---- */
@media (max-width: 768px) {
    /* Header control clusters wrap instead of overflowing one line.
       Driver modal: the segmented tracks + metric dropdown row.
       Combination modal: title + time-comparison track. */
    .modal-header-controls {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .combo-header-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    /* Reclaim body padding on both driver-side modals */
    #revenue-driver-modal-body,
    #combination-finder-body {
        padding: 0.85rem !important;
    }
    /* The request→bid triple (used in Combinations, both modals): stack the
       three cells vertically and drop the horizontal chevrons. */
    .combo-matrix {
        flex-direction: column !important;
    }
    .combo-matrix-arrow {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Analysis-view insight metric grid: 4+ metrics can't fit one row on a
       phone — cap at 2 columns so values stop overflowing their cells. */
    .driver-insight-metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}