* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Data source information box */
.data-source-info {
    background: #f0f7ff;
    border-left: 4px solid #007aff;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 13px;
    color: #1d1d1f;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.data-source-info-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.data-source-info-content {
    flex: 1;
}

.data-source-info strong {
    color: #007aff;
    font-weight: 600;
}

.data-source-info code {
    background: #e8f4ff;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 12px;
    color: #0051a8;
}

/* Shimmer loading animation for creative thumbnails */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f5f5f7;
    color: #1d1d1f;
    line-height: 1.4;
    font-size: 14px;
}

.container {
    max-width: 100%;
    margin: 0;
    padding: 20px 10px;
}

header {
    background: white;
    padding: 24px 30px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}

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

.date-range-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.date-range-section label {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.9rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Quick Links Buttons */
.quick-link-btn {
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quick-link-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

.quick-link-btn:active {
    transform: translateY(0);
}

.dropdown-menu a:hover {
    background-color: #f5f5f5 !important;
}

.user-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1d1d1f;
}

.user-email {
    font-size: 0.8rem;
    color: #86868b;
}

.cost-entry-btn,
.admin-btn,
.logout-btn {
    margin-left: 1rem;
    padding: 0.5rem 1rem;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 14px;
    font-family: inherit;
}

.cost-entry-btn {
    background-color: #27ae60;
    border-color: #27ae60;
    color: #ffffff;
}

.cost-entry-btn:hover {
    background-color: #219a52;
    border-color: #219a52;
    color: #ffffff;
}

.admin-btn {
    background-color: #007aff;
    border-color: #007aff;
    color: #ffffff;
}

.admin-btn:hover {
    background-color: #0051a8;
    border-color: #0051a8;
    color: #ffffff;
}

.logout-btn:hover {
    background-color: #e0e0e0;
    color: #333;
}

/* Date Selector Styles */
.date-selector {
    display: flex;
    gap: 4px;
    border: 1.5px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.date-btn {
    padding: 8px 12px;
    background-color: white;
    color: #86868b;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid #e9ecef;
}

.date-btn:last-child {
    border-right: none;
}

.date-btn:hover:not(.active) {
    background-color: #f8f9fa;
    color: #1d1d1f;
}

.date-btn.active {
    background-color: #007aff;
    color: white;
}

.date-btn:focus {
    outline: none;
}

.refresh-btn {
    padding: 8px 16px;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.refresh-btn:hover:not(:disabled) {
    background-color: #0056cc;
    transform: translateY(-1px);
}

/* Investment Analytics Period Buttons */
.investment-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.investment-period-controls {
    display: flex;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.investment-period-btn {
    padding: 8px 12px;
    background-color: white;
    color: #86868b;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid #e9ecef;
}

.investment-period-btn:last-child {
    border-right: none;
}

.investment-period-btn:hover:not(.active) {
    background-color: #f8f9fa;
    color: #1d1d1f;
}

.investment-period-btn.active {
    background-color: #007aff;
    color: white;
}

.investment-period-btn:focus {
    outline: none;
}

/* Investment Analytics Custom Date Picker */
.investment-custom-date-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.investment-date-input {
    padding: 8px 12px;
    font-size: 0.9rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background-color: white;
    color: #1d1d1f;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.investment-date-input:hover {
    border-color: #007aff;
}

.investment-date-input:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.investment-apply-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.investment-apply-btn:hover {
    background-color: #0056b3;
}

.investment-apply-btn:active {
    transform: scale(0.98);
}

/* Investment Analytics Country Filter */
.investment-country-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.investment-country-filter label {
    font-size: 0.9rem;
    color: #1d1d1f;
    font-weight: 500;
}

.investment-country-select {
    padding: 8px 12px;
    font-size: 0.9rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: white;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
}

.investment-country-select:hover {
    border-color: #007aff;
}

.investment-country-select:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.investment-clear-filter-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: white;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.2s ease;
}

.investment-clear-filter-btn:hover {
    background-color: #fee2e2;
    border-color: #dc2626;
}

.investment-active-filter-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-top: 12px;
    background-color: #dbeafe;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1e40af;
}

.investment-active-filter-indicator strong {
    color: #1e40af;
    font-weight: 600;
}

/* Unfiltered column styling when country filter is active */
.unfiltered-column {
    opacity: 0.4;
    background-color: #f5f5f5 !important;
    position: relative;
}

.unfiltered-column::after {
    content: '⚠';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    color: #ff9500;
}

.unfiltered-header {
    opacity: 0.5;
    background-color: #f5f5f5 !important;
    position: relative;
}

.unfiltered-header::after {
    content: ' ⚠';
    color: #ff9500;
    font-size: 12px;
    margin-left: 4px;
}

/* Tooltip for unfiltered columns */
.unfiltered-tooltip {
    display: inline-block;
    cursor: help;
    border-bottom: 1px dashed #999;
}

/* Investment sync status display */
.investment-sync-status {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #f0f0f0;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #555;
    border-left: 3px solid #007aff;
}

.investment-sync-status strong {
    color: #1d1d1f;
    font-weight: 600;
}

/* Meta sync warning banner for incomplete spend data */
.meta-sync-warning-banner {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
    padding: 12px 16px;
    margin-top: 8px;
    margin-bottom: 12px;
    border-radius: 6px;
    font-size: 13px;
    color: #721c24;
    line-height: 1.5;
}

.meta-sync-warning-banner strong {
    color: #721c24;
    font-weight: 600;
}

/* Investment Analytics Clear Cache Button */
.investment-clear-cache-btn {
    padding: 8px 12px;
    background-color: #ff3b30;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.investment-clear-cache-btn:hover:not(:disabled) {
    background-color: #d70015;
    transform: translateY(-1px);
}

.investment-clear-cache-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.investment-clear-cache-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.3);
}

/* Investment Analytics View Controls */
.investment-view-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Investment Analytics Table Optimization */
.investment-analytics-results .performance-table {
    font-size: 0.7rem !important;
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

.investment-analytics-results .performance-table th,
.investment-analytics-results .performance-table td {
    padding: 3px 4px !important;
    white-space: nowrap;
    font-size: 0.7rem !important;
    line-height: 1.1;
    border: 1px solid #e5e5e5;
    overflow: visible;
    text-overflow: inherit;
}

.investment-analytics-results .performance-table th {
    background: #f9f9fb;
    font-weight: 600;
    font-size: 0.65rem !important;
    padding: 4px 3px !important;
    text-align: center;
    vertical-align: middle;
}

.investment-analytics-results .performance-table td:first-child {
    font-weight: 500;
    background: #fafafa;
    position: sticky;
    left: 0;
    z-index: 10;
    padding-right: 6px !important;
}

.investment-analytics-results .performance-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 11;
    background: #f9f9fb;
    padding-right: 6px !important;
}

/* Currency values should be more compact */
.investment-analytics-results .performance-table td[style*="text-align:right"] {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Courier, monospace;
    font-size: 0.65rem !important;
    min-width: 65px;
}

/* Compact table container */
.investment-analytics-results .table-container {
    overflow-x: auto;
    max-width: 100vw;
    margin: 0 -10px;
    padding: 0 10px;
    width: fit-content;
    min-width: 100%;
}

/* Summary table specific optimizations */
.investment-analytics-results .campaign-card .performance-table {
    margin-bottom: 0;
}

/* Responsive column headers */
@media (max-width: 1600px) {
    .investment-analytics-results .performance-table th {
        font-size: 0.6rem !important;
        padding: 3px 2px !important;
    }
    
    .investment-analytics-results .performance-table td {
        font-size: 0.65rem !important;
        padding: 3px 2px !important;
    }
    
    .investment-analytics-results .performance-table td[style*="text-align:right"] {
        font-size: 0.6rem !important;
        min-width: 60px;
    }
}

@media (max-width: 1400px) {
    .investment-analytics-results .performance-table th {
        font-size: 0.55rem !important;
        padding: 2px 1px !important;
    }
    
    .investment-analytics-results .performance-table td {
        font-size: 0.6rem !important;
        padding: 2px 1px !important;
    }
    
    .investment-analytics-results .performance-table td[style*="text-align:right"] {
        font-size: 0.55rem !important;
        min-width: 55px;
    }
}

/* Individual app table additional optimizations */
.investment-analytics-results .campaign-card {
    margin: 10px 0;
    overflow: hidden;
}

/* Monthly analytics expand icon */
.expand-icon {
    display: inline-block;
    width: 16px;
    text-align: center;
    font-weight: bold;
    color: #007aff;
    margin-right: 4px;
}

.monthly-row-clickable {
    cursor: pointer;
}

.monthly-row-clickable:hover {
    background-color: #f0f7ff !important;
}

.investment-analytics-results .campaign-header {
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e5e5;
}

.investment-analytics-results .campaign-header h2 {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
}

/* Chart button in table header */
.investment-analytics-results .chart-btn {
    padding: 2px 4px;
    font-size: 0.7rem;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1;
}

.investment-analytics-results .chart-btn:hover {
    background: #0056b3;
}

/* Make percentage values more compact */
.investment-analytics-results .performance-table td:contains('%') {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Courier, monospace;
}

/* Ensure all investment tables fit on screen */
#investment-analytics-results {
    max-width: 100vw;
    overflow-x: auto;
    width: 100%;
}

/* Allow tables to use natural width but stay compact */
.investment-analytics-results .performance-table {
    width: auto;
    min-width: 100%;
}

/* Ensure header text wrapping when needed */
.investment-analytics-results .performance-table th {
    word-wrap: break-word;
    hyphens: auto;
    max-width: none;
}

/* Very small screens */
@media (max-width: 1200px) {
    .investment-analytics-results .performance-table {
        font-size: 0.55rem !important;
    }
    
    .investment-analytics-results .performance-table th,
    .investment-analytics-results .performance-table td {
        padding: 2px 1px !important;
        font-size: 0.55rem !important;
    }
    
    .investment-analytics-results .performance-table td[style*="text-align:right"] {
        min-width: 45px;
        font-size: 0.5rem !important;
    }
}

.view-selector {
    display: flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 2px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.view-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
}

.view-btn.active {
    background: #007aff;
    color: white;
    box-shadow: 0 1px 3px rgba(0, 122, 255, 0.3);
}

.view-btn:hover:not(.active) {
    background: #e0e0e0;
    color: #333;
}

.view-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
}

/* Investment Analytics Header */
.investment-analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.investment-analytics-header h2 {
    margin: 0;
    color: #1d1d1f;
    font-size: 1.5rem;
    font-weight: 700;
}

.refresh-btn:disabled {
    background-color: #86868b;
    cursor: not-allowed;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.back-btn {
    color: #007aff;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.back-btn:hover {
    background-color: #f0f8ff;
}

/* Global Loading Overlay */
.global-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.global-loading-content {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    min-width: 300px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f0f0f0;
    border-top: 4px solid #007aff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

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

.global-loading-content h3 {
    margin: 0 0 12px 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1d1d1f;
}

.global-loading-content p {
    margin: 0;
    font-size: 1rem;
    color: #86868b;
    font-weight: 500;
}

.loading {
    text-align: center;
    padding: 40px;
    font-size: 1.1rem;
    color: #86868b;
}

.loading span {
    display: inline-block;
    transition: all 0.3s ease;
}

.loading.progress {
    background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 100%);
    border-radius: 8px;
    border: 1px solid #d0d0d0;
}

.loading.progress span {
    font-weight: 600;
    color: #007aff;
}

.error {
    background-color: #ff3b30;
    color: white;
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.campaign-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0 -10px 24px -10px;
    overflow: hidden;
}

.campaign-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #e9ecef;
}

.campaign-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1d1d1f;
}

.campaign-title {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 2px;
    cursor: pointer;
    color: #007aff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.campaign-title:hover {
    color: #0056cc;
    text-decoration: none;
}

.campaign-meta {
    color: #86868b;
    font-size: 0.85rem;
    font-weight: 500;
}

.table-container {
    overflow-x: auto;
    margin: 0 -10px;
    padding: 0 10px;
}

.performance-table {
    width: 100%;
    min-width: 1400px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.performance-table .col-check {
    width: 24px;
}

.performance-table th,
.performance-table td {
    padding: 8px 6px;
    text-align: left;
    border-bottom: 1px solid #f1f3f4;
}

.performance-table th {
    background-color: #fafbfc;
    font-weight: 700;
    color: #495057;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.performance-table td {
    font-size: 0.8rem;
    vertical-align: middle;
}

.performance-table tr:hover {
    background-color: #f8f9fa;
}

.performance-table td:first-child {
    padding: 0;
    margin: 0;
}

.performance-table td:not(:first-child) {
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 80px;
}

.clickable-metric {
    color: #007aff;
    cursor: pointer;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

.clickable-metric:hover {
    background-color: #e3f2fd;
    color: #0056cc;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.15);
}

.status {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

.status.active {
    background-color: #d4edda;
    color: #155724;
}

.status.paused {
    background-color: #fff3cd;
    color: #856404;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}

/* Chart modal should appear above campaign details modal */
#chart-modal {
    z-index: 1100;
}

.modal-content {
    background-color: white;
    margin: 3% auto;
    padding: 0;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    width: 95%;
    max-width: 1400px;
    position: relative;
    max-height: 94vh;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.campaign-details-content {
    padding: 24px;
    max-height: 94vh;
    overflow-y: auto;
}

.campaign-details-date-selector {
    display: flex;
    gap: 4px;
    border: 1.5px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    margin: 16px 0;
    width: fit-content;
}

.campaign-date-btn {
    padding: 8px 12px;
    background-color: white;
    color: #86868b;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid #e9ecef;
}

.campaign-date-btn:last-child {
    border-right: none;
}

.campaign-date-btn:hover {
    background-color: #f5f5f7;
}

.campaign-date-btn.active {
    background-color: #007aff;
    color: white;
}

.close {
    color: #86868b;
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px;
    margin: 8px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close:hover {
    color: #1d1d1f;
    background-color: #f5f5f7;
}

.chart-container {
    width: 100%;
    height: 800px;
    margin-top: 20px;
    position: relative;
}

.chart-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid #e9ecef;
    background-color: #f8f9fa;
}

.chart-controls label {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.9rem;
}

.chart-date-selector {
    display: flex;
    gap: 4px;
    border: 1.5px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.chart-date-btn {
    padding: 6px 12px;
    background-color: white;
    color: #86868b;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid #e9ecef;
}

.chart-date-btn:last-child {
    border-right: none;
}

.chart-date-btn:hover:not(.active) {
    background-color: #f8f9fa;
    color: #1d1d1f;
}

.chart-date-btn.active {
    background-color: #007aff;
    color: white;
}

.chart-breakdown-selector {
    display: flex;
    gap: 4px;
    border: 1.5px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.chart-breakdown-btn {
    padding: 6px 12px;
    background-color: white;
    color: #86868b;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid #e9ecef;
}

.chart-breakdown-btn:last-child {
    border-right: none;
}

.chart-breakdown-btn:hover:not(.active) {
    background-color: #f8f9fa;
    color: #1d1d1f;
}

.chart-breakdown-btn.active {
    background-color: #34c759;
    color: white;
}

.chart-percentage-toggle-container {
    display: flex;
    align-items: center;
}

.chart-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.chart-percentage-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #34c759;
}

.chart-toggle-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d1d1f;
}

.chart-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 8px;
}

.chart-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007aff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.chart-loading-text {
    margin-top: 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1d1d1f;
}

.country-spend-distribution {
    margin: 10px 0;
    padding: 12px 16px;
    background-color: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.country-spend-distribution h4 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1d1d1f;
}

.country-spend-bars {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.country-item {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

/* Campaign Comparison Section */
.campaign-comparison-section {
    margin-top: 40px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 2px solid #007aff;
}

.campaign-comparison-section h3 {
    margin: 0 0 20px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #1d1d1f;
}

.campaign-comparison-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comparison-campaign-row {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.comparison-campaign-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e0e0e0;
}

.comparison-campaign-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
}

.comparison-campaign-meta {
    font-size: 0.85rem;
    color: #86868b;
}

.comparison-remove-btn {
    margin: 0;
    background: #ff3b30;
    color: white;
    border: none;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    padding: 0;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.comparison-remove-btn:hover {
    background: #d62f26;
}

.comparison-campaign-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.comparison-campaign-table td {
    padding: 6px 8px;
    border: 1px solid #e0e0e0;
}

.comparison-campaign-table td:nth-child(odd) {
    background-color: #f8f9fa;
    font-weight: 600;
    width: 12%;
}

.comparison-campaign-table td:nth-child(even) {
    background-color: white;
    width: 13%;
}

.campaign-compare-checkbox {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    accent-color: #007aff;
}

.chk-wrap {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

#campaign-details-title {
    margin-top: 0;
    margin-bottom: 20px;
    color: #1d1d1f;
    font-size: 1.4rem;
    font-weight: 700;
}

#campaign-details-loading,
#campaign-details-error {
    margin: 20px 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 12px 5px;
    }
    
    header {
        padding: 18px 20px;
    }
    
    .header-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .date-range-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }
    
    .date-selector {
        width: 100%;
    }
    
    .refresh-btn {
        width: 100%;
    }
    
    .user-info {
        align-self: stretch;
        justify-content: space-between;
    }
    
    .user-details {
        align-items: flex-start;
        flex: 1;
        margin-left: 8px;
    }
    
    .performance-table {
        font-size: 0.8rem;
    }
    
    .performance-table th,
    .performance-table td {
        padding: 8px 6px;
    }
    
    .modal-content {
        width: 98%;
        margin: 2% auto;
        border-radius: 12px;
    }
    
    .campaign-details-content {
        padding: 16px;
    }
    
    .header-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .clickable-metric {
        min-width: 50px;
        font-size: 0.8rem;
    }
}

/* Sortable table headers */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px !important;
}

.sortable:hover {
    background-color: rgba(0, 122, 255, 0.1);
}

/* Style for the sort indicators */
.sortable::after {
    content: '▲';
    position: absolute;
    right: 6px;
    opacity: 0.3;
}

.sortable.asc::after {
    content: '▲';
    opacity: 1;
}

.sortable.desc::after {
    content: '▼';
}

/* Creative Analytics Section Styling */
.creative-section-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 16px;
}

