:root {
  color-scheme: light;
  background: #f4fbf9;
}

html {
  min-height: 100%;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
}

/* Sub2API switches TablePageLayout into mobile mode below 1024px, while its
   DataTable stays in desktop mode down to 768px. Keep the wide table inside
   its own scroller in that overlap instead of letting it widen the page. */
@media (max-width: 1023px) {
  .table-page-layout.mobile-mode {
    height: auto !important;
    min-width: 0;
    max-width: 100%;
  }

  .table-page-layout.mobile-mode .layout-section-fixed,
  .table-page-layout.mobile-mode .layout-section-scrollable,
  .table-page-layout.mobile-mode .table-scroll-container {
    min-width: 0;
    max-width: 100%;
  }

  .table-page-layout.mobile-mode .table-scroll-container .table-wrapper {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-page-layout.mobile-mode .table-scroll-container .table-wrapper table {
    min-width: max-content !important;
  }
}

@media (max-width: 767px) {
  main,
  main > *,
  main .card {
    min-width: 0;
    max-width: 100%;
  }

  main img,
  main canvas,
  main video {
    max-width: 100% !important;
    height: auto;
  }

  /* DataTable renders cards below 768px. Some cell slots retain desktop
     min-content widths, so give labels and values explicit shrinkable tracks. */
  .table-page-layout.mobile-mode .table-scroll-container
    .rounded-lg.border.border-gray-200.bg-white.p-4 {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .table-page-layout.mobile-mode .table-scroll-container
    .rounded-lg.border.border-gray-200.bg-white.p-4
    > .space-y-3
    > .flex.items-start.justify-between.gap-4 {
    display: grid !important;
    grid-template-columns: minmax(0, 4.75rem) minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem;
    min-width: 0;
  }

  .table-page-layout.mobile-mode .table-scroll-container
    .rounded-lg.border.border-gray-200.bg-white.p-4
    > .space-y-3
    > .flex.items-start.justify-between.gap-4
    > * {
    min-width: 0;
    max-width: 100%;
  }

  .table-page-layout.mobile-mode .table-scroll-container
    .rounded-lg.border.border-gray-200.bg-white.p-4
    > .space-y-3
    > .flex.items-start.justify-between.gap-4
    > :last-child {
    justify-self: stretch;
    overflow-wrap: anywhere;
  }

  .table-page-layout.mobile-mode .table-scroll-container
    .rounded-lg.border.border-gray-200.bg-white.p-4
    > .space-y-3
    > .flex.items-start.justify-between.gap-4
    > :last-child
    * {
    min-width: 0;
    max-width: 100%;
  }

  .table-page-layout.mobile-mode .table-scroll-container
    .rounded-lg.border.border-gray-200.bg-white.p-4
    > .space-y-3
    > .flex.items-start.justify-between.gap-4
    > :last-child
    .flex {
    flex-wrap: wrap;
  }

  .table-page-layout.mobile-mode .table-scroll-container
    .rounded-lg.border.border-gray-200.bg-white.p-4
    > .space-y-3
    > .flex.items-start.justify-between.gap-4
    > :last-child
    .truncate,
  .table-page-layout.mobile-mode .table-scroll-container
    .rounded-lg.border.border-gray-200.bg-white.p-4
    > .space-y-3
    > .flex.items-start.justify-between.gap-4
    > :last-child
    .whitespace-nowrap {
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  .table-page-layout.mobile-mode .table-scroll-container
    .flex.min-h-0.flex-1.flex-col.overflow-hidden {
    min-width: 0;
    max-width: 100%;
    overflow: visible !important;
  }

  /* Filters and bulk actions need to wrap rather than keep desktop widths. */
  .table-page-layout .layout-section-fixed
    .flex.flex-wrap.items-center.gap-3
    > .w-40 {
    width: calc(50% - 0.375rem) !important;
    min-width: 0;
  }

  .table-page-layout.mobile-mode .table-scroll-container
    > .mb-4.flex.items-center.justify-between {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .table-page-layout.mobile-mode .table-scroll-container
    > .mb-4.flex.items-center.justify-between
    > .flex {
    flex-wrap: wrap;
  }

  /* Distribution charts use a fixed chart plus a flex table. Stack both on
     phones so the table receives the full card width. */
  main .flex.items-center.gap-6:has(> .max-h-48.flex-1.overflow-y-auto) {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  main .flex.items-center.gap-6:has(> .max-h-48.flex-1.overflow-y-auto)
    > :first-child {
    align-self: center;
    max-width: 100%;
  }

  main .flex.items-center.gap-6
    > .max-h-48.flex-1.overflow-y-auto {
    width: 100%;
    min-width: 0;
    flex: none;
    overflow-x: auto;
  }

  /* Operations filters contain several fixed-width selects in one row. */
  main .mb-4.flex.items-start.justify-between.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }

  main .mb-4.flex.items-start.justify-between.gap-4
    > .flex.items-center.gap-2 {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  main .mb-4.flex.items-start.justify-between.gap-4
    > .flex.items-center.gap-2
    > * {
    width: auto !important;
    min-width: 0;
    flex: 1 1 calc(50% - 0.25rem);
  }

  /* Raw tables that are not DataTable cards remain usable by scrolling inside
     their framed container, never by widening the entire document. */
  main :is(.overflow-hidden, .overflow-y-auto):has(> table) {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Dialogs and floating controls must respect the visual viewport. */
  .modal-overlay,
  .dialog-overlay {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .modal-content,
  .dialog-container {
    width: 100% !important;
    min-width: 0;
    max-width: calc(100vw - 1rem) !important;
  }

  .modal-header,
  .modal-body,
  .modal-footer,
  .dialog-header,
  .dialog-body,
  .dialog-footer {
    min-width: 0;
  }

  .modal-title,
  .dialog-header {
    overflow-wrap: anywhere;
  }

  .modal-footer,
  .dialog-footer {
    flex-wrap: wrap;
  }

  .modal-body .grid.grid-cols-2,
  .dialog-body .grid.grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dropdown,
  .select-dropdown-portal,
  [class~="w-[340px]"] {
    max-width: calc(100vw - 1rem) !important;
  }

  .select-dropdown-portal {
    min-width: 0 !important;
  }

  .date-picker-dropdown {
    position: fixed !important;
    inset: auto 0.5rem 0.5rem !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
  }

  .date-picker-custom {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .date-picker-separator {
    display: none !important;
  }

  .date-picker-field {
    width: 100%;
    min-width: 0;
  }

  body > .pointer-events-none.fixed.right-4.top-4 {
    right: 0.75rem !important;
    left: 0.75rem !important;
  }

  body > .pointer-events-none.fixed.right-4.top-4
    [class~="min-w-[320px]"] {
    width: 100%;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 430px) {
  /* The account tools menu is anchored to a narrow toolbar button. Aligning
     its 20rem width to that button pushes most of it past the left edge. */
  .table-page-layout .layout-section-fixed
    [class*="w-[min(20rem,calc(100vw-2rem))]"] {
    position: fixed !important;
    inset: auto 0.5rem calc(0.5rem + env(safe-area-inset-bottom)) 0.5rem !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep the app header to the three essential mobile controls: menu,
     notifications/language, and account. Docs and subscription details remain
     available from the sidebar pages. */
  header.glass > .flex.h-16.items-center.justify-between {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  header.glass > .flex.h-16.items-center.justify-between > :first-child {
    flex: 0 0 auto;
    gap: 0 !important;
  }

  header.glass > .flex.h-16.items-center.justify-between > :last-child {
    min-width: 0;
    gap: 0.25rem !important;
  }

  header.glass > .flex.h-16.items-center.justify-between
    > :last-child
    > a[target="_blank"] {
    display: none !important;
  }

  /* Select.vue writes an inline left coordinate. A viewport-wide portal is
     deterministic on a phone and cannot escape through the right edge. */
  .select-dropdown-portal {
    right: 0.5rem !important;
    left: 0.5rem !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .select-dropdown-portal .select-search,
  .select-dropdown-portal .select-search-input {
    min-width: 0;
  }

  .select-dropdown-portal .select-options {
    max-height: 40dvh;
  }

  /* Subscription detail is otherwise 340px wide and positioned relative to a
     header button near the right edge. */
  [class~="w-[340px]"] {
    position: fixed !important;
    top: calc(4.5rem + env(safe-area-inset-top)) !important;
    right: 0.5rem !important;
    left: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto !important;
  }

  /* Invisible hover tooltips were still increasing document.scrollWidth.
     Display them as a bottom sheet when focused on touch devices. */
  main [class*="pointer-events-none absolute"][class*="w-56"][class*="-translate-x-1/2"],
  [role="tooltip"][class*="-translate-x-1/2"] {
    position: fixed !important;
    top: auto !important;
    right: 0.5rem !important;
    bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
    left: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  .modal-overlay .fixed.w-64 {
    right: 0.5rem !important;
    left: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
  }

  body > .fixed[class~="z-[100000020]"][class~="w-64"],
  body > .fixed[class~="max-w-96"] {
    right: 0.5rem !important;
    left: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 1rem);
    overflow-y: auto !important;
  }

  .modal-content,
  .dialog-container {
    max-height: calc(100dvh - 1rem) !important;
  }

  .modal-body,
  .dialog-body {
    overflow-x: auto;
  }

  .modal-footer > *,
  .dialog-footer > * {
    min-width: 0;
    max-width: 100%;
  }

  .tabs {
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .tabs > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .terminal-container,
  .terminal-window {
    width: min(420px, calc(100vw - 3rem)) !important;
    max-width: 100%;
    transform: none !important;
  }

  .sidebar .sidebar-brand > .relative > .absolute.left-0 {
    position: fixed !important;
    top: calc(4.5rem + env(safe-area-inset-top)) !important;
    right: 0.5rem !important;
    left: 0.5rem !important;
    width: auto !important;
    max-height: calc(100dvh - 5rem);
    overflow: auto !important;
  }

  input,
  select,
  textarea,
  .select-search-input,
  .date-picker-input {
    font-size: 16px !important;
  }

  .table-page-layout.mobile-mode [class~="min-w-[280px]"]:has(.usage-row) {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }

  .table-page-layout.mobile-mode .usage-row > .flex {
    min-width: 0;
    flex-wrap: wrap;
  }

  .table-page-layout.mobile-mode .usage-amount {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  main .mb-4.flex.shrink-0.items-center.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  main .mb-4.flex.shrink-0.items-center.justify-between
    > .flex.items-center.gap-2 {
    max-width: 100%;
    flex-wrap: wrap;
  }

  main .mt-1.flex.items-center.gap-3.text-xs {
    min-width: 0;
    flex-wrap: wrap;
    column-gap: 0.5rem !important;
    row-gap: 0.25rem !important;
  }

  main .animate-pulse {
    max-width: 100%;
  }

  main .grid.grid-cols-2 > .card.flex.items-center.gap-3 > :last-child {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
  }

  .modal-body .grid.grid-cols-3,
  .dialog-body .grid.grid-cols-3,
  .modal-body .grid[class*="grid-cols-["],
  .dialog-body .grid[class*="grid-cols-["] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fixed.inset-0.flex.items-center.justify-center:not(.modal-overlay) {
    padding: 0.5rem !important;
    overflow-y: auto;
  }

  .fixed.inset-0.flex.items-center.justify-center:not(.modal-overlay)
    > [class*="bg-white"][class*="max-w-"]:not(.fixed) {
    min-width: 0;
    max-width: 100% !important;
    max-height: calc(100dvh - 1rem) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: auto;
  }

  body > .fixed.inset-0[class~="z-[100]"],
  body > .fixed.inset-0[class~="z-[110]"],
  body > .fixed.inset-0[class~="z-[120]"] {
    padding: 0.5rem !important;
    padding-top: calc(0.5rem + env(safe-area-inset-top)) !important;
    overflow: hidden;
  }

  body > .fixed.inset-0[class~="z-[100]"] > .w-full,
  body > .fixed.inset-0[class~="z-[110]"] > .w-full,
  body > .fixed.inset-0[class~="z-[120]"] > .w-full {
    display: flex;
    min-width: 0;
    max-width: 100% !important;
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top));
    flex-direction: column;
  }

  body > .fixed.inset-0[class~="z-[100]"] > .w-full > [class*="max-h-"],
  body > .fixed.inset-0[class~="z-[110]"] > .w-full > [class*="max-h-"],
  body > .fixed.inset-0[class~="z-[120]"] > .w-full > [class*="max-h-"] {
    min-height: 0;
    max-height: none !important;
    flex: 1 1 auto;
  }

  body > .fixed.inset-0[class~="z-[100]"] > .w-full > [class*="px-6"],
  body > .fixed.inset-0[class~="z-[100]"] > .w-full > [class*="px-8"],
  body > .fixed.inset-0[class~="z-[110]"] > .w-full > [class*="px-6"],
  body > .fixed.inset-0[class~="z-[110]"] > .w-full > [class*="px-8"],
  body > .fixed.inset-0[class~="z-[120]"] > .w-full > [class*="px-6"],
  body > .fixed.inset-0[class~="z-[120]"] > .w-full > [class*="px-8"] {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  body > .fixed.inset-0[class~="z-[100]"] > .w-full > :last-child .flex,
  body > .fixed.inset-0[class~="z-[110]"] > .w-full > :last-child .flex,
  body > .fixed.inset-0[class~="z-[120]"] > .w-full > :last-child .flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .markdown-body {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .markdown-body pre,
  .markdown-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  html,
  body,
  #app {
    max-width: 100%;
    overflow-x: hidden;
  }
}

@media (max-width: 359px) {
  main .grid.grid-cols-2:has(> .card.flex.items-center.gap-3) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .table-page-layout .layout-section-fixed
    .flex.flex-wrap.items-center.gap-3
    > .w-40 {
    width: 100% !important;
  }
}