/* ==========================================
   PWA Responsive CSS — iPad Optimizations
   ========================================== */

/* --- General Touch & PWA --- */
* {
  -webkit-tap-highlight-color: rgba(246, 134, 48, 0.15);
  touch-action: manipulation;
}

html {
  /* Safe area insets for devices with notch/home indicator */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
}

/* Prevent iOS zoom on input focus — enforce 16px minimum */
input, textarea, select {
  font-size: 16px !important;
}

/* Touch-friendly scrolling everywhere */
.panel-body,
.records-list,
.encounter-list,
.formulary-table,
.provider-table,
.schedule-list,
.rx-presets-grid,
.presets-grid {
  -webkit-overflow-scrolling: touch;
}

/* Active state feedback (replaces hover on touch) */
.touch-active {
  opacity: 0.7 !important;
  transition: opacity 0.1s ease;
}

button:active,
.btn:active,
.btn-toggle:active,
.nav-btn:active,
.record-card:active,
.patient-header:active {
  opacity: 0.7;
}

/* Remove hover effects that cause sticky states on touch */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .btn-toggle:hover,
  .nav-btn:hover,
  .record-card:hover,
  .patient-header:hover {
    background-color: inherit;
    color: inherit;
  }
  .nav-btn.active:hover {
    background-color: var(--primary);
    color: #fff;
  }
  .btn-primary:hover {
    background-color: var(--primary);
  }
  .btn-secondary:hover {
    background-color: var(--gray-100);
  }
}