.creative-section-col {
    width: 100%;
}

@media (max-width: 1200px) {
    .creative-section-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* Creative Analytics Table Sorting */
.creative-table .sortable {
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: all 0.2s ease;
    padding-right: 25px !important;
}

.creative-table .sortable:hover {
    background-color: #f8f9fa;
    color: #007aff;
}

.creative-table .sortable .sort-indicator {
    color: #007aff;
    font-weight: bold;
    margin-left: 4px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.creative-table .sortable.sort-asc {
    background-color: #f0f8ff;
    color: #007aff;
}

.creative-table .sortable.sort-desc {
    background-color: #f0f8ff;
    color: #007aff;
}

/* Total row styling */
.total-row {
    border-top: 2px solid #007aff !important;
    background-color: #f8f9fa;
    font-weight: bold;
}

.total-row td {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-weight: bold;
    color: #1d1d1f;
    border-bottom: 1px solid #007aff !important;
}

.total-row td:first-child {
    font-weight: 700;
}

/* Comparison Metrics Styles */
.metric-with-comparison {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 60px;
    justify-content: center;
}

.main-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
}

.comparison-indicators {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.comparison-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    line-height: 1.2;
}

.comparison-label {
    color: #86868b;
    font-weight: 500;
    min-width: 30px;
}

.trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 3px;
    border-radius: 3px;
    min-width: 35px;
    justify-content: center;
}

.trend-indicator.positive {
    color: #34c759;
    background-color: rgba(52, 199, 89, 0.1);
}

.trend-indicator.negative {
    color: #ff3b30;
    background-color: rgba(255, 59, 48, 0.1);
}

.trend-indicator.neutral {
    color: #86868b;
    background-color: rgba(134, 134, 139, 0.1);
}

/* Adjust table cell padding for comparison metrics */
.performance-table td {
    padding: 12px 8px;
    vertical-align: middle;
}

.performance-table .clickable-metric {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
    padding: 4px;
    margin: -4px;
}

.performance-table .clickable-metric:hover {
    background-color: rgba(0, 122, 255, 0.05);
    transform: translateY(-1px);
}

/* Performance Analysis Styles */
.perf-analysis {
    min-width: 180px;
    max-width: 200px;
}

.perf-status {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.3;
}

.perf-status-text {
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    padding: 2px 6px;
    border-radius: 4px;
}

.perf-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.perf-cause {
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
}

.perf-action {
    font-size: 0.75rem;
    color: #444;
    font-style: italic;
}

/* Rule-specific styling */
.rule-0 {
    background-color: #f0f8ff;
    border-left: 4px solid #87ceeb;
}

.rule-0 .perf-status-text {
    background-color: #87ceeb;
    color: white;
}

.rule-1 {
    background-color: #ffe4e1;
    border-left: 4px solid #ff6b47;
}

.rule-1 .perf-status-text {
    background-color: #ff6b47;
    color: white;
}

.rule-2 {
    background-color: #e8f5e8;
    border-left: 4px solid #32cd32;
}

.rule-2 .perf-status-text {
    background-color: #32cd32;
    color: white;
}

.rule-3 {
    background-color: #fff8dc;
    border-left: 4px solid #ffa500;
}

.rule-3 .perf-status-text {
    background-color: #ffa500;
    color: white;
}

.rule-4 {
    background-color: #ffe4e1;
    border-left: 4px solid #dc143c;
}

.rule-4 .perf-status-text {
    background-color: #dc143c;
    color: white;
}

.rule-5 {
    background-color: #f5f5dc;
    border-left: 4px solid #b8860b;
}

.rule-5 .perf-status-text {
    background-color: #b8860b;
    color: white;
}

.rule-6 {
    background-color: #e6e6fa;
    border-left: 4px solid #9370db;
}

.rule-6 .perf-status-text {
    background-color: #9370db;
    color: white;
}

.rule-stable {
    background-color: #f0f8f0;
    border-left: 4px solid #90ee90;
}

.rule-stable .perf-status-text {
    background-color: #90ee90;
    color: #2d5a2d;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .metric-with-comparison {
        min-height: 50px;
        gap: 2px;
    }
    
    .main-value {
        font-size: 0.85rem;
    }
    
    .comparison-row {
        font-size: 0.65rem;
        gap: 2px;
    }
    
    .comparison-label {
        min-width: 25px;
    }
    
    .trend-indicator {
        font-size: 0.6rem;
        min-width: 30px;
    }

    .perf-analysis {
        min-width: 150px;
        max-width: 160px;
    }
    
    .perf-status {
        padding: 6px;
        gap: 4px;
    }
    
    .perf-status-text {
        font-size: 0.75rem;
    }
    
    .perf-cause,
    .perf-action {
        font-size: 0.7rem;
    }
}

/* Account Section Styles */
/* App section styles */
.app-section {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    margin: 0 -10px 12px -10px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.app-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.app-header:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-1px);
}

.app-info h1 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0;
    color: white;
    line-height: 1.4;
}

.app-info .app-meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}

.app-account-count {
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.app-content {
    padding: 12px;
    background: #fafbfc;
    transition: all 0.3s ease;
    max-height: none;
    overflow: visible;
}

.app-content.collapsed {
    max-height: 0;
    padding: 0 12px;
    overflow: hidden;
}

.account-section {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #e5e5e7;
}

.account-section:last-child {
    margin-bottom: 0;
}

.account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.account-header:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

.account-info h2 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0;
    color: #1d1d1f;
    line-height: 1.4;
}

.account-info .account-meta {
    color: #86868b;
    font-size: 0.9rem;
}

.account-id-inline {
    font-size: 0.8rem;
    font-weight: 400;
    color: #86868b;
}

.collapse-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #86868b;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    padding: 4px;
    border-radius: 4px;
}

.collapse-toggle:hover {
    color: #1d1d1f;
    background-color: rgba(0, 0, 0, 0.05);
}

.collapse-toggle.collapsed {
    transform: rotate(-90deg);
}

.account-content {
    max-height: none;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.account-content.collapsed {
    max-height: 0;
}

.account-loading {
    padding: 40px;
    text-align: center;
    color: #86868b;
    font-style: italic;
}

.account-error {
    padding: 20px 24px;
    background-color: #fff5f5;
    border-left: 4px solid #ff3b30;
    color: #d63031;
    font-size: 0.9rem;
}

.meta-api-error {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    text-align: left;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
}

.meta-api-error .error-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 600;
}

.meta-api-error .error-icon {
    font-size: 1.2rem;
}

.meta-api-error .error-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-api-error .error-message {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
}

.meta-api-error .error-code {
    font-size: 0.9rem;
    color: #6c757d;
    font-family: monospace;
}

.meta-api-error .error-account {
    font-size: 0.9rem;
    color: #6c757d;
    font-family: monospace;
}


/* App Summary Styles */
.app-summary {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0 -10px 24px -10px;
    padding: 20px 24px;
    border-left: 4px solid #007aff;
}

.app-summary h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #007aff;
}

.app-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.app-summary-card {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border: 1px solid #d1ecf1;
    border-radius: 8px;
    padding: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
}

.app-summary-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.app-summary-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
}

.app-summary-card-spend {
    font-size: 1.5rem;
    font-weight: 700;
    color: #007aff;
}

.app-summary-card-details {
    font-size: 0.9rem;
    color: #666;
    margin-top: 8px;
}

.app-summary-card-campaigns {
    font-size: 0.85rem;
    color: #888;
    margin-top: 4px;
}

/* Account Summary Styles */
.account-summary {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0 -10px 24px -10px;
    padding: 20px 24px;
}

.account-summary h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1d1d1f;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.summary-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.summary-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.summary-card-status {
    font-size: 0.75rem;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.summary-metric {
    text-align: center;
    flex: 0 0 50%;
}

.summary-metric-label {
    font-size: 0.8rem;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.summary-metric-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1d1d1f;
}

.summary-metric-value.spend {
    color: #007aff;
}

.summary-metric-value.cpp {
    color: #34c759;
}

.summary-card-loading {
    color: #86868b;
    font-style: italic;
    text-align: center;
    padding: 8px;
}

.summary-card-error {
    color: #ff3b30;
    font-size: 0.9rem;
    text-align: center;
    padding: 8px;
}

@media (max-width: 768px) {
    .summary-cards {
        grid-template-columns: 1fr;
    }
    
    .summary-metric-value {
        font-size: 1.2rem;
    }
}

.summary-revenue-section{
  margin-top:20px;
}
.summary-revenue-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.summary-revenue-table th,
.summary-revenue-table td{
  border:1px solid #ccc;
  padding:4px 6px;
  text-align:center;
}
.summary-revenue-table th{
  background:#f0f0f0;
}

/* Dashboard Tabs */
.dashboard-tabs {
    display: flex;
    gap: 1rem;
    margin: 0 0 1rem 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
    width: 100%;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    background: none;
    font-size: 1rem;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-weight: 600;
}

.tab-btn:hover {
    background-color: #f5f5f5;
    color: #333;
}

.tab-btn.active {
    background-color: #007AFF;
    color: white;
}

.header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Country Filter Styles */
.country-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.country-filter label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1d1d1f;
}

.country-select {
    padding: 8px 12px;
    border: 1.5px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.9rem;
    background-color: white;
    cursor: pointer;
    min-width: 180px;
    transition: border-color 0.2s ease;
}

.country-select:hover {
    border-color: #007aff;
}

.country-select:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Active Filter Indicator */
.active-filter-indicator {
    padding: 8px 16px;
    background-color: #e3f2fd;
    border-left: 4px solid #007aff;
    margin-top: 10px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
}

.active-filter-indicator strong {
    color: #007aff;
}

.active-filter-indicator .clear-filter-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: #007aff;
    cursor: pointer;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.active-filter-indicator .clear-filter-btn:hover {
    background-color: rgba(0, 122, 255, 0.1);
}

/* Sigma Analytics */
.sigma-analytics {
    margin: 1rem 0;
}

.sigma-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.sigma-tab-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e0e0e0;
    background: white;
    font-size: 0.9rem;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.sigma-tab-btn:hover {
    background-color: #f5f5f5;
    border-color: #d0d0d0;
}

.sigma-tab-btn.active {
    background-color: #007AFF;
    color: white;
    border-color: #007AFF;
}

.export-csv-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e0e0e0;
    background: white;
    font-size: 0.9rem;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: auto;
    margin-right: 1rem;
}

.export-csv-btn:hover {
    background-color: #f5f5f5;
    border-color: #d0d0d0;
}

.export-csv-btn:active {
    background-color: #e0e0e0;
}

.sigma-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1rem;
}

.sigma-tables {
    overflow-x: auto;
}

/* Basic Sigma Table Styles */
.sigma-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.sigma-table th,
.sigma-table td {
    padding: 0.5rem;
    text-align: left;
    border: 1px solid #e0e0e0;
}

.sigma-table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.sigma-table tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* Loading and Error States */
#sigma-loading,
#sigma-error {
    text-align: center;
    padding: 2rem;
    color: #666;
}

#sigma-error {
    color: #dc3545;
}

/* Daily Sales Section */
.daily-sales-section {
    margin-bottom: 2rem;
}

.daily-sales-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.purchase-type {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.purchase-type.first_purchase {
    background-color: #e3f2fd;
    color: #1976d2;
}

.purchase-type.trial_converted {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.purchase-type.renewal {
    background-color: #fff3e0;
    color: #f57c00;
}

.purchase-type.onetime {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

/* Adjust table styles for daily sales */
.daily-sales-section .sigma-table {
    margin-top: 0.5rem;
}

.daily-sales-section .sigma-table th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 1;
}

.daily-sales-section .total-row {
    background-color: #f8f9fa;
    border-top: 2px solid #007aff;
}

.daily-sales-section .total-row td {
    padding: 0.75rem;
    font-weight: 600;
}

#cohort-date-picker-container {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

#cohort-date-picker-container label {
    font-size: 0.9rem;
    color: #666;
    white-space: nowrap;
}

#cohort-date-picker {
    padding: 0.25rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Cohort Revenue Charts */
.cohort-charts-section {
    margin-top: 40px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cohort-charts-section h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 24px;
    text-align: center;
}

.cohort-charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 32px;
}

