/* ================================================================
   academy-portal-ui.css — SF-SPORT professional dashboard shell
   Global admin-panel patterns · desktop + mobile · all sections
   ================================================================ */

:root {
  --ap-green: #0f8f72;
  --ap-green-dark: #065f46;
  --ap-green-soft: #e8f7f1;
  --ap-blue: #2563eb;
  --ap-gradient: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-blue) 100%);
  --ap-bg: #f4f7fb;
  --ap-surface: #ffffff;
  --ap-border: #e4eaf2;
  --ap-border-strong: #d5dee8;
  --ap-text: #0f172a;
  --ap-muted: #64748b;
  --ap-sidebar-w: 260px;
  --ap-topbar-h: 60px;
  --ap-mobile-bar-h: 52px;
  --ap-radius: 14px;
  --ap-radius-sm: 10px;
  --ap-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  --ap-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* ── App shell ─────────────────────────────────────────────────── */
.site-body:has(.academy-portal) {
  overflow: hidden;
  height: 100dvh;
  background: var(--ap-bg);
}

.site-body:has(.academy-portal) .topbar,
.site-body:has(.academy-portal) .site-footer {
  display: none !important;
}

.site-body:has(.academy-portal) .site-main {
  padding: 0 !important;
  margin: 0 !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

.academy-portal {
  display: flex;
  height: 100dvh;
  overflow: hidden;
  background: var(--ap-bg);
}

.academy-portal .container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

.academy-portal .portal__layout {
  display: flex;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  gap: 0;
  align-items: stretch;
}

.ap-shell {
  position: relative;
  flex-shrink: 0;
  display: flex;
  height: 100dvh;
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.academy-portal .academy-sidebar {
  width: var(--ap-sidebar-w);
  min-width: var(--ap-sidebar-w);
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #073f37 0%, #0f172a 100%);
  box-shadow: 8px 0 32px rgba(8, 61, 55, 0.12);
}

.academy-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.85rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ap-radius);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
  flex-shrink: 0;
}

.academy-sidebar__brand-logo {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--ap-gradient);
  box-shadow: 0 0 0 3px rgba(15, 143, 114, 0.2);
  overflow: hidden;
  flex-shrink: 0;
}

.academy-sidebar__brand-logo img {
  width: 22px;
  height: 22px;
}

.academy-sidebar__brand-name {
  font-size: 0.875rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.academy-sidebar__brand-sub {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 600;
}

.academy-portal .portal-nav__links {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.35rem 0.75rem 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.acad-nav-section__label {
  display: block;
  padding: 0.65rem 0.65rem 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.academy-portal .portal-nav__link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.15rem;
  border: 1px solid transparent;
  border-radius: var(--ap-radius-sm);
  color: #cbd5e1;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.academy-portal .portal-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.academy-portal .portal-nav__link.is-active {
  background: rgba(15, 143, 114, 0.22);
  border-color: rgba(15, 143, 114, 0.35);
  color: #fff;
  font-weight: 700;
}

.nav-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.academy-portal .portal-nav__link.is-active .nav-icon {
  background: rgba(15, 143, 114, 0.35);
}

.academy-sidebar__foot {
  flex-shrink: 0;
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.acad-user-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ap-radius-sm);
  background: rgba(255, 255, 255, 0.05);
}

.acad-user-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ap-gradient);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.acad-user-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academy-portal .portal-nav__link.acad-signout:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
}

.academy-sidebar__foot .theme-toggle {
  width: 100%;
  margin-bottom: 0.35rem;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}

/* ── Main workspace ────────────────────────────────────────────── */
.academy-portal .portal__main {
  flex: 1;
  min-width: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(15, 143, 114, 0.07), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(37, 99, 235, 0.05), transparent 22%),
    var(--ap-bg);
}

.academy-portal .portal__main > .acad-topbar {
  flex-shrink: 0;
}

