/* =============================================================
   responsive.css — Global responsive utilities
   Applied across all portals (LGU, BNS, BHW, Parent)
   ============================================================= */

/* ── Table horizontal scroll wrapper ── */
.tbl-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
.tbl-wrap::-webkit-scrollbar { height: 5px; }
.tbl-wrap::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 99px; }
.tbl-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

/* ── Responsive grid utilities ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ── Stat/summary chips auto-wrap ── */
.summary-chips,
.stat-grid,
.quick-actions {
  flex-wrap: wrap;
}

/* ── Page hero stacks on mobile ── */
@media (max-width: 600px) {
  .page-hero {
    flex-direction: column !important;
    text-align: center;
    gap: 12px !important;
    padding: 18px 16px !important;
  }
  .page-hero .hero-icon { font-size: 2.2rem !important; }
  .page-hero-icon { width: 44px !important; height: 44px !important; }
}

/* ── Form stacking ── */
@media (max-width: 600px) {
  .row > [class*="col-md"],
  .row > [class*="col-lg"] {
    margin-bottom: 8px;
  }
  .form-row-split {
    flex-direction: column !important;
  }
  .form-row-split > * { width: 100% !important; }
}

/* ── Button groups wrap ── */
.btn-group-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Hide on mobile ── */
@media (max-width: 600px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 601px) {
  .hide-desktop { display: none !important; }
}

/* ── Topbar responsive ── */
@media (max-width: 600px) {
  .user-pill .account-code { display: none; }
  .brand-sub { display: none; }
}

/* ── Card padding tighter on mobile ── */
@media (max-width: 480px) {
  .glass-card { padding: 14px !important; }
  .bhw-card   { padding: 14px !important; }
}

/* ── Charts row stack on tablet ── */
@media (max-width: 768px) {
  .charts-row { grid-template-columns: 1fr !important; }
}

/* ── Filter bar wrap ── */
.filter-bar {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .filter-bar input  { min-width: 100% !important; }
  .filter-bar select { min-width: 100% !important; width: 100% !important; }
  .filter-bar { gap: 8px !important; }
}

/* ── Topbar brand truncate on small screens ── */
@media (max-width: 400px) {
  .brand-title { font-size: 0.88rem !important; }
}

/* ── Enrollment form sections ── */
@media (max-width: 600px) {
  .enroll-section { padding: 16px !important; }
  .step-header     { flex-direction: column; gap: 8px; text-align: center; }
}

/* ── Mobile text sizes ── */
@media (max-width: 480px) {
  .s-chip-num, .stat-num { font-size: 1.1rem !important; }
  .s-chip-lbl, .stat-label { font-size: 0.65rem !important; }
}