/* ===== Mobile Fit Fixes ===== */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
/* Make embeds responsive */
iframe { max-width: 100%; }
table { width: 100%; border-collapse: collapse; }
pre, code { white-space: pre-wrap; word-wrap: break-word; }
* { box-sizing: border-box; }
/* Reduce huge paddings/margins on small screens */
@media (max-width: 640px) {
  body { font-size: clamp(14px, 4vw, 16px); line-height: 1.45; }
  .container, .wrapper, .content, .section, .hero, main { padding-left: 16px; padding-right: 16px; }
  [style*="width:"] { width: 100% !important; max-width: 100% !important; }
  [style*="min-width:"] { min-width: auto !important; }
  [style*="max-width:"] { max-width: 100% !important; }
  .row { display: block; }
  .col, [class*="col-"] { width: 100% !important; max-width: 100% !important; }
  .grid { grid-template-columns: 1fr !important; }
}
/* Prevent sticky footers/headers from covering content */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); }
header, footer { padding-bottom: max(16px, var(--safe-bottom)); padding-top: max(16px, var(--safe-top)); }
/* Handle 100vh issues on mobile */
@media (max-width: 640px) {
  .full-viewport, .full-height, .vh-100 { height: auto !important; min-height: 100svh !important; }
}
/* Utility overflow guards */
.overflow-wrap { overflow-wrap: anywhere; word-break: break-word; }

/* ===== GPA table mobile fixes ===== */
@media (max-width: 640px){
  .table{ display:block; overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .table thead, .table tbody, .table tr { width: max-content; }
  .table th, .table td{ white-space: nowrap; }
  .table input[type="text"]{ min-width: 160px; }
  .table input[type="number"]{ width: 90px; }
  .table select.grade{ min-width: 110px; }
  .table .wtype{ min-width: 130px; }
  .table .wcustom{ width: 72px !important; display:inline-block; }
  .table .rm{ width: 44px; height: 36px; padding: 0; line-height: 1; }
}

/* ===== Mobile stacked rows (no horizontal scroll) ===== */
@media (max-width: 640px){
  /* Reset previous scroll behavior */
  .table{ display: table; width:100%; overflow-x: visible; }
  .table thead{ display: none; }
  .table tbody{ display: block; }
  .table tr{ display: block; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 12px; margin: 12px 0; background: rgba(255,255,255,0.6); }
  @media (prefers-color-scheme: dark){
    .table tr{ background: rgba(17,24,39,0.6); border-color: rgba(148,163,184,0.25); }
  }
  .table td{ display: block; border: 0; padding: 8px 0; white-space: normal; }
  /* Labels for each cell via nth-child */
  .table td:nth-child(1)::before{ content: "Course"; display: block; font-weight: 600; margin-bottom: 4px; opacity: .8; }
  .table td:nth-child(2)::before{ content: "Credits"; display: block; font-weight: 600; margin-bottom: 4px; opacity: .8; }
  .table td:nth-child(3)::before{ content: "Grade"; display: block; font-weight: 600; margin-bottom: 4px; opacity: .8; }
  .table td:nth-child(4)::before{ content: "Weight"; display: block; font-weight: 600; margin-bottom: 4px; opacity: .8; }
  .table td:nth-child(5)::before{ content: "Remove"; display: block; font-weight: 600; margin-bottom: 4px; opacity: .8; }

  /* Make form controls full-width for easy tapping */
  .table input[type="text"],
  .table input[type="number"],
  .table select{ width: 100% !important; max-width: 100% !important; }

  /* Weight select + custom input side-by-side, but wrap nicely */
  .table td:nth-child(4){ display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .table td:nth-child(4) .wtype{ min-width: 0; } /* allow to shrink */
  .table td:nth-child(4) .wcustom{ width: 90px !important; display: inline-block; }

  /* Remove button full-width so it's visible and tappable */
  .table .rm{ width: 100%; height: 40px; padding: 0; }

  /* Slightly tighter global paddings for the section wrapper */
  .container.card .controls{ padding-left: 0; padding-right: 0; }
}