/* master/lms/assets/css/lms_theme.css
   THEME LAYER for LMS
   Load AFTER: lms.css (base) + any page CSS

   RULES:
   - Tokens + visuals only (no layout)
   - Scope all visuals under body.lms-theme-*
   - NO page-specific visuals in this file (Option A lockdown)
*/

/* ============================================================
   1) THEME TOKENS
   ============================================================ */

/* ASC THEME */
body.lms-theme-asc{
  --lms-accent: #f37021;
  --lms-accent-2: #ff8b47;

  --lms-bg: #0b0b0b;
  --lms-card-bg: #141414;
  --lms-surface-2: #050505;

  --lms-border: rgba(255,255,255,.10);
  --lms-border-soft: rgba(255,255,255,.16);

  --lms-text: #ffffff;
  --lms-muted: rgba(255,255,255,.72);

  --lms-success: #22c55e;
  --lms-danger: #dc2626;

  --lms-warning: #f37021; /* ASC orange */
  --lms-info: rgba(255,255,255,.92);

  /* ✅ Theme-owned “Old Glory” stripe tokens (opt-in utility uses these) */
  --lms-stripe-a: #B31942; /* red */
  --lms-stripe-b: #FFFFFF; /* white */
  --lms-stripe-c: #0A3161; /* blue */

  /* ✅ Theme-owned metric visuals (layout lives in base css) */
  --lms-metric-bg: rgba(255,255,255,.045);
  --lms-metric-border: rgba(255,255,255,.12);
  --lms-metric-label: rgba(255,255,255,.76);
  --lms-metric-value: #ffffff;

  background: var(--lms-bg);
}

/* GETOUT THEME */
body.lms-theme-getout{
  --lms-accent: #0A3161;      /* Old Glory blue */
  --lms-accent-2: #B31942;    /* Old Glory red */

  --lms-bg: #060b14;
  --lms-card-bg: #0A3161;     /* solid card surface */
  --lms-surface-2: #061B3A;

  --lms-border: rgba(255,255,255,.14);
  --lms-border-soft: rgba(255,255,255,.22);

  --lms-text: #ffffff;
  --lms-muted: rgba(255,255,255,.78);

  --lms-success: #22c55e;
  --lms-danger: #B31942;

  --lms-warning: #FFBF00;
  --lms-info: rgba(255,255,255,.92);

  /* ✅ Theme-owned “Old Glory” stripe tokens (opt-in utility uses these) */
  --lms-stripe-a: #B31942; /* red */
  --lms-stripe-b: #FFFFFF; /* white */
  --lms-stripe-c: #0A3161; /* blue */

  /* ✅ Theme-owned metric visuals (layout lives in base css) */
  --lms-metric-bg: rgba(255,255,255,.045);
  --lms-metric-border: rgba(255,255,255,.12);
  --lms-metric-label: rgba(255,255,255,.78);
  --lms-metric-value: #ffffff;
}

/* Optional GetOut background skin */
body.lms-theme-getout{
  background:
    radial-gradient(1200px 600px at 30% -10%, rgba(10,49,97,.35), rgba(0,0,0,0) 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(179,25,66,.20), rgba(0,0,0,0) 55%),
    var(--lms-bg);
}

/* Base body text color (theme-owned) */
body.lms-theme-asc,
body.lms-theme-getout{
  color: var(--lms-text);
}

/* ============================================================
   2) HEADER VISUAL SKIN (NO LAYOUT)
   ============================================================ */

body.lms-theme-getout .lms-go-header{
  background: linear-gradient(90deg, #0A3161 0%, #B31942 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,.70);
  position: relative;
  z-index: 90;
}

body.lms-theme-getout .lms-go-brand-mark{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}

body.lms-theme-getout .lms-go-brand-text{
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

body.lms-theme-getout .lms-go-nav .nav-link{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
}

body.lms-theme-getout .lms-go-nav .nav-link:hover{ color: #fff; }

body.lms-theme-getout .lms-go-nav .nav-link.active{
  border-bottom-color: rgba(255,255,255,0.95);
}

body.lms-theme-getout .lms-go-user-meta{
  color: rgba(255,255,255,0.92);
}

body.lms-theme-getout .lms-go-logout-btn{
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.08);
}

body.lms-theme-getout .lms-go-logout-btn:hover{
  background: rgba(255,255,255,0.14);
}

/* ============================================================
   3) CARDS — SOLID + HARD STRIPE (TOP LEVEL ONLY)
   ============================================================ */

body.lms-theme-getout .lms-card,
body.lms-theme-getout .course-card,
body.lms-theme-getout .dashboard-card,
body.lms-theme-getout .lms-side-card,
body.lms-theme-getout .manage-courses-card{
  background-color: var(--lms-card-bg) !important;
  background-image: none !important;
  opacity: 1 !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.40);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
}

/* Stripe ONLY on top-level cards (direct children of the page wrapper) */
body.lms-theme-getout .lms-page > .lms-card::before,
body.lms-theme-getout .lms-page > .course-card::before,
body.lms-theme-getout .lms-page > .dashboard-card::before,
body.lms-theme-getout .lms-page > .lms-side-card::before,
body.lms-theme-getout .lms-page > .manage-courses-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:8px;
  background: linear-gradient(
    90deg,
    #B31942 0%,
    #B31942 33.333%,
    #FFFFFF 33.333%,
    #FFFFFF 66.666%,
    #0A3161 66.666%,
    #0A3161 100%
  );
  opacity: 1 !important;
  z-index: 1;
}

