/* 
 * Theme System for AdaptiveLearn
 * This file defines the four themes that can be applied across all dashboards
 */

/* ===== THEME 1: MODERN GLASS (Default) ===== */
body.style-modern-glass {
    --primary-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --secondary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --accent-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    
    --primary-color: #4facfe;
    --secondary-color: #00f2fe;
    --accent-color: #ffd700;
    --bg-opacity: 0.1;
    --border-opacity: 0.2;
    --hover-opacity: 0.15;
    --text-primary: #f7fafc;
    --text-secondary: rgba(226, 232, 240, 0.9);
    --text-muted: rgba(226, 232, 240, 0.7);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --backdrop-blur: blur(15px);
    
    background: var(--primary-gradient) !important;
    color: var(--text-primary) !important;
}

/* Modern Glass Dashboard Elements */
.style-modern-glass .dashboard-container,
.style-modern-glass .content-wrapper,
.style-modern-glass .main-content {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 1px solid rgba(255, 255, 255, var(--border-opacity)) !important;
}

.style-modern-glass .ai-supervisor-card.unified {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 1px solid rgba(255, 255, 255, var(--border-opacity)) !important;
    position: relative;
    overflow: hidden;
}

.style-modern-glass .ai-supervisor-card.unified::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.3) 0%, rgba(0, 242, 254, 0.3) 100%);
    z-index: -1;
}

/* ===== THEME 2: CLASSIC CLEAN ===== */
body.style-classic-clean {
    --primary-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --secondary-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --success-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    
    --primary-color: #2563eb;
    --secondary-color: #3b82f6;
    --accent-color: #10b981;
    --bg-opacity: 0.95;
    --border-opacity: 0.1;
    --hover-opacity: 1;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --backdrop-blur: none;
    
    background: #f3f4f6 !important;
    color: var(--text-primary) !important;
}

