/* Marlaine global responsive guardrails — release v94.
   Loaded last so page-specific layouts keep their design while the shared
   shell remains usable from compact phones through 1440p and ultrawide PCs. */

:root {
  --marlaine-responsive-gutter: clamp(12px, 1.6vw, 32px);
  --marlaine-responsive-radius: clamp(14px, 1.2vw, 24px);
}

html,
body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  overscroll-behavior: none;
}

#root {
  width: 100%;
  min-width: 0;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

#root > div {
  width: 100%;
  min-width: 0;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

#root aside {
  max-width: min(19rem, 88vw);
}

#root main {
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#root main > * {
  min-width: 0;
  max-width: 100%;
}

#root main :where(section, article, form, fieldset, header, footer, nav, div, label) {
  min-width: 0;
}

#root main :where(input, select, textarea, button) {
  min-width: 0;
  max-width: 100%;
}

#root main :where(img, video, canvas, iframe, object, embed) {
  max-width: 100%;
}

#root main :where(pre, code, .break-all) {
  overflow-wrap: anywhere;
}

#root main :where(.overflow-x-auto, .overflow-auto) {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

#root main :where(div, section, article):has(> table) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#root main table {
  max-width: none;
}

/* Common page roots remain centered but can use the extra space on 1440p. */
#root main > div[class*="max-w-"],
#root main > section[class*="max-w-"],
#root main .ax-main,
#root main .production-workspace-v47,
#root main .production-monitor-shell-v48,
#root main .office-smtp-shell-v65,
#root main .production-shortcut-settings-v52 {
  width: 100%;
  min-width: 0;
  max-width: min(100%, 2200px) !important;
}

/* Dialogs and anchored menus never extend beyond the visible device. */
#root :where([role="dialog"], .production-help-dialog-v47, .production-schedule-modal-v73, .production-shortcut-help-v51 > section, .office-smtp-modal-v65) {
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
}

#root :where(.marlaine-running-jobs, .production-context-menu-v47, .ax-offer-picker-menu) {
  max-width: calc(100vw - 24px) !important;
}

@media (min-width: 1920px) {
  #root main > div[class*="max-w-"],
  #root main > section[class*="max-w-"],
  #root main .ax-main,
  #root main .production-workspace-v47,
  #root main .production-monitor-shell-v48,
  #root main .office-smtp-shell-v65,
  #root main .production-shortcut-settings-v52 {
    max-width: min(100%, 2320px) !important;
  }

  #root main .production-workspace-v47,
  #root main .ax-main {
    padding-inline: clamp(24px, 2vw, 44px) !important;
  }
}

/* 1440-wide laptops and reduced browser windows keep the same content. */
@media (max-width: 1440px) {
  #root main .px-10 {
    padding-inline: clamp(16px, 2.3vw, 32px) !important;
  }

  #root main .px-8 {
    padding-inline: clamp(14px, 2vw, 28px) !important;
  }

  #root main .p-10 {
    padding: clamp(16px, 2.3vw, 32px) !important;
  }

  #root main .p-8 {
    padding: clamp(14px, 2vw, 28px) !important;
  }

  #root main .gap-8 {
    gap: clamp(16px, 2vw, 28px) !important;
  }

  #root main .production-workspace-v47,
  #root main .ax-main {
    max-width: 100% !important;
  }
}

/* Unprefixed dense utility grids need a safe fallback when the desktop
   sidebar leaves less horizontal space than the raw viewport suggests. */
@media (max-width: 1180px) {
  #root main :where(.grid-cols-8, .grid-cols-7, .grid-cols-6, .grid-cols-5, .grid-cols-4, .grid-cols-3) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Match the JavaScript mobile-navigation breakpoint exactly. */
@media (max-width: 1023px) {
  #root main {
    width: 100%;
  }

  #root main > :where(div, section) {
    width: 100%;
  }

  #root main .production-workspace-v47,
  #root main .ax-main,
  #root main .office-smtp-shell-v65,
  #root main .production-shortcut-settings-v52 {
    margin-inline: 0 !important;
  }

  #root main :where(.production-monitor-table-wrap-v48, .ax-table-wrap, .ax-list-console, .mta-offers-table-wrap-v53) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 767px) {
  :root {
    --marlaine-responsive-gutter: 12px;
  }

  #root > div > div > header {
    min-height: 64px !important;
    padding-inline: 12px !important;
  }

  #root main .production-workspace-v47,
  #root main .ax-main,
  #root main .office-smtp-shell-v65,
  #root main .production-shortcut-settings-v52 {
    padding-inline: 12px !important;
  }

  #root main :where(.px-10, .px-8, .px-6, .px-5) {
    padding-inline: 14px !important;
  }

  #root main :where(.p-10, .p-8, .p-6, .p-5) {
    padding: 14px !important;
  }

  #root main :where(.gap-8, .gap-6, .gap-5) {
    gap: 14px !important;
  }

  #root main :where(.text-5xl, .text-4xl, .text-3xl) {
    font-size: clamp(1.45rem, 7vw, 1.875rem) !important;
    line-height: 1.18 !important;
  }

  #root main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px;
  }

  #root main :where(.flex-wrap, .ax-process-actions, .ax-list-console-actions, .office-smtp-actions-v65) {
    row-gap: 8px;
  }

  #root main .production-mode-tabs-v47 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #root main .production-mode-tabs-v47 > button {
    min-width: 0;
  }

  #root main [data-marlaine-settings-nav="true"] {
    display: flex !important;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  #root main [data-marlaine-settings-nav="true"] > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

@media (max-width: 639px) {
  #root main :where(.grid-cols-8, .grid-cols-7, .grid-cols-6, .grid-cols-5, .grid-cols-4, .grid-cols-3, .grid-cols-2) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 479px) {
  #root aside {
    width: min(19rem, 90vw) !important;
  }

  #root main :where(button, [role="button"]) {
    min-height: 36px;
  }

  #root main :where(.production-help-dialog-v47, .production-schedule-modal-v73, .office-smtp-modal-v65) {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 16px !important;
  }
}

/* Compact-height laptops: reclaim vertical space without hiding controls. */
@media (max-height: 800px) and (min-width: 1024px) {
  #root > div > aside > div:first-child,
  #root > div > div > header {
    min-height: 64px !important;
    height: 64px !important;
  }

  #root > div > aside > nav {
    padding-block: 14px !important;
  }

  #root main .production-workspace-v47,
  #root main .ax-main {
    padding-top: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #root *,
  #root *::before,
  #root *::after {
    scroll-behavior: auto !important;
  }
}