/*
 * SchoolManager Pro — Mobile-First CSS
 * All mobile overrides live here. style.css is never touched.
 * Primary breakpoint: 767px (below = mobile, above = desktop).
 *
 * Sections:
 *  1. Global mobile base
 *  2. Bottom navigation bar
 *  3. Top navbar mobile fixes
 *  4. Sidebar adjustments
 *  5. Dashboard section
 *  6. Score entry
 *  7. Students / Teachers list
 *  8. Student / Teacher profile
 *  9. Attendance & Conduct
 * 10. Results & Report cards
 * 11. Advanced reports
 * 12. Modals (fullscreen on mobile)
 * 13. Forms & inputs
 * 14. FAB (Floating Action Button)
 * 15. Bottom sheet (filter panel)
 * 16. Landing page mobile
 * 17. Utility overrides
 */

/* ═══════════════════════════════════════════════════════════════
   1. GLOBAL MOBILE BASE
═══════════════════════════════════════════════════════════════ */

/* Eliminate 300ms tap delay on all interactive elements */
button, a, input, select, textarea, label, [role="button"] {
  touch-action: manipulation;
}

/* Ensure minimum 44px touch targets on small screens */
@media (max-width: 767px) {
  .btn, button:not(.navbar-mobile-toggle):not(.mbb-item):not(.user-profile-toggle):not(.btn-close) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Main content must have padding-bottom to clear the bottom bar */
  body.sbapro-admin-body .content-area,
  body.sbapro-admin-body main,
  body.sbapro-admin-body #mainContent {
    padding-bottom: 72px !important;
  }

  /*
   * Teacher & parent portals (fixed top navbar + fixed bottom bar):
   * Scroll must happen on the document/body — not inside a viewport-locked <main>,
   * or the page feels "stuck" on mobile.
   */
  body.tp-body.tp-logged-in {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    min-height: 100dvh;
    min-height: 100svh;
  }

  body.tp-body.tp-logged-in #teacherPortalApp,
  body.tp-body.tp-logged-in #parentPortalApp {
    overflow: visible !important;
    min-height: 0 !important;
  }

  /* Let content height drive scroll; avoid min-height ≈ viewport fighting fixed chrome */
  body.tp-body.tp-logged-in #tpMain,
  body.tp-body.tp-logged-in #ppMain {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-bottom: calc(72px + max(12px, env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Prevent horizontal overflow */
  body {
    overflow-x: hidden;
  }
}

/* ═══════════════════════════════════════════════════════════════
   2. BOTTOM NAVIGATION BAR
═══════════════════════════════════════════════════════════════ */

.mobile-bottom-bar {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  height: 62px;
  background: #0f203a;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: none;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
}

@media (max-width: 767px) {
  .mobile-bottom-bar {
    display: flex !important;
  }
}

.mbb-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.62rem;
  font-weight: 500;
  font-family: 'Poppins', system-ui, sans-serif;
  padding: 6px 4px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-height: 62px;
  position: relative;
}

.mbb-item i {
  font-size: 1.35rem;
  line-height: 1;
}

