/**
 * VLRS Platform Pro — sitewide professional UI (consistent brand colours)
 * Load after rs-design-tokens.css + feature CSS. Requires body.rs-platform-pro
 */

/* ——— Unified page canvas ——— */
body.rs-platform-pro.rs-body,
body.rs-platform-pro.rs-landing {
  background: var(--rs-pro-page-gradient) !important;
  color: var(--rs-pro-ink);
}

body.rs-platform-pro.rs-home.rs-landing {
  background:
    radial-gradient(ellipse 120% 80% at 50% -18%, rgba(251, 191, 36, 0.1), transparent 52%),
    radial-gradient(ellipse 55% 45% at 100% 8%, rgba(234, 88, 12, 0.06), transparent 46%),
    linear-gradient(180deg, #ffffff 0%, var(--rs-page-bg-2) 42%, var(--rs-brand-soft) 100%) !important;
}

/* ——— App shell header (learner dashboard) ——— */
body.rs-platform-pro .rs-mheader {
  background: rgba(255, 253, 250, 0.9) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(234, 88, 12, 0.1) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 28px rgba(15, 23, 42, 0.05) !important;
}

body.rs-platform-pro .rs-mheader-lg {
  font-family: var(--rs-font-display);
  color: var(--rs-brand-deep) !important;
}

/* Learner sidebar + drawer — white panel, orange accents (fix white-on-white links) */
body.rs-platform-pro .rs-dsidebar {
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
  border-right: 1px solid var(--rs-orange-border) !important;
  color: var(--rs-ink) !important;
}

body.rs-platform-pro .rs-dsidebar .rs-brand {
  color: var(--rs-orange-deep) !important;
}

body.rs-platform-pro .rs-dsidebar .rs-brand-sub {
  color: var(--rs-ink-soft) !important;
  opacity: 1 !important;
}

body.rs-platform-pro .rs-dsidebar nav a {
  color: var(--rs-ink-soft) !important;
}

body.rs-platform-pro .rs-dsidebar nav a:hover,
body.rs-platform-pro .rs-dsidebar nav a:focus-visible {
  background: var(--rs-orange-mid) !important;
  color: var(--rs-orange-deep) !important;
  box-shadow: none !important;
}

body.rs-platform-pro .rs-dsidebar nav a.is-active {
  background: var(--rs-brand-soft) !important;
  color: var(--rs-brand-deep) !important;
  border: 1px solid var(--rs-brand-border) !important;
  box-shadow: none !important;
}

body.rs-platform-pro .rs-dsidebar .rs-nav-ico,
body.rs-platform-pro .rs-dsidebar .rs-drawer-ico {
  color: var(--rs-orange) !important;
  opacity: 1 !important;
}

body.rs-platform-pro .rs-dsidebar .rs-logout {
  border-top-color: var(--rs-orange-border) !important;
}

body.rs-platform-pro .rs-dsidebar .rs-logout a {
  color: var(--rs-orange-dark) !important;
}

body.rs-platform-pro .rs-drawer {
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
  color: var(--rs-ink) !important;
  box-shadow: 4px 0 32px rgba(234, 88, 12, 0.14) !important;
}

body.rs-platform-pro .rs-drawer-head {
  background: var(--rs-orange-mid) !important;
  border-bottom-color: var(--rs-orange-border) !important;
}

body.rs-platform-pro .rs-drawer-head h2 {
  color: var(--rs-orange-deep) !important;
  text-shadow: none !important;
}

body.rs-platform-pro .rs-drawer-close {
  background: #ffffff !important;
  color: var(--rs-orange-dark) !important;
  border: 1px solid var(--rs-orange-border) !important;
}

body.rs-platform-pro .rs-drawer-close:hover,
body.rs-platform-pro .rs-drawer-close:focus-visible {
  background: var(--rs-orange-soft) !important;
}

body.rs-platform-pro .rs-drawer nav a {
  color: var(--rs-ink-soft) !important;
  border-left-color: transparent !important;
}

body.rs-platform-pro .rs-drawer nav a:hover,
body.rs-platform-pro .rs-drawer nav a:focus-visible {
  background: var(--rs-orange-mid) !important;
  color: var(--rs-orange-deep) !important;
}

body.rs-platform-pro .rs-drawer nav a.is-active {
  background: var(--rs-orange-soft) !important;
  color: var(--rs-orange-deep) !important;
  border-left-color: var(--rs-orange) !important;
}

body.rs-platform-pro .rs-drawer-footer {
  border-top-color: var(--rs-orange-border) !important;
}

body.rs-platform-pro .rs-drawer-footer a {
  color: var(--rs-orange-dark) !important;
}

body.rs-platform-pro .rs-drawer-footer a:hover,
body.rs-platform-pro .rs-drawer-footer a:focus-visible {
  background: var(--rs-orange-mid) !important;
  color: var(--rs-orange-deep) !important;
}

/* ——— Public nav ——— */
body.rs-platform-pro .rs-nav-premium {
  background: rgba(255, 253, 250, 0.92) !important;
}

/* ——— Main content rhythm ——— */
body.rs-platform-pro .rs-main {
  max-width: min(1080px, 100%);
}

body.rs-platform-pro .rs-main:has(.rs-dashboard--premium),
body.rs-platform-pro .rs-main:has(.rs-classes-page--premium),
body.rs-platform-pro .rs-main:has(.rs-lessons-page--premium) {
  padding-top: calc(56px + env(safe-area-inset-top, 0px) + 16px);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
  body.rs-platform-pro .rs-main:has(.rs-dashboard--premium),
  body.rs-platform-pro .rs-main:has(.rs-classes-page--premium),
  body.rs-platform-pro .rs-main:has(.rs-lessons-page--premium) {
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }
}

/* ——— Typography ——— */
body.rs-platform-pro .rs-page-title,
body.rs-platform-pro .rs-classes-page-title,
body.rs-platform-pro .rs-lessons-title {
  font-family: var(--rs-pro-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--rs-pro-ink);
}

body.rs-platform-pro .rs-lessons-page--premium .rs-lessons-page-title {
  font-family: var(--rs-pro-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--rs-orange-dark);
}

body.rs-platform-pro .rs-classes-page--premium .rs-classes-title {
  font-family: var(--rs-pro-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--rs-orange-dark);
}

body.rs-platform-pro .rs-dashboard--premium .rs-page-title {
  font-family: var(--rs-pro-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--rs-orange-dark);
}

body.rs-platform-pro .rs-page-sub,
body.rs-platform-pro .rs-dashboard--premium .rs-page-sub {
  color: var(--rs-pro-muted);
  font-weight: 500;
}

/* ——— Back link (all learner pages) ——— */
body.rs-platform-pro .rs-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 8px 14px 8px 10px;
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--rs-brand-deep);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--rs-pro-line);
  box-shadow: var(--rs-shadow-xs);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.rs-platform-pro .rs-back:hover,
