/* Statistics Custom Customization */

/* ----------------------------------------------------
   Premium Statistics Page Styles
---------------------------------------------------- */

/* Modern Section Title */
.section-title-modern {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}

.section-title-modern > div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.section-title-modern .material-icons {
    font-size: 20px;
    color: var(--accent-color);
}

/* Modern Stats Grid - Full width */
.stats-grid-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1100px) {
    .stats-grid-modern {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-grid-modern {
        grid-template-columns: 1fr;
    }
}

/* Campaign Stats Section - Statistics Page */
.campaign-stats-section {
    background: var(--bg-surface);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    padding: 14px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.campaign-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.campaign-stats-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.campaign-stats-title .material-icons {
    font-size: 20px;
    color: var(--accent-color);
}

/* Campaign Stats Grid - 4 columns */
.stats-grid-campaign {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
}

@media (max-width: 1100px) {
    .stats-grid-campaign {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-grid-campaign {
        grid-template-columns: 1fr;
    }
}

/* Campaign row: compact KPI block + chart block */
.campaign-overview-row {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 16px;
    align-items: stretch;
}

.campaign-overview-row .campaign-stats-section,
.campaign-overview-row .email-performance-section {
    margin-bottom: 0;
    height: 100%;
}

.campaign-overview-row .campaign-stats-section,
.sequences-overview-row .followup-stats-section {
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    position: relative;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.campaign-overview-row .campaign-stats-section:hover,
.sequences-overview-row .followup-stats-section:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--accent-subtle) inset;
}

[data-theme="dark"] .campaign-overview-row .campaign-stats-section:hover,
[data-theme="dark"] .sequences-overview-row .followup-stats-section:hover {
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.45), 0 0 0 1px var(--accent-subtle) inset;
}

.campaign-overview-row .campaign-stats-header {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.campaign-overview-row .stats-grid-campaign {
    grid-template-columns: 1fr;
    gap: 8px;
}

.campaign-overview-row .stat-card-modern {
    padding: 10px 11px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    box-shadow: none;
    gap: 4px;
    height: 88px;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.campaign-overview-row .stat-card-inner {
    min-height: 40px;
}

.campaign-overview-row .stat-label-modern,
.campaign-overview-row .stat-value-modern {
    white-space: nowrap;
}

.campaign-overview-row .stat-card-modern::before {
    display: none;
}

.campaign-overview-row .stat-card-modern:hover {
    transform: translateX(2px);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    border-color: var(--accent-color);
    background: var(--bg-surface);
}

.campaign-overview-row .stat-value-modern {
    font-size: 18px;
    letter-spacing: -0.01em;
}

.campaign-overview-row .stat-icon-modern {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bg-surface);
}

.campaign-overview-row .stat-icon-modern .material-icons {
    font-size: 17px;
}

.campaign-overview-row .stat-rate-modern,
.campaign-overview-row .stat-trend {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
}

.campaign-overview-row .stat-trend.positive,
.campaign-overview-row .stat-rate-modern {
    color: #0f766e;
    border-color: rgba(15, 118, 110, 0.2);
    background: rgba(15, 118, 110, 0.08);
}

.campaign-overview-row .stat-trend.negative {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.2);
    background: rgba(185, 28, 28, 0.08);
}

/* Modern Stat Card - Compact */
.stat-card-modern {
    background: var(--bg-surface);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-color);
    transition: height 0.3s;
}

