/* ── Hero ── */
.mt-hero { background: var(--navy); padding: 2.5rem 2rem; }
.mt-hero-pill { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.12); color:#fff; font-size:0.78rem; font-weight:700; padding:4px 14px; border-radius:20px; margin-bottom:0.75rem; }
.mt-hero h1 { font-family:var(--font-head); font-size:2rem; font-weight:800; color:#fff; margin-bottom:0.5rem; }
.mt-hero h1 .highlight { color:var(--saffron); }
.mt-hero p { color:rgba(255,255,255,0.7); font-size:0.9rem; max-width:600px; line-height:1.6; }

/* ── Main tabs (Mock Tests / PYPs) ── */
.mt-main-tabs { display:flex; gap:8px; padding:16px 20px 0; background:#fff; border-bottom:2px solid #e2e8f0; }
.mt-main-tab {
  padding:8px 24px; border:none; background:none; font-size:0.92rem; font-weight:700;
  color:#64748b; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px;
  transition:all 0.15s;
}
.mt-main-tab.active { color:var(--navy); border-bottom-color:var(--saffron); }
.mt-main-tab:hover { color:var(--navy); }

/* ── Tab content panels ── */
.mt-tab-panel { display:none; }
.mt-tab-panel.active { display:block; }

/* ── PYP sub-tabs (Prelims/Mains) ── */
.mt-pyp-stage-tabs { display:flex; gap:6px; padding:12px 20px; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.mt-pyp-stage-tab {
  padding:5px 18px; border-radius:20px; border:1.5px solid #e2e8f0;
  background:#fff; font-size:0.82rem; font-weight:700; color:#64748b; cursor:pointer;
  white-space:nowrap; flex-shrink:0;
  transition:all 0.15s;
}
.mt-pyp-stage-tab.active { background:var(--navy); color:#fff; border-color:var(--navy); }

/* ── Year filters ── */
.mt-year-filters { display:flex; gap:6px; padding:10px 20px; overflow-x:auto; background:#fff; border-bottom:1px solid #e2e8f0; flex-wrap:wrap; }
.mt-year-btn {
  padding:4px 14px; border-radius:20px; border:1.5px solid #e2e8f0;
  background:#fff; font-size:0.78rem; font-weight:700; color:#64748b; cursor:pointer;
  white-space:nowrap; transition:all 0.15s;
}
.mt-year-btn.active { background:var(--saffron); color:#fff; border-color:var(--saffron); }

/* ── Container ── */
.mt-container { padding:20px; }

/* ── Stage/type group headers ── */
.mt-stage-section { margin-bottom:2rem; }
.mt-stage-title { font-family:var(--font-head); font-size:1.1rem; font-weight:800; color:var(--navy); margin-bottom:0.75rem; }
.mt-type-group { margin-bottom:1.5rem; }
.mt-type-label { display:inline-block; font-size:0.78rem; font-weight:700; color:var(--saffron); border-left:3px solid var(--saffron); padding-left:8px; margin-bottom:0.75rem; text-transform:uppercase; letter-spacing:0.05em; }

/* ── Test card ── */
.mt-test-card {
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1.5px solid #e2e8f0; border-radius:12px;
  padding:1rem 1.25rem; margin-bottom:10px;
  transition:all 0.15s; gap:1rem;
}
.mt-test-card:hover { border-color:var(--saffron); box-shadow:0 4px 16px rgba(255,107,0,0.08); }
.mt-test-left { flex:1; min-width:0; }
.mt-test-title { font-weight:700; font-size:0.95rem; color:var(--navy); margin-bottom:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mt-test-meta { display:flex; gap:14px; font-size:0.78rem; color:#64748b; flex-wrap:wrap; margin-bottom:4px; }
.mt-test-meta span { display:flex; align-items:center; gap:4px; }
.mt-test-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.mt-tag { font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:20px; }
.mt-tag-free { background:#dcfce7; color:#16a34a; }
.mt-tag-attempted { background:#dbeafe; color:#1d4ed8; }
.mt-tag-shift { background:#fef3c7; color:#92400e; }

/* ── Attempt info (rank/score) ── */
.mt-attempt-info { display:flex; gap:12px; font-size:0.78rem; color:#64748b; margin-top:4px; font-weight:600; }
.mt-attempt-info .rank { color:#7c3aed; }
.mt-attempt-info .score { color:#0f172a; }

/* ── Right side buttons ── */
.mt-test-right { display:flex; gap:8px; align-items:center; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.mt-btn-start {
  padding:8px 22px; border:none; border-radius:8px;
  background:var(--navy); color:#fff; font-weight:700; font-size:0.85rem;
  text-decoration:none; cursor:pointer; transition:background 0.15s;
}
.mt-btn-start:hover { background:var(--navy-mid); }
.mt-btn-action {
  padding:7px 18px; border:1.5px solid #22d3ee; border-radius:8px;
  color:#22d3ee; background:#fff; font-weight:700; font-size:0.82rem;
  text-decoration:none; cursor:pointer; transition:all 0.15s;
}
.mt-btn-action:hover { background:#22d3ee; color:#fff; }
.mt-btn-reattempt { border-color:var(--saffron); color:var(--saffron); }
.mt-btn-reattempt:hover { background:var(--saffron); color:#fff; }
.mt-btn-locked {
  padding:8px 22px; border:1.5px solid #e2e8f0; border-radius:8px;
  color:#94a3b8; background:#f8fafc; font-weight:700; font-size:0.85rem;
  text-decoration:none;
}

/* ── Empty state ── */
.mt-empty { text-align:center; padding:3rem 1rem; color:#94a3b8; }
.mt-empty-icon { font-size:3rem; margin-bottom:1rem; }

/* ── Back link ── */
.mt-back { display:inline-flex; align-items:center; gap:6px; color:var(--saffron); font-weight:700; font-size:0.88rem; text-decoration:none; padding:12px 20px; }
.mt-back:hover { text-decoration:underline; }

/* ── View More / Collapse ── */
.mt-test-card.mt-hidden { display:none; }
.mt-view-more-wrap { text-align:center; margin:6px 0 14px; }
.mt-view-more-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 22px; border-radius:20px;
  border:1.5px solid var(--saffron); background:#fff;
  color:var(--saffron); font-weight:700; font-size:0.82rem;
  cursor:pointer; transition:all 0.18s;
}
.mt-view-more-btn:hover { background:var(--saffron); color:#fff; }
.mt-view-more-btn .mt-arrow { font-size:0.75rem; transition:transform 0.2s; }
.mt-view-more-btn.expanded .mt-arrow { transform:rotate(180deg); }

/* ══════════════════ MOBILE ══════════════════ */
@media (max-width: 768px) {

  /* Layout guard: the dashboard main column (.ck-right) is a flex
     item; by default flex items won't shrink below their content's
     natural width, so the nowrap scroll rows below would inflate it
     past the screen edge and shift the WHOLE page right.
     min-width:0 lets the column stay viewport-width and forces the
     rows to scroll internally instead. */
  .ck-right,
  .ck-content,
  .mt-tab-panel,
  .mt-container {
    min-width: 0;
    max-width: 100%;
  }
  .mt-pyp-stage-tabs,
  .mt-year-filters {
    max-width: 100%;
  }

  /* Tier tabs (Full Mock Tier I / Tier II / Sectional …):
     one horizontal scrollable line of slim capsules —
     text never wraps to two lines, so buttons stay compact. */
  .mt-pyp-stage-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    padding: 10px 14px;
  }
  .mt-pyp-stage-tabs::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  .mt-pyp-stage-tab {
    padding: 5px 14px;
    font-size: 0.76rem;
    border-radius: 999px;           /* true capsule */
  }

  /* Subject filters (All / General Intelligence and Reasoning / …):
     single horizontal scroll line instead of wrapping into rows. */
  .mt-year-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 14px;
  }
  .mt-year-filters::-webkit-scrollbar { display: none; }
  .mt-year-btn {
    flex-shrink: 0;
    padding: 4px 12px;
    font-size: 0.74rem;
    border-radius: 999px;
  }
}