/**
 * Crimson Wave ERP — responsive containment (admin + portal + overlays)
 * Root-cause layout fixes: min-w-0, wrapping toolbars, scoped table scroll.
 * Do NOT use body { overflow-x: hidden } to hide overflow.
 */

/* ---------- App shell containment ---------- */
html {
  max-width: 100%;
}

#app,
#app > div,
body.ams-admin #app,
body.ams-portal #app {
  max-width: 100%;
  min-width: 0;
}

body.ams-admin #app .flex.min-w-0,
body.ams-portal #app .flex.min-w-0,
body.ams-admin main,
body.ams-portal main {
  min-width: 0;
  max-width: 100%;
}

/* Dashboard / metric cards / charts: kill intrinsic min-content width */
body.ams-admin main .grid > *,
body.ams-admin main [class*="grid-cols"] > *,
body.ams-portal main .grid > *,
body.ams-portal main [class*="grid-cols"] > * {
  min-width: 0;
  max-width: 100%;
}

body.ams-admin main .relative.overflow-hidden.rounded-xl.border.border-border.bg-card,
body.ams-admin main .rounded-xl.border.bg-card,
body.ams-admin main .rounded-2xl.border.bg-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

body.ams-admin main .recharts-responsive-container,
body.ams-admin main .recharts-wrapper,
body.ams-admin main svg.recharts-surface,
body.ams-portal main .recharts-responsive-container,
body.ams-portal main .recharts-wrapper {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ---------- Header: collapse / wrap export-search-profile ---------- */
body.ams-admin header.sticky,
body.ams-admin header.border-b,
body.ams-portal header.sticky,
body.ams-portal header.border-b {
  max-width: 100%;
  min-width: 0;
}

body.ams-admin header .flex,
body.ams-portal header .flex {
  min-width: 0;
  max-width: 100%;
}

body.ams-admin header .flex.items-center,
body.ams-portal header .flex.items-center {
  flex-wrap: wrap;
  row-gap: 8px;
}

@media (max-width: 1440px) {
  body.ams-admin header input[type="search"],
  body.ams-admin header input[placeholder*="Search" i],
  body.ams-portal header input[type="search"] {
    max-width: min(240px, 36vw);
    min-width: 0;
  }
}

@media (max-width: 1024px) {
  body.ams-admin header input[type="search"],
  body.ams-admin header input[placeholder*="Search" i],
  body.ams-portal header input[type="search"] {
    max-width: min(180px, 42vw);
    flex: 1 1 140px;
  }

  body.ams-admin header .flex.items-center.gap-2 > button,
  body.ams-admin header .flex.items-center.gap-3 > button,
  body.ams-admin header .flex.items-center.gap-2 > a,
  body.ams-admin header .flex.items-center.gap-3 > a {
    flex: 0 1 auto;
  }
}

@media (max-width: 767px) {
  body.ams-admin header.sticky,
  body.ams-admin header.border-b {
    margin-left: 8px;
    margin-right: 8px;
  }

  body.ams-admin header .flex.items-center,
  body.ams-portal header .flex.items-center {
    width: 100%;
  }

  body.ams-admin header input[type="search"],
  body.ams-admin header input[placeholder*="Search" i] {
    flex: 1 1 100%;
    max-width: 100%;
    order: 5;
  }
}

/* ---------- Forms / action bars stack on mobile ---------- */
@media (max-width: 767px) {
  body.ams-admin main form .grid,
  body.ams-admin main form .sm\:grid-cols-2,
  body.ams-admin main form .md\:grid-cols-2,
  body.ams-admin main form .lg\:grid-cols-2,
  body.ams-admin main form .lg\:grid-cols-3,
  body.ams-portal main form .grid,
  body.ams-portal main form .sm\:grid-cols-2,
  body.ams-portal main form .md\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ams-admin main .flex.items-center.justify-between,
  body.ams-admin main .flex.justify-between,
  body.ams-portal main .flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: 10px;
  }

  body.ams-admin main .flex.gap-2:not(aside *),
  body.ams-admin main .flex.gap-3:not(aside *),
  body.ams-portal main .flex.gap-2,
  body.ams-portal main .flex.gap-3 {
    flex-wrap: wrap;
  }
}

/* ---------- Tables: scoped horizontal scroll only ---------- */
body.ams-admin main .overflow-x-auto,
body.ams-portal main .overflow-x-auto,
body.ams-admin main .overflow-auto:has(table),
body.ams-portal main .overflow-auto:has(table),
.ams-workspace .overflow-x-auto,
.ams-frt-table-wrap,
.ams-pi-table-wrap,
.ams-acc-table-wrap,
.ams-exp-table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.ams-admin main .rounded-xl:has(> table),
body.ams-admin main .rounded-lg:has(> table),
body.ams-admin main .rounded-2xl:has(> table),
body.ams-admin main .border:has(> table),
body.ams-portal main .rounded-xl:has(> table),
body.ams-portal main .rounded-lg:has(> table) {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
}

body.ams-admin main table,
body.ams-portal main table,
.ams-workspace table {
  max-width: none; /* allow table wider than container; parent scrolls */
}

/* ---------- Long URLs / IDs / cron / code wrap ---------- */
body.ams-admin main code,
body.ams-admin main pre,
body.ams-admin main .font-mono,
body.ams-admin main [class*="font-mono"],
body.ams-portal main code,
body.ams-portal main .font-mono,
.ams-workspace code,
.ams-workspace pre,
.ams-workspace .font-mono {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}