.stat-card-modern:nth-child(1)::before {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

.stat-card-modern:nth-child(2)::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.stat-card-modern:nth-child(3)::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.stat-card-modern:nth-child(4)::before {
    background: linear-gradient(90deg, #ff9800, #ffb74d);
}

.stat-card-modern:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.stat-card-modern:hover::before {
    height: 4px;
}

.stat-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-icon-modern {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-modern .material-icons {
    font-size: 20px;
}

.stat-icon-modern.sent {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.stat-icon-modern.opened {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.stat-icon-modern.clicked {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}


.stat-content {
    flex: 1;
    min-width: 0;
}

.stat-value-modern {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label-modern {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.stat-rate-modern,
.stat-trend {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.stat-rate-modern {
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.stat-rate-modern.error,
.stat-trend.negative {
    color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.stat-trend.positive {
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

/* AI Report Button */
.ai-report-btn-wrap {
    position: relative;
}

.ai-report-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.ai-report-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

.ai-report-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: ai-shimmer 3s infinite;
}

@keyframes ai-shimmer {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

.ai-report-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-report-icon .material-icons {
    font-size: 20px;
    animation: ai-sparkle 2s ease-in-out infinite;
}

@keyframes ai-sparkle {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.ai-report-text {
    position: relative;
    z-index: 1;
}

.ai-report-badge {
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* AI Reports Grid */
.ai-reports-grid {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.ai-reports-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: var(--text-tertiary);
}

.ai-reports-empty .material-icons {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.ai-reports-empty p {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: var(--text-secondary);
}

.ai-reports-hint {
    font-size: 13px;
    opacity: 0.7;
}

/* AI Report Card */
.ai-report-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    transition: var(--transition);
    cursor: pointer;
}

.ai-report-card:hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow);
}

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

.ai-report-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.ai-report-card-date {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.ai-report-card-actions {
    display: flex;
    gap: 4px;
    opacity: 1;
    visibility: visible;
}

.ai-report-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    transition: all 0.2s;
    opacity: 1 !important;
    visibility: visible !important;
}

.ai-report-action-btn .material-icons {
    font-size: 18px;
    display: block;
}

.ai-report-action-btn.view {
    display: flex !important;
    opacity: 1 !important;
}

.ai-report-action-btn:hover {
    background: var(--bg-surface);
    color: var(--accent-color);
}

.ai-report-action-btn.view:hover {
    color: var(--accent-color);
    background: rgba(99, 102, 241, 0.1);
}

.ai-report-action-btn.download:hover {
    color: var(--accent-color);
    background: rgba(99, 102, 241, 0.1);
}

.ai-report-action-btn.delete:hover {
    color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.ai-report-card-preview {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* AI Report Status & Meta Badges */
.ai-report-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.ai-report-status.status-good {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.ai-report-status.status-attention {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.ai-report-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-primary);
    color: var(--text-tertiary);
    border: 1px solid var(--border-color);
}

/* Premium Details Section */
.premium-details-section {
    background: var(--bg-surface);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.premium-details-section:hover {
    box-shadow: var(--shadow-lg);
}

/* Premium Section Header */
.premium-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.premium-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.premium-section-title .material-icons {
    font-size: 24px;
    color: var(--accent-color);
}

.premium-section-title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.premium-section-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Search Box */
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: var(--transition);
}

.search-box:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-box .material-icons {
    font-size: 18px;
    color: var(--text-tertiary);
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--text-primary);
    width: 180px;
}

.search-box input::placeholder {
    color: var(--text-tertiary);
}

.stats-sort-select,
.chart-range-select {
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    padding: 0 12px;
    outline: none;
    min-width: 170px;
}

.stats-sort-select:focus-visible,
.chart-range-select:focus-visible {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Premium Table */
.premium-table-container {
    overflow-x: auto;
}

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

.premium-table thead {
    background: var(--bg-primary);
}

.premium-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.premium-table td {
    padding: 16px;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

.premium-table tbody tr:hover {
    background: var(--bg-primary);
}

.premium-table tbody tr.campaign-row {
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.premium-table tbody tr.campaign-row:hover {
    background: rgba(99, 102, 241, 0.07);
}

.premium-table tbody tr.campaign-row.is-selected {
    background: linear-gradient(90deg, var(--accent-glow, rgba(99, 102, 241, 0.12)) 0%, transparent 70%), var(--bg-primary);
    box-shadow: inset 3px 0 0 var(--accent-color);
}

[data-theme="dark"] .premium-table tbody tr.campaign-row:hover {
    background: rgba(99, 102, 241, 0.14);
}

.premium-table tbody tr:last-child td {
    border-bottom: none;
}

/* Notion-like compact table mode (used in statistics details tables) */
.premium-table--notion th {
    padding: 8px 10px;
    font-size: 10px;
    letter-spacing: 0.04em;
}

.premium-table--notion td {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.35;
}

.premium-table--notion .status-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
}

.premium-table--notion .rate-badge {
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 10px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 48px 24px !important;
    color: var(--text-tertiary);
}

.empty-state .material-icons {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
}

/* Sequence table empty state: centered both vertically and horizontally */
#followup-table-body td.empty-state {
    text-align: center !important;
    vertical-align: middle !important;
    height: 220px;
}

#followup-table-body td.empty-state .material-icons {
    display: block;
    margin: 0 auto 10px;
}

.sequences-overview-row .sequences-details-section {
    display: flex;
    flex-direction: column;
}

.sequences-overview-row .sequences-details-section .premium-table-container {
    flex: 1;
}

.sequences-overview-row .sequences-details-section.is-empty {
    min-height: 420px;
}

.sequences-overview-row .sequences-details-section.is-empty .premium-table-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sequences-overview-row .sequences-details-section.is-empty .premium-table--notion {
    width: 100%;
}

.sequences-overview-row .sequences-details-section.is-empty #followup-table-body td.empty-state {
    height: auto;
    padding: 56px 24px !important;
    vertical-align: middle !important;
}

/* Premium Pagination */
.premium-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
}

/* Sequences row: compact KPIs + details table */
.sequences-overview-row {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 24px;
    align-items: start;
}

.sequences-overview-row .followup-stats-section,
.sequences-overview-row .premium-details-section {
    margin-bottom: 0;
    height: 100%;
}

.sequences-overview-row .followup-stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
}

.sequences-overview-row .followup-stats-section .premium-section-header {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border-color);
}

.sequences-overview-row .followup-stat-card {
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: none;
    gap: 9px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.sequences-overview-row .followup-stat-card::before {
    display: none;
}

.sequences-overview-row .followup-stat-card:hover {
    transform: translateX(2px);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    border-color: var(--accent-color);
    background: var(--bg-surface);
}

.sequences-overview-row .followup-stat-value {
    font-size: 17px;
    letter-spacing: -0.01em;
}

.sequences-overview-row .followup-stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bg-surface);
}

.sequences-overview-row .followup-stat-icon .material-icons {
    font-size: 16px;
}

@media (max-width: 1200px) {
    .campaign-overview-row,
    .sequences-overview-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .campaign-overview-row .campaign-stats-section,
    .sequences-overview-row .followup-stats-section,
    .campaign-overview-row .stat-card-modern,
    .sequences-overview-row .followup-stat-card {
        transition: none !important;
        transform: none !important;
    }
}

/* Follow-up Stats Section */
.followup-stats-section {
    background: var(--bg-surface);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.followup-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 14px 16px;
}

@media (max-width: 900px) {
    .followup-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .followup-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Follow-up Stat Card - Compact */
.followup-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.followup-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.followup-stat-card:nth-child(1)::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.followup-stat-card:nth-child(2)::before {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

.followup-stat-card:nth-child(3)::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.followup-stat-card:nth-child(4)::before {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.followup-stat-card:nth-child(5)::before {
    background: linear-gradient(90deg, #ec4899, #f472b6);
}

.followup-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--accent-color);
}

.followup-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.followup-stat-icon .material-icons {
    font-size: 18px;
}

.followup-stat-icon.active {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.followup-stat-icon.sent {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.followup-stat-icon.opened {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.followup-stat-icon.clicked {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}

.followup-stat-icon.replied {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}

.followup-stat-content {
    flex: 1;
}

.followup-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.followup-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 3px;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.status-badge.paused {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.status-badge.completed {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-color);
}

.status-badge.stopped {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

/* Rate Badge */
.rate-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.rate-badge.high {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.rate-badge.medium {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.rate-badge.low {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

/* Theme-aware rate badges for statistics view */
[data-theme="dark"] #statistics-view .rate-badge {
    background: var(--accent-subtle);
    color: var(--accent-color);
}

[data-theme="dark"] #statistics-view .rate-badge.high {
    background: var(--success-light);
    color: var(--success);
}

[data-theme="dark"] #statistics-view .rate-badge.medium {
    background: var(--warning-light);
    color: var(--warning);
}

[data-theme="dark"] #statistics-view .rate-badge.low {
    background: var(--error-light);
    color: var(--error);
}

/* Dark Mode Adjustments */
[data-theme="dark"] .premium-details-section,
[data-theme="dark"] .followup-stats-section {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .premium-section-header {
    background: var(--bg-surface);
}

[data-theme="dark"] .search-box {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .premium-table thead {
    background: var(--bg-elevated);
}

[data-theme="dark"] .followup-stat-card {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .followup-stat-card:hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-glow);
}

/* ----------------------------------------------------
   Email Performance Charts Section
---------------------------------------------------- */
/* Ensure the section background matches the dark theme card color */
[data-theme="dark"] .email-performance-section {
    background: #18191d;
    /* Matches reference image card background */
    border: 1px solid #2d2d35;
}

.email-performance-section {
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 14px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.performance-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

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

.performance-subtitle {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 4px 0 0 0;
}

.performance-live-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #10b981;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse-live 2s infinite;
}

@keyframes pulse-live {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

/* Grid layout: Line chart gets more space, Doughnut gets less */
.charts-grid-modern {
    display: grid;
    /* Approx 65% left, 35% right, similar to reference */
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.charts-grid-modern--stack {
    grid-template-columns: 1fr;
    gap: 14px;
}

.charts-grid-modern > .chart-card-modern:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .charts-grid-modern {
        grid-template-columns: 1fr;
        /* Stack on smaller screens */
    }
}

/* Card styling for dark mode to match reference */
[data-theme="dark"] .chart-card-modern {
    background: #18191d;
    border: 1px solid #2d2d35;
    border-radius: 16px;
    padding: 24px;
}

.chart-card-modern {
    background: var(--bg-primary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.chart-card-modern.chart-doughnut {
    padding: 16px 20px;
    align-items: center;
    position: relative;
}

.chart-card-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    width: 100%;
}

/* Titles */
.chart-card-header-modern h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}

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

.chart-legend-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text-secondary);
}

.chart-legend-inline span {
    display: flex;
    align-items: center;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 5px;
}

.legend-dot.sent {
    background: transparent;
    border-top: 2px dashed #a5b4fc;
    width: 14px;
    height: 0;
    border-radius: 0;
}

.legend-dot.opened {
    background: #6366f1;
}

.legend-dot.clicked {
    background: #22c55e;
}

/* --- Container Sizing (Making them smaller & high res) --- */
/* Line chart container height */
.chart-container-modern {
    position: relative;
    width: 100%;
    /* Reduced height to look "smaller" like reference */
    height: 300px;
    min-height: 300px;
}

/* Doughnut specific container */
.chart-container-modern.doughnut-container {
    /* Make pie chart area square so it doesn't get oval */
    height: 250px;
    min-height: 250px;
    margin-bottom: 20px;
}

/* Ensure canvas fills container for high resolution */
.chart-container-modern canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Chart box container - CRITICAL for maintainAspectRatio: false */
.chart-box {
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 16px;
    height: 350px;
    /* ADD A FIXED HEIGHT */
    position: relative;
    /* REQUIRED for maintainAspectRatio: false to work */
}

/* Ensure the canvas fills the container */
.chart-box canvas {
    width: 100% !important;
    height: 100% !important;
}

/* --- Custom Doughnut Legend Styling --- */
.doughnut-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.doughnut-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Pushes percentage to the right */
    font-size: 13px;
}

.doughnut-legend-item div {
    display: flex;
    align-items: center;
}

.legend-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
}

.legend-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.legend-value {
    font-weight: 700;
    color: var(--text-primary);
}

/* Dark mode adjustments */
[data-theme="dark"] .chart-card-modern {
    background: var(--bg-elevated);
}

[data-theme="dark"] .email-performance-section {
    background: var(--bg-surface);
}

/* ----------------------------------------------------
   1. Theme Variables (Neon/Futuristic Palette)
---------------------------------------------------- */
:root {
    /* Default (Light Mode) - Clean/Minimal */
    --chart-sent: #2563EB;
    /* Blue */
    --chart-opened: #10B981;
    /* Green */
    --chart-clicked: #F59E0B;
    /* Yellow/Orange */
    --chart-errors: #EF4444;
    /* Red */
    --chart-gray: #E5E7EB;
    /* Gray */
    --chart-text: #374151;
    /* Dark Gray Text */
    --chart-grid: #E5E7EB;
    /* Light Grid */
    --chart-bg: #FFFFFF;
    --chart-card-border: #E5E7EB;
    --chart-glow: none;
}

[data-theme="dark"] {
    /* Dark Mode - Neon/Glow/Futuristic */
    --chart-sent: #4D7BFF;
    /* Neon Blue */
    --chart-opened: #43FF92;
    /* Neon Green */
    --chart-clicked: #F9CC33;
    /* Neon Yellow */
    --chart-errors: #FF4D4D;
    /* Neon Red (Soft) */
    --chart-gray: #374151;
    /* Dark Gray Ring */
    --chart-text: #E5E7EB;
    /* Light Text */
    --chart-grid: #374151;
    /* Dark GridLines */
    --chart-bg: #1E1E24;
    /* Dark Card Bg */
    --chart-card-border: #2D2D35;
    --chart-glow: 0 0 10px rgba(77, 123, 255, 0.2);
}

/* ---------------------------------------------------- */
.statistics-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.chart-row-top {
    display: grid;
    grid-template-columns: 350px 1fr;
    /* Donut fixed width, Bar takes rest */
    gap: 20px;
}

.chart-row-bottom {
    display: grid;
    grid-template-columns: 1fr;
}

@media (max-width: 1000px) {
    .chart-row-top {
        grid-template-columns: 1fr;
        /* Stack on smaller screens */
    }
}

/* ----------------------------------------------------
   3. Premium Card Styles
   ---------------------------------------------------- */
.premium-card {
    background: var(--bg-surface, #fff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

[data-theme="dark"] .premium-card {
    background: #18191d;
    /* Matches existing dark theme card bg */
    border-color: #2d2d35;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.chart-card-header {
    padding: 20px 24px 12px 24px;
    border-bottom: 1px solid transparent;
}

.chart-card-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.chart-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.chart-body {
    padding: 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center content especially for Donut */
    justify-content: center;
}

/* ----------------------------------------------------
   4. Donut Chart Specifics
   ---------------------------------------------------- */
.chart-donut-container {
    position: relative;
    width: 220px;
    height: 220px;
    margin-bottom: 20px;
}

.donut-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.donut-center-text #donut-total-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.donut-center-text .donut-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chart-legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 260px;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: opacity 0.2s;
}

.legend-item:hover {
    opacity: 0.8;
}

.legend-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------
   5. Bar & Line Chart Containers
   ---------------------------------------------------- */
.chart-container {
    width: 100%;
    height: 300px;
    position: relative;
}

.chart-container.large {
    height: 350px;
}

/* Daily Chart Legend (Inline) */
.chart-legend-inline {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

/* Canvas styling */
canvas {
    width: 100% !important;
    height: 100% !important;
    transition: filter 0.3s ease;
}

/* Chart glow effects */
.chart-card {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chart-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .chart-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(52, 168, 83, 0.1);
}

.chart-container {
    position: relative;
    filter: drop-shadow(0 0 8px rgba(52, 168, 83, 0.15));
    transition: filter 0.3s ease;
}

[data-theme="dark"] .chart-container {
    filter: drop-shadow(0 0 12px rgba(52, 168, 83, 0.25));
}

.chart-card:hover .chart-container {
    filter: drop-shadow(0 0 12px rgba(52, 168, 83, 0.25));
}

[data-theme="dark"] .chart-card:hover .chart-container {
    filter: drop-shadow(0 0 16px rgba(52, 168, 83, 0.35));
}

/* Legend styling improvements */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    justify-content: center;
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.legend-item:hover {
    opacity: 0.8;
    transform: translateX(2px);
}

.legend-value {
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 4px;
}

.legend-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.legend-item:hover .legend-color {
    transform: scale(1.2);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

/* Responsive charts */
/* ----------------------------------------------------
   6. Pagination & Table Enhancements
   ---------------------------------------------------- */
.pagination-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
    width: 100%;
    box-sizing: border-box;
}

.pagination-info {
    font-size: 13px;
    color: var(--text-secondary);
}

.pagination-controls {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    align-items: center !important;
}

.pagination-pages {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    align-items: center !important;
}

.pagination-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 500;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--bg-primary);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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

.pagination-pages {
    display: flex;
    gap: 4px;
}

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

    .chart-container {
        height: 250px;
    }

    .premium-section-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .search-box input {
        width: 140px;
    }
}


/* HD Container Sizing */
.chart-container-hd {
    position: relative;
    width: 100%;
    height: 320px;
    /* Line chart height */
}

.chart-container-hd.small-donut {
    height: 180px;
    /* Significantly smaller doughnut as requested */
    margin: 0 auto;
}

/* Cursor Animation & Hover Effect for Cards */
.stat-card-modern,
.chart-card-modern {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    cursor: default;
}

.stat-card-modern:hover,
.chart-card-modern:hover {
    transform: translateY(-5px);
    /* Smooth pop-up animation */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Custom Legend styling to match the image */
.custom-legend-hd {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #9ca3af;
}

.legend-color-box {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PREMIUM AI REPORT STYLES - Visual Reports with Charts, Icons & Brand Colors
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Premium Report Modal Backdrop */
.premium-report-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Premium Report Modal */
.premium-report-modal {
    width: calc(100% - 40px);
    max-width: 1000px;
    max-height: 90vh;
    background: var(--bg-surface);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: premiumModalSlideIn 0.3s ease;
}

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

/* Premium Report Header - Gradient Cover */
.premium-report-header {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.premium-report-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: premiumShimmer 3s infinite;
}

@keyframes premiumShimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.premium-report-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.premium-report-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: white;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.premium-report-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.premium-report-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.3px;
}

.premium-report-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.premium-report-badge {
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-weight: 500;
}

.premium-report-status {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
}

.premium-report-status .material-icons {
    font-size: 14px;
}

.premium-report-close {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.premium-report-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

/* Premium Report Body */
.premium-report-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--bg-primary);
}

/* Premium Report Section */
.premium-report-section {
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 20px;
    transition: box-shadow 0.2s;
}

.premium-report-section:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.premium-section-header-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.premium-section-header-card .material-icons {
    font-size: 22px;
}

.premium-section-header-card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Premium Summary Card */
.premium-summary-card {
    background: var(--bg-primary);
    border-radius: 10px;
    padding: 16px 20px;
}

.premium-summary-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Premium KPI Grid */
.premium-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.premium-kpi-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

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

@media (max-width: 500px) {
    .premium-kpi-grid,
    .premium-kpi-grid-5 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Premium KPI Card */
.premium-kpi-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.premium-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.3;
}

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

.premium-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.premium-kpi-icon .material-icons {
    font-size: 22px;
}

.premium-kpi-content {
    flex: 1;
    min-width: 0;
}

.premium-kpi-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.premium-kpi-label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.premium-kpi-rate {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    background: currentColor;
    background-clip: text;
    -webkit-background-clip: text;
}

/* Premium Charts Grid */
.premium-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 16px;
}

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

/* Premium Chart Card */
.premium-chart-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
}

.premium-chart-card h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.premium-chart-container {
    position: relative;
    height: 200px;
}

.premium-chart-container.premium-chart-line {
    height: 220px;
}

.premium-chart-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.premium-chart-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.premium-chart-legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

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

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

/* Premium Insight Card */
.premium-insight-card {
    border-radius: 12px;
    padding: 16px;
}

.premium-insight-card.positive {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.premium-insight-card.negative {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.premium-insight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.premium-insight-card.positive .premium-insight-header {
    color: #10b981;
}

.premium-insight-card.negative .premium-insight-header {
    color: #ef4444;
}

.premium-insight-header .material-icons {
    font-size: 20px;
}

.premium-insight-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

/* Premium Insight List */
.premium-insight-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.premium-insight-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-primary);
    padding: 8px 10px;
    background: var(--bg-surface);
    border-radius: 8px;
}

.premium-insight-list li .material-icons {
    font-size: 18px;
    color: var(--text-secondary);
}

.premium-insight-list li.critical .material-icons {
    color: #ef4444;
}

.premium-insight-list li.warning .material-icons {
    color: #f59e0b;
}

.premium-insight-list li.empty {
    color: var(--text-secondary);
}

.insight-metric {
    margin-left: auto;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 2px 8px;
    background: var(--bg-primary);
    border-radius: 4px;
}

/* Premium Action List */
.premium-action-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.premium-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.2s;
}

.premium-action-item:hover {
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.premium-action-item .action-number {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.premium-action-item .material-icons {
    font-size: 20px;
    color: var(--text-secondary);
}

.premium-action-item .action-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.premium-action-item .action-priority {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.premium-action-item .action-priority.high {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.premium-action-item .action-priority.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.premium-action-item .action-priority.low {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* Premium Alerts List */
.premium-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.premium-alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
}

.premium-alert-item .material-icons {
    font-size: 20px;
}

.premium-alert-item.alert-critical {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

.premium-alert-item.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #d97706;
}

.premium-alert-item.alert-info {
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.3);
    color: #0284c7;
}

/* Premium Report Footer */
.premium-report-footer {
    padding: 16px 24px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.premium-report-branding {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.premium-report-branding img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.premium-download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.premium-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.premium-download-btn .material-icons {
    font-size: 18px;
}

/* Dark Mode Adjustments */
[data-theme="dark"] .premium-report-modal {
    background: var(--bg-surface);
}

[data-theme="dark"] .premium-report-body {
    background: var(--bg-elevated);
}

[data-theme="dark"] .premium-report-section {
    background: var(--bg-surface);
}

[data-theme="dark"] .premium-kpi-card,
[data-theme="dark"] .premium-chart-card,
[data-theme="dark"] .premium-action-item,
[data-theme="dark"] .premium-insight-list li {
    background: var(--bg-elevated);
}

[data-theme="dark"] .premium-summary-card {
    background: var(--bg-elevated);
}

[data-theme="dark"] .premium-report-section:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   DASHBOARD STATS FILTER - Premium Filter Buttons for Stats Grid
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Stats Filter Buttons Container */
.dashboard-stats-filter,
.date-filter-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-primary);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* Individual Filter Button */
.stats-filter-btn,
.date-filter-group .filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.stats-filter-btn .material-icons,
.date-filter-group .filter-btn .material-icons {
    font-size: 16px;
    opacity: 0.7;
}

.stats-filter-btn:hover,
.date-filter-group .filter-btn:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.stats-filter-btn:hover .material-icons,
.date-filter-group .filter-btn:hover .material-icons {
    opacity: 1;
}

/* Active State */
.stats-filter-btn.active,
.date-filter-group .filter-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.stats-filter-btn.active .material-icons,
.date-filter-group .filter-btn.active .material-icons {
    opacity: 1;
}

/* Custom Date Wrapper */
.stats-filter-custom,
.custom-date-wrapper {
    position: relative;
}

/* Statistics top tabs */
.statistics-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
    margin: 0 0 16px 0;
}

.statistics-tab {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.statistics-tab:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.statistics-tab.active {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);
}

/* Hard isolation: keep campaign blocks out of non-campaign tabs */
#statistics-view[data-active-stats-tab="sequences"] .campaign-overview-row,
#statistics-view[data-active-stats-tab="forms"] .campaign-overview-row,
#statistics-view[data-active-stats-tab="automations"] .campaign-overview-row,
#statistics-view[data-active-stats-tab="reports"] .campaign-overview-row {
    display: none !important;
}

/* Hard isolation: keep sequence blocks out of non-sequence tabs */
#statistics-view[data-active-stats-tab="campaigns"] .sequences-overview-row:not(.forms-overview-row):not(.automation-rules-overview-row),
#statistics-view[data-active-stats-tab="forms"] .sequences-overview-row:not(.forms-overview-row):not(.automation-rules-overview-row),
#statistics-view[data-active-stats-tab="automations"] .sequences-overview-row:not(.forms-overview-row):not(.automation-rules-overview-row),
#statistics-view[data-active-stats-tab="reports"] .sequences-overview-row:not(.forms-overview-row):not(.automation-rules-overview-row) {
    display: none !important;
}

/* Hard isolation: keep form blocks out of non-form tabs */
#statistics-view[data-active-stats-tab="campaigns"] .forms-overview-row,
#statistics-view[data-active-stats-tab="sequences"] .forms-overview-row,
#statistics-view[data-active-stats-tab="automations"] .forms-overview-row,
#statistics-view[data-active-stats-tab="reports"] .forms-overview-row {
    display: none !important;
}

/* Hard isolation: keep automation-rule blocks out of non-automations tabs */
#statistics-view[data-active-stats-tab="campaigns"] .automation-rules-overview-row,
#statistics-view[data-active-stats-tab="sequences"] .automation-rules-overview-row,
#statistics-view[data-active-stats-tab="forms"] .automation-rules-overview-row,
#statistics-view[data-active-stats-tab="reports"] .automation-rules-overview-row {
    display: none !important;
}

/* Ensure hidden panels always stay hidden, even if class sets display */
#statistics-view [data-stat-panel][hidden] {
    display: none !important;
}

/* Custom Datepicker Popup */
.stats-datepicker-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: none;
    min-width: 280px;
}

.stats-datepicker-popup.show {
    display: block;
    animation: statsDatepickerFadeIn 0.2s ease;
}

@keyframes statsDatepickerFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PREMIUM SYNC BUTTON
   ═══════════════════════════════════════════════════════════════════════════════ */

.premium-sync-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.premium-sync-btn .material-icons {
    font-size: 18px;
    color: var(--accent-color);
    transition: transform 0.5s ease;
}

.premium-sync-btn:hover {
    background: var(--bg-primary);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.premium-sync-btn:hover .material-icons {
    transform: rotate(180deg);
}

.premium-sync-btn:active {
    transform: scale(0.98);
}

.premium-sync-btn.syncing .material-icons {
    animation: syncSpin 1s linear infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   PREMIUM REFRESH BUTTON - Clean Icon Button Design
   ═══════════════════════════════════════════════════════════════════════════════ */

.premium-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.premium-refresh-btn .material-icons {
    font-size: 20px;
    transition: transform 0.3s ease, color 0.2s ease;
}

.premium-refresh-btn:hover {
    background: var(--bg-surface);
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.premium-refresh-btn:hover .material-icons {
    transform: rotate(90deg);
}

.premium-refresh-btn:active {
    transform: translateY(0) scale(0.95);
}

.premium-refresh-btn.refreshing .material-icons {
    animation: refreshSpin 1s linear infinite;
}

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

[data-theme="dark"] .premium-refresh-btn {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .premium-refresh-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PREMIUM PAUSE BUTTON
   ═══════════════════════════════════════════════════════════════════════════════ */

.premium-pause-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Paused State (Red - Click to Resume) */
.premium-pause-btn.paused {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.premium-pause-btn.paused:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
    transform: translateY(-2px);
}

/* Active State (Green - Click to Pause) */
.premium-pause-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.premium-pause-btn.active:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    transform: translateY(-2px);
}

.premium-pause-btn .material-icons {
    font-size: 18px;
}

.premium-pause-btn:active {
    transform: scale(0.98) translateY(0);
}

/* Pulse animation for pause button */
.premium-pause-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.premium-pause-btn:hover::before {
    left: 100%;
}

/* Responsive */
@media (max-width: 900px) {
    .dashboard-stats-filter,
    .date-filter-group {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure popup is visible on mobile */
    .stats-filter-custom,
    .custom-date-wrapper {
        position: static;
    }
    
    .stats-datepicker-popup,
    .datepicker-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        right: auto;
    }
    
    .stats-filter-btn span:not(.material-icons),
    .date-filter-group .filter-btn span:not(.material-icons) {
        display: none;
    }
    
    .stats-filter-btn,
    .date-filter-group .filter-btn {
        padding: 8px 12px;
    }
    
    .stats-filter-btn .material-icons,
    .date-filter-group .filter-btn .material-icons {
        font-size: 18px;
    }
    
    .premium-sync-btn span:not(.material-icons),
    .premium-pause-btn span:not(.material-icons) {
        display: none;
    }
    
    .premium-sync-btn,
    .premium-pause-btn {
        padding: 10px 14px;
    }
}

/* Dark Mode */
[data-theme="dark"] .dashboard-stats-filter,
[data-theme="dark"] .date-filter-group {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .stats-filter-btn:hover,
[data-theme="dark"] .date-filter-group .filter-btn:hover {
    background: var(--bg-surface);
}

[data-theme="dark"] .stats-datepicker-popup {
    background: var(--bg-elevated);
    border-color: var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .premium-sync-btn {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .premium-sync-btn:hover {
    background: var(--bg-surface);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PREMIUM TEST EMAIL SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.premium-test-email-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.premium-test-email-section:hover {
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.premium-section-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.premium-section-icon .material-icons {
    font-size: 24px;
    color: #6366f1;
}

.premium-section-content {
    flex: 0 0 auto;
    min-width: 150px;
}

.premium-section-content h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.premium-section-content p {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.premium-test-form {
    display: flex;
    flex: 1;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.premium-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 12px;
    flex: 1;
    min-width: 180px;
    transition: all 0.2s ease;
}

.premium-input-group:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.premium-input-group .material-icons {
    font-size: 18px;
    color: var(--text-tertiary);
}

.premium-input-group .premium-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
}

.premium-input-group select.premium-input {
    cursor: pointer;
}

.premium-send-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.premium-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.premium-send-btn:active {
    transform: translateY(0);
}

.premium-send-btn .material-icons {
    font-size: 18px;
}

.premium-test-status {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 8px;
}

.premium-test-status.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.premium-test-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PREMIUM QUICK CAMPAIGN SECTION - Transparent Modern Design
   ═══════════════════════════════════════════════════════════════════════════════ */

.premium-quick-campaign-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.premium-quick-campaign-section:hover {
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.premium-quick-campaign-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
}

.premium-quick-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.premium-quick-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.premium-quick-icon .material-icons {
    font-size: 26px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premium-quick-info h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.premium-quick-info p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.premium-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.premium-create-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.premium-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.premium-create-btn:hover::before {
    left: 100%;
}

.premium-create-btn:active {
    transform: translateY(0);
}

.premium-create-btn .material-icons {
    font-size: 20px;
}

/* Premium Campaign Progress */
.premium-campaign-progress {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.premium-campaign-progress .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.premium-campaign-progress .progress-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.premium-campaign-progress .progress-label strong {
    color: var(--text-primary);
}

.premium-campaign-progress .progress-percent {
    font-size: 14px;
    font-weight: 700;
    color: #6366f1;
}

.premium-campaign-progress .progress-bar-container {
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.premium-campaign-progress .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.premium-campaign-progress .progress-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Dark Mode */
[data-theme="dark"] .premium-quick-campaign-section {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .premium-quick-campaign-section:hover {
    border-color: rgba(99, 102, 241, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   QUICK CAMPAIGN BAR - Clean Action Bar Design
   ═══════════════════════════════════════════════════════════════════════════════ */

.quick-campaign-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 24px;
    transition: all 0.2s ease;
}

.quick-campaign-bar:hover {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);
}

.quick-campaign-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--accent-color);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.quick-campaign-btn:hover {
    background: var(--accent-hover, #4f46e5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

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

.quick-campaign-btn .material-icons {
    font-size: 18px;
}

/* Active Progress Compact */
.active-progress-compact {
    flex: 1;
    min-width: 200px;
}

.active-progress-compact .progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.active-progress-compact .progress-name {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.active-progress-compact .progress-percentage {
    color: var(--accent-color);
    font-weight: 600;
}

.active-progress-compact .progress-track {
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}

.active-progress-compact .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), #a855f7);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Dark Mode */
[data-theme="dark"] .quick-campaign-bar {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .quick-campaign-bar:hover {
    border-color: rgba(99, 102, 241, 0.4);
}

[data-theme="dark"] .active-progress-compact .progress-track {
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 640px) {
    .quick-campaign-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .active-progress-compact {
        min-width: auto;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .premium-test-email-section {
        flex-direction: column;
        align-items: stretch;
    }
    
    .premium-test-form {
        flex-direction: column;
    }
    
    .premium-input-group {
        width: 100%;
    }
    
    .premium-send-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Dark Mode */
[data-theme="dark"] .premium-test-email-section {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .premium-test-email-section:hover {
    border-color: rgba(99, 102, 241, 0.4);
}

[data-theme="dark"] .premium-input-group {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   DATEPICKER POPUP - Statistics Page Fix
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Statistics page datepicker popup */
.datepicker-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: none;
    min-width: 280px;
}

.datepicker-popup.show,
.datepicker-popup.open {
    display: block;
    animation: datepickerFadeIn 0.2s ease;
}

@keyframes datepickerFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark mode for datepicker */
[data-theme="dark"] .datepicker-popup {
    background: var(--bg-elevated);
    border-color: var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   FIX: SELECT DROPDOWN STYLING - Test Template Dropdown
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Premium Input Group Select */
.premium-input-group select.premium-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
    cursor: pointer;
}

/* Select dropdown options - Light mode */
.premium-input-group select.premium-input option {
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #111827);
    padding: 10px 12px;
}

/* Select dropdown options - Dark mode */
[data-theme="dark"] .premium-input-group select.premium-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .premium-input-group select.premium-input option {
    background: #1f2937;
    color: #f3f4f6;
}

/* General select styling fix */
select#test-template,
.premium-input-group select {
    background-color: var(--bg-surface, #ffffff);
    color: var(--text-primary, #111827);
}

[data-theme="dark"] select#test-template,
[data-theme="dark"] .premium-input-group select {
    background-color: var(--bg-elevated, #1f2937);
    color: var(--text-primary, #f3f4f6);
}

/* Fix for select options in dark mode */
[data-theme="dark"] select option {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

/* Hover state for options */
select option:hover,
select option:focus,
select option:checked {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: white;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   TRANSPARENT SECTION DESIGN - Test Email & Quick Campaign
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Transparent Section Base */
.transparent-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 20px;
}

.transparent-section:hover {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Premium Test Email Section - Transparent */
.premium-test-email-section.transparent-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 20px 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
}

.premium-test-email-section.transparent-section:hover {
    border-bottom-color: rgba(99, 102, 241, 0.3) !important;
}

/* Dark Mode */
[data-theme="dark"] .transparent-section {
    background: transparent !important;
    border-color: transparent !important;
}

[data-theme="dark"] .premium-test-email-section.transparent-section {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .premium-test-email-section.transparent-section:hover {
    border-bottom-color: rgba(99, 102, 241, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PREMIUM PERFORMANCE CARDS - New Dashboard Stats Design
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Performance Cards Grid */
.performance-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1400px) {
    .performance-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .performance-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .performance-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Performance Card */
.performance-card {
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.performance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: height 0.3s ease;
}

.performance-card.sent::before {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

.performance-card.opened::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.performance-card.clicked::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.performance-card.errors::before {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.performance-card.unsubscribes::before {
    background: linear-gradient(90deg, #ff9800, #ffb74d);
}

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

.performance-card:hover::before {
    height: 6px;
}

/* Card Header */
.performance-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.performance-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.performance-card-icon .material-icons {
    font-size: 24px;
}

.performance-card.sent .performance-card-icon {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.performance-card.opened .performance-card-icon {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.performance-card.clicked .performance-card-icon {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.performance-card.errors .performance-card-icon {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.performance-card.unsubscribes .performance-card-icon {
    background: rgba(255, 152, 0, 0.12);
    color: #ff9800;
}

/* Card Badge */
.performance-card-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.performance-card.sent .performance-card-badge {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.performance-card.opened .performance-card-badge {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.performance-card.clicked .performance-card-badge {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.performance-card.errors .performance-card-badge {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.performance-card.unsubscribes .performance-card-badge {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
}

/* Card Content */
.performance-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.performance-card-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.performance-card-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Card Footer */
.performance-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.performance-card-breakdown {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-tertiary);
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.breakdown-item .material-icons {
    font-size: 14px;
}

.breakdown-item.campaign {
    color: #6366f1;
}

.breakdown-item.followup {
    color: #10b981;
}

/* Dark Mode */
[data-theme="dark"] .performance-card {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .performance-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .performance-card-footer {
    border-top-color: var(--border-color);
}

/* Unsubscribe Card Styling */
.performance-card.unsubscribes .performance-card-icon {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
}

.performance-card.unsubscribes .performance-card-value {
    color: #ff9800;
}

.stat-icon-modern.unsubscribes {
    background: rgba(255, 152, 0, 0.12);
    color: #ff9800;
}

.followup-stat-icon.unsubscribes {
    background: rgba(255, 152, 0, 0.12);
    color: #ff9800;
}

.followup-stat-card:nth-child(6)::before {
    background: linear-gradient(90deg, #ff9800, #ffb74d);
}