.mbb-item span {
  line-height: 1;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mbb-item:hover,
.mbb-item:focus-visible {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.mbb-item.active {
  color: #fff;
}

/* Active indicator pill */
.mbb-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 0 0 4px 4px;
}

/* Ripple tap feedback */
.mbb-item:active {
  background: rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   3. TOP NAVBAR MOBILE FIXES
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Hide year/term info from navbar — too crowded on mobile */
  .navbar-academic-info {
    display: none !important;
  }

  /* Compact navbar height */
  .modern-navbar .navbar-container,
  .pluto-topbar .navbar-container {
    min-height: 56px;
    padding: 0 0.75rem;
  }

  /* Brand text truncation */
  .navbar-brand-text {
    font-size: 0.95rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .navbar-brand-subtitle {
    font-size: 0.68rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Academic info sub-bar (shows below navbar on mobile) */
  .mobile-academic-subbar {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    background: rgba(15, 32, 58, 0.92);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    padding: 4px 1rem;
    font-family: 'Poppins', system-ui, sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 56px;
    z-index: 900;
  }
}

/* Hidden on desktop, shown on mobile via media query above */
.mobile-academic-subbar {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   4. SIDEBAR ADJUSTMENTS
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Hamburger button: hide on mobile since we have the bottom bar */
  .navbar-mobile-toggle {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   5. DASHBOARD SECTION
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Dashboard metrics grid: 2-column on mobile (more space-efficient than 1-col) */
  .dashboard-metrics-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.625rem !important;
  }

  /* Metric cards: compact on mobile */
  .caspero-metric-card {
    min-height: 0 !important;
    padding: 0 !important;
  }

  .caspero-card-header {
    padding: 0.75rem 0.875rem 0.25rem !important;
  }

  .caspero-card-body {
    padding: 0 0.875rem 0.875rem !important;
  }

  .caspero-card-value {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }

  .caspero-card-label {
    font-size: 0.72rem !important;
  }

  .caspero-card-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }

  /* Charts: remove fixed heights so they scale */
  .chart-wrapper canvas,
  #dashboardChart,
  [id$="Chart"] {
    max-height: 220px !important;
    height: auto !important;
  }

  /* Dashboard sections: reduce top padding */
  .caspero-dashboard { padding: 0.75rem !important; }

  /* Welcome bar: stack */
  .dashboard-header { margin-bottom: 0.75rem !important; }
  .dashboard-header-content { flex-direction: column !important; gap: 0.5rem !important; }

  /* Dashboard quick-action buttons: horizontal pill scroll */
  .dashboard-quick-actions,
  .dashboard-actions {
    display: flex !important;
    overflow-x: auto !important;
    gap: 0.4rem !important;
    padding-bottom: 0.375rem !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .dashboard-quick-actions::-webkit-scrollbar,
  .dashboard-actions::-webkit-scrollbar { display: none; }
  .dashboard-quick-actions .btn,
  .dashboard-actions .btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Attendance widget: compact */
  .attendance-widget .list-group-item { padding: 0.625rem 0.875rem !important; font-size: 0.85rem !important; }

  /* Two-column chart row: stack on mobile */
  .dashboard-charts-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .dashboard-charts-row > * { width: 100% !important; max-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════
   6. SCORE ENTRY
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /*
   * Fullscreen score sheet on mobile:
   * - z-index 1054: above .mobile-bottom-bar (1050), below Bootstrap .modal (1055)
   * - Hide bottom bar while open (body.sbapro-score-entry-open) so it does not cover inputs
   * - Safe areas + svh/dvh: notch / home indicator / dynamic browser chrome
   */
  .score-entry-container {
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    z-index: 1054 !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    max-height: 100svh !important;
    max-height: 100dvh !important;
  }

  body.sbapro-score-entry-open {
    overflow: hidden !important;
  }

  body.sbapro-score-entry-open .mobile-bottom-bar {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Hide top navbar + hamburger so scoresheet uses full viewport */
  body.sbapro-score-entry-open #mainApp > nav.pluto-topbar,
  body.sbapro-score-entry-open #mainApp > nav.modern-navbar,
  body.sbapro-score-entry-open #mainApp > .navbar-mobile-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * Omnidirectional scroll inside the scoresheet (horizontal + vertical).
   * Block layout + overflow auto on the container so content wider/taller than the viewport pans naturally.
   */
  body.sbapro-score-entry-open .score-entry-container {
    display: block !important;
    overflow: auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    height: 100svh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  body.sbapro-score-entry-open .score-entry-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }

  /* Let cards/table define width/height; outer container scrolls (no inner flex trap) */
  body.sbapro-score-entry-open .score-entry-container .score-entry-table-wrapper {
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.sbapro-score-entry-open #scoreEntryMobileCards.se-student-cards {
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  /* Score entry header: stack on mobile */
  .score-entry-header {
    flex-direction: column !important;
    gap: 0.625rem !important;
    padding: 0.75rem !important;
  }
  .score-entry-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }
  .score-entry-actions .btn {
    flex: 1 !important;
    min-width: 100px !important;
    font-size: 0.82rem !important;
    padding: 0.5rem 0.625rem !important;
  }

  /* Filter row: collapse to stacked layout */
  #scoreEntryFilters .row {
    flex-direction: column !important;
  }
  #scoreEntryFilters .col-md-3,
  #scoreEntryFilters .col-md-2,
  #scoreEntryFilters [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin-bottom: 0.625rem !important;
  }
  /* Load button: full width on mobile */
  #loadScoreEntryBtn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Score entry card grid (rendered by js/modules/ui-mobile.js) */
  .se-student-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
  }

  .se-student-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }

  .se-student-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
  }

  .se-student-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #0f172a;
    flex: 1;
  }

  .se-student-card-position {
    font-size: 0.75rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 20px;
  }

  .se-score-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .se-score-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .se-score-field label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .se-score-field input {
    height: 44px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    transition: border-color 0.15s, background 0.15s;
  }

  .se-score-field input:focus {
    border-color: #667eea;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
  }

  .se-score-computed {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .se-score-pill {
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
  }

  .se-score-pill.total { background: #dbeafe; color: #1e40af; }
  .se-score-pill.grade { background: #dcfce7; color: #166534; }

  /* Hide the desktop table on mobile */
  #scoreEntryTableWrapper {
    display: none;
  }

  /* Teachers portal: same pattern as admin score entry */
  #tpScoreEntryTableWrapper {
    display: none !important;
  }

  /* Scrollable list area: fills space under fixed header inside .score-entry-container */
  #scoreEntryMobileCards.se-student-cards {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    gap: 0.5rem;
  }

  .se-student-card.active-row {
    outline: 2px solid rgba(13, 110, 253, 0.4);
    outline-offset: 2px;
    box-shadow: 0 2px 12px rgba(13, 110, 253, 0.12);
  }

  .se-mobile-scoresheet-table tbody tr.active-row {
    outline: 2px solid rgba(13, 110, 253, 0.35);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.2);
  }

  /* Admin fullscreen: one heading line above mobile sheet (class · term · subject · ScoreSheet) */
  body.sbapro-score-entry-open .score-entry-header-left .score-entry-title,
  body.sbapro-score-entry-open #scoreEntryInfo {
    display: none !important;
  }

  .se-mobile-scoresheet-root {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    width: 100%;
    max-width: 100%;
  }

  .se-mobile-scoresheet-heading {
    margin: 0;
    padding: 0 0.25rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
    text-align: center;
    word-break: break-word;
  }

  .se-mobile-scoresheet-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
  }

  .se-mobile-scoresheet-table {
    font-size: 0.78rem;
    width: max-content;
    min-width: 100%;
  }

  .se-mobile-scoresheet-table .se-msc-th,
  .se-mobile-scoresheet-table .se-msc-td {
    vertical-align: middle;
    padding: 0.35rem 0.3rem;
  }

  .se-mobile-scoresheet-table .se-msc-th--name,
  .se-mobile-scoresheet-table .se-msc-td--name {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f8fafc;
    box-shadow: 1px 0 0 rgba(226, 232, 240, 0.95);
    max-width: 42vw;
    min-width: 5.5rem;
  }

  .se-mobile-scoresheet-table thead .se-msc-th--name {
    background: #e2e8f0;
    z-index: 3;
  }

  .se-mobile-scoresheet-table .se-msc-name-text {
    display: block;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #0f172a;
  }

  .se-mobile-scoresheet-table .se-msc-th--score {
    min-width: 3.35rem;
    max-width: 5.5rem;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: none;
    line-height: 1.2;
  }

  .se-mobile-scoresheet-table .se-msc-th-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  .se-mobile-scoresheet-table .se-msc-td--input {
    min-width: 3.25rem;
    padding: 0.25rem !important;
  }

  .se-mobile-scoresheet-table .se-msc-td--input .form-control {
    min-width: 0;
    width: 100%;
    padding: 0.28rem 0.15rem;
    font-size: 0.85rem;
    font-weight: 600;
  }

  #tpScoreEntryMobileCards.se-student-cards {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    margin-top: 0.25rem;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    min-height: 0;
    flex: 1 1 auto;
  }

  /* Teachers portal: badges hidden on narrow screens; heading is inside mobile sheet */
  .tp-score-entry-fullscreen .score-entry-info-badge {
    display: none !important;
  }
}