.academy-portal .portal__main > .acad-content,
.academy-portal .portal__main > .portal__header,
.academy-portal .portal__main > form,
.academy-portal .portal__main > .card,
.academy-portal .portal__main > .data-table-wrap,
.academy-portal .portal__main > .stats-grid,
.academy-portal .portal__main > .portal-section,
.academy-portal .portal__main > section,
.academy-portal .portal__main > .breadcrumbs,
.academy-portal .portal__main > .pagination,
.academy-portal .portal__main > .portal-grid,
.academy-portal .portal__main > .finance-kpi-grid,
.academy-portal .portal__main > .finance-detail-grid,
.academy-portal .portal__main > .finance-gateway-panel,
.academy-portal .portal__main > .equipment-summary,
.academy-portal .portal__main > .directory__filters,
.academy-portal .portal__main > .filter-form,
.academy-portal .portal__main > nav.pagination {
  margin-inline: clamp(1rem, 2.2vw, 1.75rem);
}

.academy-portal .portal__main > .acad-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2.2vw, 1.75rem) 2rem;
  margin-inline: 0;
  scrollbar-width: thin;
}

.academy-portal .portal__main > *:not(.acad-topbar):first-child {
  margin-top: clamp(1rem, 2vw, 1.25rem);
}

.academy-portal .portal__main > *:last-child {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* Scrollable main when no acad-content wrapper */
.academy-portal .portal__main:not(:has(> .acad-content)) {
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Top bar (dashboard) ───────────────────────────────────────── */
.acad-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--ap-topbar-h);
  padding: 0 clamp(1rem, 2.2vw, 1.75rem);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--ap-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.acad-topbar__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ap-muted);
}

.acad-topbar__current {
  color: var(--ap-text);
  font-weight: 800;
}

.acad-topbar__sep {
  color: var(--ap-border-strong);
}

.acad-topbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ── Page headers (list / detail pages) ────────────────────────── */
.academy-portal .portal__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem !important;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  box-shadow: var(--ap-shadow-sm);
}

.academy-portal .portal__title {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 900;
  color: var(--ap-text);
  line-height: 1.25;
}

.portal__subtitle,
.academy-portal .text-muted {
  color: var(--ap-muted);
  font-size: 0.86rem;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.academy-portal .btn {
  min-height: 2.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--ap-radius-sm);
  font-size: 0.84rem;
  font-weight: 700;
}

.academy-portal .btn--primary {
  background: var(--ap-gradient) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(15, 143, 114, 0.22);
}

.academy-portal .btn--primary:hover {
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.22);
  transform: translateY(-1px);
}

.academy-portal .btn--ghost {
  border: 1px solid var(--ap-border) !important;
  background: var(--ap-surface) !important;
  color: var(--ap-text) !important;
}

.academy-portal .btn--ghost:hover {
  border-color: rgba(15, 143, 114, 0.35) !important;
  color: var(--ap-green-dark) !important;
}

.academy-portal .btn--sm {
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
}

/* ── Cards & panels ────────────────────────────────────────────── */
.academy-portal .card,
.acad-panel,
.stat-card,
.finance-kpi-card,
.finance-detail-card,
.finance-gateway-panel,
.equipment-summary__card {
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-radius) !important;
  background: var(--ap-surface) !important;
  box-shadow: var(--ap-shadow-sm) !important;
}

.academy-portal .card {
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}

.acad-panel {
  padding: 1rem 1.1rem;
  overflow: hidden;
}

.acad-kicker {
  display: inline-flex;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: var(--ap-green-soft);
  border: 1px solid #bde7da;
  color: var(--ap-green-dark);
  font-size: 0.68rem;
  font-weight: 800;
}

/* ── Dashboard hero & KPIs ───────────────────────────────────────── */
.acad-command-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1rem;
  border: 1px solid var(--ap-border);
  border-radius: calc(var(--ap-radius) + 2px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 247, 241, 0.5) 55%, rgba(239, 246, 255, 0.55) 100%);
  box-shadow: var(--ap-shadow);
}