.cohort-chart-wrapper {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cohort-chart-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cohort-chart-wrapper h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 16px 0;
    text-align: center;
}

.cohort-chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

@media (max-width: 768px) {
    .cohort-charts-container {
        grid-template-columns: 1fr;
    }
    
    .cohort-chart-wrapper {
        padding: 16px;
    }
    
    .cohort-chart-container {
        height: 250px;
    }
}

/* Sigma Table Filters */
.sigma-filters {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 1rem;
}

.sigma-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.sigma-filters-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
}

.clear-filters-btn {
    padding: 0.25rem 0.75rem;
    border: 1px solid #dc3545;
    background: white;
    color: #dc3545;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.clear-filters-btn:hover {
    background: #dc3545;
    color: white;
}

.sigma-filters-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.sigma-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sigma-filter-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sigma-filter-input,
.sigma-filter-select {
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    transition: border-color 0.2s ease;
}

.sigma-filter-input:focus,
.sigma-filter-select:focus {
    outline: none;
    border-color: #007AFF;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

.sigma-range-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sigma-range-inputs input {
    flex: 1;
    min-width: 0;
}

.sigma-range-inputs span {
    color: #666;
    font-weight: 600;
}

.sigma-filters-summary {
    padding-top: 0.5rem;
    border-top: 1px solid #e0e0e0;
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
}

/* Responsive adjustments for filters */
@media (max-width: 768px) {
    .sigma-filters-content {
        grid-template-columns: 1fr;
    }
    
    .sigma-filters-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .sigma-range-inputs {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .sigma-range-inputs span {
        display: none;
    }
}

/* Cohort Filters */
.cohort-filters {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 1rem;
}

.cohort-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.cohort-filters-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
}

.cohort-filters-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.cohort-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cohort-filter-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cohort-filter-select {
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    transition: border-color 0.2s ease;
}

.cohort-filter-select:focus {
    outline: none;
    border-color: #007AFF;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

/* Weibull k parameter slider */
.weibull-k-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weibull-k-slider {
    flex: 1;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}

.weibull-k-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #007AFF;
    border-radius: 50%;
    cursor: pointer;
}

.weibull-k-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #007AFF;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.weibull-k-value {
    font-weight: 600;
    color: #007AFF;
    min-width: 30px;
    text-align: center;
    font-size: 0.9rem;
}

/* Responsive adjustments for cohort filters */
@media (max-width: 768px) {
    .cohort-filters-content {
        grid-template-columns: 1fr;
    }
    
    .cohort-filters-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .weibull-k-control {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* Cohort Analysis Date Range Controls */
#cohort-analysis-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#cohort-analysis-date-range label {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    margin: 0;
}

#cohort-analysis-date-range-input {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    color: #333;
    min-width: 200px;
    cursor: pointer;
}

#cohort-analysis-date-range-input:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.cohort-analyze-btn {
    padding: 6px 16px;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cohort-analyze-btn:hover {
    background: #0056cc;
}

.cohort-analyze-btn:active {
    background: #004299;
}

/* Date Range Modal */
.date-range-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.date-range-modal-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 400px;
    max-width: 90vw;
    overflow: hidden;
}

.date-range-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.date-range-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

.date-range-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-range-close-btn:hover {
    color: #333;
}

.date-range-modal-body {
    padding: 20px;
}

.date-range-input-group {
    margin-bottom: 16px;
}

.date-range-input-group:last-child {
    margin-bottom: 0;
}

.date-range-input-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
    font-size: 0.9rem;
}

.date-range-input-group input[type="date"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    color: #333;
}

.date-range-input-group input[type="date"]:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.date-range-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.date-range-cancel-btn,
.date-range-apply-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.date-range-cancel-btn {
    background: #e0e0e0;
    color: #333;
}

.date-range-cancel-btn:hover {
    background: #d0d0d0;
}

.date-range-apply-btn {
    background: #007aff;
    color: white;
}

.date-range-apply-btn:hover {
    background: #0056cc;
}

.date-range-apply-btn:active {
    background: #004299;
}

@media (max-width: 768px) {
    #cohort-analysis-date-range {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }
    
    #cohort-analysis-date-range-input {
        min-width: 160px;
    }
    
    .date-range-modal-content {
        width: 320px;
    }
    
    .date-range-modal-footer {
        flex-direction: column;
    }
    
    .date-range-cancel-btn,
    .date-range-apply-btn {
        width: 100%;
    }
}

/* Cohort Analysis Empty State */
.cohort-analysis-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    min-height: 400px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.empty-state-icon {
    margin-bottom: 2rem;
    opacity: 0.7;
}

.cohort-analysis-empty-state h3 {
    margin: 0 0 1rem 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
}

.cohort-analysis-empty-state p {
    margin: 0 0 2rem 0;
    color: #666;
    font-size: 1rem;
    max-width: 400px;
    line-height: 1.5;
}

.empty-state-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 600px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feature-item span {
    color: #555;
    font-size: 0.9rem;
    font-weight: 500;
}

.feature-item svg {
    flex-shrink: 0;
}

/* Cohort Analysis App Tables */
.cohort-app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.cohort-app-title {
    margin: 0;
    color: #333;
    font-size: 1.2rem;
    font-weight: 600;
}

.cohort-chart-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.3);
}

.cohort-chart-btn:hover {
    background: linear-gradient(135deg, #0056b3 0%, #4a47a3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 122, 255, 0.4);
}

.cohort-chart-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.3);
}

.cohort-chart-btn svg {
    flex-shrink: 0;
}
.cohort-app-section {
    margin-bottom: 2rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cohort-app-title {
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #007aff;
}

.cohort-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

.cohort-table th {
    background: #f8f9fa;
    font-weight: 600;
    text-align: left;
    padding: 12px;
    border: 1px solid #dee2e6;
    color: #495057;
}

.cohort-table td {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    color: #333;
}

.cohort-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.cohort-table tbody tr:hover {
    background: #e9f3ff;
}

/* Spend and Revenue columns styling */
.cohort-table td:nth-child(2),
.cohort-table td:nth-child(3),
.cohort-table td:nth-child(4),
.cohort-table td:nth-child(5),
.cohort-table td:nth-child(6) {
    text-align: right;
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
    font-weight: 500;
}

/* Spend column specific styling */
.cohort-table td:nth-child(2) {
    color: #ff3b30;
}

/* Revenue columns specific styling */
.cohort-table td:nth-child(3),
.cohort-table td:nth-child(4),
.cohort-table td:nth-child(5),
.cohort-table td:nth-child(6) {
    color: #34c759;
}

.no-data {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

@media (max-width: 768px) {
    .cohort-app-section {
        padding: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .cohort-app-title {
        font-size: 1.1rem;
    }
    
    .cohort-table th,
    .cohort-table td {
        padding: 8px;
        font-size: 0.9rem;
    }
    
    .cohort-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Cohort Analysis - Insufficient Time Styling */
.cohort-table .insufficient-time {
    background-color: #f5f5f5 !important;
    color: #888 !important;
    font-style: italic;
    opacity: 0.7;
}

.cohort-table .insufficient-time:hover {
    background-color: #eeeeee !important;
}

/* Optional: Add a subtle pattern or texture to make it more obvious */
.cohort-table .insufficient-time::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.05) 2px,
        rgba(0,0,0,0.05) 4px
    );
    pointer-events: none;
}

/* Ensure the table cell is positioned relative for the pattern overlay */
.cohort-table td.insufficient-time {
    position: relative;
}

/* Cohort Analysis Summary Row Styling */
.cohort-summary-row {
    background-color: #f8f9fa !important;
    border-top: 2px solid #dee2e6 !important;
    border-bottom: 2px solid #dee2e6 !important;
}

.cohort-summary-cell {
    background-color: #f8f9fa !important;
    font-weight: bold !important;
    padding: 12px 8px !important;
    border-top: 2px solid #dee2e6 !important;
    color: #495057 !important;
}

.cohort-summary-row:hover {
    background-color: #e9ecef !important;
}

.cohort-summary-row .cohort-summary-cell:hover {
    background-color: #e9ecef !important;
}

/* Cohort Trial Product Sections */
.cohort-product-section {
    margin-bottom: 2rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cohort-product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #007aff;
    margin-bottom: 1rem;
}

.cohort-product-title {
    margin: 0;
    color: #333;
    font-size: 1.2rem;
    font-weight: 600;
}

.cohort-product-actions {
    margin-top: 1rem;
    text-align: center;
}

.calculate-ltv-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(52, 199, 89, 0.3);
}

.calculate-ltv-btn:hover {
    background: linear-gradient(135deg, #28a745 0%, #2fb344 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 199, 89, 0.4);
}

.calculate-ltv-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(52, 199, 89, 0.3);
}

.calculate-ltv-btn svg {
    flex-shrink: 0;
}

/* Inline LTV Summary */
.ltv-inline-summary {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    border-left: 4px solid #2196F3;
}

.ltv-inline-summary h4 {
    margin: 0 0 20px 0;
    color: #1976D2;
    font-size: 1.2rem;
    font-weight: 600;
}

.ltv-inline-summary h5 {
    margin: 16px 0 12px 0;
    color: #333;
    font-size: 1.05rem;
    font-weight: 600;
}

.ltv-inline-summary h6 {
    margin: 20px 0 12px 0;
    color: #1976D2;
    font-size: 1rem;
    font-weight: 600;
}

.ltv-inline-summary .ltv-segment-estimates {
    margin-bottom: 20px;
}

.ltv-inline-summary .ltv-total-summary {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid #e0e0e0;
}

.ltv-inline-summary .ltv-segment-table,
.ltv-inline-summary .ltv-total-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 16px;
}

.ltv-inline-summary .ltv-segment-table th,
.ltv-inline-summary .ltv-total-table th {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
}

.ltv-inline-summary .ltv-segment-table td,
.ltv-inline-summary .ltv-total-table td {
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.9rem;
}

.ltv-inline-summary .ltv-segment-table tr:hover,
.ltv-inline-summary .ltv-total-table tr:hover {
    background-color: #f5f5f5;
}

.ltv-inline-summary .ltv-value {
    font-weight: 600;
    color: #2e7d32;
}

.ltv-inline-summary .ltv-difference.positive {
    color: #2e7d32;
    font-weight: 600;
}

.ltv-inline-summary .ltv-difference.negative {
    color: #d32f2f;
    font-weight: 600;
}

.ltv-inline-summary .ltv-difference.neutral {
    color: #666;
    font-weight: 500;
}

.ltv-inline-summary .ltv-explanation {
    margin-top: 20px;
    padding: 16px;
    background: white;
    border-radius: 6px;
    border-left: 3px solid #4caf50;
}

.ltv-inline-summary .ltv-explanation p {
    margin: 0 0 12px 0;
    font-weight: 600;
    color: #333;
}

.ltv-inline-summary .ltv-explanation ul {
    margin: 0;
    padding-left: 20px;
}

.ltv-inline-summary .ltv-explanation li {
    margin-bottom: 8px;
    color: #555;
    line-height: 1.4;
}

/* Product Average Summary */
.product-average-summary {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
    border-radius: 6px;
    border-left: 4px solid #4caf50;
    font-size: 0.95rem;
    color: #2e7d32;
    line-height: 1.4;
}

.product-average-summary strong {
    color: #1b5e20;
    font-weight: 600;
}

.product-average-summary > div:last-child {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(76, 175, 80, 0.3);
}

.cohort-trial-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

.cohort-trial-table th {
    background: #f8f9fa;
    font-weight: 600;
    text-align: left;
    padding: 12px;
    border: 1px solid #dee2e6;
    color: #495057;
}

.cohort-trial-table td {
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    color: #333;
}

.cohort-trial-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.cohort-trial-table tbody tr:hover {
    background: #e9f3ff;
}

/* Revenue and subscription count columns styling */
.cohort-trial-table td:nth-child(n+4) {
    text-align: right;
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
    font-weight: 500;
}

/* LTV Modal Styles */
.ltv-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.ltv-modal-content {
    background-color: white;
    margin: 2% auto;
    padding: 0;
    border-radius: 12px;
    width: 90%;
    max-width: 1400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: ltvModalSlideIn 0.3s ease-out;
}

@keyframes ltvModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ltv-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #dee2e6;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px 12px 0 0;
}

.ltv-modal-header h3 {
    margin: 0;
    color: #333;
    font-size: 1.3rem;
    font-weight: 600;
}

.ltv-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.ltv-modal-close:hover {
    color: #333;
    background-color: #f1f3f4;
}

.ltv-modal-body {
    padding: 24px;
}

.ltv-explanation {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    border-left: 4px solid #007aff;
}

.ltv-explanation p {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #333;
}

.ltv-explanation ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.ltv-explanation li {
    margin-bottom: 4px;
    color: #555;
}

/* LTV Modal Weibull Controls */
.ltv-weibull-control {
    margin: 24px 0;
    padding: 20px;
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
    border-radius: 8px;
    border-left: 4px solid #4caf50;
}

.ltv-weibull-control h4 {
    margin: 0 0 16px 0;
    color: #2e7d32;
    font-size: 1.1rem;
    font-weight: 600;
}

.ltv-weibull-slider-container {
    background: white;
    padding: 16px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ltv-weibull-slider-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.ltv-weibull-control-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ltv-weibull-k-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #4caf50 0%, #81c784 100%);
    outline: none;
    border-radius: 4px;
    cursor: pointer;
}

.ltv-weibull-k-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #2e7d32;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.ltv-weibull-k-slider::-webkit-slider-thumb:hover {
    background: #1b5e20;
    transform: scale(1.1);
}

.ltv-weibull-k-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #2e7d32;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.ltv-weibull-k-value {
    background: #2e7d32;
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 40px;
    text-align: center;
}

.ltv-weibull-description {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 4px;
    border-left: 3px solid #6c757d;
}

.ltv-weibull-description small {
    color: #495057;
    line-height: 1.4;
}

/* Weibull Controls Section */
.ltv-weibull-controls {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    border-left: 4px solid #ff9800;
}

.weibull-control-section h4 {
    margin: 0 0 16px 0;
    color: #333;
    font-size: 1.1rem;
    font-weight: 600;
}

.weibull-k-control {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.weibull-k-control label {
    font-weight: 500;
    color: #333;
    min-width: 140px;
}

.weibull-k-slider {
    flex: 1;
    max-width: 200px;
    height: 6px;
    border-radius: 3px;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
}

.weibull-k-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff9800;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.4);
    transition: all 0.2s ease;
}

.weibull-k-slider::-webkit-slider-thumb:hover {
    background: #f57c00;
    transform: scale(1.1);
}

.weibull-k-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff9800;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.4);
}

.weibull-k-value {
    font-weight: 600;
    color: #ff9800;
    background: white;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 40px;
    text-align: center;
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
}

.weibull-explanation {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin: 0;
}

/* Interactive Cohort Table Section */
.ltv-interactive-table {
    margin-bottom: 24px;
}

.ltv-interactive-table h4 {
    margin: 0 0 16px 0;
    color: #333;
    font-size: 1.1rem;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 2px solid #007aff;
}