@media (min-width: 768px) {
  body.sbapro-score-entry-open .score-entry-header-left .score-entry-title,
  body.sbapro-score-entry-open #scoreEntryInfo {
    display: block !important;
  }

  body.sbapro-score-entry-open #scoreEntryInfo .score-entry-info-badge {
    display: flex !important;
    flex-wrap: wrap;
  }

  .tp-score-entry-fullscreen .score-entry-info-badge {
    display: flex !important;
  }
}

/* Score cards: field grid width bands (not nested — broader browser support) */
@media (max-width: 400px) {
  .se-score-fields {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 401px) and (max-width: 767px) {
  .se-score-fields {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)) !important;
  }
}

/* Desktop: hide mobile card wrapper */
#scoreEntryMobileCards {
  display: none;
}

#tpScoreEntryMobileCards {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   7. STUDENTS / TEACHERS LIST
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Filter panel toggle pill */
  .mobile-filter-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }
  .mobile-filter-pill:active { background: #e2e8f0; }

  /* Bottom sheet for filters */
  .mobile-filter-sheet {
    position: fixed;
    bottom: 62px; /* above bottom bar */
    left: 0;
    right: 0;
    z-index: 1040;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 1.25rem 1rem 1.5rem;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 70vh;
    overflow-y: auto;
  }

  .mobile-filter-sheet.open {
    transform: translateY(0);
  }

  .mobile-filter-sheet-handle {
    width: 40px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin: 0 auto 1.25rem;
  }

  .mobile-filter-sheet .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 4px;
  }

  .mobile-filter-sheet .form-select,
  .mobile-filter-sheet .form-control {
    height: 48px;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
  }

  /* Sheet backdrop */
  .mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1039;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .mobile-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Student/teacher card list */
  .mobile-entity-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, transform 0.15s;
  }
  .mobile-entity-card:active {
    background: #f8fafc;
    transform: scale(0.99);
  }

  .mobile-entity-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #e2e8f0;
  }

  .mobile-entity-info {
    flex: 1;
    min-width: 0;
  }

  .mobile-entity-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-entity-sub {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-entity-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
  }

  .mobile-entity-actions .btn {
    padding: 6px 10px;
    min-height: 36px;
    font-size: 0.8rem;
  }

  /* Grid view: 2 columns */
  .students-grid-view .mobile-entity-card,
  .teachers-grid-view .mobile-entity-card {
    flex-direction: column;
    text-align: center;
    padding: 1rem 0.75rem;
  }

  /* Hide desktop table header button row, show mobile controls */
  .desktop-entity-controls {
    display: none !important;
  }
  .mobile-entity-controls {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
  }

  /* Header search full-width */
  .entity-search-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .entity-search-row .search-input-wrapper {
    width: 100% !important;
  }
}

/* Desktop: hide mobile-only controls */
.mobile-entity-controls { display: none; }
.mobile-filter-pill { display: none; }