.acad-command-hero h1 {
  margin: 0.35rem 0 0.5rem;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 900;
  color: var(--ap-text);
  line-height: 1.2;
}

.acad-command-hero p {
  margin: 0;
  max-width: 52ch;
  color: var(--ap-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.acad-command-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.acad-command-hero__meta span {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--ap-border);
  background: var(--ap-surface);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ap-muted);
}

.acad-command-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}

.acad-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.acad-metric {
  position: relative;
  display: grid;
  gap: 0.35rem;
  min-height: 108px;
  padding: 1rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  box-shadow: var(--ap-shadow-sm);
  overflow: hidden;
}

.acad-metric::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--metric-color, var(--ap-green));
}

.acad-metric__label {
  color: var(--ap-muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.acad-metric strong {
  color: var(--ap-text);
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

.acad-metric small {
  color: var(--ap-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.acad-metric--green { --metric-color: var(--ap-green); }
.acad-metric--blue { --metric-color: var(--ap-blue); }
.acad-metric--amber { --metric-color: #d97706; }
.acad-metric--slate { --metric-color: #475569; }

.acad-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.75fr);
  gap: 1rem;
  align-items: start;
}

.acad-dashboard-layout__main,
.acad-dashboard-layout__side {
  display: grid;
  gap: 1rem;
}

.acad-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.acad-panel__head h2 {
  margin: 0.35rem 0 0;
  font-size: 1rem;
  font-weight: 900;
  color: var(--ap-text);
}

.acad-panel__head a {
  color: var(--ap-green);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.acad-performance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.acad-progress-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.acad-progress {
  height: 8px;
  border-radius: 999px;
  background: #e8edf3;
  overflow: hidden;
}

.acad-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ap-gradient);
}

.acad-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.acad-module-grid a {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  padding: 0.85rem 0.5rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  background: #fff;
  color: var(--ap-text);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.acad-module-grid a:hover {
  border-color: rgba(15, 143, 114, 0.35);
  box-shadow: var(--ap-shadow-sm);
  transform: translateY(-2px);
}

.acad-module-grid a span {
  font-size: 1.35rem;
}

.acad-session-row,
.acad-invoice-list a,
.acad-task-list a,
.acad-team-list a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 60px;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  background: #fff;
  color: var(--ap-text);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.acad-session-row:hover,
.acad-invoice-list a:hover,
.acad-task-list a:hover,
.acad-team-list a:hover {
  border-color: rgba(15, 143, 114, 0.3);
  box-shadow: var(--ap-shadow-sm);
}

.acad-empty-state {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem;
  border: 1px dashed var(--ap-border-strong);
  border-radius: var(--ap-radius-sm);
  background: #f8fafc;
  text-align: center;
}

.acad-empty-state strong {
  color: var(--ap-text);
  font-size: 0.9rem;
}

.acad-empty-state span {
  color: var(--ap-muted);
  font-size: 0.82rem;
}

/* ── Filters ───────────────────────────────────────────────────── */
.academy-portal .directory__filters,
.academy-portal .filter-form {
  margin-bottom: 1rem;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
  align-items: end;
}

.filter-field__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ap-muted);
}

.filter-field__input,
.academy-portal input[type="text"],
.academy-portal input[type="email"],
.academy-portal input[type="search"],
.academy-portal input[type="number"],
.academy-portal input[type="date"],
.academy-portal input[type="url"],
.academy-portal select,
.academy-portal textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  background: #fff;
  color: var(--ap-text);
  font: inherit;
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-field__input:focus,
.academy-portal input:focus,
.academy-portal select:focus,
.academy-portal textarea:focus {
  outline: 0;
  border-color: rgba(15, 143, 114, 0.45);
  box-shadow: 0 0 0 3px rgba(15, 143, 114, 0.12);
}

/* ── Data tables ─────────────────────────────────────────────────── */
.academy-portal .data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
  padding: 0;
}

.academy-portal .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.academy-portal .data-table th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ap-border);
  background: #f8fafc;
  color: var(--ap-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: start;
  white-space: nowrap;
}

.academy-portal .data-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #eef2f6;
  color: var(--ap-text);
  vertical-align: middle;
}

