/* Mobile Responsive Styles for NPS IT Portal */

/* Responsive breakpoints */
@media (max-width: 768px) {
  .page-wrap, .wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  .g-top-bar {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  
  /* Make tables responsive */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* Stack form elements on mobile */
  .form-row {
    flex-direction: column !important;
  }
  
  /* Mobile-friendly buttons */
  .btn, button {
    padding: 12px 16px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .page-wrap, .wrap {
    padding: 10px !important;
  }
  
  /* Hide non-essential columns on small screens */
  .hide-mobile {
    display: none !important;
  }
  
  /* Navigation bar mobile styles now live in header_nav.php's
     <style> block (@media max-width:640px, horizontal-scroll strip).
     Removed the old vertical-stack rule 2026-04-24, session 16z14 —
     it was overriding the header's responsive layout and causing the
     sub-bar to stack 9 rows tall on phones. */
}