body.lms-theme-getout .lms-card > *,
body.lms-theme-getout .course-card > *,
body.lms-theme-getout .dashboard-card > *,
body.lms-theme-getout .lms-side-card > *,
body.lms-theme-getout .manage-courses-card > *{
  position: relative;
  z-index: 2;
}

/* ✅ OPT-IN STRIPE UTILITY (works on ANY card in ANY theme)
   Use: class="lms-card og-striped" (or any card element with og-striped)
*/
body.lms-theme-asc .og-striped,
body.lms-theme-getout .og-striped{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.lms-theme-asc .og-striped::before,
body.lms-theme-getout .og-striped::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:8px;
  background: linear-gradient(
    90deg,
    var(--lms-stripe-a) 0%,
    var(--lms-stripe-a) 33.333%,
    var(--lms-stripe-b) 33.333%,
    var(--lms-stripe-b) 66.666%,
    var(--lms-stripe-c) 66.666%,
    var(--lms-stripe-c) 100%
  );
  opacity: 1;
  z-index: 1;
  pointer-events:none;
}
body.lms-theme-asc .og-striped > *,
body.lms-theme-getout .og-striped > *{
  position: relative;
  z-index: 2;
}

/* Nested card surface */
body.lms-theme-getout .course-manage-card,
body.lms-theme-getout .module-card{
  border-radius: 14px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}

/* ============================================================
   4) BUTTON ROLES (GLOBAL)
   ============================================================ */

/* PRIMARY */
body.lms-theme-asc .btn-primary,
body.lms-theme-getout .btn-primary{
  background: var(--lms-accent) !important;
  border-color: var(--lms-accent) !important;
  color: #fff !important;
}

/* SECONDARY / OUTLINE */
body.lms-theme-asc .btn-secondary,
body.lms-theme-getout .btn-secondary,
body.lms-theme-asc .btn-outline,
body.lms-theme-getout .btn-outline,
body.lms-theme-asc .btn-outline-secondary,
body.lms-theme-getout .btn-outline-secondary{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: rgba(255,255,255,0.95) !important;
}

body.lms-theme-asc .btn-secondary:hover,
body.lms-theme-getout .btn-secondary:hover,
body.lms-theme-asc .btn-outline:hover,
body.lms-theme-getout .btn-outline:hover,
body.lms-theme-asc .btn-outline-secondary:hover,
body.lms-theme-getout .btn-outline-secondary:hover{
  background: rgba(255,255,255,0.10) !important;
}

/* WARNING (solid) */
body.lms-theme-asc .btn-warning,
body.lms-theme-getout .btn-warning{
  background: var(--lms-warning) !important;
  border-color: var(--lms-warning) !important;
  color: #111 !important;
}

/* WARNING OUTLINE */
body.lms-theme-asc .btn-warning-outline,
body.lms-theme-getout .btn-warning-outline{
  background: transparent !important;
  border-color: var(--lms-warning) !important;
  color: var(--lms-warning) !important;
}
body.lms-theme-asc .btn-warning-outline:hover,
body.lms-theme-getout .btn-warning-outline:hover{
  background: rgba(255,255,255,0.08) !important;
}

/* SUCCESS */
body.lms-theme-asc .btn-success,
body.lms-theme-getout .btn-success{
  background: var(--lms-success) !important;
  border-color: var(--lms-success) !important;
  color: #fff !important;
}

/* DANGER */
body.lms-theme-asc .btn-danger,
body.lms-theme-getout .btn-danger{
  background: var(--lms-danger) !important;
  border-color: var(--lms-danger) !important;
  color: #fff !important;
}

