/* ══════════════════════════════════════════════════════════════════════════
   AONE ERP — Mobile-First Responsive Overrides
   Targets inline-styled pages that lack @media queries.
   Uses !important to override inline styles (necessary for React inline CSS).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Safe Area: handled per-component (MobileHeader, MobileBottomNav, Arey input) ───
   Do NOT add safe-area to body — the fixed header already applies
   padding-top: env(safe-area-inset-top) to itself, and the content area
   applies calc(56px + env(safe-area-inset-top)) as padding-top.
   Adding it here too creates a double offset (~44px dead zone on iPhone).
   Landscape left/right insets are handled by the sidebar + content flex layout. ── */

/* ── Dynamic Viewport Height (iOS URL bar fix) ──────────────────────────── */
/* 100vh = max viewport (URL bar hidden). 100dvh tracks the actual visible height.
   Without this, content is clipped when Safari's URL bar is visible. */
#root {
  height: 100vh;   /* fallback for browsers without dvh */
  height: 100dvh;  /* iOS 15.4+, Chrome 108+ — matches visible viewport */
}
.aone-root-wrap {
  height: 100vh;
  height: 100dvh;
}

/* ── Phone (<768px) ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Force all grid layouts to stack on mobile */
  div[style*="gridTemplateColumns"][style*="repeat(4"],
  div[style*="gridTemplateColumns"][style*="repeat(5"],
  div[style*="gridTemplateColumns"][style*="repeat(6"],
  div[style*="grid-template-columns"][style*="repeat(4"],
  div[style*="grid-template-columns"][style*="repeat(5"],
  div[style*="grid-template-columns"][style*="repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3-column grids become 1 column on narrow phones */
  div[style*="gridTemplateColumns: repeat(3"],
  div[style*="gridTemplateColumns:repeat(3"],
  div[style*="grid-template-columns: repeat(3"],
  div[style*="gridTemplateColumns"][style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Tables: horizontal scroll with momentum */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
  table thead, table tbody, table tr {
    display: table !important;
    width: 100% !important;
  }
  /* Table cells: larger touch targets */
  td, th {
    padding: 10px 8px !important;
    font-size: 12px !important;
    min-height: 44px !important;
  }

  /* Modals: never exceed viewport */
  div[style*="position: fixed"][style*="background"],
  div[style*="position:fixed"][style*="background"] {
    max-width: 100vw !important;
  }
  /* Modal inner content boxes */
  div[style*="width: 420"],
  div[style*="width:420"],
  div[style*="width: 480"],
  div[style*="width:480"],
  div[style*="width: 500"],
  div[style*="width:500"],
  div[style*="width: 600"],
  div[style*="width:600"],
  div[style*="width: 700"],
  div[style*="width:700"] {
    width: 92vw !important;
    max-width: 92vw !important;
  }

  /* Buttons: minimum 44px touch target */
  button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Input fields: comfortable touch size */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* Page content padding */
  div[style*="padding: 28px 32px"],
  div[style*="padding:28px 32px"],
  div[style*="padding: 24px 28px"],
  div[style*="padding:24px 28px"],
  div[style*="padding: 32px"],
  div[style*="padding:32px"] {
    padding: 16px !important;
  }

  /* Hide elements not needed on mobile */
  .desktop-only {
    display: none !important;
  }
}

/* ── Small phones (iPhone SE, 375px) ─────────────────────────────────────── */
@media (max-width: 400px) {
  /* All multi-column grids → single column */
  div[style*="gridTemplateColumns"][style*="repeat(2"],
  div[style*="gridTemplateColumns"][style*="1fr 1fr"],
  div[style*="grid-template-columns"][style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Even tighter padding */
  div[style*="padding: 16px"],
  div[style*="padding:16px"] {
    padding: 12px !important;
  }

  td, th {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
}

/* ── Tablet (768px - 1024px) ─────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 5-6 column grids → 3 columns on tablet */
  div[style*="gridTemplateColumns"][style*="repeat(5"],
  div[style*="gridTemplateColumns"][style*="repeat(6"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Modals: cap at 80% viewport */
  div[style*="width: 700"],
  div[style*="width:700"],
  div[style*="width: 600"],
  div[style*="width:600"] {
    width: 80vw !important;
    max-width: 80vw !important;
  }

  .aone-native-app {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .aone-native-app .aone-sidebar-mobile,
  .aone-native-app .aone-split-detail {
    max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
  }
}

/* ── iPad Pro landscape (1024px - 1366px) ────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1366px) {
  /* 6-column grids → 4 columns */
  div[style*="gridTemplateColumns"][style*="repeat(6"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ── Touch device enhancements ───────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Larger click targets for touch */
  a, button, [role="button"], [onclick] {
    min-height: 44px;
    cursor: pointer;
  }

  /* Smooth scrolling */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent text selection on UI elements */
  button, [role="button"], nav, header {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ── iOS-specific fixes ──────────────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  /* Fix iOS rubber-banding on fixed elements */
  body {
    overscroll-behavior: none;
  }

  /* Fix iOS input zoom — minimum 16px prevents Safari auto-zoom on focus */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Modals on iOS: enable momentum scroll inside fixed overlays */
  [role="dialog"],
  .aone-modal-content,
  .aone-drawer,
  .aone-right-panel,
  .aone-detail-panel {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

/* ── Scroll container quality ────────────────────────────────────────────── */
/* Prevent scroll "bleed" where a scrollable child causes parent to bounce.
 *
 * Contain the axis each element actually scrolls. .aone-table-wrap and
 * .aone-filter-row are horizontal scrollers (overflow-x:auto) — and since
 * overflow-y computes to `auto` whenever the other axis isn't `visible`, they
 * are silently vertical scroll containers too, usually with nothing to scroll.
 * Naming the vertical axis there described a containment that was never the
 * intent; the horizontal one is what these actually need.
 *
 * Note this file is loaded unconditionally from index.html, so anything left
 * outside a media query applies on desktop as well as mobile.
 *
 * Behaviour-neutral in testing: measured on a real page with the wrapper given
 * a vertical scroll range and parked at its limit, `contain` and `auto` both
 * left the page unscrolled — Chrome's scroll latching decides that case, not
 * overscroll-behavior. Changed for intent and correctness, not as a fix for
 * any observed scrolling bug.
 */
.aone-mobile-scroll {
  overscroll-behavior-y: contain;   /* a genuine vertical scroller */
}
.aone-table-wrap,
.aone-filter-row {
  overscroll-behavior-x: contain;   /* the axis these actually scroll */
}

/* ── Tap highlight: remove default grey flash, keep accessibility ─────────── */
@media (hover: none) and (pointer: coarse) {
  a, button, [role="button"], [tabindex] {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── Dark mode support for system-level ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  nav, header, footer, .mobile-nav, [style*="position: fixed"] {
    display: none !important;
  }
  body {
    padding: 0 !important;
  }
}