/* ============================================================
   Saxophone Made Easy — Brand Theme  v3
   saxmadeeasy.jectile.net
   Colors: Black #0A0A0A · Gold #D4AF37 · White #FAFAF8
   Fonts:  Plus Jakarta Sans (headings) · Inter (body)
   ============================================================ */

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

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  --sme-black:        #0A0A0A;
  --sme-black-soft:   #111111;
  --sme-black-card:   #161616;
  --sme-black-border: #2A2A2A;
  --sme-gold:         #D4AF37;
  --sme-gold-light:   #E8CC6A;
  --sme-gold-dim:     #A08820;
  --sme-white:        #FAFAF8;
  --sme-white-muted:  #E0DEDC;
  --sme-white-faint:  #AAAAAA;

  --sme-font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --sme-font-body: 'Inter', system-ui, sans-serif;

  --sme-radius-sm: 4px;
  --sme-radius:    8px;
  --sme-radius-lg: 12px;

  --sme-shadow-card:  0 4px 24px rgba(0,0,0,0.55);
  --sme-shadow-glow:  0 0 18px rgba(212,175,55,0.25);

  --sme-transition: 0.25s ease;
}

/* ── Global Reset & Base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background-color: var(--sme-black) !important;
  color: var(--sme-white) !important;
  font-family: var(--sme-font-body) !important;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--sme-font-head) !important;
  color: var(--sme-white) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h1, .h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2, .h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3, .h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4, .h4 { font-size: 1.25rem; }

p, li, span, label, input, textarea, select {
  font-family: var(--sme-font-body) !important;
}

/* Nav links and general links: white by default, gold on hover/active */
a {
  color: var(--sme-white-muted) !important;
  text-decoration: none;
  transition: color var(--sme-transition);
}
a:hover { color: var(--sme-gold) !important; }

/* Gold only for explicit accent links */
a.text-gold,
a.link-gold,
.link-accent {
  color: var(--sme-gold) !important;
}
a.text-gold:hover,
a.link-gold:hover,
.link-accent:hover {
  color: var(--sme-gold-light) !important;
}

strong, b { color: var(--sme-white); font-weight: 600; }

.text-muted,
.text-secondary {
  color: var(--sme-white-faint) !important;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--sme-black-soft); }
::-webkit-scrollbar-thumb        { background: var(--sme-black-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--sme-gold-dim); }

/* ── Shimmer Keyframe ──────────────────────────────────────── */
@keyframes sme-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ── Navbar ────────────────────────────────────────────────── */
.navbar,
.navbar-expand-lg,
header.navbar {
  background-color: var(--sme-black) !important;
  border-bottom: 1px solid var(--sme-black-border) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.6) !important;
  padding: 0.75rem 1.5rem !important;
}

/* Brand / logo: gold accent is correct here */
.navbar-brand,
.navbar-brand img,
.navbar .site-name {
  font-family: var(--sme-font-head) !important;
  color: var(--sme-gold) !important;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Nav links: white — only gold on hover/active */
.navbar .nav-link,
.navbar .nav-item a {
  color: var(--sme-white) !important;
  font-family: var(--sme-font-body) !important;
  font-weight: 400;
  font-size: 0.9rem;
  padding: 0.5rem 1rem !important;
  transition: color var(--sme-transition) !important;
}
.navbar .nav-link:hover,
.navbar .nav-item a:hover,
.navbar .nav-link.active {
  color: var(--sme-gold) !important;
}

.navbar .navbar-toggler {
  border-color: var(--sme-black-border) !important;
}
.navbar .navbar-toggler-icon {
  filter: invert(1);
}

.navbar .dropdown-menu {
  background-color: var(--sme-black-card) !important;
  border: 1px solid var(--sme-black-border) !important;
  border-radius: var(--sme-radius) !important;
  box-shadow: var(--sme-shadow-card) !important;
}
.navbar .dropdown-item {
  color: var(--sme-white-muted) !important;
  font-family: var(--sme-font-body) !important;
  font-size: 0.88rem;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--sme-black-border) !important;
  color: var(--sme-gold) !important;
}
.navbar .dropdown-divider {
  border-top-color: var(--sme-black-border) !important;
}

/* ── Hero / Banner Section ─────────────────────────────────── */
.lms-hero,
.hero-section,
.banner-section,
.section-hero,
.hero {
  background-color: var(--sme-black-soft) !important;
  border-bottom: 1px solid var(--sme-black-border);
  padding: 5rem 1.5rem !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.lms-hero::before,
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(212,175,55,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.lms-hero h1,
.hero-section h1,
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem) !important;
  color: var(--sme-white) !important;
  margin-bottom: 1rem;
}