/* ═══════════════════════════════════════════════════════════════
   8. STUDENT / TEACHER PROFILE
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Tab strip: horizontal scroll instead of wrap */
  .profile-tabs .nav-tabs,
  .student-profile-tabs,
  .teacher-profile-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid #dee2e6;
    gap: 0;
  }
  .profile-tabs .nav-tabs::-webkit-scrollbar,
  .student-profile-tabs::-webkit-scrollbar,
  .teacher-profile-tabs::-webkit-scrollbar { display: none; }

  .profile-tabs .nav-link,
  .student-profile-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.6rem 0.875rem;
    font-size: 0.82rem;
  }

  /* Info cards: single column */
  .profile-info-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stats row: 2 column */
  .profile-stats-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   9. ATTENDANCE & CONDUCT
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Full-row tap target for attendance toggle */
  .attendance-row,
  .conduct-row {
    display: flex !important;
    align-items: center !important;
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    min-height: 56px !important;
    gap: 0.75rem !important;
  }

  .attendance-row .student-name-cell,
  .conduct-row .student-name-cell {
    flex: 1 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
  }

  /* Large toggle switch */
  .attendance-toggle {
    width: 52px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }

  .attendance-toggle input[type="checkbox"] {
    width: 52px !important;
    height: 28px !important;
    cursor: pointer !important;
  }

  /* Conduct select: full-width per row */
  .conduct-select {
    max-width: 120px !important;
    height: 40px !important;
    font-size: 0.82rem !important;
  }

  /* Sticky save button at bottom */
  .attendance-save-bar,
  .conduct-save-bar {
    position: sticky !important;
    bottom: 62px !important;
    background: #fff !important;
    padding: 0.75rem 1rem !important;
    border-top: 1px solid #e2e8f0 !important;
    z-index: 100 !important;
    display: flex !important;
    gap: 0.5rem !important;
  }
  .attendance-save-bar .btn,
  .conduct-save-bar .btn {
    flex: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   9b. TEACHER PORTAL — CLASS ROLL (CSS-only card transform)
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Transform the attendance table into per-student cards */
  .tp-roll-card { background: transparent !important; border: none !important; box-shadow: none !important; }
  #tpRollTable { display: block !important; }
  #tpRollTable thead { display: none !important; }
  #tpRollTable tbody { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; }

  #tpRollTable tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 0.375rem 0.75rem !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 0.875rem !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  }

  /* Row number: hide */
  #tpRollTable tbody td:nth-child(1) {
    display: none !important;
  }

  /* Student name: full width top row */
  #tpRollTable tbody td:nth-child(2) {
    grid-column: 1 / -1 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #0f172a !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
    border: none !important;
    padding: 0 0 0.5rem !important;
  }

  /* Days present, Absent, Attendance %, Conduct, Interest cells */
  #tpRollTable tbody td:nth-child(n+3) {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Pseudo-labels via ::before */
  #tpRollTable tbody td:nth-child(3)::before { content: "Days Present"; font-size: 0.68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
  #tpRollTable tbody td:nth-child(4)::before { content: "Absent"; font-size: 0.68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
  #tpRollTable tbody td:nth-child(5)::before { content: "Attendance"; font-size: 0.68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
  #tpRollTable tbody td:nth-child(6) { grid-column: 1 / -1 !important; }
  #tpRollTable tbody td:nth-child(6)::before { content: "Conduct"; font-size: 0.68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
  #tpRollTable tbody td:nth-child(7) { grid-column: 1 / -1 !important; }
  #tpRollTable tbody td:nth-child(7)::before { content: "Interest"; font-size: 0.68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }

  /* Inputs: large touch targets */
  #tpRollTable .tp-roll-present {
    max-width: none !important;
    width: 100% !important;
    min-height: 44px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  #tpRollTable .tp-roll-conduct,
  #tpRollTable .tp-roll-interest {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.9rem !important;
  }

  /* Absent/pct: plain text display */
  .tp-roll-absent, .tp-roll-pct { font-size: 0.9rem !important; margin-top: 2px !important; }

  /* Save / Back buttons: full-width on mobile */
  #tpRollSaveBtn, #tpRollBackBtn {
    flex: 1 !important;
    min-height: 48px !important;
  }

  /* Teacher scoresheet table: improve horizontal scroll */
  .score-entry-table-wrapper.scoresheet-ui-scope {
    border-radius: 0 !important;
  }
  #tpScoreTable { font-size: 0.8rem !important; }
  #tpScoreTable .tp-sc-input { min-height: 40px !important; font-size: 0.9rem !important; }
  #tpScoreTable .tp-sc-col--student { min-width: 110px !important; position: sticky !important; left: 0 !important; background: #fff !important; z-index: 2 !important; }
  #tpScoreTable thead .tp-sc-col--student { background: #f8fafc !important; }
  #tpScoreTable .tp-sc-col--idx { display: none !important; }

  /* Scoresheet action buttons: wrap on mobile */
  .tp-scoresheet-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .tp-scoresheet-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Teacher portal breadcrumb: compact */
  .tp-breadcrumb { font-size: 0.78rem !important; margin-bottom: 0.75rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   10. RESULTS & REPORT CARDS
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Results workflow step indicator: horizontal scroll */
  .results-workflow-steps,
  .report-wizard-steps {
    display: flex !important;
    overflow-x: auto !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0 0.75rem !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap !important;
  }
  .results-workflow-steps::-webkit-scrollbar { display: none; }

  /* Results filter panel: collapse to sheet */
  .results-filter-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .results-filter-row [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Results table: horizontal scroll with sticky name column */
  .results-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  .results-table-wrapper table td:first-child,
  .results-table-wrapper table th:first-child {
    position: sticky !important;
    left: 0 !important;
    background: #fff !important;
    z-index: 2 !important;
    min-width: 120px !important;
  }
  .results-table-wrapper table th:first-child {
    background: #f8fafc !important;
  }

  /* Fixed bottom action bar for results */
  .results-action-bar {
    position: sticky !important;
    bottom: 62px !important;
    background: #fff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 0.75rem 1rem !important;
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    z-index: 50 !important;
  }
  .results-action-bar .btn {
    flex: 1 !important;
    min-width: 120px !important;
    font-size: 0.82rem !important;
  }

  /* PDF canvas: allow pinch-zoom */
  #reportCardCanvas,
  .report-card-preview canvas {
    touch-action: pinch-zoom !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   11. ADVANCED REPORTS
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Leaderboard table: sticky first column */
  .leaderboard-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .leaderboard-table-wrapper table td:first-child,
  .leaderboard-table-wrapper table th:first-child {
    position: sticky !important;
    left: 0 !important;
    background: #fff !important;
    z-index: 2 !important;
    min-width: 110px !important;
  }

  /* Report builder: stack filters vertically */
  .report-builder-filters {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .report-builder-filters [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* KPI cards: 2-column grid on mobile */
  .kpi-cards-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   12. MODALS — FULLSCREEN ON MOBILE
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Make modals fullscreen on mobile for better usability */
  .modal-dialog:not(.modal-fullscreen):not(.modal-sm) {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
  }
  .modal-dialog:not(.modal-fullscreen):not(.modal-sm) .modal-content {
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .modal-dialog:not(.modal-fullscreen):not(.modal-sm) .modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
  }

  /* Modals that are OK as bottom sheets (small forms) */
  .modal-dialog.modal-sm {
    margin: auto auto 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .modal-dialog.modal-sm .modal-content {
    border-radius: 16px 16px 0 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   13. FORMS & INPUTS
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Full-width form controls */
  .settings-form .row [class*="col-"],
  .profile-form .row [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Larger form inputs for touch */
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 1rem !important;
  }

  /* Sticky Save button for settings/profile */
  .settings-save-bar,
  .profile-save-bar {
    position: sticky !important;
    bottom: 62px !important;
    background: #fff !important;
    padding: 0.75rem 1rem !important;
    border-top: 1px solid #e2e8f0 !important;
    z-index: 50 !important;
  }

  /* Form row: stack on mobile */
  .form-row-mobile-stack {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .form-row-mobile-stack [class*="col-"] {
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   14. FAB — FLOATING ACTION BUTTON
═══════════════════════════════════════════════════════════════ */

.mobile-fab {
  display: none;
  position: fixed;
  bottom: 78px; /* above bottom bar */
  right: 1rem;
  z-index: 500;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.45);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}

@media (max-width: 767px) {
  .mobile-fab {
    display: flex !important;
  }
  .mobile-fab:active {
    transform: scale(0.94);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
  }
}

/* ═══════════════════════════════════════════════════════════════
   15. BOTTOM SHEET (FILTER PANEL)
═══════════════════════════════════════════════════════════════ */

/* Shared bottom sheet base — used for filter panels across the app */
.sbapro-bottom-sheet {
  position: fixed;
  bottom: 62px;
  left: 0;
  right: 0;
  z-index: 1040;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 0 1rem 1.5rem;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 75vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sbapro-bottom-sheet.open {
  transform: translateY(0);
}

.sbapro-bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0 0.75rem;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 1rem;
}

.sbapro-bottom-sheet-handle {
  width: 40px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  margin: 0.75rem auto 0;
}

.sbapro-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1039;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sbapro-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════
   16. LANDING PAGE MOBILE
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* CTA buttons: large touch targets */
  .lp-cta-btn,
  .lp-hero-cta .btn,
  .lp-btn-primary,
  .lp-btn-secondary {
    min-height: 48px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
  }

  /* Hero: single column */
  .lp-hero-inner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .lp-hero-visual { display: none !important; }

  /* Mobile hamburger overlay menu */
  .lp-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.97);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .lp-mobile-menu.open {
    transform: translateX(0);
  }
  .lp-mobile-menu a {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.01em;
  }
  .lp-mobile-menu a:hover { color: #a5b4fc; }
  .lp-mobile-menu-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
  }
  /* Show hamburger button on mobile only */
  .lp-mobile-hamburger {
    display: flex !important;
  }
  /* Hide desktop nav links */
  .lp-nav-links { display: none !important; }
}

/* Desktop: hide hamburger */
.lp-mobile-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--lp-text, #0f172a);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   17. STUDENTS & TEACHERS MANAGEMENT — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Section header: hide bulk desktop buttons, keep title */
  #students .d-flex.justify-content-between > .d-flex,
  #teachers .d-flex.justify-content-between > .d-flex {
    display: none !important;
  }

  /* Teachers section header: stack and full-width button */
  #teachers .d-flex.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  #teachers .d-flex.justify-content-between .btn {
    width: 100% !important;
  }

  /* Hide the desktop search/filter bar (filter sheet replaces it) */
  #students .students-filter-row,
  #students #studentFiltersRow {
    display: none !important;
  }

  /* Pagination: large touch targets */
  #studentsPagePrev,
  #studentsPageNext {
    min-height: 44px !important;
    min-width: 44px !important;
    font-size: 1rem !important;
  }
  #studentsPageLabel { font-size: 0.82rem !important; }
  #students .students-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  #students .students-toolbar #studentsPaginationBar {
    margin-left: 0 !important;
    justify-content: space-between !important;
  }
  #students .students-toolbar #studentsPaginationBar #studentsPageLabel {
    width: 100%;
    text-align: center;
    order: 3;
  }
  #students .students-toolbar #studentsPaginationBar #studentsPagePrev {
    order: 1;
  }
  #students .students-toolbar #studentsPaginationBar #studentsPageNext {
    order: 2;
  }
  #students .students-toolbar #studentsPaginationBar .ms-2 {
    width: 100%;
    margin-left: 0 !important;
    text-align: center;
    order: 4;
  }

  /* Grid view: 2-column on mobile (cleaner than 1 or 3) */
  #studentsGridContainer.row {
    --bs-gutter-x: 0.625rem !important;
    --bs-gutter-y: 0.625rem !important;
  }
  #studentsGridContainer .col-md-4,
  #studentsGridContainer .col-lg-3,
  #studentsGridContainer [class*="col-"] {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Student grid cards: compact on mobile */
  #studentsGridContainer .card {
    font-size: 0.8rem !important;
  }
  #studentsGridContainer .card-body {
    padding: 0.625rem !important;
  }
  #studentsGridContainer .card img {
    width: 52px !important;
    height: 52px !important;
  }

  /* List view table: hide less important columns on mobile */
  #studentsListView thead th:nth-child(1),   /* checkbox */
  #studentsListView tbody td:nth-child(1) { width: 32px !important; }

  /* Teacher table: horizontal scroll and prevent squishing */
  #teachers .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  #teachersAdminTable { min-width: 800px !important; }
  #teachersAdminTable th, #teachersAdminTable td {
    white-space: nowrap !important;
  }
  #teachers #teachersAdminTable {
    display: none !important;
  }
  #teachers .teachers-mobile-list {
    display: block !important;
  }
  #teachers .teacher-admin-search-wrap {
    max-width: 100% !important;
  }
  #teachers .teacher-mobile-actions .btn {
    min-height: 40px !important;
  }
  #teachers #teacherStatsSection .teacher-stats-chart-wrap {
    min-height: 180px !important;
  }
  #teachers #teacherStatsToggleBtn,
  #teachers #addTeacherBtn {
    flex: 1 !important;
  }

  /* Bulk actions bar: stack on mobile */
  #bulkActionsBar .d-flex {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }
  #bulkActionsBar .btn { flex: 1 !important; min-width: 100px !important; }
}

