/* ── Shared mobile-responsive overrides ─────────────────────────────────────
   Include after styles-v5.css on any dashboard page.
   Add per-page <style> nth-child rules for table column labels.              */

@media (max-width: 640px) {

  /* ── Dashboard welcome banner ── */
  .dashboard-welcome {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 16px;
  }
  .dashboard-welcome > div:last-child { flex-wrap: wrap; }

  /* ── Metric cards — 3-col compact ── */
  .metric-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
  }
  .metric-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 10px 6px;
    min-width: 0;
  }
  .metric-card > span {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 8px;
  }
  .metric-card > span .icon { width: 14px; height: 14px; }
  .metric-card strong { font-size: 1.1rem; line-height: 1; }
  .metric-card small  { font-size: 0.6rem; line-height: 1.3; }

  /* 4-card metric grid — keep 2×2 */
  .metric-grid.metric-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Panel heading — filter/search below title ── */
  .panel-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .panel-heading input[type="search"] {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Inline flex filter rows inside panel-heading */
  .panel-heading > div[style*="flex"] {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
  }
  .panel-heading > div[style*="flex"] input,
  .panel-heading > div[style*="flex"] select {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ── Tables → card layout ──
     Each <tr> becomes a card. Column labels are added per-page using nth-child
     pseudo-elements in an inline <style> block on each PHP page.              */
  .responsive-table { overflow-x: visible; }
  .responsive-table table { display: block; min-width: 0 !important; width: 100% !important; }
  .responsive-table thead { display: none; }
  .responsive-table tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .responsive-table tr {
    display: block;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
  }
  .responsive-table td {
    display: flex;
    align-items: flex-start;
    padding: 3px 0;
    border: none;
    font-size: 0.83rem;
    line-height: 1.4;
    gap: 0;
  }
  /* Empty colspan rows (loading/no-data messages) */
  .responsive-table td[colspan] {
    display: block;
    text-align: center;
  }
  /* Label column — populated by each page's nth-child rules */
  .responsive-table td::before {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 80px;
    padding-top: 2px;
    flex-shrink: 0;
  }

  /* Action-only cells — hide the label slot, full-width centred button */
  .responsive-table td:last-child:not([colspan]) {
    display: block !important;
    padding-top: 8px;
  }
  .responsive-table td:last-child:not([colspan])::before {
    display: none !important;
  }
  .responsive-table td:last-child:not([colspan]) .button,
  .responsive-table td:last-child:not([colspan]) a.button {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* ── Form grids — stack to single column ── */
  .form-grid { grid-template-columns: 1fr !important; }

  /* ── Prescription medicine row — stack on mobile ── */
  .med-row,
  .med-header {
    grid-template-columns: 1fr !important;
    gap: 4px;
  }
  .med-header { display: none !important; }
  .med-row input { width: 100%; box-sizing: border-box; }

  /* ── Exception-form (availability page) ── */
  .exception-form {
    grid-template-columns: 1fr !important;
    align-items: stretch;
  }

  /* ── Patient/doctor detail panels ── */
  .compact-details { grid-template-columns: 1fr !important; }

  /* ── Prescription view — stack patient row ── */
  .rx-patient-row { flex-wrap: wrap; gap: 8px; }

  /* ── Admin page actions bar ── */
  .admin-page-actions { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 760px) {
  /* ── Two-column dashboard grid (doctor dashboard) ── */
  .dash-two-col { grid-template-columns: 1fr !important; }
}

/* ── Mobile sidebar: keep sign-out always visible ── */
@media (max-width: 1020px) {
  .dashboard-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }
  .dashboard-sidebar nav {
    flex: 1;
    min-height: 0; /* allows flex child to shrink below content height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-bottom {
    flex-shrink: 0;
    margin-top: 0;
  }
}