.ltv-cohort-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.ltv-cohort-table th,
.ltv-cohort-table td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #dee2e6;
}

.ltv-cohort-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
    font-size: 0.85rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.ltv-cohort-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.ltv-cohort-table tbody tr:hover {
    background-color: #e3f2fd;
}

/* Estimated values styling */
.estimated-value {
    color: #999 !important;
    font-style: italic;
    position: relative;
}

.estimated-value::after {
    content: " (est)";
    font-size: 0.75rem;
    color: #999;
    font-weight: normal;
}

.ltv-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.ltv-table th,
.ltv-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}

.ltv-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

.ltv-table tbody tr:hover {
    background-color: #f1f3f4;
}

.ltv-value {
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
    color: #34c759;
    font-size: 1.1rem;
}

.pricing-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pricing-badge.yearly {
    background-color: #007aff;
    color: white;
}

.pricing-badge.monthly {
    background-color: #34c759;
    color: white;
}

.pricing-badge.unknown {
    background-color: #999;
    color: white;
}

.calculation-method {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

.revenue-breakdown {
    font-size: 0.85rem;
}

.revenue-details div {
    margin-bottom: 2px;
    color: #555;
}

.ltv-summary {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #2196f3;
}

.ltv-summary h4 {
    margin: 0 0 12px 0;
    color: #333;
    font-size: 1.1rem;
}

.ltv-summary p {
    margin: 4px 0;
    color: #555;
}

.no-ltv-data {
    text-align: center;
    padding: 40px;
    color: #666;
}

.no-ltv-data p {
    margin: 8px 0;
}

/* LTV Scenario Comparison Styles */
.ltv-scenarios-section {
    margin-bottom: 32px;
    padding: 20px;
    background: #f8fafe;
    border-radius: 8px;
    border: 1px solid #e1e8f4;
}

.ltv-scenarios-section h4 {
    margin: 0 0 16px 0;
    color: #333;
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 2px solid #007aff;
}

.scenario-description {
    margin-bottom: 20px;
    padding: 16px;
    background: white;
    border-radius: 6px;
    border-left: 4px solid #007aff;
}

.scenario-description p {
    margin: 0 0 12px 0;
    color: #555;
    font-size: 0.95rem;
}

.scenario-description ul {
    margin: 0;
    padding-left: 20px;
}

.scenario-description li {
    margin-bottom: 6px;
    color: #666;
    font-size: 0.9rem;
}

.ltv-scenarios-container {
    background: white;
    border-radius: 8px;
    padding: 0;
    border: 1px solid #dee2e6;
    overflow: hidden;
}

.ltv-scenarios-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.9rem;
}

.ltv-scenarios-table th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    font-weight: 600;
    padding: 12px 10px;
    text-align: center;
    border: 1px solid #dee2e6;
    font-size: 0.85rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.ltv-scenarios-table th[rowspan="2"] {
    vertical-align: middle;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1976d2;
    font-weight: 700;
}

.ltv-scenarios-table th[colspan="2"] {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    color: #e65100;
    font-weight: 700;
    font-size: 0.9rem;
}

.ltv-scenarios-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #dee2e6;
    vertical-align: middle;
}

.ltv-scenarios-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.ltv-scenarios-table tbody tr:hover {
    background-color: #e3f2fd;
}

.ltv-scenarios-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: #333;
}

.ltv-scenarios-table td:nth-child(2),
.ltv-scenarios-table td:nth-child(3) {
    text-align: center;
    color: #555;
}

.ltv-scenarios-table .ltv-value {
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
    font-weight: 600;
    font-size: 1rem;
}

.ltv-scenarios-table .pricing-badge {
    font-size: 0.75rem;
    padding: 3px 6px;
}

.ltv-scenarios-summary {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border-radius: 8px;
    border-left: 4px solid #9c27b0;
}

.ltv-scenarios-summary h5 {
    margin: 0 0 16px 0;
    color: #4a148c;
    font-size: 1.1rem;
    font-weight: 600;
}

.ltv-summary-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ltv-summary-table th {
    background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
    color: white;
    font-weight: 600;
    padding: 12px;
    text-align: left;
    font-size: 0.9rem;
}

.ltv-summary-table td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

.ltv-summary-table tr:last-child td {
    border-bottom: none;
}

.ltv-summary-table tbody tr:hover {
    background-color: #f8f9fa;
}

.ltv-summary-table .ltv-value {
    color: #2e7d32;
    font-weight: 700;
    font-size: 1.1rem;
}

@media (max-width: 1200px) {
    .ltv-scenarios-table {
        font-size: 0.8rem;
    }
    
    .ltv-scenarios-table th,
    .ltv-scenarios-table td {
        padding: 8px 6px;
    }
    
    .ltv-scenarios-table .ltv-value {
        font-size: 0.9rem;
    }
}

/* LTV Cohort Section Styles */
.ltv-cohort-section {
    margin-bottom: 32px;
    padding: 20px;
    background: #f8fafe;
    border-radius: 8px;
    border: 1px solid #e1e8f4;
}

.ltv-cohort-section h4 {
    margin: 0 0 16px 0;
    color: #333;
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 2px solid #007aff;
}

.ltv-cohort-container {
    margin-bottom: 20px;
    background: white;
    border-radius: 6px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ltv-cohort-table {
    width: 100%;
    font-size: 0.85rem;
}

.ltv-cohort-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    padding: 8px 6px;
    border: 1px solid #dee2e6;
    white-space: nowrap;
}

.ltv-cohort-table td {
    padding: 6px;
    border: 1px solid #dee2e6;
    text-align: center;
}

.ltv-segment-estimates h5 {
    margin: 0 0 12px 0;
    color: #555;
    font-size: 1.1rem;
    font-weight: 600;
}

