/* SD-Agile Learning — courses-specific styles layered on USWDS 3 + platform-theme.css.
   Palette/typography/buttons/cards/modals/spinner/tags/focus come from platform-theme.css.
   This file only adds the app shell + courses-specific page helpers. */

[x-cloak] { display: none !important; }

/* ── App shell (matches platform sda-shell) ───────────────────────── */
.sda-shell { display: flex; min-height: 100vh; }

.sda-sidebar {
  width: 16rem; flex: 0 0 16rem;
  background: var(--sda-color-surface);
  border-right: 1px solid var(--sda-color-border);
  padding: var(--sda-space-lg) var(--sda-space);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; height: 100vh; overflow-y: auto; z-index: 500;
}
.sda-sidebar__brand { margin-bottom: var(--sda-space-lg); }
.sda-sidebar__logo { display: block; height: 56px; width: auto; margin-bottom: var(--sda-space-xs); }
.sda-sidebar__title { font-size: 1.0625rem; font-weight: 700; color: var(--sda-color-primary); margin: 0; }
.sda-sidebar__org { font-size: 0.8125rem; color: var(--sda-color-ink-muted); margin: 2px 0 0; }

.sda-sidebar .usa-sidenav { margin: 0; border: 0; }
.sda-sidebar .usa-sidenav a {
  display: flex; align-items: center; gap: var(--sda-space-xs);
  border-radius: var(--sda-radius); color: var(--sda-color-ink);
  padding: var(--sda-space-xs) var(--sda-space-sm); font-size: 0.9375rem; text-decoration: none;
}
.sda-sidebar .usa-sidenav a:hover { background: #eaf2fa; color: var(--sda-color-primary-dark); }
.sda-sidebar .usa-sidenav a[aria-current="page"] {
  background: var(--sda-color-primary); color: #fff; font-weight: 600;
}
.sda-nav-icon { font-size: 1rem; line-height: 1; }

.sda-sidebar__user {
  margin-top: auto; padding-top: var(--sda-space);
  border-top: 1px solid var(--sda-color-border); font-size: 0.8125rem;
}
.sda-sidebar__user-name { font-weight: 600; color: var(--sda-color-ink); }
.sda-sidebar__user-role { color: var(--sda-color-ink-muted); text-transform: capitalize; margin-bottom: var(--sda-space-xs); }

.sda-main {
  flex: 1 1 auto; margin-left: 16rem; padding: var(--sda-space-xl);
  min-height: 100vh; display: flex; flex-direction: column;
}
.sda-shell--guest .sda-main { margin-left: 0; }

/* Page content flows full-width within the padded shell main (matches platform).
   Auth/centered pages self-constrain via .sda-auth / .sda-card. */
#app { width: 100%; flex: 1 1 auto; }

/* ── Guest top bar ────────────────────────────────────────────────── */
.sda-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--sda-space-lg); margin-bottom: var(--sda-space-lg);
  border-bottom: 1px solid var(--sda-color-border);
}
.sda-topbar__brand { display: flex; align-items: center; gap: var(--sda-space-xs);
  font-weight: 700; color: var(--sda-color-primary); text-decoration: none; }
.sda-topbar__logo { height: 40px; width: auto; }
.sda-topbar__nav { display: flex; align-items: center; gap: var(--sda-space-sm); }

/* ── Footer ───────────────────────────────────────────────────────── */
.sda-footer {
  margin-top: var(--sda-space-xl); padding-top: var(--sda-space);
  border-top: 1px solid var(--sda-color-border);
  display: flex; flex-wrap: wrap; gap: var(--sda-space);
  font-size: 0.8125rem; color: var(--sda-color-ink-muted);
}
.sda-footer a { color: var(--sda-color-primary); text-decoration: none; }
.sda-footer__copy { margin-left: auto; }

/* ── Toasts ───────────────────────────────────────────────────────── */
.sda-toast-container {
  position: fixed; top: var(--sda-space); right: var(--sda-space);
  z-index: 1100; display: flex; flex-direction: column; gap: var(--sda-space-xs);
  max-width: 24rem;
}
.sda-toast { box-shadow: var(--sda-shadow-elevated); position: relative; }
.sda-toast__close { position: absolute; top: 4px; right: 8px; font-size: 1.1rem; }