/* Classic Clean Dashboard Elements */
.style-classic-clean .dashboard-container,
.style-classic-clean .content-wrapper,
.style-classic-clean .main-content {
    background: white !important;
    backdrop-filter: none !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.style-classic-clean .ai-supervisor-card.unified {
    background: white !important;
    border: 2px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.style-classic-clean .ai-supervisor-card.unified:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.style-classic-clean .supervisor-card-title {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

.style-classic-clean .supervisor-card-description {
    color: var(--text-secondary) !important;
    text-shadow: none !important;
}

.style-classic-clean .supervisor-card-icon {
    color: var(--primary-color) !important;
    text-shadow: none !important;
}

/* ===== THEME 3: VIBRANT ENERGY ===== */
body.style-vibrant-energy {
    --primary-gradient: linear-gradient(135deg, #f72585 0%, #b5179e 100%);
    --secondary-gradient: linear-gradient(135deg, #7209b7 0%, #560bad 100%);
    --accent-gradient: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
    --success-gradient: linear-gradient(135deg, #06ffa5 0%, #0dceda 100%);
    --warning-gradient: linear-gradient(135deg, #ffbe0b 0%, #fb5607 100%);
    
    --primary-color: #f72585;
    --secondary-color: #b5179e;
    --accent-color: #7209b7;
    --bg-opacity: 0.15;
    --border-opacity: 0.3;
    --hover-opacity: 0.25;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.7);
    --shadow-color: rgba(247, 37, 133, 0.4);
    --backdrop-blur: blur(20px);
    
    background: var(--primary-gradient) !important;
    color: var(--text-primary) !important;
}

/* Vibrant Energy Dashboard Elements */
.style-vibrant-energy .dashboard-container,
.style-vibrant-energy .content-wrapper,
.style-vibrant-energy .main-content {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 2px solid rgba(255, 255, 255, var(--border-opacity)) !important;
    box-shadow: 0 20px 40px var(--shadow-color) !important;
}

.style-vibrant-energy .ai-supervisor-card.unified {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 2px solid rgba(255, 255, 255, var(--border-opacity)) !important;
    position: relative;
    overflow: hidden;
}

.style-vibrant-energy .ai-supervisor-card.unified::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(247, 37, 133, 0.4) 0%, rgba(181, 23, 158, 0.4) 100%);
    z-index: -1;
}

.style-vibrant-energy .supervisor-card-icon {
    color: var(--accent-color) !important;
    animation: vibrantPulse 2s ease-in-out infinite;
}

@keyframes vibrantPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* ===== THEME 4: MINIMAL FOCUS ===== */
body.style-minimal-focus {
    --primary-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    --secondary-gradient: linear-gradient(135deg, #333333 0%, #4d4d4d 100%);
    --accent-gradient: linear-gradient(135deg, #666666 0%, #808080 100%);
    --success-gradient: linear-gradient(135deg, #1a4d1a 0%, #2d6b2d 100%);
    --warning-gradient: linear-gradient(135deg, #4d4d1a 0%, #6b6b2d 100%);
    
    --primary-color: #000000;
    --secondary-color: #333333;
    --accent-color: #666666;
    --bg-opacity: 0.02;
    --border-opacity: 0.1;
    --hover-opacity: 0.05;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.8);
    --backdrop-blur: blur(10px);
    
    background: #000000 !important;
    color: var(--text-primary) !important;
}

/* Minimal Focus Dashboard Elements */
.style-minimal-focus .dashboard-container,
.style-minimal-focus .content-wrapper,
.style-minimal-focus .main-content {
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 1px solid rgba(255, 255, 255, var(--border-opacity)) !important;
    box-shadow: none !important;
}

.style-minimal-focus .ai-supervisor-card.unified {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 1px solid rgba(255, 255, 255, var(--border-opacity)) !important;
}

.style-minimal-focus .ai-supervisor-card.unified:hover {
    background: rgba(255, 255, 255, var(--hover-opacity)) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.style-minimal-focus .supervisor-card-icon {
    color: var(--text-secondary) !important;
}

/* ===== UNIVERSAL THEME OVERRIDES ===== */

/* Buttons */
.btn-primary {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: white !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 2px solid rgba(255, 255, 255, var(--border-opacity)) !important;
    color: var(--text-primary) !important;
}

/* Forms */
.form-control {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 2px solid rgba(255, 255, 255, var(--border-opacity)) !important;
    color: var(--text-primary) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

/* Tables */
.data-table,
table.table {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
}

.data-table thead,
table.table thead {
    background: rgba(255, 255, 255, var(--hover-opacity)) !important;
}

.data-table th,
table.table th {
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, var(--border-opacity)) !important;
}

.data-table td,
table.table td {
    color: var(--text-secondary) !important;
    border-color: rgba(255, 255, 255, var(--border-opacity)) !important;
}

/* Action Cards */
.action-card {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 1px solid rgba(255, 255, 255, var(--border-opacity)) !important;
}

.action-card h5,
.action-card .card-title {
    color: var(--text-primary) !important;
}

.action-card p,
.action-card .card-text {
    color: var(--text-secondary) !important;
}

/* Modals */
.modal-content {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 1px solid rgba(255, 255, 255, var(--border-opacity)) !important;
}

.modal-header,
.modal-footer {
    background: rgba(255, 255, 255, var(--hover-opacity)) !important;
    border-color: rgba(255, 255, 255, var(--border-opacity)) !important;
}

.modal-title {
    color: var(--text-primary) !important;
}

/* Navigation */
.nav-tabs {
    background: rgba(255, 255, 255, var(--hover-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border-color: rgba(255, 255, 255, var(--border-opacity)) !important;
}

.nav-tab {
    color: var(--text-secondary) !important;
}

.nav-tab:hover {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    color: var(--text-primary) !important;
}

.nav-tab.active {
    color: var(--primary-color) !important;
    background: rgba(255, 255, 255, var(--hover-opacity)) !important;
}

/* Stat Cards */
.stat-card {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 1px solid rgba(255, 255, 255, var(--border-opacity)) !important;
}

.stat-value {
    background: var(--primary-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.stat-label {
    color: var(--text-secondary) !important;
}

/* Labels and Text */
label {
    color: var(--text-primary) !important;
}

p {
    color: var(--text-secondary) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

/* Links */
a {
    color: var(--primary-color) !important;
}

a:hover {
    color: var(--secondary-color) !important;
}

/* Special handling for Classic Clean theme */
.style-classic-clean h1,
.style-classic-clean h2,
.style-classic-clean h3,
.style-classic-clean h4,
.style-classic-clean h5,
.style-classic-clean h6,
.style-classic-clean .supervisor-card-title,
.style-classic-clean .supervisor-card-description,
.style-classic-clean .action-card h5,
.style-classic-clean .action-card p {
    text-shadow: none !important;
}

/* Ensure proper text shadows for dark themes */
.style-modern-glass h1,
.style-modern-glass h2,
.style-modern-glass h3,
.style-modern-glass h4,
.style-modern-glass h5,
.style-modern-glass h6,
.style-vibrant-energy h1,
.style-vibrant-energy h2,
.style-vibrant-energy h3,
.style-vibrant-energy h4,
.style-vibrant-energy h5,
.style-vibrant-energy h6,
.style-minimal-focus h1,
.style-minimal-focus h2,
.style-minimal-focus h3,
.style-minimal-focus h4,
.style-minimal-focus h5,
.style-minimal-focus h6 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Badge Styles */
.badge {
    backdrop-filter: var(--backdrop-blur) !important;
}

.badge-primary {
    background: var(--primary-gradient) !important;
}

.badge-success {
    background: var(--success-gradient) !important;
}

.badge-warning {
    background: var(--warning-gradient) !important;
}

/* Progress Bars */
.progress {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
}

.progress-bar {
    background: var(--primary-gradient) !important;
}

/* Alerts */
.alert {
    backdrop-filter: var(--backdrop-blur) !important;
    border: 1px solid;
}

.alert-info {
    background: rgba(79, 172, 254, var(--bg-opacity)) !important;
    border-color: rgba(79, 172, 254, var(--border-opacity)) !important;
    color: var(--text-primary) !important;
}

.alert-success {
    background: rgba(67, 233, 123, var(--bg-opacity)) !important;
    border-color: rgba(67, 233, 123, var(--border-opacity)) !important;
    color: var(--text-primary) !important;
}

.alert-warning {
    background: rgba(250, 112, 154, var(--bg-opacity)) !important;
    border-color: rgba(250, 112, 154, var(--border-opacity)) !important;
    color: var(--text-primary) !important;
}

/* Dropdown Menus */
.dropdown-menu {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 1px solid rgba(255, 255, 255, var(--border-opacity)) !important;
}

.dropdown-item {
    color: var(--text-secondary) !important;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, var(--hover-opacity)) !important;
    color: var(--text-primary) !important;
}

/* Section Headers */
.section-header {
    background: rgba(255, 255, 255, var(--hover-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
}

/* Card Headers */
.card-header {
    background: rgba(255, 255, 255, var(--hover-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border-color: rgba(255, 255, 255, var(--border-opacity)) !important;
}

/* Content Sections */
.content-section {
    background: rgba(255, 255, 255, var(--bg-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 1px solid rgba(255, 255, 255, var(--border-opacity)) !important;
}

/* Dashboard Header */
.dashboard-header {
    background: rgba(255, 255, 255, var(--hover-opacity)) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border-color: rgba(255, 255, 255, var(--border-opacity)) !important;
}

/* Fix for Classic Clean specific elements */
.style-classic-clean .dashboard-container,
.style-classic-clean .content-wrapper,
.style-classic-clean .action-card,
.style-classic-clean .stat-card,
.style-classic-clean .data-table,
.style-classic-clean .modal-content,
.style-classic-clean .content-section,
.style-classic-clean .form-control {
    backdrop-filter: none !important;
}

/* Ensure Classic Clean uses proper shadows */
.style-classic-clean .action-card:hover,
.style-classic-clean .stat-card:hover,
.style-classic-clean .btn:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}