/* ACG Inside Academy - Unified Frontend Stylesheet */
/* AUTO-GENERATED: Source: design/tokens.css + design/components.css */

/* === DESIGN TOKENS === */
/**
 * ACG Inside Academy — Design Tokens
 * Source of truth for all visual decisions.
 * DO NOT use raw hex values or magic numbers in component files — always use tokens.
 */

:root {

  /* ─────────────────────────────────────────────
     COLOR PALETTE
  ───────────────────────────────────────────── */

  /* Primary — Gold: "Moment of Truth" actions, progress, CTAs */
  --color-primary:           #D0AF21;
  --color-primary-dark:      #705d00;  /* gradient start for die-cast effect */
  --color-primary-container: #FFF5CC;
  --color-on-primary:        #1a1000;  /* text on gold backgrounds */

  /* Secondary — Navy: structural nav, authority headings */
  --color-secondary:         #002D5D;
  --color-secondary-hover:   #003d7a;
  --color-on-secondary:      #ffffff;

  /* Surface hierarchy — stacked vellum layers */
  --color-surface:                    #f9f9f9;  /* base page background */
  --color-surface-container-lowest:   #ffffff;  /* interactive cards */
  --color-surface-container-low:      #f3f3f3;  /* content wells */
  --color-surface-container:          #ededed;
  --color-surface-container-high:     #e8e8e8;
  --color-surface-container-highest:  #e2e2e2;  /* progress track bg */

  /* On-surface text */
  --color-on-surface:         #1a1c1c;  /* body text — never pure black */
  --color-on-surface-variant: #44474e;  /* secondary/muted text */

  /* Semantic outline — "Ghost Border" rule */
  --color-outline-variant:   rgba(0, 45, 93, 0.15);  /* felt, not seen */

  /* Semantic states */
  --color-error:   #BA1A1A;
  --color-success: #2E6B3E;  /* muted — meets WCAG AA on light gray */
  --color-warning: #B45309;
  --color-info:    #1565C0;

  /* Semantic containers */
  --color-error-container:   #FFDAD6;
  --color-success-container: #D4EDDA;
  --color-warning-container: #FEF3C7;
  --color-info-container:    #DBEAFE;

  /* Fail-closed / blocked state */
  --color-blocked:           #6B7280;
  --color-blocked-container: #F3F4F6;


  /* ─────────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────────── */

  --font-serif: 'Times New Roman', Times, Georgia, serif;
  --font-sans:  'Lato', 'Inter', system-ui, sans-serif;
  --font-mono:  'Courier New', Courier, monospace;

  /* Scale */
  --text-display-lg:  clamp(2rem, 4vw, 2.75rem);  /* welcome headings */
  --text-display-sm:  clamp(1.5rem, 3vw, 2rem);
  --text-headline-lg: 1.5rem;
  --text-headline-sm: 1.25rem;
  --text-title-lg:    1.125rem;
  --text-title-md:    1rem;
  --text-body-lg:     1rem;
  --text-body-md:     0.9375rem;  /* 15px — standard lesson descriptions */
  --text-body-sm:     0.875rem;   /* 14px */
  --text-label-md:    0.8125rem;  /* 13px — nav labels, uppercase */
  --text-label-sm:    0.75rem;    /* 12px */

  /* Weight */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Nav label treatment */
  --nav-label-transform:  uppercase;
  --nav-label-spacing:    0.05rem;


  /* ─────────────────────────────────────────────
     SPACING SCALE (4px base)
  ───────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;  /* content padding — use religiously */
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;


  /* ─────────────────────────────────────────────
     LAYOUT
  ───────────────────────────────────────────── */

  --sidebar-width:  240px;
  --topbar-height:  64px;


  /* ─────────────────────────────────────────────
     BORDERS & RADIUS
  ───────────────────────────────────────────── */

  /* "No-Line" Rule: 1px solid borders for section separation are PROHIBITED.
     Use background shifts instead. Only allowed: ghost borders at --color-outline-variant. */

  --border-ghost: 1px solid var(--color-outline-variant);  /* data tables only */

  --radius-sm:   4px;
  --radius-md:   6px;   /* cards — "soft, organic feel" */
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;


  /* ─────────────────────────────────────────────
     ELEVATION & SHADOWS (Navy-tinted, not black)
  ───────────────────────────────────────────── */

  --shadow-ambient: 0 12px 32px rgba(0, 45, 93, 0.06);  /* floating elements */
  --shadow-sm:      0 2px 8px rgba(0, 45, 93, 0.08);
  --shadow-md:      0 4px 16px rgba(0, 45, 93, 0.10);


  /* ─────────────────────────────────────────────
     GRADIENTS
  ───────────────────────────────────────────── */

  /* Primary CTA — "die-cast metallic" quality */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);

  /* Sidebar active item highlight */
  --gradient-sidebar-active: linear-gradient(90deg, rgba(208,175,33,0.12) 0%, transparent 100%);


  /* ─────────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────────── */

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;


  /* ─────────────────────────────────────────────
     PROGRESS INDICATORS
  ───────────────────────────────────────────── */

  --progress-height:  8px;       /* thick track — "architectural" */
  --progress-radius:  0px;       /* flat caps — not rounded */
}


/* ─────────────────────────────────────────────
   GLOBAL RESETS & BASE
───────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--color-secondary);
  line-height: 1.25;
}

h1 { font-size: var(--text-headline-lg); }
h2 { font-size: var(--text-headline-sm); }
h3 { font-size: var(--text-title-lg); }
h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--color-on-surface);
  line-height: 1.35;
}
h4 { font-size: var(--text-title-md); font-weight: var(--weight-bold); }

a {
  color: var(--color-secondary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* Utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.text-muted      { color: var(--color-on-surface-variant); }
.text-navy       { color: var(--color-secondary); }
.text-gold       { color: var(--color-primary); }
.text-error      { color: var(--color-error); }
.text-success    { color: var(--color-success); }
.text-sm         { font-size: var(--text-body-sm); }
.text-xs         { font-size: var(--text-label-sm); }
.font-bold       { font-weight: var(--weight-bold); }
.font-medium     { font-weight: var(--weight-medium); }


/* === COMPONENT STYLES === */
/**
 * ACG Inside Academy — Global Component Styles
 * Requires: tokens.css loaded before this file.
 */

/* Google Fonts loaded via PHP wp_enqueue_style */


/* ═══════════════════════════════════════════════
   PAGE LAYOUT
═══════════════════════════════════════════════ */

.page-layout {
  display: flex;
  min-height: 100vh;
  background: var(--color-surface);
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--color-secondary);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-logo {
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-logo-text {
  font-family: var(--font-serif);
  font-size: var(--text-title-md);
  color: var(--color-on-secondary);
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

.sidebar-logo-sub {
  font-size: var(--text-label-sm);
  color: rgba(255,255,255,0.55);
  text-transform: var(--nav-label-transform);
  letter-spacing: var(--nav-label-spacing);
  margin-top: 2px;
}

.sidebar-nav {
  padding: var(--space-4) 0;
  flex: 1;
}

.sidebar-nav-section {
  margin-bottom: var(--space-2);
}

.sidebar-nav-section-label {
  font-size: var(--text-label-sm);
  color: rgba(255,255,255,0.40);
  text-transform: var(--nav-label-transform);
  letter-spacing: var(--nav-label-spacing);
  padding: var(--space-3) var(--space-6) var(--space-1);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  color: rgba(255,255,255,0.75);
  text-transform: var(--nav-label-transform);
  letter-spacing: var(--nav-label-spacing);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  border-left: 4px solid transparent;
}

.sidebar-nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.95);
  text-decoration: none;
}

.sidebar-nav-item.active {
  background: var(--gradient-sidebar-active);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}

/* Material Symbols — global rule so icons render anywhere (buttons, headers, cards) */
.nav-icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  display: inline-block;
  vertical-align: middle;
}

/* Sidebar-specific overrides */
.sidebar-nav-item .nav-icon {
  font-size: 20px;
  opacity: 0.85;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-label-sm);
  color: var(--color-on-primary);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: var(--text-label-sm);
  color: var(--color-on-secondary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.04rem;
}