.lms-hero p,
.hero-section p,
.hero p {
  color: var(--sme-white-muted) !important;
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 2rem;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary,
.btn-gold,
[data-component="lms-button"] .btn-primary,
.lms-btn-primary {
  background-color: var(--sme-gold) !important;
  border-color: var(--sme-gold) !important;
  color: var(--sme-black) !important;
  font-family: var(--sme-font-body) !important;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  border-radius: var(--sme-radius-sm) !important;
  padding: 0.6rem 1.5rem !important;
  transition: background-color var(--sme-transition), box-shadow var(--sme-transition) !important;
}
.btn-primary:hover,
.btn-gold:hover,
.lms-btn-primary:hover {
  background-color: var(--sme-gold-light) !important;
  border-color: var(--sme-gold-light) !important;
  box-shadow: 0 0 12px rgba(212,175,55,0.35) !important;
  color: var(--sme-black) !important;
}

.btn-secondary,
.btn-outline,
.lms-btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--sme-gold) !important;
  color: var(--sme-gold) !important;
  font-family: var(--sme-font-body) !important;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--sme-radius-sm) !important;
  padding: 0.6rem 1.5rem !important;
  transition: background-color var(--sme-transition), color var(--sme-transition) !important;
}
.btn-secondary:hover,
.btn-outline:hover,
.lms-btn-secondary:hover {
  background-color: var(--sme-gold) !important;
  color: var(--sme-black) !important;
}

.btn-default,
.btn-light {
  background-color: var(--sme-black-card) !important;
  border-color: var(--sme-black-border) !important;
  color: var(--sme-white-muted) !important;
}
.btn-default:hover,
.btn-light:hover {
  border-color: var(--sme-gold) !important;
  color: var(--sme-gold) !important;
}

/* ── Login Page ────────────────────────────────────────────── */

/* Page background */
.login-page,
[data-page="login"],
body[data-route="login"],
.for-login,
.page-card {
  background-color: var(--sme-black) !important;
}

/* The outer wrapper / centering div that can be white */
.login-content,
.login-wrapper,
.page-card-body,
.card-body.login-card-body,
.frappe-login-wrapper,
.login-form-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* The actual login card */
.login-card,
.card.login-card,
.frappe-login-card,
.page-card .card,
.for-login .card,
[data-page="login"] .card,
.login-page .card {
  background-color: var(--sme-black-card) !important;
  border: 1px solid var(--sme-black-border) !important;
  border-radius: var(--sme-radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  color: var(--sme-white) !important;
}

/* Login title */
.login-card h4,
.login-card .login-title,
.frappe-login-card h4,
.for-login h4,
.page-card h4,
[data-page="login"] h4 {
  font-family: var(--sme-font-head) !important;
  color: var(--sme-white) !important;
  font-size: 1.4rem;
  font-weight: 700;
}

/* Replace "Login to Frappe" with brand name via content override */
.login-card h4.login-title,
.page-card h4,
.for-login h4 {
  font-size: 0 !important; /* hide original text */
}
.login-card h4.login-title::before,
.page-card h4::before,
.for-login h4::before {
  content: 'Login to Saxophone Made Easy';
  font-size: 1.4rem;
  color: var(--sme-white);
  font-family: var(--sme-font-head);
  font-weight: 700;
  display: block;
}

/* Login form labels */
.login-card label,
.for-login label,
.page-card label {
  color: var(--sme-white-muted) !important;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Login form inputs */
.login-card input,
.for-login input[type="text"],
.for-login input[type="email"],
.for-login input[type="password"],
.page-card input {
  background-color: var(--sme-black) !important;
  border: 1px solid var(--sme-black-border) !important;
  border-radius: var(--sme-radius-sm) !important;
  color: var(--sme-white) !important;
  font-family: var(--sme-font-body) !important;
  font-size: 0.9rem;
}
.login-card input:focus,
.for-login input:focus,
.page-card input:focus {
  border-color: var(--sme-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
  outline: none !important;
  background-color: var(--sme-black) !important;
}
.login-card input::placeholder,
.for-login input::placeholder {
  color: var(--sme-white-faint) !important;
}

/* "Forgot password" and other sub-links on login */
.login-card a,
.for-login a,
.page-card a {
  color: var(--sme-gold) !important;
}
.login-card a:hover,
.for-login a:hover {
  color: var(--sme-gold-light) !important;
}

/* ── Course Cards ──────────────────────────────────────────── */
.course-card,
.lms-course-card,
.card.course-card,
[data-component="course-card"],
.courses-list .card {
  background-color: var(--sme-black-card) !important;
  border: 1px solid var(--sme-black-border) !important;
  border-radius: var(--sme-radius-lg) !important;
  box-shadow: var(--sme-shadow-card) !important;
  overflow: hidden;
  transition: transform var(--sme-transition), box-shadow var(--sme-transition), border-color var(--sme-transition) !important;
  position: relative;
}

/* Gold shimmer on hover */
.course-card::after,
.lms-course-card::after,
.courses-list .card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(212,175,55,0.10) 50%,
    transparent 65%
  );
  background-size: 200% 100%;
  background-position: -200% center;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.course-card:hover::after,
.lms-course-card:hover::after,
.courses-list .card:hover::after {
  opacity: 1;
  animation: sme-shimmer 1.1s linear infinite;
}

.course-card:hover,
.lms-course-card:hover,
.courses-list .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--sme-shadow-glow), var(--sme-shadow-card) !important;
  border-color: var(--sme-gold-dim) !important;
}

