/* ==========================================================================
   responsive-admin.css  -  load AFTER head.php's inline <style>
   --------------------------------------------------------------------------
   Same HTML/PHP/CSS is served to PC & phone; the SCREEN WIDTH decides the
   layout (CSS media queries). Map to the real class names used by the app:
     .topbar            green header bar
     .topbar-divider    thin vertical line after the brand name
     .topbar-subtitle   "Senior Citizen and PWD Welfare"
     .topbar-date       date + time block on the right
     .sidebar           left menu
     .sidebar-overlay   dim layer behind the drawer
     .sidebar-open      (body class) drawer is open -> scroll lock
     .main              content area
     .stats-grid        row of summary cards
     .stat-card / .stat-value / .stat-label
     .section-card / .section-header    dashboard panels + their headers
     .table-wrap        any <table> wrapper (horizontal scroll)
   ========================================================================== */

:root {
  --topbar-h: var(--header-h, 56px);   /* height of the green header */
}

/* ---------- Things hidden on desktop ---------- */
.mobile-menu-btn,
.sidebar-overlay {
  display: none;
}

/* ---------- Safety rules that prevent sideways scrolling ---------- */
img, svg, video, canvas { max-width: 100%; height: auto; }
.main, .stats-grid > *, .section-card { min-width: 0; } /* let grid children shrink */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* wrap every <table> in this */
body:not(.index-page) .main { overflow-wrap: anywhere; } /* long emails / names wrap */

/* ==========================================================================
   <= 1200px  (small laptops)
   ========================================================================== */
@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   <= 900px  (tablets + phones): sidebar becomes a slide-in drawer
   ========================================================================== */
@media (max-width: 900px) {
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 4px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }

  body:not(.index-page) .main {
    margin-left: 0 !important;              /* remove the space reserved for the sidebar */
    width: 100%;
    padding: 20px 16px;
  }

  .sidebar {
    width: min(280px, 85vw);
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .sidebar-footer { margin-top: auto; }     /* keeps Sign Out at the bottom */

  body.sidebar-open .sidebar,
  .sidebar.open {                           /* .open also set by scripts.js toggle */
    transform: none;
    box-shadow: 8px 0 24px rgba(0, 0, 0, .2);
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1000;
  }
  body.sidebar-open .sidebar-overlay,
  .sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }
  body.sidebar-open { overflow: hidden; }   /* stop page scrolling behind the drawer */

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* 16px inputs stop iOS Safari from zooming in when you tap a field */
  input, select, textarea { font-size: 16px; }
  /* comfortable touch targets */
  button, .btn, .sidebar a { min-height: 44px; }
}

/* ==========================================================================
   <= 600px  (phones)
   ========================================================================== */
@media (max-width: 600px) {
  .topbar { padding-left: 8px; padding-right: 12px; }
  .topbar-subtitle,
  .topbar-date,
  .topbar-divider { display: none; }         /* header gets crowded, hide extras */

  body:not(.index-page) .main { padding: 16px 12px; }
  body:not(.index-page) .page-h1 { font-size: 20px; }

  .stats-grid { gap: 10px; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 24px; }

  /* panel headers: title + "View Map"/"See All" link can wrap instead of overflowing */
  .section-header { flex-wrap: wrap; gap: 6px; }
}

/* ==========================================================================
   <= 360px  (very small phones)
   ========================================================================== */
@media (max-width: 360px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* Respect users who turn off animations */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-overlay { transition: none; }
}