/* --- Topbar --- */
.topbar {
  padding-top: env(safe-area-inset-top);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.main {
  padding-top: 56px; /* Offset for fixed topbar */
}

/* Standalone PWA mode adjustments */
.pwa-standalone .topbar {
  padding-top: calc(env(safe-area-inset-top) + 4px);
}

.pwa-standalone .main {
  padding-top: calc(56px + env(safe-area-inset-top) + 4px);
}

/* Bottom safe area for home indicator */
.tab-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

/* --- iPad Portrait (768px) --- */
@media screen and (max-width: 1024px) and (min-width: 600px) {
  /* Topbar */
  .topbar {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }
  .topbar-title {
    font-size: 15px;
  }
  .nav-btn {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn-new {
    font-size: 13px;
    padding: 8px 14px;
    min-height: 44px;
  }

  /* Records screen */
  .stats-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .stat-card {
    flex: 1 1 45%;
    min-width: 120px;
  }

  /* Search */
  .search-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .search-input {
    flex: 1 1 100%;
    font-size: 16px !important;
    min-height: 44px;
  }
  .filter-select {
    min-height: 44px;
    font-size: 16px !important;
  }

  /* Record cards: single column portrait */
  .records-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .record-card {
    padding: 14px;
    min-height: 60px;
  }
  .rc-name {
    font-size: 15px;
  }

  /* Encounter Panel — FULL SCREEN on iPad */
  .encounter-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 200 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .encounter-panel.open {
    transform: translateY(0) !important;
  }

  /* Panel header */
  .panel-header {
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top));
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--gray-50, #f9fafb);
    border-bottom: 1px solid var(--border, #e5e7eb);
  }
  .panel-close-btn {
    width: 44px;
    height: 44px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-200, #e5e7eb);
  }

  /* Panel tabs — horizontal scroll with large touch targets */
  .panel-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .panel-tabs::-webkit-scrollbar {
    display: none;
  }
  .panel-tab {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Panel body fills remaining space */
  .panel-body {
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }

  /* Form sections */
  .form-section {
    margin-bottom: 16px;
  }
  .form-columns-3 {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .form-col {
    width: 100%;
  }

  /* Toggle buttons — minimum 44px touch target */
  .btn-toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    font-size: 14px;
  }
  .btn-toggle-group {
    gap: 6px;
    flex-wrap: wrap;
  }

  /* Temperature buttons */
  .temp-range-btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
  }
  .temp-range-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Weight/BP range buttons */
  .weight-range-btn,
  .bp-range-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    font-size: 13px;
  }
  .weight-range-row,
  .bp-range-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Form inputs — larger for touch */
  .form-group label {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .form-group input,
  .form-group textarea,
  .form-group select {
    min-height: 44px;
    padding: 10px 12px;
  }
  textarea {
    min-height: 60px;
  }

  /* Quick fill buttons */
  .quick-fill-btn {
    min-height: 36px;
    padding: 6px 12px;
  }

  /* Complaint buttons */
  .complaint-btn {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 13px;
  }
  .complaint-grid {
    gap: 6px;
  }

  /* Lab grid */
  .lab-grid {
    gap: 8px;
  }
  .lab-card {
    padding: 12px;
  }
  .lab-card .btn-toggle {
    min-height: 44px;
    font-size: 13px;
  }
  .lab-card input {
    min-height: 44px;
  }

  /* Urinalysis */
  .ua-grid {
    gap: 8px;
  }
  .ua-row {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
  }
  .ua-row .btn-toggle {
    min-height: 40px;
    min-width: 40px;
    padding: 6px 10px;
    font-size: 12px;
  }
  .ua-collapse-btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }

  /* Dx Presets — 3 columns portrait */
  .presets-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
  }
  .dx-preset-btn {
    min-height: 44px;
    padding: 10px 8px;
    font-size: 12px;
  }
  .dx-sort-btn {
    min-height: 44px;
    padding: 8px 16px;
  }

  /* Rx Presets — 2 columns */
  .rx-presets-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .rx-preset-btn {
    min-height: 50px;
    padding: 10px 12px;
    font-size: 13px;
  }

  /* Clinical tab — medication builder */
  .med-line {
    flex-wrap: wrap;
    gap: 8px;
  }
  .med-line > * {
    flex: 1 1 100%;
    min-height: 44px;
  }
  .med-drug-select,
  .med-dose-input,
  .med-freq-select,
  .med-dur-select {
    width: 100% !important;
    min-height: 44px;
  }
  .btn-add-med {
    min-height: 44px;
    font-size: 14px;
  }

  /* Imaging/Surgery grid — stack vertically */
  .imaging-surgery-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Referral and Provider grids */
  .referral-btn-grid,
  .provider-grid,
  .procedure-grid {
    gap: 6px;
  }
  .referral-btn-grid button,
  .provider-grid button,
  .procedure-grid button {
    min-height: 44px;
    padding: 8px 12px;
  }

  /* Tab navigation buttons */
  .tab-nav {
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .tab-nav .btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }

  /* Analytics */
  .analytics-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  .analytics-controls .form-group {
    flex: 1 1 45%;
    min-width: 120px;
  }
  .analytics-controls .btn {
    min-height: 44px;
  }
  .analytics-summary {
    flex-wrap: wrap;
  }
  .chart-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Dashboard */
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .dash-card {
    min-height: auto;
  }

  /* Modals */
  .modal {
    max-width: 90vw !important;
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal .btn {
    min-height: 44px;
    padding: 10px 20px;
  }
  .modal input,
  .modal select,
  .modal textarea {
    min-height: 44px;
    font-size: 16px !important;
  }

  /* Advanced filters */
  .filter-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .filter-row .form-group {
    flex: 1 1 45%;
  }
  .filter-row .btn {
    min-height: 44px;
  }

  /* Week calendar */
  .week-nav {
    flex-wrap: wrap;
    gap: 8px;
  }
  .week-nav .btn {
    min-height: 44px;
  }
  .week-calendar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Options/Formulary tables */
  .formulary-table,
  .provider-table {
    font-size: 13px;
  }
  .formulary-table td,
  .formulary-table th,
  .provider-table td,
  .provider-table th {
    padding: 10px 8px;
  }
  .formulary-table .btn,
  .provider-table .btn {
    min-height: 36px;
    padding: 6px 10px;
  }
}