.academy-portal .data-table tbody tr:hover td {
  background: rgba(15, 143, 114, 0.04);
}

.academy-portal .data-table a {
  color: var(--ap-green);
  font-weight: 700;
  text-decoration: none;
}

.academy-portal .data-table a:hover {
  color: var(--ap-green-dark);
  text-decoration: underline;
}

/* ── Stats & finance grids ───────────────────────────────────────── */
.academy-portal .stats-grid,
.finance-kpi-grid,
.finance-detail-grid,
.equipment-summary {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.academy-portal .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.finance-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.finance-kpi-grid--wallet {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.finance-detail-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stat-card::before,
.acad-metric::before {
  opacity: 1;
}

.stat-card::before {
  background: var(--ap-gradient);
}

.stat-card strong,
.finance-kpi-card strong,
.finance-detail-card strong {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ap-text);
}

/* ── Status badges ───────────────────────────────────────────────── */
.status {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.status--active {
  background: var(--ap-green-soft);
  color: var(--ap-green-dark);
}

.status--expired,
.status--inactive {
  background: #fef2f2;
  color: #b91c1c;
}

/* ── Pagination & breadcrumbs ──────────────────────────────────── */
.academy-portal .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.academy-portal .pagination__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--ap-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ap-text);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.academy-portal .pagination__link:hover {
  border-color: rgba(15, 143, 114, 0.35);
  color: var(--ap-green-dark);
}

.academy-portal .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ap-muted);
}

.academy-portal .breadcrumbs a {
  color: var(--ap-green);
  text-decoration: none;
}

/* ── Mobile top bar & drawer ───────────────────────────────────── */
.ap-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.ap-drawer-backdrop.is-visible {
  display: block;
}

.ap-mobile-bar {
  display: none;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .acad-metrics-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acad-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .acad-performance-grid,
  .acad-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-kpi-grid,
  .finance-kpi-grid--wallet,
  .finance-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :root {
    --ap-sidebar-w: 248px;
  }
}