/* Card body — force dark, catches the white content section */
.course-card .card-body,
.lms-course-card .card-body,
.course-card > div:not(:first-child),
.courses-list .card > div:not(:first-child) {
  background-color: var(--sme-black-card) !important;
  padding: 1.25rem !important;
}

.course-card .card-title,
.lms-course-card .card-title,
.course-card h3,
.course-card h4 {
  font-family: var(--sme-font-head) !important;
  color: var(--sme-white) !important;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.course-card .card-text,
.lms-course-card .card-text,
.course-card p {
  color: var(--sme-white-muted) !important;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Instructor name / metadata line */
.course-card .instructor,
.course-card .course-meta,
.course-card .text-muted,
.lms-course-card .instructor {
  color: var(--sme-white-faint) !important;
  font-size: 0.8rem;
}

.course-card .card-img-top,
.lms-course-card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  filter: brightness(0.88);
  transition: filter var(--sme-transition);
}
.course-card:hover .card-img-top,
.lms-course-card:hover img {
  filter: brightness(1);
}

.course-card .badge,
.lms-course-card .badge {
  background-color: var(--sme-gold) !important;
  color: var(--sme-black) !important;
  font-family: var(--sme-font-body) !important;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 0.2em 0.55em;
}

/* ── Lesson Sidebar ────────────────────────────────────────── */
.lesson-sidebar,
.lms-sidebar,
.course-sidebar,
[data-component="lesson-sidebar"],
.sidebar {
  background-color: var(--sme-black-soft) !important;
  border-right: 1px solid var(--sme-black-border) !important;
  min-height: 100vh;
}

.lesson-sidebar .lesson-item,
.lms-sidebar .lesson-item,
.sidebar-item,
.lms-sidebar a {
  display: block;
  color: var(--sme-white-muted) !important;
  font-family: var(--sme-font-body) !important;
  font-size: 0.875rem;
  padding: 0.65rem 1.25rem !important;
  border-left: 3px solid transparent;
  transition: color var(--sme-transition), border-color var(--sme-transition), background-color var(--sme-transition) !important;
}
.lesson-sidebar .lesson-item:hover,
.lms-sidebar a:hover {
  color: var(--sme-gold) !important;
  background-color: rgba(212,175,55,0.05) !important;
  border-left-color: var(--sme-gold-dim) !important;
}
.lesson-sidebar .lesson-item.active,
.lms-sidebar .active,
.sidebar-item.active {
  color: var(--sme-gold) !important;
  background-color: rgba(212,175,55,0.08) !important;
  border-left-color: var(--sme-gold) !important;
  font-weight: 500;
}

.sidebar-section-title,
.lesson-sidebar .section-title {
  font-family: var(--sme-font-body) !important;
  color: var(--sme-white-faint) !important;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.25rem 0.35rem !important;
}

/* ── Progress Bars ─────────────────────────────────────────── */
.progress {
  background-color: var(--sme-black-border) !important;
  border-radius: 100px !important;
  height: 6px !important;
  overflow: hidden;
}

.progress-bar,
.progress .progress-bar {
  background-color: var(--sme-gold) !important;
  background-image: linear-gradient(90deg, var(--sme-gold-dim), var(--sme-gold-light)) !important;
  border-radius: 100px !important;
  transition: width 0.6s ease !important;
}

.progress-percentage,
.progress-label {
  color: var(--sme-gold) !important;
  font-family: var(--sme-font-body) !important;
  font-size: 0.82rem;
  font-weight: 500;
}

.progress-circle .progress-value {
  color: var(--sme-gold) !important;
  font-family: var(--sme-font-head) !important;
}

/* ── Forms & Inputs ────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background-color: var(--sme-black-card) !important;
  border: 1px solid var(--sme-black-border) !important;
  border-radius: var(--sme-radius-sm) !important;
  color: var(--sme-white) !important;
  font-family: var(--sme-font-body) !important;
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem !important;
  transition: border-color var(--sme-transition), box-shadow var(--sme-transition) !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--sme-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
  outline: none !important;
  background-color: var(--sme-black-card) !important;
  color: var(--sme-white) !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--sme-white-faint) !important;
}

.form-label, label {
  color: var(--sme-white-muted) !important;
  font-family: var(--sme-font-body) !important;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 0.35rem;
}

/* ── Alerts & Badges ───────────────────────────────────────── */
.alert {
  background-color: var(--sme-black-card) !important;
  border-radius: var(--sme-radius) !important;
  font-family: var(--sme-font-body) !important;
}
.alert-success {
  border-left: 4px solid #4CAF50 !important;
  color: #a5d6a7 !important;
}
.alert-warning {
  border-left: 4px solid var(--sme-gold) !important;
  color: var(--sme-gold-light) !important;
}
.alert-danger {
  border-left: 4px solid #e57373 !important;
  color: #ef9a9a !important;
}
.alert-info {
  border-left: 4px solid #64b5f6 !important;
  color: #90caf9 !important;
}

/* ── Tables ────────────────────────────────────────────────── */
.table,
table {
  color: var(--sme-white-muted) !important;
  font-family: var(--sme-font-body) !important;
}
.table th,
thead th {
  background-color: var(--sme-black-soft) !important;
  color: var(--sme-gold) !important;
  font-family: var(--sme-font-body) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sme-black-border) !important;
}
.table td, tbody td {
  border-top-color: var(--sme-black-border) !important;
  vertical-align: middle;
}
.table-hover tbody tr:hover td {
  background-color: rgba(212,175,55,0.04) !important;
}
.table-striped tbody tr:nth-of-type(odd) td {
  background-color: rgba(255,255,255,0.02) !important;
}

