/* Jumper Media Intranet — Mobile Responsive Patch */
/* Load on all pages: <link rel="stylesheet" href="/mobile.css"> */

/* ── Phone (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px) {
  /* Nav — standard mobile: brand (row 1) / actions (row 2) */
  .nav {
    padding: 8px 14px !important; gap: 2px;
    flex-wrap: wrap; justify-content: center;
    border-radius: 20px !important;
  }
  .nav-brand {
    order: 1; width: 100%; text-align: center;
    font-size: 12px; margin-right: 0 !important; padding: 2px 0;
    border-bottom: .5px solid var(--glass-border); padding-bottom: 4px;
  }
  .nav-breadcrumb { display: none; }
  .nav-right {
    order: 3; width: 100%; justify-content: center !important;
    margin-left: 0 !important; gap: 8px; padding-top: 4px;
  }
  .nav-user { font-size: 11px !important; }
  .nav-god { font-size: 8px; padding: 3px 8px; }
  .nav-logout { font-size: 10px; padding: 4px 10px; }

  /* Page headers */
  .page-hd { padding: 20px 0 16px; }
  .page-title { font-size: 22px; }
  .page-sub { font-size: 13px; }
  .page-eyebrow { font-size: 10px; }

  /* Card grids → single column */
  .card-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .stat-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stat-val { font-size: 20px; }

  /* Training content */
  .content-wrap { padding: 72px 16px 60px !important; }
  .sec-hd h2 { font-size: 17px; }
  .sec-hd .meta { font-size: 11px; }

  /* Tables — horizontal scroll */
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl table { min-width: 500px; }

  /* Flashcard grids → single column */
  .flash-grid { grid-template-columns: 1fr !important; }
  .fc { min-height: 120px; }

  /* Scenario cards */
  .sc-opts { grid-template-columns: 1fr !important; }
  .sc-card { padding: 14px; }

  /* Exercises */
  .ex { padding: 16px; }
  .ex textarea { font-size: 14px; }

  /* Callouts */
  .co { padding: 12px 14px; gap: 10px; }
  .co-icon { font-size: 16px; flex-shrink: 0; }

  /* Cards */
  .crd { padding: 16px; }

  /* Buttons */
  .btn-row { flex-wrap: wrap; gap: 8px; }
  .btn2 { font-size: 12px; padding: 10px 16px; flex: 1 1 auto; min-width: 120px; }

  /* Check lists */
  .check-list label { font-size: 13px; padding: 10px 12px; }

  /* Material cards */
  .mat-card { padding: 14px; }
  .mat-hd { font-size: 14px; }

  /* Done banner */
  .done-banner { padding: 14px; }
  .done-icon { font-size: 28px; }

  /* Dashboard */
  .dash-grid { grid-template-columns: 1fr !important; }
  .day-row { padding: 12px 14px; }
  .day-title { font-size: 14px; }

  /* Nav day chips (session navigation) */
  .sec-nav { flex-wrap: wrap; gap: 4px; padding: 8px; }
  .nav-day-chip { font-size: 10px; padding: 3px 8px; }

  /* Hub nav cards */
  .nav-card { padding: 20px; }
  .card-name { font-size: 15px; }
  .card-desc { font-size: 12px; }

  /* Admin */
  .modal { padding: 24px 20px; max-width: calc(100vw - 32px); }
  .users-table { display: block; overflow-x: auto; }
  .role-seg { flex-wrap: wrap; }
  .role-seg-btn { font-size: 9px; padding: 4px 8px; }

  /* Team page */
  .pod-card { padding: 16px; }

  /* Commissions */
  .comm-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* trainee-full iframe */
  .week-tabs { gap: 4px; }
  .week-tab { font-size: 12px; padding: 6px 14px; }
}

/* ── Tablet (481px – 768px) ─────────────────────────── */
@media (min-width: 481px) and (max-width: 768px) {
  .nav-breadcrumb .sep,
  .nav-breadcrumb .current { font-size: 11px; }
  .nav-breadcrumb a { font-size: 11px; }

  .card-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .content-wrap { padding: 78px 24px 70px !important; }

  .flash-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sc-opts { grid-template-columns: repeat(2, 1fr) !important; }

  .tbl { display: block; overflow-x: auto; }
  .modal { max-width: calc(100vw - 48px); }
}