/* Main area */
.main-area {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Topbar */
.topbar {
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height);
  flex: 0 0 var(--topbar-height);
  background: var(--color-surface-container-lowest);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.topbar-title {
  font-family: var(--font-serif);
  font-size: var(--text-title-lg);
  color: var(--color-secondary);
  font-weight: var(--weight-bold);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topbar-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 20px;
}

.topbar-icon-btn:hover {
  background: var(--color-surface-container-low);
}

.topbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-label-sm);
  color: var(--color-on-secondary);
  font-weight: var(--weight-bold);
  cursor: pointer;
  border: 2px solid var(--color-primary);
}

.topbar-icon-symbol {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 20px;
  line-height: 1;
}

.topbar-notification-btn {
  position: relative;
}

.topbar-notification-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.notifications-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 45, 93, 0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 190;
}

.notifications-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(380px, 100vw);
  height: 100vh;
  background: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-ambient);
  border-left: 1px solid var(--color-outline-variant);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  z-index: 200;
}

.notifications-panel.is-open {
  transform: translateX(0);
}

.notifications-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-outline-variant);
  background: var(--color-surface);
}

.notifications-panel-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-headline-sm);
}

.notifications-panel-subtitle {
  margin: 0;
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
}

.notifications-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.notification-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}

.notification-item:hover {
  text-decoration: none;
  transform: translateX(-2px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(0, 45, 93, 0.22);
}

.notification-item.is-read {
  opacity: 0.6;
}

.notification-item.is-read .notification-item-title {
  font-weight: var(--weight-normal);
}

.notification-item-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-container);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 20px;
  line-height: 1;
}

.notification-item-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notification-item-title {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  color: var(--color-on-surface);
}

.notification-item-body {
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
  line-height: 1.5;
}

.notification-item-time {
  margin-top: var(--space-1);
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.04rem;
}

.notification-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--color-on-surface-variant);
}

.notification-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-low);
  color: var(--color-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 28px;
  line-height: 1;
  margin-bottom: var(--space-4);
}

.notification-empty-title {
  color: var(--color-secondary);
  font-family: var(--font-serif);
  font-size: var(--text-title-lg);
  margin-bottom: var(--space-2);
}

.notification-empty-copy {
  max-width: 280px;
  line-height: 1.6;
}

.topbar-notif-mark-all-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  cursor: pointer;
}

.topbar-notif-mark-all-btn:hover {
  background: var(--color-surface-variant);
}

.topbar-notif-mark-all-btn[hidden] { display: none; }

/* Page content */
.page-content {
  padding: var(--space-8);
  flex: 1;
}

.page-header {
  margin-bottom: var(--space-6);
}

.page-header h1 {
  font-size: var(--text-display-sm);
  margin-bottom: var(--space-1);
}

.page-header .page-subtitle {
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
}

/* Academic admin operation surfaces */
.admin-ops-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.admin-ops-hero {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.admin-ops-kicker {
  color: var(--color-primary-dark);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  margin-bottom: var(--space-2);
}

.admin-ops-hero h1 {
  margin: 0 0 var(--space-2);
  color: var(--color-secondary);
  font-size: var(--text-headline-sm);
}

.admin-ops-hero p {
  margin: 0;
  max-width: 640px;
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
  line-height: 1.6;
}

.admin-ops-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.admin-kpi-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

.admin-kpi-card.is-primary { border-left: 4px solid var(--color-primary); }
.admin-kpi-card.is-secondary { border-left: 4px solid var(--color-secondary); }
.admin-kpi-card.is-success { border-left: 4px solid var(--color-success); }
.admin-kpi-card.is-muted { border-left: 4px solid var(--color-outline); }

.admin-kpi-label {
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-md);
}

.admin-kpi-value {
  color: var(--color-on-surface);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.admin-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.admin-section-header h2 {
  margin: 0;
  color: var(--color-secondary);
  font-size: var(--text-title-md);
}

.admin-section-header p {
  margin: var(--space-1) 0 0;
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
}

.admin-alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

.admin-alert-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.admin-alert-card:hover {
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

.admin-alert-card.is-warning { border-left-color: var(--color-warning); }
.admin-alert-card.is-error { border-left-color: var(--color-error); }
.admin-alert-card.is-info { border-left-color: var(--color-info); }
.admin-alert-card.is-secondary { border-left-color: var(--color-secondary); }

.admin-alert-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-surface-container-low);
  color: var(--color-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 26px;
}

.admin-alert-value {
  color: var(--color-on-surface);
  font-size: var(--text-headline-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.admin-alert-label {
  margin-top: var(--space-1);
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
}

.admin-alert-link {
  margin-top: var(--space-1);
  color: var(--color-primary-dark);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-medium);
}

.admin-toolbar {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.admin-filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-search-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.admin-table-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.admin-table-scroll {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}

.admin-table th {
  background: var(--color-surface-container-low);
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  white-space: nowrap;
}

.admin-table td {
  border-top: 1px solid var(--color-outline-variant);
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}

.admin-table tbody tr:hover {
  background: var(--color-surface-container-low);
}

.admin-table-title {
  color: var(--color-secondary);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.admin-table-title:hover {
  color: var(--color-primary-dark);
}

.admin-cell-muted {
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
}

.admin-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.admin-users-header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.admin-users-filters {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.4fr) repeat(2, minmax(150px, 1fr)) minmax(100px, .7fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.admin-filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-filter-field label {
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04rem;
}

.admin-users-clear {
  align-self: end;
  min-height: 36px;
}

.admin-users-toolbar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  margin: 0 0 var(--space-3);
}

.admin-users-card {
  overflow: hidden;
}

.admin-users-table-wrap {
  overflow-x: auto;
  padding: 0;
}

.admin-users-table td:last-child,
.admin-users-table th:last-child {
  text-align: right;
}

.admin-users-table tbody.is-loading {
  opacity: .55;
}

.admin-user-link {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-secondary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: inherit;
  font-weight: var(--weight-bold);
  padding: 0;
  text-align: left;
}

.admin-user-link:hover span {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.admin-user-link small {
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
}

.admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.admin-pagination .is-disabled {
  opacity: .45;
  pointer-events: none;
}

.admin-pagination-gap {
  color: var(--color-on-surface-variant);
  padding: 0 var(--space-1);
}

.admin-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.admin-modal-card {
  max-width: 440px;
  width: min(90vw, 440px);
  margin: 0 auto;
}

.admin-user-drawer[hidden] {
  display: none;
}

.admin-user-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(7, 23, 47, .38);
  display: flex;
  justify-content: flex-end;
}

.admin-user-drawer-panel {
  width: min(560px, 100vw);
  height: 100%;
  overflow-y: auto;
  background: var(--color-surface-container-lowest);
  border-left: 1px solid var(--color-outline-variant);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}

.admin-user-drawer-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.admin-user-drawer-header h2 {
  margin: 0;
  font-size: var(--text-title-lg);
}

.admin-drawer-eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-primary-dark);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .04rem;
}

.admin-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.admin-profile-stat,
.admin-profile-section {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.admin-profile-stat {
  padding: var(--space-3);
}

.admin-profile-stat span,
.admin-profile-kv dt,
.admin-profile-item span,
.admin-profile-item small {
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
}

.admin-profile-stat strong {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-title-md);
}

.admin-profile-section {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.admin-profile-section h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-title-md);
}

.admin-profile-kv {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.admin-profile-kv div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-3);
}

.admin-profile-kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-profile-list {
  display: grid;
  gap: var(--space-2);
}

.admin-profile-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--color-surface-container-low);
}

.admin-profile-item div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-profile-item strong {
  overflow-wrap: anywhere;
}

.admin-profile-item-meta {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  white-space: nowrap;
}

.admin-profile-item.compact {
  padding: var(--space-2) var(--space-3);
}

.admin-profile-empty {
  color: var(--color-on-surface-variant);
  margin: 0;
}

/* Backward-compatible polish for existing academic-admin tables/forms that still use inline markup. */
.page-content > form[method="GET"] {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.page-content > form[method="GET"] .form-control {
  min-height: 36px;
}

.page-content > form[method="GET"] .btn {
  min-height: 36px;
}

.page-content > .card > .card-body[style*="overflow-x:auto"] {
  padding: 0 !important;
}

.page-content > .card > .card-body[style*="overflow-x:auto"] table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: var(--text-body-sm);
}

