@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark body {
  background-color: #020617; /* Slate-950 background */
  color: #f8fafc;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html.dark ::-webkit-scrollbar-track {
  background: #020617;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Flat Solid B2B Panels (Refactored from Glassmorphism) */
.glass-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0; /* slate-200 border */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* very subtle B2B shadow */
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
html.dark .glass-panel {
  background: #0f172a; /* slate-900 panel */
  border: 1px solid #1e293b; /* slate-800 border */
  box-shadow: none;
}

.glass-panel-heavy {
  background: #ffffff;
  border: 1px solid #cbd5e1; /* slate-300 border */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
html.dark .glass-panel-heavy {
  background: #1e293b; /* slate-800 panel */
  border: 1px solid #334155; /* slate-700 border */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.glass-input {
  background: #ffffff;
  border: 1px solid #cbd5e1; /* slate-300 border */
  color: #0f172a;
  transition: all 0.2s ease;
}
html.dark .glass-input {
  background: #0f172a;
  border: 1px solid #334155; /* slate-700 border */
  color: #f8fafc;
}

.glass-input:focus {
  border-color: #2563eb; /* blue-600 active border */
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); /* professional focus ring */
  outline: none;
}

/* Gradients and Neon Lights - Refactored to clean B2B styles */
.bg-gradient-neon {
  background: #f8fafc; /* solid slate-50 background */
  transition: background 0.3s ease;
}
html.dark .bg-gradient-neon {
  background: #020617; /* solid slate-950 background */
}

.glow-indigo {
  box-shadow: none; /* remove C2C glowing effect */
  transition: box-shadow 0.3s;
}

.glow-indigo-hover:hover {
  border-color: #3b82f6; /* blue-500 active hover */
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}
html.dark .glow-indigo-hover:hover {
  border-color: #3b82f6;
  box-shadow: none;
  transform: translateY(-1px);
}

.text-gradient-purple {
  color: #2563eb; /* solid blue-600 */
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}
html.dark .text-gradient-purple {
  color: #3b82f6; /* solid blue-500 */
}

.text-gradient-cyan {
  color: #0d9488; /* solid teal-600 */
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}
html.dark .text-gradient-cyan {
  color: #2dd4bf; /* solid teal-400 */
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Dynamic active state indicators (B2B border indicator style) */
.active-nav-item {
  background: #f1f5f9; /* solid slate-100 */
  border-left: 4px solid #2563eb; /* thick blue indicator */
  color: #2563eb !important; /* blue-600 text */
  font-weight: 600;
}
html.dark .active-nav-item {
  background: #1e293b; /* solid slate-800 */
  border-left: 4px solid #3b82f6; /* blue-500 indicator */
  color: #ffffff !important;
  font-weight: 600;
}

/* Custom Checkbox/Radio */
.glass-checkbox {
  appearance: none;
  background-color: #ffffff;
  border: 1px solid #cbd5e1; /* slate-300 */
  padding: 9px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
html.dark .glass-checkbox {
  background-color: #0f172a;
  border: 1px solid #334155; /* slate-700 */
}

.glass-checkbox:checked {
  background-color: #2563eb; /* professional blue-600 check background */
  border-color: #2563eb;
}

.glass-checkbox:checked::after {
  content: '\2713';
  font-size: 12px;
  color: white;
  position: absolute;
  top: 1px;
  left: 3px;
}

/* Video container formatting */
.video-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px; /* standardized B2B rounded-lg */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background: #000000;
}

.video-wrapper video {
  width: 100%;
  display: block;
}

/* ==========================================
   B2B Premium Dark Sidebar (ALWAYS Dark)
   ========================================== */
.sidebar-dark {
  background-color: #0f172a !important; /* Premium Slate-900 */
  color: #f8fafc !important; /* Slate-50 Text */
  border-right: 1px solid #1e293b !important; /* Slate-800 Border */
}

/* Content Divider Borders */
.sidebar-dark .border-b,
.sidebar-dark .border-t,
.sidebar-dark div[class*="border-b"],
.sidebar-dark div[class*="border-t"] {
  border-color: #1e293b !important; /* Slate-800 divider */
}

/* Headers and Names */
.sidebar-dark h2,
.sidebar-dark h1,
.sidebar-dark #teacher-name {
  color: #ffffff !important;
}

/* Subtext & Roles */
.sidebar-dark .text-slate-500,
.sidebar-dark #teacher-role-label {
  color: #94a3b8 !important; /* Slate-400 */
}

/* Normal Buttons (Inactive state) */
.sidebar-dark nav button,
.sidebar-dark nav a {
  color: #94a3b8 !important; /* Slate-400 Text */
  background-color: transparent !important;
  border-left: 4px solid transparent !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Button Hover State */
.sidebar-dark nav button:hover,
.sidebar-dark nav a:hover {
  color: #ffffff !important;
  background-color: rgba(30, 41, 59, 0.7) !important; /* Slate-800 */
}

/* Active Button State (.active-nav-item) */
.sidebar-dark nav button.active-nav-item,
.sidebar-dark nav a.active-nav-item {
  background-color: #1e293b !important; /* Slate-800 */
  border-left: 4px solid #3b82f6 !important; /* Blue-500 indicator bar */
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Icons inside Nav buttons */
.sidebar-dark nav button i,
.sidebar-dark nav button svg {
  color: currentColor !important;
}

/* Sidebar Footer Panel Controls */
.sidebar-dark #theme-toggle-teacher {
  background-color: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(71, 85, 105, 0.3) !important;
  color: #cbd5e1 !important; /* Slate-300 */
  transition: all 0.2s ease !important;
}

.sidebar-dark #theme-toggle-teacher:hover {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
}

.sidebar-dark #teacher-logout {
  background-color: rgba(30, 41, 59, 0.3) !important;
  color: #94a3b8 !important;
  transition: all 0.2s ease !important;
}

.sidebar-dark #teacher-logout:hover {
  background-color: rgba(239, 68, 68, 0.1) !important; /* Red alpha */
  color: #f87171 !important; /* Red-400 */
}