.ltv-segment-table {
    width: 100%;
    background: white;
    border-radius: 6px;
    border-collapse: collapse;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ltv-segment-table th {
    background-color: #007aff;
    color: white;
    padding: 12px 8px;
    font-weight: 600;
    text-align: center;
    border: 1px solid #0066d9;
}

.ltv-segment-table td {
    padding: 10px 8px;
    border: 1px solid #dee2e6;
    text-align: center;
}

.ltv-segment-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.ltv-segment-table tbody tr:hover {
    background-color: #e3f2fd;
}

.ltv-value {
    font-weight: 600;
    color: #28a745;
}

.ltv-difference.positive {
    color: #28a745;
    font-weight: 600;
}

.ltv-difference.negative {
    color: #dc3545;
    font-weight: 600;
}

.ltv-difference.neutral {
    color: #6c757d;
    font-weight: 600;
}

.ltv-segment-notes {
    margin-top: 16px;
    padding: 12px;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    color: #856404;
}

.ltv-segment-notes p {
    margin: 0;
    font-size: 0.9rem;
}

/* LTV Total Summary Styles */
.ltv-total-summary {
    margin-top: 24px;
    padding: 20px;
    background: #f0f8ff;
    border-radius: 8px;
    border: 2px solid #007aff;
}

.ltv-total-summary h6 {
    margin: 0 0 16px 0;
    color: #007aff;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ltv-total-table {
    width: 100%;
    background: white;
    border-radius: 6px;
    border-collapse: collapse;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ltv-total-table th {
    background: linear-gradient(135deg, #007aff, #0066d9);
    color: white;
    padding: 12px 16px;
    font-weight: 700;
    text-align: center;
    border: none;
    font-size: 0.95rem;
}

.ltv-total-table th:first-child {
    border-top-left-radius: 6px;
}

.ltv-total-table th:last-child {
    border-top-right-radius: 6px;
}

.ltv-total-table td {
    padding: 12px 16px;
    border: 1px solid #e8f4fd;
    text-align: center;
    font-size: 0.95rem;
}

.ltv-total-table tbody tr:nth-child(even) {
    background-color: #fafcff;
}

.ltv-total-table tbody tr:hover {
    background-color: #e8f4fd;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.ltv-total-table .total-ltv-row {
    background: linear-gradient(135deg, #e8f4fd, #f0f8ff) !important;
    font-weight: 600;
}

.ltv-total-table .total-ltv-row:hover {
    background: linear-gradient(135deg, #d4edda, #e8f4fd) !important;
}

.ltv-total-table .total-ltv {
    font-size: 1.1rem;
    font-weight: 700;
    color: #007aff;
}

.ltv-total-table .subscriber-count {
    font-weight: 600;
    color: #495057;
}

@media (max-width: 768px) {
    .ltv-total-summary {
        padding: 16px;
        margin-top: 20px;
    }
    
    .ltv-total-table {
        font-size: 0.85rem;
    }
    
    .ltv-total-table th,
    .ltv-total-table td {
        padding: 8px 12px;
    }
    
    .ltv-total-table .total-ltv {
        font-size: 1rem;
    }
}

.estimated-value {
    color: #999;
    font-style: italic;
}

.estimated-value::after {
    content: " (est)";
    font-size: 0.8em;
}

@media (max-width: 768px) {
    .cohort-product-section {
        padding: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .cohort-product-title {
        font-size: 1.1rem;
    }
    
    .ltv-cohort-section {
        padding: 12px;
        margin-bottom: 20px;
    }
    
    .ltv-cohort-container {
        padding: 8px;
    }
    
    .ltv-cohort-table {
        font-size: 0.75rem;
    }
    
    .ltv-segment-table {
        font-size: 0.8rem;
    }
    
    .ltv-segment-table th,
    .ltv-segment-table td {
        padding: 6px 4px;
    }
}

/* App Analytics Styles */
.app-analytics {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.app-analytics-header {
    padding: 24px 30px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.app-analytics-header h2 {
    margin: 0;
    color: #1d1d1f;
    font-size: 1.5rem;
    font-weight: 600;
}

.app-analytics-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.app-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-selector label {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.9rem;
    white-space: nowrap;
}

.app-select {
    padding: 8px 12px;
    border: 1.5px solid #e9ecef;
    border-radius: 8px;
    background-color: white;
    color: #1d1d1f;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 150px;
}

.app-select:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.load-app-analytics-btn {
    padding: 8px 16px;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-app-analytics-btn:hover:not(:disabled) {
    background-color: #0056cc;
    transform: translateY(-1px);
}

.load-app-analytics-btn:disabled {
    background-color: #86868b;
    cursor: not-allowed;
}

/* App Analytics Filter Styles */
.app-analytics-filters {
    background: #f5f5f7;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    border: 1px solid #e8e8ed;
}

.filter-controls h3 {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    color: #1d1d1f;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    background: white;
    color: #1d1d1f;
    font-size: 0.9rem;
    min-width: 150px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:hover:not(:disabled) {
    border-color: #0071e3;
}

.filter-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.apply-filter-btn,
.clear-filter-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.apply-filter-btn {
    background: #0071e3;
    color: white;
}

.apply-filter-btn:hover:not(:disabled) {
    background: #0077ed;
}

.apply-filter-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.clear-filter-btn {
    background: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #d2d2d7;
}

.clear-filter-btn:hover:not(:disabled) {
    background: #e8e8ed;
}

.clear-filter-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.active-filter {
    margin-top: 12px;
    padding: 8px 12px;
    background: #e3f2fd;
    border-radius: 6px;
    color: #0071e3;
    font-size: 0.9rem;
}

.active-filter strong {
    font-weight: 600;
}

.app-date-selector {
    display: flex;
    align-items: center;
    gap: 16px;
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-input-group label {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.8rem;
    white-space: nowrap;
}

.app-date-input {
    padding: 6px 10px;
    border: 1.5px solid #e9ecef;
    border-radius: 6px;
    font-size: 0.9rem;
    background-color: white;
    color: #1d1d1f;
    min-width: 180px;
    transition: all 0.2s ease;
}

.app-date-input:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.app-analytics-content {
    padding: 24px 30px;
}

.app-analytics-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.app-analytics-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e9ecef;
}

.app-analytics-section h3 {
    margin: 0 0 16px 0;
    color: #1d1d1f;
    font-size: 1.2rem;
    font-weight: 600;
}

.app-analytics-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.app-analytics-table th,
.app-analytics-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.app-analytics-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.9rem;
}

.app-analytics-table td {
    color: #1d1d1f;
    font-size: 0.9rem;
}

.app-analytics-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.app-analytics-table tbody tr:hover {
    background-color: #f0f8ff;
}

.app-analytics-table .project-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.app-analytics-table .project-status.completed {
    background-color: #d4edda;
    color: #155724;
}

.app-analytics-table .project-status.processing {
    background-color: #fff3cd;
    color: #856404;
}

.app-analytics-table .project-status.failed {
    background-color: #f8d7da;
    color: #721c24;
}

.app-analytics-table .project-status.pending {
    background-color: #e2e3e5;
    color: #383d41;
}

.app-analytics-table .output-url {
    color: #007aff;
    text-decoration: none;
    word-break: break-all;
}

.app-analytics-table .output-url:hover {
    text-decoration: underline;
}

.app-analytics-table .thumbnail-container {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
}

.app-analytics-table .thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.app-analytics-table .thumbnail-container:hover .thumbnail {
    transform: scale(1.1);
}

.app-analytics-table .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    pointer-events: none;
    transition: background-color 0.2s ease;
}

.app-analytics-table .thumbnail-container:hover .play-button {
    background-color: rgba(0, 0, 0, 0.8);
}

.app-analytics-table .detail-data {
    font-size: 0.8rem;
    line-height: 1.3;
}

.app-analytics-table .detail-item {
    color: #495057;
    font-weight: 500;
}

.app-analytics-table .detail-json {
    font-size: 0.75rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 8px;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.app-analytics-table .request-data {
    font-size: 0.8rem;
    line-height: 1.4;
    max-width: 300px;
}

.app-analytics-table .request-key {
    color: #007aff;
    font-weight: 600;
    display: inline-block;
    min-width: 80px;
}

.app-analytics-table .request-value {
    color: #495057;
    word-break: break-word;
}

.app-analytics-table .input-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease;
    border: 1px solid #e9ecef;
    margin-bottom: 4px;
}

.app-analytics-table .input-image:last-child {
    margin-bottom: 0;
}

.app-analytics-table .input-image:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Image Modal Styles */
.image-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
}

.image-modal-content {
    position: relative;
    margin: auto;
    padding: 20px;
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-modal-close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #f1f1f1;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.3s ease;
}

.image-modal-close:hover {
    color: #bbb;
}

.image-modal-close:active {
    color: #fff;
}

#modal-image,
#modal-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

#modal-video {
    background-color: #000;
}

@media (max-width: 768px) {
    .image-modal-content {
        width: 95%;
        height: 95%;
        padding: 10px;
    }
    
    .image-modal-close {
        top: 5px;
        right: 15px;
        font-size: 28px;
    }
}

.app-analytics-table .prompt-text {
    color: #495057;
    word-break: break-word;
    max-width: 300px;
    display: block;
    line-height: 1.4;
}

.app-analytics-table .request-data {
    font-size: 0.8rem;
    line-height: 1.4;
    max-width: 400px;
    word-break: break-word;
}

.app-analytics-table .request-key {
    color: #007aff;
    font-weight: 600;
    display: inline-block;
    min-width: 80px;
}

.app-analytics-table .request-value {
    color: #495057;
    word-break: break-word;
}

.app-analytics-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.app-analytics-summary-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e9ecef;
    text-align: center;
}

.app-analytics-summary-card h4 {
    margin: 0 0 8px 0;
    color: #86868b;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-analytics-summary-card .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
}

.app-analytics-summary-card .value.success {
    color: #28a745;
}

.app-analytics-summary-card .value.warning {
    color: #ffc107;
}

.app-analytics-summary-card .value.error {
    color: #dc3545;
}

.app-analytics-summary-card .value.info {
    color: #007aff;
}

.app-analytics-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.pagination-info {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

.pagination-controls {
    display: flex;
    gap: 10px;
}

.pagination-btn {
    padding: 8px 16px;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pagination-btn:hover:not(:disabled) {
    background: #0056cc;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
}

.pagination-btn:disabled {
    background: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pagination-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.2);
}

@media (max-width: 768px) {
    .app-analytics-header {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px;
    }
    
    .app-analytics-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .app-selector {
        flex-direction: column;
        align-items: stretch;
    }
    
    .app-select {
        min-width: auto;
    }
    
    .app-date-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .app-date-input {
        min-width: auto;
    }
    
    .app-analytics-content {
        padding: 16px 20px;
    }
    
    .app-analytics-table {
        font-size: 0.8rem;
    }
    
    .app-analytics-table th,
    .app-analytics-table td {
        padding: 8px 12px;
    }
    
    .app-analytics-summary {
        grid-template-columns: 1fr;
    }
    
    .app-analytics-pagination {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    /* Filter styles for mobile */
    .app-analytics-filters {
        padding: 12px;
    }
    
    .filter-group {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .filter-select {
        min-width: auto;
        width: 100%;
    }
    
    .apply-filter-btn,
    .clear-filter-btn {
        width: 100%;
    }

    .pagination-controls {
        justify-content: center;
    }

    .pagination-btn {
        padding: 10px 20px;
        font-size: 1rem;
    }
}

/* Style Type Histogram Styles */
.style-type-histogram {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e9ecef;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.histogram-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f3f4;
    padding-bottom: 16px;
}

.histogram-header h4 {
    margin: 0;
    color: #1d1d1f;
    font-size: 1.1rem;
    font-weight: 600;
}

.histogram-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.histogram-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.histogram-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 200px;
    flex-shrink: 0;
}

.style-type {
    font-weight: 500;
    color: #1d1d1f;
    font-size: 0.9rem;
}

.style-count {
    background: #f8f9fa;
    color: #6c757d;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.histogram-bar-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    height: 24px;
}

.histogram-bar {
    height: 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    min-width: 4px;
}

.histogram-bar:hover {
    transform: scaleY(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.histogram-percentage {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    min-width: 45px;
    text-align: right;
}

@media (max-width: 768px) {
    .style-type-histogram {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .histogram-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .histogram-label {
        min-width: auto;
        justify-content: space-between;
    }
    
    .histogram-bar-container {
        height: 20px;
    }
    
    .histogram-bar {
        height: 16px;
    }
    
    .histogram-percentage {
        font-size: 0.8rem;
        min-width: 40px;
    }
}

/* Histogram Loading Styles */
.histogram-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    min-height: 120px;
}

.histogram-loading .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e9ecef;
    border-top: 3px solid #007aff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

.histogram-loading p {
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

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

/* Creative Analytics Controls */
.creative-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.creative-app-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.creative-app-selector label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
}

.creative-app-select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    color: #1d1d1f;
    min-width: 150px;
    cursor: pointer;
}

.creative-app-select:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.load-creative-analytics-btn {
    background: linear-gradient(135deg, #007aff, #5856d6);
    border: none;
    border-radius: 6px;
    color: white;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-creative-analytics-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.load-creative-analytics-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .creative-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .creative-app-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .creative-app-select {
        min-width: auto;
    }
}

/* Support Analytics Styles */
.support-analytics {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    overflow: hidden;
}

.support-analytics-header {
    padding: 24px 30px;
    border-bottom: 1px solid #e5e5e7;
}

.support-analytics-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.support-description {
    color: #6e6e73;
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.support-filters {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

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

.filter-group label {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.9rem;
    white-space: nowrap;
}

.support-select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    color: #1d1d1f;
    min-width: 120px;
    cursor: pointer;
}

.support-select:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.support-clear-btn {
    background: #f1f3f4;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #007aff;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.support-clear-btn:hover {
    background: #e8f0fe;
    border-color: #007aff;
}

.support-analytics-content {
    padding: 30px;
}

.support-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.support-metric-card {
    background: white;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.support-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.support-metric-card .metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.support-metric-card .metric-icon.ai-completed {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.support-metric-card .metric-icon.non-ai-completed {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.support-metric-card .metric-icon.total-tickets {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.support-metric-card .metric-icon.completion-rate {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.support-metric-card .metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 4px;
    line-height: 1;
}

.support-metric-card .metric-label {
    font-size: 0.85rem;
    color: #6e6e73;
    font-weight: 500;
}

.support-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.support-chart-container {
    background: white;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 12px;
    height: fit-content;
}

.support-chart-container h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
}

.support-chart-canvas {
    width: 100%;
    height: 180px !important;
    max-height: 180px !important;
}

.support-chart-stats {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e5e7;
}

.support-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.support-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px;
}

.support-stat-label {
    font-size: 0.75rem;
    color: #6e6e73;
    font-weight: 500;
    margin-bottom: 2px;
}

.support-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1d1d1f;
}

.support-stat-value.support-stat-ai {
    color: #10b981;
}

.support-stat-value.support-stat-manual {
    color: #f59e0b;
}

.support-stat-value.support-stat-avg {
    color: #8b5cf6;
}

/* Support chart loading state */
.support-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    color: #6e6e73;
    font-size: 0.9rem;
}

/* Support error state */
.support-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px;
    color: #dc2626;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Responsive support styles */
@media (max-width: 768px) {
    .support-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    
    .filter-group {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .support-select {
        min-width: auto;
    }
    
    .support-summary-cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }
    
    .support-metric-card {
        padding: 16px;
    }
    
    .support-analytics-header {
        padding: 20px;
    }
    
    .support-analytics-content {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .support-charts {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 16px;
    }
    
    .support-chart-container {
        padding: 10px;
    }
    
    .support-chart-canvas {
        height: 160px !important;
        max-height: 160px !important;
    }
    
    .support-chart-loading {
        height: 160px;
    }
    
    .support-stat-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .support-stat-label {
        font-size: 0.7rem;
    }
    
    .support-stat-value {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .support-summary-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .support-metric-card .metric-value {
        font-size: 1.5rem;
    }
    
    .support-charts {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 12px;
    }
    
    .support-chart-container {
        padding: 8px;
    }
    
    .support-chart-canvas {
        height: 140px !important;
        max-height: 140px !important;
    }
    
    .support-chart-loading {
        height: 140px;
    }
    
    .support-stat-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    
    .support-stat-label {
        font-size: 0.65rem;
    }
    
    .support-stat-value {
        font-size: 0.8rem;
    }
}

/* Chart button styling for Investment Analytics */
.chart-btn {
    background: linear-gradient(135deg, #007aff, #5ac8fa);
    border: none;
    border-radius: 6px;
    color: white;
    padding: 8px 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
    min-width: 40px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chart-btn:hover {
    background: linear-gradient(135deg, #0056b3, #4a9fd9);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 122, 255, 0.3);
}

.chart-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
}

.chart-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
}

/* Investment analytics specific styling */
.performance-table .chart-btn {
    font-size: 14px;
    padding: 6px 10px;
    height: 32px;
    min-width: 36px;
}

/* Backend Analytics Styles */
.backend-analytics {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.backend-analytics-header {
    border-bottom: 1px solid #e5e5e7;
    padding-bottom: 20px;
    margin-bottom: 24px;
}

.backend-analytics-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.backend-description {
    color: #86868b;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.backend-filters {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.backend-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.backend-filters label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1d1d1f;
}

.backend-select {
    padding: 8px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    color: #1d1d1f;
    min-width: 120px;
    cursor: pointer;
}

.backend-select:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.backend-clear-btn {
    background: #ff3b30;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.backend-clear-btn:hover {
    background: #d70015;
}

.backend-analytics-content {
    min-height: 400px;
}

.backend-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.backend-metric-card {
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.backend-metric-card .metric-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.backend-metric-card .metric-value {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.backend-metric-card .metric-label {
    font-size: 0.85rem;
    color: #86868b;
    font-weight: 500;
}

.backend-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.backend-chart-container {
    background: white;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 12px;
    height: fit-content;
}

.backend-chart-container h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
}

.backend-chart-canvas {
    width: 100%;
    height: 180px !important;
    max-height: 180px !important;
}

.backend-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    color: #86868b;
    font-size: 0.9rem;
}

.backend-error {
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    font-size: 0.9rem;
}

.backend-chart-stats {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e5e7;
}

.backend-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.backend-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    background: #f9f9fb;
    border-radius: 6px;
    border: 1px solid #e5e5e7;
}

.backend-stat-label {
    font-size: 0.75rem;
    color: #86868b;
    font-weight: 500;
    margin-bottom: 2px;
    text-align: center;
}

.backend-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
}

.backend-stat-total {
    color: #ff6b35;
}

.backend-stat-avg {
    color: #007aff;
}

.backend-stat-days {
    color: #34c759;
}

.backend-stat-period {
    color: #af52de;
}

/* Backend Detailed Analysis Styles */
.backend-detailed-analysis {
    border-top: 1px solid #e5e5e7;
    padding-top: 24px;
}

.backend-detailed-analysis h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.backend-detailed-analysis .section-description {
    font-size: 0.9rem;
    color: #86868b;
    margin-bottom: 20px;
}

.backend-detailed-filters {
    margin-bottom: 24px;
}

.backend-detailed-filters .filter-group {
    max-width: 400px;
}

.backend-detailed-filters .filter-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.backend-detailed-filters .backend-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1d1d1f;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.backend-detailed-filters .backend-select:hover {
    border-color: #007aff;
}

.backend-detailed-filters .backend-select:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.backend-detailed-chart {
    background: white;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 20px;
}

#backend-detailed-chart-canvas {
    width: 100%;
    height: 400px !important;
    max-height: 400px !important;
}

/* Responsive chart button styles */
@media (max-width: 768px) {
    .chart-btn {
        padding: 6px 8px;
        font-size: 12px;
        height: 28px;
        min-width: 32px;
    }
    
    .performance-table .chart-btn {
        padding: 4px 8px;
        height: 26px;
        min-width: 30px;
    }
    
    .backend-charts {
        grid-template-columns: 1fr;
    }
    
    .backend-chart-container {
        padding: 8px;
    }
    
    .backend-chart-canvas {
        height: 160px !important;
        max-height: 160px !important;
    }
    
    .backend-filters {
        flex-direction: column;
        gap: 10px;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .backend-stat-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .backend-stat-label {
        font-size: 0.7rem;
    }
    
    .backend-stat-value {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .chart-btn {
        padding: 4px 6px;
        font-size: 11px;
        height: 24px;
        min-width: 28px;
    }
    
    .performance-table .chart-btn {
        padding: 3px 6px;
        height: 22px;
        min-width: 26px;
    }
    
    .backend-stat-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    
    .backend-stat {
        padding: 4px;
    }
    
    .backend-stat-label {
        font-size: 0.65rem;
    }
    
    .backend-stat-value {
        font-size: 0.8rem;
    }
}

/* Chart Toggle Buttons */
.support-chart-toggle {
    display: flex;
    gap: 2px;
    background: #f0f0f0;
    border-radius: 6px;
    padding: 2px;
}

.chart-toggle-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
}

.chart-toggle-btn:hover {
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
}

.chart-toggle-btn.active {
    background: #007aff;
    color: white;
    font-weight: 600;
}

/* Cache Status Indicators */
.cache-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    margin-left: 8px;
    vertical-align: middle;
}

.cache-indicator.cache-live {
    background: rgba(52, 199, 89, 0.1);
    color: #34c759;
    border: 1px solid rgba(52, 199, 89, 0.2);
}

.cache-indicator.cache-cached {
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
    border: 1px solid rgba(0, 122, 255, 0.2);
}

.cache-indicator .cache-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.cache-tooltip {
    position: relative;
    cursor: help;
}

.cache-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 1000;
}

.cache-tooltip:hover::after {
    opacity: 1;
}

/* Investment Analytics Cache Status */
.investment-header {
    position: relative;
}

.investment-cache-status {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.investment-cache-status .cache-indicator {
    font-size: 0.7rem;
    padding: 1px 6px;
    margin-left: 0;
}

/* Progress bar cache indicator */
.investment-progress-container {
    position: relative;
}

.investment-progress-cache {
    position: absolute;
    right: 0;
    top: -2px;
    font-size: 0.7rem;
    color: #86868b;
}

/* ===== FUNNEL ANALYTICS STYLES ===== */
.funnel-analytics {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.funnel-analytics-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.funnel-analytics-header h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 5px;
}

.funnel-description {
    color: #86868b;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Funnel Sub-tabs (By Funnel / By Campaign) */
.funnel-sub-tabs {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.funnel-sub-tab {
    padding: 8px 16px;
    border: 1px solid #e5e5e5;
    background: #f5f5f7;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.2s ease;
}

.funnel-sub-tab:hover {
    background: #e5e5e5;
}

.funnel-sub-tab.active {
    background: #007aff;
    color: white;
    border-color: #007aff;
}

.funnel-view-container {
    margin-top: 20px;
}

.funnel-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.funnel-load-btn {
    background: #007aff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.funnel-load-btn:hover {
    background: #0056cc;
    transform: translateY(-1px);
}

.funnel-load-btn:disabled {
    background: #86868b;
    cursor: not-allowed;
    transform: none;
}

.funnel-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.funnel-progress-text {
    font-size: 0.85rem;
    color: #86868b;
    min-width: 80px;
}

.progress-bar {
    width: 200px;
    height: 4px;
    background: #e5e5e5;
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #007aff;
    width: 0%;
    transition: width 0.3s ease;
}

.funnel-analytics-content {
    margin-top: 20px;
}

.funnel-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 25px;
}

/* Funnel Filters */
.funnel-filters {
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.funnel-filters .filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e7;
}

.funnel-filters .filters-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.funnel-filters .filters-row {
    display: flex;
    gap: 20px;
    align-items: end;
    flex-wrap: wrap;
}

.funnel-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 140px;
}

.funnel-filters .filter-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.funnel-filters .filter-select {
    padding: 8px 12px;
    border: 1px solid #d1d1d6;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    color: #1d1d1f;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.funnel-filters .filter-select:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.funnel-filters .apply-filters-btn {
    background: #007aff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    height: fit-content;
}

.funnel-filters .apply-filters-btn:hover {
    background: #0056cc;
    transform: translateY(-1px);
}

.funnel-filters .reset-filters-btn {
    background: transparent;
    color: #86868b;
    border: 1px solid #d1d1d6;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.funnel-filters .reset-filters-btn:hover {
    background: #f0f0f0;
    color: #1d1d1f;
}

/* Funnel Grouping Toggle */
.funnel-grouping-toggle {
    display: flex;
    gap: 0;
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.funnel-grouping-toggle .grouping-btn {
    padding: 8px 16px;
    border: none;
    background: white;
    color: #86868b;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid #d1d1d6;
}

.funnel-grouping-toggle .grouping-btn:last-child {
    border-right: none;
}

.funnel-grouping-toggle .grouping-btn:hover:not(.active) {
    background: #f5f5f7;
    color: #1d1d1f;
}

.funnel-grouping-toggle .grouping-btn.active {
    background: #007aff;
    color: white;
}

/* AI Insights Toggle Switch */
.ai-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.ai-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ai-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3a3a3c;
    transition: 0.3s;
    border-radius: 24px;
}

.ai-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.ai-toggle-switch input:checked + .ai-toggle-slider {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.ai-toggle-switch input:checked + .ai-toggle-slider:before {
    transform: translateX(20px);
}

.ai-toggle-label {
    font-size: 0.85rem;
    color: #86868b;
    min-width: 50px;
}

/* Hide AI suggestion rows when toggle is off */
.funnel-ai-hidden .funnel-ai-summary-row,
.funnel-ai-hidden .app-ask-ai-btn {
    display: none !important;
}

.funnel-filters .ask-ai-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    height: fit-content;
    display: flex;
    align-items: center;
    gap: 6px;
}

.funnel-filters .ask-ai-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.funnel-filters .ask-ai-btn svg {
    width: 14px;
    height: 14px;
}

/* Ask AI button in app header rows */
.app-ask-ai-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    vertical-align: middle;
}

.app-ask-ai-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.app-ask-ai-btn svg {
    width: 12px;
    height: 12px;
}

.funnel-metric-card {
    background: #f9f9fb;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e5e5e7;
}

.funnel-metric-card h3 {
    font-size: 0.8rem;
    color: #86868b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.funnel-metric-card .metric-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1d1d1f;
}

.funnel-data-container {
    margin-top: 20px;
    overflow-x: auto;
    max-width: 100%;
}

.funnel-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.funnel-table th {
    background: #f9f9fb;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e5e5e7;
}

.funnel-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
    color: #1d1d1f;
}

.funnel-table tbody tr:hover {
    background: #f9f9fb;
}

.funnel-table tbody tr.app-group-header:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Per-app column headers row */
.funnel-table tbody tr.app-column-headers {
    background: #f8f9fa;
    border-bottom: 2px solid #e5e5e7;
}

.funnel-table tbody tr.app-column-headers:hover {
    background: #f8f9fa;
}

.funnel-table tbody tr.app-column-headers th {
    padding: 10px 15px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: right;
    border-bottom: none;
}

.funnel-table tbody tr.app-column-headers th:first-child {
    text-align: left;
}

.funnel-table tbody tr:last-child td {
    border-bottom: none;
}

.funnel-table .value-cell {
    text-align: right;
    font-weight: 500;
    color: #007aff;
}

.funnel-table .date-cell {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Courier, monospace;
    font-size: 0.85rem;
    color: #86868b;
}

.funnel-table .url-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.funnel-table .link-type-cell {
    font-weight: 500;
    color: #34c759;
}

/* Funnel-based table specific styles */
.funnel-table .funnel-name-header {
    background: #007aff;
    color: white;
    font-weight: 600;
    position: sticky;
    left: 0;
    z-index: 3;
}

.funnel-table .link-header {
    background: #f0f8ff;
    color: #007aff;
    font-weight: 500;
    text-align: center;
    min-width: 100px;
}

.funnel-table .funnel-name-cell {
    background: #fafafa;
    font-weight: 500;
    position: sticky;
    left: 0;
    z-index: 2;
    max-width: 250px;
    cursor: help;
    padding: 8px 12px;
}

.funnel-name-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.funnel-name-container .app-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #007aff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #e7f3ff;
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
}

.funnel-name-container .funnel-url {
    font-size: 0.85rem;
    color: #1d1d1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.funnel-table .value-cell.has-value {
    background: #f0f9ff;
    color: #007aff;
    font-weight: 500;
    text-align: center;
}

.funnel-table .value-cell.no-value {
    background: #f9f9f9;
    color: #86868b;
    text-align: center;
    font-style: italic;
}

/* Weekly data visualization styles */
.funnel-table .date-header {
    background: #34c759;
    color: white;
    font-weight: 600;
    text-align: center;
    min-width: 80px;
}

.funnel-table .date-cell {
    font-weight: 600;
    background-color: #f5f5f5;
    white-space: nowrap;
    text-align: center;
    border-right: 2px solid #e5e5e7;
}

.date-separator td {
    height: 2px;
    background-color: #ddd;
    padding: 0;
}

#funnel-table-container {
    max-height: 600px;
    overflow-y: auto;
}

/* Campaign Funnel Analytics Styles */
.campaign-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.campaign-name-cell .expand-btn {
    width: 24px;
    height: 24px;
    border: 1px solid #e5e5e5;
    background: #f5f5f7;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.campaign-name-cell .expand-btn:hover {
    background: #e5e5e5;
}

.campaign-name-cell .campaign-name {
    font-weight: 500;
    color: #1d1d1f;
    white-space: normal;
    word-break: break-word;
}

/* Ensure campaign column in funnel table doesn't truncate */
#campaign-funnel-table th:first-child,
#campaign-funnel-table td:first-child {
    white-space: normal;
    min-width: 300px;
}

.campaign-name-cell .app-badge {
    background: #007aff;
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.campaign-funnel-details td {
    padding: 0 !important;
    background: #f9f9f9;
}

.funnel-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.funnel-breakdown-table th,
.funnel-breakdown-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
}

.funnel-breakdown-table th {
    background: #f5f5f7;
    font-weight: 600;
    font-size: 0.85rem;
    color: #86868b;
}

.funnel-breakdown-table td.funnel-name {
    text-align: left;
    font-weight: 500;
    color: #1d1d1f;
    padding-left: 40px;
}

.funnel-breakdown-table td.date-cell {
    text-align: left;
    font-weight: 500;
    color: #1d1d1f;
    padding-left: 40px;
    white-space: nowrap;
}

.daily-breakdown-table tbody tr:hover {
    background: #f0f4ff;
}

/* Nested funnel rows within campaign expansion */
.funnel-list-table {
    background: #fafafa;
}

.funnel-row {
    background: #ffffff;
    transition: background-color 0.2s ease;
}

.funnel-row:hover {
    background: #f0f4ff;
}

.funnel-name-cell-nested {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left !important;
    padding-left: 24px !important;
}

.funnel-name-cell-nested .funnel-expand-btn {
    width: 22px;
    height: 22px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6b7280;
}

.funnel-name-cell-nested .funnel-expand-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.funnel-name-cell-nested .funnel-alias {
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}

/* Daily breakdown nested within funnel rows */
.funnel-daily-details td {
    padding: 0 !important;
    background: #f3f4f6;
}

.funnel-daily-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: #f9fafb;
}

.funnel-daily-table th {
    background: #e5e7eb;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #6b7280;
    text-align: center;
    border-bottom: 1px solid #d1d5db;
}

.funnel-daily-table td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.85rem;
}

.funnel-daily-table td.date-cell {
    text-align: left;
    padding-left: 60px !important;
    font-weight: 500;
    color: #4b5563;
    white-space: nowrap;
}

.funnel-daily-table tbody tr:hover {
    background: #e0e7ff;
}

/* Campaign count badge in funnel view */
.campaign-count-badge {
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    margin-left: 8px;
}

/* Campaigns breakdown in funnel view */
.funnel-campaigns-details td {
    padding: 0 !important;
    background: #f3f4f6;
}

.campaigns-list-table {
    background: #f9fafb;
}

.campaign-sub-row {
    background: #ffffff;
}

.campaign-sub-row:hover {
    background: #f0f4ff;
}

.campaign-name-sub {
    text-align: left !important;
    padding-left: 60px !important;
    font-weight: 500;
    color: #374151;
    white-space: normal;
    word-break: break-word;
}

/* Funnel details container (for grouped by funnel view) */
.funnel-details-container {
    padding: 16px;
    background: #f9fafb;
}

.funnel-detail-section {
    margin-bottom: 20px;
}

.funnel-detail-section:last-child {
    margin-bottom: 0;
}

.funnel-detail-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.funnel-details-container .funnel-daily-table td.date-cell {
    padding-left: 16px !important;
}

/* Unmapped orders styles */
.unmapped-orders-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e5e5e7;
}

.unmapped-app-section {
    margin-bottom: 20px;
}

.unmapped-app-section h4 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: #1d1d1f;
}

.unmapped-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.unmapped-orders-table th,
.unmapped-orders-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e5e7;
}

.unmapped-orders-table th {
    background: #f5f5f7;
    font-weight: 600;
    color: #86868b;
}

.more-info {
    color: #86868b;
    font-size: 0.85rem;
    margin-top: 8px;
    font-style: italic;
}

.funnel-breakdown-table .value-cell.has-value {
    background: #f0f9ff;
    color: #007aff;
    font-weight: 500;
}

.funnel-breakdown-table .value-cell.no-value {
    color: #86868b;
    font-style: italic;
}

#campaign-funnel-table .no-data {
    text-align: center;
    color: #86868b;
    padding: 40px 20px;
    font-style: italic;
}

