/* WS58 global responsive hardening — 2026-07-24
 * Presentation only: no API, payment, pricing, voucher or authentication logic.
 */

:root {
  --ws58-safe-top: env(safe-area-inset-top, 0px);
  --ws58-safe-right: env(safe-area-inset-right, 0px);
  --ws58-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ws58-safe-left: env(safe-area-inset-left, 0px);
}

html {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.ws58-responsive-page {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  padding-left: var(--ws58-safe-left);
  padding-right: var(--ws58-safe-right);
}

body.ws58-responsive-page,
body.ws58-responsive-page * {
  overflow-wrap: break-word;
}

body.ws58-responsive-page img,
body.ws58-responsive-page video,
body.ws58-responsive-page canvas,
body.ws58-responsive-page iframe {
  max-width: 100%;
}

body.ws58-responsive-page input,
body.ws58-responsive-page select,
body.ws58-responsive-page textarea,
body.ws58-responsive-page button {
  min-width: 0;
  max-width: 100%;
}

body.ws58-responsive-page pre,
body.ws58-responsive-page code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Tables remain semantically intact and scroll inside their own container. */
.ws58-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  border-radius: inherit;
}

.ws58-table-scroll > table {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}

.ws58-table-scroll th,
.ws58-table-scroll td {
  vertical-align: middle;
}

/* Every dialog must remain reachable on short desktops and phones. */
.ws58-responsive-modal {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding:
    max(12px, var(--ws58-safe-top))
    max(12px, var(--ws58-safe-right))
    max(12px, var(--ws58-safe-bottom))
    max(12px, var(--ws58-safe-left)) !important;
  align-items: flex-start !important;
}

.ws58-responsive-modal > .modal-box,
.ws58-responsive-modal > [role="dialog"],
.ws58-responsive-modal > .ws58-responsive-dialog,
.ws58-responsive-modal > div:not(.ws58-sidebar-backdrop) {
  min-width: 0 !important;
  width: min(100%, 960px);
  max-width: min(100%, 960px) !important;
  max-height: calc(100dvh - 24px - var(--ws58-safe-top) - var(--ws58-safe-bottom));
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.ws58-page-superadmin #modal-mondap-account > .modal-box {
  width: min(100%, 760px) !important;
  max-width: min(100%, 760px) !important;
}

body.ws58-page-superadmin #modal-org > .modal-box,
body.ws58-page-superadmin #modal-withdraw > .modal-box,
body.ws58-page-superadmin #modal-amb > .modal-box {
  width: min(100%, 680px) !important;
}

/* App shells and content columns must be allowed to shrink. */
#app-shell,
#dashboard,
#app-shell > main,
#dashboard > main,
main,
section,
.section,
.tab-content {
  min-width: 0;
  max-width: 100%;
}

/* Superadmin desktop: independent sidebar/content scrolling and reachable actions. */
body.ws58-page-superadmin #app-shell {
  width: 100%;
  max-width: 100%;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
}

body.ws58-page-superadmin #app-shell > aside {
  min-height: 0;
}

body.ws58-page-superadmin #app-shell > main {
  width: auto;
  min-width: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.ws58-page-superadmin #topbar > div {
  min-width: 0;
  flex-wrap: wrap;
}

body.ws58-page-superadmin #topbar > div > div:last-child {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.ws58-page-superadmin #app-shell > main > .p-6 {
  width: 100%;
  min-width: 0;
}

body.ws58-page-superadmin .section > .glass,
body.ws58-page-superadmin .section > div,
body.ws58-page-superadmin .stat-card {
  min-width: 0;
}

body.ws58-page-superadmin .modal-box .flex.gap-2,
body.ws58-page-superadmin .modal-box .flex.items-center.justify-between {
  min-width: 0;
}

/* Mondap: header, menu, actions and modal content stay visible. */
body.ws58-page-mondap #dashboard > header > div > div,
body.ws58-page-mondap #dashboard > header .flex,
body.ws58-page-mondap main .flex.items-center.justify-between {
  min-width: 0;
}

body.ws58-page-mondap nav,
body.ws58-page-mondap nav > div,
body.ws58-page-mondap .ws58-mondap-tabs-list {
  max-width: 100%;
}

body.ws58-page-mondap .tab-content,
body.ws58-page-mondap .tab-content > div,
body.ws58-page-mondap .grid > * {
  min-width: 0;
}

/* Generic responsive grid fallback for pages using Tailwind utility names. */
@media (max-width: 1180px) {
  body.ws58-responsive-page .grid-cols-4,
  body.ws58-responsive-page .grid-cols-5,
  body.ws58-responsive-page .grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ws58-page-superadmin #app-shell > main > .p-6 {
    padding: 1rem !important;
  }
}

