/* ==========================================================================
   NESPL Portal — Responsive rules
   Desktop / Laptop / Tablet / Mobile. No horizontal scroll.
   ========================================================================== */

/* Utility grids used across pages */
.grid { display:grid; gap:1.25rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.col-8-4 { grid-template-columns: 2fr 1fr; }
.col-7-5 { grid-template-columns: 1.4fr 1fr; }

/* Laptop */
@media (max-width: 1200px){
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet */
@media (max-width: 992px){
  :root { --sidebar-w: 250px; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .hamb { display:grid; }
  .col-8-4, .col-7-5, .grid-3 { grid-template-columns: 1fr; }
  .topbar__search input { width: 190px; }
  .tracker { overflow-x:auto; padding-bottom:.5rem; }
  .tracker__step { min-width: 130px; }
}

/* Small tablet / large phone */
@media (max-width: 768px){
  body { font-size: 15px; }
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .sec-head h2 { font-size: 1.5rem; }
  .topbar__search { display:none; }
  .topbar__title h1 { font-size:1.1rem; }

  /* Tables become cards */
  .dg thead { display:none; }
  .dg, .dg tbody, .dg tr, .dg td { display:block; width:100%; }
  .dg tr { border:1px solid var(--line); border-radius:14px; margin:0 1rem 1rem; padding:.4rem .2rem; box-shadow:var(--shadow-xs); }
  .dg tbody td { border:0; padding:.55rem 1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:right; }
  .dg td .cell-label { display:inline-block; font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-align:left; }
  .dg .u { justify-content:flex-end; }
  .pager { justify-content:center; }
}

/* Phones */
@media (max-width: 560px){
  .page { padding: 1rem; }
  .card-pad { padding: 1.15rem; }
  .avatar-lg{ width:78px; height:78px; font-size:1.6rem; }
  .btn-lg { width:100%; }
  .stat__num { font-size:1.6rem; }
  .topbar__user span.nm { display:none; }
}

/* Landing responsive */
@media (max-width: 992px){
  .hero-grid { grid-template-columns: 1fr !important; text-align:center; }
  .hero-art { order:-1; margin-bottom:1rem; }
  .nav-links { display:none !important; }
  .nav-toggle { display:grid !important; }
  .foot-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px){
  .foot-grid { grid-template-columns: 1fr !important; }
  .hero h1 { font-size: 2.2rem !important; }
}

/* Allow grid/flex children to shrink so inner scroll areas (tables, tab bars)
   contain themselves instead of forcing page-level horizontal scroll. */
.grid > *, .col-8-4 > *, .col-7-5 > *, .row > [class*="col"] { min-width: 0; }
.table-wrap, .dg { max-width: 100%; }
img, svg, .chart { max-width: 100%; }
html, body { overflow-x: hidden; }