/* ONDAX_DESKTOP_SIDEBAR_20260717
   Move a navegação principal e a subnavegação de Pedidos para a lateral no desktop. */

@media (min-width: 980px) {
  :root {
    --ondax-sidebar-width: 264px;
    --ondax-topbar-height: 18px;
  }

  body {
    background:
      radial-gradient(circle at 82% -10%, rgba(112, 84, 245, 0.12), transparent 32%),
      radial-gradient(circle at 100% 92%, rgba(15, 118, 110, 0.12), transparent 28%),
      #f4f7fb !important;
  }

  .app.app-top-mode {
    width: 100% !important;
    min-height: var(--app-dvh, 100dvh) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .app.app-top-mode .app-reveal-zone,
  .app.app-top-mode.app-menu-hidden .app-reveal-zone {
    display: none !important;
  }

  .app.app-top-mode .app-header {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--ondax-sidebar-width) !important;
    z-index: 300 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 22px 14px 18px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 18% 8%, rgba(111, 68, 255, 0.42), transparent 32%),
      linear-gradient(180deg, #081d36 0%, #0b2949 48%, #071a2f 100%) !important;
    box-shadow: 18px 0 48px rgba(15, 23, 42, 0.18) !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .app.app-top-mode .app-header::before {
    content: "ONDA X HUB";
    white-space: nowrap;
    display: flex;
    align-items: center;
    min-height: 58px;
    margin: 0 4px 4px;
    padding-left: 54px;
    color: #ffffff;
    font: 900 20px/0.9 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    letter-spacing: -0.04em;
    background:
      linear-gradient(135deg, #ffe04a 0 22%, #21c4ff 23% 48%, #7c3cff 49% 75%, #ef4444 76% 100%) 4px center / 38px 38px no-repeat;
    border-radius: 18px;
  }

  .app.app-top-mode .app-mobile-bar,
  .app.app-top-mode .app-mobile-overlay,
  .app.app-top-mode .app-brand,
  .app.app-top-mode .app-topbar {
    display: none !important;
  }

  .app.app-top-mode .app-header-line {
    position: static !important;
    order: 20 !important;
    inset: auto !important;
    z-index: 320 !important;
    display: flex !important;
    justify-content: stretch !important;
    align-items: center !important;
    min-height: auto !important;
    margin-top: auto !important;
    padding: 10px 8px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .app.app-top-mode .app-header-line::before {
    display: none !important;
  }

  .app.app-top-mode .app-top-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .app.app-top-mode .app-top-icon {
    display: none !important;
  }

  .app.app-top-mode .app-user-chip {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: flex-start !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .app.app-top-mode .app-user-meta strong {
    color: #ffffff !important;
  }

  .app.app-top-mode .app-user-meta span {
    color: rgba(228, 235, 250, 0.72) !important;
  }

  .app.app-top-mode .app-user-dropdown {
    top: auto !important;
    bottom: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-height: min(48vh, 420px) !important;
    overflow: auto !important;
    z-index: 240 !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(2, 8, 23, .34) !important;
  }

  .app.app-top-mode .app-nav {
    display: flex !important;
    order: 2 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 0 2px 8px 0 !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent !important;
  }

  .app.app-top-mode.app-pedidos-mode .app-nav {
    flex: 0 0 auto !important;
    max-height: calc(var(--app-dvh, 100vh) - min(38vh, 360px) - 240px) !important;
  }

  .app.app-top-mode .app-nav::-webkit-scrollbar,
  .app.app-top-mode .app-subnav::-webkit-scrollbar {
    width: 5px !important;
  }

  .app.app-top-mode .app-nav::-webkit-scrollbar-thumb,
  .app.app-top-mode .app-subnav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.26) !important;
    border-radius: 999px !important;
  }

  .app.app-top-mode .app-nav-group {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .app.app-top-mode .app-nav-group-title {
    padding: 0 8px !important;
    color: rgba(228, 235, 250, 0.72) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.055em !important;
  }

  .app.app-top-mode .app-nav-group-items {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .app.app-top-mode .app-link {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: rgba(238, 244, 255, 0.9) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .app.app-top-mode .app-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .app-link.active {
    background: linear-gradient(135deg, #7949ff, #5b2ce6) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 12px 28px rgba(88, 44, 230, 0.38) !important;
  }

  .app.app-top-mode .app-link.pending {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .app-link-icon {
    width: 22px !important;
    height: 22px !important;
    color: #c9d7ff !important;
    background: rgba(255, 255, 255, 0.11) !important;
  }

  .app.app-top-mode .app-link.active .app-link-icon {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.22) !important;
  }

  .app.app-top-mode .app-link-badge {
    margin-left: auto !important;
    min-width: 24px !important;
    height: 22px !important;
    background: #7c3cff !important;
    box-shadow: 0 8px 18px rgba(124, 60, 255, 0.34) !important;
  }

  .app.app-top-mode .app-subnav {
    position: fixed !important;
    order: 12 !important;
    left: 14px !important;
    right: auto !important;
    top: auto !important;
    bottom: 88px !important;
    z-index: 84 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: calc(var(--ondax-sidebar-width) - 28px) !important;
    max-height: min(38vh, 360px) !important;
    gap: 4px !important;
    padding: 12px !important;
    overflow: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    background: rgba(5, 22, 40, 0.96) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22) !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .app.app-top-mode .app-subnav::before {
    content: "PEDIDOS";
    padding: 0 2px 6px;
    color: rgba(228, 235, 250, 0.72);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.055em;
  }

  .app.app-top-mode .app-subnav-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: rgba(238, 244, 255, 0.82) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  .app.app-top-mode .app-subnav-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .app-subnav-link.active {
    background: rgba(124, 60, 255, 0.92) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 10px 22px rgba(88, 44, 230, 0.32) !important;
  }

  .app.app-top-mode .app-content,
  .app.app-top-mode.app-pedidos-mode .app-content,
  .app.app-top-mode.app-support-mode .app-content,
  .app.app-top-mode.app-menu-hidden .app-content {
    margin-left: var(--ondax-sidebar-width) !important;
    width: calc(100% - var(--ondax-sidebar-width)) !important;
    min-height: var(--app-dvh, 100dvh) !important;
    padding: var(--ondax-topbar-height) 18px 28px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .app.app-top-mode .page,
  .app.app-top-mode .dashboard,
  .app.app-top-mode .pedidos-container,
  .app.app-top-mode .compras-page,
  .app.app-top-mode .full-import-page,
  .app.app-top-mode .devolucao-page,
  .app.app-top-mode .nota-entre-empresas-page,
  .app.app-top-mode .total-express-page {
    padding-top: 16px !important;
  }

  #ondax-auth-toolbar {
    left: calc(var(--ondax-sidebar-width) + 18px) !important;
  }

  #ondax-admin-audit-panel {
    inset: 84px 18px 18px calc(var(--ondax-sidebar-width) + 18px) !important;
  }

  .app.app-top-mode .full-import-table th:last-child,
  .app.app-top-mode .full-import-table td:last-child,
  .app.app-top-mode .full-schedule-table th:last-child,
  .app.app-top-mode .full-schedule-table td:last-child {
    position: sticky !important;
    right: 0 !important;
    z-index: 2 !important;
    background: #ffffff !important;
    box-shadow: -12px 0 20px rgba(15, 23, 42, 0.08) !important;
  }
}

/* ONDAX_MENU_V1_20260805
   Menu lateral declarativo com colapso real de 76px e drawer mobile. */
.app.app-top-mode {
  --ondax-sidebar-width: 244px;
  --ondax-sidebar-collapsed-width: 76px;
  --ondax-sidebar-gap: 16px;
  --ondax-menu-ink: #071426;
  --ondax-menu-panel: #0b182b;
  --ondax-menu-panel-2: #10243c;
  --ondax-menu-border: rgba(148, 163, 184, .22);
  --ondax-menu-text: rgba(247, 250, 252, .94);
  --ondax-menu-muted: rgba(196, 207, 224, .72);
  --ondax-menu-hover: rgba(45, 212, 191, .12);
  --ondax-menu-active: linear-gradient(135deg, #2563eb 0%, #0f766e 100%);
  --ondax-menu-warning: #facc15;
}

.app.app-top-mode .ondax-menu-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
}

.app.app-top-mode .ondax-menu-icon svg {
  width: 21px;
  height: 21px;
  display: block;
}

@media (min-width: 980px) {
  body {
    background: #f4f7fb !important;
  }

  .app.app-top-mode .app-header {
    inset: var(--ondax-sidebar-gap) auto var(--ondax-sidebar-gap) var(--ondax-sidebar-gap) !important;
    width: var(--ondax-sidebar-width) !important;
    height: auto !important;
    padding: 14px 12px !important;
    gap: 10px !important;
    border: 1px solid var(--ondax-menu-border) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, var(--ondax-menu-panel) 0%, var(--ondax-menu-panel-2) 48%, var(--ondax-menu-ink) 100%) !important;
    box-shadow: 0 22px 52px rgba(2, 8, 23, .22) !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .app.app-top-mode .app-header::before {
    display: none !important;
  }

  .app.app-top-mode .ondax-menu-brand {
    order: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 8px 10px;
    color: #ffffff;
  }

  .app.app-top-mode .ondax-menu-brand-mark {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #22d3ee 0%, #2563eb 48%, #7c3aed 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .28);
  }

  .app.app-top-mode .ondax-menu-brand-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .app.app-top-mode .ondax-menu-brand-copy strong {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.05;
    font-weight: 950;
  }

  .app.app-top-mode .ondax-menu-brand-copy span {
    color: var(--ondax-menu-muted);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 760;
  }

  .app.app-top-mode .ondax-company-selector {
    order: 2;
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: var(--ondax-menu-text);
    font: 800 13px/1 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    text-align: left;
  }

  .app.app-top-mode .ondax-company-selector:hover {
    border-color: rgba(45, 212, 191, .35);
    background: rgba(45, 212, 191, .1);
  }

  .app.app-top-mode .app-nav {
    order: 3 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 8px 0 14px !important;
    gap: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .app.app-top-mode .app-nav-group {
    gap: 6px !important;
    margin: 0 !important;
  }

  .app.app-top-mode .app-nav-group-title {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 8px !important;
    color: var(--ondax-menu-muted) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 920 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  .app.app-top-mode .app-nav-group-title::after {
    content: "" !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    margin-left: 0 !important;
    background: rgba(148, 163, 184, .18) !important;
  }

  .app.app-top-mode .app-nav-group-items {
    display: grid !important;
    gap: 4px !important;
  }

  .app.app-top-mode .app-link,
  .app.app-top-mode .ondax-menu-parent {
    position: relative !important;
    width: 100% !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--ondax-menu-text) !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 840 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer;
  }

  .app.app-top-mode .app-link::before,
  .app.app-top-mode .app-link-icon {
    display: none !important;
  }

  .app.app-top-mode .app-link:hover,
  .app.app-top-mode .ondax-menu-parent:hover {
    background: var(--ondax-menu-hover) !important;
    border-color: rgba(45, 212, 191, .24) !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .app-link.active,
  .app.app-top-mode .ondax-menu-parent.active {
    background: var(--ondax-menu-active) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(15, 118, 110, .24) !important;
  }

  .app.app-top-mode .ondax-menu-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app.app-top-mode .ondax-menu-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-radius: 999px;
    background: var(--ondax-menu-warning);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, .15);
  }

  .app.app-top-mode .ondax-menu-chevron {
    margin-left: auto;
    transition: transform .16s ease;
  }

  .app.app-top-mode .ondax-menu-parent-wrap.is-open .ondax-menu-chevron {
    transform: rotate(90deg);
  }

  .app.app-top-mode .ondax-menu-children {
    display: grid;
    gap: 4px;
    margin: 4px 0 0 28px;
  }

  .app.app-top-mode .ondax-menu-children[hidden] {
    display: none !important;
  }

  .app.app-top-mode.app-pedidos-mode .app-subnav {
    display: none !important;
  }

  .app.app-top-mode .ondax-menu-child-link {
    min-height: 36px !important;
    padding-left: 9px !important;
    color: rgba(236, 244, 255, .82) !important;
    font-size: 12.5px !important;
  }

  .app.app-top-mode .app-header-line {
    order: 20 !important;
    margin-top: auto !important;
    padding: 10px 6px 0 !important;
  }

  .app.app-top-mode .app-content,
  .app.app-top-mode.app-pedidos-mode .app-content,
  .app.app-top-mode.app-support-mode .app-content,
  .app.app-top-mode.app-menu-hidden .app-content {
    margin-left: calc(var(--ondax-sidebar-width) + (var(--ondax-sidebar-gap) * 2)) !important;
    width: calc(100% - var(--ondax-sidebar-width) - (var(--ondax-sidebar-gap) * 2)) !important;
    padding: 16px 18px 28px !important;
  }

  .ondax-sidebar-toggle {
    left: calc(var(--ondax-sidebar-width) + (var(--ondax-sidebar-gap) * 1.5)) !important;
    top: 20px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    color: #102033 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 2147483000 !important;
    touch-action: manipulation !important;
  }

  .ondax-sidebar-toggle .ondax-menu-icon {
    width: 19px;
    height: 19px;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .app-header {
    width: var(--ondax-sidebar-collapsed-width) !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-brand,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-company-selector,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-link,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-parent,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-user-chip {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-brand-copy,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-company-selector-text,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-nav-group-title,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-text,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-dot,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-chevron,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-user-meta,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-user-chip > span:last-child {
    display: none !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-children,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-subnav {
    display: none !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .app-content,
  html.ondax-sidebar-collapsed .app.app-top-mode.app-pedidos-mode .app-content,
  html.ondax-sidebar-collapsed .app.app-top-mode.app-support-mode .app-content {
    margin-left: calc(var(--ondax-sidebar-collapsed-width) + (var(--ondax-sidebar-gap) * 2)) !important;
    width: calc(100% - var(--ondax-sidebar-collapsed-width) - (var(--ondax-sidebar-gap) * 2)) !important;
    padding-left: 18px !important;
  }

  html.ondax-sidebar-collapsed .ondax-sidebar-toggle {
    left: calc(var(--ondax-sidebar-collapsed-width) + (var(--ondax-sidebar-gap) * 1.5)) !important;
  }

  html.ondax-sidebar-collapsed #ondax-auth-toolbar {
    left: calc(var(--ondax-sidebar-collapsed-width) + 24px) !important;
  }
}

@media (max-width: 979px) {
  .app.app-top-mode {
    --ondax-sidebar-width: min(86vw, 320px);
  }

  .app.app-top-mode .app-header {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--ondax-sidebar-width) !important;
    height: var(--app-dvh, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 14px 18px !important;
    border: 0 !important;
    border-radius: 0 18px 18px 0 !important;
    background: linear-gradient(180deg, #0b182b 0%, #10243c 50%, #071426 100%) !important;
    box-shadow: 18px 0 46px rgba(2, 8, 23, .32) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(-105%) !important;
    transition: transform .18s ease !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 9000 !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header {
    transform: translateX(0) !important;
  }

  .app.app-top-mode .app-mobile-bar {
    order: 0 !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: 38px 1fr 38px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 4px !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .app-mobile-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  .app.app-top-mode .app-mobile-back,
  .app.app-top-mode .app-mobile-menu {
    width: 38px !important;
    height: 38px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .ondax-menu-brand {
    order: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px 6px;
    color: #ffffff;
  }

  .app.app-top-mode .ondax-menu-brand-mark {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #22d3ee 0%, #2563eb 48%, #7c3aed 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
  }

  .app.app-top-mode .ondax-menu-brand-copy {
    display: grid;
    gap: 2px;
  }

  .app.app-top-mode .ondax-menu-brand-copy strong {
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    font-weight: 950;
  }

  .app.app-top-mode .ondax-menu-brand-copy span {
    color: rgba(196, 207, 224, .72);
    font-size: 11px;
    font-weight: 760;
  }

  .app.app-top-mode .ondax-company-selector {
    order: 2;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: rgba(247, 250, 252, .94);
    font-size: 13px;
    font-weight: 800;
  }

  .app.app-top-mode .app-nav {
    order: 3 !important;
    width: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 8px 0 14px !important;
    overflow: visible !important;
  }

  .app.app-top-mode .app-nav-group-title {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 8px !important;
    color: rgba(196, 207, 224, .72) !important;
    font-size: 10px !important;
    font-weight: 920 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  .app.app-top-mode .app-nav-group-title::after {
    content: "" !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    background: rgba(148, 163, 184, .18) !important;
  }

  .app.app-top-mode .app-link,
  .app.app-top-mode .ondax-menu-parent {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(247, 250, 252, .94) !important;
    font-size: 14px !important;
    font-weight: 840 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
  }

  .app.app-top-mode .app-link.active,
  .app.app-top-mode .ondax-menu-parent.active {
    background: linear-gradient(135deg, #2563eb 0%, #0f766e 100%) !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .ondax-menu-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app.app-top-mode .ondax-menu-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-radius: 999px;
    background: #facc15;
  }

  .app.app-top-mode .ondax-menu-chevron {
    margin-left: auto;
    transition: transform .16s ease;
  }

  .app.app-top-mode .ondax-menu-parent-wrap.is-open .ondax-menu-chevron {
    transform: rotate(90deg);
  }

  .app.app-top-mode .ondax-menu-children {
    display: grid;
    gap: 4px;
    margin: 4px 0 0 28px;
  }

  .app.app-top-mode .ondax-menu-children[hidden] {
    display: none !important;
  }

  .app.app-top-mode.app-pedidos-mode .app-subnav {
    display: none !important;
  }

  .app.app-top-mode .app-header-line {
    order: 20 !important;
    margin-top: auto !important;
    padding: 10px 0 0 !important;
  }

  .app.app-top-mode .app-mobile-overlay {
    display: none !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-mobile-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 100% !important;
    width: 100vw !important;
    height: var(--app-dvh, 100dvh) !important;
    display: block !important;
    border: 0 !important;
    background: rgba(2, 8, 23, .44) !important;
    z-index: -1 !important;
  }

  .app.app-top-mode .app-content,
  .app.app-top-mode.app-pedidos-mode .app-content,
  .app.app-top-mode.app-support-mode .app-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 12px 10px 22px !important;
  }

  .ondax-sidebar-toggle {
    display: none !important;
  }
}

/* ONDAX_MENU_MOBILE_TOPBAR_FINAL_PRIORITY_20260805 */
@media (max-width: 979px) {
  .app.app-top-mode .app-header {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transform: none !important;
    background: #0b182b !important;
    box-shadow: 0 10px 28px rgba(2, 8, 23, .22) !important;
  }

  .app.app-top-mode .app-mobile-bar {
    width: 100% !important;
    min-height: 56px !important;
    padding: 8px 0 !important;
    display: grid !important;
    grid-template-columns: 38px 1fr 38px !important;
    align-items: center !important;
  }

  .app.app-top-mode .ondax-menu-brand,
  .app.app-top-mode .ondax-company-selector,
  .app.app-top-mode .app-nav,
  .app.app-top-mode .app-header-line {
    display: none !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header {
    width: var(--ondax-sidebar-width) !important;
    height: var(--app-dvh, 100dvh) !important;
    min-height: var(--app-dvh, 100dvh) !important;
    padding: 0 14px 18px !important;
    border-radius: 0 18px 18px 0 !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, #0b182b 0%, #10243c 50%, #071426 100%) !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-menu-brand,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-company-selector,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-nav,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-header-line {
    display: flex !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-nav {
    display: flex !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-nav-group-items,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-menu-children,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-menu-brand-copy {
    display: grid !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-top-actions {
    display: grid !important;
  }

  .app.app-top-mode .app-content,
  .app.app-top-mode.app-pedidos-mode .app-content,
  .app.app-top-mode.app-support-mode .app-content {
    padding-top: 68px !important;
  }
}

/* ONDAX_MENU_MOBILE_TOPBAR_FIX_20260805
   Mantém o botão mobile visível; somente o conteúdo lateral abre como drawer. */
@media (max-width: 979px) {
  .app.app-top-mode .app-header {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transform: none !important;
    background: #0b182b !important;
    box-shadow: 0 10px 28px rgba(2, 8, 23, .22) !important;
  }

  .app.app-top-mode .app-mobile-bar {
    width: 100% !important;
    min-height: 56px !important;
    padding: 8px 0 !important;
  }

  .app.app-top-mode .ondax-menu-brand,
  .app.app-top-mode .ondax-company-selector,
  .app.app-top-mode .app-nav,
  .app.app-top-mode .app-header-line {
    display: none !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header {
    width: var(--ondax-sidebar-width) !important;
    height: var(--app-dvh, 100dvh) !important;
    min-height: var(--app-dvh, 100dvh) !important;
    padding: 0 14px 18px !important;
    border-radius: 0 18px 18px 0 !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, #0b182b 0%, #10243c 50%, #071426 100%) !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-menu-brand,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-company-selector,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-nav,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-header-line {
    display: flex !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-nav {
    display: flex !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-nav-group-items,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-menu-children,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-menu-brand-copy {
    display: grid !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-top-actions {
    display: grid !important;
  }

  .app.app-top-mode .app-content,
  .app.app-top-mode.app-pedidos-mode .app-content,
  .app.app-top-mode.app-support-mode .app-content {
    padding-top: 68px !important;
  }
}

/* 20260801: esconder barras de rolagem visiveis no menu lateral sem remover a rolagem. */
.app.app-top-mode .app-header,
.app.app-top-mode .app-nav,
.app.app-top-mode .app-subnav,
.app.app-top-mode .app-user-menu-wrap,
.app.app-top-mode .app-user-dropdown {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.app.app-top-mode .app-header::-webkit-scrollbar,
.app.app-top-mode .app-nav::-webkit-scrollbar,
.app.app-top-mode .app-subnav::-webkit-scrollbar,
.app.app-top-mode .app-user-menu-wrap::-webkit-scrollbar,
.app.app-top-mode .app-user-dropdown::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* 20260801: refinamento profissional do menu lateral. */
.app.app-top-mode {
  --ondax-sidebar-width: 252px;
  --sidebar-bg-top: #0d1230;
  --sidebar-bg-mid: #071a31;
  --sidebar-bg-bottom: #041126;
  --sidebar-border: rgba(148, 163, 184, 0.18);
  --sidebar-text: rgba(244, 247, 251, 0.92);
  --sidebar-muted: rgba(180, 193, 214, 0.68);
  --sidebar-soft: rgba(255, 255, 255, 0.075);
  --sidebar-soft-strong: rgba(255, 255, 255, 0.13);
  --sidebar-active: linear-gradient(135deg, #7c5cff 0%, #5238d6 52%, #2d9cff 130%);
}

.app.app-top-mode .app-header {
  padding: 26px 14px 18px !important;
  background:
    radial-gradient(circle at 22% 4%, rgba(88, 166, 255, 0.22), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(124, 92, 255, 0.2), transparent 30%),
    linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-mid) 46%, var(--sidebar-bg-bottom) 100%) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: 16px 0 44px rgba(4, 17, 38, 0.22) !important;
}

.app.app-top-mode .app-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 36%) !important;
}

.app.app-top-mode .app-brand {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 10px 10px 14px !important;
  color: #ffffff !important;
  font-size: 17px !important;
  letter-spacing: -0.04em !important;
}

.app.app-top-mode .app-brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 13px !important;
  background:
    linear-gradient(135deg, #25d4ff 0%, #6457ff 58%, #8b5cf6 100%) !important;
  box-shadow: 0 12px 28px rgba(80, 93, 255, 0.34) !important;
}

.app.app-top-mode .app-nav {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  padding: 10px 0 94px !important;
  gap: 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.app.app-top-mode .app-nav-group {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 8px !important;
}

.app.app-top-mode .app-nav-group + .app-nav-group {
  margin-top: 2px !important;
}

.app.app-top-mode .app-nav-group-title {
  padding: 0 11px !important;
  color: var(--sidebar-muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.07em !important;
}

.app.app-top-mode .app-nav-group-title::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  margin-left: 8px !important;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.2), transparent) !important;
}

.app.app-top-mode .app-nav-group-items {
  display: grid !important;
  gap: 6px !important;
}

.app.app-top-mode .app-link {
  position: relative !important;
  min-height: 42px !important;
  padding: 0 12px 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: var(--sidebar-text) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  box-shadow: none !important;
}

.app.app-top-mode .app-link::before {
  content: "" !important;
  position: absolute !important;
  left: -6px !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: #69d5ff !important;
  opacity: 0 !important;
  transform: scaleY(0.45) !important;
  transition: opacity 0.16s ease, transform 0.16s ease !important;
}

.app.app-top-mode .app-link:hover {
  background: var(--sidebar-soft) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
}

.app.app-top-mode .app-link.active {
  background: var(--sidebar-active) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 28px rgba(82, 56, 214, 0.28) !important;
}

.app.app-top-mode .app-link.active::before {
  opacity: 1 !important;
  transform: scaleY(1) !important;
}

.app.app-top-mode .app-link-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.84) !important;
}

.app.app-top-mode .app-link.active .app-link-icon {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.app.app-top-mode .app-link-badge {
  min-width: 34px !important;
  height: 24px !important;
  margin-left: auto !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.app.app-top-mode .app-link.active .app-link-badge {
  background: rgba(255, 255, 255, 0.24) !important;
}

.app.app-top-mode .app-user-menu-wrap {
  z-index: 2 !important;
  padding: 10px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(7, 17, 38, 0), rgba(7, 17, 38, 0.88) 28%, rgba(7, 17, 38, 0.96)) !important;
}

.app.app-top-mode .app-user-chip {
  width: 100% !important;
  min-height: 58px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.app.app-top-mode .app-user-avatar {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(135deg, #efe9ff, #d8ceff) !important;
  color: #4f35c8 !important;
}

.app.app-top-mode .app-user-meta strong {
  color: #ffffff !important;
  font-size: 13px !important;
}

.app.app-top-mode .app-user-meta span {
  color: rgba(226, 232, 240, 0.72) !important;
}

.app.app-top-mode .app-user-dropdown {
  border-color: rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.22) !important;
}

.ondax-sidebar-toggle {
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important;
}

@media (min-width: 980px) and (max-height: 820px) {
  .app.app-top-mode .app-header {
    gap: 10px !important;
    padding-top: 14px !important;
  }

  .app.app-top-mode .app-header::before {
    min-height: 46px;
    background-size: 30px 30px;
    padding-left: 44px;
    font-size: 17px;
  }

  .app.app-top-mode .app-nav {
    gap: 8px !important;
  }

  .app.app-top-mode .app-link {
    min-height: 34px !important;
    font-size: 13px !important;
  }

  .app.app-top-mode .app-subnav {
    max-height: 40vh !important;
  }
}

/* ONDAX_SIDEBAR_MODEL_POLISH_20260717
   Acabamento visual do menu lateral seguindo o modelo enviado. */
@media (min-width: 980px) {
  :root {
    --ondax-sidebar-width: 252px;
  }

  .app.app-top-mode .app-header {
    gap: 18px !important;
    padding: 26px 14px 18px !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(86, 80, 255, .20), transparent 30%),
      radial-gradient(circle at 110% 35%, rgba(52, 211, 153, .10), transparent 34%),
      linear-gradient(180deg, #050d22 0%, #07162f 48%, #061226 100%) !important;
    box-shadow: 18px 0 42px rgba(2, 8, 23, .22), inset -1px 0 0 rgba(255,255,255,.06) !important;
  }

  .app.app-top-mode .app-header::before {
    content: "ONDA X HUB";
    min-height: 48px;
    margin: 0 8px 10px;
    padding-left: 58px;
    color: #ffffff;
    font: 900 18px/1 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
    letter-spacing: -.035em;
    background: none !important;
  }

  .app.app-top-mode .app-header::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 24px;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background:
      linear-gradient(135deg, transparent 39%, #7c3cff 40% 59%, transparent 60%),
      linear-gradient(45deg, transparent 39%, #22c8ff 40% 59%, transparent 60%);
    filter: drop-shadow(0 10px 18px rgba(82, 66, 255, .28));
    transform: rotate(0deg);
    pointer-events: none;
  }

  .app.app-top-mode .app-nav {
    gap: 19px !important;
    padding: 0 2px 10px !important;
  }

  .app.app-top-mode.app-pedidos-mode .app-nav {
    max-height: calc(var(--app-dvh, 100vh) - min(39vh, 360px) - 250px) !important;
  }

  .app.app-top-mode .app-nav-group {
    gap: 8px !important;
  }

  .app.app-top-mode .app-nav-group-title,
  .app.app-top-mode .app-subnav::before {
    padding: 0 8px !important;
    color: rgba(220, 229, 246, .68) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
  }

  .app.app-top-mode .app-link,
  .app.app-top-mode .app-subnav-link {
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 11px !important;
    color: rgba(242, 247, 255, .92) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    background: transparent !important;
    border-color: transparent !important;
  }

  .app.app-top-mode .app-link-icon {
    width: 24px !important;
    height: 24px !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    opacity: .95 !important;
  }

  .app.app-top-mode .app-link:hover,
  .app.app-top-mode .app-subnav-link:hover {
    background: rgba(109, 76, 255, .16) !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .app-link.active,
  .app.app-top-mode .app-subnav-link.active {
    background: linear-gradient(90deg, rgba(109, 76, 255, .88), rgba(109, 76, 255, .44)) !important;
    border-color: rgba(160, 139, 255, .42) !important;
    box-shadow: inset 3px 0 0 #8b5cf6, 0 12px 28px rgba(45, 32, 120, .28) !important;
  }

  .app.app-top-mode .app-link-badge,
  .app.app-top-mode .app-subnav-badge {
    margin-left: auto !important;
    min-width: 24px !important;
    width: auto !important;
    height: 24px !important;
    padding: 0 8px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #7c3cff, #5b5cf6) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 18px rgba(124, 60, 255, .42) !important;
  }

  .app.app-top-mode .app-subnav {
    left: 14px !important;
    bottom: 100px !important;
    width: calc(var(--ondax-sidebar-width) - 28px) !important;
    max-height: min(39vh, 360px) !important;
    padding: 14px 12px !important;
    gap: 6px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-top-color: rgba(255,255,255,.18) !important;
    border-radius: 14px !important;
    background: rgba(3, 12, 29, .80) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 -18px 34px rgba(0,0,0,.18) !important;
  }

  .app.app-top-mode .app-subnav::before {
    content: "PEDIDOS / ETAPAS" !important;
    margin-bottom: 4px;
  }

  .app.app-top-mode .app-subnav-link {
    position: relative;
    display: flex !important;
    gap: 10px !important;
  }

  .app.app-top-mode .app-subnav-link::before {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    opacity: .95;
    background: currentColor;
    -webkit-mask: var(--sidebar-step-icon, linear-gradient(#000 0 0)) center / 20px 20px no-repeat;
    mask: var(--sidebar-step-icon, linear-gradient(#000 0 0)) center / 20px 20px no-repeat;
  }

  .app.app-top-mode .app-subnav-link[data-step-slug="esteira"] { --sidebar-step-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5h16v2H4V5Zm0 6h16v2H4v-2Zm0 6h16v2H4v-2Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-subnav-link[data-step-slug="compras"] { --sidebar-step-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 3h2l2.1 10.2A3 3 0 0 0 10 15h7.5a3 3 0 0 0 2.8-2l1.4-5H7.1L6.7 6H3V3Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-subnav-link[data-step-slug="aduana"] { --sidebar-step-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m12 2 9 5v10l-9 5-9-5V7l9-5Zm0 2.3L5 8.2v7.6l7 3.9 7-3.9V8.2l-7-3.9Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-subnav-link[data-step-slug="arquivados"] { --sidebar-step-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 4h16v5H4V4Zm2 7h12v9H6v-9Zm3 3v2h6v-2H9Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-subnav-link[data-step-slug="limites"] { --sidebar-step-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 3h12l3 5v13H3V8l3-5Zm1.2 2L5.6 8h12.8l-1.6-3H7.2ZM5 10v9h14v-9H5Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-subnav-link[data-step-slug="faturar"] { --sidebar-step-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 2h9l3 3v17H6V2Zm8 1.5V6h2.5L14 3.5ZM8 9h8v2H8V9Zm0 4h8v2H8v-2Zm0 4h5v2H8v-2Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-subnav-link[data-step-slug="despachar"] { --sidebar-step-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 6h12v9h2.2l1.8-3h2l-2.4-4H17V6h2l4 7v4h-2a3 3 0 0 1-6 0H9a3 3 0 0 1-6 0H1V8a2 2 0 0 1 2-2Zm3 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm12 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'/%3E%3C/svg%3E"); }

  .app.app-top-mode .app-subnav-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app.app-top-mode .app-user-chip {
    min-height: 60px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  .app.app-top-mode .app-user-menu-wrap {
    width: 100% !important;
    z-index: 220 !important;
  }

  .app.app-top-mode .app-user-chip::after {
    content: "⌄";
    margin-left: auto;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
  }
}

@media (min-width: 980px) {
  .app.app-top-mode .app-link-icon {
    display: none !important;
  }

  .app.app-top-mode .app-link::before {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    color: currentColor;
    background: currentColor;
    opacity: .96;
    -webkit-mask: var(--sidebar-main-icon, linear-gradient(#000 0 0)) center / 22px 22px no-repeat;
    mask: var(--sidebar-main-icon, linear-gradient(#000 0 0)) center / 22px 22px no-repeat;
  }

  .app.app-top-mode .app-link[data-main-slug="empresas"] { --sidebar-main-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 2h10v3h3v17H4V5h3V2Zm2 3h6V4H9v1Zm-3 2v13h12V7H6Zm3 3h2v2H9v-2Zm4 0h2v2h-2v-2Zm-4 4h2v2H9v-2Zm4 0h2v2h-2v-2Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-link[data-main-slug="dashboard"] { --sidebar-main-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 20h16v2H2V4h2v16Zm2-2V9h3v9H6Zm5 0V5h3v13h-3Zm5 0v-6h3v6h-3Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-link[data-main-slug="pedidos"] { --sidebar-main-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m12 2 9 5v10l-9 5-9-5V7l9-5Zm0 2.3L5 8.2v7.6l7 3.9 7-3.9V8.2l-7-3.9Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-link[data-main-slug="anuncios"] { --sidebar-main-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 10v4h4l9 5V5l-9 5H3Zm15-2.7v9.4A5 5 0 0 0 18 7.3Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-link[data-main-slug="revisao"] { --sidebar-main-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm-1 14-4-4 1.4-1.4L11 13.2l5.6-5.6L18 9l-7 7Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-link[data-main-slug="atendimento"] { --sidebar-main-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 3a8 8 0 0 0-8 8v6a3 3 0 0 0 3 3h2v-8H6v-1a6 6 0 0 1 12 0v1h-3v8h2a3 3 0 0 0 3-3v-6a8 8 0 0 0-8-8Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-link[data-main-slug="financeiro"] { --sidebar-main-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 16h-2v-2.1A4.2 4.2 0 0 1 8.5 15l1.1-1.7c.8.6 1.6.8 2.4.8.9 0 1.4-.3 1.4-.9 0-.5-.4-.8-1.8-1.2-1.8-.5-3-1.2-3-3 0-1.5 1-2.6 2.4-3V4h2v1.9c.9.1 1.7.4 2.4.9l-1 1.7c-.7-.4-1.4-.7-2.1-.7-.8 0-1.3.4-1.3.9 0 .6.5.8 1.9 1.2 2 .6 2.9 1.4 2.9 3 0 1.5-1 2.7-2.8 3.1V18Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-link[data-main-slug="despesas"] { --sidebar-main-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 2h12v20H6V2Zm2 3v14h8V5H8Zm2 2h4v2h-4V7Zm0 4h4v2h-4v-2Zm0 4h3v2h-3v-2Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-link[data-main-slug="integracoes"] { --sidebar-main-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 7a5 5 0 0 1 10 0h3l-4 5-4-5h3a3 3 0 1 0-5.8 1H7.1A5 5 0 0 1 7 7Zm10 10a5 5 0 0 1-10 0H4l4-5 4 5H9a3 3 0 1 0 5.8-1h2.1c.1.3.1.7.1 1Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-link[data-main-slug="webhooks"] { --sidebar-main-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 4a4 4 0 0 1 3.5 5.9l1.8 1.1A4 4 0 1 1 12 15h-2a2 2 0 1 0 1.7-2.9L9.9 11A4 4 0 1 1 8 4Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E"); }
  .app.app-top-mode .app-link[data-main-slug="erros"] { --sidebar-main-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M11 4h2v10h-2V4Zm0 12h2v2h-2v-2ZM12 2 1 21h22L12 2Z'/%3E%3C/svg%3E"); }
}

/* ONDAX_USER_MENU_VISIBILITY_20260721
   Mantém o menu do usuário visível no sidebar, sem ser cortado pela área de etapas. */
@media (min-width: 980px) {
  .app.app-top-mode .app-header,
  .app.app-top-mode .app-header-line,
  .app.app-top-mode .app-top-actions,
  .app.app-top-mode .app-user-menu-wrap {
    overflow: visible !important;
  }

  .app.app-top-mode .app-user-menu-wrap {
    position: relative !important;
    z-index: 10000 !important;
  }

  .app.app-top-mode .app-user-dropdown {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: 94px !important;
    left: 18px !important;
    width: calc(var(--ondax-sidebar-width, 252px) - 36px) !important;
    max-height: min(44vh, 360px) !important;
    overflow: auto !important;
    z-index: 10050 !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 70px rgba(2, 8, 23, 0.42) !important;
  }

  .app.app-top-mode .app-user-menu-wrap.is-open .app-user-dropdown {
    display: block !important;
  }
}

/* ONDAX_SIDEBAR_COLLAPSE_20260721
   Permite recolher todo o menu lateral e mantém as etapas de Pedidos clicáveis. */
@media (min-width: 980px) {
  .app.app-top-mode .app-subnav {
    z-index: 420 !important;
  }

  .ondax-sidebar-toggle {
    position: fixed;
    top: 18px;
    left: calc(var(--ondax-sidebar-width, 252px) + 16px);
    z-index: 11000;
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 14px;
    background: #ffffff;
    color: #102033;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    font-size: 20px;
    font-weight: 900;
  }

  .ondax-sidebar-toggle:hover {
    color: #5b2ee8;
    border-color: rgba(124, 60, 255, 0.32);
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .app-header,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-subnav {
    transform: translateX(calc(-1 * var(--ondax-sidebar-width, 252px) - 24px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .app-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 18px !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .page {
    padding-left: 18px !important;
  }

  html.ondax-sidebar-collapsed .ondax-sidebar-toggle {
    left: 18px;
  }
}

/* ONDAX_MENU_V1_FINAL_PRIORITY_20260805
   Última camada para o menu declarativo vencer os hotfixes históricos. */
.app.app-top-mode {
  --ondax-sidebar-width: 244px !important;
  --ondax-sidebar-collapsed-width: 76px !important;
  --ondax-sidebar-gap: 16px !important;
  --ondax-menu-ink: #071426;
  --ondax-menu-panel: #0b182b;
  --ondax-menu-panel-2: #10243c;
  --ondax-menu-border: rgba(148, 163, 184, .22);
  --ondax-menu-text: rgba(247, 250, 252, .94);
  --ondax-menu-muted: rgba(196, 207, 224, .72);
  --ondax-menu-hover: rgba(45, 212, 191, .12);
  --ondax-menu-active: linear-gradient(135deg, #2563eb 0%, #0f766e 100%);
  --ondax-menu-warning: #facc15;
}

.app.app-top-mode .ondax-menu-icon {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: currentColor !important;
}

.app.app-top-mode .ondax-menu-icon svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
}

@media (min-width: 980px) {
  .app.app-top-mode .app-header {
    inset: var(--ondax-sidebar-gap) auto var(--ondax-sidebar-gap) var(--ondax-sidebar-gap) !important;
    width: var(--ondax-sidebar-width) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 12px !important;
    border: 1px solid var(--ondax-menu-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, var(--ondax-menu-panel) 0%, var(--ondax-menu-panel-2) 48%, var(--ondax-menu-ink) 100%) !important;
    box-shadow: 0 22px 52px rgba(2, 8, 23, .22) !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  .app.app-top-mode .app-header::before {
    display: none !important;
    content: none !important;
  }

  .app.app-top-mode .ondax-menu-brand {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    padding: 6px 8px 10px !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .ondax-menu-brand-mark {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #22d3ee 0%, #2563eb 48%, #7c3aed 100%) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
  }

  .app.app-top-mode .ondax-menu-brand-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }

  .app.app-top-mode .ondax-menu-brand-copy strong {
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
  }

  .app.app-top-mode .ondax-menu-brand-copy span {
    color: var(--ondax-menu-muted) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
  }

  .app.app-top-mode .ondax-company-selector {
    order: 2 !important;
    width: 100% !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: var(--ondax-menu-text) !important;
    font: 800 13px/1 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif !important;
  }

  .app.app-top-mode .app-nav {
    order: 3 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    padding: 8px 0 14px !important;
    gap: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .app.app-top-mode .app-nav-group {
    gap: 6px !important;
    margin: 0 !important;
  }

  .app.app-top-mode .app-nav-group-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 8px !important;
    color: var(--ondax-menu-muted) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 920 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  .app.app-top-mode .app-nav-group-title::after {
    content: "" !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    margin-left: 0 !important;
    background: rgba(148, 163, 184, .18) !important;
  }

  .app.app-top-mode .app-link,
  .app.app-top-mode .ondax-menu-parent {
    position: relative !important;
    width: 100% !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--ondax-menu-text) !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 840 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .app.app-top-mode .app-link::before,
  .app.app-top-mode .app-link-icon {
    display: none !important;
    content: none !important;
  }

  .app.app-top-mode .app-link:hover,
  .app.app-top-mode .ondax-menu-parent:hover {
    background: var(--ondax-menu-hover) !important;
    border-color: rgba(45, 212, 191, .24) !important;
    color: #ffffff !important;
    transform: none !important;
  }

  .app.app-top-mode .app-link.active,
  .app.app-top-mode .ondax-menu-parent.active {
    background: var(--ondax-menu-active) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(15, 118, 110, .24) !important;
  }

  .app.app-top-mode .ondax-menu-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .app.app-top-mode .ondax-menu-dot {
    flex: 0 0 8px !important;
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
    margin-left: auto !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: var(--ondax-menu-warning) !important;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, .15) !important;
  }

  .app.app-top-mode .ondax-menu-chevron {
    margin-left: auto !important;
    transition: transform .16s ease !important;
  }

  .app.app-top-mode .ondax-menu-parent-wrap.is-open .ondax-menu-chevron {
    transform: rotate(90deg) !important;
  }

  .app.app-top-mode .ondax-menu-children {
    display: grid !important;
    gap: 4px !important;
    margin: 4px 0 0 28px !important;
  }

  .app.app-top-mode .ondax-menu-child-link {
    min-height: 36px !important;
    padding-left: 9px !important;
    color: rgba(236, 244, 255, .82) !important;
    font-size: 12.5px !important;
  }

  .app.app-top-mode .app-header-line {
    order: 20 !important;
    margin-top: auto !important;
    padding: 10px 6px 0 !important;
  }

  .app.app-top-mode .app-content,
  .app.app-top-mode.app-pedidos-mode .app-content,
  .app.app-top-mode.app-support-mode .app-content,
  .app.app-top-mode.app-menu-hidden .app-content {
    margin-left: calc(var(--ondax-sidebar-width) + (var(--ondax-sidebar-gap) * 2)) !important;
    width: calc(100% - var(--ondax-sidebar-width) - (var(--ondax-sidebar-gap) * 2)) !important;
    padding: 16px 18px 28px !important;
  }

  .ondax-sidebar-toggle {
    left: calc(var(--ondax-sidebar-width) + (var(--ondax-sidebar-gap) * 1.5)) !important;
    top: 20px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    color: #102033 !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .app-header {
    width: var(--ondax-sidebar-collapsed-width) !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-brand,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-company-selector,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-link,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-parent,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-user-chip {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-brand-copy,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-company-selector-text,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-nav-group-title,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-text,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-dot,
  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-chevron,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-user-meta,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-user-chip > span:last-child {
    display: none !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .ondax-menu-children,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-subnav {
    display: none !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .app-content,
  html.ondax-sidebar-collapsed .app.app-top-mode.app-pedidos-mode .app-content,
  html.ondax-sidebar-collapsed .app.app-top-mode.app-support-mode .app-content {
    margin-left: calc(var(--ondax-sidebar-collapsed-width) + (var(--ondax-sidebar-gap) * 2)) !important;
    width: calc(100% - var(--ondax-sidebar-collapsed-width) - (var(--ondax-sidebar-gap) * 2)) !important;
    padding-left: 18px !important;
  }

  html.ondax-sidebar-collapsed .ondax-sidebar-toggle {
    left: calc(var(--ondax-sidebar-collapsed-width) + (var(--ondax-sidebar-gap) * 1.5)) !important;
  }
}

@media (max-width: 979px) {
  .app.app-top-mode {
    --ondax-sidebar-width: min(86vw, 320px) !important;
  }

  .app.app-top-mode .app-header {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--ondax-sidebar-width) !important;
    height: var(--app-dvh, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 14px 18px !important;
    border: 0 !important;
    border-radius: 0 18px 18px 0 !important;
    background: linear-gradient(180deg, #0b182b 0%, #10243c 50%, #071426 100%) !important;
    box-shadow: 18px 0 46px rgba(2, 8, 23, .32) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(-105%) !important;
    transition: transform .18s ease !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 9000 !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header {
    transform: translateX(0) !important;
  }

  .app.app-top-mode .app-mobile-bar {
    order: 0 !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: 38px 1fr 38px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 4px !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .ondax-menu-brand {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 2px 6px !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .ondax-menu-brand-mark {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #22d3ee 0%, #2563eb 48%, #7c3aed 100%) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
  }

  .app.app-top-mode .ondax-menu-brand-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }

  .app.app-top-mode .ondax-menu-brand-copy strong {
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  .app.app-top-mode .ondax-menu-brand-copy span {
    color: rgba(196, 207, 224, .72) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
  }

  .app.app-top-mode .ondax-company-selector {
    order: 2 !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(247, 250, 252, .94) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .app.app-top-mode .app-nav {
    order: 3 !important;
    width: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 8px 0 14px !important;
    overflow: visible !important;
  }

  .app.app-top-mode .app-link,
  .app.app-top-mode .ondax-menu-parent {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(247, 250, 252, .94) !important;
    font-size: 14px !important;
    font-weight: 840 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
  }

  .app.app-top-mode .ondax-menu-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .app.app-top-mode .ondax-menu-children {
    display: grid !important;
    gap: 4px !important;
    margin: 4px 0 0 28px !important;
  }

  .app.app-top-mode .app-header-line {
    order: 20 !important;
    margin-top: auto !important;
    padding: 10px 0 0 !important;
  }

  .app.app-top-mode .app-content,
  .app.app-top-mode.app-pedidos-mode .app-content,
  .app.app-top-mode.app-support-mode .app-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 12px 10px 22px !important;
  }

  .ondax-sidebar-toggle {
    display: none !important;
  }
}
/* ONDAX_MENU_MOBILE_EOF_PRIORITY_20260805 */
@media (max-width: 979px) {
  .app.app-top-mode .app-header {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transform: none !important;
    background: #0b182b !important;
    box-shadow: 0 10px 28px rgba(2, 8, 23, .22) !important;
  }

  .app.app-top-mode .app-mobile-bar {
    width: 100% !important;
    min-height: 56px !important;
    padding: 8px 0 !important;
    display: grid !important;
    grid-template-columns: 38px 1fr 38px !important;
    align-items: center !important;
  }

  .app.app-top-mode .ondax-menu-brand,
  .app.app-top-mode .ondax-company-selector,
  .app.app-top-mode .app-nav,
  .app.app-top-mode .app-header-line {
    display: none !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header {
    width: var(--ondax-sidebar-width) !important;
    height: var(--app-dvh, 100dvh) !important;
    min-height: var(--app-dvh, 100dvh) !important;
    padding: 0 14px 18px !important;
    border-radius: 0 18px 18px 0 !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, #0b182b 0%, #10243c 50%, #071426 100%) !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-menu-brand,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-company-selector,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-nav,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-header-line {
    display: flex !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-nav {
    display: flex !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-nav-group-items,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-menu-children,
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-menu-brand-copy {
    display: grid !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-top-actions {
    display: grid !important;
  }

  .app.app-top-mode .app-content,
  .app.app-top-mode.app-pedidos-mode .app-content,
  .app.app-top-mode.app-support-mode .app-content {
    padding-top: 68px !important;
  }
}

/* ONDAX_MENU_MOBILE_LEGACY_PSEUDO_RESET_20260805 */
@media (max-width: 979px) {
  .app.app-top-mode .app-header::before,
  .app.app-top-mode .app-header::after,
  .app.app-top-mode .app-header-line::before {
    display: none !important;
    content: none !important;
  }
}

/* ONDAX_MENU_LEGACY_PSEUDO_GLOBAL_RESET_20260805 */
.app.app-top-mode .app-header::before,
.app.app-top-mode .app-header::after,
.app.app-top-mode .app-header-line::before {
  display: none !important;
  content: none !important;
}

/* ONDAX_MENU_LEGACY_NAV_PSEUDO_RESET_20260805 */
.app.app-top-mode .app-nav::before,
.app.app-top-mode .app-nav::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 979px) {
  .app.app-top-mode .app-nav {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ONDAX_MENU_MOBILE_NAV_NORMALIZE_20260805 */
@media (max-width: 979px) {
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-nav {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    padding: 8px 0 14px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .app.app-top-mode .app-nav-group {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .app.app-top-mode .app-nav-group-items {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .app.app-top-mode .app-link,
  .app.app-top-mode .ondax-menu-parent {
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    border-color: transparent !important;
    background: transparent !important;
    color: rgba(247, 250, 252, .94) !important;
  }

  .app.app-top-mode .app-link.active,
  .app.app-top-mode .ondax-menu-parent.active {
    background: linear-gradient(135deg, #2563eb 0%, #0f766e 100%) !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .ondax-menu-children {
    margin-left: 28px !important;
  }

  .app.app-top-mode .ondax-menu-children[hidden] {
    display: none !important;
  }

  .app.app-top-mode .app-top-icon {
    display: none !important;
  }
}

/* ONDAX_MENU_COMPACT_USER_AVATAR_20260805
   Libera altura útil do menu: marca sem texto e usuário compacto em avatar. */
.app.app-top-mode .ondax-menu-brand {
  justify-content: center !important;
  min-height: 34px !important;
  padding: 2px 0 4px !important;
  gap: 0 !important;
}

.app.app-top-mode .ondax-menu-brand-copy {
  display: none !important;
}

.app.app-top-mode .ondax-menu-brand-mark {
  flex-basis: 32px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

@media (min-width: 980px) {
  .app.app-top-mode .app-header {
    gap: 7px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .app.app-top-mode .ondax-company-selector {
    min-height: 34px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  .app.app-top-mode .app-nav {
    padding-bottom: 6px !important;
  }

  .app.app-top-mode .app-header-line {
    order: 20 !important;
    margin-top: auto !important;
    min-height: 38px !important;
    padding: 4px 6px 0 !important;
    border-top: 1px solid rgba(148, 163, 184, .12) !important;
    background: transparent !important;
  }

  .app.app-top-mode .app-top-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  .app.app-top-mode .app-user-menu-wrap {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .app.app-top-mode .app-user-chip {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      0 10px 22px rgba(2, 8, 23, .22) !important;
  }

  .app.app-top-mode .app-user-chip:hover,
  .app.app-top-mode .app-user-menu-wrap.is-open .app-user-chip {
    border-color: rgba(45, 212, 191, .38) !important;
    background: rgba(45, 212, 191, .14) !important;
  }

  .app.app-top-mode .app-user-chip::after,
  .app.app-top-mode .app-user-meta,
  .app.app-top-mode .app-user-chip > span:last-child:not(.app-user-avatar) {
    display: none !important;
    content: none !important;
  }

  .app.app-top-mode .app-user-avatar {
    width: 28px !important;
    height: 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 100%) !important;
    color: #4c1d95 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  .app.app-top-mode .app-user-dropdown {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: 58px !important;
    left: 18px !important;
    width: calc(var(--ondax-sidebar-width, 244px) - 36px) !important;
    max-height: min(42vh, 320px) !important;
    overflow: auto !important;
    z-index: 10050 !important;
    padding: 8px !important;
    border: 1px solid rgba(148, 163, 184, .2) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(16, 36, 60, .98) 0%, rgba(7, 20, 38, .98) 100%) !important;
    box-shadow: 0 24px 60px rgba(2, 8, 23, .38) !important;
  }

  .app.app-top-mode .app-user-menu-wrap.is-open .app-user-dropdown {
    display: grid !important;
    gap: 4px !important;
  }

  .app.app-top-mode .app-user-dropdown button {
    width: 100% !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(247, 250, 252, .94) !important;
    font: 840 12.5px/1.1 "Plus Jakarta Sans", "Manrope", system-ui, sans-serif !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  .app.app-top-mode .app-user-dropdown button::before {
    content: "" !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    background: currentColor !important;
    opacity: .9 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
  }

  .app.app-top-mode .app-user-dropdown button:last-child::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M10 3h9v18h-9v-2h7V5h-7V3Zm1.6 5.4L13 7l5 5-5 5-1.4-1.4 2.6-2.6H3v-2h11.2l-2.6-2.6Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M10 3h9v18h-9v-2h7V5h-7V3Zm1.6 5.4L13 7l5 5-5 5-1.4-1.4 2.6-2.6H3v-2h11.2l-2.6-2.6Z'/%3E%3C/svg%3E") !important;
  }

  .app.app-top-mode .app-user-dropdown button:hover:not(:disabled) {
    border-color: rgba(45, 212, 191, .24) !important;
    background: rgba(45, 212, 191, .12) !important;
    color: #ffffff !important;
  }

  .app.app-top-mode .app-user-dropdown button:disabled {
    color: rgba(196, 207, 224, .64) !important;
    cursor: default !important;
  }
}

@media (max-width: 979px) {
  .app.app-top-mode .app-mobile-toggle:checked + .app-header .ondax-menu-brand-copy {
    display: none !important;
  }
}

/* ONDAX_PEDIDOS_INLINE_SUBMENU_HEIGHT_FIX_20260805
   Pedidos agora usa submenu inline; remove a altura do antigo painel flutuante. */
@media (min-width: 980px) {
  .app.app-top-mode.app-pedidos-mode .app-nav {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
  }

  .app.app-top-mode .ondax-menu-children {
    gap: 3px !important;
    margin: 3px 0 2px 20px !important;
  }

  .app.app-top-mode .ondax-menu-child-link {
    min-height: 31px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
}

@media (min-width: 980px) and (max-height: 760px) {
  .app.app-top-mode .app-nav-group {
    gap: 5px !important;
  }

  .app.app-top-mode .app-nav-group-items {
    gap: 3px !important;
  }

  .app.app-top-mode .app-link,
  .app.app-top-mode .ondax-menu-parent {
    min-height: 35px !important;
  }

  .app.app-top-mode .ondax-menu-child-link {
    min-height: 29px !important;
  }
}

/* ONDAX_SIDEBAR_FULL_HIDE_20260805
   O estado recolhido esconde o menu inteiro e libera a area operacional. */
@media (min-width: 980px) {
  html.ondax-sidebar-collapsed .app.app-top-mode .app-header,
  html.ondax-sidebar-collapsed .app.app-top-mode .app-subnav {
    transform: translateX(calc(-1 * var(--ondax-sidebar-width, 244px) - 32px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .app-content,
  html.ondax-sidebar-collapsed .app.app-top-mode.app-pedidos-mode .app-content,
  html.ondax-sidebar-collapsed .app.app-top-mode.app-support-mode .app-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 72px !important;
  }

  html.ondax-sidebar-collapsed .app.app-top-mode .page {
    padding-left: 0 !important;
  }

  html.ondax-sidebar-collapsed .ondax-sidebar-toggle {
    left: 18px !important;
  }
}

/* ONDAX_MOBILE_USER_FOOTER_NO_OVERLAP_20260811
   No drawer mobile, o usuario fica no fluxo do menu sem cobrir links. */
@media (max-width: 979px) {
  .app.app-top-mode .app-mobile-toggle:checked + .app-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 12px !important;
    scrollbar-width: thin !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-header-line {
    order: 30 !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding: 10px 0 0 !important;
    position: static !important;
    width: 100% !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-user-menu-wrap {
    margin: 0 !important;
    min-width: 0 !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-user-chip {
    display: flex !important;
    justify-content: flex-start !important;
    min-height: 44px !important;
    width: 100% !important;
  }

  .app.app-top-mode .app-mobile-toggle:checked + .app-header .app-user-dropdown {
    bottom: auto !important;
    left: auto !important;
    max-height: min(38vh, 300px) !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
  }
}

/* ONDAX_SIDEBAR_TOGGLE_HITBOX_20260805_V2
   Mantem a seta em uma posicao previsivel e com area clicavel estavel. */
@media (min-width: 980px) {
  .ondax-sidebar-toggle {
    position: fixed !important;
    top: 20px !important;
    left: calc(16px + var(--ondax-sidebar-width, 244px) - 19px) !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 2147483000 !important;
    touch-action: manipulation !important;
  }

  html.ondax-sidebar-collapsed .ondax-sidebar-toggle {
    left: 18px !important;
  }
}