.page-content > .card > .card-body[style*="overflow-x:auto"] thead th {
  background: var(--color-surface-container-low) !important;
  color: var(--color-on-surface-variant) !important;
  font-size: var(--text-label-sm) !important;
  font-weight: var(--weight-bold) !important;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  border-bottom: 1px solid var(--color-outline-variant) !important;
}

.page-content > .card > .card-body[style*="overflow-x:auto"] tbody tr {
  border-bottom: 1px solid var(--color-outline-variant) !important;
}

.page-content > .card > .card-body[style*="overflow-x:auto"] tbody tr:hover {
  background: var(--color-surface-container-low);
}

.page-content > .card > .card-body[style*="overflow-x:auto"] tbody td {
  vertical-align: middle;
}

@media (max-width: 760px) {
  .admin-ops-hero,
  .admin-section-header,
  .admin-users-header,
  .admin-users-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-users-filters {
    grid-template-columns: 1fr;
  }

  .admin-users-clear {
    width: 100%;
  }

  .admin-profile-grid {
    grid-template-columns: 1fr;
  }

  .admin-profile-kv div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .admin-profile-item {
    flex-direction: column;
  }

  .admin-profile-item-meta {
    align-items: flex-start;
  }

  .admin-search-group,
  .admin-search-group .form-control {
    width: 100%;
  }
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-label-md);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-4);
}

.breadcrumb a {
  color: var(--color-on-surface-variant);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--color-secondary); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--color-on-surface); font-weight: var(--weight-medium); }

/* Course context tabs */
.course-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--color-surface-container-lowest);
  border-bottom: 2px solid var(--color-surface-container-high);
  position: sticky;
  top: var(--topbar-height);
  z-index: 40;
  min-height: 48px;
  padding: 0 var(--space-8);
  overflow-x: auto;
  scrollbar-width: none;
}

.course-tabs::-webkit-scrollbar { display: none; }

.course-tab {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-5);
  min-height: 48px;
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.course-tab:hover {
  color: var(--color-secondary);
  text-decoration: none;
}

.course-tab.active {
  color: var(--color-secondary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.page-content-tabbed {
  padding-top: var(--space-6);
}

/* Teacher course workspace parity layer */
.workspace-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
  flex-wrap: wrap;
}

.workspace-breadcrumb a {
  color: var(--color-primary-dark);
  text-decoration: none;
}

.workspace-breadcrumb a:hover {
  color: var(--color-secondary);
}

.workspace-breadcrumb .sep {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 16px;
  line-height: 1;
  color: var(--color-on-surface-variant);
  opacity: 0.75;
}

.workspace-breadcrumb .current {
  color: var(--color-on-surface);
  font-weight: var(--weight-bold);
}

.course-workspace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.course-workspace-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.course-workspace-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.course-workspace-counts {
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
}

.course-workspace-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.course-inline-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  border-bottom: 1px solid var(--color-outline-variant);
  margin-bottom: var(--space-5);
}

.course-inline-tab {
  display: inline-flex;
  align-items: center;
  padding: 0 0 var(--space-3);
  border: none;
  background: none;
  color: var(--color-on-surface-variant);
  font-size: var(--text-title-md);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03rem;
}

.course-inline-tab.active {
  color: var(--color-secondary);
  border-bottom: 3px solid var(--color-primary);
  font-weight: var(--weight-bold);
}

.structure-tree {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section-block {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}

.section-handle,
.section-item-handle,
.section-action-btn,
.section-item-btn,
.section-item-icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  line-height: 1;
}

.section-handle,
.section-item-handle {
  color: rgba(255,255,255,0.55);
  cursor: grab;
  flex-shrink: 0;
}

.section-title {
  flex: 1;
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  min-width: 0;
}

.section-actions,
.section-item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.section-action-btn,
.section-item-btn {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.85;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
}

.section-action-btn:hover,
.section-item-btn:hover {
  background: rgba(255,255,255,0.12);
  opacity: 1;
}

.section-action-btn.danger:hover,
.section-item-btn.danger:hover {
  color: #ffd8d8;
}

.section-header .lms-status-chip {
  background: #fff;
}
.section-header .lms-status-chip:hover {
  background: #f0f4ff;
}
.section-header .lms-status-chip[data-status="hidden"] {
  background: #fff;
}

.section-item-list {
  display: flex;
  flex-direction: column;
}

.section-item-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
}

.section-item-row:last-child {
  border-bottom: none;
}

.section-item-row:hover {
  background: var(--color-surface);
}

.section-item-icon {
  width: 24px;
  text-align: center;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.section-item-title {
  flex: 1;
  min-width: 0;
  color: var(--color-on-surface);
  font-size: var(--text-body-md);
}

.section-item-review-link {
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin-left: -4px;
}

.section-item-review-link:hover,
.section-item-review-link:focus-visible {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-item-type {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  min-width: 52px;
  text-align: right;
}

.section-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
}

.structure-add-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.structure-utility-card {
  margin-top: var(--space-4);
}

.lms-add-unit-panel {
  width: 100%;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.lms-add-unit-panel-header {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.lms-add-unit-panel-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-container);
  color: var(--color-secondary);
}

.lms-add-unit-panel-icon .nav-icon {
  font-size: 22px;
}

.lms-add-unit-kicker {
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lms-add-unit-title {
  margin: var(--space-1) 0 0;
  color: var(--color-secondary);
  font-size: var(--text-title-lg);
  line-height: 1.25;
}

.lms-add-unit-copy {
  margin: var(--space-1) 0 0;
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
  line-height: 1.5;
}

.lms-new-unit-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.lms-new-unit-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.lms-new-unit-label {
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
}

.lms-new-unit-help {
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-xs);
  line-height: 1.4;
}

.lms-new-unit-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}


/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01rem;
}

.btn:hover { opacity: 0.9; }
.btn:active { opacity: 0.85; }
.btn:disabled, .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.unit-completion-stack {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-low);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.unit-progress-btn {
  align-self: flex-start;
}

.unit-progress-btn.is-complete {
  box-shadow: inset 0 0 0 1px rgba(21, 101, 192, 0.18);
}

.unit-progress-btn.is-loading {
  opacity: 0.7;
}

/* Primary — Gold gradient, "die-cast metallic" */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  box-shadow: var(--shadow-md);
  opacity: 1;
  filter: brightness(1.05);
}

/* Secondary — Navy outline, no fill. Uses box-shadow so border doesn't add to layout height. */
.btn-secondary {
  background: transparent;
  color: var(--color-secondary);
  box-shadow: inset 0 0 0 2px var(--color-secondary);
}

.btn-secondary:hover {
  background: rgba(0, 45, 93, 0.05);
  box-shadow: inset 0 0 0 2px var(--color-secondary);
}

/* Tertiary — text-only, Navy, Gold underline on hover */
.btn-tertiary {
  background: transparent;
  color: var(--color-secondary);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  position: relative;
}

.btn-tertiary::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: var(--space-2);
  right: var(--space-2);
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}

.btn-tertiary:hover::after { transform: scaleX(1); }

/* Danger */
.btn-danger {
  background: var(--color-error);
  color: white;
}

/* Sizes */
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-label-md); }
.btn-lg { padding: var(--space-3) var(--space-8); font-size: var(--text-body-lg); }
.btn-full { width: 100%; }

/* Icon button inline */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
}


/* ═══════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════ */

.card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-body {
  padding: var(--space-6);
}

.card-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-surface-container-high);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h2,
.card-header h3 {
  font-size: var(--text-title-md);
  font-family: var(--font-sans);
}

.card-footer {
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-container-low);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* Course card */
.course-card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.course-card:hover {
  box-shadow: var(--shadow-ambient);
  transform: translateY(-2px);
}

.course-card-cover {
  height: 120px;
  background: var(--color-secondary);
  position: relative;
  overflow: hidden;
}

.course-card-cover-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02rem;
}