/* App group header styles for campaign funnel table */
.app-group-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.app-group-cell {
    padding: 12px 16px !important;
    border-bottom: none !important;
}

.app-group-name {
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    margin-right: 12px;
}

.app-group-count {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

/* Filter input styles */
.funnel-filters .filter-input {
    padding: 8px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    transition: border-color 0.2s ease;
}

.funnel-filters .filter-input:focus {
    outline: none;
    border-color: #007aff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .funnel-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .funnel-progress {
        justify-content: center;
    }
    
    .progress-bar {
        width: 150px;
    }
    
    .funnel-summary-cards {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .funnel-table {
        font-size: 0.8rem;
    }
    
    .funnel-table th,
    .funnel-table td {
        padding: 8px 10px;
    }
    
    .funnel-table .url-cell {
        max-width: 200px;
    }
}

/* ===== UNMAPPED ORDERS STYLES ===== */
.unmapped-orders-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #e5e5e7;
}

.unmapped-orders-section .section-header {
    margin-bottom: 20px;
}

.unmapped-orders-section .section-header h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 5px;
}

.unmapped-orders-section .section-description {
    color: #86868b;
    font-size: 0.9rem;
}

.unmapped-orders-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.unmapped-orders-date-section {
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 15px;
}

.unmapped-orders-date-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e7;
}

.unmapped-orders-date-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.unmapped-orders-count {
    background: #007aff;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.unmapped-orders-table-scroll {
    overflow-x: auto;
}

.unmapped-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.unmapped-orders-table thead {
    background: white;
    border-bottom: 2px solid #e5e5e7;
}

.unmapped-orders-table th {
    text-align: left;
    padding: 12px;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
}

.unmapped-orders-table tbody tr {
    border-bottom: 1px solid #e5e5e7;
    transition: background-color 0.2s ease;
}

.unmapped-orders-table tbody tr:hover {
    background: white;
}

.unmapped-orders-table td {
    padding: 12px;
    color: #1d1d1f;
}

.unmapped-orders-table .order-id,
.unmapped-orders-table .customer-id {
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    font-size: 0.85rem;
    background: #f0f0f2;
    padding: 2px 6px;
    border-radius: 4px;
    color: #6e6e73;
    word-break: break-all;
    max-width: 400px;
}

.unmapped-orders-table .product-name {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unmapped-orders-table .amount {
    font-weight: 600;
    color: #007aff;
}

.unmapped-orders-container .no-data {
    text-align: center;
    padding: 40px 20px;
    color: #86868b;
    font-size: 0.95rem;
}

/* ===== FRAUD ANALYTICS STYLES ===== */
.fraud-analytics {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

/* Fraud Analytics Filters */
.fraud-filters {
    display: flex;
    gap: 20px;
    padding: 15px 0;
    flex-wrap: wrap;
    align-items: flex-end;
    border-top: 1px solid #e5e5e7;
    margin-top: 15px;
}

.fraud-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fraud-filter-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #86868b;
}

.fraud-filter-select {
    padding: 8px 12px;
    border: 1px solid #d1d1d6;
    border-radius: 6px;
    background: white;
    color: #1d1d1f;
    font-size: 0.9rem;
    min-width: 150px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fraud-filter-select:hover {
    border-color: #007aff;
}

.fraud-filter-select:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.fraud-apply-btn {
    padding: 8px 20px;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fraud-apply-btn:hover {
    background: #0056b3;
}

.fraud-apply-btn:disabled {
    background: #86868b;
    cursor: not-allowed;
}

/* Ratio highlight styles */
.ratio-cell {
    font-weight: 600;
}

.ratio-low {
    color: #28a745;
}

.ratio-medium {
    color: #ffc107;
}

.ratio-high {
    color: #dc3545;
}

/* Fraud charts grid - one row per app */
.fraud-charts-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fraud-app-chart-row {
    background: var(--card-background, #fff);
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.fraud-app-chart-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1d1d1f);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #e5e5e7);
}

.fraud-app-chart-container {
    height: 200px;
    position: relative;
}

.fraud-app-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.fraud-ratio-table-container {
    margin-top: 12px;
    overflow-x: auto;
}

.fraud-ratio-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.fraud-ratio-table th,
.fraud-ratio-table td {
    padding: 6px 10px;
    text-align: center;
    border-bottom: 1px solid var(--border-color, #e5e5e7);
}

.fraud-ratio-table th {
    font-weight: 500;
    color: var(--text-secondary, #86868b);
    font-size: 0.75rem;
}

.fraud-ratio-table .ratio-label-col {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary, #1d1d1f);
    white-space: nowrap;
    width: 80px;
}

.fraud-ratio-table .ratio-value {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.75rem;
}

.fraud-analytics-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.fraud-analytics-header h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 5px;
}

.fraud-description {
    color: #86868b;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.fraud-date-controls {
    display: flex;
    gap: 10px;
    padding: 15px 0;
    flex-wrap: wrap;
}

.fraud-date-btn {
    padding: 10px 20px;
    border: 1px solid #d1d1d6;
    background: white;
    color: #1d1d1f;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 110px;
    text-align: center;
}

.fraud-date-btn:hover {
    border-color: #007aff;
    background: #f9f9fb;
}

.fraud-date-btn.active {
    background: #007aff;
    color: white;
    border-color: #007aff;
}

.fraud-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.fraud-summary-cards .summary-card {
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 20px;
}

.fraud-summary-cards .summary-card-header {
    font-size: 0.85rem;
    font-weight: 500;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.fraud-summary-cards .summary-card-value {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1d1d1f;
}

.fraud-summary-cards .trend-up {
    color: #ff3b30;
}

.fraud-summary-cards .trend-down {
    color: #34c759;
}

.fraud-summary-cards .trend-neutral {
    color: #86868b;
}

.fraud-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.fraud-chart-section {
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 20px;
}

.fraud-chart-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 15px;
}

.fraud-table-container {
    margin-top: 30px;
}

.fraud-table-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 15px;
}

.fraud-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.fraud-table thead {
    background: #f5f5f7;
}

.fraud-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d1d1f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e5e7;
}

.fraud-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f7;
    font-size: 0.9rem;
    color: #1d1d1f;
}

.fraud-table tbody tr:hover {
    background: #f9f9fb;
}

.fraud-table .count-cell {
    text-align: center;
    font-weight: 600;
}

.fraud-table .amount-cell {
    text-align: right;
    font-weight: 600;
    color: #ff3b30;
}

.fraud-table .detail-cell {
    font-size: 0.85rem;
    color: #86868b;
}

.fraud-app-breakdown {
    margin-top: 30px;
    margin-bottom: 30px;
}

.fraud-app-breakdown-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 15px;
}

