/* ==========================================================================
   PMIST Informatics — RESPONSIVE LAYER (Phase 2)
   --------------------------------------------------------------------------
   Loaded AFTER style.css (see views/partials/header.ejs and
   views/admin/partials/header.ejs). Holds every mobile/tablet rule in one
   place. No colours, content or desktop layout are changed here.

   Breakpoints (match Bootstrap 5):
     lg   >= 992px   desktop  -> untouched, except the two explicit fixes in 1.
     <992px          tablet   -> mobile nav, admin drawer
     <768px          phone    -> stacked layouts, card tables, 16px inputs
     <576px          small    -> tighter spacing / type scale
     <375px          tiny     -> 320px devices

   Some views carry their own inline <style> that loads later than this file.
   Where a rule must beat one, the selector is prefixed with `body` (one extra
   element of specificity) instead of using !important. The only !important
   uses are against Bootstrap utility classes (gap-3) and inline style="" attrs.

   Contents
     1. Fixes that apply at every width
     2. Public: top bar, navbar, mobile menu
     3. Public: hero, headings, sections
     4. Public: cards, grids, bearers/team, events, sponsors
     5. Public: forms & registration
     6. Public: footer, alerts, modals
     7. Touch targets
     8. Admin: shell, drawer, top bar
     9. Admin: cards, stats, filters
    10. Admin: tables -> stacked cards on phones
    11. Admin: forms, image upload/preview
    12. Admin: modals
   ========================================================================== */


/* ==========================================================================
   1. FIXES THAT APPLY AT EVERY WIDTH
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
iframe, embed, object { max-width: 100%; }
/* Images scale down inside their containers on phones. (Not applied on desktop
   and not to the logos in the flex navbar, which would otherwise be squeezed.) */
@media (max-width: 767.98px) {
  :where(section, footer, .admin-content) img { max-width: 100%; }   /* :where() = zero specificity, never beats a component rule */
  video, canvas { max-width: 100%; }
}

/* Bug: style.css keeps `max-width: calc(100vw - 260px)` on .admin-main below
   992px as well, squeezing all admin content into ~115px on a phone. */
@media (max-width: 991.98px) {
  .admin-main { max-width: 100%; width: 100%; margin-left: 0; }
}
/* Bug: style.css hides the sidebar at max-width:992px but Bootstrap only shows
   the ☰ button below 992px, so at exactly 992px there was no navigation. */
@media (min-width: 992px) {
  .admin-sidebar { transform: none; }
  .admin-main { margin-left: 260px; max-width: calc(100vw - 260px); }
  .admin-backdrop { display: none !important; }
}


/* ==========================================================================
   2. PUBLIC: TOP BAR, NAVBAR, MOBILE MENU
   ========================================================================== */