@media (max-width: 768px) {
  .ap-mobile-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 190;
    min-height: var(--ap-mobile-bar-h);
    padding: 0 0.85rem;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--ap-border);
    box-shadow: var(--ap-shadow-sm);
  }

  .ap-mobile-bar__menu {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    background: #fff;
    color: var(--ap-text);
    cursor: pointer;
    flex-shrink: 0;
  }

  .ap-mobile-bar__menu svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .ap-mobile-bar__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ap-text);
  }

  .site-body:has(.academy-portal) {
    height: 100dvh;
    overflow: hidden;
  }

  .site-body:has(.academy-portal) .site-main {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .academy-portal,
  .academy-portal .container,
  .academy-portal .portal__layout {
    height: 100dvh;
    overflow: hidden;
  }

  /* Override legacy hide rules — slide-in drawer */
  .academy-portal .academy-sidebar,
  .academy-portal .portal-nav {
    display: flex !important;
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    z-index: 200;
    width: min(86vw, 300px);
    min-width: 0;
    transform: translateX(-110%);
    transition: transform 0.22s ease;
    box-shadow: 16px 0 48px rgba(15, 23, 42, 0.2);
  }

  html[dir="rtl"] .academy-portal .academy-sidebar,
  html[dir="rtl"] .academy-portal .portal-nav {
    transform: translateX(110%);
  }

  .academy-portal .academy-sidebar.is-open,
  .academy-portal .portal-nav.is-open {
    transform: translateX(0) !important;
  }

  .academy-portal .portal-nav__links,
  .academy-portal .academy-sidebar__foot {
    display: flex !important;
  }

  .academy-portal .portal-nav__links {
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
  }

  .academy-portal .academy-sidebar__foot {
    flex-direction: column;
    flex-shrink: 0;
  }

  .ap-shell {
    width: 0;
    min-width: 0;
    overflow: visible;
  }

  .academy-portal .portal__main {
    width: 100%;
    height: 100dvh;
    padding-top: calc(var(--ap-mobile-bar-h) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
  }

  .academy-portal .portal__main > .acad-content {
    padding-top: 0.85rem;
  }

  .acad-topbar {
    position: relative;
    top: auto;
    min-height: auto;
    padding-block: 0.75rem;
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .acad-topbar__actions {
    width: 100%;
  }

  .acad-topbar__actions .btn {
    flex: 1;
    justify-content: center;
  }

  .acad-command-hero {
    flex-direction: column;
  }

  .acad-command-hero__actions {
    width: 100%;
  }

  .acad-command-hero__actions .btn {
    flex: 1;
    justify-content: center;
  }

  .acad-metrics-row,
  .acad-performance-grid,
  .acad-module-grid,
  .finance-kpi-grid,
  .finance-kpi-grid--wallet,
  .finance-detail-grid,
  .finance-gateway-panel,
  .finance-invoice-card,
  .portal-grid--two {
    grid-template-columns: 1fr !important;
  }

  .academy-portal .portal__header {
    flex-direction: column;
    align-items: stretch;
  }

  .academy-portal .portal__header .btn {
    width: 100%;
    justify-content: center;
  }

  .filter-field--grow {
    grid-column: 1 / -1;
  }

  .filter-field--actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .filter-field--actions .btn {
    flex: 1;
    min-width: 7rem;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   Comprehensive section styles — all portal pages
══════════════════════════════════════════════════════════════ */

/* Standalone page titles (forms / reports without header wrapper) */
.academy-portal .portal__main > .portal__title {
  margin: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2.2vw, 1.75rem) 1rem !important;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  box-shadow: var(--ap-shadow-sm);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 900;
  color: var(--ap-text);
  line-height: 1.25;
}

.academy-portal .portal__header .portal__title {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.acad-page-head {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  background: linear-gradient(135deg, #fff 0%, #f6fbfa 100%);
  box-shadow: var(--ap-shadow-sm);
}

.acad-page-head h1 {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 900;
  color: var(--ap-text);
  line-height: 1.25;
}

.acad-page-head p {
  margin: 0;
  max-width: 58ch;
  color: var(--ap-muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

.portal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.academy-portal .portal-section {
  margin-bottom: 1rem;
}

.academy-portal .portal-section__title {
  margin: 0 0 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #eef2f6;
  color: var(--ap-text);
  font-size: 1rem;
  font-weight: 900;
}

.portal-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.portal-section__head .portal-section__title {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Lists & link rows */
.academy-portal .simple-list,
.academy-portal ul.simple-list,
.academy-portal .simple-list.card {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.academy-portal .simple-list li,
.academy-portal .simple-list > div,
.academy-portal .simple-list > a {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  background: #fff;
  color: var(--ap-text);
  line-height: 1.55;
}

.academy-portal .simple-list li:hover,
.academy-portal .simple-list > div:hover {
  border-color: rgba(15, 143, 114, 0.28);
}

.academy-portal .simple-list a {
  color: var(--ap-green);
  font-weight: 800;
  text-decoration: none;
}

.academy-portal .simple-list a:hover {
  color: var(--ap-green-dark);
  text-decoration: underline;
}

.academy-portal .simple-list.card {
  padding: 0.65rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  background: var(--ap-surface);
  box-shadow: var(--ap-shadow-sm);
}

/* Forms */
.academy-portal .auth-form,
.academy-portal .wizard-form,
.academy-portal form.card {
  display: grid;
  gap: 1rem;
}

.academy-portal .form-group {
  display: grid;
  gap: 0.35rem;
}

.academy-portal .form-group__label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ap-muted);
}

.academy-portal .form-group__hint {
  margin: 0;
  font-size: 0.78rem;
}

.academy-portal .form-group__error {
  margin: 0;
  color: #b91c1c;
  font-size: 0.78rem;
  font-weight: 700;
}

.academy-portal .form-grid,
.academy-portal .wizard-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}

.academy-portal .btn--block {
  width: 100%;
  justify-content: center;
}

.academy-portal .btn--danger,
.academy-portal .btn--destructive {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #b91c1c !important;
}

.section-divider {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--ap-border);
}

/* Alerts */
.academy-portal .alert {
  padding: 0.85rem 1rem;
  border-radius: var(--ap-radius-sm);
  border: 1px solid var(--ap-border);
  font-size: 0.86rem;
  font-weight: 600;
}

.academy-portal .alert--info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.academy-portal .alert--error,
.academy-portal .alert--danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.academy-portal .alert--success {
  background: var(--ap-green-soft);
  border-color: #bde7da;
  color: var(--ap-green-dark);
}

/* Address / map panels */
.address-capture-panel,
.google-map-picker,
.academy-portal .map-enabled-form .address-capture-panel {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  background: #f8fafc;
}

.address-capture-panel__head span {
  color: var(--ap-green);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.address-capture-panel__head h2 {
  margin: 0.25rem 0 0.35rem;
  font-size: 1rem;
  font-weight: 900;
  color: var(--ap-text);
}

.address-capture-panel__head p {
  margin: 0;
  color: var(--ap-muted);
  font-size: 0.84rem;
  line-height: 1.6;
}

.address-capture-panel__map,
.google-map-picker__canvas {
  min-height: 280px;
  border-radius: var(--ap-radius-sm);
  overflow: hidden;
  background: #e2e8f0;
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Finance & equipment */
.finance-gateway-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.finance-gateway-item {
  padding: 0.85rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  background: #fff;
}

.finance-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.equipment-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.equipment-summary__card strong {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--ap-text);
}

.equipment-privacy-note {
  border-inline-start: 3px solid var(--ap-green);
}

.portal-grid {
  display: grid;
  gap: 1rem;
}

.portal-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Detail pages — definition lists */
.academy-portal dl,
.academy-portal .detail-grid {
  display: grid;
  gap: 0.65rem;
}

.academy-portal dt {
  color: var(--ap-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.academy-portal dd {
  margin: 0;
  color: var(--ap-text);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Empty states */
.academy-portal .empty-state,
.empty-state {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  padding: 2rem 1.25rem;
  text-align: center;
  border: 1px dashed var(--ap-border-strong);
  border-radius: var(--ap-radius);
  background: #f8fafc;
}

.empty-state__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ap-text);
}

.empty-state__text {
  margin: 0;
  max-width: 36ch;
  color: var(--ap-muted);
}

/* Screen help button */
.academy-portal .academy-screen-help {
  margin: 0 clamp(1rem, 2.2vw, 1.75rem) 0.85rem;
  border-color: #bde7da;
  background: var(--ap-green-soft);
  color: var(--ap-green-dark);
}

.academy-portal .academy-screen-help--floating {
  margin-inline: clamp(1rem, 2.2vw, 1.75rem);
}

.academy-help-modal__card {
  border-radius: var(--ap-radius);
  border: 1px solid var(--ap-border);
  box-shadow: var(--ap-shadow);
}

.academy-help-modal__eyebrow {
  color: var(--ap-green-dark);
  background: var(--ap-green-soft);
}

/* Tags */
.academy-portal .tag {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Tables — horizontal scroll on small screens */
.academy-portal .data-table {
  min-width: 640px;
}

.academy-portal .portal__main > .simple-list,
.academy-portal .portal__main > .academy-screen-help,
.academy-portal .portal__main > .academy-screen-help--floating {
  margin-inline: clamp(1rem, 2.2vw, 1.75rem);
}

/* Money / task list extras from dashboard */
.acad-money-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.95rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  background: linear-gradient(135deg, #fff, #f6fbfa);
}

.acad-money-card strong {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ap-text);
}

.acad-task-list__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.acad-task-list__dot.is-green { background: var(--ap-green); }
.acad-task-list__dot.is-blue { background: var(--ap-blue); }
.acad-task-list__dot.is-amber { background: #d97706; }
.acad-task-list__dot.is-slate { background: #64748b; }

.acad-invoice-list b,
.acad-team-list b {
  color: var(--ap-green-dark);
}

/* Session row extras */
.acad-session-row__attendance {
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: var(--ap-green-soft);
  color: var(--ap-green-dark);
  font-size: 0.78rem;
  font-weight: 800;
}

/* Dark theme — academy portal */
html[data-theme="dark"] .site-body:has(.academy-portal) {
  --ap-bg: #0b1220;
  --ap-surface: #111827;
  --ap-border: #1f2937;
  --ap-border-strong: #374151;
  --ap-text: #f1f5f9;
  --ap-muted: #94a3b8;
}

html[data-theme="dark"] .academy-portal .portal__main {
  background:
    radial-gradient(circle at 12% 0%, rgba(15, 143, 114, 0.08), transparent 26%),
    var(--ap-bg);
}

html[data-theme="dark"] .acad-topbar,
html[data-theme="dark"] .ap-mobile-bar,
html[data-theme="dark"] .academy-portal .portal__header,
html[data-theme="dark"] .academy-portal .card,
html[data-theme="dark"] .acad-panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .finance-kpi-card,
html[data-theme="dark"] .acad-page-head,
html[data-theme="dark"] .academy-portal .portal__main > .portal__title {
  background: var(--ap-surface) !important;
  border-color: var(--ap-border) !important;
  color: var(--ap-text);
}

html[data-theme="dark"] .academy-portal .data-table th {
  background: #0f172a;
}

html[data-theme="dark"] .academy-portal .data-table tbody tr:hover td {
  background: rgba(15, 143, 114, 0.08);
}

html[data-theme="dark"] .filter-field__input,
html[data-theme="dark"] .academy-portal input,
html[data-theme="dark"] .academy-portal select,
html[data-theme="dark"] .academy-portal textarea {
  background: #0f172a;
  border-color: var(--ap-border);
  color: var(--ap-text);
}

/* Final legacy overrides — academy.css duplicates */
.academy-portal .portal__main > .portal__header,
.academy-portal .portal__main > .stats-grid,
.academy-portal .portal__main > .portal-section,
.academy-portal .portal__main > .card,
.academy-portal .portal__main > form,
.academy-portal .portal__main > .data-table-wrap,
.academy-portal .portal__main > section,
.academy-portal .portal__main > .breadcrumbs,
.academy-portal .portal__main > .pagination,
.academy-portal .portal__main > .portal-grid,
.academy-portal .portal__main > .finance-kpi-grid,
.academy-portal .portal__main > .finance-detail-grid,
.academy-portal .portal__main > .finance-gateway-panel,
.academy-portal .portal__main > .equipment-summary,
.academy-portal .portal__main > .directory__filters,
.academy-portal .portal__main > .filter-form,
.academy-portal .portal__main > nav.pagination {
  margin-inline: clamp(1rem, 2.2vw, 1.75rem) !important;
}

.academy-portal .portal__main > .portal__header {
  margin-top: clamp(1rem, 2vw, 1.25rem) !important;
}

.academy-portal .btn--primary {
  background: var(--ap-gradient) !important;
  border-color: transparent !important;
}

.academy-portal .portal-nav__link.is-active {
  background: rgba(15, 143, 114, 0.22) !important;
  border-color: rgba(15, 143, 114, 0.35) !important;
  color: #fff !important;
}

body.ap-drawer-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .academy-portal .academy-sidebar,
  .acad-module-grid a,
  .academy-portal .btn--primary:hover {
    transition: none;
    transform: none;
  }
}