/* =====================================================================
   Castline POS — responsive layer (screen only; print/PDF untouched).
   Loaded AFTER the inline <style> blocks. Desktop (>=1024px) is unchanged.
   Breakpoints: phone <640 · tablet 640–1023 · desktop >=1024
   ===================================================================== */
@media screen {

/* ---------- Global safety (all sizes) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }
canvas { height: auto; }
input[type=date], input[type=month], input[type=time], input[type=datetime-local] { min-width: 0; max-width: 100%; }
select, input, textarea { max-width: 100%; }
@supports (height: 100dvh) {
  body { height: 100dvh; }
  .max-h-\[88vh\] { max-height: 88dvh !important; }
  .max-h-\[90vh\] { max-height: 90dvh !important; }
  .max-h-\[94vh\] { max-height: 94dvh !important; }
  .max-h-\[96vh\] { max-height: 96dvh !important; }
}

/* Auto-wrapped tables (added by responsive.js) */
.table-responsive { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* Mobile-only elements are hidden on desktop */
#mobile-menu-btn, #mobile-nav-backdrop, #pos-cart-fab { display: none; }

/* ---------- Tablet & phone: < 1024px ---------- */
@media (max-width: 1023.98px) {

  /* Header */
  body > header { flex-wrap: wrap; gap: .5rem; padding: .5rem .75rem !important;
    padding-top: calc(.5rem + env(safe-area-inset-top)) !important; }
  body > header > div:first-child { min-width: 0; flex: 1 1 auto; gap: .5rem; }
  body > header > div:first-child > * { margin-left: 0 !important; }
  body > header h1 { font-size: 1rem; min-width: 0; }
  body > header h1 > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-header-actions { flex: 1 1 100%; width: 100%; gap: .5rem; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .app-header-actions::-webkit-scrollbar { display: none; }
  .app-header-actions > * { flex: none; margin-left: 0 !important; white-space: nowrap; min-height: 36px; }
  .app-header-actions > .text-right { margin-left: auto !important; }
  #mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.5rem; height: 2.5rem; border-radius: .6rem; background: #1e293b; color: #e2e8f0;
    border: 1px solid #334155; font-size: 1.25rem; line-height: 1; }
  #mobile-menu-btn:active { background: #334155; }

  /* Sidebar becomes an off-canvas drawer */
  #app-sidebar { position: fixed !important; top: 0; bottom: 0; left: 0; z-index: 120 !important;
    width: min(18rem, 86vw) !important; min-width: 0 !important; flex: none !important;
    transform: translateX(-102%); transition: transform .22s ease; visibility: hidden;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    box-shadow: none; overscroll-behavior: contain; }
  #app-sidebar.mobile-open { transform: translateX(0); visibility: visible; box-shadow: 0 0 40px rgba(2,6,23,.6); }
  #app-sidebar .nav-item, #app-sidebar .sidebar-group-toggle { min-height: 44px; }
  #mobile-nav-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(2,6,23,.6);
    backdrop-filter: blur(2px); }
  body.mobile-nav-open #mobile-nav-backdrop { display: block; }
  body.mobile-nav-open { overflow: hidden; }
  #main-content { min-width: 0; }
  #main-content > main, #main-content > div { min-width: 0; }

  /* Page padding */
  .tab-view:not(#view-pos) { padding: .75rem !important; padding-bottom: 5rem !important; }
  .tab-view { min-width: 0; max-width: 100%; }
  .tab-view h2 { overflow-wrap: anywhere; }

  /* Touch targets */
  button, select, input:not([type=checkbox]):not([type=radio]), .nav-item { min-height: 40px; }
  input[type=checkbox], input[type=radio] { width: 1.1rem; height: 1.1rem; }
  table button, table select, table input:not([type=checkbox]):not([type=radio]) { min-height: 34px; }
  table th, table td { padding-left: .5rem; padding-right: .5rem; }

  /* Tables: scroll sideways inside their own container, never the page */
  .overflow-x-auto, .table-responsive { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

  /* Modals: scrollable overlay, centered when they fit, reachable when they don't */
  .fixed.inset-0:not(#auth-loading):not(#mobile-nav-backdrop) { overflow-y: auto; overscroll-behavior: contain;
    align-items: flex-start !important; padding: .5rem !important;
    padding-top: calc(.5rem + env(safe-area-inset-top)) !important;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom)) !important; }
  .fixed.inset-0:not(#auth-loading):not(#mobile-nav-backdrop) > div { margin-top: auto; margin-bottom: auto;
    max-width: 100%; }
  /* Invoice / receipt previews are fixed-size paper: scroll instead of clipping */
  .fixed.inset-0 :has(> .invoice-sheet), .fixed.inset-0 :has(> .a5-container) { overflow-x: auto; }
  .invoice-sheet, .a5-container { max-width: none; }

  /* ----- POS terminal: stack products over cart ----- */
  #view-pos { overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  #view-pos > div:first-child { flex: none !important; overflow: visible !important; height: auto !important; }
  #view-pos > div:first-child > div:first-child { flex: none !important; overflow: visible !important; padding: .75rem !important; }
  #view-pos #product-grid { padding-bottom: .5rem; }
  #view-pos #product-grid, #view-pos > div:first-child > div:first-child > .overflow-y-auto { max-height: none; }
  #view-pos > div:first-child > div:first-child > .overflow-y-auto { max-height: 62dvh; max-height: 62vh;
    -webkit-overflow-scrolling: touch; }
  @supports (height: 1dvh) { #view-pos > div:first-child > div:first-child > .overflow-y-auto { max-height: 62dvh; } }
  #view-pos aside { width: 100% !important; border-left: 0 !important; border-top: 1px solid #e2e8f0;
    flex: none !important; min-height: 0; box-shadow: none; scroll-margin-top: .5rem; }
  #view-pos #cart-items { flex: none !important; max-height: 50dvh; min-height: 4rem; overflow-y: auto; }
  #view-pos aside > div:last-child { position: sticky; bottom: 0; z-index: 5;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 14px rgba(15,23,42,.08); }
  #pos-cart-fab { position: fixed; right: .9rem; bottom: calc(5.2rem + env(safe-area-inset-bottom)); z-index: 60;
    align-items: center; gap: .4rem; padding: .7rem 1rem; border-radius: 999px; background: #0891b2; color: #fff;
    font-weight: 800; font-size: .8rem; box-shadow: 0 8px 20px rgba(8,145,178,.45); min-height: 44px; }
  #pos-cart-fab.show { display: inline-flex; }
  #checkout-panel > div { max-width: 100%; }
  .pos-pay-option { min-height: 48px; }
}

