/*
 * 360Buddy — AXES HUB Override Theme
 * Glass effects, hub-mode, dark theme enhancements.
 */

/* ── Hub Mode ────────────────────────────────────────── */
body.hub-mode,
.hub-mode body {
  background: transparent !important;
  zoom: 0.8;
}
html.hub-mode { background: transparent !important; }
html.hub-mode.dark-theme { background: transparent !important; }
.hub-mode header { display: none !important; }
.hub-mode #backgroundCanvas { display: none !important; }
.hub-mode .theme-toggle { display: none !important; }
.hub-mode .container { padding-top: 12px !important; }

body { animation: hubFadeIn 0.3s ease forwards; }
@keyframes hubFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Keep internal nav visible */
html.hub-mode body .back-link,
html.hub-mode .back-link { display: inline-block !important; }

/* ── Dark Theme Glass ────────────────────────────────── */
html.dark-theme.hub-mode,
html.dark-theme.hub-mode body {
  background: transparent !important;
  color: #f1f5f9 !important;
}

/* Step cards → frosted glass */
.dark-theme .step-card {
  background: rgba(30, 30, 30, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #f1f5f9 !important;
}
.dark-theme .step-header h2 { color: #f1f5f9 !important; }
.dark-theme .step-number { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }

/* Room cards grid */
.dark-theme .rooms-grid .room-card,
.dark-theme .room-card {
  background: rgba(30, 30, 30, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.dark-theme .room-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}
.dark-theme .room-card h3 { color: #f1f5f9 !important; }
.dark-theme .room-card .room-meta { color: #94a3b8 !important; }

/* Empty state */
.dark-theme .empty-state { color: #94a3b8 !important; }
.dark-theme .empty-state .icon { opacity: 0.6; }

/* Modals → glass */
.dark-theme .modal-overlay { background: rgba(0, 0, 0, 0.5) !important; }
.dark-theme .modal-content {
  background: rgba(30, 30, 30, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #f1f5f9 !important;
}
.dark-theme .modal-header { border-color: rgba(255, 255, 255, 0.06) !important; }
.dark-theme .modal-header h2 { color: #f1f5f9 !important; }
.dark-theme .modal-close-btn { color: #94a3b8 !important; }
.dark-theme .modal-footer { border-color: rgba(255, 255, 255, 0.06) !important; }

/* Forms */
.dark-theme .field-label,
.dark-theme .form-group label,
.dark-theme label { color: #e2e8f0 !important; }
.dark-theme .field-input,
.dark-theme input[type="text"],
.dark-theme input[type="date"],
.dark-theme input[type="number"],
.dark-theme input[type="email"],
.dark-theme select,
.dark-theme textarea {
  background: rgba(34, 34, 34, 0.8) !important;
  border-color: #333 !important;
  color: #f1f5f9 !important;
}
.dark-theme input:focus,
.dark-theme select:focus,
.dark-theme textarea:focus {
  border-color: #ef4444 !important;
}

/* Buttons */
.dark-theme .btn-primary,
.dark-theme .btn-save {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: white !important;
}
.dark-theme .btn-secondary,
.dark-theme .btn-cancel {
  background: rgba(34, 34, 34, 0.8) !important;
  color: #e2e8f0 !important;
  border: 1px solid #333 !important;
}
.dark-theme .btn-danger {
  background: #dc2626 !important;
  color: white !important;
}
.dark-theme .btn-add-role {
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
}

/* Roles section */
.dark-theme .roles-section { color: #e2e8f0 !important; }
.dark-theme .roles-section-title { color: #f1f5f9 !important; }
.dark-theme .roles-col-heads span { color: #94a3b8 !important; }
.dark-theme .role-row input {
  background: rgba(34, 34, 34, 0.8) !important;
  border-color: #333 !important;
  color: #f1f5f9 !important;
}

/* Tables */
.dark-theme table { background: rgba(30, 30, 30, 0.75) !important; }
.dark-theme th { background: #ef4444 !important; color: white !important; }
.dark-theme td { border-color: #333 !important; color: #e2e8f0 !important; }
.dark-theme tbody tr:hover { background: rgba(239, 68, 68, 0.08) !important; }

/* Tabs */
.dark-theme .tab-btn {
  background: rgba(34, 34, 34, 0.6) !important;
  color: #94a3b8 !important;
}
.dark-theme .tab-btn.active {
  background: #ef4444 !important;
  color: white !important;
}

/* Status badges */
.dark-theme .status-badge { opacity: 0.9; }
.dark-theme .badge-draft { background: rgba(100, 116, 139, 0.2) !important; color: #94a3b8 !important; }
.dark-theme .badge-active { background: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; }
.dark-theme .badge-closed { background: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; }

/* Upload areas */
.dark-theme .upload-area,
.dark-theme .drop-zone {
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: rgba(34, 34, 34, 0.4) !important;
}
.dark-theme .upload-area:hover,
.dark-theme .drop-zone:hover {
  background: rgba(239, 68, 68, 0.08) !important;
}

/* Participant cards */
.dark-theme .participant-card,
.dark-theme .evaluator-card {
  background: rgba(34, 34, 34, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: #e2e8f0 !important;
}

/* Toast */
.dark-theme #toast {
  background: rgba(30, 30, 30, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ── Cabinet page ────────────────────────────────────── */
.dark-theme .page-header {
  background: rgba(30, 30, 30, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.dark-theme .hero {
  background: rgba(30, 30, 30, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.dark-theme .hero h1 { color: #f1f5f9 !important; }
.dark-theme .hero-meta span { color: #94a3b8 !important; }

.dark-theme .form-card {
  background: rgba(30, 30, 30, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #e2e8f0 !important;
}
.dark-theme .form-card h2 { color: #f1f5f9 !important; }

.dark-theme .role-section h3 { color: #f1f5f9 !important; }
.dark-theme .role-counter { color: #94a3b8 !important; }
.dark-theme .evaluator-list { color: #e2e8f0 !important; }
.dark-theme .evaluator-item {
  background: rgba(34, 34, 34, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
}
.dark-theme .evaluator-item input {
  background: rgba(34, 34, 34, 0.8) !important;
  color: #f1f5f9 !important;
  border-color: #333 !important;
}

.dark-theme .submit-section {
  background: rgba(30, 30, 30, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.dark-theme .page-footer { color: #64748b !important; }

/* ── Email templates page ────────────────────────────── */
.dark-theme .template-card {
  background: rgba(30, 30, 30, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #e2e8f0 !important;
}
.dark-theme .template-card h3 { color: #f1f5f9 !important; }
.dark-theme .template-preview {
  background: rgba(34, 34, 34, 0.6) !important;
  color: #94a3b8 !important;
}

/* Inline style overrides */
.dark-theme div[style*="background: white"],
.dark-theme div[style*="background:#fff"] { background: rgba(30, 30, 30, 0.75) !important; }
.dark-theme p[style*="color: #666"],
.dark-theme span[style*="color: #666"] { color: #94a3b8 !important; }
.dark-theme h2[style*="color: #333"],
.dark-theme strong[style*="color: #333"] { color: #f1f5f9 !important; }

/* Scrollbar */
.dark-theme ::-webkit-scrollbar { width: 5px; height: 5px; }
.dark-theme ::-webkit-scrollbar-track { background: transparent; }
.dark-theme ::-webkit-scrollbar-thumb { background: #4a4d5a; border-radius: 3px; }

/* Light theme hub overrides */
.light-theme.hub-mode .step-card,
.light-theme.hub-mode .room-card,
.light-theme.hub-mode .form-card,
.light-theme.hub-mode .hero {
  background: rgba(255, 255, 255, 0.65) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Light theme text — explicit overrides to prevent dark vars leaking */
.light-theme h1, .light-theme h2, .light-theme h3, .light-theme h4, .light-theme h5,
.light-theme label, .light-theme th { color: #0f172a !important; }
.light-theme p, .light-theme td, .light-theme li { color: #475569 !important; }
.light-theme span { color: #475569; }
.light-theme .subtitle, .light-theme .description, .light-theme small,
.light-theme .text-muted, .light-theme .room-meta { color: #64748b !important; }
.light-theme .room-header h3 { color: #D52B1E !important; }
.light-theme .step-header h2 { color: #0f172a !important; }
.light-theme .progress-label { color: #64748b !important; }
.light-theme .status-badge { color: #475569 !important; }
.light-theme .empty-state { color: #64748b !important; }
.light-theme .modal-content { background: #ffffff !important; color: #0f172a !important; }
.light-theme .modal-header h2 { color: #D52B1E !important; }
.light-theme .field-label, .light-theme .form-group label { color: #0f172a !important; }
.light-theme input, .light-theme textarea, .light-theme select {
  background: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important;
}
.light-theme .btn-icon { background: #f1f5f9 !important; }