/* ── Ensure touch targets are large enough ──────────── */
@media (pointer: coarse) {
  .btn2, .check-list label, .fc, .sc-opt, .nav-card {
    min-height: 44px;
  }
  .nav-day-chip, .role-seg-btn {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── View As banner mobile ──────────────────────────── */
@media (max-width: 480px) {
  #jmViewAsBanner {
    padding: 8px 12px !important;
    font-size: 11px !important;
    gap: 8px !important;
  }
  #jmViewAsBanner button {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
}

/* ── trainee-full.html specific ─────────────────────── */
@media (max-width: 768px) {
  /* Stack nav vertically on trainee-full */
  .week-pill-tabs {
    gap: 2px !important;
  }
  .week-pill-tab {
    font-size: 10px !important;
    padding: 5px 10px !important;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  /* Compact nav — hide breadcrumbs, shrink tabs */
  .nav {
    padding: 8px 10px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    border-radius: 16px !important;
  }
  .nav-breadcrumb {
    display: none !important;
  }
  .week-pill-tabs {
    order: 10;
    width: 100%;
    justify-content: center !important;
    margin-top: 2px;
  }
  .week-pill-tab {
    font-size: 10px !important;
    padding: 4px 12px !important;
    flex: 1;
    text-align: center;
  }
  .nav-right {
    margin-left: auto !important;
    gap: 6px !important;
  }
  .nav-user {
    display: none !important;
  }

  /* iframe full width, account for nav */
  iframe {
    border: none !important;
  }

  /* Loading message */
  #loadingMsg {
    font-size: 13px !important;
  }
}

/* ── Training content inside iframes ────────────────── */
@media (max-width: 480px) {
  /* Session header */
  .sec-hd {
    padding: 16px 0 12px;
  }
  .sec-hd h2 {
    font-size: 16px !important;
    line-height: 1.3;
  }
  .badge-sm {
    font-size: 9px !important;
    padding: 2px 7px !important;
  }
  .eyebrow {
    font-size: 10px !important;
    gap: 6px !important;
  }

  /* Scenario cards — full width options */
  .sc-card {
    padding: 12px !important;
  }
  .sc-q {
    font-size: 13px !important;
  }
  .sc-opt {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  /* Tables need horizontal scroll */
  .crd > table,
  .tbl > table,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
  }
  th, td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }

  /* Textareas */
  textarea {
    font-size: 14px !important;
    min-height: 80px;
  }

  /* Dashboard day rows */
  .day-row {
    padding: 10px 12px !important;
  }
  .day-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
  .day-title {
    font-size: 13px !important;
  }
  .day-subtitle {
    font-size: 11px !important;
  }

  /* Entry screen */
  .entry-card {
    padding: 24px 16px !important;
    margin: 16px !important;
  }

  /* Pitch timer */
  .pitch-timer {
    font-size: 28px !important;
  }
}

/* ── Hub cards mobile (already covered but reinforcing) ── */
@media (max-width: 480px) {
  .nav-card .card-icon {
    font-size: 24px !important;
  }
  .badge-soon {
    font-size: 9px !important;
  }
}

/* ── Commissions table mobile ───────────────────────── */
@media (max-width: 600px) {
  .comm-filters {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .comm-filters select,
  .comm-filters input {
    width: 100% !important;
  }
}

/* ── Team page mobile ───────────────────────────────── */
@media (max-width: 480px) {
  .pod-grid {
    grid-template-columns: 1fr !important;
  }
  .pod-card {
    padding: 14px !important;
  }
  .member-row {
    flex-direction: column !important;
    gap: 4px !important;
  }
}

/* ── Admin page mobile ──────────────────────────────── */
@media (max-width: 480px) {
  .users-table th,
  .users-table td {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
  .role-preview {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .audit-row {
    font-size: 12px !important;
  }
}