/* ================================================================
   SRN HIMS — Mobile Responsive Stylesheet
   Covers: tables, grids, forms, dashboards, cards, charts
   Breakpoints: xs(<480) sm(<640) md(<768) lg(<1024) xl(<1280)
   ================================================================ */

/* ── Global mobile base ──────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

img, canvas, video { max-width: 100%; height: auto; }

/* ── Touch targets — all buttons & links min 44px tall ──────── */
@media (max-width: 767px) {
  .btn, button, a.btn, input[type="submit"], input[type="button"] {
    min-height: 44px !important;
    touch-action: manipulation;
  }
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    min-height: 44px;
  }
}

/* ── App shell main padding ─────────────────────────────────── */
@media (max-width: 767px) {
  .app-shell__main {
    padding: 12px !important;
  }
  .mx-auto.max-w-7xl { padding-left: 12px !important; padding-right: 12px !important; }
  .mx-auto.max-w-5xl { padding-left: 12px !important; padding-right: 12px !important; }
  .mx-auto.max-w-4xl { padding-left: 12px !important; padding-right: 12px !important; }
  .mx-auto.max-w-3xl { padding-left: 12px !important; padding-right: 12px !important; }
  .mx-auto.max-w-2xl { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ── Page header: stacks on mobile ──────────────────────────── */
@media (max-width: 767px) {
  [data-page-header], .page-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
}

/* ── KPI / stat grids collapse ─────────────────────────────── */
@media (max-width: 639px) {
  .grid.grid-cols-4,
  .grid.lg\:grid-cols-4,
  .grid.md\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }
  .grid.grid-cols-5,
  .grid.lg\:grid-cols-5 {
    grid-template-columns: 1fr 1fr !important;
  }
  .grid.grid-cols-3,
  .grid.lg\:grid-cols-3,
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .grid.grid-cols-2,
  .grid.lg\:grid-cols-2,
  .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .grid.lg\:grid-cols-4,
  .grid.grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }
  .grid.lg\:grid-cols-5,
  .grid.grid-cols-5 {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .grid.lg\:grid-cols-3,
  .grid.grid-cols-3 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Tailwind responsive grid helpers ─────────────────────── */
@media (max-width: 639px) {
  .sm\:grid-cols-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 767px) {
  .md\:grid-cols-2 { grid-template-columns: 1fr !important; }
  .md\:grid-cols-3 { grid-template-columns: 1fr !important; }
  .md\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 1023px) {
  .lg\:grid-cols-2 { grid-template-columns: 1fr !important; }
  .lg\:grid-cols-3 { grid-template-columns: 1fr 1fr !important; }
}

/* ── Tables: horizontally scrollable on mobile ───────────────── */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  /* Wrap tables in scroll containers */
  table {
    min-width: 600px;
  }
  .table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 14px 14px;
  }
  /* Compact table cells on mobile */
  th, td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  /* Hide less important columns on mobile */
  .hide-mobile { display: none !important; }
  .show-mobile { display: table-cell !important; }
}

/* Wrap every overflow-x-auto container's table */
.overflow-x-auto table {
  min-width: 580px;
}

/* ── Forms: full-width on mobile ──────────────────────────── */
@media (max-width: 767px) {
  .grid.grid-cols-2.gap-4,
  .grid.grid-cols-3.gap-4,
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .col-span-2 { grid-column: span 1 !important; }
  /* Filter bars */
  form.flex.gap-2,
  form.flex.flex-wrap,
  .filter-bar,
  .flex.gap-3.mb-4,
  .flex.gap-2.mb-4,
  .flex.gap-4.mb-4 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  form.flex input, form.flex select, form.flex .flex-1 {
    min-width: 120px;
    flex: 1 1 120px;
  }
}

/* ── Cards: remove side margins, full width ──────────────── */
@media (max-width: 767px) {
  .card, .rounded-2xl, .rounded-xl {
    border-radius: 12px !important;
  }
  .card-body, .p-5, .p-6 {
    padding: 14px !important;
  }
  .card-header, .border-b.px-5, .border-b.px-6 {
    padding: 10px 14px !important;
  }
}

/* ── KPI gradient cards ────────────────────────────────────── */
@media (max-width: 479px) {
  /* Make gradient KPI cards slightly shorter on small phones */
  .bg-gradient-to-br.p-5 {
    padding: 14px !important;
  }
  .text-3xl { font-size: 1.5rem !important; }
  .text-4xl { font-size: 1.75rem !important; }
}

