/* mobile-app.css — Phase A Fix #168
 * Mobile responsive styles for aiaiyoo platform
 * Covers exxams pages + platform pages at mobile breakpoints
 */

/* ── Base mobile reset ── */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr !important;
  }

  .side {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    height: 100vh;
    overflow-y: auto;
  }

  .side.mobile-open {
    display: block;
  }

  .main {
    padding: 16px !important;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Grid fallbacks */
  .grid-2, .grid-3, .feat-grid, .eco-grid, .tools-grid {
    grid-template-columns: 1fr !important;
  }

  /* KPI row scroll */
  .kpi-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
  }

  /* Tables scroll */
  .tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
  }

  /* Cards */
  .card {
    border-radius: 10px !important;
    padding: 16px !important;
  }

  /* Buttons full-width on mobile */
  .btn-full-mobile {
    width: 100%;
    display: block;
    text-align: center;
  }

  /* Nav overlay */
  .mobile-menu-btn {
    display: flex !important;
  }

  /* Hero sections */
  .hero h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  .hero .btns {
    flex-direction: column;
    align-items: stretch;
  }

  /* EXXAMS test page */
  .test-layout {
    flex-direction: column;
  }

  .sidebar-exam {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    z-index: 50;
    border-top: 1px solid var(--bd, #333);
  }

  /* Daily quiz banner */
  #dailyQuizBanner {
    flex-direction: column !important;
    text-align: center;
  }

  #dailyQuizBanner > div:last-child {
    justify-content: center;
  }

  /* Nav links collapse on mobile */
  .nav-links {
    display: none;
  }

  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--bg, #0b0f14);
    padding: 16px;
    border-bottom: 1px solid var(--bd, #333);
    z-index: 100;
    gap: 12px;
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Plans grid */
  .plans {
    grid-template-columns: 1fr !important;
  }

  /* Roles grid */
  .roles {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Share card */
  #shareCardArea .btn {
    flex: 1;
    min-width: 80px;
  }
}

/* ── Small phones ── */
@media (max-width: 480px) {
  .roles {
    grid-template-columns: 1fr !important;
  }

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

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

  body {
    font-size: 14px;
  }

  .page-title {
    font-size: 20px !important;
  }
}

/* ── Bottom mobile nav (EXXAMS app pages) ── */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg2, #1a1a1a);
    border-top: 1px solid var(--bd, #333);
    z-index: 100;
    justify-content: space-around;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text2, #aaa);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 8px;
    transition: all 0.2s;
  }

  .mobile-bottom-nav a.active {
    color: var(--ac, #F57C00);
  }

  .mobile-bottom-nav a .icon {
    font-size: 20px;
  }

  /* Push content above bottom nav */
  .main {
    padding-bottom: 80px !important;
  }
}