body.rs-platform-pro .rs-back:focus-visible {
  border-color: var(--rs-brand-border);
  box-shadow: 0 4px 14px var(--rs-pro-glow);
  outline: none;
}

/* ——— Breadcrumbs ——— */
body.rs-platform-pro .rs-breadcrumb-list {
  font-size: 0.8125rem;
  font-weight: 600;
}

body.rs-platform-pro .rs-breadcrumb-list a {
  color: var(--rs-brand-dark);
}

/* ——— Pro panel pattern (shared) ——— */
body.rs-platform-pro .rs-pro-panel {
  border-radius: var(--rs-pro-panel-radius);
  background: var(--rs-surface);
  border: 1px solid var(--rs-pro-line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 40px -20px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

body.rs-platform-pro .rs-lessons-page--premium .rs-lessons-panel {
  border-radius: var(--rs-pro-panel-radius);
  background: #ffffff;
  border: 1px solid rgba(234, 88, 12, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 40px -16px rgba(234, 88, 12, 0.1);
  overflow: hidden;
}

body.rs-platform-pro .rs-classes-page--premium .rs-classes-panel {
  border-radius: var(--rs-pro-panel-radius);
  background: #ffffff;
  border: 1px solid rgba(234, 88, 12, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 40px -16px rgba(234, 88, 12, 0.1);
  overflow: hidden;
}

/* Dashboard panels — layout only; colours in dashboard-home.css */
body.rs-platform-pro .rs-dashboard--premium .rs-layer--dash {
  border-radius: var(--rs-pro-panel-radius);
  overflow: hidden;
}

body.rs-platform-pro .rs-pro-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(180deg, #fafaf9 0%, #fff 100%);
}

body.rs-platform-pro .rs-lessons-page--premium .rs-lessons-section-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 18px;
  border-bottom: 1px solid rgba(234, 88, 12, 0.14);
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

body.rs-platform-pro .rs-classes-page--premium .rs-classes-section-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(234, 88, 12, 0.14);
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

/* Dashboard section heads — dashboard-home.css */

body.rs-platform-pro .rs-pro-panel-head--hero {
  background: var(--rs-pro-panel-bg);
  border-bottom: 1px solid #f1f5f9;
}

body.rs-platform-pro .rs-classes-page--premium .rs-classes-hero__body {
  border-bottom: none;
}

body.rs-platform-pro .rs-pro-panel-accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(251, 191, 36, 0.7) 25%,
    var(--rs-brand) 50%,
    rgba(251, 191, 36, 0.6) 75%,
    transparent
  );
  pointer-events: none;
}

body.rs-platform-pro .rs-pro-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--rs-brand-soft), var(--rs-brand-mid));
  border: 1px solid rgba(234, 88, 12, 0.18);
  color: var(--rs-brand-deep);
}

body.rs-platform-pro .rs-lessons-page--premium .rs-lessons-section-icon,
body.rs-platform-pro .rs-classes-page--premium .rs-classes-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid rgba(234, 88, 12, 0.22);
  color: var(--rs-brand-deep);
  box-shadow: none;
}

body.rs-platform-pro .rs-pro-eyebrow,
body.rs-platform-pro .rs-classes-eyebrow,
body.rs-platform-pro .rs-dashboard-eyebrow {
  margin: 0 0 8px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rs-brand-deep);
}