.course-card-header {
  padding: var(--space-3) var(--space-4) var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.course-card-body {
  padding: var(--space-2) var(--space-4) var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.course-card-title {
  font-family: var(--font-serif);
  font-size: var(--text-title-md);
  color: var(--color-secondary);
  line-height: 1.3;
  font-weight: var(--weight-bold);
}

.course-card-meta {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
}

.course-card-footer {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-container-low);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════
   PROGRESS INDICATORS
═══════════════════════════════════════════════ */

/* "The Signature Track" — 8px, flat caps, Gold gradient fill */
.progress-track {
  height: var(--progress-height);
  background: var(--color-surface-container-highest);
  border-radius: var(--progress-radius);
  overflow: hidden;
  width: 100%;
}

.progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--progress-radius);
  transition: width var(--transition-slow);
}

.progress-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
}

.progress-pct {
  font-weight: var(--weight-bold);
  color: var(--color-on-surface);
}


/* ═══════════════════════════════════════════════
   BADGES & STATUS CHIPS
═══════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-success   { background: var(--color-success-container); color: var(--color-success); }
.badge-warning   { background: var(--color-warning-container); color: var(--color-warning); }
.badge-error     { background: var(--color-error-container);   color: var(--color-error); }
.badge-info      { background: var(--color-info-container);    color: var(--color-info); }
.badge-neutral   { background: var(--color-surface-container-high); color: var(--color-on-surface-variant); }
.badge-secondary { background: var(--color-surface-container-high); color: var(--color-on-surface-variant); box-shadow: inset 0 0 0 1px var(--color-outline-variant); }
.badge-primary   { background: var(--color-primary-container); color: var(--color-primary-dark); }
.badge-navy      { background: var(--color-secondary); color: var(--color-on-secondary); }

/* Enrollment status */
.badge-active    { background: var(--color-success-container); color: var(--color-success); }
.badge-pending   { background: var(--color-warning-container); color: var(--color-warning); }
.badge-completed { background: var(--color-info-container);    color: var(--color-info); }
.badge-inactive  { background: var(--color-surface-container-high); color: var(--color-on-surface-variant); }


/* ═══════════════════════════════════════════════
   DATA TABLES (Gradebooks, Lists)
═══════════════════════════════════════════════ */

.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface-container-lowest);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}

/* Header: Navy bg, white label-md text */
.data-table thead th {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-label-md);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
}

.data-table thead th:first-child { border-radius: var(--radius-md) 0 0 0; }
.data-table thead th:last-child  { border-radius: 0 var(--radius-md) 0 0; }

/* Rows: no horizontal lines — alternating backgrounds */
.data-table tbody tr:nth-child(odd)  { background: var(--color-surface-container-lowest); }
.data-table tbody tr:nth-child(even) { background: var(--color-surface-container-low); }

.data-table tbody tr:hover { background: var(--color-primary-container); }

.data-table tbody td {
  padding: var(--space-2) var(--space-4);  /* spacing-2 vertical — data breathes */
  color: var(--color-on-surface);
  vertical-align: middle;
  border-bottom: none;  /* No horizontal lines per spec */
}

/* Ghost border fallback for data-dense tables */
.data-table.table-grid tbody td {
  border-bottom: var(--border-ghost);
}

.data-table tfoot td {
  background: var(--color-surface-container);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-md);
}


/* ═══════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
}

.form-label .required {
  color: var(--color-error);
  margin-left: 2px;
}

.form-control {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  -webkit-appearance: none;
}

.form-control:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(0, 45, 93, 0.10);
}

.form-control::placeholder { color: rgba(68, 71, 78, 0.5); }

.form-control.error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.10);
}

.form-hint {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
}

.form-error {
  font-size: var(--text-label-sm);
  color: var(--color-error);
}

/* Input with icon */
.input-group {
  position: relative;
}

.input-group .form-control {
  padding-left: var(--space-10);
}

.input-group .input-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-on-surface-variant);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 18px;
  pointer-events: none;
}

.input-group .input-icon-right {
  right: var(--space-3);
  left: auto;
  cursor: pointer;
  pointer-events: all;
}

/* Password strength */
.password-strength {
  margin-top: var(--space-2);
}

.password-strength-bar {
  height: 4px;
  background: var(--color-surface-container-highest);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.password-strength-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-normal), background var(--transition-normal);
}

.strength-weak   .password-strength-fill { width: 25%; background: var(--color-error); }
.strength-fair   .password-strength-fill { width: 50%; background: var(--color-warning); }
.strength-good   .password-strength-fill { width: 75%; background: var(--color-primary); }
.strength-strong .password-strength-fill { width: 100%; background: var(--color-success); }

.password-strength-label {
  font-size: var(--text-label-sm);
  margin-top: var(--space-1);
}

/* Checklist for password requirements */
.requirement-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
}

.requirement-item.met {
  color: var(--color-success);
}

.requirement-icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 14px;
}


/* ═══════════════════════════════════════════════
   STAT CARDS (Dashboard KPIs)
═══════════════════════════════════════════════ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
}

.stat-label {
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
  margin-bottom: var(--space-2);
}

.stat-value {
  font-family: var(--font-serif);
  font-size: var(--text-display-sm);
  color: var(--color-secondary);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.stat-delta {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
}

.stat-delta.positive { color: var(--color-success); }
.stat-delta.negative { color: var(--color-error); }

.stat-card.highlight {
  background: var(--color-secondary);
}
.stat-card.highlight .stat-label { color: rgba(255,255,255,0.60); }
.stat-card.highlight .stat-value { color: var(--color-primary); }
.stat-card.highlight .stat-delta { color: rgba(255,255,255,0.60); }


/* ═══════════════════════════════════════════════
   GRID LAYOUTS
═══════════════════════════════════════════════ */

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

@media (max-width: 900px) {
  .two-col, .three-col { grid-template-columns: 1fr; }
  .course-workspace-header,
  .structure-add-row {
    flex-direction: column;
    align-items: stretch;
  }

  .section-header,
  .section-item-row {
    flex-wrap: wrap;
  }

  .section-item-type {
    text-align: left;
    min-width: auto;
  }

  .lms-new-unit-form {
    grid-template-columns: 1fr;
  }

  .lms-new-unit-actions {
    justify-content: flex-start;
  }
}


/* ═══════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000001;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Glassmorphism for floating modals */
.modal {
  background: rgba(249, 249, 249, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(16px);
  transition: transform var(--transition-normal);
}

.modal-overlay.open .modal {
  transform: translateY(0);
}

.modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-surface-container-high);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-serif);
  font-size: var(--text-headline-sm);
  color: var(--color-secondary);
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-on-surface-variant);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 20px;
  transition: background var(--transition-fast);
}
.modal-close:hover { background: var(--color-surface-container-low); }

.modal-body { padding: var(--space-6); }
.modal-footer {
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-container-low);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}


/* ═══════════════════════════════════════════════
   ALERTS & NOTIFICATIONS
═══════════════════════════════════════════════ */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-4);
}

.alert-icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.5;
}

.alert-success { background: var(--color-success-container); color: var(--color-success); }
.alert-warning  { background: var(--color-warning-container); color: var(--color-warning); }
.alert-error    { background: var(--color-error-container);   color: var(--color-error); }
.alert-info     { background: var(--color-info-container);    color: var(--color-info); }

/* Blocked / fail-closed state alert */
.alert-blocked {
  background: var(--color-blocked-container);
  color: var(--color-blocked);
  border-left: 4px solid var(--color-blocked);
}

/* Toast notifications (anchored bottom-right) */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  box-shadow: var(--shadow-md);
  pointer-events: all;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.toast-success { background: var(--color-secondary); color: white; }
.toast-error   { background: var(--color-error);     color: white; }


/* ═══════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════ */

.tabs {
  border-bottom: 2px solid var(--color-surface-container-high);
  display: flex;
  gap: 0;
  margin-bottom: var(--space-5);
}

.tab-btn {
  background: none;
  border: none;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tab-btn:hover { color: var(--color-secondary); }

.tab-btn.active {
  color: var(--color-secondary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }


/* ═══════════════════════════════════════════════
   EMPTY STATES
═══════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-20) var(--space-8);
  text-align: center;
}

.empty-state-title {
  /* display-lg serif — "intentional design choice, not a missing feature" */
  font-family: var(--font-serif);
  font-size: var(--text-display-lg);
  color: var(--color-secondary);
  opacity: 0.2;
  margin-bottom: var(--space-3);
}

.empty-state-body {
  font-size: var(--text-body-md);
  color: var(--color-on-surface-variant);
  max-width: 380px;
  margin-bottom: var(--space-5);
}


/* ═══════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════ */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.page-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  font-size: var(--text-body-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-variant);
  transition: background var(--transition-fast);
}