body.ams-admin main a[href^="http"],
body.ams-admin main a[href^="https"],
body.ams-portal main a[href^="http"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- Dialogs stay in viewport ---------- */
[role="dialog"],
[data-radix-dialog-content],
.ams-modal .box {
  max-width: min(720px, calc(100vw - 24px));
  max-height: min(90vh, calc(100dvh - 24px));
  overflow: auto;
}

/* ---------- Overlay modules fill shell without page overflow ---------- */
.ams-workspace,
.ams-frt-root,
.ams-pi-root,
.ams-acc-root,
.ams-exp-root,
.ams-wa-root,
.ams-lc-root {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .ams-frt-toolbar,
  .ams-acc-nav,
  .ams-pi-toolbar,
  .ams-exp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
  }

  .ams-frt-filters,
  .ams-pi-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------- Module pages known to overflow ---------- */
body.ams-admin[data-ams-route*="customers"] main,
body.ams-admin[data-ams-route*="companies"] main,
body.ams-admin[data-ams-route*="containers"] main,
body.ams-admin[data-ams-route*="expense"] main,
body.ams-admin[data-ams-route*="employees"] main,
body.ams-admin[data-ams-route*="backup"] main,
body.ams-admin[data-ams-route*="whatsapp"] main,
body.ams-admin[data-ams-route*="freight"] main,
body.ams-admin[data-ams-route*="proforma"] main,
body.ams-admin[data-ams-route*="accounting"] main {
  min-width: 0;
  max-width: 100%;
}

/* ---------- Cross-device alignment (PC / laptop / tablet / phone) ---------- */

/* Safe area + chat FAB clearance so forms aren't covered */
body.ams-public,
body.ams-admin,
body.ams-portal {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

@media (max-width: 767px) {
  body.ams-public main,
  body.ams-public #app > div,
  body[class*="ams"] main {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  #ams-chat-toggle {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    inset-inline-end: 14px !important;
    width: 52px !important;
    height: 52px !important;
  }

  #ams-chat-panel,
  #ams-chat-chooser {
    inset-inline-end: 12px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(380px, calc(100vw - 24px)) !important;
  }
}

/* Auth / sign-in: stack cleanly, keep form usable on phone */
@media (max-width: 1023px) {
  body.ams-public [class*="grid"][class*="lg:grid-cols-2"],
  #app .lg\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  /* Hero CTAs: stack full-width for thumb targets */
  body.ams-public main a[href*="inquiry"],
  body.ams-public main a[href*="track"],
  body.ams-public main .flex.flex-wrap.gap-3 > a,
  body.ams-public main .flex.flex-wrap.gap-4 > a,
  body.ams-public main .flex.gap-3 > a.inline-flex,
  body.ams-public main .flex.gap-4 > a.inline-flex {
    min-height: 44px;
  }

  body.ams-public main .flex.flex-wrap.items-center.gap-3,
  body.ams-public main .flex.flex-wrap.items-center.gap-4 {
    flex-direction: column;
    align-items: stretch !important;
  }

  body.ams-public main .flex.flex-wrap.items-center.gap-3 > a,
  body.ams-public main .flex.flex-wrap.items-center.gap-4 > a,
  body.ams-public main .flex.flex-wrap.items-center.gap-3 > button,
  body.ams-public main .flex.flex-wrap.items-center.gap-4 > button {
    width: 100%;
    justify-content: center;
  }

  /* Live ops metric strip: wrap instead of crushing */
  body.ams-public main .grid.grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.ams-public main .grid.sm\:grid-cols-2,
  body.ams-public main .grid.md\:grid-cols-2,
  body.ams-public main .grid.md\:grid-cols-3,
  body.ams-public main .grid.md\:grid-cols-4,
  body.ams-public main .grid.lg\:grid-cols-3,
  body.ams-public main .grid.lg\:grid-cols-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Tiny corridor / port labels wrap */
  body.ams-public main .tracking-\[0\.2em\],
  body.ams-public main .tracking-widest,
  body.ams-public main .uppercase.tracking-wider {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
}

/* Laptop (≤1366): tighten header search & card gaps */
@media (max-width: 1366px) and (min-width: 1025px) {
  body.ams-admin main .grid.gap-6,
  body.ams-admin main .grid.gap-8 {
    gap: 1.25rem;
  }

  body.ams-admin header input[type="search"],
  body.ams-admin header input[placeholder*="Find" i] {
    max-width: min(220px, 28vw);
  }
}

/* Tablet admin: keep page title readable; stack toolbars */
@media (max-width: 1024px) {
  body.ams-admin main > .space-y-6,
  body.ams-admin main > .space-y-8,
  body.ams-admin main .ams-workspace {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.ams-admin main .flex.flex-col.justify-between.gap-4.sm\:flex-row,
  body.ams-admin main .flex.flex-col.gap-4.sm\:flex-row {
    align-items: stretch;
  }

  .ams-mobile-autoupdate,
  .ams-au-card {
    max-width: 100%;
  }

  .ams-au-downloads {
    flex-direction: column;
  }

  .ams-au-dl {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Auth card inputs: full width + 16px font (iOS zoom prevent) */
@media (max-width: 767px) {
  body.ams-public input[type="email"],
  body.ams-public input[type="password"],
  body.ams-public input[type="text"],
  body.ams-public input[type="search"],
  body.ams-public textarea,
  body.ams-public select {
    width: 100%;
    max-width: 100%;
    font-size: 16px !important;
    box-sizing: border-box;
  }

  body.ams-public [class*="rounded"][class*="border"][class*="p-"] {
    max-width: 100%;
  }
}

/* Images / media never blow the viewport */
body.ams-public img,
body.ams-admin img,
body.ams-portal img,
.ams-workspace img {
  max-width: 100%;
  height: auto;
}

/* Footer columns stack on phone */
@media (max-width: 640px) {
  body.ams-public footer .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.5rem !important;
  }
}