body.rs-platform-pro .rs-lessons-page--premium .rs-lessons-eyebrow {
  margin: 0 0 8px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rs-brand-deep);
}

/* ——— Cards & rows ——— */
body.rs-platform-pro .rs-course-card,
body.rs-platform-pro .rs-topic-row,
body.rs-platform-pro .rs-chapter-row,
body.rs-platform-pro .rs-foundation-chapter-row,
body.rs-platform-pro .rs-lessons-chapter-row,
body.rs-platform-pro .rs-class-card {
  border-radius: 16px;
  border-color: rgba(234, 88, 12, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Dashboard tiles — dashboard-home.css */

body.rs-platform-pro .rs-course-card:hover,
body.rs-platform-pro .rs-topic-row:hover,
body.rs-platform-pro .rs-foundation-chapter-row:hover,
body.rs-platform-pro .rs-lessons-chapter-row:hover,
body.rs-platform-pro .rs-class-card:hover {
  border-color: rgba(234, 88, 12, 0.38);
  box-shadow: 0 12px 28px -8px var(--rs-pro-glow);
  transform: translateY(-2px);
}

/* Dashboard tile hovers — dashboard-home.css */

body.rs-platform-pro .rs-btn-primary,
body.rs-platform-pro .rs-btn-main {
  background: linear-gradient(165deg, var(--rs-brand-hover) 0%, var(--rs-brand) 52%, var(--rs-brand-dark) 100%) !important;
  box-shadow: var(--rs-shadow-orange), var(--rs-shadow-inset-shine) !important;
}

/* ——— Auth pages — orange + white, readable type ——— */
body.rs-platform-pro.rs-auth-page,
body.rs-platform-pro .auth-page {
  color: var(--rs-ink);
  background:
    radial-gradient(ellipse 100% 72% at 50% -12%, rgba(251, 146, 60, 0.16), transparent 58%),
    radial-gradient(ellipse 50% 40% at 100% 8%, rgba(234, 88, 12, 0.08), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #fff7ed 48%, #ffffff 100%);
}

body.rs-platform-pro .auth-topbar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--rs-orange-border) !important;
}

body.rs-platform-pro .auth-card {
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--rs-orange-border) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 20px 48px -20px rgba(234, 88, 12, 0.14),
    0 8px 24px -8px rgba(15, 23, 42, 0.08) !important;
}

body.rs-platform-pro .auth-card h1 {
  color: var(--rs-orange-deep) !important;
}

body.rs-platform-pro .auth-card .auth-lead,
body.rs-platform-pro .auth-portal-switch {
  color: var(--rs-ink-soft) !important;
}

body.rs-platform-pro .auth-label {
  color: var(--rs-orange-deep) !important;
}

body.rs-platform-pro .auth-brand-name {
  color: var(--rs-orange-deep) !important;
}

body.rs-platform-pro .auth-brand-accent {
  color: var(--rs-orange-dark) !important;
}

/* ——— Lesson hub ——— */
body.rs-platform-pro .rs-lesson-hub .rs-lesson-hero {
  border-radius: var(--rs-pro-panel-radius);
  background: var(--rs-pro-panel-bg);
  border: 1px solid var(--rs-pro-panel-border);
  box-shadow: var(--rs-pro-panel-shadow);
}

body.rs-platform-pro .rs-lesson-hub-title {
  font-family: var(--rs-pro-font-display);
}

/* ——— Footer ——— */
body.rs-platform-pro .rs-footer {
  margin-top: clamp(32px, 6vw, 56px);
}

/* ——— Remove per-page duplicate canvases (single source above) ——— */
/* Learner pages — orange + white canvas */
body.rs-platform-pro.rs-body:has(.rs-lessons-page--premium),
body.rs-platform-pro.rs-body:has(.rs-classes-page--premium),
body.rs-platform-pro.rs-body:has(.rs-dashboard--premium) {
  background:
    radial-gradient(ellipse 85% 55% at 0% 0%, rgba(251, 146, 60, 0.1), transparent 55%),
    radial-gradient(ellipse 70% 45% at 100% 8%, rgba(234, 88, 12, 0.06), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #fff7ed 38%, #ffffff 100%) !important;
}

body.rs-platform-pro:has(.rs-lessons-page--premium) .rs-mheader,
body.rs-platform-pro:has(.rs-classes-page--premium) .rs-mheader,
body.rs-platform-pro:has(.rs-dashboard--premium) .rs-mheader {
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.94)) !important;
  border-bottom: 1px solid rgba(234, 88, 12, 0.2) !important;
}

body.rs-platform-pro:has(.rs-lessons-page--premium) .rs-mheader-lg,
body.rs-platform-pro:has(.rs-classes-page--premium) .rs-mheader-lg,
body.rs-platform-pro:has(.rs-dashboard--premium) .rs-mheader-lg {
  color: var(--rs-orange-dark) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.rs-platform-pro .rs-course-card,
  body.rs-platform-pro .rs-foundation-chapter-row,
  body.rs-platform-pro .rs-class-card,
  body.rs-platform-pro .rs-back {
    transition: none;
  }
}