/*
 * responsive.css — Stream-AI Workout Assistant
 * Mobile-first responsive overrides.
 * Loaded after all other CSS so these rules win on small screens.
 * Never modifies desktop layout — all rules are inside @media max-width blocks.
 */

/* ============================================================
   BREAKPOINTS (matching Bootstrap 5)
   xs  <  576px   — phones in portrait
   sm  ≥  576px   — phones in landscape / large phones
   md  ≥  768px   — tablets
   lg  ≥  992px   — desktops (no overrides needed, site already looks good)
   ============================================================ */


/* ── GLOBAL MOBILE (< 768px) ────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Tighter page padding so content doesn't touch edges */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Section vertical spacing */
  .mb-5 { margin-bottom: 2rem !important; }
  .mt-5 { margin-top:    2rem !important; }
  .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-5 { padding-top: 2rem   !important; padding-bottom: 2rem   !important; }
}


/* ── NAVBAR ─────────────────────────────────────────────────── */
@media (max-width: 575.98px) {

  /* Prevent brand text from wrapping or overflowing */
  .navbar-brand {
    font-size: 1rem !important;
    max-width: calc(100vw - 160px); /* leave room for hamburger + user buttons */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .navbar-brand img {
    width: 30px !important;
    height: 30px !important;
  }

  /* Login / register button pair: shrink text */
  #login-buttons .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* Hide button label text, keep icon */
  #login-buttons .btn .fa-sign-in-alt,
  #login-buttons .btn .fa-user-plus {
    margin-right: 0 !important;
  }
}


/* ── HERO SECTION ────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Bootstrap display-4 is 3.5rem — too large on a phone */
  .display-4 {
    font-size: 1.9rem !important;
    line-height: 1.25 !important;
  }

  .lead {
    font-size: 1rem !important;
  }

  /* Stack CTA buttons vertically and make them full-width */
  .d-flex.justify-content-center.gap-3.flex-wrap .btn {
    width: 100%;
    justify-content: center;
  }

  /* Hero heading spacing */
  h2.mb-4 {
    font-size: 1.4rem;
  }
}


/* ── CARDS ───────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  .card {
    margin-bottom: 1rem;
  }

  /* Make card body padding tighter on mobile */
  .card-body {
    padding: 1rem !important;
  }

  /* Card titles */
  .card-title {
    font-size: 1.1rem;
  }
}


/* ── WORKOUT SECTION ─────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Exercise buttons / selectors: ensure they're touch-friendly (≥ 44px tall) */
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Video / camera feed: full width on mobile */
  video,
  canvas,
  #video-container,
  .video-wrapper {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Rep counter / feedback panels: stack vertically */
  .workout-panel,
  .rep-counter,
  .feedback-panel,
  #rep-tracker,
  #form-feedback {
    width: 100% !important;
    margin-bottom: 0.75rem;
  }

  /* Workout control row: stack buttons */
  .workout-controls {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .workout-controls .btn {
    width: 100%;
  }

  /* Exercise picker grid: 2 columns on mobile instead of 3-4 */
  .exercise-grid,
  .exercise-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
}


/* ── DASHBOARD & STATS ───────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Stat cards: single column on small phones */
  .stats-row .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Chart containers: respect phone width */
  canvas {
    max-width: 100% !important;
  }
}


/* ── FORMS & INPUTS ──────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Inputs are touch-friendly */
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
  }

  /* Form labels */
  .form-label {
    font-weight: 600;
    margin-bottom: 0.3rem;
  }
}


/* ── FOOTER ──────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  footer .col-md-4 {
    margin-bottom: 1.25rem;
  }

  footer h5 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  footer {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}


/* ── HAMBURGER MENU ──────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Make touch targets inside menu comfortable */
  .hamburger-menu-item {
    padding: 15px 20px;
    min-height: 52px;
  }

  /* Hamburger button itself: larger hit area */
  .hamburger-btn {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ── PROFILE & REGISTRATION PAGES ───────────────────────────── */
@media (max-width: 575.98px) {

  .profile-avatar,
  .avatar-circle {
    width: 80px !important;
    height: 80px !important;
    font-size: 2rem !important;
  }

  .profile-header {
    padding: 1.5rem 1rem !important;
  }
}


/* ── CHATBOT ─────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* Chat window fills the screen on mobile */
  .chat-container,
  #chat-container {
    height: calc(100vh - 120px) !important;
    border-radius: 0 !important;
  }

  /* Chat input row: button stays visible */
  .chat-input-row {
    position: sticky;
    bottom: 0;
    background: var(--bg-secondary);
    padding: 0.5rem;
    z-index: 10;
  }
}


/* ── WORKOUT CALENDAR ────────────────────────────────────────── */
@media (max-width: 575.98px) {

  /* Calendar grid: each day cell is smaller */
  .cal-grid {
    font-size: 0.75rem;
  }

  /* Calendar header controls: wrap neatly */
  .card-header .d-flex {
    flex-wrap: wrap;
    gap: 0.4rem !important;
  }
}


/* ── UTILITY: SAFE AREA INSETS (iPhone notch / home bar) ─────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }
  .chat-input-row {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }
}