/* ── Topbar: responsive search ──────────────────────────────── */
@media (max-width: 767px) {
  .app-topbar {
    min-height: 56px !important;
    padding: 8px 12px !important;
  }
  .app-search {
    max-width: none !important;
  }
  .app-search__input {
    height: 40px !important;
    font-size: 14px !important;
  }
  /* Hide topbar hospital chip on small screens */
  .app-topbar .app-dropdown--hospital {
    display: none;
  }
}

/* ── Page header: horizontal → vertical ─────────────────────── */
@media (max-width: 767px) {
  /* Standard page_header partial */
  .flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: 10px;
  }
  .flex.items-center.justify-between > div:last-child {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .flex.items-center.justify-between > div:last-child .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}

/* ── Charts responsive height ────────────────────────────── */
@media (max-width: 767px) {
  canvas {
    max-height: 220px !important;
  }
  /* Doughnut/pie: allow natural size */
  canvas[width="220"], canvas[width="200"], canvas[width="190"] {
    max-width: 180px !important;
    max-height: 180px !important;
  }
}

/* ── BI Dashboard: filter bar ──────────────────────────────── */
@media (max-width: 767px) {
  /* BI dashboards: stack filter bar */
  .filter-bar,
  form.flex.items-end.gap-2,
  form.flex.flex-wrap.gap-2 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  form.flex.items-end.gap-2 input[type=date],
  form.flex.items-end.gap-2 select {
    width: 100% !important;
  }
  form.flex.items-end.gap-2 button {
    width: 100%;
  }
  /* Quick links: 2 cols on phone */
  .grid.grid-cols-5 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Alert strips ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .flex.flex-wrap.gap-3 .alert-pill,
  .flex.flex-wrap.gap-3 [class*="alert-"],
  .flex.gap-3 a[class*="rounded-xl"] {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
}

/* ── Nurse chart vitals grid ───────────────────────────────── */
@media (max-width: 767px) {
  .vital-grid,
  .grid.grid-cols-6 {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }
}
@media (max-width: 479px) {
  .vital-grid,
  .grid.grid-cols-6 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Doctor rounds / nurse form ──────────────────────────── */
@media (max-width: 767px) {
  .grid.grid-cols-2.gap-4 { grid-template-columns: 1fr !important; }
}

/* ── Ward occupancy cards ──────────────────────────────────── */
@media (max-width: 767px) {
  .grid.gap-3.md\:grid-cols-2.lg\:grid-cols-3,
  .grid.gap-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Package cards ─────────────────────────────────────────── */
@media (max-width: 1023px) {
  .grid.gap-4.lg\:grid-cols-3,
  .grid.gap-5.lg\:grid-cols-3 {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 639px) {
  .grid.gap-4.lg\:grid-cols-3,
  .grid.gap-5.lg\:grid-cols-3,
  .grid.gap-4.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ── IPD Admission show page ──────────────────────────────── */
@media (max-width: 767px) {
  .grid.grid-cols-3 { grid-template-columns: 1fr 1fr !important; }
  .grid.grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
}

/* ── Modal / drawer overlays ──────────────────────────────── */
@media (max-width: 767px) {
  .modal-content, [role="dialog"] .bg-white {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }
}

/* ── Sidebar navigation ───────────────────────────────────── */
@media (max-width: 1023px) {
  /* Hamburger is always visible on tablet/mobile */
  .app-icon-button[data-action*="toggleSidebar"] {
    display: inline-flex !important;
  }
  /* Mobile sidebar slide in */
  .app-sidebar {
    position: fixed !important;
    z-index: 50 !important;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  }
}

/* ── Pagination ─────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Kaminari pagination */
  nav.pagination, .pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: center !important;
  }
  .pagination a, .pagination span,
  nav[aria-label="Pagination"] a,
  nav[aria-label="Pagination"] span {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }
}

/* ── Discharge clearance list ──────────────────────────── */
@media (max-width: 767px) {
  .card.border-l-4 .card-body.flex-row {
    flex-direction: column !important;
    gap: 10px;
  }
  .card.border-l-4 .card-body form.flex {
    width: 100%;
  }
}

/* ── Staff attendance table ───────────────────────────── */
@media (max-width: 767px) {
  .grid.grid-cols-6 { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* ── Finance vouchers / GRN items table ──────────────── */
@media (max-width: 767px) {
  .grid.grid-cols-5.gap-2 { grid-template-columns: 1fr 1fr !important; }
  .grid.grid-cols-7.gap-2 { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* ── Tab navigation ──────────────────────────────────── */
@media (max-width: 767px) {
  .flex.gap-2.mb-4 {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* hide scrollbar */
    scrollbar-width: none;
  }
  .flex.gap-2.mb-4::-webkit-scrollbar { display: none; }
  .flex.gap-2.mb-4 .btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── Quick nav / action buttons ────────────────────────── */
@media (max-width: 639px) {
  .quick-links, .grid.grid-cols-5.gap-3 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── BI chart rows ────────────────────────────────────── */
@media (max-width: 1023px) {
  /* 2:1 chart row → stacked */
  .charts-row.cols-3-1,
  .grid.gap-5.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .lg\:col-span-2 { grid-column: span 1 !important; }
}

/* ── Revenue / OPD / IPD BI dashboards ────────────────── */
@media (max-width: 767px) {
  /* Filter bar in BI pages */
  .flex.flex-col.gap-4.lg\:flex-row {
    flex-direction: column !important;
  }
  .flex.flex-wrap.gap-2.items-end {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .flex.flex-wrap.gap-2.items-end input,
  .flex.flex-wrap.gap-2.items-end select,
  .flex.flex-wrap.gap-2.items-end button {
    width: 100% !important;
  }
}

/* ── Top services bar list ─────────────────────────────── */
@media (max-width: 767px) {
  .overflow-y-auto.max-h-64 { max-height: none !important; }
}

/* ── Approval / billing action buttons in tables ────────── */
@media (max-width: 767px) {
  td .flex.gap-1, td .flex.gap-2 {
    flex-wrap: wrap;
  }
  td .btn-xs {
    font-size: 10px !important;
    padding: 3px 7px !important;
  }
}

/* ── DaisyUI table overrides ─────────────────────────── */
@media (max-width: 767px) {
  .table { font-size: 12px !important; }
  .table th, .table td { padding: 8px 10px !important; }
  .table.table-sm th, .table.table-sm td { padding: 6px 8px !important; }
}

/* ── Typography scale on mobile ─────────────────────── */
@media (max-width: 767px) {
  h1, .text-2xl { font-size: 1.25rem !important; }
  h2, .text-xl { font-size: 1.1rem !important; }
  .text-lg { font-size: 1rem !important; }
}

/* ── Line clamp utility ─────────────────────────────── */
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Safe area padding (iPhone notch) ───────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .app-sidebar__bottom {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* ── Print styles ────────────────────────────────────── */
@media print {
  .app-sidebar, .app-topbar, .app-topbar__right,
  .filter-bar, form.flex, .btn, .pagination { display: none !important; }
  .app-shell { display: block !important; }
  .app-shell__main { padding: 0 !important; }
  table { font-size: 10pt; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; }
}

/* ── Floating mobile bottom action bar ────────────────── */
.mobile-action-bar {
  display: none;
}
@media (max-width: 767px) {
  .mobile-action-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e2e8f0;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    z-index: 50;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  }
  .mobile-action-bar .btn {
    flex: 1;
    justify-content: center;
  }
  /* Push content above the action bar */
  .has-mobile-action-bar .app-shell__main {
    padding-bottom: 80px !important;
  }
}

/* ── Responsive flex helpers ────────────────────────── */
@media (max-width: 767px) {
  .flex-col-mobile { flex-direction: column !important; }
  .full-width-mobile { width: 100% !important; }
  .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: block !important; }
}

/* ── Specific HIMS view fixes ────────────────────────── */

/* Billings index */
@media (max-width: 767px) {
  .billings-filter-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .billings-filter-row input { grid-column: span 2; }
}

/* Consultations EMR */
@media (max-width: 767px) {
  .emr-grid-2 { grid-template-columns: 1fr !important; }
  .emr-grid-3 { grid-template-columns: 1fr !important; }
}

/* Prescription items */
@media (max-width: 767px) {
  .rx-item-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px;
  }
}

/* Lab investigation table */
@media (max-width: 767px) {
  .lab-result-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Queue token display */
@media (max-width: 767px) {
  .queue-token-display {
    font-size: 3rem !important;
  }
}

/* Bed occupancy map */
@media (max-width: 767px) {
  .bed-map-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 479px) {
  .bed-map-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}