/* --- iPad Landscape & iPad Pro (1024px+) --- */
@media screen and (min-width: 1025px) and (max-width: 1400px) and (hover: none) {
  /* Encounter panel still full screen on touch devices */
  .encounter-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 200 !important;
    border-radius: 0 !important;
  }
  .encounter-panel.open {
    transform: translateY(0) !important;
  }

  .panel-header {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  .panel-close-btn {
    width: 44px;
    height: 44px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-200, #e5e7eb);
  }

  /* Touch targets */
  .btn-toggle,
  .nav-btn,
  .panel-tab,
  .temp-range-btn,
  .weight-range-btn,
  .bp-range-btn,
  .complaint-btn,
  .dx-preset-btn,
  .rx-preset-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Form columns — use 3 columns in landscape */
  .form-columns-3 {
    flex-direction: row;
    gap: 16px;
  }
  .form-col {
    flex: 1;
  }

  /* Dx presets — 4 columns landscape */
  .presets-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Rx presets — 3 columns landscape */
  .rx-presets-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Med line — horizontal in landscape */
  .med-line {
    flex-wrap: nowrap;
  }
  .med-line > * {
    flex: 1 1 auto;
  }

  /* Records — 2 columns */
  .records-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .patient-group {
    grid-column: 1 / -1;
  }

  /* Stats — single row */
  .stat-card {
    flex: 1;
  }

  /* Analytics charts — 2 columns */
  .chart-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Dashboard — full row */
  .dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Inputs */
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* --- Small tablets / Large phones (under 600px) --- */
@media screen and (max-width: 599px) {
  .topbar {
    padding: 6px 8px;
    padding-top: calc(6px + env(safe-area-inset-top));
    flex-wrap: wrap;
    gap: 4px;
  }
  .topbar-logo {
    width: 28px;
    height: 28px;
  }
  .topbar-title {
    font-size: 14px;
  }
  .nav-btns {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .nav-btns::-webkit-scrollbar {
    display: none;
  }
  .nav-btn {
    font-size: 11px;
    padding: 6px 8px;
    min-height: 44px;
    flex-shrink: 0;
  }
  .btn-new {
    font-size: 12px;
    padding: 8px 12px;
    min-height: 44px;
  }
  .sync-indicator {
    display: none;
  }
  .main {
    padding-top: 90px;
  }

  /* Encounter panel — full screen */
  .encounter-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 200 !important;
    border-radius: 0 !important;
  }
  .encounter-panel.open {
    transform: translateY(0) !important;
  }

  .panel-header {
    padding-top: calc(8px + env(safe-area-inset-top));
  }

  /* Form — single column always */
  .form-columns-3 {
    flex-direction: column;
  }
  .form-grid-4 {
    grid-template-columns: 1fr;
  }

  /* Presets — 2 columns */
  .presets-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rx-presets-grid {
    grid-template-columns: 1fr !important;
  }

  /* All touch targets 44px minimum */
  .btn-toggle,
  .nav-btn,
  .panel-tab,
  .btn,
  .temp-range-btn,
  .weight-range-btn,
  .bp-range-btn,
  .complaint-btn,
  .dx-preset-btn,
  .rx-preset-btn,
  .quick-fill-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Modal full width */
  .modal {
    max-width: 95vw !important;
    width: 95vw;
  }
}

/* ==========================================
   v2.2.0 SINGLE-PAGE ENCOUNTER FORM — iPad touch targets
   ========================================== */

/* iPad portrait + landscape: ensure all single-page form elements are touch-friendly */
@media screen and (max-width: 1400px) and (hover: none) and (pointer: coarse),
       screen and (max-width: 1024px) {

  /* Encounter cards: more breathing room */
  .encounter-card {
    padding: 14px 16px;
  }

  /* Pill buttons — Access to Care multi/single select */
  .pill-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Pain level buttons — 0-10 scale */
  .pain-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 10px;
    font-size: 14px;
  }

  /* Access to care: stack to single column on narrow screens */
  .access-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Inline yes/no rows in Access to Care */
  .inline-yn {
    flex-wrap: wrap;
    gap: 10px;
  }
  .inline-yn .access-q-sublabel {
    min-width: auto;
  }
  .inline-yn .btn-toggle-group {
    flex-wrap: nowrap;
  }
  .inline-yn .btn-toggle {
    min-height: 38px;
  }

  /* Access text inputs */
  .access-text-input {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px !important;
  }

  /* Numeric inputs (temp, weight) */
  .numeric-input {
    min-height: 44px;
    font-size: 16px !important;
    max-width: 140px;
  }

  /* Encounter row (Site, Date, MRN) — stack on narrow */
  .encounter-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Two/three col grids — stack on narrow */
  .two-col-grid,
  .three-col-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Bottom save row — wrap and full width on narrow */
  .bottom-save-row {
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .bottom-save-row .btn {
    min-height: 48px;
    flex: 1 1 45%;
    min-width: 140px;
  }

  /* Panel header save buttons */
  .panel-header-actions .btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .panel-header-actions .btn-sm {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* History textareas: comfortable on touch */
  .history-textarea {
    min-height: 44px !important;
  }
  .history-textarea:focus {
    min-height: 100px !important;
    height: 100px !important;
  }

  /* DOB row */
  .dob-unknown-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .dob-unknown-row #fDOB {
    min-height: 44px;
    flex: 1 1 100%;
  }
  .dob-unknown-label {
    font-size: 13px;
  }

  /* Collapsible imaging/surgery cards */
  .collapsible-card .collapsible-header {
    min-height: 44px;
    padding: 8px 0;
    font-size: 12px;
  }

  /* Single-page form padding */
  .panel-body.single-page-form {
    padding: 12px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* Imaging type buttons */
  .imaging-type-grid .complaint-btn {
    min-height: 40px;
    padding: 8px 12px;
  }

  /* Lab grid: 1 column on narrow inside encounter card */
  .encounter-card .lab-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .encounter-card .lab-row {
    padding: 10px 12px;
  }
  .encounter-card .lab-row .lab-name {
    font-size: 14px;
  }
  .lab-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Diagnosis presets inside encounter card */
  .encounter-card .presets-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .encounter-card .preset-btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
  }

  /* Rx presets inside encounter card */
  .encounter-card .rx-presets-grid {
    grid-template-columns: 1fr;
  }

  /* Complaint buttons inside encounter card */
  .encounter-card .complaint-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .encounter-card .complaint-btn {
    min-height: 44px;
    padding: 10px 8px;
    font-size: 13px;
  }
}

/* iPad landscape: 2-3 columns again */
@media screen and (min-width: 1025px) and (orientation: landscape) and (hover: none) {
  .access-grid {
    grid-template-columns: 1fr 1fr;
  }
  .two-col-grid {
    grid-template-columns: 1fr 1fr;
  }
  .three-col-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .encounter-row {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .encounter-card .lab-grid {
    grid-template-columns: 1fr 1fr;
  }
  .encounter-card .presets-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .encounter-card .rx-presets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .encounter-card .complaint-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Print styles (hide PWA chrome) --- */
@media print {
  .topbar,
  .panel-tabs,
  .tab-nav,
  .panel-close-btn,
  .panel-header-actions,
  .bottom-save-row {
    display: none !important;
  }
  .encounter-panel {
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }
  .panel-body {
    overflow: visible !important;
  }
}

/* === iPad / touch fixes for the Form Builder === */
/* The full-screen encounter panel hides via translateY(100%), but its base
   height is calc(100vh - 52px) — so translating it down by its own height left
   a ~52px Save-bar sliver pinned over every screen, covering the bottom of the
   Options/form-builder content. Force the panel to the full dynamic viewport
   height on touch devices so it hides completely when closed AND its Save
   buttons clear the iOS Safari toolbar when open. Pad scroll areas so the last
   controls are always reachable above the toolbar. */
@media screen and (max-width: 1024px) {
  .encounter-panel { height: 100vh !important; height: 100dvh !important; }
  .screen { padding-bottom: 96px !important; }
}
@media screen and (min-width: 1025px) and (max-width: 1400px) and (hover: none) {
  .encounter-panel { height: 100vh !important; height: 100dvh !important; }
  .screen { padding-bottom: 96px !important; }
}