/* ==========================================================================
   Course Player (iframe-embedded React courses) — Theme & Chrome Integration
   --------------------------------------------------------------------------
   Applies to every page that uses .course-player-wrapper / .course-header
   (course_python, course_java, course_javascript, course_sql, course_ml,
    course_genai, course_az900, course_security_plus, ...).

   Goals:
   1. Respect light & dark themes (templates historically hard-coded dark slate).
   2. Keep the global sidebar reachable — the course player overlays the main
      content area only, and the floating "Menu" reopen pill always sits above
      the course chrome.
   3. Polish typography, spacing, and button sizing for a more refined feel.
   ========================================================================== */

/* --- Theme tokens --------------------------------------------------------- */
:root {
  --cp-surface: #ffffff;
  --cp-surface-2: #f8fafc;
  --cp-surface-3: #f1f5f9;
  --cp-border: #e2e8f0;
  --cp-text: #0f172a;
  --cp-text-muted: #475569;
  --cp-text-dim: #64748b;
  --cp-accent: #4f46e5;
  --cp-accent-soft: rgba(79, 70, 229, 0.12);
  --cp-accent-border: rgba(79, 70, 229, 0.28);
  --cp-success: #16a34a;
  --cp-success-soft: rgba(22, 163, 74, 0.12);
  --cp-warn: #d97706;
  --cp-warn-soft: rgba(217, 119, 6, 0.12);
  --cp-header-height: 60px;
  --cp-shadow: 0 10px 30px -20px rgba(15, 23, 42, 0.25);
}

html[data-theme="dark"] {
  --cp-surface: #0b1020;
  --cp-surface-2: #111a35;
  --cp-surface-3: #182244;
  --cp-border: rgba(148, 163, 184, 0.18);
  --cp-text: #e2e8f0;
  --cp-text-muted: #cbd5e1;
  --cp-text-dim: #94a3b8;
  --cp-accent: #818cf8;
  --cp-accent-soft: rgba(129, 140, 248, 0.18);
  --cp-accent-border: rgba(129, 140, 248, 0.4);
  --cp-success: #34d399;
  --cp-success-soft: rgba(52, 211, 153, 0.18);
  --cp-warn: #fbbf24;
  --cp-warn-soft: rgba(251, 191, 36, 0.18);
  --cp-shadow: 0 18px 40px -20px rgba(2, 6, 23, 0.65);
}

/* --- Wrapper -------------------------------------------------------------- */
/* The inline templates declare `.course-player-wrapper { position: fixed; top: 70px; left: 0; right: 0; bottom: 0; background: #020617; }`.
   We let that positioning stand (iframes need full-area anchoring) and only
   override the theming + depth. */
.course-player-wrapper {
  background: var(--cp-surface) !important;
  color: var(--cp-text);
}

/* When the main-site sidebar is expanded, slide the player to its right so the
   user can still navigate without collapsing the nav. 280px matches
   `.sidebar` width defined in static/css/dark_theme.css. */
.app-layout:not(.sidebar-collapsed):not(.no-sidebar) .course-player-wrapper,
.app-layout:not(.sidebar-collapsed):not(.no-sidebar) [class*="page-wrapper"] {
  left: 280px !important;
}
@media (max-width: 1024px) {
  .app-layout:not(.sidebar-collapsed):not(.no-sidebar) .course-player-wrapper,
  .app-layout:not(.sidebar-collapsed):not(.no-sidebar) [class*="page-wrapper"] {
    left: 0 !important;
  }
}

/* Per-page template `.side-nav { display: none !important }` rules were a hold-over
   from a legacy sidebar container. The current sidebar uses `#sidebar` / `.sidebar`,
   so those rules are harmless — but we also make sure nothing in a page template
   can hide the active sidebar or its reopen pill. */
.app-layout .sidebar#sidebar {
  display: flex !important;
}
.app-layout.sidebar-collapsed .sidebar#sidebar {
  /* Collapsed: width 0, translated out — keep display:flex for smooth transition */
  display: flex !important;
}


/* --- Header bar ----------------------------------------------------------- */
.course-header {
  background: linear-gradient(180deg, var(--cp-surface-2) 0%, var(--cp-surface) 100%) !important;
  border-bottom: 1px solid var(--cp-border) !important;
  padding: 0.85rem 1.5rem !important;
}

.course-back-btn {
  background: var(--cp-surface-3) !important;
  border: 1px solid var(--cp-border) !important;
  color: var(--cp-text) !important;
  padding: 0.55rem 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}
.course-back-btn:hover {
  background: var(--cp-accent-soft) !important;
  border-color: var(--cp-accent-border) !important;
  color: var(--cp-accent) !important;
}

.course-title {
  /* Keep the gradient for visual identity but ensure contrast in both themes */
  font-size: 1.2rem !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
html[data-theme="light"] .course-title {
  /* gradients remain vivid on white; just make sure fallback is readable */
  color: var(--cp-accent);
}

.course-subtitle {
  color: var(--cp-text-dim) !important;
  font-size: 0.85rem !important;
}

.course-icon {
  font-size: 1.85rem !important;
}

.course-progress-indicator {
  background: var(--cp-accent-soft) !important;
  color: var(--cp-accent) !important;
  font-size: 0.78rem !important;
  padding: 0.4rem 0.85rem !important;
  font-weight: 700 !important;
  border: 1px solid var(--cp-accent-border);
}

.course-status {
  background: var(--cp-success-soft) !important;
  color: var(--cp-success) !important;
  font-size: 0.78rem !important;
  padding: 0.4rem 0.85rem !important;
  border: 1px solid transparent;
}
.course-status.loading {
  background: var(--cp-warn-soft) !important;
  color: var(--cp-warn) !important;
}
.course-status-dot {
  background: currentColor !important;
}

.course-fullscreen-btn {
  background: var(--cp-surface-3) !important;
  border: 1px solid var(--cp-border) !important;
  color: var(--cp-text) !important;
  width: 38px !important;
  height: 38px !important;
}
.course-fullscreen-btn:hover {
  background: var(--cp-accent-soft) !important;
  border-color: var(--cp-accent-border) !important;
  color: var(--cp-accent) !important;
}

/* --- Iframe surface ------------------------------------------------------- */
.course-iframe-container {
  background: var(--cp-surface) !important;
}
.course-iframe {
  background: var(--cp-surface) !important;
}

/* --- Loading overlay ------------------------------------------------------ */
.course-loading {
  background: linear-gradient(180deg, var(--cp-surface-2) 0%, var(--cp-surface) 100%) !important;
  color: var(--cp-text) !important;
}
.course-loading-spinner {
  border-color: var(--cp-border) !important;
  border-top-color: var(--cp-accent) !important;
}
.course-loading-text {
  color: var(--cp-text) !important;
  font-weight: 700 !important;
}
.course-loading-subtext {
  color: var(--cp-text-dim) !important;
}

/* --- Keep the global sidebar reopen pill above the course player --------- */
/* The iframe wrapper is position:fixed with no stacking context of its own;
   push the reopen button to the top of the z-stack. */
.sidebar-reopen-btn {
  z-index: 10000 !important;
}

/* Ensure the global header/theme toggle stay clickable above the player */
.main-header {
  z-index: 9998 !important;
}

/* --- Fullscreen override -------------------------------------------------- */
.course-player-wrapper.fullscreen {
  left: 0 !important;
  top: 0 !important;
  z-index: 9999;
}
.course-player-wrapper.fullscreen .course-header {
  display: none;
}