@media (max-width: 991.98px) {
  .main-navbar .container { min-height: 64px; flex-wrap: wrap; }
  .main-navbar .navbar-brand { min-width: 0; margin-right: 0; gap: .6rem !important; /* beats .gap-3 */ }

  .main-navbar .navbar-toggler {
    width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray-300, #cbd5e1); border-radius: 10px;
  }
  .main-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }

  /* Opened menu: full-width panel inside the sticky bar, scrolls if the
     screen is short (landscape phones) instead of running off the page. */
  .main-navbar .navbar-collapse {
    flex-basis: 100%; width: 100%;
    max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 0 14px; border-top: 1px solid var(--gray-100, #f1f5f9);
  }
  .main-navbar .navbar-nav { gap: 2px !important; }
  .main-navbar .nav-link {
    display: flex; align-items: center; min-height: 46px;
    padding: 10px 14px !important; font-size: 15px;
  }
  .main-navbar .dropdown-toggle::after { margin-left: auto; }
  .main-navbar .dropdown-menu {
    position: static !important; transform: none !important; float: none;
    width: 100%; margin: 2px 0 6px; padding: 4px;
    border: 0; box-shadow: none; background: var(--gray-50, #f8fafc);
  }
  .main-navbar .dropdown-item {
    display: flex; align-items: center; min-height: 44px;
    padding: 10px 14px; white-space: normal; border-radius: 8px;
  }
}

@media (max-width: 767.98px) {
  .top-bar { font-size: 11px; line-height: 1.35; padding: 6px 0; }
  .top-bar .container { justify-content: center !important; text-align: center; }
}
@media (max-width: 575.98px) {
  .nav-college-logo { height: 46px; }
  .nav-dept-logo    { height: 42px; }
}
@media (max-width: 359.98px) {
  .nav-college-logo { height: 40px; }
  .nav-dept-logo    { height: 36px; }
}


/* ==========================================================================
   3. PUBLIC: HERO, HEADINGS, SECTIONS
   ========================================================================== */
/* Bug: `.row.g-5` uses a 3rem gutter, so its -1.5rem side margins are wider
   than the 12px container padding and push the page sideways (home, event). */
@media (max-width: 575.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
  .row.g-5, .row.gy-5 { --bs-gutter-y: 1.5rem; }
}

@media (max-width: 991.98px) {
  body .hero-section { min-height: auto; padding: 44px 0 52px; }
  .hero-section .hero-logo-float { margin-bottom: 4px; }
}
@media (max-width: 767.98px) {
  .hero-vista-logo { max-width: min(220px, 62vw); }
  body .hero-title { font-size: clamp(27px, 8vw, 36px); line-height: 1.22; margin-bottom: 14px; }
  .hero-subtitle { font-size: 15px; line-height: 1.6; }
  .hero-motto { gap: 8px; margin-top: 14px; }
  .motto-word { font-size: 11px; letter-spacing: .1em; }
  .motto-sep  { font-size: 16px; }
  .hero-section .d-flex.flex-wrap > .btn { flex: 1 1 100%; justify-content: center; }

  body .page-hero { padding: 34px 0; }
  body .page-hero-title { font-size: 26px; line-height: 1.25; }
  body .section-gap { padding: 44px 0; }
  body .section-title { font-size: clamp(24px, 6.5vw, 32px); }

  h1, h2, h3, h4, h5, h6, p, li, a, td, th, code, label { overflow-wrap: anywhere; }
  .btn { white-space: normal; }
}
@media (max-width: 374.98px) {
  body .hero-title { font-size: 26px; }
  .container { padding-left: 14px; padding-right: 14px; }
}


/* ==========================================================================
   4. PUBLIC: CARDS, GRIDS, BEARERS/TEAM, EVENTS, SPONSORS
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Department intro: icon + text sat side by side, leaving ~100px of text. */
  body .dept-intro-card { flex-direction: column; gap: 14px; padding: 20px 18px; }
  .dept-intro-text h2 { font-size: 22px; }
  .dept-intro-text p { font-size: 15px; line-height: 1.7; }
  .dept-intro-text p + p { margin-top: 10px; }

  body .vm-card { padding: 22px 18px; }
  .vista-letter-card { padding: 16px 12px; }

  /* Academic-year selector: wrap, bigger tap targets, no overflow */
  .year-selector-wrap { padding: 14px; }
  .year-selector-wrap > div, .year-selector-wrap .d-flex { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .year-tabs { justify-content: center; }
  body .year-tab {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 8px 18px;
  }

  /* Office bearers / team: cards fill the row instead of shrinking */
  .ob-card { max-width: 100%; }
  .ob-tier-cards { gap: 12px; }
  .ob-tier-cards > * { flex: 1 1 100%; max-width: 100%; }
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; }
  .team-card { min-width: 0; }
  .hod-card, .hod-inner { flex-direction: column; align-items: center; text-align: center; }
  .hod-photo-frame { margin: 0 auto; }

  /* Programmes / societies / events cards: single column, no fixed min widths */
  .society-card, .programme-card, .event-card, .event-preview-card, .subevent-card { min-width: 0; max-width: 100%; }
  .events-scroll-wrapper { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .event-scroll-card { scroll-snap-align: start; max-width: 86vw; }

  .se-sponsor-logo, .sponsor-logo { max-width: 100%; height: auto; max-height: 64px; object-fit: contain; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}


/* ==========================================================================
   5. PUBLIC: FORMS & REGISTRATION
   ========================================================================== */
@media (max-width: 767.98px) {
  /* 16px stops iOS Safari zooming the page when a field is focused */
  .form-control, .form-select, .custom-input, input, select, textarea { font-size: 16px; }
  .custom-input, .form-control, .form-select { min-height: 46px; max-width: 100%; }
  textarea.custom-input, textarea.form-control { min-height: 96px; }
  input[type="file"].custom-input, input[type="file"].form-control { padding: 10px 12px; height: auto; }

  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 40px; }
  form .btn-primary-custom[type="submit"], form button[type="submit"].btn-primary-custom { width: 100%; }

  /* Registration page */
  body .reg-card-body { padding: 18px 16px; }
  .ric-copy-btn { min-height: 40px; min-width: 64px; }
  .ric-upi, .ric-upi-id { overflow-wrap: anywhere; word-break: break-word; }
  .reg-member-card, .rcc { min-width: 0; }
  .ric-qr-img { max-width: min(220px, 70vw); height: auto; }
}


/* ==========================================================================
   6. PUBLIC: FOOTER, ALERTS, MODALS
   ========================================================================== */
@media (max-width: 767.98px) {
  .main-footer { padding-top: 36px; }
  .main-footer .row { --bs-gutter-y: 1.75rem; }
  .footer-links li { margin-bottom: 2px; }
  .footer-links a, .footer-links.no-link li { display: inline-block; padding: 7px 0; overflow-wrap: anywhere; }
  .footer-links.no-link li { display: block; padding: 5px 0; }
  .footer-heading { margin-bottom: 8px; }
  .footer-divider { margin: 24px 0 16px; }
  .main-footer .d-flex.justify-content-between { flex-direction: column; text-align: center; align-items: center !important; }
}

/* Flash messages: were right-anchored with a 360px max, so they hung off the
   left edge of a 320px screen. */
@media (max-width: 575.98px) {
  body .alert-float { left: 12px; right: 12px; top: 76px; max-width: none; width: auto; }
}

/* Society members pop-up (home page) */
@media (max-width: 575.98px) {
  .soc2-overlay { padding: 10px; align-items: flex-end; }
  .soc2-modal { max-height: 92vh; max-height: 92dvh; border-radius: 18px; }
  .soc2-mhdr { padding: 16px 16px 12px; border-radius: 18px 18px 0 0; }
  .soc2-mhdr-name { font-size: 18px; }
  .soc2-mbody { padding: 16px 16px 22px; }
  .soc2-grid { grid-template-columns: 1fr; }
  .soc2-close { width: 40px; height: 40px; }
}
/* Prize pop-up (event page) */
@media (max-width: 575.98px) {
  #prizeOverlay { padding: 12px; overflow-y: auto; }
  #prizeModalInner { padding: 28px 18px; width: calc(100vw - 24px); max-width: 460px; }
  #prizeTrophy { font-size: 56px; }
}


/* ==========================================================================
   7. TOUCH TARGETS (phones and tablets with a touch screen)
   ========================================================================== */
@media (max-width: 767.98px) {
  .back-link, .back-link-sm, .ep-cta, .hero-coord-tel, .rcc-phone, .hod-email, .se-coord-contact {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .btn-action { width: 40px; height: 40px; }
  .btn-rm-coord, .btn-add-coord, .btn-toggle { min-width: 40px; min-height: 40px; }
  .admin-content .form-text a { display: inline-block; padding: 8px 0; }
}


/* ==========================================================================
   8. ADMIN: SHELL, DRAWER, TOP BAR
   ========================================================================== */
.admin-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15, 23, 42, .55);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
body.admin-nav-open { overflow: hidden; }
body.admin-nav-open .admin-backdrop { opacity: 1; visibility: visible; }

@media (max-width: 991.98px) {
  .admin-sidebar {
    width: min(290px, 86vw); min-width: 0;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    box-shadow: none; visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  .admin-sidebar.open { box-shadow: 8px 0 32px rgba(0, 0, 0, .35); visibility: visible; transition: transform .28s ease, visibility 0s; }
  .sidebar-link { min-height: 46px; font-size: 14px; padding: 10px 12px; }
  .sidebar-group-label { padding-top: 16px; }

  .admin-topbar { padding: 8px 12px; gap: 10px; min-height: 56px; }
  .sidebar-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; font-size: 20px; border-radius: 10px;
    flex-shrink: 0;
  }
  .sidebar-toggle:active { background: var(--gray-100, #f1f5f9); }
  body .admin-content { padding: 14px; }
}
@media (min-width: 992px) {
  .admin-sidebar { visibility: visible; }
}
@media (max-width: 575.98px) {
  .admin-user { font-size: 0; }          /* keep the shield icon, drop the text */
  .admin-user i { font-size: 16px; margin: 0 !important; }
}


/* ==========================================================================
   9. ADMIN: CARDS, STATS, FILTERS
   ========================================================================== */
@media (max-width: 767.98px) {
  .admin-stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
  .admin-stat-card { padding: 16px; gap: 14px; }
  .ast-icon { width: 46px; height: 46px; font-size: 19px; }
  .ast-num { font-size: 26px; }

  .admin-card { margin-bottom: 16px; }
  .admin-card-header { padding: 12px 14px; }
  .admin-card-header.d-flex { flex-wrap: wrap; gap: 8px; }
  .admin-card-body { padding: 14px; }
  .admin-content h5 { font-size: 18px; }

  /* Filter rows (events, sub-events, registrations, members) */
  .admin-filter-select { width: 100%; }
  .admin-content form.d-flex, .admin-card-header form.d-flex { width: 100%; }
  .admin-content form.d-flex > select, .admin-card-header form.d-flex > select { flex: 1 1 100%; width: 100% !important; /* beats inline width */ }
  .admin-content .d-flex.justify-content-between > .btn,
  .admin-content .d-flex.justify-content-between > a.btn { width: 100%; }
}


/* ==========================================================================
   10. ADMIN: TABLES -> STACKED CARDS ON PHONES
   --------------------------------------------------------------------------
   Every column and action is kept. public/js/admin.js copies each <th> label
   onto its <td> as data-label; here each row becomes a card with
   "LABEL  value" lines. Desktop and tablet keep the normal table (it already
   scrolls inside .admin-table-wrap instead of breaking the page).
   ========================================================================== */
.admin-table-wrap { -webkit-overflow-scrolling: touch; max-width: 100%; }

@media (max-width: 767.98px) {
  .admin-card-body.p-0 { padding: 10px !important; }
  .admin-table-wrap { overflow-x: visible; }
  .admin-table, .admin-table tbody { display: block; width: 100%; }
  .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* a11y-hidden, not display:none */
  .admin-table tr { display: block; }
  .admin-table tbody tr {
    margin: 0 0 12px; padding: 4px 0;
    background: #fff; border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 12px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  }
  .admin-table tbody tr:hover td { background: transparent; }
  .admin-table td {
    display: block; position: relative; min-height: 34px;
    padding: 8px 14px 8px calc(36% + 14px);
    border-bottom: 1px solid var(--gray-100, #f1f5f9);
    text-align: left; overflow-wrap: anywhere; min-width: 0 !important; /* beats inline min-width */
  }
  .admin-table td:last-child { border-bottom: 0; }
  .admin-table td[data-label]::before {
    content: attr(data-label);
    position: absolute; left: 14px; top: 9px; width: calc(36% - 6px);
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--gray-500, #64748b); line-height: 1.3;
  }
  .admin-table td[data-label=""] { padding-left: 14px; }
  .admin-table td[data-label=""]::before { display: none; }
  .admin-table td[colspan] { padding-left: 14px; text-align: center; }
  .admin-table td form { display: inline-block; margin-right: 6px; }
  .admin-table td .d-flex { flex-wrap: wrap; }
}
@media (max-width: 374.98px) {
  .admin-table td { padding-left: calc(40% + 12px); }
  .admin-table td[data-label]::before { width: calc(40% - 6px); }
}


/* ==========================================================================
   11. ADMIN: FORMS, IMAGE UPLOAD / PREVIEW
   ========================================================================== */
@media (max-width: 767.98px) {
  .admin-card form[style*="max-width"], .admin-card[style*="max-width"] { max-width: 100% !important; /* beats inline */ }
  .admin-content .row > [class*="col-"] { min-width: 0; }
  .admin-content label { font-size: 13px; }
  .admin-content .form-text { font-size: 12px; }

  /* Coordinator / sponsor repeaters and inline input groups stack */
  .admin-content .input-group { flex-wrap: wrap; }
  .admin-content .input-group > .form-control { flex: 1 1 100%; width: 100%; }

  /* Image previews never exceed the card */
  .admin-content img { max-width: 100%; height: auto; }
  .admin-content img[style*="object-fit:cover"],
  .admin-content td img, .admin-content .d-flex img { height: auto; max-height: 96px; }

  /* Form action rows: primary button first and full width */
  .admin-content form .d-flex.gap-2:last-child,
  .admin-content form .d-flex.gap-3:last-child { flex-wrap: wrap; }
  .admin-content form .d-flex:last-child > .btn { flex: 1 1 100%; }
}
@media (max-width: 575.98px) {
  .admin-login-card, .login-card { width: calc(100% - 24px); max-width: 420px; padding: 24px 18px; }
}


/* ==========================================================================
   12. ADMIN: MODALS (download dialogs on Registrations / Sub Events)
   ========================================================================== */
.admin-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .5);
  align-items: center; justify-content: center; padding: 16px;
  /* display:none / flex is toggled inline by each page's own script */
}
.admin-modal-box {
  background: #fff; border-radius: 20px; padding: 40px;
  width: 100%; max-width: 420px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
  animation: adminModalPop .25s ease;
}
@keyframes adminModalPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 575.98px) {
  .admin-modal-overlay { align-items: flex-end; padding: 10px; }
  .admin-modal-box { padding: 22px 18px; border-radius: 18px; }
}