/* ══════════════════════════════════════════════════════════════════════════
   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 Padding (iPhone notch, Dynamic Island, home indicator) ──── */
@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ── 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;
  }

  /* Flex containers: wrap on mobile */
  div[style*="display: flex"][style*="gap"] {
    flex-wrap: wrap !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;
  }
}

/* ── 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;
  }

  /* Remove hover effects that cause sticky states on touch */
  *:hover {
    transition-duration: 0s !important;
  }

  /* 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 */
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ── 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;
  }
}