.fraud-app-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.fraud-app-card {
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 20px;
}

.fraud-app-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e7;
}

.fraud-app-card .app-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.fraud-app-card .app-stat-label {
    font-size: 0.85rem;
    color: #86868b;
}

.fraud-app-card .app-stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
}

.fraud-app-card .app-stat-value.fraud-amount {
    color: #ff3b30;
}

.fraud-app-card .app-error {
    color: #ff3b30;
    font-size: 0.85rem;
    font-style: italic;
}

/* ===== SUBSCRIPTION RETENTION ANALYTICS STYLES ===== */
.retention-analytics {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.retention-analytics-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.retention-analytics-header h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 5px;
}

.retention-description {
    color: #86868b;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.retention-filters {
    display: flex;
    align-items: end;
    gap: 20px;
    flex-wrap: wrap;
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 20px;
}

.retention-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 140px;
}

.retention-filters .filter-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.retention-date-input {
    padding: 8px 12px;
    border: 1px solid #d1d1d6;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    color: #1d1d1f;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.retention-date-input:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.retention-select {
    padding: 8px 12px;
    border: 1px solid #d1d1d6;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    color: #1d1d1f;
    cursor: pointer;
    transition: border-color 0.2s ease;
    min-width: 150px;
}

.retention-select:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.retention-checkbox {
    margin-right: 8px;
    transform: scale(1.1);
}

.retention-load-btn {
    background: #007aff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    height: fit-content;
}

.retention-load-btn:hover {
    background: #0056cc;
    transform: translateY(-1px);
}

.retention-load-btn:disabled {
    background: #86868b;
    cursor: not-allowed;
    transform: none;
}

.retention-analytics-content {
    margin-top: 20px;
}

.retention-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 25px;
}

.retention-metric-card {
    background: #f9f9fb;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e5e5e7;
}

.retention-metric-card h3 {
    font-size: 0.8rem;
    color: #86868b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.retention-metric-card .metric-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1d1d1f;
}

.retention-cohort-tables {
    margin-top: 20px;
}

.retention-cohort-section {
    background: white;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.retention-cohort-header {
    background: #f9f9fb;
    padding: 15px 20px;
    border-bottom: 1px solid #e5e5e7;
}

.retention-cohort-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
}

.retention-cohort-table-container {
    overflow-x: auto;
    max-width: 100%;
}

.retention-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 0.85rem;
}

.retention-table th {
    background: #f8f9fa;
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    color: #495057;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #dee2e6;
    white-space: nowrap;
}

.retention-table td {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    text-align: center;
    color: #1d1d1f;
}

.retention-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.retention-table tbody tr:hover {
    background-color: #e3f2fd;
}

.retention-table .cohort-date-cell {
    background: #e8f4fd;
    font-weight: 600;
    color: #007aff;
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;
}

.retention-table .term-number-cell {
    font-weight: 500;
    color: #34c759;
}

.retention-table .retention-rate-cell {
    font-weight: 600;
    color: #ff6b35;
}

.retention-table .revenue-cell {
    font-weight: 500;
    color: #007aff;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Courier, monospace;
}

.retention-table .count-cell {
    font-weight: 500;
    color: #34c759;
}

.retention-table .high-retention {
    background-color: #d4edda;
    color: #155724;
    font-weight: 600;
}

.retention-table .medium-retention {
    background-color: #fff3cd;
    color: #856404;
    font-weight: 600;
}

.retention-table .low-retention {
    background-color: #f8d7da;
    color: #721c24;
    font-weight: 600;
}

.retention-table .very-low-retention {
    background-color: #f5c6cb;
    color: #721c24;
    font-weight: 600;
}

.retention-total-row {
    background-color: #f0f4f8;
    border-top: 2px solid #334155;
}

.retention-total-row td {
    font-weight: 600;
    padding: 10px 8px;
}

.retention-total-cell {
    background-color: #e2e8f0;
    border: 1px solid #cbd5e1;
}

.retention-table .no-data {
    background-color: #f8f9fa;
    color: #6c757d;
    font-style: italic;
}

.retention-cell-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.retention-percentage {
    font-weight: 600;
    font-size: 14px;
}

.retention-revenue {
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    opacity: 0.9;
}

.retention-table .high-retention .retention-revenue {
    color: #0a4119;
    opacity: 0.8;
}

.retention-table .medium-retention .retention-revenue {
    color: #664d03;
    opacity: 0.8;
}

.retention-table .low-retention .retention-revenue,
.retention-table .very-low-retention .retention-revenue {
    color: #58151c;
    opacity: 0.8;
}

.retention-product-section {
    margin-bottom: 30px;
}

.retention-product-header {
    background: linear-gradient(135deg, #007aff, #5ac8fa);
    color: white;
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.retention-product-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .retention-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .retention-filters .filter-group {
        min-width: auto;
    }

    .retention-select {
        min-width: auto;
    }

    .retention-summary-cards {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }

    .retention-table {
        font-size: 0.75rem;
    }

    .retention-table th,
    .retention-table td {
        padding: 6px 8px;
    }

    .retention-cohort-header {
        padding: 12px 15px;
    }

    .retention-analytics {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .retention-summary-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .retention-table {
        font-size: 0.7rem;
    }

    .retention-table th,
    .retention-table td {
        padding: 4px 6px;
    }

    .retention-cohort-header {
        padding: 10px 12px;
    }

    .retention-analytics {
        padding: 12px;
    }
}
/* ===== PROFIT ESTIMATION STYLES ===== */
.profit-estimation {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.profit-estimation-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.profit-estimation-header h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 5px;
}

.profit-description {
    color: #86868b;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.profit-inputs-container {
    display: grid;
    gap: 30px;
    margin-bottom: 30px;
}

.profit-app-inputs {
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 20px;
}

.profit-app-inputs h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 15px;
}

.profit-input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.profit-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.profit-input-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profit-input {
    padding: 8px 12px;
    border: 1px solid #d1d1d6;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    color: #1d1d1f;
    transition: border-color 0.2s ease;
}

.profit-input:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.profit-calculate-section {
    text-align: center;
    margin-bottom: 30px;
}

.profit-calculate-btn {
    background: #007aff;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profit-calculate-btn:hover {
    background: #0056cc;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.profit-results-container {
    display: grid;
    gap: 30px;
}

.profit-summary-section {
    background: #f0f9ff;
    border: 2px solid #007aff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;
}

.profit-summary-section h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #007aff;
    margin-bottom: 15px;
}

.profit-app-section {
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 20px;
}

.profit-app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.profit-app-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.profit-app-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 15px;
}

.profit-table-container {
    overflow-x: auto;
}

.profit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    background: white;
}

.profit-table th,
.profit-table td {
    padding: 8px 6px;
    text-align: left;
    border-bottom: 1px solid #f1f3f4;
}

.profit-table th {
    background-color: #fafbfc;
    font-weight: 700;
    color: #495057;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.profit-table td {
    font-size: 0.8rem;
    vertical-align: middle;
}

.profit-table tr:hover {
    background-color: #f8f9fa;
}

.profit-table td:first-child {
    font-weight: 500;
}

.profit-table td:not(:first-child) {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.profit-table .spend-cell {
    color: #ff3b30;
}

.profit-table .revenue-cell {
    color: #34c759;
}

/* Accumulated Toggle Styles */
.accumulated-toggle-container {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.accumulated-toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.accumulated-toggle-checkbox {
    width: 40px;
    height: 20px;
    appearance: none;
    background: #d1d1d6;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-right: 10px;
}

.accumulated-toggle-checkbox:checked {
    background: #34c759;
}

.accumulated-toggle-checkbox::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
}

.accumulated-toggle-checkbox:checked::before {
    transform: translateX(20px);
}

.accumulated-toggle-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1d1d1f;
}

/* ===== A/B ANALYTICS STYLES ===== */
.ab-analytics {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.ab-analytics-header {
    margin-bottom: 20px;
}

.ab-analytics-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.ab-description {
    color: #86868b;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.ab-date-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.ab-date-controls label {
    font-weight: 500;
    color: #1d1d1f;
    font-size: 0.9rem;
}

.ab-date-btn {
    padding: 8px 16px;
    border: 1px solid #d2d2d7;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.ab-date-btn:hover {
    background: #f5f5f7;
}

.ab-date-btn.active {
    background: #007aff;
    color: white;
    border-color: #007aff;
}

.ab-analytics-content {
    margin-top: 20px;
}

.ab-variants-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.ab-variant-card {
    background: #f5f5f7;
    border-radius: 8px;
    padding: 20px;
    position: relative;
}

.ab-variant-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ab-variant-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
}

.ab-variant-remove-btn {
    background: transparent;
    border: none;
    color: #ff3b30;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.ab-variant-remove-btn:hover {
    background: rgba(255, 59, 48, 0.1);
}

.ab-variant-selectors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.ab-selector-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ab-selector-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1d1d1f;
}

