/* =====================================================================
   Global Responsive Overrides — Frontend + Admin
   Loaded last so it overrides theme.css / page-specific CSS.
   ===================================================================== */

/* ---------- 1. UNIVERSAL OVERFLOW + BOX-SIZING SAFETY ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden !important; max-width: 100%; }
img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}
.carousel-img, .hero-banner .carousel-img { height: 100% !important; }
table { max-width: 100%; }

/* Any table outside .table-responsive will now scroll horizontally on small screens */
@media (max-width: 991.98px) {
  table:not(.no-responsive) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* Bootstrap table-responsive — make sure horizontal scrollbar is visible */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ---------- 2. CONTAINER + ROW + COL SAFETY ---------- */
@media (max-width: 991.98px) {
  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
@media (max-width: 575.98px) {
  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ---------- 3. TYPOGRAPHY SCALING ---------- */
@media (max-width: 991.98px) {
  h1, .h1 { font-size: 28px !important; line-height: 1.25 !important; }
  h2, .h2 { font-size: 24px !important; line-height: 1.3  !important; }
  h3, .h3 { font-size: 20px !important; line-height: 1.35 !important; }
  h4, .h4 { font-size: 18px !important; }
  h5, .h5 { font-size: 16px !important; }
  .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-size: 26px !important; line-height: 1.25 !important;
  }
  .heading { font-size: 22px !important; }
  .sub-head-color { font-size: 16px !important; }
  p, .p, body { font-size: 14px; line-height: 1.55; }
}
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 22px !important; }
  h2, .h2 { font-size: 19px !important; }
  h3, .h3 { font-size: 17px !important; }
  .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-size: 22px !important;
  }
  .heading { font-size: 18px !important; }
}

/* ---------- 4. SECTION PADDING ---------- */
@media (max-width: 991.98px) {
  .section, .section-1, .section-2, .section-3, .section-4, .section-5, .py-5, .py-6, .py-7 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}
@media (max-width: 575.98px) {
  .section, .section-1, .section-2, .section-3, .section-4, .section-5 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .main-container { padding: 12px !important; }
}

/* ---------- 5. CARD / GRID LAYOUTS ---------- */
@media (max-width: 991.98px) {
  .card-grid,
  .contact-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
@media (max-width: 575.98px) {
  .card-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .contact-grid .span-2 { grid-column: span 1 !important; }
  .card { padding: 14px !important; }
}

/* ---------- 6. FORMS ---------- */
@media (max-width: 767.98px) {
  .form-control, .form-select, input, textarea, select {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
  .form-label { font-size: 13px !important; }
  .btn { font-size: 14px !important; padding: 8px 14px !important; }
  .btn-lg { font-size: 15px !important; padding: 10px 18px !important; }
  /* Form row stacking */
  .row.g-3 > [class*="col-"],
  .row.g-2 > [class*="col-"] { margin-bottom: 8px; }
}

/* ---------- 7. NAVBAR (Frontend) ---------- */
@media (max-width: 991.98px) {
  .navbar-brand img { max-width: 110px !important; height: auto !important; }
  .navbar-nav .nav-link {
    padding: 10px 12px !important;
    font-size: 15px !important;
  }
  .navbar-collapse {
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* ---------- 8. BACKEND HEADER + ADMIN NAV ---------- */
@media (max-width: 991.98px) {
  .navbar-glass-menu .navbar-nav {
    flex-direction: column !important;
    width: 100% !important;
    background: #1d62a3;
    padding: 8px 0;
  }
  .navbar-glass-menu .nav-item { width: 100%; }
  .navbar-glass-menu .nav-link {
    padding: 10px 14px !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  /* Admin top branding row */
  .navbar-glass .container-fluid img[alt="IMFA Logo"] { max-width: 110px !important; }
  .navbar-glass h1 { font-size: 18px !important; }
  /* Notif bell dropdown — make it full-width-ish on mobile */
  #notifBellWrapper .dropdown-menu {
    min-width: 90vw !important;
    max-width: 95vw !important;
    right: 0 !important;
    left: auto !important;
  }
}
@media (max-width: 575.98px) {
  .navbar-glass .container-fluid img[alt="IMFA Logo"] { max-width: 90px !important; }
  .navbar-glass h1 { font-size: 15px !important; }
}

/* ---------- 9. BUTTONS / CTA STACKING ---------- */
@media (max-width: 575.98px) {
  .d-flex.gap-3, .d-flex.gap-4 { flex-wrap: wrap !important; }
  .btn-group { flex-wrap: wrap; }
  .btn + .btn { margin-top: 6px; }
}

/* ---------- 10. MODALS ---------- */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100% - 16px) !important;
  }
  .modal-body { padding: 12px !important; }
}

/* ---------- 11. PAGINATION ---------- */
@media (max-width: 575.98px) {
  .pagination { flex-wrap: wrap; }
  .pagination .page-link { padding: 5px 10px; font-size: 13px; }
}

/* ---------- 12. ADMIN LISTING PAGES (gl-* classes used across views) ---------- */
@media (max-width: 991.98px) {
  .gl-hero { padding: 12px 14px !important; }
  .gl-hero .page-title { font-size: 15px !important; }
  .gl-filter-card { padding: 14px !important; }
  .gl-filter-card .row > [class*="col-"] { margin-bottom: 8px; }
}
@media (max-width: 575.98px) {
  .gl-hero { flex-wrap: wrap !important; gap: 8px; }
  .gl-card { border-radius: 10px !important; }
  .gl-btn-search { padding: 8px 12px !important; font-size: 13px !important; }
}

/* ---------- 13. NOTIFICATIONS PAGE ---------- */
@media (max-width: 575.98px) {
  .notif-row { flex-wrap: wrap; padding: 12px 14px !important; }
  .notif-row .notif-icon { width: 36px; height: 36px; font-size: 14px; }
  .notif-actions { width: 100%; margin-top: 8px; justify-content: flex-end; }
}

/* ---------- 14. FOOTER ---------- */
@media (max-width: 991.98px) {
  footer .row > [class*="col-"] { margin-bottom: 16px; }
  footer .container-fluid { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 575.98px) {
  footer { text-align: center; }
  footer .text-end, footer .text-start { text-align: center !important; }
}

/* ---------- 15. FIXED-POSITION SIDE WIDGETS ---------- */
@media (max-width: 991.98px) {
  /* Support Us / Career Counselling vertical floating buttons */
  .fixed-icon, .fixed-icon.left, .fixed-icon:not(.left) {
    transform: none !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }
}

/* ---------- 16. UTILITY: prevent text being cut off ---------- */
.text-truncate-mobile {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- 17. SELECT2 + INPUTS RESPONSIVE ---------- */
@media (max-width: 767.98px) {
  .select2-container,
  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ---------- 18. DATATABLES (if used) ---------- */
@media (max-width: 991.98px) {
  .dataTables_wrapper .row > div { width: 100%; text-align: left !important; }
  .dataTables_filter input, .dataTables_length select { width: 100%; margin-top: 4px; }
}

/* ---------- 19. AVOID FIXED HEIGHTS BREAKING ON MOBILE ---------- */
@media (max-width: 767.98px) {
  [style*="height: 500px"], [style*="height:500px"],
  [style*="height: 600px"], [style*="height:600px"],
  [style*="height: 700px"], [style*="height:700px"] {
    height: auto !important;
    min-height: 220px;
  }
}

/* ---------- 20. SAFE IMAGE WRAPPER ---------- */
.img-fluid, img.responsive { max-width: 100% !important; height: auto !important; }