.page-btn:hover { background: var(--color-surface-container-low); }
.page-btn.active {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  font-weight: var(--weight-bold);
}

.page-btn.icon-btn {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 18px;
}


/* ═══════════════════════════════════════════════
   SEARCH & FILTER BAR
═══════════════════════════════════════════════ */

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 400px;
}

.search-input-wrap .search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-on-surface-variant);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 18px;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-10);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  background: var(--color-surface-container-lowest);
  outline: none;
  transition: border-color var(--transition-fast);
}

.search-input:focus { border-color: var(--color-secondary); }

.filter-select {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  outline: none;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════
   BLOCKED / FAIL-CLOSED STATES
═══════════════════════════════════════════════ */

.blocked-resource {
  background: var(--color-surface-container-low);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-blocked);
}

.blocked-icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 28px;
  color: var(--color-blocked);
  opacity: 0.5;
}

.blocked-text h4 { color: var(--color-blocked); font-size: var(--text-body-sm); }
.blocked-text p  { font-size: var(--text-label-sm); opacity: 0.75; }

/* Locked unit/resource overlay */
.locked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(249, 249, 249, 0.80);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  z-index: 10;
}


/* ═══════════════════════════════════════════════
   AUTH LAYOUT (Login, Invitation, Reset)
═══════════════════════════════════════════════ */

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 65% 35%;
  background: linear-gradient(to right, var(--color-secondary) 65%, var(--color-surface) 65%);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.auth-brand-panel {
  background: var(--color-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
  overflow: hidden;
}

.auth-brand-panel::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -25%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(208, 175, 33, 0.10);
  z-index: 1;
}

.auth-brand-panel::after {
  content: '';
  position: absolute;
  bottom: -25%;
  left: -20%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(208, 175, 33, 0.07);
  z-index: 1;
}

.auth-brand-content {
  position: relative;
  z-index: 3;
  text-align: center;
}

.auth-brand-title {
  font-family: var(--font-serif);
  font-size: var(--text-display-lg);
  color: var(--color-on-secondary);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.auth-brand-accent {
  color: var(--color-primary);
}

.auth-brand-tagline {
  font-size: var(--text-body-md);
  color: rgba(255,255,255,0.60);
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 320px;
}

.auth-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.auth-carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,30,58,0.70) 0%, rgba(11,30,58,0.92) 100%);
  pointer-events: none;
  z-index: 2;
}

.auth-carousel,
.auth-carousel .splide,
.auth-carousel .splide__track,
.auth-carousel .splide__list,
.auth-carousel .splide__slide {
  height: 100%;
  width: 100%;
}

.auth-carousel .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--color-secondary);
}

.auth-brand-panel .splide__pagination {
  bottom: var(--space-5);
  z-index: 5;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.auth-brand-panel .splide__pagination__page {
  background: rgba(255,255,255,0.45);
  opacity: 1;
  width: 10px;
  height: 10px;
  margin: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.auth-brand-panel .splide__pagination__page:hover {
  background: rgba(255,255,255,0.75);
}

.auth-brand-panel .splide__pagination__page.is-active {
  background: var(--color-primary);
  transform: scale(1.3);
}

.auth-form-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-12) var(--space-12) var(--space-12);
  min-height: 100vh;
}

.auth-form-wrap {
  width: 100%;
  max-width: 440px;
  margin: auto 0;
  padding: var(--space-8) 0;
}

.auth-form-title {
  font-family: var(--font-serif);
  font-size: var(--text-headline-lg);
  color: var(--color-secondary);
  margin-bottom: var(--space-2);
}

.auth-form-subtitle {
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
}

body.lms-auth-page .wp-block-post-title,
body.lms-auth-page .wp-block-post-content > h1:first-child,
body.lms-auth-page .brxe-post-title,
body.lms-auth-page .entry-title,
body.lms-auth-page .page-title,
body.lms-auth-page header.entry-header,
body.lms-auth-page .page-header-wrap,
body.lms-auth-page h1.wp-block-heading:first-child {
  display: none !important;
}

body.lms-auth-page main,
body.lms-auth-page #brx-content,
body.lms-auth-page .brxe-container.root {
  margin: 0;
  padding: 0;
}


/* ═══════════════════════════════════════════════
   QUIZ / ASSESSMENT DISTRACTION-FREE MODE
═══════════════════════════════════════════════ */

.quiz-layout {
  min-height: 100vh;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}

.quiz-topbar {
  height: var(--topbar-height);
  background: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  position: sticky;
  top: 0;
  z-index: 50;
}

.quiz-topbar-title {
  font-family: var(--font-serif);
  color: var(--color-on-secondary);
  font-size: var(--text-title-md);
}

.quiz-timer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(208, 175, 33, 0.15);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
}

.quiz-timer.urgent { background: rgba(186, 26, 26, 0.15); color: var(--color-error); }

.quiz-body {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8);
  width: 100%;
  flex: 1;
}

.quiz-progress-bar {
  margin-bottom: var(--space-6);
}

.question-card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.question-number {
  font-size: var(--text-label-md);
  font-weight: var(--weight-bold);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
  margin-bottom: var(--space-3);
}

.question-text {
  font-family: var(--font-serif);
  font-size: var(--text-headline-sm);
  color: var(--color-secondary);
  margin-bottom: var(--space-5);
  line-height: 1.4;
}

.answer-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-outline-variant);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  margin-bottom: var(--space-2);
}

.answer-option:hover {
  border-color: var(--color-secondary);
  background: rgba(0, 45, 93, 0.03);
}

.answer-option.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-container);
}

.answer-option.correct {
  border-color: var(--color-success);
  background: var(--color-success-container);
}

.answer-option.incorrect {
  border-color: var(--color-error);
  background: var(--color-error-container);
}

/* ═══════════════════════════════════════════════
   UNIT VIEWER (Lesson / Resource)
═══════════════════════════════════════════════ */

.unit-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  min-height: calc(100vh - var(--topbar-height));
}

.unit-content-area {
  padding: var(--space-8);
  overflow-y: auto;
}

.unit-sidebar-toc {
  background: var(--color-surface-container-low);
  padding: var(--space-6);
  overflow-y: auto;
  border-left: 1px solid var(--color-surface-container-high);
}

.toc-title {
  font-size: var(--text-label-md);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-3);
}

.toc-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.toc-item:hover { background: var(--color-surface-container); }
.toc-item.active { background: var(--color-primary-container); color: var(--color-secondary); font-weight: var(--weight-medium); }
.toc-item.completed { color: var(--color-success); }
.toc-item.locked { color: var(--color-blocked); cursor: not-allowed; }

.toc-icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 16px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   ANNOUNCEMENT CARD
═══════════════════════════════════════════════ */

.announcement-card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--color-secondary);
  margin-bottom: var(--space-3);
}

.announcement-card.pinned {
  border-left-color: var(--color-primary);
}

.announcement-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  gap: var(--space-3);
}

.announcement-title {
  font-family: var(--font-serif);
  font-size: var(--text-title-md);
  color: var(--color-secondary);
  font-weight: var(--weight-bold);
}

.announcement-meta {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
}

.announcement-body {
  font-size: var(--text-body-sm);
  color: var(--color-on-surface);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════
   AUDIT LOG TABLE EXTRAS
═══════════════════════════════════════════════ */

.log-action-badge {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  background: var(--color-surface-container-low);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-on-surface);
}

/* ═══════════════════════════════════════════════
   LOADING / SKELETON
═══════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-container) 25%,
    var(--color-surface-container-high) 50%,
    var(--color-surface-container) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════
   TOPBAR AVATAR DROPDOWN  (§12 — mandatory)
═══════════════════════════════════════════════ */

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: rgba(249, 249, 249, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-ambient);
  z-index: 300;
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--color-on-surface);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.dropdown-item:hover { background: var(--color-surface-container-low); }