/* ── Modals ────────────────────────────────────────────────── */
.modal-content {
  background-color: var(--sme-black-card) !important;
  border: 1px solid var(--sme-black-border) !important;
  border-radius: var(--sme-radius-lg) !important;
  color: var(--sme-white) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.7) !important;
}
.modal-header {
  border-bottom: 1px solid var(--sme-black-border) !important;
  padding: 1.25rem 1.5rem !important;
}
.modal-header .modal-title {
  font-family: var(--sme-font-head) !important;
  color: var(--sme-white) !important;
  font-size: 1.25rem;
  font-weight: 700;
}
.modal-footer {
  border-top: 1px solid var(--sme-black-border) !important;
}
.modal-backdrop { background-color: rgba(0,0,0,0.75) !important; }
.btn-close { filter: invert(1) !important; }

/* ── Pagination ────────────────────────────────────────────── */
.pagination .page-item .page-link {
  background-color: var(--sme-black-card) !important;
  border-color: var(--sme-black-border) !important;
  color: var(--sme-white-muted) !important;
  font-family: var(--sme-font-body) !important;
  font-size: 0.875rem;
}
.pagination .page-item.active .page-link {
  background-color: var(--sme-gold) !important;
  border-color: var(--sme-gold) !important;
  color: var(--sme-black) !important;
  font-weight: 600;
}
.pagination .page-item .page-link:hover {
  background-color: var(--sme-black-border) !important;
  color: var(--sme-gold) !important;
}

/* ── Footer ────────────────────────────────────────────────── */
footer,
.site-footer,
.lms-footer,
.footer {
  background-color: var(--sme-black-soft) !important;
  border-top: 1px solid var(--sme-black-border) !important;
  color: var(--sme-white-faint) !important;
  font-family: var(--sme-font-body) !important;
  font-size: 0.85rem;
  padding: 3rem 1.5rem !important;
}

footer h5,
.footer h5,
footer .footer-heading {
  font-family: var(--sme-font-head) !important;
  color: var(--sme-gold) !important;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}

footer a,
.footer a {
  color: var(--sme-white-muted) !important;
  font-size: 0.85rem;
  transition: color var(--sme-transition) !important;
}
footer a:hover,
.footer a:hover {
  color: var(--sme-gold) !important;
}

.footer-divider,
footer hr {
  border-color: var(--sme-black-border) !important;
  margin: 2rem 0 !important;
}

footer .copyright,
.footer .copyright {
  color: var(--sme-white-faint) !important;
  font-size: 0.8rem;
}

/* ── Frappe LMS Specific Overrides ────────────────────────── */

/* Page wrapper */
.page-container,
.container-fluid,
main.content,
.main-content,
[data-component="page-content"] {
  background-color: var(--sme-black) !important;
}

/* Section headings with gold accent line */
.section-title,
.lms-section-title {
  font-family: var(--sme-font-head) !important;
  color: var(--sme-white) !important;
  font-weight: 700;
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 1.5rem;
}
.section-title::after,
.lms-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--sme-gold), transparent);
}

/* Tag pills */
.tag,
.lms-tag,
.topic-tag {
  background-color: rgba(212,175,55,0.1) !important;
  color: var(--sme-gold) !important;
  border: 1px solid rgba(212,175,55,0.25) !important;
  border-radius: 100px !important;
  font-family: var(--sme-font-body) !important;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.2em 0.75em !important;
}

