/* Sub2API mobile adaptation patch injected by nginx. */
:root { --s2a-safe-bottom: env(safe-area-inset-bottom, 0px); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body, #app { min-width: 0 !important; max-width: 100vw !important; overflow-x: hidden !important; }
body { overscroll-behavior-y: none; touch-action: manipulation; }
* { box-sizing: border-box; }
button, a, input, select, textarea, [role="button"], .cursor-pointer {
  touch-action: manipulation;
}
button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"],
a[class*="btn"], .btn, .n-button, .el-button {
  min-height: 44px !important;
}
input, textarea, select, .n-input, .n-base-selection, .el-input, .el-select {
  min-height: 44px !important;
  font-size: 16px !important; /* avoid iOS zoom on focus */
}
pre, code { white-space: pre-wrap; word-break: break-word; }

/* Generic table / code / long-content overflow fixes */
table, .table, [class*="table"], .overflow-x-auto, .overflow-auto {
  max-width: 100% !important;
}
.overflow-x-auto, .overflow-auto, [class*="overflow-x-auto"], [class*="overflow-auto"] {
  -webkit-overflow-scrolling: touch !important;
}
main, section, article, form, .container, [class*="container"], [class*="max-w-"] {
  min-width: 0 !important;
}

@media (max-width: 768px) {
  body { font-size: 14px; }
  #app { width: 100vw !important; }

  /* Reduce desktop spacing on phones */
  .p-8, .md\:p-8, .lg\:p-8 { padding: 1rem !important; }
  .p-6, .md\:p-6, .lg\:p-6 { padding: .875rem !important; }
  .px-8, .md\:px-8, .lg\:px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-6, .md\:px-6, .lg\:px-6 { padding-left: .875rem !important; padding-right: .875rem !important; }
  .py-10, .lg\:py-10 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  .gap-16, .lg\:gap-16 { gap: 1.5rem !important; }
  .gap-6, .md\:gap-6 { gap: .875rem !important; }

  /* Force wide desktop grids into single-column layouts */
  [class*="grid-cols-"],
  .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4, .md\:grid-cols-5, .md\:grid-cols-6,
  .lg\:grid-cols-2, .lg\:grid-cols-3, .lg\:grid-cols-4, .lg\:grid-cols-6, .lg\:grid-cols-12,
  .xl\:grid-cols-2, .xl\:grid-cols-3, .xl\:grid-cols-4, .xl\:grid-cols-6, .xl\:grid-cols-8 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [class*="grid-cols-\["] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Header/action bars wrap instead of overflowing */
  header, nav, [class*="toolbar"], [class*="actions"], .items-center.justify-between,
  .sm\:flex-row, .md\:flex-row, .lg\:flex-row, .xl\:flex-row {
    min-width: 0 !important;
  }
  .flex.items-center.justify-between,
  .flex.items-end.justify-between,
  .sm\:justify-between, .md\:justify-between, .lg\:justify-between, .xl\:justify-between {
    flex-wrap: wrap !important;
    gap: .625rem !important;
  }

  /* Tables: keep content readable with horizontal scrolling instead of page overflow */
  table { display: block !important; overflow-x: auto !important; white-space: nowrap; }
  thead, tbody, tr { width: max-content; min-width: 100%; }
  th, td { padding: .625rem .75rem !important; }

  /* Modal/dialog/drawer: fit phone viewport */
  [role="dialog"], .modal, [class*="modal"], [class*="dialog"], [class*="drawer"] {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }
  [class*="max-w-2xl"], [class*="max-w-3xl"], [class*="max-w-4xl"], [class*="max-w-5xl"], [class*="max-w-6xl"], [class*="max-w-7xl"] {
    max-width: calc(100vw - 20px) !important;
  }

  /* Sidebars/navs should not leave invisible overlay hit areas */
  aside, [class*="sidebar"], [class*="Sidebar"] {
    max-width: min(86vw, 320px) !important;
  }
  .lg\:ml-64, .lg\:ml-\[72px\] { margin-left: 0 !important; }

  /* Forms and filters */
  form .flex, form [class*="grid"], .filter, [class*="filter"] {
    min-width: 0 !important;
  }
  form button, form [role="button"] { width: auto; }

  /* Toast/popover positions for safe area */
  [class*="toast"], [class*="popover"], .driver-popover {
    max-width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 480px) {
  body { font-size: 13px; }
  h1, .text-4xl, .text-5xl, .text-6xl { font-size: 1.5rem !important; line-height: 2rem !important; }
  h2, .text-3xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
  .text-2xl { font-size: 1.125rem !important; line-height: 1.625rem !important; }
  button, [role="button"], input, textarea, select { border-radius: .75rem; }
  .rounded-2xl, .rounded-3xl { border-radius: 1rem !important; }
  .shadow-xl, .shadow-2xl { box-shadow: 0 10px 24px rgba(15,23,42,.12) !important; }

  /* Make action button rows easy to tap */
  .flex-wrap > button, .flex-wrap > a, .flex-wrap > [role="button"] {
    flex: 1 1 auto;
  }
}