/* INFO */
body.lms-theme-asc .btn-info,
body.lms-theme-getout .btn-info{
  background: transparent !important;
  border: 1.5px solid var(--lms-info) !important;
  color: var(--lms-info) !important;
}
body.lms-theme-asc .btn-info:hover,
body.lms-theme-getout .btn-info:hover{
  background: rgba(255,255,255,0.08) !important;
}

/* LIGHT */
body.lms-theme-asc .btn-light,
body.lms-theme-getout .btn-light{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* ============================================================
   5) STATUS PILLS (GLOBAL)
   ============================================================ */

body.lms-theme-asc .lms-status-pill,
body.lms-theme-getout .lms-status-pill{
  background: rgba(255,255,255,0.05);
}

body.lms-theme-asc .lms-status-pill .dot,
body.lms-theme-getout .lms-status-pill .dot{
  background: rgba(255,255,255,0.7);
}

/* Optional GetOut variants (global usage elsewhere) */
body.lms-theme-getout .lms-status-pill{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
}
body.lms-theme-getout .lms-status-pill.is-complete{
  background: rgba(10,49,97,0.28);
  border-color: rgba(10,49,97,0.55);
}
body.lms-theme-getout .lms-status-pill.is-inprogress{
  background: rgba(179,25,66,0.20);
  border-color: rgba(179,25,66,0.55);
}

/* ============================================================
   6) QUIZ VISUALS (THEME-OWNED)
   ============================================================ */

body.lms-theme-asc .lms-quiz-choice,
body.lms-theme-getout .lms-quiz-choice{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--lms-border-soft);
  color: var(--lms-text);
}

body.lms-theme-asc .lms-quiz-choice:hover,
body.lms-theme-getout .lms-quiz-choice:hover{
  background: rgba(255,255,255,0.09);
  filter: brightness(1.03);
}

body.lms-theme-asc .lms-quiz-choice.selected,
body.lms-theme-getout .lms-quiz-choice.selected{
  border-color: var(--lms-accent);
  box-shadow: 0 0 0 2px rgba(243,112,33,0.25);
}

body.lms-theme-getout .lms-quiz-choice.selected{
  box-shadow: 0 0 0 2px rgba(10,49,97,0.35);
}

body.lms-theme-asc .lms-quiz-choice input[type="radio"]{ accent-color: var(--lms-accent); }
body.lms-theme-getout .lms-quiz-choice input[type="radio"]{ accent-color: #ffffff; }

body.lms-theme-asc #quiz-btn-question-list{
  position: relative;
  box-shadow: 0 0 0 2px rgba(243,112,33,0.70);
}
body.lms-theme-getout #quiz-btn-question-list{
  position: relative;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.45);
}

body.lms-theme-asc #quiz-btn-question-list.has-marked::after,
body.lms-theme-getout #quiz-btn-question-list.has-marked::after{
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--lms-warning);
  box-shadow: 0 0 0 2px rgba(0,0,0,.55);
}

body.lms-theme-asc #quiz-btn-mark.is-marked,
body.lms-theme-getout #quiz-btn-mark.is-marked{
  background: var(--lms-warning) !important;
  border-color: var(--lms-warning) !important;
  color: #111 !important;
}

body.lms-theme-asc .lms-modal-content.lms-quiz-question-list-modal,
body.lms-theme-getout .lms-modal-content.lms-quiz-question-list-modal{
  background: rgba(25,25,25,0.94);
  color: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  border-radius: 18px;
}

body.lms-theme-asc .lms-quiz-status-badge.status-not-answered,
body.lms-theme-getout .lms-quiz-status-badge.status-not-answered{ background: var(--lms-danger); }

body.lms-theme-asc .lms-quiz-status-badge.status-answered,
body.lms-theme-getout .lms-quiz-status-badge.status-answered{ background: var(--lms-success); }

body.lms-theme-asc .lms-quiz-status-badge.status-marked,
body.lms-theme-getout .lms-quiz-status-badge.status-marked{ background: var(--lms-warning); }

body.lms-theme-asc .quiz-qitem,
body.lms-theme-getout .quiz-qitem{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
}

body.lms-theme-asc .quiz-qitem.state-not-answered,
body.lms-theme-getout .quiz-qitem.state-not-answered{
  background: rgba(220,38,38,0.10);
  border-color: var(--lms-danger);
  color: rgba(255,255,255,0.95);
}

body.lms-theme-asc .quiz-qitem.state-answered,
body.lms-theme-getout .quiz-qitem.state-answered{
  background: rgba(34,197,94,0.18);
  border-color: var(--lms-success);
  color: rgba(255,255,255,0.95);
}