/* Star ratings */
.rating .star,
.lms-rating .star {
  color: var(--sme-gold) !important;
}
.rating .star.empty {
  color: var(--sme-black-border) !important;
}

/* Instructor / avatar */
.avatar,
.user-avatar {
  border: 2px solid var(--sme-gold-dim) !important;
}

/* Breadcrumbs */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
}
.breadcrumb-item a {
  color: var(--sme-gold) !important;
  font-size: 0.85rem;
}
.breadcrumb-item.active {
  color: var(--sme-white-faint) !important;
  font-size: 0.85rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--sme-black-border) !important;
}

/* Dividers */
hr {
  border-color: var(--sme-black-border) !important;
  opacity: 1 !important;
}

/* Frappe card generic */
.frappe-card,
.card {
  background-color: var(--sme-black-card) !important;
  border: 1px solid var(--sme-black-border) !important;
  border-radius: var(--sme-radius-lg) !important;
  color: var(--sme-white) !important;
}
.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--sme-black-border) !important;
  font-family: var(--sme-font-head) !important;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sme-white) !important;
}

/* Frappe LMS video player wrapper */
.video-player-wrapper,
.vdo-player-wrapper {
  background-color: #000 !important;
  border-radius: var(--sme-radius) !important;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,0.7);
}

/* Quiz / assignment blocks */
.quiz-container,
.assignment-container {
  background-color: var(--sme-black-card) !important;
  border: 1px solid var(--sme-black-border) !important;
  border-radius: var(--sme-radius-lg) !important;
  padding: 2rem !important;
}