/* ── Auth layout (login / signup) ─────────────────────────────────── */
.sda-auth { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: var(--sda-space-lg); }
.sda-auth .sda-card { width: 100%; max-width: 28rem; }
.sda-auth__logo { display: block; height: 72px; width: auto; margin: 0 auto var(--sda-space); }
.sda-auth__title { text-align: center; margin: 0 0 var(--sda-space-xs); }
.sda-auth__subtitle { text-align: center; color: var(--sda-color-ink-muted); margin: 0 0 var(--sda-space-lg); }

/* ── Courses-specific helpers ─────────────────────────────────────── */
.sda-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sda-space); margin-bottom: var(--sda-space-lg); }
.sda-page-header h1 { margin: 0; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--sda-space-lg); }

.sda-progress { height: 8px; background: var(--sda-color-border); border-radius: 999px; overflow: hidden; }
.sda-progress__bar { height: 100%; background: var(--sda-color-primary); border-radius: 999px; transition: width .3s ease; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { width: 100%; }

/* ── Signup wizard ────────────────────────────────────────────────── */
/* Step indicator (decorative; aria-hidden) */
.step-indicator {
  display: flex; justify-content: center; align-items: center;
  gap: var(--sda-space-xs); margin-bottom: var(--sda-space-lg);
}
.step-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sda-color-border); transition: all 0.2s ease;
}
.step-dot.active { background: var(--sda-color-primary); transform: scale(1.3); }
.step-dot.completed { background: var(--sda-color-success); }
.step-connector {
  width: 24px; height: 2px; background: var(--sda-color-border);
  transition: background 0.2s ease;
}
.step-connector.completed { background: var(--sda-color-success); }

/* Account-type tiles (semantic <button>) */
.account-type-cards { display: flex; flex-direction: column; gap: var(--sda-space); }
.account-type-card {
  display: block; width: 100%; text-align: left;
  border: 2px solid var(--sda-color-border); border-radius: var(--sda-radius);
  padding: var(--sda-space-lg); background: var(--sda-color-surface);
  cursor: pointer; transition: all 0.15s ease; position: relative;
  font-family: inherit; color: var(--sda-color-ink);
}
.account-type-card:hover { border-color: var(--sda-color-primary); background: #f0f6fb; }
.account-type-card.selected {
  border-color: var(--sda-color-primary); background: #eaf2fa;
  box-shadow: 0 0 0 3px rgba(0, 94, 162, 0.15);
}
.account-type-card strong { font-size: 1.0625rem; color: var(--sda-color-ink); }
.account-type-card .check-icon {
  position: absolute; top: var(--sda-space); right: var(--sda-space);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sda-color-primary); color: #fff;
  display: none; align-items: center; justify-content: center; font-size: 14px;
}
.account-type-card.selected .check-icon { display: flex; }

/* Two-column form rows */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sda-space); }
@media (max-width: 30rem) { .form-row { grid-template-columns: 1fr; } }

/* Wizard button group */
.btn-group { display: flex; gap: var(--sda-space); margin-top: var(--sda-space-lg); }
.btn-group .usa-button { flex: 1; margin: 0; }

/* 6-digit verification code input */
.verify-code-input {
  font-size: 1.5rem; letter-spacing: 0.3em; text-align: center;
  font-family: "JetBrains Mono", monospace; max-width: 14rem;
}

/* Password strength meter */
.password-strength {
  height: 6px; background: var(--sda-color-border); border-radius: 999px;
  overflow: hidden; margin-top: var(--sda-space-xs);
}
.password-strength-bar { height: 100%; border-radius: 999px; transition: width .25s ease, background .25s ease; }
.password-strength-bar.strength-weak { background: var(--sda-color-error); }
.password-strength-bar.strength-fair { background: var(--sda-color-warning); }
.password-strength-bar.strength-strong { background: var(--sda-color-success); }

/* Confirmation / success section */
.success-section { text-align: center; padding: var(--sda-space-lg) 0; }
.success-icon { font-size: 3rem; margin-bottom: var(--sda-space); }
.success-title { color: var(--sda-color-success); }
.success-message { color: var(--sda-color-ink-muted); margin: var(--sda-space) 0 var(--sda-space-lg); line-height: 1.6; }

/* Footer link under the wizard card */
.login-link { margin-top: var(--sda-space-lg); text-align: center; font-size: 0.9375rem; color: var(--sda-color-ink-muted); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 40rem) {
  .sda-shell { flex-direction: column; }
  .sda-sidebar {
    position: static; width: auto; flex-basis: auto; height: auto;
    border-right: 0; border-bottom: 1px solid var(--sda-color-border);
  }
  .sda-main { margin-left: 0; padding: var(--sda-space-lg); }
  .sda-footer__copy { margin-left: 0; }
}