.dropdown-item-danger { color: var(--color-error); }
.dropdown-item-danger:hover { background: var(--color-error-container); }

.dropdown-icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 18px;
  color: var(--color-on-surface-variant);
  flex-shrink: 0;
  line-height: 1;
}

.dropdown-item-danger .dropdown-icon { color: var(--color-error); opacity: 0.7; }

.dropdown-divider {
  height: 1px;
  background: var(--color-surface-container-high);
  margin: var(--space-1) 0;
}


/* ═══════════════════════════════════════════════
   COURSE TYPE BADGES  (Asíncrono / Síncrono)
═══════════════════════════════════════════════ */

.course-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-3);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  border: 1px solid;
  white-space: nowrap;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
}

.course-type-badge.async {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
  background: var(--color-primary-container);
}

.course-type-badge.sync {
  color: var(--color-on-secondary);
  border-color: var(--color-secondary);
  background: var(--color-secondary);
}

.course-type-badge .badge-icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 13px;
  line-height: 1;
}


/* ═══════════════════════════════════════════════
   ITEM COMPLETION STATES  (○ ◐ ●)
═══════════════════════════════════════════════ */

/* State dot used in unit item lists */
.item-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-label-sm);
  white-space: nowrap;
}

.item-state-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ○ No visto — gray outline only */
.item-state.unseen .item-state-dot {
  border: 2px solid var(--color-outline-variant);
  background: transparent;
}
.item-state.unseen { color: var(--color-on-surface-variant); }

/* ◐ Visto — half-fill, light blue */
.item-state.viewed .item-state-dot {
  background: linear-gradient(90deg, #5B8DB8 50%, transparent 50%);
  border: 2px solid #5B8DB8;
}
.item-state.viewed { color: #5B8DB8; }

/* ● Completado — Navy with gold dot */
.item-state.completed .item-state-dot {
  background: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  position: relative;
}
.item-state.completed .item-state-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-primary);
}
.item-state.completed { color: var(--color-secondary); font-weight: var(--weight-medium); }


/* ═══════════════════════════════════════════════
   COMPLETION CHECKBOX  ("Marcar como completado")
═══════════════════════════════════════════════ */

.completion-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-low);
  margin-top: var(--space-6);
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}

.completion-checkbox-wrap:hover { background: var(--color-surface-container); }

.completion-checkbox-wrap.completed {
  background: var(--color-success-container);
}

.completion-check-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 16px;
  color: transparent;
}

.completion-checkbox-wrap.completed .completion-check-icon {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-primary);
}

.completion-checkbox-wrap.saving .completion-check-icon {
  border-color: var(--color-secondary);
  background: transparent;
  color: var(--color-secondary);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.completion-label {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface-variant);
  transition: color var(--transition-fast);
}
.completion-checkbox-wrap.completed .completion-label { color: var(--color-success); }


/* ═══════════════════════════════════════════════
   URGENCY BADGES  (due date proximity)
═══════════════════════════════════════════════ */

.urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* < 48 horas — rojo */
.urgency-badge.urgent {
  background: var(--color-error-container);
  color: var(--color-error);
}

/* Esta semana — dorado */
.urgency-badge.this-week {
  background: var(--color-primary-container);
  color: var(--color-primary-dark);
}

.urgency-icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 13px;
  line-height: 1;
}


/* ═══════════════════════════════════════════════
   CALENDAR GRID
═══════════════════════════════════════════════ */

.calendar-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.calendar-nav-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-variant);
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 20px;
  transition: background var(--transition-fast);
}
.calendar-nav-btn:hover { background: var(--color-surface-container-low); }

.calendar-month-title {
  font-family: var(--font-serif);
  font-size: var(--text-headline-sm);
  color: var(--color-secondary);
}

.calendar-view-toggle {
  display: flex;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.calendar-view-btn {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface-variant);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.calendar-view-btn.active {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}

/* Monthly grid */
.calendar-grid-wrap {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--color-secondary);
}

.calendar-day-label {
  padding: var(--space-2) var(--space-1);
  text-align: center;
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
}

.calendar-grid-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-cell {
  min-height: 96px;
  padding: var(--space-2);
  border-right: 1px solid var(--color-surface-container-high);
  border-bottom: 1px solid var(--color-surface-container-high);
}

.calendar-cell:nth-child(7n) { border-right: none; }

.calendar-date {
  font-size: var(--text-label-sm);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.calendar-cell.today .calendar-date {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}

.calendar-cell.other-month { opacity: 0.35; }

/* Calendar event chip */
.calendar-event {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  margin-bottom: 2px;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.calendar-event:hover { opacity: 0.82; }

.calendar-event.event-assessment {
  background: rgba(0, 45, 93, 0.12);
  color: var(--color-secondary);
}
.calendar-event.event-activity {
  background: var(--color-primary-container);
  color: var(--color-primary-dark);
}
.calendar-event.event-forum {
  background: var(--color-success-container);
  color: var(--color-success);
}

.event-type-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.event-assessment .event-type-dot { background: var(--color-secondary); }
.event-activity .event-type-dot   { background: var(--color-primary); }
.event-forum .event-type-dot      { background: var(--color-success); }


/* ═══════════════════════════════════════════════
   PENDING ACTIVITY ITEM  (actividades.html)
═══════════════════════════════════════════════ */

.pending-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}

.pending-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(2px);
}

.pending-item-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 22px;
}

.pending-item-icon-wrap.assessment { background: rgba(0,45,93,0.08); color: var(--color-secondary); }
.pending-item-icon-wrap.activity   { background: var(--color-primary-container); color: var(--color-primary-dark); }
.pending-item-icon-wrap.forum      { background: var(--color-success-container); color: var(--color-success); }

.pending-item-body { flex: 1; min-width: 0; }
.pending-item-title { font-weight: var(--weight-medium); color: var(--color-on-surface); font-size: var(--text-body-sm); }
.pending-item-course { font-size: var(--text-label-sm); color: var(--color-on-surface-variant); margin-top: 2px; }

.pending-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex-shrink: 0; }
.pending-due-date { font-size: var(--text-label-sm); color: var(--color-on-surface-variant); }


/* ═══════════════════════════════════════════════
   CERTIFICATE CARD
═══════════════════════════════════════════════ */

.certificate-card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  border-left: 4px solid var(--color-primary);
}

.certificate-card-accent {
  width: 8px;
  background: var(--gradient-primary);
  flex-shrink: 0;
}

.certificate-card-body {
  padding: var(--space-5) var(--space-6);
  flex: 1;
}

.certificate-serial {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  margin-top: var(--space-1);
}

.certificate-issued {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
}


/* ═══════════════════════════════════════════════
   COURSE FINALIZE BUTTON (Docente — sync only)
═══════════════════════════════════════════════ */

.btn-finalize {
  background: var(--color-success-container);
  color: var(--color-success);
  border: 2px solid var(--color-success);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  font-family: var(--font-sans);
}
.btn-finalize:hover {
  background: var(--color-success);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-finalize .btn-icon-symbol {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 18px;
  line-height: 1;
}


/* ═══════════════════════════════════════════════
   ADD ELEMENT MODAL CATEGORIES  (Docente)
═══════════════════════════════════════════════ */

.add-element-modal { max-width: 480px; }

.add-element-category {
  margin-bottom: var(--space-4);
}

.add-element-category-title {
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-2);
  padding: 0 var(--space-1);
}

.add-element-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.add-element-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  text-decoration: none;
  background: var(--color-surface-container-lowest);
}

.add-element-item:hover {
  border-color: var(--color-secondary);
  background: rgba(0,45,93,0.03);
}

.add-element-icon {
  font-size: 24px;
  line-height: 1;
}

.add-element-label {
  font-size: var(--text-label-sm);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface);
  text-align: center;
  line-height: 1.3;
}


/* ═══════════════════════════════════════════════
   FORUM  (foro-detalle.html)
═══════════════════════════════════════════════ */

.forum-prompt {
  background: var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  color: var(--color-on-secondary);
}

.forum-prompt-label {
  font-size: var(--text-label-sm);
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
  margin-bottom: var(--space-2);
}

.forum-prompt-title {
  font-family: var(--font-serif);
  font-size: var(--text-headline-sm);
  color: var(--color-on-secondary);
  margin-bottom: var(--space-3);
}

