/*
 * tutor.css — Shared mobile-responsive overrides for all Tutor portal pages
 * Mobile-first, injected after each template's inline <style> block.
 * Breakpoints: 576px (sm), 768px (md), 992px (lg), 1200px (xl)
 */

/* ============================================================
   0. GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

/* ============================================================
   1. TOUCH TARGETS — minimum 44px for all interactive elements
   ============================================================ */
a, button, [role="button"],
input[type="submit"], input[type="button"], input[type="reset"],
select, .btn, .menuItem, .actionBtn, .signoutBtn,
.viewBtn, .redoBtn, .dlBtn {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Inline icon-only buttons can be smaller but keep 44px area via padding */
.sd-close, .pinToggle, .hamburger {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   2. PAGE WRAPPER — safe side padding on all screens
   ============================================================ */
.page, .page-wrap, .wrap {
  padding-left: max(15px, env(safe-area-inset-left));
  padding-right: max(15px, env(safe-area-inset-right));
}

/* ============================================================
   3. TOP NAVIGATION
   ============================================================ */

/* Prevent nav content from overflowing */
.topnav {
  overflow: hidden;
}

/* Brand text — truncate if needed */
.nav-brand {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* On very small screens shrink the logo */
@media (max-width: 359px) {
  .nav-logo {
    width: 32px !important;
    height: 32px !important;
  }
  .nav-brand {
    font-size: 14px !important;
    max-width: 120px;
  }
}

/* Hamburger stays visible and tappable */
.hamburger {
  flex-shrink: 0;
  padding: 10px !important;
}

/* Menu drawer — full-height slide-in on all screen sizes */
.menuDrawer {
  max-width: min(300px, 88vw);
}

/* Menu items large enough to tap */
.menuItem {
  min-height: 52px;
  padding: 14px 20px !important;
}

/* Sign-out button */
.signoutBtn {
  min-height: 48px;
  width: 100%;
}

/* ============================================================
   4. STATS ROW — stack on mobile, expand on larger screens
   ============================================================ */

/* Single column on mobile by default */
.statsRow {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

/* Two columns from 480px */
@media (min-width: 480px) {
  .statsRow {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Three columns from 700px */
@media (min-width: 700px) {
  .statsRow {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Stat card itself — tighter padding on mobile */
.statCard {
  padding: 14px 14px 16px !important;
}

@media (min-width: 576px) {
  .statCard {
    padding: 18px 18px 20px !important;
  }
}

/* ============================================================
   5. ACTION GRID (quick-action cards)
   ============================================================ */

.actionGrid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-bottom: 22px !important;
}

@media (min-width: 480px) {
  .actionGrid {
    grid-template-columns: 1fr 1fr !important;
  }
}

.actionBtn {
  min-height: 56px;
  padding: 12px 16px !important;
}

/* ============================================================
   6. YEAR GRID
   ============================================================ */

.yearGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

@media (min-width: 480px) {
  .yearGrid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  }
}

/* ============================================================
   7. STUDENT CARDS IN DASHBOARD
   ============================================================ */

.studentCard {
  padding: 14px !important;
}

/* Student action buttons — full-row on tiny screens */
.studentActions {
  flex-shrink: 0;
}

@media (max-width: 400px) {
  .studentCard {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .studentActions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    margin-top: 10px;
  }
  .studentActions a,
  .studentActions button {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ============================================================
   8. TABLES — always scrollable, never overflow page
   ============================================================ */

/* Any table not already inside a scroll wrapper */
.table-wrap,
.tableWrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}

/* Force tables that aren't wrapped to scroll themselves */
table:not(.no-scroll) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* But restore proper table layout inside the block */
table:not(.no-scroll) > thead,
table:not(.no-scroll) > tbody,
table:not(.no-scroll) > tfoot {
  display: table;
  width: 100%;
}

/* Tighter cell padding on small screens */
@media (max-width: 575px) {
  th, td {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   9. FORMS — full-width inputs, labels above on mobile
   ============================================================ */

.two-col,
.grid2,
.field-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

@media (min-width: 560px) {
  .two-col,
  .grid2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
}

/* All text inputs / selects — full width on mobile */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
select,
textarea {
  width: 100% !important;
  min-height: 44px;
  font-size: 16px !important; /* prevent iOS zoom */
  padding: 10px 13px !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Labels always block above input */
label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 700;
}

/* Submit / action buttons full width on mobile */
@media (max-width: 480px) {
  .btn-submit,
  .submitBtn,
  button[type="submit"] {
    width: 100% !important;
    justify-content: center;
  }
}

/* Fee toggle switches — large enough touch target */
.switch {
  flex-shrink: 0;
}

.fee-header {
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* ============================================================
   10. BILLING PAGE
   ============================================================ */

.billing-grid,
.billing-summary {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

@media (min-width: 640px) {
  .billing-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
   11. FLASH MESSAGES — readable on all screen sizes
   ============================================================ */

[data-flash] {
  flex-wrap: nowrap;
  align-items: flex-start !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  word-break: break-word;
}

[data-flash] span:first-of-type {
  flex: 1 !important;
  min-width: 0;
}

/* ============================================================
   12. MODALS / DRAWERS — full-screen on mobile
   ============================================================ */

.subDrawer, .modal {
  max-width: 100vw !important;
  width: min(520px, 100vw) !important;
}

@media (max-width: 575px) {
  .subDrawer, .modal {
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 20px 20px 0 0 !important;
  }
}

/* ============================================================
   13. PAGINATION — larger tap targets
   ============================================================ */

.pager, .pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: center !important;
  margin-top: 16px !important;
}

.pBtn, .pNum,
.pagination a, .pagination span {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  font-size: 14px !important;
}

/* ============================================================
   14. PROGRESS BARS
   ============================================================ */

.progress-bar-track,
.topicBar {
  width: 100% !important;
}

/* Show percentage text if present */
.progress-label {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
}

/* ============================================================
   15. WELCOME BANNER — responsive layout
   ============================================================ */

.welcomeBanner {
  padding: 16px !important;
}

/* Stack banner content on small screens */
@media (max-width: 480px) {
  .welcomeBanner {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .welcomeIcon {
    font-size: 32px !important;
  }
  .subCard {
    min-width: unset !important;
    width: 100% !important;
  }
}

/* ============================================================
   16. SUBSCRIPTION DRAWER — mobile full screen
   ============================================================ */

@media (max-width: 575px) {
  .subDrawer {
    top: 0 !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   17. SECTION / CARD PADDING — tighter on mobile
   ============================================================ */

.section, .card-section {
  padding: 16px !important;
}

@media (min-width: 576px) {
  .section, .card-section {
    padding: 20px 24px !important;
  }
}

/* ============================================================
   18. SEARCH & FILTER INPUTS — full width on mobile
   ============================================================ */

.search-row, .filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.search-row input,
.filter-row input,
.search-row select,
.filter-row select {
  flex: 1 !important;
  min-width: 200px !important;
}

@media (max-width: 480px) {
  .search-row,
  .filter-row {
    flex-direction: column !important;
  }
  .search-row input,
  .filter-row input,
  .search-row select,
  .filter-row select {
    width: 100% !important;
    min-width: unset !important;
  }
}

/* ============================================================
   19. HOMEWORK DAY TABS / PILL SELECTORS
   ============================================================ */

.dayTabs, .spec-pills, .year-pills, .day-selector {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 4px !important;
  /* Prevent shrinking children */
  align-items: flex-start;
}

.dayTab, .spec-pill, .year-pill, .day-btn {
  flex-shrink: 0 !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  white-space: nowrap !important;
}

/* ============================================================
   20. TUTOR APPLY / REGISTRATION — topbar links responsive
   ============================================================ */

.topbar-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.topbar-link {
  font-size: 11px !important;
  padding: 6px 10px !important;
  min-height: 36px;
}

/* ============================================================
   21. UTIL — no-overflow guarantee on the page root
   ============================================================ */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================================================
   22. TUTOR DASHBOARD — STUDENT CARD & BUTTON MOBILE FIXES
   Targets exact class names from tutor_dashboard.html
   ============================================================ */

/* ── Welcome card: stack icon + text + billing on small screens ── */
@media (max-width: 576px) {
  .welcomeCard {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  /* Billing box goes full-width below the text */
  .welcomeBill {
    min-width: unset !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ── Student cards: stack avatar/info above action buttons ── */
@media (max-width: 576px) {
  .studentCard {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Action column becomes a full-width row-group below the info */
  .studentActions {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-shrink: unset !important;
    width: 100% !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  /* Inner div holding "View" + "Progress" side-by-side — stack them */
  .studentActions > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* All .sBtn variants full-width, tall enough to tap */
  .sBtn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  /* Assign-tutor select full-width */
  .studentActions select,
  .studentActions form {
    width: 100% !important;
  }
  .studentActions select {
    font-size: 13px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
  }
}

/* ── Action grid: 1 column (already in section 5) + button height ── */
@media (max-width: 576px) {
  .actionBtn {
    min-height: 60px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
}

/* ── Stat cards: text never overflows ── */
.statNum {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── General: medium-screen student card action buttons side-by-side ──
   Between 577px and 768px keep buttons horizontal but wrap properly */
@media (min-width: 577px) and (max-width: 768px) {
  .studentActions {
    flex-direction: column !important;
    align-items: flex-end !important;
  }

  .studentActions > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .sBtn {
    min-height: 44px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   23. GENERIC MOBILE BUTTON & TABLE FIXES (all tutor pages)
   ============================================================ */

@media (max-width: 768px) {
  /* Student list action buttons — generic selectors */
  .student-actions,
  .btn-group-actions,
  td .btn-group,
  td .d-flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .student-actions .btn,
  .btn-group-actions .btn,
  td .btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 13px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Make tables scrollable */
  .table-responsive,
  .student-list-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    width: 100% !important;
  }

  /* Dashboard stat/summary cards */
  .stat-card,
  .dashboard-card,
  .summary-card {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  /* Fix any inline flex rows that overflow */
  .dashboard-actions,
  .card-actions,
  .homework-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .dashboard-actions .btn,
  .card-actions .btn,
  .homework-actions .btn {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 576px) {
  /* Full-width buttons on very small screens */
  .student-actions .btn,
  td .btn,
  .card .btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  /* Reduce table cell padding to fit more content */
  table td,
  table th {
    padding: 8px 6px !important;
    font-size: 13px !important;
  }

  /* Stack any side-by-side layouts */
  .row .col-md-6,
  .row .col-sm-6 {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
}