/* ============================================================
   LNW Luxury Override CSS — v6
   Colors: Deep Midnight Navy #111827 | Electric Cyan #22D3EE
   ============================================================ */

/* ---- HIDE LEARNHOUSE BRANDING ---- */
a[href*="learnhouse.app"],
a[href*="learnhouse.app"] * {
  display: none !important;
  visibility: hidden !important;
}

/* ---- HIDE PODCAST NAV ITEM (desktop + mobile) ---- */
a[href="/podcasts"],
a[href*="/podcasts"],
a[href="/podcasts"] *,
a[href*="/podcasts"] * {
  display: none !important;
}

/* ---- LOGIN PAGE — Deep Midnight Navy + Cyan Gradient ---- */
/* Exact selectors from DOM inspection: */
/* Left panel: .relative.flex.flex-col.h-full.w-full with bg image */
/* Right panel: .bg-gray-50.flex.flex-col.relative */
/* Form card: .bg-white.rounded-xl.p-6.nice-shadow */

/* Left panel: KEEP the background image (auth_bg_luxury.jpg) — only override for non-auth pages */
/* We only remove background-image on elements that are NOT the auth left panel */
div[style*="background-image"]:not(.relative.flex.flex-col.h-full.w-full) {
  background-image: none !important;
  background: linear-gradient(135deg, #0a1628 0%, #111827 40%, #0f2744 70%, #164e63 100%) !important;
}

/* ---- BODY: full dark background, no white flash ---- */
body {
  background-color: #0a1628 !important;
}

/* ---- RIGHT PANEL: replace bg-gray-50 with deep navy ---- */
.bg-gray-50 {
  background-color: #0a1628 !important;
  background-image: linear-gradient(160deg, #0a1628 0%, #111827 60%, #0f2744 100%) !important;
}

/* ---- FORM CARD: dark with cyan glow ---- */
.bg-white.rounded-xl.p-6.nice-shadow {
  background-color: #111827 !important;
  border: 1px solid rgba(34, 211, 238, 0.2) !important;
  box-shadow: 0 0 40px rgba(34, 211, 238, 0.06), 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* ---- FORM CARD TEXT ---- */
.bg-white.rounded-xl.p-6.nice-shadow h1,
.bg-white.rounded-xl.p-6.nice-shadow h2,
.bg-white.rounded-xl.p-6.nice-shadow h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.bg-white.rounded-xl.p-6.nice-shadow p {
  color: #94a3b8 !important;
}
.bg-white.rounded-xl.p-6.nice-shadow label {
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}
.bg-white.rounded-xl.p-6.nice-shadow span {
  color: #94a3b8 !important;
}

/* ---- FORM CARD INPUTS: dark ---- */
.bg-white.rounded-xl.p-6.nice-shadow input {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #f1f5f9 !important;
}
.bg-white.rounded-xl.p-6.nice-shadow input:focus {
  border-color: #22D3EE !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,0.15) !important;
}
.bg-white.rounded-xl.p-6.nice-shadow input::placeholder {
  color: #64748b !important;
}

/* ---- LOGIN BUTTON: cyan ---- */
.bg-white.rounded-xl.p-6.nice-shadow button.bg-black,
.bg-white.rounded-xl.p-6.nice-shadow button[type="submit"] {
  background-color: #22D3EE !important;
  color: #0a1628 !important;
  font-weight: 700 !important;
  border: none !important;
  letter-spacing: 0.02em !important;
}
.bg-white.rounded-xl.p-6.nice-shadow button.bg-black:hover,
.bg-white.rounded-xl.p-6.nice-shadow button[type="submit"]:hover {
  background-color: #06b6d4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(34,211,238,0.3) !important;
}

/* ---- GOOGLE BUTTON: dark slate ---- */
.bg-white.rounded-xl.p-6.nice-shadow button.bg-white,
.bg-white.rounded-xl.p-6.nice-shadow button.border {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border: 1px solid #334155 !important;
}
.bg-white.rounded-xl.p-6.nice-shadow button.bg-white:hover,
.bg-white.rounded-xl.p-6.nice-shadow button.border:hover {
  background-color: #334155 !important;
}

/* ---- LINKS in form card ---- */
.bg-white.rounded-xl.p-6.nice-shadow a {
  color: #22D3EE !important;
}

/* ---- "Don't have an account" text below card ---- */
.m-auto.w-full.max-w-sm > p,
.m-auto.w-full.max-w-sm > div > p,
.m-auto.w-full.max-w-sm > div > span {
  color: #94a3b8 !important;
}
.m-auto.w-full.max-w-sm a {
  color: #22D3EE !important;
}

/* ---- Left panel text (logo + tagline) ---- */
.relative.z-10.flex.flex-col.h-full h1,
.relative.z-10.flex.flex-col.h-full h2,
.relative.z-10.flex.flex-col.h-full p,
.relative.z-10.flex.flex-col.h-full span {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.relative.z-10.flex.flex-col.h-full p {
  color: #a5f3fc !important;
}
/* Logo image glow */
.relative.z-10.flex.flex-col.h-full img {
  filter: drop-shadow(0 4px 20px rgba(34,211,238,0.4)) !important;
}
/* Logo white box — transparent */
.relative.z-10.flex.flex-col.h-full .bg-white {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}}

/* ---- FIX ADMIN BADGE: purple-600 → cyan ---- */
/* Tailwind bg-purple-600 = lab(43.0295 75.21 -86.5669) */
[class*="bg-purple-600"] {
  background-color: #22D3EE !important;
  color: #111827 !important;
}
[class*="bg-purple-"] {
  background-color: #22D3EE !important;
  color: #111827 !important;
}
/* Also catch the Copilot button purple dot */
[class*="bg-violet-"],
[class*="bg-indigo-"] {
  background-color: #22D3EE !important;
  color: #111827 !important;
}

/* ---- LOGO — smaller in nav ---- */
nav img[alt*="logo"], header img[alt*="logo"],
nav img[class*="logo"], header img[class*="logo"] {
  max-height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ---- TYPOGRAPHY (base) ---- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* ---- COURSE CARDS — Navy background, light text ---- */
/* The card has: group relative flex flex-col bg-white rounded-xl nice-shadow overflow-hidden */
.nice-shadow.overflow-hidden.group {
  background-color: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
}
.nice-shadow.overflow-hidden.group:hover {
  box-shadow: 0 8px 40px rgba(34,211,238,0.25) !important;
  transform: translateY(-3px) !important;
  border-color: #22D3EE !important;
}

/* Light text inside course cards — placed AFTER body rule to win specificity */
.nice-shadow.overflow-hidden.group h1,
.nice-shadow.overflow-hidden.group h2,
.nice-shadow.overflow-hidden.group h3,
.nice-shadow.overflow-hidden.group h4,
.nice-shadow.overflow-hidden.group p,
.nice-shadow.overflow-hidden.group span,
.nice-shadow.overflow-hidden.group div,
.nice-shadow.overflow-hidden.group a {
  color: #f3f4f6 !important;
}

/* Inner content area below thumbnail */
.nice-shadow.overflow-hidden.group > div:not(:first-child) {
  background-color: #111827 !important;
}

/* ---- COURSE PAGE: chapter headers — Navy, lesson rows — Cyan tint ---- */
/* Chapter headers on course page */
[class*="ChapterItem"],
[class*="chapter_item"],
[class*="chapterItem"],
div[class*="chapter"][class*="header"] {
  background-color: #111827 !important;
  color: #f3f4f6 !important;
  border-radius: 10px !important;
}
[class*="ChapterItem"] *,
[class*="chapterItem"] * {
  color: #f3f4f6 !important;
}

/* Lesson/activity rows — light cyan background, dark text for contrast */
[class*="ActivityItem"],
[class*="activity_item"],
[class*="activityItem"],
li[class*="activity"],
div[class*="activity"][class*="item"] {
  background-color: #ecfeff !important;
  border-left: 3px solid #22D3EE !important;
  border-radius: 8px !important;
  color: #111827 !important;
  transition: background-color 0.15s ease !important;
}
[class*="ActivityItem"]:hover,
[class*="activityItem"]:hover {
  background-color: #cffafe !important;
}

/* ---- COURSE PAGE: ALL TEXT ON DARK BODY BACKGROUND ---- */
/* Body is dark navy #0a1628 — all text must be light */
/* Scope: main content area (not inside white cards) */

/* Course title h1 */
h1.text-3xl,
h1.font-bold,
.flex-col.min-h-screen h1,
.flex-1.relative h1 {
  color: #f1f5f9 !important;
}

/* Course Lessons h2 and other section headings */
h2.py-5,
h2.font-bold,
.flex-col.min-h-screen h2,
.flex-1.relative h2 {
  color: #f1f5f9 !important;
}

/* Breadcrumb links (Courses > Course Name) */
.flex-col.min-h-screen a:not([class*="bg-"]):not([class*="btn"]) {
  color: #94a3b8 !important;
}

/* Course description paragraph */
p.whitespace-pre-line,
.flex-1.relative p,
.flex-col.min-h-screen > div > div > p {
  color: #cbd5e1 !important;
}

/* Chapter rows: bg-neutral-50 text-neutral-600 — these are white cards, keep dark text */
/* But make sure the chapter number circles and text are readable */
.bg-neutral-50 {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}
.bg-neutral-50 h3,
.bg-neutral-50 span,
.bg-neutral-50 p {
  color: #f1f5f9 !important;
}
.bg-neutral-50:hover,
.hover\:bg-neutral-100:hover {
  background-color: #334155 !important;
}

/* Chapter number bubble */
.outline-neutral-200\/40 {
  outline-color: rgba(148, 163, 184, 0.3) !important;
}

/* Right sidebar cards — keep white background with dark text */
.bg-white.shadow-md,
.bg-white.nice-shadow,
.relative.bg-white.nice-shadow {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #f1f5f9 !important;
}
.bg-white.shadow-md *,
.bg-white.nice-shadow *,
.relative.bg-white.nice-shadow * {
  color: #f1f5f9 !important;
}

/* Course page header area */
[class*="course"][class*="header"] h1,
[class*="course"][class*="hero"] h1,
[class*="course"][class*="banner"] h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}

/* ---- LESSON SIDEBAR — dark theme ---- */
/* The sidebar on lesson pages */
[class*="sidebar"],
[class*="Sidebar"] {
  background-color: #0f172a !important;
}
[class*="sidebar"] *,
[class*="Sidebar"] * {
  color: #e2e8f0 !important;
}
/* Active lesson in sidebar — cyan highlight */
[class*="sidebar"] [class*="active"],
[class*="sidebar"] [aria-current="page"] {
  background-color: #164e63 !important;
  border-left: 3px solid #22D3EE !important;
  color: #22D3EE !important;
}

/* ---- PRIMARY BUTTONS — Cyan on Navy ---- */
button[class*="primary"], [class*="btn-primary"], button[type="submit"] {
  background-color: #22D3EE !important;
  color: #111827 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
button[class*="primary"]:hover, [class*="btn-primary"]:hover {
  background-color: #0ea5c9 !important;
}

/* ---- PROGRESS BARS — Cyan ---- */
[class*="progress"] > div, [role="progressbar"] > div {
  background-color: #22D3EE !important;
  border-radius: 999px !important;
}
[class*="progress"], [role="progressbar"] {
  background-color: #e0f7fa !important;
  border-radius: 999px !important;
}

/* ---- INPUT FIELDS ---- */
input, textarea, select {
  background-color: #fafafa !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  color: #0a0a0a !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s ease !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #22D3EE !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,0.15) !important;
}

/* ---- COURSE THUMBNAIL IMAGES ---- */
[class*="thumbnail"] img, [class*="cover"] img {
  border-radius: 12px !important;
  object-fit: cover !important;
}

/* ---- SCROLLBAR — cyan accent ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #22D3EE; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #0ea5c9; }

/* ---- SMOOTH PAGE TRANSITIONS ---- */
main {
  animation: fadeIn 0.3s ease !important;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- DESCRIPTION BLOCK (injected below videos) ---- */
#lnw-description {
  background: #f8fafc;
  border-left: 4px solid #22D3EE;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 16px 0;
  color: #1e293b;
  font-size: 15px;
  line-height: 1.7;
}
#lnw-description h1, #lnw-description h2, #lnw-description h3,
#lnw-description h4, #lnw-description h5 {
  color: #111827 !important;
  margin-bottom: 8px !important;
}
#lnw-description p { margin-bottom: 12px; }
#lnw-description a { color: #22D3EE !important; text-decoration: underline; }
#lnw-description ul, #lnw-description ol { padding-left: 20px; margin-bottom: 12px; }

/* ---- MOBILE RESPONSIVE ---- */
@media (max-width: 768px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.5rem !important; }
}

/* ---- HIDE COMMUNITIES AND PLAYGROUND NAV ITEMS (v7 — May 2026) ---- */
/* These features are not used — hide from all class/course pages */
a[href*="/community"],
a[href*="/communities"],
a[href*="/playground"],
a[href*="/playgrounds"],
li:has(a[href*="/communit"]),
li:has(a[href*="/playground"]) {
  display: none !important;
}

/* ============================================================
   LEARNHOUSE UI FIXES — 2026-05-28
   Fixes:
   1. White-on-white text in lesson content area
   2. Gap between video and text (empty embed container height)
   3. Course card "MAY 18" date — hide it
   4. "Course Updates" empty widget — hide it
   5. "Page" label on video lessons — change to "Video"
   6. Share Course button — handled (already works, just links)
   ============================================================ */

/* ---- FIX 1: Lesson content area — dark text on white/light bg ---- */
/* The lesson text content area has white bg — override the wildcard white rule */
/* Learnhouse renders lesson content in a prose/article container */
.prose,
[class*="prose"],
article,
[class*="content-area"],
[class*="activity-content"],
[class*="lesson-content"],
[class*="page-content"] {
  color: #1e293b !important;
  background-color: #ffffff !important;
}
.prose *,
[class*="prose"] *,
article *,
[class*="content-area"] *,
[class*="activity-content"] *,
[class*="lesson-content"] *,
[class*="page-content"] * {
  color: #1e293b !important;
}
/* Headings in lesson content */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6,
[class*="prose"] h1, [class*="prose"] h2, [class*="prose"] h3 {
  color: #0f172a !important;
}
/* Links in lesson content */
.prose a, [class*="prose"] a {
  color: #0e7490 !important;
}

/* The main lesson text container — Learnhouse uses a white card below the video */
/* Target the specific white content wrapper that has text */
.bg-white:not([class*="sidebar"]):not([class*="nav"]):not([class*="header"]) {
  background-color: #ffffff !important;
}
.bg-white:not([class*="sidebar"]):not([class*="nav"]):not([class*="header"]) p,
.bg-white:not([class*="sidebar"]):not([class*="nav"]):not([class*="header"]) span,
.bg-white:not([class*="sidebar"]):not([class*="nav"]):not([class*="header"]) div,
.bg-white:not([class*="sidebar"]):not([class*="nav"]):not([class*="header"]) h1,
.bg-white:not([class*="sidebar"]):not([class*="nav"]):not([class*="header"]) h2,
.bg-white:not([class*="sidebar"]):not([class*="nav"]):not([class*="header"]) h3,
.bg-white:not([class*="sidebar"]):not([class*="nav"]):not([class*="header"]) li,
.bg-white:not([class*="sidebar"]):not([class*="nav"]):not([class*="header"]) strong,
.bg-white:not([class*="sidebar"]):not([class*="nav"]):not([class*="header"]) em {
  color: #1e293b !important;
}

/* ---- FIX 2: Reduce gap when video embed is missing/loading ---- */
/* The embed container shows a large empty box when no video — reduce min-height */
[class*="embed"]:has(.text-neutral-400),
[class*="embed"]:has([class*="no-embed"]),
div:has(> p:only-child):has(> p:contains("No embed")) {
  min-height: 120px !important;
  max-height: 180px !important;
}
/* Also constrain the aspect-ratio container when showing error */
.aspect-video:has(+ * .text-neutral-400),
[class*="aspect"]:has([class*="error"]) {
  aspect-ratio: unset !important;
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
}
/* The "No embed URL configured" error container */
div[class*="flex"][class*="items-center"][class*="justify-center"]:has(> svg),
div[class*="flex-col"][class*="items-center"]:has(> svg + p) {
  min-height: 120px !important;
  max-height: 160px !important;
  padding: 20px !important;
}

/* ---- FIX 3: Hide course card date (MAY 18) ---- */
/* Course cards show creation date — not useful for students */
/* The date appears as a small text element below the course title */
[class*="course-card"] time,
[class*="course-card"] [class*="date"],
[class*="CourseCard"] time,
[class*="CourseCard"] [class*="date"],
/* The courses grid cards */
.group time,
.group [class*="date"],
/* Generic date spans in card footers */
a[href*="/course"] time,
a[href*="/course"] [class*="date"] {
  display: none !important;
}
/* The "MAY 18" text — it's a <p> or <span> with month+day format */
/* Target the footer row of course cards that shows date + "START LEARNING" */
[class*="card"] > div:last-child > span:first-child,
[class*="card"] footer span:first-child,
a[href*="/course"] > div > div:last-child > span:first-child {
  display: none !important;
}

/* ---- FIX 4: Hide empty "Course Updates" widget ---- */
/* The "Course Updates / No updates yet" section on course pages */
[class*="CourseUpdates"],
[class*="course-updates"],
section:has(h3:contains("Course Updates")),
div:has(> h3:contains("Course Updates")),
/* Target by the RSS icon + "Course Updates" heading pattern */
div:has(> [class*="rss"]):has(> h3),
/* The specific widget that shows "No updates yet" */
div:has(p:contains("No updates yet")),
div:has(p:contains("Updates about this course will appear here")) {
  display: none !important;
}

/* ---- FIX 5: "Page" label on video lessons — change icon/label ---- */
/* The "Page" icon and text under lesson titles in the course outline */
/* Learnhouse shows activity subtype as a label — TYPE_DYNAMIC shows "Page" */
/* We can't change the text via CSS but we can hide the wrong label */
/* and the icon will change now that we fixed the DB type to TYPE_VIDEO */
/* Hide the "Page" text label specifically */
[class*="activity-type"]:contains("Page"),
span[class*="type"]:contains("Page"),
[class*="lesson-type"]:contains("Page") {
  display: none !important;
}
/* The page icon (document icon) next to lesson names */
svg[class*="page-icon"],
[class*="PageIcon"],
/* The small "Page" badge/label below lesson titles */
.text-xs:contains("Page"),
p.text-xs:contains("Page") {
  display: none !important;
}

/* ---- BONUS: Authors & Updates sidebar section — hide when empty ---- */
/* The "Authors & Updates" heading with no content */
[class*="AuthorsUpdates"],
div:has(> h3:contains("Authors")):has(> div:contains("No updates")) {
  display: none !important;
}

/* ---- BONUS: Fix the lesson page layout gap ---- */
/* The main content area below the video should not have excessive padding */
[class*="activity"] > div > div {
  gap: 16px !important;
}