.forum-prompt-body {
  font-size: var(--text-body-md);
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
}

.forum-reply-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.forum-reply {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.forum-reply-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.forum-reply-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: var(--text-label-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.forum-reply-avatar.teacher { background: var(--color-primary-dark); }
.forum-reply-avatar.own     { background: var(--color-success); }

.forum-reply-meta { flex: 1; }
.forum-reply-name { font-weight: var(--weight-bold); font-size: var(--text-body-sm); color: var(--color-on-surface); }
.forum-reply-date { font-size: var(--text-label-sm); color: var(--color-on-surface-variant); }

.forum-reply-body { font-size: var(--text-body-md); line-height: 1.7; color: var(--color-on-surface); }

.forum-reply-compose {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.forum-compose-label {
  font-size: var(--text-label-md);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-3);
}

.forum-compose-textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  resize: vertical;
  outline: none;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}
.forum-compose-textarea:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(0,45,93,0.08); }

/* Docente-only participant panel */
.forum-participation-panel {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  width: 280px;
  flex-shrink: 0;
  align-self: flex-start;
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-5));
}

.forum-participation-title {
  font-size: var(--text-label-md);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-4);
}

.participation-stat {
  font-family: var(--font-serif);
  font-size: var(--text-display-sm);
  color: var(--color-secondary);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.participation-label {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-4);
}

.participant-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.participant-row-name { font-size: var(--text-body-sm); flex: 1; color: var(--color-on-surface); }
.participant-row-status { font-family: 'Material Symbols Outlined', sans-serif; font-size: 18px; }
.participant-row-status.responded { color: var(--color-success); }
.participant-row-status.pending   { color: var(--color-outline-variant); }


/* ═══════════════════════════════════════════════
   PUBLIC PROFILE  (shared/perfil-publico.html)
═══════════════════════════════════════════════ */

.public-profile-hero {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--color-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  color: var(--color-on-secondary);
}

.public-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
  font-family: var(--font-serif);
  font-size: var(--text-headline-lg);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid var(--color-primary);
}

.public-profile-name {
  font-family: var(--font-serif);
  font-size: var(--text-headline-lg);
  color: var(--color-on-secondary);
  margin-bottom: var(--space-1);
}

.public-profile-role {
  font-size: var(--text-body-sm);
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: var(--nav-label-spacing);
}


/* ═══════════════════════════════════════════════
   PROTOTYPE LABEL (visible in all HTML files)
═══════════════════════════════════════════════ */

.proto-label {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 9999;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  opacity: 0.85;
  pointer-events: none;
}

/* STATUS CHIP COMPONENT */
.lms-status-chip {
  /* Pill-shaped inline button */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: var(--text-label-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  line-height: 1.4;
  user-select: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  background: none;
}

/* Visible variant */
.lms-status-chip[data-status="visible"] {
  color: var(--color-success);
  border-color: var(--color-success);
}
.lms-status-chip[data-status="visible"]:hover {
  background: var(--color-success-container);
}

/* Hidden variant */
.lms-status-chip[data-status="hidden"] {
  color: var(--color-on-surface-variant);
  border-color: var(--color-outline-variant);
}
.lms-status-chip[data-status="hidden"]:hover {
  background: var(--color-surface-container);
}

/* Dot indicator */
.lms-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.lms-status-dot--visible { background: var(--color-success); }
.lms-status-dot--hidden  { background: var(--color-on-surface-variant); }

/* Chevron icon */
.lms-status-chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}
.lms-status-chip[aria-expanded="true"] .lms-status-chevron {
  transform: rotate(180deg);
}

/* Dropdown menu */
.lms-status-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 210;
  min-width: 180px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
}
.lms-status-menu[hidden] { display: none; }

.lms-status-menu li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm);
  font-family: var(--font-sans);
  color: var(--color-on-surface);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.lms-status-menu li:hover {
  background: var(--color-surface-container);
}

/* Loading state */
.lms-status-chip[data-loading="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* SLIDE-IN PANEL COMPONENT */
/* Panel backdrop */
.lms-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 45, 93, 0.35); /* --color-secondary at 35% opacity */
  z-index: 1000000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.lms-panel-backdrop.lms-panel-backdrop--open {
  opacity: 1;
  pointer-events: all;
}

/* Drawer */
.lms-panel-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  max-width: 100vw;
  height: 100vh;
  background: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-md);
  border-left: 1px solid var(--color-outline-variant);
  display: flex;
  flex-direction: column;
  z-index: 1000001;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  overflow: hidden;
}
.lms-panel-drawer--open {
  transform: translateX(0);
}

@media (max-width: 767px) {
  .lms-panel-drawer {
    width: 100vw;
  }
}

/* Panel header */
.lms-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-outline-variant);
  flex-shrink: 0;
}
.lms-panel-title {
  font-family: var(--font-serif);
  font-size: var(--text-headline-sm);
  color: var(--color-secondary);
  margin: 0;
}
.lms-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-on-surface-variant);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.lms-panel-close:hover {
  background: var(--color-surface-container);
}

/* Panel body — scrollable */
.lms-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
}

/* Panel footer */
.lms-panel-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-low);
  flex-shrink: 0;
}
.lms-panel-footer-spacer {
  flex: 1;
}

/* Panel feedback area */
.lms-panel-feedback {
  margin-bottom: var(--space-4);
}

/* Panel forms */
.lms-panel-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.lms-panel-form input[type="text"],
.lms-panel-form input[type="url"],
.lms-panel-form input[type="number"],
.lms-panel-form input[type="date"],
.lms-panel-form input[type="datetime-local"],
.lms-panel-form textarea,
.lms-panel-form select {
  width: 100%;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font: inherit;
  padding: var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.lms-panel-form textarea {
  resize: vertical;
  min-height: 104px;
  line-height: 1.55;
}

.lms-panel-form input:focus,
.lms-panel-form textarea:focus,
.lms-panel-form select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.18);
  background: var(--color-surface-container-lowest);
}

.lms-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lms-form-label {
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
}

.lms-form-hint {
  display: block;
  font-size: var(--text-body-sm);
  line-height: 1.45;
  color: var(--color-on-surface-variant);
}

.lms-form-error {
  display: none;
  padding: var(--space-3);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  background: var(--color-error-container);
  color: var(--color-error);
  font-size: var(--text-body-sm);
}

.lms-form-error--visible {
  display: block;
}

.lms-form-intro {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.lms-form-intro-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-container);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lms-form-intro-icon .nav-icon {
  font-size: 22px;
}

.lms-form-intro-title {
  margin: 0 0 2px;
  font-size: var(--text-body-md);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
}

.lms-form-intro-copy {
  margin: 0;
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
  line-height: 1.45;
}

.lms-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
}

.lms-form-section-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
}

.lms-form-section-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.lms-form-section-heading strong {
  display: block;
  color: var(--color-secondary);
  font-size: var(--text-body-md);
  margin-bottom: 2px;
}

.lms-form-section-heading p {
  margin: 0;
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
  line-height: 1.45;
}

.lms-form-section-icon {
  font-family: 'Material Symbols Outlined';
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-container);
  color: var(--color-secondary);
  flex-shrink: 0;
}

.lms-form-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}

.lms-form-checkbox-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.lms-form-checkbox-card input {
  margin-top: 4px;
  flex-shrink: 0;
}

.lms-form-checkbox-card strong {
  display: block;
  color: var(--color-on-surface);
  font-size: var(--text-body-sm);
  margin-bottom: 2px;
}

.lms-form-checkbox-card small {
  display: block;
  color: var(--color-on-surface-variant);
  line-height: 1.45;
}

.lms-form-checkbox-card-strong {
  border-left: 4px solid var(--color-primary);
}

.lms-form-nested-panel {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

@media (max-width: 720px) {
  .lms-form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.lms-form-callout {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-variant);
  color: var(--color-on-surface-variant);
}

.lms-form-callout .nav-icon {
  color: var(--color-secondary);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.lms-form-callout strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-secondary);
  font-size: var(--text-body-sm);
}

.lms-form-callout p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.45;
}

.lms-upload-zone {
  border: 2px dashed var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.lms-upload-zone:hover,
.lms-upload-zone.is-dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-container);
}

