/* Optional ERP sidebar header stays hidden in all other layouts. */
.dashboard-erp-heading { display: none; }
#dashboard-nav-collapse { display: none; }
.wms-nav-mobile-toolbar, .wms-nav-drawer-head, .wms-nav-backdrop { display: none; }
.wms-nav-mobile-toolbar[hidden], .wms-nav-backdrop[hidden], [data-wms-nav-drawer].hidden { display: none !important; }

    /* Style System controls stay available in every visual style. */
    .style-system-field {
      display: inline-grid;
      grid-template-columns: 68px auto;
      column-gap: 8px;
      align-items: center;
      min-width: 0;
      margin: 0;
      color: var(--label, #475569);
      font-size: 13px;
      font-weight: 650;
    }
    .style-system-field > span { white-space: nowrap; }
    .style-system-field > .dashboard-options-setting-label {
      font-weight: 400;
    }
    .style-system-select {
      min-width: 176px;
      min-height: 36px;
      border: 1px solid var(--btn-border, #cbd5e1);
      border-radius: var(--btn-radius, 4px);
      padding: 0 34px 0 12px;
      color: var(--text, #0b1220);
      background-color: var(--surface-bg, #ffffff);
      font: inherit;
      cursor: pointer;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      transition: background-color 160ms ease, border-color 160ms ease, border-radius 160ms ease, box-shadow 160ms ease;
    }
    .style-system-select:focus-visible {
      outline: 3px solid rgba(0, 122, 255, 0.22);
      outline-offset: 2px;
    }
    html[data-style="liquid-glass"] .style-system-select {
      border-color: rgba(255, 255, 255, 0.78);
      border-radius: 12px;
      background-color: rgba(255, 255, 255, 0.68);
      box-shadow: 0 4px 13px rgba(31, 38, 54, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.94);
      -webkit-backdrop-filter: saturate(180%) blur(18px);
      backdrop-filter: saturate(180%) blur(18px);
    }
    html[data-style="liquid-glass"] .style-system-select:hover {
      border-color: rgba(0, 122, 255, 0.3);
      background-color: rgba(248, 251, 255, 0.9);
    }
    html[data-style="liquid-glass"][data-theme="dark"] .style-system-select {
      border-color: rgba(255, 255, 255, 0.12);
      background-color: rgba(58, 58, 60, 0.78);
      color: #f5f5f7;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    html[data-style="classic"] .style-system-select {
      border-color: var(--btn-border);
      border-radius: var(--btn-radius);
      background-color: var(--btn-bg);
      color: var(--btn-text);
      box-shadow: none;
    }
    html[data-style="classic"] .style-system-select:hover {
      border-color: var(--btn-border-hover);
      background-color: var(--btn-bg-hover);
    }
    .dashboard-options-theme-control .theme-switch { margin-left: 0; }
    @media (max-width: 620px) {
      .style-system-field {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        grid-template-columns: 62px minmax(0, 1fr);
      }
      .style-system-select { flex: 1 1 auto; min-width: 0; max-width: 210px; }
      .dashboard-options-appearance-row { gap: 9px; }
      .dashboard-options-setting-label { width: 62px; min-width: 62px; }
      .dashboard-options-language-row { grid-template-columns: 62px auto; }
    }

    /* Hybrid navigation: touch scrolling plus desktop arrows, wheel, and keyboard. */
    .nav-scroll-shell {
      --nav-scroll-fade: rgba(246, 246, 250, 0.96);
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      min-width: 0;
      margin: 0 0 12px;
    }
    .dashboard-nav-scroll-shell {
      position: sticky;
      top: 10px;
      z-index: 120;
    }
    /* Liquid Glass navigation owns one continuous surface, including its scroll arrows. */
    html[data-style="liquid-glass"] .dashboard-nav-scroll-shell {
      padding: 7px;
      border: 1px solid var(--glass-border);
      border-radius: 20px;
      background: var(--glass-bg);
      box-shadow: var(--glass-shadow);
      -webkit-backdrop-filter: saturate(180%) blur(26px);
      backdrop-filter: saturate(180%) blur(26px);
    }
    .nav-scroll-viewport {
      position: relative;
      min-width: 0;
      max-width: 100%;
      overflow-x: auto !important;
      overflow-y: hidden;
      flex-wrap: nowrap !important;
      scroll-behavior: smooth;
      scroll-snap-type: x proximity;
      overscroll-behavior-inline: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .nav-scroll-viewport::-webkit-scrollbar { display: none; }
    .nav-scroll-viewport:focus-visible {
      outline: 3px solid rgba(0, 122, 255, 0.22);
      outline-offset: 2px;
    }
    .nav-scroll-viewport > .tab-btn,
    .nav-scroll-viewport .dashboard-options-btn,
    .nav-scroll-viewport .dashboard-account-slot {
      scroll-snap-align: nearest;
      flex: 0 0 auto;
    }
    .dashboard-sidebar-brand { display: none; }
    .dashboard-nav-utilities { display: contents; }
    .dashboard-nav-scroll-shell .tab-bar {
      position: relative;
      top: auto;
      z-index: 1;
      width: 100%;
      margin: 0;
    }
    html[data-style="liquid-glass"] .dashboard-nav-scroll-shell .tab-bar {
      padding: 0;
      border: 0;
      border-radius: 13px;
      background: transparent;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    /* Keep the clear lens edge and caustic inside the horizontal scroll viewport. */
    html[data-style="liquid-glass"] .dashboard-nav-scroll-shell .nav-scroll-viewport {
      margin-block: -3px;
      padding-block: 3px;
    }
    /* One shared clear-glass droplet glides between active dashboard modules. */
    .nav-active-lens { display: none; }
    html[data-style="liquid-glass"] .dashboard-nav-scroll-shell .nav-active-lens {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      display: block;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.82);
      border-radius: 18px;
      background:
        radial-gradient(90% 78% at 50% -18%, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.14) 52%, transparent 72%),
        linear-gradient(108deg, rgba(255, 255, 255, 0.17), rgba(195, 226, 255, 0.08) 48%, rgba(255, 255, 255, 0.18)),
        rgba(255, 255, 255, 0.1);
      box-shadow:
        0 2px 5px rgba(31, 73, 118, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.98),
        inset 1px 0 1px rgba(255, 255, 255, 0.58),
        inset -1px 0 1px rgba(68, 130, 190, 0.1),
        inset 0 -1px 1px rgba(255, 255, 255, 0.24);
      -webkit-backdrop-filter: saturate(190%) blur(12px);
      backdrop-filter: saturate(190%) blur(12px);
      pointer-events: none;
      will-change: transform, width;
    }
    html[data-style="liquid-glass"] .dashboard-nav-scroll-shell .nav-active-lens::before {
      content: "";
      position: absolute;
      inset: 1px 8% auto;
      height: 46%;
      border-radius: 999px 999px 50% 50%;
      background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.14) 52%, transparent 76%);
      pointer-events: none;
    }
    html[data-style="liquid-glass"] .dashboard-nav-scroll-shell .nav-active-lens.is-ready {
      transition:
        transform 430ms cubic-bezier(0.22, 1, 0.36, 1),
        width 380ms cubic-bezier(0.22, 1, 0.36, 1),
        height 260ms ease,
        border-color 160ms ease,
        background 160ms ease;
    }
    html[data-style="liquid-glass"] .dashboard-nav-scroll-shell .tab-btn.active,
    html[data-style="liquid-glass"] .dashboard-nav-scroll-shell .tab-btn.active:hover,
    html[data-style="liquid-glass"] .dashboard-nav-scroll-shell .tab-btn.active:active {
      overflow: visible;
      border-color: transparent;
      background: transparent;
      color: #006ee6;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92);
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      transform: none;
    }
    html[data-style="liquid-glass"] .dashboard-nav-scroll-shell .tab-btn.active::before,
    html[data-style="liquid-glass"] .dashboard-nav-scroll-shell .tab-btn.active::after {
      content: none;
    }
    html[data-style="liquid-glass"][data-theme="dark"] .dashboard-nav-scroll-shell .nav-active-lens {
      border-color: rgba(255, 255, 255, 0.22);
      background:
        radial-gradient(90% 78% at 50% -18%, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.03) 54%, transparent 72%),
        linear-gradient(108deg, rgba(255, 255, 255, 0.07), rgba(80, 145, 210, 0.07) 48%, rgba(255, 255, 255, 0.065)),
        rgba(58, 68, 82, 0.16);
      box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.22),
        inset 0 1px 1px rgba(255, 255, 255, 0.2),
        inset 1px 0 1px rgba(255, 255, 255, 0.07),
        inset -1px 0 1px rgba(0, 0, 0, 0.18),
        inset 0 -1px 1px rgba(255, 255, 255, 0.055);
    }
    html[data-style="liquid-glass"][data-theme="dark"] .dashboard-nav-scroll-shell .nav-active-lens::before {
      background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.2), rgba(153, 205, 255, 0.055) 52%, transparent 76%);
    }
    html[data-style="liquid-glass"][data-theme="dark"] .dashboard-nav-scroll-shell .tab-btn.active,
    html[data-style="liquid-glass"][data-theme="dark"] .dashboard-nav-scroll-shell .tab-btn.active:hover {
      color: #8bc3ff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
    }
    .dashboard-nav-scroll-shell .dashboard-account-slot {
      flex: 0 0 auto;
      width: auto;
      margin-left: auto;
      order: 0;
    }
    .nav-scroll-shell::before,
    .nav-scroll-shell::after {
      content: "";
      position: absolute;
      top: 2px;
      bottom: 2px;
      z-index: 3;
      width: 34px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease;
    }
    .nav-scroll-shell::before {
      left: 0;
      border-radius: 18px 0 0 18px;
      background: linear-gradient(90deg, var(--nav-scroll-fade) 12%, transparent 100%);
    }
    .nav-scroll-shell::after {
      right: 0;
      border-radius: 0 18px 18px 0;
      background: linear-gradient(270deg, var(--nav-scroll-fade) 12%, transparent 100%);
    }
    .nav-scroll-shell.is-overflowing.can-scroll-start::before,
    .nav-scroll-shell.is-overflowing.can-scroll-end::after { opacity: 1; }
    .nav-scroll-btn {
      display: none;
      position: relative;
      z-index: 5;
      width: 38px;
      min-width: 38px;
      max-width: 38px;
      height: 38px;
      min-height: 38px;
      max-height: 38px;
      aspect-ratio: 1 / 1;
      flex: 0 0 38px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.78);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.76);
      color: #3a3a3c;
      box-shadow: 0 4px 13px rgba(31, 38, 54, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.94);
      -webkit-backdrop-filter: saturate(180%) blur(18px);
      backdrop-filter: saturate(180%) blur(18px);
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 120ms ease, opacity 150ms ease;
    }
    .nav-scroll-btn svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }
    .nav-scroll-btn:hover:not(:disabled) {
      border-color: rgba(0, 122, 255, 0.28);
      background: rgba(240, 247, 255, 0.94);
      color: #007aff;
      box-shadow: 0 6px 16px rgba(0, 122, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.96);
      transform: translateY(-1px);
    }
    .nav-scroll-btn:active:not(:disabled) { transform: scale(0.94); }
    .nav-scroll-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18), 0 5px 15px rgba(0, 90, 190, 0.14);
    }
    .nav-scroll-btn:disabled {
      opacity: 0.36;
      cursor: default;
      transform: none;
    }
    @media (any-hover: hover) and (any-pointer: fine) {
      .nav-scroll-shell.is-overflowing {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 6px;
      }
      .nav-scroll-shell.is-overflowing .nav-scroll-btn { display: inline-flex; }
      .nav-scroll-shell.is-overflowing::before { left: 44px; }
      .nav-scroll-shell.is-overflowing::after { right: 44px; }
    }
    html[data-theme="dark"] .nav-scroll-shell { --nav-scroll-fade: rgba(38, 38, 42, 0.97); }
    html[data-theme="dark"] .nav-scroll-btn {
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(68, 68, 73, 0.78);
      color: #e5e5ea;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.11);
    }
    html[data-theme="dark"] .nav-scroll-btn:hover:not(:disabled) {
      border-color: rgba(10, 132, 255, 0.34);
      background: rgba(42, 78, 119, 0.86);
      color: #8fc2ff;
    }
    /* Classic uses the same compact rectangular controls as its toolbar. */
    html[data-style="classic"] .nav-scroll-shell {
      --nav-scroll-fade: var(--panel-bg, #f3f7fb);
    }
    /* Keep the Classic status count inside the clipped navigation viewport and clear of the account button. */
    html[data-style="classic"] .dashboard-nav-scroll-shell .dashboard-account-slot {
      gap: 10px;
    }
    html[data-style="classic"] .dashboard-nav-scroll-shell .status-info-btn {
      z-index: 2;
      overflow: visible;
    }
    html[data-style="classic"] .dashboard-nav-scroll-shell .status-info-count {
      top: 0;
      right: -4px;
      z-index: 3;
    }
    html[data-style="classic"] .nav-scroll-shell::before { border-radius: var(--btn-radius, 4px) 0 0 var(--btn-radius, 4px); }
    html[data-style="classic"] .nav-scroll-shell::after { border-radius: 0 var(--btn-radius, 4px) var(--btn-radius, 4px) 0; }
    html[data-style="classic"] .nav-scroll-btn,
    html[data-style="classic"][data-theme="dark"] .nav-scroll-btn {
      width: 34px;
      min-width: 34px;
      height: 34px;
      border-color: var(--btn-border);
      border-radius: var(--btn-radius);
      background: var(--btn-bg);
      color: var(--btn-text);
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    html[data-style="classic"] .nav-scroll-btn:hover:not(:disabled),
    html[data-style="classic"][data-theme="dark"] .nav-scroll-btn:hover:not(:disabled) {
      border-color: var(--btn-border-hover);
      background: var(--btn-bg-hover);
      color: var(--btn-text);
      box-shadow: none;
      transform: none;
    }
    html[data-style="classic"] .nav-scroll-btn:active:not(:disabled) { transform: translateY(1px); }
    html[data-style="classic"] .nav-scroll-btn:focus-visible { box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.18); }
    html[data-style="classic"] .nav-scroll-btn:disabled { opacity: 0.45; }
    @media (max-width: 768px) {
      .dashboard-nav-scroll-shell { top: 6px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .nav-scroll-viewport { scroll-behavior: auto; }
      .nav-active-lens.is-ready { transition: none !important; }
    }
    @media (prefers-reduced-transparency: reduce) {
      html[data-style="liquid-glass"] .dashboard-nav-scroll-shell {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--surface-bg);
      }
      .nav-scroll-btn {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--surface-bg);
      }
    }

    html[data-app-client="ios"] .inventory-stats-sku-search-modal,
    html[data-app-client="android"] .inventory-stats-sku-search-modal,
    html[data-app-client="app"] .inventory-stats-sku-search-modal {
      padding-top: max(18px, var(--oc-wms-app-top-inset)) !important;
      padding-bottom: max(18px, var(--oc-wms-app-bottom-inset)) !important;
      --sku-search-mobile-bottom-controls: 0px;
    }
    html[data-app-client="ios"] .inventory-stats-sku-search-dialog,
    html[data-app-client="android"] .inventory-stats-sku-search-dialog,
    html[data-app-client="app"] .inventory-stats-sku-search-dialog {
      max-height: calc(100dvh - var(--oc-wms-app-top-inset) - var(--oc-wms-app-bottom-inset)) !important;
    }
    html[data-app-client="ios"] .dashboard-auth-modal,
    html[data-app-client="android"] .dashboard-auth-modal,
    html[data-app-client="app"] .dashboard-auth-modal,
    html[data-app-client="ios"] .wave-delete-confirm-modal,
    html[data-app-client="android"] .wave-delete-confirm-modal,
    html[data-app-client="app"] .wave-delete-confirm-modal {
      padding-top: max(18px, var(--oc-wms-app-top-inset)) !important;
      padding-bottom: max(18px, var(--oc-wms-app-bottom-inset)) !important;
    }