/* Correct / incorrect answer feedback */
.answer-correct { color: #81c784 !important; }
.answer-incorrect { color: #e57373 !important; }

/* ── Leaderboard ───────────────────────────────────────────── */
.leaderboard-row,
.leaderboard tr {
  border-bottom: 1px solid var(--sme-black-border) !important;
  transition: background-color var(--sme-transition) !important;
}
.leaderboard-row:hover,
.leaderboard tr:hover {
  background-color: rgba(212,175,55,0.04) !important;
}
.leaderboard .rank-1 .rank-badge,
.leaderboard-rank-1 {
  color: var(--sme-gold) !important;
  font-family: var(--sme-font-head) !important;
  font-size: 1.1rem;
  font-weight: 700;
}

/* ── Utility Classes ───────────────────────────────────────── */
.text-gold     { color: var(--sme-gold) !important; }
.text-white    { color: var(--sme-white) !important; }
.bg-dark-card  { background-color: var(--sme-black-card) !important; }
.border-gold   { border-color: var(--sme-gold) !important; }
.font-heading  { font-family: var(--sme-font-head) !important; }
.font-body     { font-family: var(--sme-font-body) !important; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lesson-sidebar,
  .lms-sidebar,
  .course-sidebar {
    border-right: none !important;
    border-bottom: 1px solid var(--sme-black-border) !important;
    min-height: unset;
  }

  .lms-hero,
  .hero-section {
    padding: 3rem 1rem !important;
  }

  .course-card:hover,
  .lms-course-card:hover {
    transform: none !important;
  }
}

/* ── Frappe LMS Vue Design Token Overrides ─────────────────── */
/*
 * The Frappe LMS Vue SPA uses Tailwind utility classes that map to CSS
 * custom properties (e.g. bg-surface-menu-bar → var(--surface-menu-bar)).
 * Scoping overrides to #app ensures they only apply inside the Vue mount
 * point and do not bleed into the Frappe Desk or other non-LMS pages.
 */

#app {
  /* ── Surface backgrounds ─────────────────────────────────── */
  --surface-menu-bar:    #111111;   /* sidebar / top nav */
  --surface-white:       #0A0A0A;   /* main content area */
  --surface-gray-1:      #161616;   /* subtle offset surface, course card body */
  --surface-gray-2:      #1A1A1A;   /* hover backgrounds */
  --surface-gray-3:      #2A2A2A;   /* active / pressed state */
  --surface-gray-4:      #333333;   /* stronger dividers */
  --surface-gray-5:      #3D3D3D;   /* disabled backgrounds */
  --surface-modal:       #161616;   /* modal / card / popover */
  --surface-section:     #0E0E0E;   /* page section bands */

  /* ── Blue → Gold token remaps (buttons, links, badges) ───── */
  --surface-blue-1:      rgba(212, 175, 55, 0.08);
  --surface-blue-2:      rgba(212, 175, 55, 0.15);  /* button bg */
  --surface-blue-3:      rgba(212, 175, 55, 0.25);
  --ink-blue-1:          #A08820;
  --ink-blue-2:          #C49E2A;
  --ink-blue-3:          #D4AF37;   /* primary button / link text */

  /* ── Amber tokens (warnings, highlights) ─────────────────── */
  --surface-amber-1:     rgba(212, 175, 55, 0.10);
  --surface-amber-2:     rgba(212, 175, 55, 0.20);
  --ink-amber-3:         #D4AF37;

  /* ── Ink (text) tokens ───────────────────────────────────── */
  --ink-gray-9:          #FAFAF8;   /* primary text */
  --ink-gray-8:          #E0DEDC;   /* icon / button text */
  --ink-gray-7:          #AAAAAA;   /* secondary / supporting text */
  --ink-gray-6:          #888884;   /* placeholder / subtle text — min contrast */
  --ink-gray-5:          #666662;   /* disabled text */
  --ink-gray-4:          #555552;   /* muted label text */
  --ink-gray-3:          #444442;
  --ink-gray-2:          #333330;
  --ink-gray-1:          #222220;

  /* ── Outline / border tokens ─────────────────────────────── */
  --outline-gray-1:      #1E1E1E;
  --outline-gray-2:      #2A2A2A;
  --outline-gray-3:      #D4AF37;   /* focus rings, active borders */
  --outline-gray-4:      #2A2A2A;
  --outline-blue-3:      #D4AF37;   /* blue focus ring → gold */

  /* ── Green → keep semantic green but darken surface ─────── */
  --surface-green-1:     rgba(76, 175, 80, 0.08);
  --surface-green-2:     rgba(76, 175, 80, 0.15);
  --ink-green-3:         #81c784;

  /* ── Red → keep semantic red but darken surface ──────────── */
  --surface-red-1:       rgba(229, 115, 115, 0.08);
  --surface-red-2:       rgba(229, 115, 115, 0.15);
  --ink-red-3:           #e57373;

  /* ── Font tokens ─────────────────────────────────────────── */
  --font-stack-sans:     'Inter', system-ui, sans-serif;
}

/* Force backgrounds that Tailwind applies as inline bg- utilities */
#app [class*="bg-surface-white"]     { background-color: #0A0A0A !important; }
#app [class*="bg-surface-gray-1"]    { background-color: #161616 !important; }
#app [class*="bg-surface-gray-2"]    { background-color: #1A1A1A !important; }
#app [class*="bg-surface-gray-3"]    { background-color: #2A2A2A !important; }
#app [class*="bg-surface-gray-4"]    { background-color: #333333 !important; }
#app [class*="bg-surface-menu-bar"]  { background-color: #111111 !important; }
#app [class*="bg-surface-modal"]     { background-color: #161616 !important; }
#app [class*="bg-surface-blue-2"]    { background-color: rgba(212,175,55,0.15) !important; }
#app [class*="bg-surface-blue-1"]    { background-color: rgba(212,175,55,0.08) !important; }
#app [class*="bg-surface-amber-1"]   { background-color: rgba(212,175,55,0.10) !important; }

/* Text token utilities */
#app [class*="text-ink-gray-9"]  { color: #FAFAF8 !important; }
#app [class*="text-ink-gray-8"]  { color: #E0DEDC !important; }
#app [class*="text-ink-gray-7"]  { color: #AAAAAA !important; }
#app [class*="text-ink-gray-6"]  { color: #888884 !important; }
#app [class*="text-ink-blue-3"]  { color: #D4AF37 !important; }
#app [class*="text-ink-amber-3"] { color: #D4AF37 !important; }

/* Border token utilities */
#app [class*="border-outline-gray-2"] { border-color: #2A2A2A !important; }
#app [class*="border-outline-gray-3"] { border-color: #D4AF37 !important; }
#app [class*="border-outline-blue-3"] { border-color: #D4AF37 !important; }

/* Catch-all: strip hard-coded white/near-white backgrounds inside #app */
#app [style*="background-color: rgb(255, 255, 255)"],
#app [style*="background-color: #fff"],
#app [style*="background-color: #ffffff"],
#app [style*="background-color: white"] {
  background-color: #161616 !important;
}
#app [style*="color: rgb(0, 0, 0)"],
#app [style*="color: #000"],
#app [style*="color: black"] {
  color: #FAFAF8 !important;
}

/* ── v3: My Account Page (/me) ─────────────────────────────── */

/* Page background */
body[data-route="me"],
body[data-route^="me/"],
.my-account-page {
  background-color: #0A0A0A !important;
}

/* Account / profile cards — named variants and generic .card */
.my-account-card,
.account-card,
.profile-card,
.user-profile-card,
.edit-profile-card,
.card,
.card-body {
  background-color: #161616 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 12px !important;
  color: #FAFAF8 !important;
}

/* Prevent card-header from double-bordering */
.card > .card-header {
  background-color: transparent !important;
  border-bottom: 1px solid #2A2A2A !important;
  color: #FAFAF8 !important;
}

/* Text inside account cards */
.my-account-card p,
.my-account-card span,
.account-card p,
.account-card span,
.card p,
.card span {
  color: #E0DEDC !important;
}