@media (max-width: 414px) {
  #students .students-toolbar {
    padding: 0.6rem 0.65rem !important;
    border-radius: 12px !important;
  }
  #students #studentClassFilter {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 0.86rem !important;
  }
  #students #clearStudentFiltersBtn {
    width: 100% !important;
  }
  #students #studentsPagePrev,
  #students #studentsPageNext {
    flex: 1 !important;
    justify-content: center !important;
    font-size: 0.84rem !important;
    padding: 0.34rem 0.55rem !important;
  }
  #students .students-toolbar #studentsPaginationBar {
    gap: 0.4rem !important;
  }
  #students .students-toolbar #studentsPaginationBar #studentsPageLabel,
  #students .students-toolbar #studentsPaginationBar .ms-2 {
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
  }
  #studentsGridContainer.row {
    --bs-gutter-x: 0.45rem !important;
    --bs-gutter-y: 0.45rem !important;
  }
  #studentsGridContainer .card {
    font-size: 0.76rem !important;
    border-radius: 10px !important;
  }
  #studentsGridContainer .card-body {
    padding: 0.5rem !important;
  }
  #studentsGridContainer .card img {
    width: 44px !important;
    height: 44px !important;
  }

  #teachers .teacher-admin-controls-card .card-body {
    padding: 0.65rem !important;
  }
  #teachers #teacherAdminSearchInput,
  #teachers #teacherAdminRoleFilter,
  #teachers #teacherAdminStatusFilter {
    font-size: 0.86rem !important;
    min-height: 40px !important;
  }
  #teachers .teacher-mobile-card {
    padding: 0.7rem !important;
    border-radius: 10px !important;
  }
  #teachers .teacher-mobile-name {
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
  }
  #teachers .teacher-mobile-user {
    font-size: 0.72rem !important;
  }
  #teachers .teacher-mobile-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.3rem !important;
  }
  #teachers .teacher-mobile-actions .btn {
    min-height: 38px !important;
    font-size: 0.75rem !important;
    padding: 0.3rem 0.45rem !important;
  }
}

