/* ═══════════════════════════════════════════════════════════════════════════
   LexCore Responsive — shared responsive overrides + UI polish
   Loaded AFTER each page's inline <style> to layer responsive behavior on top.
   DO NOT put base layout or page-specific styles here — only responsive
   breakpoints, interaction states, transitions, and polish utilities.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Smooth scroll & focus ──────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
*:focus-visible {
  outline: 2px solid var(--gold, #c9a84c);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Global transitions ─────────────────────────────────────────────────── */
a, button, input, select, textarea, .nav-link, .nav-item, .btn, .card,
.int-card, .stat-card, .filter-pill, .tab, .sidebar-item {
  transition: all 0.2s ease;
}

/* ── Typography hierarchy ───────────────────────────────────────────────── */
h1 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 800; line-height: 1.2; }
h2 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: 700; line-height: 1.25; }
h3 { font-size: clamp(0.95rem, 2vw, 1.1rem); font-weight: 700; line-height: 1.3; }
h4 { font-size: 0.88rem; font-weight: 600; line-height: 1.35; }

/* ── Interactive states ─────────────────────────────────────────────────── */
button, [role="button"], .btn, .nav-link, .nav-item, .filter-pill,
a[onclick], .sidebar-item, .int-card, .exercise-row, .scenario-card {
  cursor: pointer;
}

button:disabled, .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Card consistency ───────────────────────────────────────────────────── */
.card, .stat-card, .new-exercise-card, .int-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover, .int-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }

/* ── Loading spinner ────────────────────────────────────────────────────── */
.lx-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border-light, #e2e8f0);
  border-top-color: var(--gold, #c9a84c);
  border-radius: 50%;
  animation: lx-spin 0.7s linear infinite;
}
@keyframes lx-spin { to { transform: rotate(360deg); } }