/* ---------- Phone: < 640px ---------- */
@media (max-width: 639.98px) {
  /* 16px inputs stop iOS Safari zooming the page on focus */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
  body > header .text-right { display: none; }               /* name shown in drawer/badge; saves room */
  .app-header-actions #logout-btn { margin-left: auto; }

  /* Fixed-column grids collapse so labels/inputs never squeeze */
  .grid.grid-cols-4, .grid.grid-cols-5, .grid.grid-cols-6, .grid.grid-cols-7, .grid.grid-cols-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.grid-cols-3 > .col-span-3 { grid-column: 1 / -1; }
  .grid.grid-cols-4 > [class*="col-span-3"], .grid.grid-cols-4 > [class*="col-span-4"],
  .grid.grid-cols-5 > [class*="col-span-"], .grid.grid-cols-6 > [class*="col-span-"] { grid-column: 1 / -1; }
  .grid > * { min-width: 0; }

  /* Action rows wrap rather than overflow */
  .tab-view .flex.justify-between.items-center, .tab-view .flex.items-center.justify-between { flex-wrap: wrap; gap: .5rem; }
  .tab-view .flex.space-x-2:not(.flex-nowrap), .tab-view .flex.space-x-3:not(.flex-nowrap) { flex-wrap: wrap; row-gap: .5rem; }

  /* Modals go near full-bleed with a full-width inner card */
  .fixed.inset-0:not(#auth-loading):not(#mobile-nav-backdrop) { padding: 0 !important; }
  .fixed.inset-0:not(#auth-loading):not(#mobile-nav-backdrop) > div { width: 100%; border-radius: .9rem; }
  #checkout-panel > div .px-4 { padding-left: .75rem; padding-right: .75rem; }

  /* Product cards & POS controls */
  #view-pos #cart-items { max-height: 45dvh; }
  #pos-cart-fab { right: .6rem; }
  canvas { max-height: 280px; }
}

/* ---------- Tablet landscape / small laptop tuning ---------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
  #view-pos #product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #view-pos #cart-items { max-height: 40dvh; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* narrow laptops: give the product list a bit more room */
  #view-pos aside { width: 28rem; }
}

/* Landscape phones: very little vertical room */
@media (max-height: 480px) and (orientation: landscape) {
  body > header { padding-top: .25rem !important; padding-bottom: .25rem !important; }
  #view-pos #cart-items { max-height: 55dvh; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #app-sidebar { transition: none; }
}
}