/* ==========================================================================
   responsive-pages.css - load AFTER responsive-admin.css
   --------------------------------------------------------------------------
   Imitates the provided template, ADAPTED to the real class names used in
   this project:

     .page-header / .page-h1 / .header-actions   page title row + buttons
     .search-field / .req-search-wrap            search boxes
     .tab-bar / .tab-btn                         Seniors | PWD | Guardians
     table.table-cards                           tables turned into cards
        + data-label="..." on every <td>
     .gps-layout / .gps-map / .gps-sidebar-right SOS Emergency GPS
     #sos-detail-card / .gps-info-row / .sos-action-grid
     #req-drawer / #bene-drawer / #cg-drawer     detail side panels
     .drawer-hero / -body / -footer / -info-grid
     .chat-layout / .chat-list / .chat-main      Messages two-pane
     .ann-card                                   Announcement cards
     .modal-overlay / .modal-box / .modal-footer bottom-sheet modals
     body.panel-open                             scroll lock when a drawer is open
   ========================================================================== */

/* ---------- Page title row, search, tabs ---------- */
@media (max-width: 768px) {

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .page-header .btn,
  .page-header > a,
  .page-header > button,
  .header-actions .btn,
  .header-actions > a {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .page-h1 { font-size: 20px; }

  .search-field,
  .search-field input,
  .req-search-wrap,
  .req-search {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Seniors | PWD | Guardians / Distribution History scroll sideways */
  .tab-bar {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; min-height: 40px; }
}

[data-label] { position: relative; }

/* ==========================================================================
   Tables -> stacked cards on phones
   Add class="table-cards" to a <table> and data-label on every <td>.
   ========================================================================== */
@media (max-width: 768px) {

  .table-wrap:has(table.table-cards) {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  table.table-cards,
  table.table-cards tbody,
  table.table-cards tr,
  table.table-cards td {
    display: block;
    width: 100%;
  }

  /* visually hide the header row but keep it for screen readers */
  table.table-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  table.table-cards tr {
    background: #fff;
    border: 1px solid #e6e9e4;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }

  table.table-cards td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }
  /* kill the row hover that assumes a full desktop table */
  table.table-cards tr:hover td { background: transparent; }

  /* label on the left, value on the right */
  table.table-cards td::before {
    content: attr(data-label);
    flex: 0 0 84px;
    text-align: left;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #7a857f;
  }

  /* first cell = name, acts as the card title */
  table.table-cards td:first-child {
    justify-content: flex-start;
    text-align: left;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #eef0eb;
  }
  table.table-cards td:first-child::before { display: none; }

  /* Status cell: pill + "Last follow..." stacks neatly */
  table.table-cards td[data-label="Status"],
  table.table-cards td[data-label="Group"],
  table.table-cards td[data-label="Role"],
  table.table-cards td[data-label="Request Type"] {
    align-items: flex-start;
  }
  table.table-cards td[data-label="Status"] > *,
  table.table-cards td[data-label="Group"] > *,
  table.table-cards td[data-label="Role"] > *,
  table.table-cards td[data-label="Request Type"] > * { text-align: right; }

  /* action buttons: one full-width row of big tap targets */
  table.table-cards td[data-label="Actions"],
  table.table-cards td[data-label="Action"] {
    justify-content: stretch;
    gap: 8px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid #eef0eb;
    display: block;
  }
  table.table-cards td[data-label="Actions"]::before,
  table.table-cards td[data-label="Action"]::before { display: none; }
  table.table-cards td[data-label="Actions"] > div,
  table.table-cards td[data-label="Action"] > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  table.table-cards td[data-label="Actions"] .btn,
  table.table-cards td[data-label="Actions"] a,
  table.table-cards td[data-label="Action"] .btn,
  table.table-cards td[data-label="Action"] a {
    flex: 1 1 auto;
    min-height: 44px;
    justify-content: center;
  }
}

/* ==========================================================================
   SOS Emergency GPS
   ========================================================================== */
@media (max-width: 900px) {

  .gps-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* let the two side cards become grid items so they can be re-ordered */
  .gps-sidebar-right { display: contents; }

  /* order on phone: Active SOS list -> map -> details + action buttons */
  .gps-map       { order: 2; }
  .gps-sidebar-right > .section-card:nth-of-type(1) { order: 1; } /* Active SOS */
  #sos-detail-card                                  { order: 3; }

  .gps-map {
    min-height: 320px;
    height: 55vh;
    height: 55dvh;
  }

  .gps-select-list {
    max-height: 240px;
    overflow-y: auto;
  }
  .gps-select-btn.sos-user { min-height: 64px; padding: 12px 14px; }

  /* details: label left, value right, long address wraps */
  .gps-info-row { padding: 12px 16px; gap: 12px; }
  .gps-info-val { text-align: right; overflow-wrap: anywhere; }

  /* emergency buttons: big tap targets */
  .gps-info-val + .btn,
  #sos-detail-body .btn.btn-primary { min-height: 52px; font-size: 16px; }
  .sos-action-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sos-action-grid .btn,
  .sos-action-grid button { min-height: 48px; }

  /* Leaflet: bigger zoom buttons for fingers */
  .leaflet-touch .leaflet-bar a { width: 38px; height: 38px; line-height: 38px; }
}

@media (max-width: 600px) {
  /* keep the red SOS pill + bell badge visible in the header */
  .sos-badge { font-size: 11px; padding: 2px 8px; }
}

@media (max-width: 360px) {
  .sos-action-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Detail side panels (#req-drawer / #bene-drawer / #cg-drawer)
   -> full-screen sheets
   ========================================================================== */
@media (max-width: 768px) {

  #req-drawer,
  #bene-drawer,
  #cg-drawer {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0;
  }

  .drawer-hero {
    padding: 20px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
  }

  .drawer-body {
    flex: 1;
    min-height: 0;                 /* lets the body scroll inside the flex column */
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .drawer-section { padding: 16px 20px; }

  /* label/value pairs: one per row */
  .drawer-info-grid,
  .drawer-info-grid-dense {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* ID images + caregiver photos: two per row */
  .drawer-id-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .drawer-id-box, .drawer-id-box img { width: 100%; }

  /* Close + action buttons stay visible at the bottom */
  .drawer-footer {
    position: sticky;
    bottom: 0;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #eceee9;
  }
  .drawer-footer-left { flex: 1 1 100%; }
  .drawer-footer-right { width: 100%; display: flex; gap: 8px; }
  .drawer-footer .btn,
  .drawer-footer button,
  .drawer-footer a {
    flex: 1;
    min-height: 46px;
    justify-content: center;
  }
}

/* When any drawer is open, stop the page behind it from scrolling.
   responsive-pages.js toggles body.panel-open based on the drawer's .open class. */
body.panel-open { overflow: hidden; }

/* ==========================================================================
   SOS page WITH an active alert - real markup mapping
   ========================================================================== */
@media (max-width: 900px) {

  .gps-sidebar-right { display: contents; }
  .gps-map       { order: 2; }
  .gps-sidebar-right > .section-card:nth-of-type(1) { order: 1; }
  #sos-detail-card                                  { order: 3; }

  div[id^="sos-"] { max-width: 100%; }
  #sos-detail-body { overflow-wrap: anywhere; }
  #sos-detail-body .section-card { padding: 0; }
  #sos-detail-body .btn { width: 100%; }
}

/* ==========================================================================
   Filter chip rows (Requests, Announcements, Aid)
   Add class="filter-bar" to the chip row wrapper.
   ========================================================================== */
@media (max-width: 768px) {

  .filter-bar,
  #admin-filters > div,
  .req-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .filter-bar::-webkit-scrollbar,
  #admin-filters > div::-webkit-scrollbar,
  .req-filter-bar::-webkit-scrollbar { display: none; }

  .filter-bar > span,
  .filter-bar > button,
  #admin-filters > div > span,
  #admin-filters > div > button,
  .req-filter-btn {
    flex: 0 0 auto;
    min-height: 40px;
  }

  .filter-bar .search-field,
  .req-search-wrap {
    flex: 1 1 100%;
    min-width: 220px;
  }
}

/* ==========================================================================
   Messages (chat): 2 panes -> list first, tap to open the chat
   ========================================================================== */
@media (max-width: 768px) {

  .chat-layout {
    position: relative;
    height: calc(100vh - var(--topbar-h) - 120px);
    height: calc(100dvh - var(--topbar-h) - 120px);
    min-height: 420px;
    display: block;
  }

  .chat-list { height: 100%; overflow-y: auto; }
  .chat-room-item { min-height: 64px; }

  .chat-main { display: none; }

  .chat-layout.chat-open .chat-list { display: none; }
  .chat-layout.chat-open .chat-main {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .chat-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 4px;
    background: transparent;
    border: 0;
    font-size: 22px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chat-bubble {
    max-width: 85%;
    overflow-wrap: anywhere;      /* long OpenStreetMap links wrap */
  }

  .chat-input-area {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
  }
  .chat-input { flex: 1; min-height: 44px; font-size: 16px; }
  .chat-send-btn { min-width: 48px; min-height: 44px; }
}
.chat-back { display: none; }            /* shown only by the rule above */
.chat-layout.chat-open .chat-back { display: inline-flex; }

/* ==========================================================================
   Announcements cards
   ========================================================================== */
@media (max-width: 768px) {
  .ann-card { overflow-wrap: anywhere; }
  .ann-card .ann-title-row { flex-wrap: wrap; }
  .ann-card .ann-meta-row { flex-wrap: wrap; }
  .ann-card .ann-text { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Modals -> bottom sheets
   ========================================================================== */
@media (max-width: 768px) {

  .modal-overlay {
    align-items: flex-end;        /* sheet sticks to the bottom */
    padding: 0;
  }

  .modal-box {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    max-height: 92dvh;
    margin: 0;
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-box > * {
    flex: 0 0 auto;
  }
  .modal-box .form-grid > *,
  .modal-box > div,
  .modal-box > form > div {
    max-width: 100%;
  }

  /* Cancel + Save always visible at the bottom */
  .modal-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #eceee9;
  }
  .modal-footer .btn,
  .modal-footer button { flex: 1; min-height: 46px; }
  .modal-box input,
  .modal-box select,
  .modal-box textarea { width: 100%; min-height: 44px; font-size: 16px; }

  .modal-box .check-group label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
  }
}

/* small phones: form rows and detail grids become 1 column */
@media (max-width: 480px) {
  .modal-box .form-grid,
  .modal-box .detail-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ==========================================================================
   Part 3 - Alerts, bell dropdown, Wellness Check-ins, Aid tables
   --------------------------------------------------------------------------
   Adapted to the real class names used in this project:

     .alert-item / .alert-body / .alert-actions     (alerts.php, dashboards)
     .notif-panel / .notif-body-scroll              bell dropdown (sidebar.php)
     .stats-grid > :last-child:nth-child(odd)       summary cards
     .wellness-chart-grid > div                     the 3 charts
     .section-header + .segmented > .tab-btn        Mood analytics + Aid tabs
     .section-header .req-filter-bar                Residents filters
     table.table-cards td.is-empty                  optional "—" hiding
   ========================================================================== */

/* ---------- Summary cards: 2 + 1 wide (odd totals) ---------- */
@media (max-width: 900px) {
  .stats-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Alerts page + dashboard alert rows ---------- */
@media (max-width: 768px) {

  .alert-item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .alert-item .alert-body {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* status pill on the left, round buttons on the right, all tappable */
  .alert-item .alert-actions {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .alert-item .alert-actions .status,
  .alert-item .alert-actions .tag { margin-right: auto; }
  .alert-item .alert-actions button,
  .alert-item .alert-actions a {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
}

/* ---------- Bell notification dropdown ---------- */
@media (max-width: 768px) {

  .notif-panel {
    position: fixed;
    top: calc(var(--topbar-h) + 6px);
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    z-index: 1100;
  }
  .notif-body-scroll {
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .notif-panel button { min-width: 40px; min-height: 40px; }
}

/* ---------- Card headers with controls (Mood Analytics, Residents) ---------- */
@media (max-width: 768px) {

  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Daily | Weekly | Monthly and the Aid tabs: equal-width segments */
  .tab-bar.segmented { display: flex; width: 100%; }
  .tab-bar.segmented .tab-btn { flex: 1; text-align: center; min-height: 40px; }
}

/* ---------- Wellness: charts one per row ---------- */
@media (max-width: 900px) {

  .wellness-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Chart.js needs a box with a real height + maintainAspectRatio:false */
  .wellness-chart-grid > div {
    position: relative;
    width: 100%;
    height: 260px;
  }
  .wellness-chart-grid > div canvas { max-width: 100%; }
}

/* ---------- Wellness: breathing room around the Residents card ---------- */
@media (max-width: 900px) {
  .page > .section-card + .section-card {
    margin-top: 20px;
  }
}

/* ---------- Residents filters: search on top, 2 per row below ---------- */
@media (max-width: 768px) {

  .section-header .req-filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .section-header .req-filter-bar .req-search-wrap,
  .section-header .req-filter-bar .search-field { grid-column: 1 / -1; }

  .section-header .req-filter-bar input,
  .section-header .req-filter-bar select {
    width: 100% !important;
    min-height: 44px;
    font-size: 16px;            /* no iPhone zoom on tap */
  }
}

/* ---------- Tables (Residents, Aid Distribution) ---------- */
@media (max-width: 768px) {

  /* hide rows/cells that only say "—" so the cards stay short */
  table.table-cards td.is-empty { display: none; }

  /* Feedback / Status cells contain several pills + text + buttons */
  table.table-cards td[data-label="Feedback"],
  table.table-cards td[data-label="Status"] { align-items: flex-start; }
  table.table-cards td[data-label="Feedback"] > *,
  table.table-cards td[data-label="Status"] > * { text-align: right; }

  /* descriptions can wrap to several lines inside a card */
  table.table-cards td[data-label="Description"] {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* dates that were squeezed now sit on one line */
  table.table-cards td[data-label="Date"],
  table.table-cards td[data-label="Last Check-in"] { white-space: normal; }
}