@media (max-width: 991px) {
  #teachers .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #teachers #teachersAdminTable {
    min-width: 900px !important;
  }
  #teachers .teacher-actions-cell {
    min-width: 250px !important;
  }
  #teachers .teacher-actions-group {
    flex-wrap: nowrap !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   18. STUDENT / TEACHER PROFILE — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Profile header: stack photo + info on mobile */
  #studentProfileHeader .d-flex,
  #teacherProfileHeader .d-flex {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }

  #studentProfilePhoto,
  #teacherProfilePhoto {
    width: 80px !important;
    height: 80px !important;
  }

  /* Quick stats: 2x2 grid */
  .student-quick-stats,
  #studentProfileQuickStats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  /* Tab strip: horizontal scroll, no wrapping */
  #studentProfileTabs.nav-tabs,
  #teacherProfileTabs.nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 2px solid #e2e8f0;
    gap: 0;
    padding-bottom: 0;
  }
  #studentProfileTabs.nav-tabs::-webkit-scrollbar,
  #teacherProfileTabs.nav-tabs::-webkit-scrollbar { display: none; }

  #studentProfileTabs .nav-link,
  #teacherProfileTabs .nav-link {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.82rem !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px;
    color: #64748b;
  }
  #studentProfileTabs .nav-link.active,
  #teacherProfileTabs .nav-link.active {
    color: #667eea !important;
    border-bottom-color: #667eea !important;
    background: transparent !important;
    font-weight: 700 !important;
  }

  /* Tab content: full-width, no overflow */
  #studentProfileTabContent,
  #teacherProfileTabContent {
    padding: 0.75rem 0 !important;
  }

  /* Info grid inside tabs: single column on narrow screens */
  .student-info-grid,
  .teacher-info-grid {
    grid-template-columns: 1fr !important;
  }

  /* Performance chart: full width */
  #performanceTrendsChart,
  [id$="TrendsChart"] {
    max-height: 200px !important;
  }

  /* Teacher profile: sidebar + content layout → stacked */
  #teacher-profile .col-lg-4,
  #teacher-profile .col-lg-8 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Teacher assignments tab: table → horizontal scroll */
  #teacherProfileClassPane .table-responsive,
  #teacherProfileSubjectPane .table-responsive {
    font-size: 0.82rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   19. DEPARTMENTS / CLASSES / STREAMS — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Tab navigation: horizontal scroll */
  #departments .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #departments .nav-tabs::-webkit-scrollbar { display: none; }
  #departments .nav-tabs .nav-link {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 0.82rem !important;
    padding: 0.5rem 0.875rem !important;
  }

  /* Tables: horizontal scroll */
  #departments .table-responsive { font-size: 0.83rem !important; }

  /* Add button row: stack */
  #departments .d-flex.justify-content-between {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
  }
  #departments .d-flex.justify-content-between .btn {
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   20. SUBJECTS & CLASS-SUBJECTS — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  #subjects .d-flex.justify-content-between,
  #class-subjects .d-flex.justify-content-between {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
  }
  #subjects .d-flex.justify-content-between .btn,
  #class-subjects .d-flex.justify-content-between .btn {
    width: 100% !important;
  }

  /* Subject table: hide less critical columns */
  #subjectsTableBody td:nth-child(5),
  #subjectsTableBody th:nth-child(5) { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   21. ACADEMIC YEARS & TERMS — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  #academic .row.g-4 > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #academic .card-header .d-flex {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }
  #academic .card-header .btn { font-size: 0.8rem !important; padding: 0.375rem 0.625rem !important; }

  /* Years/terms tables: compact */
  #yearsTableBody td, #termsTableBody td { font-size: 0.82rem !important; padding: 0.5rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   22. ASSESSMENTS — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  #assessments .row.g-4 > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #assessments .d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   23. PROMOTION — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Filter row: stack */
  #promotion .row.mb-3 {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #promotion .row.mb-3 [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  #loadPromoStudentsBtn { width: 100% !important; }

  /* Student checklist: large rows */
  #promoTableBody tr { min-height: 52px !important; }
  #promoTableBody td { padding: 0.75rem 0.625rem !important; font-size: 0.88rem !important; }
  #promoTableBody input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    cursor: pointer;
  }

  /* Promote button: full-width */
  #promoteStudentsBtn { width: 100% !important; min-height: 48px !important; margin-top: 0.75rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   24. TEACHER ASSIGNMENTS — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Two side-by-side columns → stack */
  #teacher-assignments .row.g-4 > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Filter selects: stack */
  #teacher-assignments .row.g-3 [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Assignment tables: horizontal scroll */
  #teacher-assignments .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    font-size: 0.82rem !important;
  }
  #teacher-assignments table.table { min-width: 620px !important; }
  #teacher-assignments table.table th,
  #teacher-assignments table.table td {
    white-space: nowrap !important;
  }
  #tcaTableBody td, #tsaTableBody td { padding: 0.5rem 0.625rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   25. DATA MANAGEMENT — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Cards: single column */
  #data-management .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Buttons: full width */
  #data-management .card-body .btn,
  #exportDataBtn { width: 100% !important; min-height: 48px !important; }

  /* Import dropzone: larger */
  #importDropZone {
    padding: 2rem 1rem !important;
    font-size: 0.9rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   26. SETTINGS — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Settings cards: single column */
  #settings .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Logo / signature upload: center on mobile */
  #settings .logo-upload-area,
  #settings .signature-upload-area {
    text-align: center !important;
  }

  /* Save buttons: full width */
  #saveSchoolProfileBtn,
  #saveHeadteacherBtn { width: 100% !important; min-height: 48px !important; margin-top: 0.75rem !important; }

  /* Sticky save bar */
  #settings .card { margin-bottom: 1rem !important; }
  #settings .card-footer {
    position: sticky !important;
    bottom: 62px !important;
    background: #fff !important;
    z-index: 10 !important;
    border-top: 1px solid #e2e8f0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   27. ADMIN PROFILE — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Profile: center photo on mobile */
  #admin-profile .profile-photo-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
  }

  /* Two-column layout → single column */
  #admin-profile .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Save / change password buttons: full width */
  #saveAdminProfileBtn,
  #adminChangePasswordBtn { width: 100% !important; min-height: 48px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   28. SMS SECTION (DISABLED STATE) — PHASE 3
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  #sms .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   29. RESULTS & RCG (REPORT CARD GENERATOR) — PHASE 4
   style.css already handles ≤768px layout; these are tighter
   phone-specific (≤767px) overrides on top of those.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* ── RCG / classic results wrapper ─────────────────────────── */
  .rcg-wrap { overflow-x: hidden !important; }

  /* Topbar: compact */
  .rcg-topbar { padding: 10px 14px !important; gap: 8px !important; }
  .rcg-page-title { font-size: 1rem !important; }
  .rcg-page-sub { display: none !important; }   /* hide subtitle on small screens */

  /* Filter bar: tighten padding */
  .rcg-filterbar { padding: 10px 14px 12px !important; gap: 8px !important; }

  /* Chips row: horizontal scroll */
  .rcg-chips-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding-bottom: 2px;
  }
  .rcg-chips-row::-webkit-scrollbar { display: none; }
  .rcg-chips-row > * { flex-shrink: 0 !important; }

  /* Selects row: already stacks from style.css at ≤768px.
     Add full-width selects and remove min-width constraint. */
  .rcg-sel-wrap { min-width: 0 !important; width: 100% !important; }
  .rcg-selects-row select { height: 44px !important; font-size: 0.9rem !important; }

  /* Stats row: 2-column, compact */
  .rcg-stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 10px 14px !important;
  }
  .rcg-stat { padding: 8px 10px !important; }
  .rcg-stat-val { font-size: 1.2rem !important; }
  .rcg-stat-label { font-size: 0.65rem !important; }

  /* Toolbar: horizontal scroll */
  .rcg-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 8px 14px !important;
  }
  .rcg-toolbar::-webkit-scrollbar { display: none; }
  .rcg-toolbar > * { flex-shrink: 0 !important; }

  /* Table: sticky name column */
  .rcg-table-outer { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  #rcgTable td:nth-child(3),
  #rcgTable th:nth-child(3) {
    position: sticky !important;
    left: 0 !important;
    background: #fff !important;
    z-index: 2 !important;
    min-width: 110px !important;
  }
  #rcgTable thead th:nth-child(3) { background: #f8fafc !important; }
  #rcgTable { font-size: 0.8rem !important; }

  /* Left panel: reduce padding */
  .rcg-left { padding: 0 !important; }
  .rcg-body { padding: 12px !important; gap: 12px !important; }

  /* Right panel action buttons: horizontal scroll */
  .rcg-pdf-card .d-flex,
  .rcg-check-card .d-flex {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    gap: 6px !important;
  }
  .rcg-pdf-card .d-flex::-webkit-scrollbar,
  .rcg-check-card .d-flex::-webkit-scrollbar { display: none; }

  /* Generate button: full-width prominent on mobile */
  #rcgGenerateBtn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    margin-top: 0.5rem !important;
  }

  /* ── Classic results table (legacy #resultsTableBody) ──────── */
  #resultsTableBody tr { font-size: 0.8rem !important; }
  #resultsTableBody td, #resultsTableBody th { padding: 0.5rem 0.625rem !important; }

  /* ── Report Card Wizard sticky bars ────────────────────────── */
  /* Override sticky-tools top so it accounts for the mobile navbar */
  #results .sticky-tools {
    top: 56px !important;   /* matches mobile navbar height */
  }

  /* First sticky bar (stats + select/clear buttons): compact */
  #results .sticky-tools:first-of-type .d-flex {
    gap: 6px !important;
  }
  #results .sticky-tools .stat-badge {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
    white-space: nowrap;
  }
  #results .sticky-tools .btn { font-size: 0.78rem !important; padding: 6px 10px !important; }

  /* Second sticky bar (PDF/Email/Excel): buttons scroll horizontally */
  #results .sticky-tools:nth-of-type(2) .d-flex:first-child {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #results .sticky-tools:nth-of-type(2) .d-flex:first-child::-webkit-scrollbar { display: none; }
  #results .sticky-tools:nth-of-type(2) .d-flex:first-child > * { flex-shrink: 0 !important; }

  /* Status labels row (Selected / Mode / Last Generated): hide on mobile */
  #results .sticky-tools:nth-of-type(2) .d-flex.align-items-center.gap-4 {
    display: none !important;
  }

  /* Report card wizard filter selects: stack */
  #results .col-md-3 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Wizard students table: sticky student name */
  #studentsTable td:nth-child(2),
  #studentsTable th:nth-child(2) {
    position: sticky !important;
    left: 32px !important;
    background: #fff !important;
    z-index: 2 !important;
    min-width: 120px !important;
  }
  #studentsTable thead th:nth-child(2) { background: #f8fafc !important; }
  #studentsTable { font-size: 0.82rem !important; }

  /* Wizard: checklist result box full-width */
  #checklistResultBox { font-size: 0.82rem !important; }

  /* PDF progress bar: compact */
  #pdfJobProgress { padding: 8px 14px !important; }
}