.lms-upload-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-hover);
  color: var(--color-secondary);
}

.lms-upload-icon .nav-icon {
  font-size: 30px;
}

.lms-upload-title {
  margin: 0;
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
}

.lms-upload-copy {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
}

.lms-upload-selected {
  min-height: 22px;
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
}

.lms-upload-selected:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  border-radius: 999px;
  background: var(--color-surface-hover);
  color: var(--color-secondary);
  font-weight: var(--weight-medium);
}

.lms-current-asset {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.lms-current-asset-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-container);
  color: var(--color-secondary);
  flex-shrink: 0;
}

.lms-current-asset-title {
  font-weight: var(--weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lms-current-asset-meta {
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
}

.lms-form-progress {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.lms-form-progress-label {
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
}

.lms-form-progress-track {
  height: 6px;
  background: var(--color-surface-variant);
  border-radius: 999px;
  margin-top: var(--space-2);
  overflow: hidden;
}

.lms-form-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width var(--transition-fast);
}

.lms-form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-on-surface);
  cursor: pointer;
}

.lms-form-checkbox-row input {
  margin-top: 2px;
}

/* TYPE SELECTOR GRID */
.lms-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.lms-type-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  background: var(--color-surface-container-low);
  border: 2px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface);
  text-align: center;
}
.lms-type-tile:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-container);
  color: var(--color-secondary);
}
.lms-type-tile:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lms-type-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.lms-type-tile:hover:not(:disabled) .lms-type-tile-icon {
  color: var(--color-secondary);
}
.lms-type-tile[data-tooltip]:disabled {
  position: relative;
}
.lms-type-tile[data-tooltip]:disabled::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-label-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.lms-type-tile[data-tooltip]:disabled:hover::after,
.lms-type-tile[data-tooltip]:disabled:focus::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   LMS CONFIRM MODAL
═══════════════════════════════════════════════ */

.lms-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: lms-fade-in 0.12s ease;
}

.lms-idle-backdrop {
  z-index: 1000002;
}

@keyframes lms-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lms-confirm-card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-6) var(--space-5);
  max-width: 420px;
  width: 100%;
  animation: lms-slide-up 0.15s ease;
}

@keyframes lms-slide-up {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.lms-confirm-message {
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  margin: 0 0 var(--space-5) 0;
  line-height: 1.55;
}

.lms-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.lms-confirm-btn-danger {
  background: var(--color-error);
  color: #fff;
}

.lms-confirm-btn-danger:hover {
  background: var(--color-error);
  filter: brightness(1.08);
  opacity: 1;
}


/* ── Student Preview Banner (Bloque 6) ──────────────────────────────────── */
.lms-preview-banner {
  position: sticky;
  top: 0;
  z-index: 400;
  background: var(--color-secondary);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-body-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-4);
}

.lms-preview-banner .nav-icon {
  font-size: 18px;
  opacity: 0.9;
}

.lms-preview-banner-exit {
  margin-left: auto;
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
  white-space: nowrap;
}

.lms-preview-banner-exit:hover {
  opacity: 0.85;
}

/* Student assignment view */
.lms-assignment-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 980px;
}

.lms-assignment-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.lms-assignment-status-main,
.lms-assignment-status-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lms-assignment-status-icon,
.lms-assignment-meta-icon,
.lms-assignment-upload-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  line-height: 1;
  color: var(--color-primary);
}

.lms-assignment-status-meta {
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-sm);
}

.lms-assignment-status-meta strong {
  color: var(--color-on-surface);
  margin-right: 4px;
}

.lms-assignment-card,
.lms-assignment-submit-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.lms-assignment-instructions {
  color: var(--color-on-surface);
  font-size: var(--text-body-sm);
  line-height: 1.7;
  padding: var(--space-4);
  background: var(--color-surface-hover);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.lms-assignment-instructions p:last-child {
  margin-bottom: 0;
}

.lms-assignment-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
}

.lms-assignment-meta-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.lms-assignment-meta-label,
.lms-assignment-label {
  color: var(--color-on-surface-variant);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lms-assignment-submit-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-hover);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
}

.lms-assignment-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.lms-assignment-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lms-assignment-textarea {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: inherit;
  line-height: 1.6;
}

.lms-assignment-upload-zone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-hover);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.lms-assignment-upload-zone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-container);
}

.lms-assignment-upload-zone small {
  display: block;
  margin-top: 2px;
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-sm);
}

.lms-assignment-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lms-assignment-upload-progress,
.lms-assignment-file-error {
  font-size: var(--text-label-sm);
}

.lms-assignment-upload-progress {
  color: var(--color-on-surface-variant);
}

.lms-assignment-file-error {
  color: var(--color-error);
}

.lms-assignment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.lms-rubric-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

.lms-rubric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.lms-rubric-row strong,
.lms-rubric-row span {
  display: block;
}

.lms-rubric-row span {
  margin-top: 2px;
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-sm);
}

.lms-rubric-row.is-met {
  border-color: rgba(31, 122, 75, .35);
  background: rgba(31, 122, 75, .06);
}

.lms-rubric-row.is-missing {
  background: var(--color-surface-hover);
}

.lms-rubric-points {
  color: var(--color-secondary);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .lms-assignment-statusbar,
  .lms-assignment-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .lms-assignment-status-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* === Visibility selector cards === */
.lms-visibility-section { margin-top: var(--space-4); }
.lms-visibility-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.lms-visibility-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3);
  border: 2px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.lms-visibility-card:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(208, 175, 33, 0.08);
}
.lms-visibility-card input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.lms-visibility-card-icon { font-size: 28px; margin-bottom: var(--space-1); color: var(--color-on-surface-variant); }
.lms-visibility-card:has(input:checked) .lms-visibility-card-icon { color: var(--color-primary-dark); }
.lms-visibility-card-title { font-weight: var(--weight-bold); font-size: var(--text-body-sm); }
.lms-visibility-card-copy { font-size: var(--text-label-sm); color: var(--color-on-surface-variant); margin-top: 4px; }

.lms-visibility-schedule {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-variant);
  border-radius: var(--radius-md);
}
.lms-visibility-schedule input[type="datetime-local"] {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  font-family: inherit;
}

/* === Visibility chip en listas === */
.lms-visibility-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-label-sm);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: var(--weight-bold);
}
.lms-visibility-chip--visible { background: rgba(34, 197, 94, 0.15); color: rgb(22, 101, 52); }
.lms-visibility-chip--scheduled { background: rgba(234, 179, 8, 0.15); color: rgb(120, 80, 0); }
.lms-visibility-chip--hidden { background: rgba(156, 163, 175, 0.2); color: rgb(75, 85, 99); }
.lms-status-dot--scheduled { background: rgb(234, 179, 8); }

@media (max-width: 640px) {
  .lms-visibility-cards {
    grid-template-columns: 1fr;
  }
}

/* === Sequential progression - locked items === */
.lms-item-row--locked {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-surface-variant);
  border-left: 3px solid var(--color-outline-variant);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.lms-item-row--locked .lms-item-icon {
  color: var(--color-on-surface-variant);
}
.lms-item-status--locked {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  font-weight: var(--weight-bold);
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lms-item-lock-reason {
  width: 100%;
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  margin-top: var(--space-1);
  padding-left: var(--space-4);
}

.lms-blocked-screen {
  max-width: 480px;
  margin: var(--space-12) auto;
  padding: var(--space-8);
  text-align: center;
  background: var(--color-surface-variant);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
}
.lms-blocked-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 64px;
  color: var(--color-on-surface-variant);
  display: block;
  margin-bottom: var(--space-3);
}
.lms-blocked-screen h2 {
  margin: 0 0 var(--space-2);
  color: var(--color-secondary);
}
.lms-blocked-screen p {
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-5);
}
.lms-blocked-screen .btn + .btn {
  margin-top: var(--space-2);
}

/* === Internal item editor publication state === */
.lms-editor-publish-state {
  padding: var(--space-3);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: var(--color-surface-hover);
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm);
  line-height: 1.4;
  margin-bottom: var(--space-3);
}
.lms-editor-publish-state strong {
  display: block;
  color: var(--color-secondary);
  margin-bottom: 2px;
}