/* OptilaPlus responsive shell — 2026-09-01
   The application bundle keeps a fixed 240px desktop sider and a one-line
   desktop toolbar. This layer turns them into a mobile drawer/header without
   changing tenant data or page business logic. */

html,
body {
  max-width: 100%;
}

/* The marketplace shortcut shares an 82px fixed action cell with the row
   menu. Keep it compact at every width so it never paints outside the table. */
.op-market-row {
  width: 31px !important;
  min-width: 31px !important;
  max-width: 31px !important;
  margin-left: 4px !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
}

.op-market-row::after {
  content: "↗";
  font-size: 13px;
  line-height: 28px;
}

.op-mobile-nav-backdrop {
  display: none;
}

@media (max-width: 900px) {
  html,
  body,
  #root,
  #root > .ant-app {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.op-mobile-shell-ready .ant-layout-has-sider {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.op-mobile-shell-ready .op-shell-header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    padding: 0 10px !important;
    gap: 8px !important;
    overflow: visible !important;
    z-index: 1200 !important;
  }

  body.op-mobile-shell-ready .op-shell-header-left {
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 142px) !important;
    gap: 9px !important;
    align-items: center !important;
  }

  body.op-mobile-shell-ready .op-shell-brand-block {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body.op-mobile-shell-ready .op-shell-divider {
    display: none !important;
  }

  body.op-mobile-shell-ready .op-shell-menu-button {
    display: inline-flex !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.12) !important;
  }

  body.op-mobile-shell-ready .op-shell-page-meta {
    min-width: 0 !important;
    width: auto !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body.op-mobile-shell-ready .op-shell-page-meta > :not(:first-child) {
    display: none !important;
  }

  body.op-mobile-shell-ready .op-shell-header-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 6px !important;
    align-items: center !important;
  }

  body.op-mobile-shell-ready .op-shell-header-actions > * {
    display: none !important;
  }

  body.op-mobile-shell-ready .op-shell-header-actions > .op-medula-support-header,
  body.op-mobile-shell-ready .op-shell-header-actions > .op-qs-top,
  body.op-mobile-shell-ready .op-shell-header-actions > .op-shell-profile {
    display: inline-flex !important;
  }

  body.op-mobile-shell-ready .op-shell-header-actions > .op-medula-support-header,
  body.op-mobile-shell-ready .op-shell-header-actions > .op-qs-top {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
  }

  body.op-mobile-shell-ready .op-shell-header-actions > .op-qs-top {
    font-size: 0 !important;
  }

  body.op-mobile-shell-ready .op-shell-header-actions > .op-qs-top::after {
    content: "⚡";
    font-size: 17px !important;
  }

  body.op-mobile-shell-ready .op-shell-profile {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  body.op-mobile-shell-ready .op-shell-profile > :first-child {
    display: none !important;
  }

  body.op-mobile-shell-ready .ant-layout-sider {
    top: 56px !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 320px) !important;
    min-width: min(86vw, 320px) !important;
    max-width: min(86vw, 320px) !important;
    height: calc(100dvh - 56px) !important;
    z-index: 1160 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.22s ease !important;
    box-shadow: 16px 0 38px rgba(7, 24, 54, 0.22) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.op-mobile-nav-open .ant-layout-sider {
    transform: translateX(0) !important;
  }

  body.op-mobile-shell-ready .ant-layout-sider,
  body.op-mobile-shell-ready .ant-layout-sider-children,
  body.op-mobile-shell-ready .ant-layout-sider .ant-menu {
    width: min(86vw, 320px) !important;
  }

  body.op-mobile-shell-ready .ant-layout-sider .ant-menu-item,
  body.op-mobile-shell-ready .ant-layout-sider .ant-menu-submenu-title {
    padding-inline: 18px !important;
  }

  body.op-mobile-shell-ready .op-mobile-nav-backdrop {
    position: fixed;
    inset: 56px 0 0;
    z-index: 1140;
    display: block;
    visibility: hidden;
    opacity: 0;
    border: 0;
    background: rgba(4, 17, 39, 0.48);
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  body.op-mobile-nav-open .op-mobile-nav-backdrop {
    visibility: visible;
    opacity: 1;
  }

  body.op-mobile-nav-open {
    overflow: hidden !important;
  }

  body.op-mobile-shell-ready .ant-layout-has-sider > .ant-layout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.op-mobile-shell-ready .ant-layout > .ant-alert-banner {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 7px 10px !important;
    align-items: center !important;
    gap: 7px !important;
  }

  body.op-mobile-shell-ready .ant-alert-banner .ant-alert-section {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body.op-mobile-shell-ready .ant-alert-banner .ant-alert-message {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.op-mobile-shell-ready .ant-alert-banner .ant-alert-actions {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px !important;
    overflow-x: hidden !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content > *,
  body.op-mobile-shell-ready main.ant-layout-content .ant-card,
  body.op-mobile-shell-ready main.ant-layout-content .ant-card-body,
  body.op-mobile-shell-ready main.ant-layout-content .ant-row,
  body.op-mobile-shell-ready main.ant-layout-content .ant-form,
  body.op-mobile-shell-ready main.ant-layout-content .ant-tabs,
  body.op-mobile-shell-ready main.ant-layout-content .ant-table-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-card-head {
    min-height: 54px !important;
    padding: 0 12px !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-card-head-wrapper {
    min-width: 0 !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-card-head-title {
    min-width: 0 !important;
    padding: 12px 0 6px !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-card-extra {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 0 0 10px !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-card-extra > div,
  body.op-mobile-shell-ready main.ant-layout-content .ant-card-extra .ant-space {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-card-extra .ant-space-item {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-card-body > div > .ant-space {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-card-body {
    padding: 12px !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-table-wrapper {
    width: 100% !important;
    overflow: hidden !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-table-content,
  body.op-mobile-shell-ready main.ant-layout-content .ant-table-body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-pagination {
    max-width: 100% !important;
    gap: 4px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-tabs-nav-wrap {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-space,
  body.op-mobile-shell-ready main.ant-layout-content .ant-space-item,
  body.op-mobile-shell-ready main.ant-layout-content .ant-input,
  body.op-mobile-shell-ready main.ant-layout-content .ant-input-affix-wrapper,
  body.op-mobile-shell-ready main.ant-layout-content .ant-select,
  body.op-mobile-shell-ready main.ant-layout-content .ant-picker {
    max-width: 100% !important;
  }

  body.op-mobile-shell-ready .ant-modal {
    top: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 0 auto !important;
    padding-bottom: 10px !important;
  }

  body.op-mobile-shell-ready .ant-modal-content {
    max-height: calc(100dvh - 20px) !important;
    overflow: auto !important;
    border-radius: 16px !important;
  }

  body.op-mobile-shell-ready .ant-drawer-content-wrapper {
    width: min(92vw, 440px) !important;
    max-width: 100vw !important;
  }

  body.op-mobile-shell-ready .ant-popover,
  body.op-mobile-shell-ready .ant-dropdown,
  body.op-mobile-shell-ready .ant-picker-dropdown {
    max-width: calc(100vw - 16px) !important;
  }

  body.op-mobile-shell-ready .op-program-import-modal,
  body.op-mobile-shell-ready .op-pl-modal {
    padding: 10px !important;
  }

  body.op-mobile-shell-ready .op-program-import-modal > section,
  body.op-mobile-shell-ready .op-pl-modal > section {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
  }

  body.op-mobile-shell-ready .op-qs-notice {
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    max-width: none !important;
  }

  body.op-mobile-shell-ready [data-op-mobile-scroll] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 560px) {
  body.op-mobile-shell-ready .op-shell-header-left {
    max-width: calc(100% - 96px) !important;
  }

  body.op-mobile-shell-ready .op-shell-page-meta,
  body.op-mobile-shell-ready .op-shell-profile {
    display: none !important;
  }

  body.op-mobile-shell-ready .ant-alert-banner .ant-alert-actions .ant-btn {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
  }

  body.op-mobile-shell-ready .ant-alert-banner .ant-alert-actions .ant-btn::after {
    content: "✓";
    font-size: 15px;
  }

  body.op-mobile-shell-ready main.ant-layout-content {
    padding: 8px !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-card-body {
    padding: 10px !important;
  }

  body.op-mobile-shell-ready main.ant-layout-content .ant-row > .ant-col {
    max-width: 100% !important;
  }

  body.op-mobile-shell-ready .op-ms-hero,
  body.op-mobile-shell-ready .op-app-featured,
  body.op-mobile-shell-ready .op-import-center > section > header {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  body.op-mobile-shell-ready .op-medula-support-center {
    padding: 16px 8px 48px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.op-mobile-shell-ready .ant-layout-sider,
  body.op-mobile-shell-ready .op-mobile-nav-backdrop {
    transition: none !important;
  }
}