.my-account-card .text-muted,
.account-card .text-muted,
.card .text-muted {
  color: #AAAAAA !important;
}

/* Input fields on /me page */
.my-account-card input,
.account-card input,
.my-account-card textarea,
.account-card textarea,
.my-account-card select,
.account-card select {
  background-color: #0A0A0A !important;
  border: 1px solid #2A2A2A !important;
  color: #FAFAF8 !important;
}

/* ── v3: Course Card White Bottom Section (inside #app) ─────── */

/* bg-white utility Tailwind class */
#app .bg-white {
  background-color: #161616 !important;
}

/* surface-white token applied as a utility or inline */
#app [class*="bg-surface-white"],
#app [class*="surface-white"] {
  background-color: #161616 !important;
}

/* surface-gray-1 used for card info sections */
#app [class*="bg-surface-gray-1"] {
  background-color: #161616 !important;
}

/* Last child div of a course card = info section below thumbnail */
#app .course-card > div:last-child,
#app [class*="course-card"] > div:last-child {
  background-color: #161616 !important;
  color: #FAFAF8 !important;
}

/* Tailwind beige/off-white tones that Frappe LMS uses on thumbnails */
#app [class*="bg-gray-50"]  { background-color: #161616 !important; }
#app [class*="bg-gray-100"] { background-color: #1A1A1A !important; }
#app [class*="bg-gray-200"] { background-color: #2A2A2A !important; }
#app [class*="bg-neutral-50"]  { background-color: #161616 !important; }
#app [class*="bg-neutral-100"] { background-color: #1A1A1A !important; }
#app [class*="bg-zinc-50"]  { background-color: #161616 !important; }
#app [class*="bg-zinc-100"] { background-color: #1A1A1A !important; }

/* ── v3: Frappe Desk (/app) Dark Theme ─────────────────────── */

/* Desk navbar */
.navbar.navbar-default,
.navbar-main,
.desk-navbar,
header.navbar {
  background-color: #0A0A0A !important;
  border-bottom: 1px solid #2A2A2A !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
}

/* Page title */
.page-title,
.title-area .page-title,
h1.page-title {
  color: #FAFAF8 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
}

/* Main content areas */
.page-container,
.layout-main,
.layout-main-section,
.main-section,
.layout-main-section-wrapper {
  background-color: #0A0A0A !important;
  color: #E0DEDC !important;
}

/* Desk content containers */
.page-content-wrapper,
.page-body,
.row.layout-main {
  background-color: #0A0A0A !important;
}

/* Frappe cards and form layouts */
.frappe-card,
.form-layout,
.form-page,
.standard-form-section,
.section-body,
.form-section,
.form-column {
  background-color: #161616 !important;
  border: 1px solid #2A2A2A !important;
  color: #E0DEDC !important;
}

/* Page head bar (breadcrumb + action buttons strip) */
.page-head,
.page-head-content,
.title-area {
  background-color: #0A0A0A !important;
  border-bottom: 1px solid #2A2A2A !important;
}

/* Form labels in desk */
.page-form label,
.form-layout label,
.control-label {
  color: #AAAAAA !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

/* Form inputs in desk */
.page-form input,
.form-layout input,
.form-layout textarea,
.form-layout select,
.page-form textarea,
.page-form select,
.input-with-feedback {
  background-color: #0A0A0A !important;
  border: 1px solid #2A2A2A !important;
  color: #FAFAF8 !important;
}
.page-form input:focus,
.form-layout input:focus,
.form-layout textarea:focus {
  border-color: #D4AF37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
}

/* List view rows */
.list-row,
.list-row-container,
.list-row-col,
.result-list .list-row {
  background-color: #0A0A0A !important;
  border-bottom: 1px solid #1E1E1E !important;
  color: #E0DEDC !important;
}
.list-row:hover,
.result-list .list-row:hover {
  background-color: #161616 !important;
}

/* Desk sidebar */
.desk-sidebar,
.sidebar-menu,
.layout-side-section {
  background-color: #111111 !important;
  border-right: 1px solid #2A2A2A !important;
}
.desk-sidebar a,
.sidebar-menu a {
  color: #AAAAAA !important;
}
.desk-sidebar a:hover,
.sidebar-menu a:hover,
.desk-sidebar a.selected {
  color: #D4AF37 !important;
  background-color: rgba(212,175,55,0.06) !important;
}

/* Awesomebar / search */
.awesomebar,
#navbar-search {
  background-color: #161616 !important;
  border: 1px solid #2A2A2A !important;
  color: #FAFAF8 !important;
}

/* Dropdown menus in desk */
.dropdown-menu {
  background-color: #161616 !important;
  border: 1px solid #2A2A2A !important;
}
.dropdown-item {
  color: #E0DEDC !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #2A2A2A !important;
  color: #D4AF37 !important;
}

