/* ============================================================
   GLOBAL RESPONSIVE STYLES FOR SPOKN WEB APP
   Applies to ALL pages: login, dashboard, learning path, tasks,
   profile, pricing, chat, summary, PSC, admin, etc.
   ============================================================ */

/* ------------------------------
   1. Base Mobile-First Defaults
   ------------------------------ */
html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img, video {
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font-size: 1rem;
}

/* ------------------------------
   2. Global Layout Scaling
   ------------------------------ */
@media (max-width: 480px) {
  body {
    font-size: 15px;
    line-height: 1.45;
  }

  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.2rem; }

  .container, .page-wrapper {
    padding: 0 1rem;
  }
}

/* ------------------------------
   3. Navigation / Headers
   ------------------------------ */
@media (max-width: 480px) {
  .top-nav, .header, .navbar {
    padding: 0.75rem 1rem;
    height: auto;
  }

  .top-nav img.logo {
    height: 32px;
  }
}

/* ------------------------------
   4. Learning Path — Bubbles
   ------------------------------ */
.bubble-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 480px) {
  .bubble-item {
    transform: scale(0.85);
    margin: 0.25rem;
  }

  .bubble-label {
    font-size: 0.8rem;
  }
}

/* ------------------------------
   5. Bubble Sheet (Bottom Sheet)
   ------------------------------ */
.bubble-sheet {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  height: 85dvh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  overflow-y: auto;
  z-index: 1000;
}

.bubble-sheet.open {
  bottom: 0;
}

/* Overlay */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 999;
}

.sheet-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* ------------------------------
   6. Task Screen
   ------------------------------ */
@media (max-width: 480px) {
  .task-container {
    padding: 1rem;
  }

  .task-header {
    font-size: 1.2rem;
  }

  .task-options button {
    width: 100%;
    margin-bottom: 0.75rem;
  }
}

/* ------------------------------
   7. Dashboard Cards
   ------------------------------ */
@media (max-width: 480px) {
  .dashboard-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------
   8. Profile Page
   ------------------------------ */
@media (max-width: 480px) {
  .profile-section {
    padding: 1rem;
  }

  .profile-avatar {
    width: 90px;
    height: 90px;
  }
}

/* ------------------------------
   9. Login / Signup
   ------------------------------ */
@media (max-width: 480px) {
  .auth-box {
    width: 100%;
    padding: 1.25rem;
    margin: 0;
  }

  .auth-box input {
    font-size: 1rem;
  }
}

/* ------------------------------
   10. Pricing Page
   ------------------------------ */
@media (max-width: 480px) {
  .pricing-card {
    width: 100%;
    margin-bottom: 1rem;
  }

  .pricing-features li {
    font-size: 0.9rem;
  }
}

/* ------------------------------
   11. Chat Page
   ------------------------------ */
@media (max-width: 480px) {
  .chat-container {
    padding: 0.75rem;
  }

  .chat-message {
    max-width: 85%;
  }
}

/* ------------------------------
   12. Summary / Results
   ------------------------------ */
@media (max-width: 480px) {
  .summary-card {
    padding: 1rem;
  }

  .score-number {
    font-size: 2.2rem;
  }
}

/* ------------------------------
   13. PSC / Admin Pages
   ------------------------------ */
@media (max-width: 480px) {
  table {
    font-size: 0.85rem;
  }

  th, td {
    padding: 0.5rem;
  }
}

/* ------------------------------
   14. Tablet Breakpoints
   ------------------------------ */
@media (max-width: 768px) {
  .bubble-item {
    transform: scale(0.95);
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------------------------
   15. Desktop Enhancements
   ------------------------------ */
@media (min-width: 1024px) {
  .bubble-sheet {
    height: 70vh;
  }
}