/* ── Skeleton loader ────────────────────────────────────────────────────── */
.lx-skeleton {
  background: linear-gradient(90deg,
    var(--border-light, #e2e8f0) 25%,
    rgba(226,232,240,0.5) 50%,
    var(--border-light, #e2e8f0) 75%);
  background-size: 200% 100%;
  animation: lx-shimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes lx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Empty state ────────────────────────────────────────────────────────── */
.lx-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--gray, #8899aa);
}
.lx-empty svg { width: 48px; height: 48px; color: #d1d5db; margin-bottom: 14px; }
.lx-empty h4 { font-size: 1rem; font-weight: 700; color: var(--navy, #0b1f3a); margin-bottom: 6px; }
.lx-empty p { font-size: 0.88rem; max-width: 320px; margin: 0 auto 16px; line-height: 1.5; }

/* ── Table responsive wrapper ───────────────────────────────────────────── */
.lx-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -20px;
  padding: 0 20px;
}
.lx-table-wrap::-webkit-scrollbar { height: 4px; }
.lx-table-wrap::-webkit-scrollbar-thumb { background: var(--border-light, #e2e8f0); border-radius: 2px; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR — hamburger collapse pattern
   Pages using the .shell > .sidebar + .main layout get mobile sidebar
   collapse automatically. Requires:
   - .mobile-header element (hidden on desktop)
   - .sidebar-overlay element
   - sidebar#sidebar with .open toggle class
   ═══════════════════════════════════════════════════════════════════════════ */

.mobile-header {
  display: none;
  background: var(--navy-dark, #071628);
  padding: 14px 20px;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 300;
}
.mobile-menu-btn {
  background: none;
  border: none;
  color: var(--white, #fff);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.15s;
}
.mobile-menu-btn:hover { background: rgba(255,255,255,0.08); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 190;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ── Breakpoint: TABLET (≤1024px) ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .content { padding: 24px !important; }
  .topbar { padding: 14px 24px !important; }

  /* Shrink stat grids */
  .stat-grid, .stats-grid, .scorecard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Shrink integration grid */
  .integrations-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  }
}

/* ── Breakpoint: MOBILE (≤768px) ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Show mobile header, collapse sidebar */
  .mobile-header { display: flex !important; }

  .shell > .sidebar,
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .shell > .sidebar.open,
  .sidebar.open {
    transform: translateX(0);
  }

  .main {
    margin-left: 0 !important;
  }

  .content {
    padding: 20px 16px !important;
  }

  .topbar {
    padding: 14px 16px !important;
  }
  .topbar-title { font-size: 0.95rem !important; }
  .topbar-right { gap: 8px; }

  /* Stat grids: 2 columns on mobile */
  .stat-grid, .stats-grid, .scorecard-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Stat card compact */
  .stat-card { padding: 14px 16px !important; }
  .stat-value { font-size: 1.4rem !important; }

  /* Cards */
  .card { border-radius: 10px; }

  /* Integration grid: single column */
  .integrations-grid {
    grid-template-columns: 1fr !important;
  }

  /* Forms: full width */
  .form-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  .form-group { width: 100%; }
  .form-select, .form-input, .search-input { width: 100% !important; min-width: 0 !important; }

  /* Filter bar wrap */
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .search-wrap { max-width: 100% !important; }
  .filter-pills { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; }

  /* Page headers */
  .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .section-header h2 { font-size: 1.15rem !important; }

  /* Slide-over: full screen on mobile */
  .slideover {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  /* Tables */
  .assoc-table, .entries-table {
    font-size: 0.78rem;
  }
  .assoc-table th, .entries-table th {
    font-size: 0.67rem !important;
    padding: 8px !important;
  }
  .assoc-table td, .entries-table td {
    padding: 10px 8px !important;
  }

  /* Charts: ensure they resize */
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Button groups wrap */
  .btn-group, .int-actions { flex-wrap: wrap; }

  /* Welcome block stack */
  .welcome-block {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .welcome-stat { text-align: left !important; }

  /* Hide secondary topbar items on mobile */
  .topbar-subtitle { display: none; }
}

/* ── Breakpoint: SMALL MOBILE (≤480px) ──────────────────────────────────── */
@media (max-width: 480px) {
  .content { padding: 16px 12px !important; }

  .stat-grid, .stats-grid, .scorecard-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .stat-card { padding: 12px 14px !important; }
  .stat-value { font-size: 1.2rem !important; }
  .stat-label { font-size: 0.65rem !important; }

  h1 { font-size: 1.3rem !important; }
  h2 { font-size: 1.1rem !important; }

  .btn { padding: 8px 14px !important; font-size: 0.8rem !important; }
  .btn-sm { padding: 5px 10px !important; font-size: 0.72rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   NON-SIDEBAR pages: onboarding, login, marketing
   ═══════════════════════════════════════════════════════════════════════════ */

/* Onboard 2-column → stacked on mobile */
@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr !important;
  }
  .page > .sidebar {
    position: relative !important;
    height: auto !important;
    padding: 32px 24px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    transform: none !important;
  }
  .page > .sidebar .sidebar-headline h1 {
    font-size: 1.4rem !important;
  }

  /* Nav for marketing pages */
  .nav-inner {
    padding: 0 16px !important;
  }
  .nav-links {
    gap: 16px !important;
  }
  .nav-link {
    font-size: 0.72rem !important;
  }
  .nav-cta {
    padding: 7px 14px !important;
    font-size: 0.75rem !important;
  }

  /* Scenario nav */
  nav {
    padding: 14px 16px !important;
  }
  .nav-scenario-title { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LMS page — has different layout (.layout grid)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr !important;
  }
  .layout > .sidebar {
    position: relative !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #1e2a3a);
    padding: 16px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 4px;
  }
  .layout > .sidebar .sidebar-section {
    display: flex;
    gap: 4px;
    margin-bottom: 0 !important;
  }
  .layout > .sidebar .sidebar-label { display: none; }
  .layout > .sidebar .sidebar-item {
    white-space: nowrap;
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
  }
  .layout > .main {
    padding: 20px 16px !important;
  }

  /* Nav links scroll horizontally on LMS page */
  .nav .nav-links {
    overflow-x: auto;
    gap: 4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mentor chat — full-height on mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .chat-container {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .chat-messages {
    padding: 16px !important;
  }
  .chat-input-area {
    padding: 12px 16px !important;
  }
  .chat-input-area textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Scenario engine — mobile adjustments
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .scenario-layout {
    padding: 24px 16px 60px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Marketing page — LexLearn responsive
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero { padding: 100px 16px 60px !important; }
  .hero-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .modules-grid, .value-grid, .cta-grid {
    grid-template-columns: 1fr !important;
  }
  .metric-row {
    flex-direction: column !important;
    gap: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Login page — responsive
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .login-container, .login-box {
    padding: 24px !important;
    max-width: 100% !important;
    margin: 0 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Print — hide nav/sidebar for clean printouts
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .sidebar, .mobile-header, .sidebar-overlay, .topbar, nav { display: none !important; }
  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; }
}