/* =========================================================================
   academy.css - GxP Academy LMS + shared auth styles
   Loaded only on academy/auth pages. Built entirely on the design tokens
   and .card/.grid-12 primitives already defined in styles.css.
========================================================================= */

/* --- Shared Auth Forms (login.html, register.html, contractor-command.html) --- */
.auth-wrapper {
  min-height: calc(100vh - 80px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-48) var(--space-32);
}
.auth-card {
  width: 100%; max-width: 460px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-48);
  box-shadow: var(--shadow-xl);
}
.auth-header { text-align: center; margin-bottom: var(--space-32); }
.auth-header h1 { margin-bottom: var(--space-8); }
.form-group { margin-bottom: var(--space-24); text-align: left; }
.form-group label {
  display: block; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--space-8);
}
/* .form-input base + :focus now live in the shared styles.css (brand .form-input spec) */
.form-input { width: 100%; }
.form-error {
  display: none;
  background: rgba(239, 68, 68, 0.1); color: var(--status-error);
  border: 1px solid var(--status-error); border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-16); font-size: var(--text-sm);
  margin-bottom: var(--space-16);
}
.form-error.visible { display: block; }
.auth-footer-link { margin-top: var(--space-24); text-align: center; }
.auth-footer-link a { color: var(--action-primary); text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
.role-toggle { display: flex; gap: var(--space-8); margin-bottom: var(--space-24); }
.role-toggle button {
  flex: 1; padding: var(--space-8) var(--space-16);
  border: 1px solid var(--border-medium); background: var(--bg-primary);
  color: var(--text-secondary); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  transition: all var(--transition-fast);
}
.role-toggle button.active { background: var(--action-primary); color: var(--text-inverse); border-color: var(--action-primary); }

/* --- Course Catalog --- */
.course-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-32);
}
.course-card { padding: 0; overflow: hidden; text-decoration: none; color: inherit; }
.course-card-thumb { height: 180px; background-size: cover; background-position: center; }
.course-card-body { padding: var(--space-24); display: flex; flex-direction: column; flex: 1; }
.course-card-category {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--action-primary); font-weight: 600; margin-bottom: var(--space-8);
}
.course-card-body h3 { font-size: var(--text-lg); margin-bottom: var(--space-8); }
.course-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: var(--space-16); border-top: 1px solid var(--border-light);
}
.price-tag { font-family: var(--font-primary); font-weight: 600; font-size: var(--text-lg); color: var(--text-primary); }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: 600; padding: 4px 10px;
  border-radius: var(--radius-full); background: var(--bg-tertiary); color: var(--text-secondary);
}
.badge-owned { background: rgba(154, 205, 50, 0.15); color: #6b9412; }
[data-theme="dark"] .badge-owned { color: var(--status-success); }
.skeleton-card { min-height: 320px; background: var(--bg-tertiary); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* --- Course Detail --- */
.course-hero { display: flex; flex-direction: column; gap: var(--space-8); }
.curriculum-module { border: 1px solid var(--border-light); border-radius: var(--radius-md); margin-bottom: var(--space-16); overflow: hidden; }
.curriculum-module-header {
  padding: var(--space-16) var(--space-24); background: var(--bg-secondary);
  font-weight: 600; font-family: var(--font-primary); display: flex; justify-content: space-between; align-items: center;
}
.curriculum-lesson {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-12) var(--space-24); border-top: 1px solid var(--border-light);
  font-size: var(--text-sm); color: var(--text-secondary);
}
.curriculum-lesson svg { color: var(--text-muted); flex-shrink: 0; }
.curriculum-lesson.is-preview { color: var(--action-primary); font-weight: 600; }

/* --- Dashboard --- */
.progress-bar-track { width: 100%; height: 8px; background: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--action-primary); border-radius: var(--radius-full); transition: width var(--transition-normal); }
.dashboard-course-row {
  display: flex; align-items: center; gap: var(--space-24);
  padding: var(--space-24); margin-bottom: var(--space-16);
}
.dashboard-course-thumb { width: 96px; height: 64px; border-radius: var(--radius-sm); background-size: cover; background-position: center; flex-shrink: 0; }
.dashboard-course-info { flex: 1; }
.dashboard-course-info h4 { margin-bottom: var(--space-8); }
.empty-state { text-align: center; padding: var(--space-64) var(--space-32); color: var(--text-muted); }

/* --- Lesson Player --- */
.player-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-24); align-items: flex-start; }
.player-video-wrap { position: relative; padding-top: 56.25%; background: #000; border-radius: var(--radius-lg); overflow: hidden; }
.player-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-sidebar { position: sticky; top: calc(80px + var(--space-24)); padding: 0; max-height: calc(100vh - 120px); overflow-y: auto; }
.player-topic { border-bottom: 1px solid var(--border-light); }
.player-topic-header { padding: var(--space-16) var(--space-24); font-weight: 600; font-size: var(--text-sm); background: var(--bg-secondary); }
.player-lesson-link {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-12) var(--space-24); text-decoration: none; color: var(--text-secondary);
  font-size: var(--text-sm); border-left: 3px solid transparent;
}
.player-lesson-link:hover { background: var(--bg-tertiary); }
.player-lesson-link.is-active { border-left-color: var(--action-primary); color: var(--action-primary); font-weight: 600; background: var(--bg-tertiary); }
.player-lesson-link.is-complete svg { color: var(--status-success); }
.player-lesson-link.is-locked { opacity: 0.5; pointer-events: none; }

/* --- Certificate Verification --- */
.cert-card { max-width: 640px; margin: 0 auto; text-align: center; padding: var(--space-64) var(--space-48); }
.cert-seal { width: 72px; height: 72px; margin: 0 auto var(--space-24); color: var(--status-success); }

@media (max-width: 768px) {
  .player-layout { grid-template-columns: 1fr; }
  .player-sidebar { position: static; max-height: none; }
  .dashboard-course-row { flex-direction: column; align-items: flex-start; }
}