.ab-selector-group select {
    padding: 8px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.ab-selector-group select:hover {
    border-color: #007aff;
}

.ab-selector-group select:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.ab-selector-group select:disabled {
    background: #f5f5f7;
    cursor: not-allowed;
    opacity: 0.6;
}

.ab-add-variant-section {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.ab-add-variant-btn {
    padding: 10px 20px;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ab-add-variant-btn:hover {
    background: #0051d5;
}

.ab-add-variant-btn:disabled {
    background: #d2d2d7;
    cursor: not-allowed;
}

.ab-variant-limit-msg {
    color: #86868b;
    font-size: 0.85rem;
}

.ab-compare-section {
    text-align: center;
    margin: 30px 0;
}

.ab-compare-btn {
    padding: 12px 40px;
    background: #34c759;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ab-compare-btn:hover {
    background: #28a745;
}

.ab-compare-btn:disabled {
    background: #d2d2d7;
    cursor: not-allowed;
}

.ab-results-container {
    margin-top: 30px;
}

.ab-results-content {
    background: #f5f5f7;
    border-radius: 8px;
    padding: 20px;
}

@media (max-width: 768px) {
    .ab-variant-selectors {
        grid-template-columns: 1fr;
    }

    .ab-date-controls {
        flex-wrap: wrap;
    }
}

/* ==================== Reports Tab Styles ==================== */

.reports-analytics {
    padding: 20px;
}

.reports-tabs,
.reports-sub-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.reports-tab-btn {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.reports-tab-btn:hover {
    color: #1976d2;
    background: #f5f5f5;
}

.reports-tab-btn.active {
    color: #1976d2;
    border-bottom-color: #1976d2;
    font-weight: 600;
}

.reports-tab-content {
    display: block;
}

/* Cancellations View Buttons */
.cancellations-view-tabs {
    display: flex;
    gap: 8px;
}

.cancellations-view-btn {
    padding: 8px 16px;
    background: #f5f5f5;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.cancellations-view-btn:hover {
    background: #e8e8e8;
    color: #333;
}

.cancellations-view-btn.active {
    background: #1890ff;
    border-color: #1890ff;
    color: white;
}

/* ==================== Diagnostic Tab Styles ==================== */

.diagnostic-analytics {
    padding: 20px;
}

.diagnostic-sub-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.diagnostic-tab-btn {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.diagnostic-tab-btn:hover {
    color: #1976d2;
    background: #f5f5f5;
}

.diagnostic-tab-btn.active {
    color: #1976d2;
    border-bottom-color: #1976d2;
    font-weight: 600;
}

.diagnostic-tab-content {
    display: block;
}

.reports-controls {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* LTV Report Styles */
.ltv-filters-inline {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ltv-filters-inline .filter-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    min-width: 150px;
}

.ltv-report-summary {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.ltv-app-section {
    margin-bottom: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.ltv-app-header {
    font-size: 18px;
    font-weight: 600;
    color: #1976d2;
    padding: 15px 20px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%);
    margin: 0;
    border-bottom: 2px solid #1976d2;
}

.ltv-product-section {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.ltv-product-section:last-child {
    border-bottom: none;
}

.ltv-product-header {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
    padding: 8px 12px;
    background: #f5f5f5;
    border-left: 3px solid #8b5cf6;
    border-radius: 0 4px 4px 0;
}

.ltv-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ltv-report-table th {
    text-align: left;
    padding: 10px 12px;
    background: #fafafa;
    border-bottom: 2px solid #ddd;
    font-weight: 600;
    color: #555;
}

.ltv-report-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
}

.ltv-report-table tr:hover {
    background: #f8f9fa;
}

.ltv-report-table .ltv-value {
    font-weight: 600;
    color: #2e7d32;
}

.ltv-report-table .ltv-notes {
    color: #888;
    font-size: 12px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ltv-report-table .ltv-breakdown {
    font-size: 12px;
    white-space: nowrap;
}

.ltv-report-table .ltv-default-row {
    background: #fff8e1;
}

.ltv-report-table .ltv-default-row:hover {
    background: #ffecb3;
}

.ltv-report-results .no-data {
    padding: 40px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* Campaign Health & Anomaly Detection Styles */
.campaign-health-analytics {
    padding: 20px;
}

.health-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.health-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.health-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.health-card-title {
    font-size: 14px;
    color: #8c8c8c;
    margin-bottom: 8px;
}

.health-card-value {
    font-size: 32px;
    font-weight: bold;
    color: #1890ff;
}

.health-card.critical .health-card-value {
    color: #ff4d4f;
}

.health-card.high .health-card-value {
    color: #ff7a45;
}

.health-card.warning .health-card-value {
    color: #faad14;
}

.health-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#anomalies-table {
    width: 100%;
    border-collapse: collapse;
}

#anomalies-table th {
    background: #fafafa;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e8e8e8;
}

#anomalies-table td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}

#anomalies-table tr:hover {
    background: #fafafa;
}

#anomalies-table tbody tr:last-child td {
    border-bottom: none;
}

@media (max-width: 768px) {
    .health-summary-cards {
        grid-template-columns: 1fr 1fr;
    }
    
    .health-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .health-filters select,
    .health-filters button {
        width: 100%;
    }
}

/* Campaign ROI Analytics Styles */
.campaign-roi-analytics {
    padding: 20px;
}

.campaign-roi-header {
    margin-bottom: 24px;
}

.campaign-roi-header h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
    color: #262626;
}

.header-subtitle {
    font-size: 14px;
    color: #8c8c8c;
    margin: 0;
}

.campaign-roi-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.summary-label {
    font-size: 14px;
    color: #8c8c8c;
    margin-bottom: 8px;
}

.summary-value {
    font-size: 32px;
    font-weight: bold;
    color: #1890ff;
}

.campaign-roi-filters {
    background: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

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

.filter-group label {
    font-size: 14px;
    color: #595959;
}

.filter-select {
    padding: 6px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    min-width: 150px;
}

.refresh-btn {
    padding: 6px 16px;
    background: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.refresh-btn:hover {
    background: #40a9ff;
}

.campaign-roi-table-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.campaign-roi-table-container h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: #262626;
}

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

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

.data-table th {
    background: #fafafa;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e8e8e8;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    background: #f0f0f0;
}

.data-table th.numeric {
    text-align: right;
}

.data-table th.sort-asc::after {
    content: " ↑";
    color: #1890ff;
}

.data-table th.sort-desc::after {
    content: " ↓";
    color: #1890ff;
}

.data-table td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.data-table td.numeric {
    text-align: right;
}

.data-table tr:hover {
    background: #fafafa;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.loading-cell,
.error-cell {
    text-align: center !important;
    padding: 2rem !important;
    color: #8c8c8c;
}

.error-cell {
    color: #ff4d4f;
}

.app-tag {
    background: #e6f7ff;
    color: #1890ff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.product-count-tag {
    background: #f9f0ff;
    color: #722ed1;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

@media (max-width: 768px) {
    .campaign-roi-summary {
        grid-template-columns: 1fr 1fr;
    }
    
    .summary-value {
        font-size: 24px;
    }
    
    .campaign-roi-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-select,
    .refresh-btn {
        width: 100%;
    }
}

/* ==========================================
   App Open Rates Styles
   ========================================== */
.app-open-rates {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.app-open-rates-header {
    border-bottom: 1px solid #e5e5e7;
    padding-bottom: 20px;
    margin-bottom: 24px;
}

.app-open-rates-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.app-open-rates-description {
    color: #86868b;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.app-open-rates-filters {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.app-open-rates-filters .filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-open-rates-filters label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1d1d1f;
}

.app-open-rates-period-buttons {
    display: flex;
    gap: 8px;
}

.app-open-rates-period-buttons .period-btn {
    padding: 8px 16px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    background: white;
    color: #1d1d1f;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.app-open-rates-period-buttons .period-btn:hover {
    background: #f5f5f7;
}

.app-open-rates-period-buttons .period-btn.active {
    background: #007aff;
    color: white;
    border-color: #007aff;
}

.app-open-rates-content {
    min-height: 400px;
}

.app-open-rates-summary {
    margin-bottom: 30px;
}

.app-open-rates-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.app-open-rates-table th,
.app-open-rates-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #e5e5e7;
}

.app-open-rates-table th {
    background: #f9f9fb;
    font-weight: 600;
    color: #1d1d1f;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-open-rates-table td {
    color: #1d1d1f;
    font-size: 0.95rem;
}

.app-open-rates-table tbody tr:hover {
    background: #f9f9fb;
}

.app-open-rates-table tbody tr:last-child td {
    border-bottom: none;
}

.app-open-rates-charts {
    margin-top: 30px;
}

.app-open-rates-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
}

.app-open-rates-chart-container {
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    padding: 20px;
}

.app-open-rates-chart-container h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 16px;
    text-align: center;
}

@media (max-width: 768px) {
    .app-open-rates-charts-grid {
        grid-template-columns: 1fr;
    }

    .app-open-rates-filters {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Support & Backend AI Suggestions Styles ===== */
.ai-analysis-section {
    padding: 15px;
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
}

.ask-ai-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ask-ai-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.ask-ai-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.ai-results-container {
    margin-top: 15px;
}

.ai-suggestions-container {
    background: white;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 20px;
}

.ai-suggestions-container h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e7;
}

.ai-summary {
    background: #f0f4ff;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    line-height: 1.6;
    color: #333;
}

.ai-insights {
    margin-bottom: 15px;
}

.ai-insights h5, .ai-recommendations h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 10px;
}

.ai-insights ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.ai-insights li {
    margin-bottom: 8px;
    line-height: 1.5;
    color: #555;
}

.ai-recommendations {
    margin-top: 15px;
}

.recommendation {
    background: #f9f9fb;
    border-left: 4px solid #667eea;
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 0 6px 6px 0;
}

.recommendation.priority-high {
    border-left-color: #ef4444;
}

.recommendation.priority-medium {
    border-left-color: #f59e0b;
}

.recommendation.priority-low {
    border-left-color: #10b981;
}

.priority-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.priority-high .priority-badge {
    background: #fee2e2;
    color: #dc2626;
}

.priority-medium .priority-badge {
    background: #fef3c7;
    color: #d97706;
}

.priority-low .priority-badge {
    background: #d1fae5;
    color: #059669;
}

.recommendation p {
    margin: 0 0 5px 0;
    color: #333;
    line-height: 1.5;
}

.recommendation small {
    color: #666;
    font-style: italic;
}

.ai-error {
    background: #fee2e2;
    color: #dc2626;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #fecaca;
}

.loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

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

/* Per-app AI summary styling */
.ai-app-summary {
    background: #f9f9fb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
}

.ai-app-summary h5 {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e7;
}

.ai-app-summary p {
    margin: 0;
    line-height: 1.6;
    color: #333;
}

.ai-error-inline {
    color: #dc2626;
    font-style: italic;
}

.ai-loading {
    padding: 20px;
    text-align: center;
    color: #666;
    font-style: italic;
}

/* ============================================
   AI Insights Summary Page
   ============================================ */

.ai-insights {
    padding: 20px 0;
}

.ai-insights-header {
    margin-bottom: 24px;
}

.ai-insights-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.ai-insights-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
}

.ai-insights-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.refresh-ai-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.refresh-ai-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.refresh-ai-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ai-last-updated {
    font-size: 13px;
    color: #888;
}

.ai-insights-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* App-based grid layout */
.ai-insights-apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
}

@media (max-width: 768px) {
    .ai-insights-apps-grid {
        grid-template-columns: 1fr;
    }
}

/* App card */
.ai-app-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e9ecef;
    transition: box-shadow 0.2s;
}

.ai-app-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.ai-app-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e0e0e0;
}

.ai-app-card-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.ai-app-card-date {
    font-size: 12px;
    color: #888;
}

/* Insight sections within app card */
.ai-insight-section {
    background: white;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #e1e5eb;
}

.ai-insight-section:last-child {
    margin-bottom: 0;
}

.ai-insight-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.ai-insight-section-icon {
    font-size: 16px;
}

.ai-insight-section-title {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}

.ai-insight-section p {
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    margin: 0;
}

.ai-no-insight {
    color: #999;
    font-style: italic;
    font-size: 13px;
}

.ai-insight-no-data {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-style: italic;
}

.ai-insight-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px;
    color: #dc2626;
    text-align: center;
}

/* ========================================
   Retention Comparison Styles
   ======================================== */

.retention-comparison-section {
    margin-top: 40px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.retention-comparison-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    cursor: pointer;
    padding: 4px;
    margin-bottom: 0;
}

.checkbox-group label:hover {
    background: #e8f4f8;
    border-radius: 4px;
}

.checkbox-group input[type="checkbox"] {
    cursor: pointer;
}

.date-range-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
}

.date-range-inputs span {
    color: #666;
    font-weight: normal;
}

.chart-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.chart-summary-item {
    display: flex;
    flex-direction: column;
}

.chart-summary-item .label {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 4px;
}

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

.chart-legend-controls {
    display: flex;
    gap: 10px;
}

.btn-secondary {
    padding: 8px 16px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-secondary:active {
    background: #545b62;
}

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

.chart-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #1d1d1f;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .retention-comparison-filters {
        grid-template-columns: 1fr;
    }

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .chart-legend-controls {
        width: 100%;
    }

    .btn-secondary {
        width: 100%;
    }
}

/* Retention View Toggle */
.toggle-switch-container {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #007aff;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

.toggle-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #666;
    user-select: none;
}

.toggle-switch input:not(:checked) ~ .toggle-label:first-of-type,
.toggle-switch input:checked ~ .toggle-label:last-of-type {
    color: #007aff;
    font-weight: 600;
}

/* Event Metrics Styles */
.event-metrics {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.event-metrics-header {
    border-bottom: 1px solid #e5e5e7;
    padding-bottom: 20px;
    margin-bottom: 24px;
}

.event-metrics-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.event-metrics-description {
    color: #86868b;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.event-metrics-filters {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.event-metrics-filters .filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.event-metrics-filters label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1d1d1f;
}

.event-metrics-select {
    padding: 8px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    min-width: 140px;
}

.event-metrics-refresh-btn {
    padding: 8px 16px;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.event-metrics-refresh-btn:hover {
    background: #0056b3;
}

.event-metrics-content {
    padding: 16px 0;
}

.event-metrics-cards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.event-metrics-card {
    background: #f5f5f7;
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 120px;
    text-align: center;
}

.event-metrics-card .card-label {
    font-size: 0.8rem;
    color: #86868b;
    margin-bottom: 4px;
}

.event-metrics-card .card-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1d1d1f;
}

.event-metrics-card.card-ok {
    background: #d4edda;
}

.event-metrics-card.card-ok .card-value {
    color: #155724;
}

.event-metrics-card.card-warning {
    background: #fff3cd;
}

.event-metrics-card.card-warning .card-value {
    color: #856404;
}

.event-metrics-card.card-critical {
    background: #f8d7da;
}

.event-metrics-card.card-critical .card-value {
    color: #721c24;
}

.event-metrics-card.card-grey {
    background: #e9ecef;
}

.event-metrics-card.card-grey .card-value {
    color: #495057;
}

.event-metrics-summary {
    margin-bottom: 24px;
}

.event-metrics-latest {
    margin-bottom: 32px;
}

.event-metrics-latest h3,
.event-metrics-chart-section h3,
.event-metrics-history h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.event-metrics-timestamp {
    font-size: 0.85rem;
    color: #86868b;
    margin-bottom: 12px;
}

.event-metrics-table-container {
    overflow-x: auto;
}

.event-metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.event-metrics-table th {
    background: #f5f5f7;
    padding: 10px 8px;
    text-align: left;
    font-weight: 600;
    color: #1d1d1f;
    border-bottom: 2px solid #e5e5e7;
    white-space: nowrap;
}

.event-metrics-table th.subheader,
.event-metrics-table tr.subheader th {
    font-size: 0.75rem;
    color: #86868b;
    font-weight: 500;
    border-bottom: 1px solid #e5e5e7;
}

.event-metrics-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #e5e5e7;
    white-space: nowrap;
}

.event-metrics-table .status-cell {
    text-align: center;
    font-size: 1rem;
}

.event-metrics-table .app-name {
    font-weight: 500;
}

.event-metrics-table .breakdown {
    font-size: 0.75rem;
    color: #86868b;
}

.event-metrics-table .match-ok {
    color: #28a745;
    font-weight: 500;
}

.event-metrics-table .match-warning {
    color: #ffc107;
    font-weight: 500;
}

.event-metrics-table .match-critical {
    color: #dc3545;
    font-weight: 500;
}

.event-metrics-chart-section {
    margin-bottom: 32px;
}

.event-metrics-chart-section canvas {
    height: 300px !important;
}

.event-metrics-history {
    margin-top: 24px;
}

.event-metrics-table.history-table {
    max-height: 400px;
    overflow-y: auto;
}

/* ============================================================
   Pricing Tests
   ============================================================ */

.pt-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.pt-status-draft {
    background: #f0f0f0;
    color: #666;
}

.pt-status-running {
    background: #e6f7ff;
    color: #1890ff;
}

.pt-status-completed {
    background: #f6ffed;
    color: #52c41a;
}

.pt-significance-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.pt-sig-significant {
    background: #f6ffed;
    color: #52c41a;
}

.pt-sig-not-significant {
    background: #fff7e6;
    color: #fa8c16;
}

/* Segmented LTV (Reports) */
.seg-ltv-summary {
    margin-bottom: 15px;
    padding: 12px 15px;
    background: #f5f7ff;
    border: 1px solid #e1e7ff;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #2c3e50;
}

.seg-ltv-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.seg-ltv-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.seg-ltv-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.04em;
}

.seg-ltv-summary-value {
    font-size: 1.05rem;
    font-weight: 600;
}

.seg-ltv-table-wrap {
    overflow-x: auto;
    margin-bottom: 15px;
}

.seg-ltv-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: #fff;
}

.seg-ltv-table-wrap th,
.seg-ltv-table-wrap td {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    text-align: right;
}

.seg-ltv-table-wrap th:first-child,
.seg-ltv-table-wrap td:first-child {
    text-align: left;
}

.seg-ltv-table-wrap th {
    background: #f8fafc;
    font-weight: 600;
    color: #374151;
}

.seg-ltv-muted {
    color: #9ca3af;
    font-size: 0.78rem;
    margin-left: 6px;
    white-space: nowrap;
}

.seg-ltv-total-row {
    background: #eef2ff;
    font-weight: 600;
}

/* Segmented LTV dimension cards */
.seg-ltv-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.seg-ltv-card-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.15s;
}

.seg-ltv-card-header:hover {
    background: #f1f5f9;
}

.seg-ltv-card.seg-ltv-overall .seg-ltv-card-header {
    cursor: default;
    background: #eef2ff;
}

.seg-ltv-card.seg-ltv-overall .seg-ltv-card-header:hover {
    background: #eef2ff;
}

.seg-ltv-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.seg-ltv-card-chevron {
    font-size: 0.7rem;
    color: #94a3b8;
    width: 14px;
    text-align: center;
}

.seg-ltv-card-count {
    font-size: 0.78rem;
    font-weight: 400;
    color: #94a3b8;
    margin-left: 4px;
}

.seg-ltv-card-body {
    padding: 12px 16px;
}

.seg-ltv-no-data {
    padding: 16px 0;
    text-align: center;
    color: #9ca3af;
    font-size: 0.88rem;
    font-style: italic;
}

.seg-ltv-filtered-note {
    color: #9ca3af;
    font-size: 0.82rem;
    padding: 6px 0 0;
}

/* Drill-down filter breadcrumb bar */
.seg-ltv-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 0.88rem;
}

.seg-ltv-filters-bar-label {
    font-weight: 600;
    color: #92400e;
    margin-right: 2px;
}

.seg-ltv-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #fbbf24;
    border-radius: 14px;
    font-size: 0.84rem;
    color: #78350f;
}

.seg-ltv-filter-chip-remove {
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: #b45309;
    font-weight: 700;
    margin-left: 2px;
}

.seg-ltv-filter-chip-remove:hover {
    color: #dc2626;
}

.seg-ltv-filters-clear {
    margin-left: 8px;
    padding: 3px 10px;
    background: none;
    border: 1px solid #d97706;
    border-radius: 4px;
    color: #92400e;
    font-size: 0.82rem;
    cursor: pointer;
}

.seg-ltv-filters-clear:hover {
    background: #fef3c7;
}

/* Clickable drill-down rows */
.seg-ltv-drilldown-row {
    cursor: pointer;
    transition: background 0.12s;
}

.seg-ltv-drilldown-row:hover {
    background: #f0f9ff;
}

.seg-ltv-drilldown-row td:first-child::after {
    content: ' \25B6';
    font-size: 0.65rem;
    color: #93c5fd;
    margin-left: 6px;
}