/* ============================================================
 * admin_mobile.css — Tier 1 global mobile polish for admin.
 *
 * Loaded site-wide; every rule is scoped to body.admin-route
 * so customer / teacher / public pages are NEVER affected.
 *
 * Strategy: handle the 80% of mobile breakage patterns that
 * recur across all 186 admin templates in one place. Page-
 * specific restructuring (Tier 2) lives in per-page files.
 *
 * Breakpoints:
 *   - Phones:        max-width: 575.98px
 *   - Phones+Tablets: max-width: 767.98px (most rules here)
 *   - Tablets+:      min-width: 768px (untouched, desktop)
 * ============================================================ */

/* ---------- Phones + small tablets (≤767.98px) ---------- */
@media (max-width: 767.98px) {

  /* --- Containers: tighter gutters so content doesn't get
         squeezed by Bootstrap's default 12-15px padding. ----- */
  body.admin-route .container,
  body.admin-route .container-fluid,
  body.admin-route .container-xxl,
  body.admin-route main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Card padding gets reduced — Bootstrap's 1rem on small
     screens eats 32px of horizontal width for nothing.        */
  body.admin-route .card-body { padding: 0.75rem !important; }
  body.admin-route .card-header { padding: 0.6rem 0.75rem !important; }
  body.admin-route .card-footer { padding: 0.6rem 0.75rem !important; }

  /* --- Forms: prevent iOS auto-zoom on focus (anything
         <16px triggers it). Inputs go full width. ------------ */
  body.admin-route input.form-control,
  body.admin-route select.form-select,
  body.admin-route textarea.form-control {
    font-size: 16px !important;
    width: 100%;
    min-height: 44px;
  }
  body.admin-route textarea.form-control { min-height: 88px; }
  body.admin-route .form-label,
  body.admin-route label.form-label { margin-bottom: 4px; font-weight: 600; }

  /* Side-by-side label/input rows stack vertically. */
  body.admin-route .row > [class*="col-md-"],
  body.admin-route .row > [class*="col-lg-"] { margin-bottom: 0.5rem; }

  /* --- Buttons: 44px minimum tap target (Apple HIG / WCAG). - */
  body.admin-route .btn {
    min-height: 44px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 0.95rem;
  }
  /* Bump btn-sm too — admin tables have many of these as row
     actions and they were 30px tall, almost untappable. */
  body.admin-route .btn-sm {
    min-height: 38px;
    padding: 0.35rem 0.6rem;
    font-size: 0.875rem;
  }
  /* Icon-only buttons: keep them square but at 44px. */
  body.admin-route .btn.btn-icon,
  body.admin-route .btn.btn-icon-only {
    min-width: 44px; padding-left: 0.5rem; padding-right: 0.5rem;
  }

  /* Long button rows: wrap, don't overflow. */
  body.admin-route .btn-group,
  body.admin-route .btn-toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }
  body.admin-route .btn-group > .btn { flex: 1 1 auto; }

  /* Page-header action rows like
     <div class="d-flex justify-content-between"> stack. */
  body.admin-route .card-header.d-flex,
  body.admin-route .page-header.d-flex,
  body.admin-route .d-flex.justify-content-between:not(.no-mobile-stack) {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* --- Tables: every admin table gets horizontal scroll, even
         the ones whose template author forgot the wrapper. --- */
  body.admin-route .table-responsive {
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
  }
  /* Bare <table class="table"> not wrapped in .table-responsive
     gets implicit scroll via overflow-x on its parent .card-body. */
  body.admin-route .card-body > .table:not(.table-responsive *) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  body.admin-route .table { font-size: 0.875rem; }
  body.admin-route .table th,
  body.admin-route .table td {
    padding: 0.5rem 0.55rem !important;
    white-space: nowrap;          /* let content scroll, don't squish */
    vertical-align: middle;
  }
  /* Action-icon cells in tables get larger hit area. */
  body.admin-route .table td .btn,
  body.admin-route .table td a.btn { min-height: 36px; }

  /* --- Modals: near full-screen on phone instead of cramped
         centered dialogs. ----------------------------------- */
  body.admin-route .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
  }
  body.admin-route .modal-dialog.modal-lg,
  body.admin-route .modal-dialog.modal-xl,
  body.admin-route .modal-dialog.modal-fullscreen-md-down {
    margin: 0;
    max-width: 100vw;
    min-height: 100vh;
  }
  body.admin-route .modal-dialog.modal-lg .modal-content,
  body.admin-route .modal-dialog.modal-xl .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
  body.admin-route .modal-body { padding: 0.85rem; }
  body.admin-route .modal-footer {
    padding: 0.65rem 0.85rem;
    flex-wrap: wrap;
    gap: 6px;
  }
  body.admin-route .modal-footer .btn { flex: 1 1 auto; }

  /* --- Dropdowns: don't overflow off-screen, stay tappable. - */
  body.admin-route .dropdown-menu {
    max-width: calc(100vw - 16px);
    min-width: 200px;
  }
  body.admin-route .dropdown-item {
    padding: 0.6rem 0.85rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* --- Headings scale down so they don't dominate. --------- */
  body.admin-route h1, body.admin-route .h1 { font-size: 1.4rem !important; }
  body.admin-route h2, body.admin-route .h2 { font-size: 1.2rem !important; }
  body.admin-route h3, body.admin-route .h3 { font-size: 1.05rem !important; }
  body.admin-route h4, body.admin-route .h4 { font-size: 1rem    !important; }

  /* --- Pagination: horizontally scrollable instead of wrapping
         into 4 rows of buttons. ----------------------------- */
  body.admin-route .pagination {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  body.admin-route .pagination .page-link {
    min-width: 38px; min-height: 38px;
    display: inline-flex;
    align-items: center; justify-content: center;
  }

  /* --- Filter / search bars (common pattern: row of input +
         select + button). Stack vertically. ----------------- */
  body.admin-route .filters-row,
  body.admin-route .filter-bar,
  body.admin-route form.row.g-2,
  body.admin-route form.row.g-3 {
    row-gap: 0.5rem;
  }
  body.admin-route .filters-row > *,
  body.admin-route .filter-bar > * { flex: 1 1 100%; }

  /* --- Badges and status pills: don't shrink to unreadable. - */
  body.admin-route .badge { font-size: 0.78rem; padding: 0.35em 0.55em; }

  /* --- Tabs: scrollable, never wrap into multi-line which
         destroys the visual indicator. ---------------------- */
  body.admin-route .nav-tabs,
  body.admin-route .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  }
  body.admin-route .nav-tabs .nav-link,
  body.admin-route .nav-pills .nav-link {
    white-space: nowrap;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
  }

  /* --- Sticky action bars (common in edit pages): pin to
         bottom on mobile so save is always reachable. ------- */
  body.admin-route .sticky-actions,
  body.admin-route .form-actions-sticky {
    position: sticky;
    bottom: 0;
    background: var(--bs-body-bg, #fff);
    padding: 8px;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    z-index: 100;
    margin-left: -8px;
    margin-right: -8px;
  }

  /* --- Image / avatar sizing in lists: cap so cards stay
         compact. -------------------------------------------- */
  body.admin-route .table img,
  body.admin-route .list-group-item img { max-width: 48px; height: auto; }

  /* --- Long URLs / emails in cells: ellipsis instead of
         pushing the layout. --------------------------------- */
  body.admin-route .text-truncate-mobile {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- Alerts: tighter padding, full-bleed across container. */
  body.admin-route .alert {
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    margin-left: -2px;
    margin-right: -2px;
  }

  /* --- Generic two-column desktop forms collapse to one. --- */
  body.admin-route .form-grid-2col,
  body.admin-route .form-row-split {
    grid-template-columns: 1fr !important;
    display: block;
  }

  /* --- Hide desktop-only helpers if templates marked them. - */
  body.admin-route .d-none-mobile,
  body.admin-route .desktop-only { display: none !important; }
}

/* ---------- Phone-only (≤575.98px) extra-tight tweaks ---------- */
@media (max-width: 575.98px) {

  /* Container gets 4px gutter — pixel-counting territory. */
  body.admin-route .container,
  body.admin-route .container-fluid,
  body.admin-route .container-xxl,
  body.admin-route main {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  body.admin-route .card { border-radius: 6px; }
  body.admin-route .card-body { padding: 0.6rem !important; }

  /* Stack Bootstrap input-groups vertically — they crash on
     phone width otherwise. */
  body.admin-route .input-group:not(.input-group-keep) {
    flex-wrap: wrap;
  }
  body.admin-route .input-group:not(.input-group-keep) > .form-control,
  body.admin-route .input-group:not(.input-group-keep) > .form-select {
    flex: 1 1 100%;
    border-radius: 0.375rem !important;
  }
  body.admin-route .input-group:not(.input-group-keep) > .btn,
  body.admin-route .input-group:not(.input-group-keep) > .input-group-text {
    flex: 1 1 auto;
    border-radius: 0.375rem !important;
    margin-top: 4px;
  }

  /* Toast / notification stack: pin to top, full width. */
  body.admin-route .toast-container { left: 8px; right: 8px; max-width: none; }
  body.admin-route .toast { width: 100%; }
}

/* ---------- Reveal helpers (use anywhere) ----------
 * Templates can opt-in to mobile-only / desktop-only behaviour
 * without needing media queries inline.                       */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }
@media (max-width: 767.98px) {
  .mobile-only { display: block !important; }
  .desktop-only { display: none !important; }
}