@media (max-width: 900px) {
  body.ws58-responsive-page {
    padding-bottom: var(--ws58-safe-bottom);
  }

  body.ws58-responsive-page .grid-cols-3,
  body.ws58-responsive-page .grid-cols-4,
  body.ws58-responsive-page .grid-cols-5,
  body.ws58-responsive-page .grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ws58-responsive-page .ws58-responsive-toolbar,
  body.ws58-responsive-page .ws58-responsive-actions {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  body.ws58-responsive-page .ws58-responsive-actions > button,
  body.ws58-responsive-page .ws58-responsive-actions > a {
    flex: 1 1 180px;
  }

  body.ws58-page-superadmin #topbar #global-search {
    flex: 1 1 180px;
    width: auto !important;
  }

  body.ws58-page-superadmin #topbar > div > div:last-child {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  body.ws58-page-mondap #dashboard > header > div > div {
    height: auto !important;
    min-height: 4rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    flex-wrap: wrap;
    row-gap: 0.55rem;
  }
}

@media (max-width: 700px) {
  body.ws58-responsive-page input,
  body.ws58-responsive-page select,
  body.ws58-responsive-page textarea {
    font-size: 16px !important;
  }

  body.ws58-responsive-page .grid-cols-2,
  body.ws58-responsive-page .grid-cols-3,
  body.ws58-responsive-page .grid-cols-4,
  body.ws58-responsive-page .grid-cols-5,
  body.ws58-responsive-page .grid-cols-6 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ws58-responsive-page main {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  body.ws58-responsive-page .modal-box {
    padding: 1rem !important;
    border-radius: 12px !important;
  }

  body.ws58-responsive-page .modal-box .flex.gap-2,
  body.ws58-responsive-page .modal-box .flex.gap-3,
  body.ws58-responsive-page .modal-box .flex.items-center.justify-between {
    flex-wrap: wrap !important;
  }

  body.ws58-responsive-page .modal-box .flex.gap-2 > .btn,
  body.ws58-responsive-page .modal-box .flex.gap-3 > .btn {
    flex: 1 1 100% !important;
  }

  body.ws58-page-superadmin #topbar > div {
    padding: 0.65rem 0.75rem !important;
  }

  body.ws58-page-superadmin #topbar h2 {
    font-size: 0.95rem !important;
  }

  body.ws58-page-superadmin #app-shell > main > .p-6 {
    padding: 0.75rem !important;
  }

  body.ws58-page-superadmin .number-big {
    font-size: 1.35rem !important;
  }

  body.ws58-page-superadmin .toast {
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: calc(0.75rem + var(--ws58-safe-bottom)) !important;
    max-width: none !important;
  }

  body.ws58-page-mondap main {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
  }

  body.ws58-page-mondap .ws58-mondap-tabs-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  body.ws58-page-mondap .ws58-mondap-tabs-toggle {
    width: 100%;
  }
}

@media (max-width: 420px) {
  body.ws58-responsive-page main {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }

  body.ws58-page-superadmin #topbar .btn,
  body.ws58-page-mondap header button {
    min-height: 40px;
  }
}

/* Very short screens: dialogs start near the top and all controls remain scrollable. */
@media (max-height: 760px) {
  .ws58-responsive-modal {
    justify-content: flex-start !important;
  }

  .ws58-responsive-modal > .modal-box,
  .ws58-responsive-modal > [role="dialog"],
  .ws58-responsive-modal > .ws58-responsive-dialog,
  .ws58-responsive-modal > div:not(.ws58-sidebar-backdrop) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Existing overflow wrappers receive the same touch-friendly behavior. */
body.ws58-responsive-page .overflow-x-auto {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

body.ws58-responsive-page .overflow-x-auto > table {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}

/* Keep the organisation table usable on 1280–1440 px desktops. */
@media (min-width: 901px) and (max-width: 1500px) {
  body.ws58-page-superadmin #orgs-table th,
  body.ws58-page-superadmin #orgs-table td {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    font-size: 0.74rem !important;
  }

  body.ws58-page-superadmin #orgs-table .input-field {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    font-size: 0.74rem !important;
  }

  body.ws58-page-superadmin #orgs-table .btn {
    padding: 0.38rem 0.55rem !important;
    font-size: 0.7rem !important;
  }
}

/* The Mondap account dialog shown in the supplied desktop example must expose
 * its action buttons without relying on the page behind it to scroll. */
body.ws58-page-superadmin #modal-mondap-account .modal-box {
  scrollbar-gutter: stable;
}

body.ws58-page-superadmin #modal-mondap-account .modal-box > .flex:last-child {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 0.75rem;
  padding-bottom: 0.2rem;
  background: linear-gradient(to bottom, rgba(15, 15, 30, 0.12), #0f0f1e 28%);
}