/* Desk tab bar */
.tab-content,
.form-tabs-list,
.nav-tabs {
  background-color: #0A0A0A !important;
  border-bottom: 1px solid #2A2A2A !important;
}
.nav-tabs .nav-link {
  color: #AAAAAA !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: #D4AF37 !important;
  border-bottom: 2px solid #D4AF37 !important;
  background-color: transparent !important;
}

/* Toasts / notifications */
.toast,
.frappe-toast {
  background-color: #161616 !important;
  border: 1px solid #2A2A2A !important;
  color: #FAFAF8 !important;
}

/* ── v3: Course Card Structural Overrides (LMS Vue) ────────── */

/* Bottom info section — exact class string from the rendered DOM:
   "flex flex-col flex-auto p-4 border-x-2 border-b-2 rounded-b-md" */
#app .border-x-2.border-b-2.rounded-b-md {
  background-color: #161616 !important;
  color: #FAFAF8 !important;
  border-color: #2A2A2A !important;
}

/* Course title inside bottom section */
#app .border-x-2.border-b-2.rounded-b-md .font-semibold {
  color: #FAFAF8 !important;
}

/* Short description / introduction text */
#app .border-x-2.border-b-2.rounded-b-md .short-introduction {
  color: #AAAAAA !important;
}

/* Icons and lesson/student count SVGs */
#app .border-x-2.border-b-2.rounded-b-md svg {
  stroke: #AAAAAA !important;
}

/* Thumbnail top section border */
#app .border-x-2.border-t-2.rounded-t-md,
#app .rounded-t-md {
  border-color: #2A2A2A !important;
}

/* Gold border sweep on card hover */
#app a:hover .border-x-2 {
  border-color: #D4AF37 !important;
}

/* Remaining white backgrounds inside #app */
#app .bg-white,
#app .bg-surface-white {
  background-color: #161616 !important;
}

/* Full card wrapper (anchor > div pattern used by LMS course cards) */
#app a > div,
#app .course-card-container {
  background-color: #161616 !important;
  border-color: #2A2A2A !important;
}

/* ── Sidebar Active / Hover State ──────────────────────────── */

/* Active selected token: gold tint instead of near-white */
#app {
  --surface-selected: rgba(212, 175, 55, 0.15);
}

/* Active/selected sidebar item background + gold left accent */
#app .bg-surface-selected {
  background-color: rgba(212, 175, 55, 0.15) !important;
  border-left: 3px solid #D4AF37 !important;
}

/* Text and icons inside the active item → gold so they pop */
#app .bg-surface-selected .text-ink-gray-8,
#app .bg-surface-selected span,
#app .bg-surface-selected svg {
  color: #D4AF37 !important;
  stroke: #D4AF37 !important;
}

/* Hover state — bright white text/icon before reaching active */
#app button:hover .text-ink-gray-8 {
  color: #FAFAF8 !important;
}

#app button:hover svg.text-ink-gray-8 {
  stroke: #FAFAF8 !important;
}

/* ── Frappe Desk Cards & Widgets ───────────────────────────── */

.widget,
.links-widget-box,
.dashboard-widget-box,
.shortcut-widget-box {
  background-color: #161616 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.widget-head {
  border-bottom: 1px solid #2A2A2A !important;
}

.widget-title,
.widget-title span {
  color: #FAFAF8 !important;
  font-weight: 600 !important;
}

.widget-subtitle {
  color: #888884 !important;
}

.link-item {
  color: #AAAAAA !important;
  border-bottom: 1px solid #1E1E1E !important;
}

.link-item:hover {
  background-color: #1E1E1E !important;
  color: #D4AF37 !important;
}

.link-text {
  color: #AAAAAA !important;
}

.link-item:hover .link-text {
  color: #D4AF37 !important;
}

/* Shortcut boxes (User 4, Role 31 etc) */
.shortcut-widget-box {
  background-color: #161616 !important;
  border: 1px solid #2A2A2A !important;
}

.shortcut-widget-box:hover {
  border-color: #D4AF37 !important;
  background-color: #1A1200 !important;
}

.shortcut-widget-box .widget-title {
  color: #FAFAF8 !important;
}

.shortcut-widget-box .count {
  color: #D4AF37 !important;
}

/* Chart widget backgrounds */
.chart-container,
.frappe-chart {
  background: transparent !important;
}

/* Chart text (axis labels) */
.frappe-chart text {
  fill: #888884 !important;
}

/* Chart grid lines */
.frappe-chart .line-horizontal {
  stroke: #2A2A2A !important;
}

/* Page container main white area */
.page-container,
.page-content-wrapper,
.layout-main-section,
.desk-page {
  background-color: #0A0A0A !important;
}

/* Module section divider */
.modules-section .section-title {
  color: #888884 !important;
}

/* Desk main content white background */
.main-section > .container,
.layout-main > .container {
  background: #0A0A0A !important;
}