/* =========================================================
   NEXTGEN VIRTUAL ACADEMY — SHARED VISUAL SYSTEM
   Replace: css/academy-theme.css
   Appearance only: learning content and button functions stay unchanged.
   ========================================================= */

:root {
  --academy-navy: #0f172a;
  --academy-navy-soft: #172554;
  --academy-blue: #2563eb;
  --academy-blue-dark: #1d4ed8;
  --academy-blue-light: #eff6ff;
  --academy-page: #f5f7fb;
  --academy-card: #ffffff;
  --academy-border: #dbe4f0;
  --academy-text: #0f172a;
  --academy-muted: #64748b;
  --academy-success: #16a34a;
  --academy-radius: 18px;
}

body {
  background: var(--academy-page);
  color: var(--academy-text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

/* Shared headers. */
.academy-header,
.app-header {
  background: rgb(255 255 255 / 96%);
  border-bottom-color: var(--academy-border);
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
}

.academy-brand,
.header-brand {
  color: var(--academy-text);
}

.academy-mark,
.brand-mark {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

/* Cards and readers. */
.card,
.academy-panel,
.api-progress-card,
.selenium-progress-card,
.request-card,
.response-card,
.lesson-reader,
.selenium-lesson-reader,
.java-lesson-reader,
.pw-reader-card,
.mt-reader-card,
.sql-card,
.sql-challenge-card,
.sql-learning-card,
.sql-score-card {
  border-color: var(--academy-border);
  border-radius: var(--academy-radius);
  background: var(--academy-card);
  box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
}

.card-header,
.academy-panel > header {
  border-bottom-color: #eef2f7;
}

/* Consistent small topic labels. */
.academy-eyebrow,
.sidebar-label,
.sql-module-label,
.sql-section-label,
.java-module-label,
.pw-label,
.pw-eyebrow,
.mt-label,
.sql-eyebrow {
  color: var(--academy-blue) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
}

/* Progress bars. */
.progress,
.academy-progress,
.sql-progress-track,
.selenium-progress,
.mt-progress-track,
.pw-progress-track {
  overflow: hidden;
  border-radius: 999px;
  background: var(--academy-border);
}

.progress-bar,
.sql-progress-fill,
.academy-progress > span,
.selenium-progress > span,
.mt-progress-track i,
.pw-progress-track i {
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}

/* =========================================================
   ONE BUTTON LANGUAGE
   Blue = main action. White = secondary action. Pale = reset.
   ========================================================= */
.academy-btn,
.selenium-btn,
.primary-btn,
.secondary-btn,
.reset-btn,
.sql-primary,
.sql-secondary,
.api-outline,
.btn,
.mt-reader-card footer button,
.pw-reader-card footer button,
.skills-card button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.academy-btn:hover,
.selenium-btn:hover,
.primary-btn:hover,
.secondary-btn:hover,
.reset-btn:hover,
.sql-primary:hover,
.sql-secondary:hover,
.api-outline:hover,
.btn:hover,
.mt-reader-card footer button:hover,
.pw-reader-card footer button:hover,
.skills-card button:hover {
  transform: translateY(-1px);
}

/* Main actions. */
.btn-primary,
.academy-btn-primary,
.selenium-btn-primary,
.api-complete,
.selenium-complete,
.primary-btn,
.sql-primary,
.mt-reader-card footer .primary-btn,
.pw-reader-card footer .primary-btn {
  border-color: var(--academy-blue) !important;
  background: var(--academy-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgb(37 99 235 / 18%);
}

.btn-primary:hover,
.academy-btn-primary:hover,
.selenium-btn-primary:hover,
.api-complete:hover,
.selenium-complete:hover,
.primary-btn:hover,
.sql-primary:hover,
.mt-reader-card footer .primary-btn:hover,
.pw-reader-card footer .primary-btn:hover {
  border-color: var(--academy-blue-dark) !important;
  background: var(--academy-blue-dark) !important;
  color: #ffffff !important;
}

/* Secondary actions stay fully readable on every background. */
.btn-secondary,
.academy-btn-secondary,
.selenium-btn-secondary,
.secondary-btn,
.sql-secondary,
.api-outline,
.mt-reader-card footer button:not(.primary-btn),
.pw-reader-card footer button:not(.primary-btn),
.skills-card button:not(.primary-btn) {
  border-color: #b9cdf4 !important;
  background: #ffffff !important;
  color: #1e3a8a !important;
}

.btn-secondary:hover,
.academy-btn-secondary:hover,
.selenium-btn-secondary:hover,
.secondary-btn:hover,
.sql-secondary:hover,
.api-outline:hover,
.mt-reader-card footer button:not(.primary-btn):hover,
.pw-reader-card footer button:not(.primary-btn):hover,
.skills-card button:not(.primary-btn):hover {
  border-color: var(--academy-blue) !important;
  background: var(--academy-blue-light) !important;
  color: var(--academy-blue-dark) !important;
}

/* Reset is deliberately quieter than normal actions. */
.reset-btn,
.selenium-reset-btn,
.java-reset-hero {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  box-shadow: none !important;
}

.reset-btn:hover,
.selenium-reset-btn:hover,
.java-reset-hero:hover {
  border-color: #94a3b8 !important;
  background: #eef2f7 !important;
  color: #1e293b !important;
}

/* Tabs have the same active and hover treatment everywhere. */
.mt-tab,
.java-tab,
.sql-tab,
.pw-tab,
.api-tab,
.selenium-tab {
  border: 1px solid transparent;
  color: #475569;
  font-family: inherit;
  font-weight: 800;
  transition: background-color 180ms ease, color 180ms ease,
    border-color 180ms ease;
}

.mt-tab:hover,
.java-tab:hover,
.sql-tab:hover,
.pw-tab:hover,
.api-tab:hover,
.selenium-tab:hover {
  background: #eff6ff;
  color: var(--academy-blue);
}

.mt-tab.active,
.java-tab.active,
.sql-tab.active,
.pw-tab.active,
.api-tab.active,
.selenium-tab.active,
.academy-nav a.active,
.nav-link.active {
  border-color: var(--academy-blue) !important;
  background: var(--academy-blue) !important;
  color: #ffffff !important;
}

/* Shared dark code surface. */
.lesson-code,
.java-code,
.pw-code,
.mt-code,
.sql-editor {
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
}

/* Predictable hover for interactive learning cards. */
.learning-card,
.java-lesson-button,
.pw-lesson,
.mt-lesson,
.sql-learning-item,
.selenium-lesson-card {
  transition: transform 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease;
}

.learning-card:hover,
.java-lesson-button:hover,
.pw-lesson:hover,
.mt-lesson:hover,
.sql-learning-item:hover,
.selenium-lesson-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 6px 16px rgb(37 99 235 / 10%);
}

@media (max-width: 767px) {
  .academy-btn,
  .selenium-btn,
  .primary-btn,
  .secondary-btn,
  .reset-btn,
  .sql-primary,
  .sql-secondary,
  .api-outline,
  .btn {
    min-height: 40px;
    padding: 9px 13px;
    font-size: 12px !important;
  }

  .academy-hero,
  .api-hero,
  .selenium-hero {
    border-radius: 18px;
  }
}