/* ============================================================
   PrescriberNow — shared mobile-first polish layer
   Loaded by all 4 dashboards (admin, provider, patient, pharmacy)
   AFTER their inline <style> blocks so these rules win specificity.

   Scope: Phone-only fixes for the PWA install (iPhone 14 / 390px,
   Pixel 7 / 412px, small Android 360px). All rules are inside a
   @media (max-width:640px) block so desktop is untouched.

   Notes on use of !important:
     The inline <style> blocks already use !important heavily for
     their polish layers, so mobile overrides must match that
     specificity to take effect.
   ============================================================ */

@media (max-width: 640px) {

  /* -------------------------------------------------------
     1. SAFE-AREA / VIEWPORT
     - Honour iOS notch & home-indicator
     - Body padding-bottom must clear the fixed bottom tabbar
       PLUS the iOS home indicator
     ------------------------------------------------------- */
  html, body {
    -webkit-text-size-adjust: 100% !important;
  }
  body {
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }

  /* -------------------------------------------------------
     2. TOPBAR — keep slim, honour status-bar / notch.
     Admin/provider/pharmacy/patient all use .topbar.
     ------------------------------------------------------- */
  .topbar {
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px 14px !important;
    gap: 10px !important;
    /* Make room for the sidebar burger button on the left */
    padding-left: 60px !important;
  }
  .topbar .hdr-logo { height: 28px !important; }
  .topbar .hdr-title,
  .topbar h1 {
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
    line-height: 1.1 !important;
  }
  .topbar .hdr-title small {
    font-size: 11.5px !important;
    margin-top: 1px !important;
  }
  .topbar .hdr-actions { gap: 6px !important; flex-shrink: 0; }
  .topbar .hdr-btn {
    padding: 8px 10px !important;
    font-size: 12px !important;
    min-height: 36px;
  }
  .topbar .hdr-menu {
    width: 40px !important;
    height: 40px !important;
  }

  /* Sidebar burger — give it a real 44x44 target and align with topbar */
  .pn-sb-burger {
    top: calc(env(safe-area-inset-top) + 8px) !important;
    left: 10px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 20px !important;
  }

  /* -------------------------------------------------------
     3. MAIN — tighter side gutters on phones
     ------------------------------------------------------- */
  main {
    padding: 14px 12px 30px !important;
    max-width: 100% !important;
  }

  /* -------------------------------------------------------
     4. ADMIN tab strip (.tabbar-top) — pin under the topbar
     and don't let it cut into the page below.
     ------------------------------------------------------- */
  .tabbar-top {
    top: 56px !important;
    padding: 0 4px !important;
  }
  .tabbar-top .tab-btn {
    padding: 12px 12px !important;
    font-size: 13px !important;
    min-height: 44px;
  }

  /* -------------------------------------------------------
     5. KPI grid — 2-up on phones, never 4-up
     ------------------------------------------------------- */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
  }
  .kpi-card .value,
  .kpi b {
    font-size: 24px !important;
  }
  .kpi-card .label,
  .kpi span {
    font-size: 10.5px !important;
  }

  /* -------------------------------------------------------
     6. SECTION TITLES — smaller on phone, no negative margins
     ------------------------------------------------------- */
  .section-title,
  h2.section-title,
  h2 {
    font-size: 22px !important;
    margin: 14px 4px 8px !important;
    line-height: 1.2 !important;
  }
  .section-title small { font-size: 12px !important; }

  /* -------------------------------------------------------
     7. TABLES — force horizontal scroll wrapper behaviour
     even if the markup forgot the .table-scroll class.
     Also bump cell padding down for thumbprint density.
     ------------------------------------------------------- */
  .card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* visual cue that there is more to scroll */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
      linear-gradient(to right, rgba(255,255,255,0), #fff 70%) right center,
      radial-gradient(at left, rgba(15,30,61,.08), transparent 70%) left center,
      radial-gradient(at right, rgba(15,30,61,.08), transparent 70%) right center;
    background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  table { font-size: 13px !important; }
  table thead th { padding: 10px 10px !important; font-size: 10.5px !important; }
  table tbody td { padding: 11px 10px !important; font-size: 13px !important; }

  /* -------------------------------------------------------
     8. MODALS — full-screen sheet on phones (iOS / Android)
     ------------------------------------------------------- */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 16px 16px 0 0 !important;
    /* Honour iOS home indicator */
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .modal-head { padding: 16px 16px 12px !important; }
  .modal-head h3 { font-size: 18px !important; }
  .modal-head .close {
    min-width: 44px;
    min-height: 44px;
    margin: -10px -10px -10px 0;
  }
  .modal-body { padding: 14px 16px !important; }
  .modal-foot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal-foot .btn { width: 100% !important; min-height: 44px !important; }

  /* -------------------------------------------------------
     9. BUTTONS — Apple's 44x44 minimum tap target
     ------------------------------------------------------- */
  .btn,
  button.btn,
  .hdr-btn,
  .chip {
    min-height: 44px !important;
  }
  .btn-sm { min-height: 36px !important; }

  /* Add finger-fat-finger margin between adjacent buttons
     where the layout doesn't already provide gap */
  .action-row { gap: 10px !important; }
  .action-row .btn { flex: 1 1 calc(50% - 5px) !important; }

  /* -------------------------------------------------------
     10. FORMS — never multi-column on phone, 16px to defeat
     iOS auto-zoom on focus.
     ------------------------------------------------------- */
  input, select, textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .search-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .search-bar input,
  .search-bar select { width: 100% !important; }
  /* Inline filter inputs declared with style="flex:1;min-width:160px" */
  [id^="audit"][id$="Filter"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* -------------------------------------------------------
     11. CHARTS — let them resize to the viewport
     ------------------------------------------------------- */
  .chart-card {
    height: auto !important;
    min-height: 280px !important;
  }
  .chart-card canvas {
    max-height: 240px !important;
    width: 100% !important;
    height: auto !important;
  }
  .chart-grid { gap: 12px !important; }

  /* -------------------------------------------------------
     12. WELCOME / HERO CARDS — cut padding so they don't
     dominate the fold on a 6.1" phone.
     ------------------------------------------------------- */
  .welcome-card,
  .dash-hero,
  .hero-tile {
    padding: 18px 16px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }
  .welcome-card h1,
  .dash-hero h1,
  .hero-tile h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
  .welcome-card p,
  .dash-hero p,
  .hero-tile p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  /* -------------------------------------------------------
     13. BOTTOM TABBAR — already fixed; just guarantee
     iOS Safari URL-bar safe-area on patient/provider/pharmacy.
     ------------------------------------------------------- */
  .tabbar {
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom)) !important;
  }
  .tab-btn {
    min-height: 48px !important;
    padding: 6px 2px !important;
  }
  .tab-btn b { font-size: 17px !important; }

  /* Body must clear the fixed tabbar + iOS indicator */
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
  /* Admin has no .tabbar but does have padding:24px 22px 80px on main */
  body:not(:has(.tabbar)) {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  /* -------------------------------------------------------
     14. DETAIL ROWS — let values use full width and not get
     cropped on narrow screens.
     ------------------------------------------------------- */
  .detail-row { font-size: 13px !important; padding: 8px 0 !important; }
  .detail-row .value,
  .detail-row span:last-child {
    max-width: 60% !important;
    word-break: break-word !important;
  }

  /* -------------------------------------------------------
     15. CARDS — kill any rogue fixed widths
     ------------------------------------------------------- */
  .card,
  .order-card,
  .rx-card,
  .profile-card,
  .profile-section,
  .empty-state,
  .kpi-card {
    max-width: 100% !important;
  }

  /* Profile card portraits: tighten padding */
  .profile-card { padding: 18px 16px !important; }
  .profile-section { padding: 14px 16px !important; }

  /* -------------------------------------------------------
     16. TOAST — keep above the bottom tabbar
     ------------------------------------------------------- */
  .toast {
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 32px);
    text-align: center;
    font-size: 13.5px !important;
  }
}

/* ============================================================
   Very-narrow phones (e.g. iPhone SE / 320–360px)
   ============================================================ */
@media (max-width: 380px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .topbar .hdr-btn {
    /* hide the "Sign out" text — sidebar already has logout */
    font-size: 0 !important;
    padding: 8px !important;
    min-width: 36px;
  }
  .topbar .hdr-btn#reloadBtn { font-size: 16px !important; }
}