/* ==========================================================================
   responsive.css — Mobile & tablet layer for the IDC Online Grading System
   Load LAST on every page (just before </head>). Screen-only: nothing here
   affects printing or PDF output. Front-end styling only; no logic/data.
   Breakpoints: tablet <= 1024px, small tablet/large phone <= 900px,
                phone <= 640px, small phone <= 400px.
   ========================================================================== */

/* ---------- 1. Flexible media & safe box model (all screens) ---------- */
@media screen {
  img, video { max-width: 100%; height: auto; }
  svg, canvas, iframe { max-width: 100%; }
  table { max-width: 100%; }
  .main, .content, .section, .card, .tbl-wrap { min-width: 0; }
}

/* ---------- 2. Tablet & below (<= 900px): vertical scroll, touch targets ---------- */
@media screen and (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* Main column always full width, natural top-to-bottom scrolling */
  .main { margin-left: 0 !important; width: 100% !important; min-width: 0; }
  .content { padding: 16px 16px 28px !important; }
  .section, .sec-header, .toolbar { gap: 12px; }

  /* Thumb-sized controls (>= 44px) */
  .btn, .btn-sm, .btn-primary, .btn-navy, .btn-ghost, .btn-danger, .btn-add,
  .btn-save, .btn-clr, .btn-ed, .btn-dl, .btn-addquiz, .btn-logout,
  .btn-print, .btn-pdf, .print-btn, .btn-print-report, .btn-print-class-report,
  .nav-btn, .nav-item, .theme-toggle, .accent-btn, .hamburger, .menu-toggle,
  button[type="submit"], input[type="submit"], input[type="button"] {
    min-height: 44px !important;
  }
  .btn, .btn-sm, .btn-add, .btn-save, .btn-clr, .btn-ed, .btn-dl, .btn-addquiz {
    padding: 10px 16px !important;
    line-height: 1.2;
    touch-action: manipulation;
  }
  .hamburger, .menu-toggle { min-width: 44px !important; }
  .nav-btn, .nav-item { padding-top: 10px; padding-bottom: 10px; }

  /* Form fields: 44px tall, 16px text so iOS does not zoom on focus */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select, textarea {
    min-height: 44px;
    font-size: 16px !important;
    max-width: 100%;
  }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

  /* Tables never clip: scroll sideways inside their own box */
  .tbl-wrap, .inner-table-wrap, #enc-table-wrap, #att-table-wrap, #all-grades-tblwrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Modals fit the screen and scroll inside themselves */
  .modal, .mo, .modal-box {
    width: 100% !important;
    max-width: min(560px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-actions { flex-wrap: wrap; gap: 10px; }
  .modal-actions .btn { flex: 1 1 140px; justify-content: center; }

  /* Side / decorative content out of the way */
  .adm-anim, .greeting-pill .gp-label, .accent-btn-label, .tt-track { display: none !important; }
}

/* ---------- 3. Tablet band only (641–900px): two-column comfort ---------- */
@media screen and (min-width: 641px) and (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .course-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

  /* Secondary columns on the student Grades (11 cols) & Courses (7 cols) tables */
  #sec-grades .tbl:has(> thead > tr > th:nth-child(11):last-child) > thead > tr > th:is(:nth-child(3), :nth-child(4), :nth-child(5)),
  #sec-grades .tbl:has(> thead > tr > th:nth-child(11):last-child) > tbody > tr > td:not([colspan]):is(:nth-child(3), :nth-child(4), :nth-child(5)) { display: none; }
  #sec-courses .tbl:has(> thead > tr > th:nth-child(7):last-child) > thead > tr > th:is(:nth-child(3), :nth-child(5)),
  #sec-courses .tbl:has(> thead > tr > th:nth-child(7):last-child) > tbody > tr > td:not([colspan]):is(:nth-child(3), :nth-child(5)) { display: none; }
}

/* ---------- 4. Phones (<= 640px): single column, cards, hidden extras ---------- */
@media screen and (max-width: 640px) {
  .content { padding: 14px 12px 28px !important; }

  /* Stack every common multi-column layout */
  .stat-grid, .course-grid, .overview-grid, .profile-layout, .encode-layout,
  .sms-layout, .mr, .form-row, .grid-2, .grid-3, .two-col, .three-col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .sec-header, .toolbar, .filter-bar, .tbl-head {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .filter-bar select, .filter-bar input, .toolbar input, .toolbar select { width: 100% !important; min-width: 0 !important; }
  .btn-add, .toolbar .btn, .sec-header .btn { width: 100%; justify-content: center; }

  /* Tables: comfortable text and padding */
  .tbl, table.gb-table, .inner-table { font-size: .78rem; }
  .tbl th, .tbl td { padding: 10px 10px !important; }

  /* Action buttons inside table rows stay tappable */
  .tbl td .btn, .tbl td .btn-ed, .tbl td .btn-dl, .tbl td .btn-sm { min-height: 40px !important; padding: 8px 12px !important; }

  /* --- Hide secondary columns (CSS-only; data stays in the page) ---
     Direct-child selectors + :not([colspan]) keep expandable rows and
     empty-state messages intact. */
  /* Admin > Courses (8 cols): keep Code, Course Name, Actions */
#sec-courses .tbl:has(> thead > tr > th:nth-child(8):last-child) > thead > tr > th:is(:nth-child(1), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7)),
#sec-courses .tbl:has(> thead > tr > th:nth-child(8):last-child) > tbody > tr > td:not([colspan]):is(:nth-child(1), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7)) { display: none; }
  /* Admin > Faculty assignments (7 cols): keep Course, Faculty, A.Y./Sem, Status */
#sec-faculty-assignments .tbl > thead > tr > th:is(:nth-child(4), :nth-child(5), :nth-child(7)),
#sec-faculty-assignments .tbl > tbody > tr > td:not([colspan]):is(:nth-child(4), :nth-child(5), :nth-child(7)) { display: none; }
  /* Admin > Grades (19 cols): keep Student, Subject, Overall, Remarks, Actions */
#sec-grades .tbl:has(> thead > tr > th:nth-child(19)) > thead > tr > th:is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11), :nth-child(14), :nth-child(15), :nth-child(16), :nth-child(17), :nth-child(18)),
#sec-grades .tbl:has(> thead > tr > th:nth-child(19)) > tbody > tr > td:not([colspan]):is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(11), :nth-child(14), :nth-child(15), :nth-child(16), :nth-child(17), :nth-child(18)) { display: none; }
  /* Admin > Enrollments (5 cols): hide Date */
#sec-enrollments .tbl:has(> thead > tr > th:nth-child(5):last-child) > thead > tr > th:is(:nth-child(4)),
#sec-enrollments .tbl:has(> thead > tr > th:nth-child(5):last-child) > tbody > tr > td:not([colspan]):is(:nth-child(4)) { display: none; }
  /* Faculty > Class list (8 cols): hide #, Program, Year (student rows only) */
#sec-classlist .tbl-wrap > table > thead > tr > th:is(:nth-child(1), :nth-child(4), :nth-child(5)),
#sec-classlist .tbl-wrap > table > tbody > tr.student-row > td:is(:nth-child(1), :nth-child(4), :nth-child(5)) { display: none; }
  /* Faculty > per-student subject table (11 cols): keep Code, Subject, Final %, Point Grade, Actions */
#sec-classlist .inner-table > thead > tr > th:is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(8), :nth-child(9), :nth-child(10)),
#sec-classlist .inner-table > tbody > tr > td:not([colspan]):is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(8), :nth-child(9), :nth-child(10)) { display: none; }
  /* Faculty > All grades (14 cols): hide #, ID No., Sem, A.Y., Description */
#all-grades-tblwrap table > thead > tr > th:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(6), :nth-child(12)),
#all-grades-tblwrap table > tbody > tr > td:not([colspan]):is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(6), :nth-child(12)) { display: none; }

  /* Bottom-sheet modals with big, full-width actions */
  .modal-bg { align-items: flex-end !important; padding: 0 !important; }
  .modal, .mo {
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }
  .modal-actions .btn, .mo .btn { flex: 1 1 100%; }

  /* Login & auth pages */
  .split { flex-direction: column; min-height: 100dvh; }
  .panel-left, .side-panel, .panel-photo { display: none !important; }
  .panel-right { width: 100% !important; padding: 28px 18px calc(28px + env(safe-area-inset-bottom)) !important; }
  .panel-right form button:not(.eye-btn), .panel-right .btn-login, .panel-right button[type="submit"] { width: 100%; min-height: 48px; }

  /* Report / grade viewer pages */
  .page { padding: 20px 14px 56px; }
  .summary-strip { gap: 14px; padding: 14px 16px; }
  .print-bar, .term-picker { display: flex; flex-wrap: wrap; gap: 10px; }
  .print-bar .btn-print, .print-bar .btn-pdf { flex: 1 1 100%; margin: 0; min-height: 48px; }
  .term-picker a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 0; padding: 0 6px; }

  /* Report card sheet: fits the screen, table scrolls inside it */
  .sheet { max-width: 100% !important; width: auto !important; padding: 16px 14px !important; overflow-x: auto; }
  .rc-head { flex-direction: column; align-items: center; gap: 8px; }
  .rc-h1 { font-size: 1.15rem; }
  .rc-info .lbl { width: 96px; }
  .legend-grid { grid-template-columns: 1fr !important; }
  .sig-center .line { width: 100%; }
  .sig-row .role { margin-left: 0; }
}

/* ---------- 5. Small phones (<= 400px) ---------- */
@media screen and (max-width: 400px) {
  .content { padding: 12px 10px 24px !important; }
  .stat-card { padding: 12px 14px !important; }
  .tbl, table.gb-table, .inner-table { font-size: .72rem; }
  .tbl th, .tbl td { padding: 9px 8px !important; }
  .topbar-title { font-size: .78rem !important; }
  .page-title { font-size: 1.2rem; }
}

/* ---------- 6. Respect reduced motion on touch devices ---------- */
@media screen and (max-width: 900px) and (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ---------- 7. Login show/hide password eye (small, inside the field) ---------- */
@media screen and (max-width: 900px) {
  .inp .eye-btn {
    width: 40px; height: 40px; min-width: 40px; min-height: 40px;
    right: 6px; padding: 0; justify-content: center;
  }
  .inp input#password { padding-right: 52px; }
}