/* ==========================================
   Theme Styles - Provider Specific
   ========================================== */

/* Converge Theme */
.dashboard[data-provider="converge"] {
    --primary-color: var(--converge-primary);
    --secondary-color: var(--converge-secondary);
    --accent-color: var(--converge-accent);
}

.dashboard[data-provider="converge"] .header {
    border-top: 3px solid var(--converge-primary);
}

.dashboard[data-provider="converge"] .toggle-slider {
    background: var(--converge-primary);
}

.dashboard[data-provider="converge"] .btn-primary {
    background: var(--converge-primary);
}

.dashboard[data-provider="converge"] .btn-primary:hover {
    background: var(--converge-secondary);
}

.dashboard[data-provider="converge"] .stat-card:hover {
    border-color: var(--converge-primary);
}

.dashboard[data-provider="converge"] .map-control-btn:hover {
    border-color: var(--converge-primary);
}

.dashboard[data-provider="converge"] .source-tab.active {
    color: var(--converge-primary);
    border-bottom-color: var(--converge-primary);
}

/* Globe Theme */
.dashboard[data-provider="globe"] {
    --primary-color: var(--globe-primary);
    --secondary-color: var(--globe-secondary);
    --accent-color: var(--globe-accent);
}

.dashboard[data-provider="globe"] .header {
    border-top: 3px solid var(--globe-primary);
}

.dashboard[data-provider="globe"] .toggle-slider {
    background: var(--globe-primary);
}

.dashboard[data-provider="globe"] .btn-primary {
    background: var(--globe-primary);
}

.dashboard[data-provider="globe"] .btn-primary:hover {
    background: var(--globe-secondary);
}

.dashboard[data-provider="globe"] .stat-card:hover {
    border-color: var(--globe-primary);
}

.dashboard[data-provider="globe"] .map-control-btn:hover {
    border-color: var(--globe-primary);
}

.dashboard[data-provider="globe"] .source-tab.active {
    color: var(--globe-primary);
    border-bottom-color: var(--globe-primary);
}

/* Animated Theme Transitions */
.dashboard * {
    transition: border-color 0.3s ease, 
                background-color 0.3s ease,
                color 0.3s ease;
}

/* Classification Color Badges */
.classification-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.classification-badge.connection {
    background: var(--class-connection);
    color: white;
}

.classification-badge.speed {
    background: var(--class-speed);
    color: white;
}

.classification-badge.outage {
    background: var(--class-outage);
    color: white;
}

.classification-badge.billing {
    background: var(--class-billing);
    color: black;
}

.classification-badge.support {
    background: var(--class-support);
    color: white;
}

.classification-badge.installation {
    background: var(--class-installation);
    color: white;
}

.classification-badge.other {
    background: var(--class-other);
    color: white;
}

/* Map Marker Themes */
.leaflet-marker-icon.converge-marker {
    filter: hue-rotate(240deg) saturate(1.5);
}

.leaflet-marker-icon.globe-marker {
    filter: hue-rotate(140deg) saturate(1.2);
}

/* Chart Theme Colors */
.dashboard[data-provider="converge"] .chart-container {
    --chart-primary: #6366F1;
    --chart-secondary: #8B5CF6;
    --chart-tertiary: #A78BFA;
    --chart-grid: rgba(99, 102, 241, 0.1);
}

.dashboard[data-provider="globe"] .chart-container {
    --chart-primary: #10B981;
    --chart-secondary: #14B8A6;
    --chart-tertiary: #34D399;
    --chart-grid: rgba(16, 185, 129, 0.1);
}

/* Dark Mode Theme Adjustments */
@media (prefers-color-scheme: dark) {
    .dashboard[data-provider="converge"] {
        --converge-primary: #818CF8;
        --converge-secondary: #A78BFA;
        --converge-accent: #C4B5FD;
    }
    
    .dashboard[data-provider="globe"] {
        --globe-primary: #34D399;
        --globe-secondary: #5EEAD4;
        --globe-accent: #86EFAC;
    }
    
    .classification-badge {
        opacity: 0.9;
    }
}

/* Animation Presets */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Apply animations to elements */
.panel-section {
    animation: fadeIn 0.5s ease-out;
}

.stat-card {
    animation: scaleIn 0.3s ease-out;
}

.legend-item {
    animation: slideIn 0.3s ease-out;
}

/* Hover Effects */
.dashboard[data-provider="converge"] .glass-card:hover {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.1);
}

.dashboard[data-provider="globe"] .glass-card:hover {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}