/* ── PDF Preview iframe: pinch-zoom support ─────────────────── */
#pdfPreviewModal .modal-body {
  -webkit-overflow-scrolling: touch !important;
  overflow: auto !important;
  touch-action: pan-y pinch-zoom !important;
}
#pdfPreviewFrame {
  touch-action: pinch-zoom !important;
}

/* ═══════════════════════════════════════════════════════════════
   30. ADVANCED REPORTS — PHASE 4
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* ── Tab strip: horizontal scroll ──────────────────────────── */
  #advReportsTabs.nav-tabs,
  #advanced-reports .rpt-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 2px solid #e2e8f0;
  }
  #advReportsTabs.nav-tabs::-webkit-scrollbar,
  #advanced-reports .rpt-tabs::-webkit-scrollbar { display: none; }
  #advReportsTabs .nav-link,
  #advanced-reports .rpt-tabs .nav-link {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 0.82rem !important;
    padding: 0.625rem 0.875rem !important;
    border-radius: 0 !important;
  }

  /* ── Section padding ────────────────────────────────────────── */
  #advanced-reports .rpt-card { border-radius: 12px !important; }
  #advanced-reports .rpt-card .card-body,
  #advanced-reports .rpt-card > .p-4 { padding: 1rem !important; }

  /* ── Term Comparison ────────────────────────────────────────── */
  /* Config filter selects: stack */
  #rpt-comparison .row.g-3 [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  #runComparisonBtn { width: 100% !important; min-height: 44px !important; }

  /* KPI strip: 2-column grid */
  #cmpKpiStrip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .rpt-kpi-card { padding: 0.75rem !important; }
  .rpt-kpi-val { font-size: 1.4rem !important; }
  .rpt-kpi-label { font-size: 0.7rem !important; }

  /* Charts: constrain height + stack */
  #rpt-comparison .row.g-4 { flex-direction: column !important; }
  #rpt-comparison .row.g-4 [class*="col-"] { width: 100% !important; max-width: 100% !important; }
  #termComparisonChart { max-height: 200px !important; }
  #gradeDistCmpChart { max-height: 180px !important; }

  /* Term comparison table: horizontal scroll */
  #rpt-comparison .table-responsive { font-size: 0.8rem !important; }
  #cmpTableBody td, #cmpTableHead th { padding: 0.5rem 0.625rem !important; }
  #exportCmpBtn { width: 100% !important; margin-bottom: 0.5rem !important; }

  /* ── Leaderboard ────────────────────────────────────────────── */
  /* Config selects: stack */
  #rpt-leaderboard .row.g-3 [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  #runLeaderboardBtn { width: 100% !important; min-height: 44px !important; }

  /* Podium: horizontal layout on mobile (3 items side by side) */
  #lbPodium {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
  }
  .podium-item { min-width: 80px !important; padding: 0.5rem !important; }
  .podium-avatar { width: 44px !important; height: 44px !important; font-size: 1rem !important; }
  .podium-block { padding: 0.375rem !important; }
  .podium-name { font-size: 0.7rem !important; }
  .podium-score { font-size: 0.75rem !important; }
  .podium-medal { font-size: 1rem !important; }

  /* Leaderboard table: sticky rank + name columns */
  #lbTableCard .table-responsive { font-size: 0.8rem !important; }
  #lbTable { min-width: 600px !important; }
  #lbTable td:nth-child(1), #lbTable th:nth-child(1) {
    position: sticky !important;
    left: 0 !important;
    background: #fff !important;
    z-index: 2 !important;
    min-width: 44px !important;
  }
  #lbTable td:nth-child(2), #lbTable th:nth-child(2) {
    position: sticky !important;
    left: 44px !important;
    background: #fff !important;
    z-index: 2 !important;
    min-width: 110px !important;
  }
  #lbTable thead th { background: #f8fafc !important; }

  /* Leaderboard search + export: stack */
  #lbTableCard .d-flex.justify-content-between {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #lbSearch, #exportLbBtn { width: 100% !important; }
  #exportLbBtn { min-height: 44px !important; }

  /* Rank badges: compact */
  .rank-badge { width: 28px !important; height: 28px !important; font-size: 0.75rem !important; }

  /* Score chips */
  .score-chip { font-size: 0.72rem !important; padding: 2px 6px !important; }

  /* ── Report Builder ──────────────────────────────────────────── */
  /* Config filters: stack */
  #rpt-builder .row.g-3 [class*="col-"],
  #rpt-builder .row.g-4 [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  #runBuilderBtn { width: 100% !important; min-height: 44px !important; }

  /* Results: chart + summary stack */
  #bldrResults .row { flex-direction: column !important; }
  #bldrResults [class*="col-"] { width: 100% !important; max-width: 100% !important; }
  #bldrChart { max-height: 220px !important; }

  /* Data table */
  #bldrResults .table-responsive { font-size: 0.8rem !important; }
  #exportBldrBtn { width: 100% !important; margin-bottom: 0.5rem !important; }

  /* Summary cards */
  #bldrSummary .rpt-kpi-card { padding: 0.75rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   31. UTILITY OVERRIDES
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Tables: horizontal scroll wrapper */
  .table-responsive-mobile {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  /* Button groups: wrap on mobile */
  .btn-group-mobile-wrap {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }
  .btn-group-mobile-wrap .btn {
    flex: 1 !important;
    min-width: 100px !important;
  }

  /* Section headers: compact on mobile */
  .section-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  /* Hide desktop-only decorative elements */
  .desktop-only {
    display: none !important;
  }

  /* Cards: adjust padding */
  .card { border-radius: 12px !important; }
  .card-body { padding: 1rem !important; }

  /* Breadcrumbs: hide on mobile */
  .breadcrumb { display: none !important; }

  /* Pagination: compact */
  .pagination .page-link {
    padding: 0.375rem 0.6rem !important;
    font-size: 0.85rem !important;
  }

  /* Horizontal scroll pill rows */
  .pill-scroll-row {
    display: flex !important;
    overflow-x: auto !important;
    gap: 0.4rem !important;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .pill-scroll-row::-webkit-scrollbar { display: none; }
  .pill-scroll-row > * { flex-shrink: 0 !important; }
}