body.lms-theme-asc .quiz-qitem.state-marked,
body.lms-theme-getout .quiz-qitem.state-marked{
  background: rgba(243,112,33,0.18);
  border-color: var(--lms-warning);
  color: rgba(255,255,255,0.95);
}

body.lms-theme-asc .quiz-qitem.is-current{
  box-shadow: 0 0 0 3px rgba(243,112,33,0.35);
}
body.lms-theme-getout .quiz-qitem.is-current{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}

/* Modal backdrop visual */
body.lms-theme-asc .lms-modal-backdrop,
body.lms-theme-getout .lms-modal-backdrop{
  background: rgba(0,0,0,.7);
}

/* ============================================================
   NESTED STRIPE REMOVAL — single source of truth
   ============================================================ */

body.lms-theme-getout .lms-card .lms-card::before,
body.lms-theme-getout .lms-card .course-card::before,
body.lms-theme-getout .lms-card .dashboard-card::before,
body.lms-theme-getout .lms-card .lms-side-card::before,
body.lms-theme-getout .lms-card .manage-courses-card::before,
body.lms-theme-getout .lms-card .course-manage-card::before,
body.lms-theme-getout .lms-card .module-card::before,
body.lms-theme-getout .lms-card .lesson-card::before{
  content: none !important;
  display: none !important;
}

/* Optional: slightly softer nested shadows */
body.lms-theme-getout .lms-card .lms-card,
body.lms-theme-getout .lms-card .course-manage-card,
body.lms-theme-getout .lms-card .module-card{
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

/* ============================================================
   OPTIONAL nested accent bar — OPT-IN ONLY
   Add class="lms-nested-accent" to any nested card you want
   ============================================================ */

body.lms-theme-getout .lms-nested-accent{
  position: relative;
  padding-left: 22px;
}

body.lms-theme-getout .lms-nested-accent::after{
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #B31942 0%, #ffffff 50%, #0A3161 100%);
  opacity: 0.9;
}
/* ==========================================
   Primary pill buttons (CTA)
   ========================================== */

.btn-primary.btn-pill{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--lms-accent) 92%, #fff 8%),
    var(--lms-accent)
  );
  border: 1px solid color-mix(in srgb, var(--lms-accent) 75%, #000 25%);
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow:
    0 6px 16px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.btn-primary.btn-pill:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn-primary.btn-pill:active{
  transform: translateY(0);
  box-shadow:
    0 4px 10px rgba(0,0,0,.35),
    inset 0 2px 6px rgba(0,0,0,.25);
}
/* ==========================================
   Primary CTA pill — announcements / forms
   ========================================== */

.btn-primary.btn-pill{
  background: linear-gradient(
    180deg,
    var(--lms-accent-2, #ff8b47),
    var(--lms-accent, #f37021)
  );
  border: 1px solid rgba(0,0,0,.35);
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 8px 20px;
  border-radius: 999px;

  box-shadow:
    0 6px 14px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.35);

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    filter .12s ease;
}

.btn-primary.btn-pill:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.45);
}

.btn-primary.btn-pill:active{
  transform: translateY(0);
  box-shadow:
    0 4px 10px rgba(0,0,0,.45),
    inset 0 2px 6px rgba(0,0,0,.35);
}
/* =========================================================
   Announcement primary action (Create / Update)
   ========================================================= */
body.lms-theme-asc .btn-pill.btn-primary {
  background: linear-gradient(180deg, #c63a4b, #9f2435);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 4px 12px rgba(0,0,0,0.35);
}

body.lms-theme-asc .btn-pill.btn-primary:hover {
  background: linear-gradient(180deg, #d94a5c, #b12d3f);
  transform: translateY(-1px);
}

body.lms-theme-asc .btn-pill.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.35);
}
/* =========================================================
   CTA PILL OVERRIDE (wins vs .btn-primary !important)
   ========================================================= */
body.lms-theme-asc .btn-primary.btn-pill{
  background: linear-gradient(180deg, var(--lms-accent-2), var(--lms-accent)) !important;
  border-color: rgba(0,0,0,.35) !important;
  color: #fff !important;

  box-shadow:
    0 6px 14px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
}

body.lms-theme-asc .btn-primary.btn-pill:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}

body.lms-theme-asc .btn-primary.btn-pill:active{
  transform: translateY(0);
  box-shadow:
    0 4px 10px rgba(0,0,0,.45),
    inset 0 2px 6px rgba(0,0,0,.35);
}