/* Tab styles for pricing modal */
    .pm-tab-btn {
      background: none;
      border: none;
      border-bottom: 2.5px solid transparent;
      padding: 10px 8px;
      font-weight: 800;
      font-size: 11px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s ease;
      outline: none;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .pm-tab-btn:hover {
      color: var(--primary);
    }

    .pm-tab-btn.active-tab {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }

    .pm-tab-pane {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Price Intelligence responsive card grid */
    @media (max-width: 768px) {
      .pm-intel-grid {
        grid-template-columns: 1fr !important;
      }

      .pm-fields-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .pm-span-all {
        grid-column: span 2 !important;
      }

      /* Update Pricing grid — 2 cols on mobile */
      .pm-update-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      /* UnitPrice spans both cols on mobile */
      .pm-update-grid .pm-update-unitprice {
        grid-column: 1 / -1 !important;
      }
    }

    @media (min-width: 769px) {
      .pm-fields-grid {
        grid-template-columns: repeat(3, 1fr) !important;
      }

      .pm-span-all {
        grid-column: span 3 !important;
      }
    }

    @media (min-width: 560px) and (max-width: 768px) {
      .pm-intel-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .pm-intel-grid> :last-child {
        grid-column: 1 / -1;
      }
    }

    /* Price Detail modal — dedicated layout (excluded from global modal rules) */
    #price-detail-modal {
      position: fixed;
      inset: 0;
      z-index: var(--z-modal-price);
      display: none;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(4px);
      align-items: flex-end;
      justify-content: center;
      padding: 0;
      margin: 0;
    }

    #price-detail-modal>.pm-detail-panel {
      background: var(--bg-surface);
      width: 100%;
      max-width: 680px;
      border-radius: 20px 20px 0 0;
      padding: 20px 20px 30px;
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.22);
      font-family: inherit;
      overflow: hidden;
      box-sizing: border-box;
    }

    @media (min-width: 769px) {
      #price-detail-modal {
        align-items: center;
        padding: 16px;
      }

      #price-detail-modal>.pm-detail-panel {
        border-radius: 20px;
        max-height: 88vh;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
    }

    .pm-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: var(--bg-surface);
    }

    .pm-card-header {
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      font-weight: 800;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .pm-card-header--muted {
      background: var(--bg-surface-light);
      color: var(--text-main);
    }

    .pm-card-header--primary {
      background: rgba(37, 99, 235, 0.06);
      color: var(--primary);
    }

    .pm-card-header--success {
      background: var(--bg-surface-light);
      color: var(--success);
    }

    .pm-card-body {
      padding: 12px;
      flex: 1;
    }

    .pm-card-body--accent {
      background: rgba(37, 99, 235, 0.02);
      display: flex;
      flex-direction: column;
    }

    .pm-avg-link {
      display: none;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 6px;
      margin: 0;
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
      color: var(--primary);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-align: left;
      width: 100%;
      font-family: inherit;
    }

    .pm-avg-link:hover,
    .pm-avg-link:focus {
      opacity: 0.78;
    }

    .pm-avg-link-hint {
      font-size: 9px;
      font-weight: 700;
      color: var(--text-muted);
      text-decoration: none;
    }

    .pm-supplier-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 12px;
    }

    @media (min-width: 560px) {
      .pm-supplier-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .pm-supplier-item {
      background: var(--bg-surface-light);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      padding: 10px;
      color: var(--text-main);
      min-width: 0;
    }

    .pm-supplier-item--best {
      background: rgba(22, 163, 74, 0.08);
      border-color: var(--success);
    }

    .pm-tab-bar {
      display: flex;
      border-bottom: 1px solid var(--border);
      margin-bottom: 14px;
      gap: 8px;
      flex-shrink: 0;
      overflow-x: auto;
    }

    .pm-modal-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding-right: 2px;
    }

    body.dark .pm-card-header--primary {
      background: rgba(37, 99, 235, 0.12);
    }

    body.dark .pm-card-body--accent {
      background: rgba(37, 99, 235, 0.04);
    }

    .pm-history-wrap {
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      max-height: 340px;
    }

    .pm-history-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 10px;
      table-layout: fixed;
    }

    .pm-history-table thead {
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .pm-history-table th,
    .pm-history-table td {
      padding: 8px 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }

    .pm-history-table th {
      background: var(--bg-surface-light);
      font-weight: 800;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .pm-history-table .pm-h-date {
      width: 55px;
      text-align: center;
    }

    .pm-history-table .pm-h-vendor {
      width: 18%;
      text-align: left;
    }

    .pm-history-table .pm-h-item {
      width: 22%;
      text-align: left;
    }

    .pm-history-table .pm-h-qty {
      width: 10%;
      text-align: center;
    }

    .pm-history-table .pm-h-price {
      width: 12%;
      text-align: right;
    }

    .pm-history-table .pm-h-size {
      width: 15%;
      text-align: center;
    }

    .pm-history-table .pm-h-unitcost {
      width: 13%;
      text-align: right;
    }

    .pm-history-table .pm-h-fix {
      width: 72px;
      text-align: center;
      white-space: nowrap;
    }

    .pm-history-table .pm-fix-unit-btn {
      height: 26px;
      min-width: 44px;
      padding: 0 8px;
      font-size: 10px;
      font-weight: 800;
      border: none;
      border-radius: 7px;
      background: var(--primary);
      color: #fff;
      cursor: pointer;
    }

    .pm-history-table .pm-fix-unit-btn:disabled {
      opacity: 0.75;
      cursor: wait;
    }

    .pm-fix-unit-menu {
      position: fixed;
      z-index: 12000;
      min-width: 96px;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-surface);
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    }

    .pm-fix-unit-menu button {
      display: block;
      width: 100%;
      height: 34px;
      border: none;
      border-radius: 7px;
      background: transparent;
      color: var(--text-main);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.3px;
      cursor: pointer;
      text-align: left;
      padding: 0 10px;
    }

    .pm-fix-unit-menu button:hover {
      background: var(--bg-surface-light);
      color: var(--primary);
    }

    .pm-fix-unit-menu button.is-active {
      color: var(--primary);
      background: var(--bg-surface-light);
    }

    .pm-history-table .pm-pack-bad {
      text-decoration: line-through;
      color: var(--danger);
      font-weight: 800;
    }

    .pm-history-table .pm-pack-good {
      color: var(--success);
      font-weight: 800;
    }

    .pm-history-table .pm-issue-badge {
      display: inline-block;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.3px;
      padding: 1px 5px;
      border-radius: 5px;
      margin-right: 4px;
      vertical-align: middle;
      border: 1px solid var(--border);
      background: var(--bg-surface-light);
    }

    .pm-history-row--unit-issue td {
      background: rgba(254, 243, 199, 0.35);
    }

    .pm-history-table tfoot {
      position: sticky;
      bottom: 0;
      z-index: 1;
      background: var(--bg-surface-light);
      font-weight: 800;
      border-top: 2px solid var(--border);
    }

    .pm-history-table tfoot td {
      border-bottom: none;
      color: var(--text-main);
    }

    .pm-history-row--excluded td {
      opacity: 0.45;
      font-style: italic;
    }

    .pm-apply-price-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      border-radius: 6px;
      padding: 2px 4px 2px 0;
      margin: -2px 0;
      transition: opacity 0.15s ease;
    }

    .pm-apply-price-link:hover {
      opacity: 0.8;
    }

    .pm-apply-price-icon {
      font-size: 10px;
      color: var(--primary);
      opacity: 0.75;
      flex-shrink: 0;
    }

    /* WhatsApp Import — soft controls (aligned with OM / Shopping List) */
    .wa-btn {
      height: 40px;
      padding: 0 16px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg-surface);
      color: var(--text-muted);
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
      box-sizing: border-box;
      text-transform: none;
      letter-spacing: 0.01em;
      box-shadow: none;
    }

    .wa-btn--primary {
      background: var(--primary);
      border-color: var(--primary);
      color: var(--primary-contrast);
    }

    .wa-btn--ghost {
      background: var(--bg-surface);
      border-color: var(--border);
      color: var(--text-muted);
    }

    .wa-btn--dashed {
      border-style: dashed;
      border-color: var(--primary);
      color: var(--primary);
      background: var(--bg-surface);
      width: 100%;
      height: 36px;
      font-size: 0.6875rem;
    }

    .wa-btn--sm {
      height: 32px;
      padding: 0 12px;
      font-size: 0.6875rem;
      border-radius: 8px;
    }

    .wa-qty {
      width: 100%;
      max-width: 64px;
      height: 32px;
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 7px;
      text-align: center;
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--primary, #0A444A);
      background: var(--bg-surface-light);
      outline: none;
      box-sizing: border-box;
      padding: 0 2px;
      -moz-appearance: textfield;
      appearance: textfield;
    }

    .wa-qty::-webkit-outer-spin-button,
    .wa-qty::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .wa-del {
      height: 32px;
      width: 32px;
      border: none;
      background: transparent;
      color: #DC2626;
      cursor: pointer;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    @media (max-width: 768px) {
      .wa-status-col {
        display: none !important;
      }

      .wa-lookup-col {
        width: 36px !important;
        padding: 4px 1px !important;
      }

      .wa-qty-col {
        width: 56px !important;
      }
    }

    .day-pills-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .day-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      min-width: 32px;
      padding: 0 8px;
      background: var(--bg-main);
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 800;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      transition: all 0.15s ease;
      border: 1px solid var(--border);
    }

    .day-pill:hover {
      background: var(--border);
    }

    .day-pill.selected {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      box-shadow: 0 2px 6px rgba(10, 68, 74, 0.3);
    }

    /* ==========================================================================
       DESIGN TOKENS
       The single source of truth for the whole interface. Every legacy token
       name is preserved so existing markup keeps working; the values and the
       layers built on top of them are new.
       ========================================================================== */
    :root {
      /* Brand ramp — built around the original teal */
      --brand-50: #eff6f6;
      --brand-100: #d9ebec;
      --brand-200: #b4d6d9;
      --brand-300: #83b9be;
      --brand-400: #4e969d;
      --brand-500: #24757d;
      --brand-600: #0a444a;
      --brand-700: #083a3f;
      --brand-800: #062f34;
      --brand-900: #041f23;

      /* Neutral ramp */
      --n-0: #ffffff;
      --n-25: #fafcfc;
      --n-50: #f4f7f8;
      --n-100: #eaf0f1;
      --n-200: #dde5e7;
      --n-300: #c3cfd2;
      --n-400: #94a6ab;
      --n-500: #6b7f85;
      --n-600: #4d6067;
      --n-700: #33454b;
      --n-800: #1e2f34;
      --n-900: #122024;

      /* Semantic ramps */
      --success: #0f9f77;
      --success-soft: #e6f7f1;
      --success-strong: #0b7a5b;
      --danger: #e04747;
      --danger-soft: #fdeded;
      --danger-strong: #b91c1c;
      --warning: #e08c11;
      --warning-soft: #fdf3e3;
      --warning-strong: #b45309;
      --info: #2b7fb8;
      --info-soft: #e8f3fa;
      --info-strong: #1d5f8c;

      /* Core roles */
      --primary: #0a444a;
      --primary-light: #0d5c64;
      --primary-soft: var(--brand-50);
      --primary-soft-border: var(--brand-100);
      --primary-contrast: #ffffff;
      --accent: #24757d;

      /* Surfaces */
      --bg-main: #eef3f4;
      --bg-base: #eef3f4;
      --bg-surface: #ffffff;
      --bg-surface-light: #f6f9f9;
      --bg-sunken: #e6edee;
      --bg-inverse: var(--brand-800);

      /* Text */
      --text-main: #16272c;
      --text-muted: #63787e;
      --text-subtle: #90a3a8;
      --text-inverse: #ffffff;

      /* Lines */
      --border: #dde5e7;
      --border-strong: #c3cfd2;
      --border-subtle: #eaf0f1;

      /* Radii */
      --radius-xs: 6px;
      --radius-sm: 10px;
      --radius-md: 14px;
      --radius-lg: 18px;
      --radius-xl: 24px;
      --radius-pill: 999px;

      /* Elevation — the original theme was completely flat */
      --shadow-xs: 0 1px 2px rgba(6, 47, 52, 0.06);
      --shadow-sm: 0 1px 3px rgba(6, 47, 52, 0.07), 0 1px 2px rgba(6, 47, 52, 0.04);
      --shadow-md: 0 6px 16px -4px rgba(6, 47, 52, 0.10), 0 2px 6px -2px rgba(6, 47, 52, 0.06);
      --shadow-lg: 0 16px 40px -12px rgba(6, 47, 52, 0.18), 0 4px 12px -4px rgba(6, 47, 52, 0.08);
      --shadow-xl: 0 28px 64px -16px rgba(6, 47, 52, 0.26);
      --shadow: var(--shadow-sm);

      /* Focus ring — visible on every interactive element */
      --ring: none;
      --ring-danger: none;

      /* Spacing (values unchanged: layout depends on them) */
      --space-xs: 6px;
      --space-sm: 8px;
      --space-md: 16px;
      --space-lg: 24px;
      --space-xl: 32px;

      /* Typography */
      --font-sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
      --font-num: 'Outfit', ui-sans-serif, system-ui, sans-serif;
      --fs-2xs: 0.625rem;
      --fs-xs: 0.6875rem;
      --fs-sm: 0.75rem;
      --fs-md: 0.8125rem;
      --fs-base: 0.875rem;
      --fs-lg: 1rem;
      --fs-xl: 1.25rem;
      --fs-2xl: 1.5rem;
      --fs-3xl: 1.875rem;
      --tracking-wide: 0.06em;

      /* Motion */
      --ease: cubic-bezier(0.4, 0, 0.2, 1);
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
      --dur-fast: 120ms;
      --dur: 200ms;
      --dur-slow: 320ms;

      /* Layout metrics */
      --nav-height: 60px;
      --shell-max: 1200px;
      --sidebar-w: 260px;
      --header-h: 56px;
      --subheader-h: 32px;

      /* Stacking — sidebar < scrim < modals (dynamic stack) < loader < toast */
      --z-sidebar: 200;
      --z-scrim: 9000;
      --z-app-elevated: 9010;
      --z-modal: 10000;
      --z-modal-prompt: 10005;
      --z-modal-custom: 10010;
      --z-modal-form: 10000;
      --z-modal-paste: 10015;
      --z-modal-stats: 10020;
      --z-modal-alias: 10025;
      --z-modal-suspect: 10026;
      --z-modal-ai-match: 10027;
      --z-modal-drilldown: 10028;
      --z-modal-pm: 10030;
      --z-modal-editor: 10032;
      --z-modal-shopping: 10033;
      --z-modal-cat-pick: 10040;
      --z-modal-price: 10020;
      --z-modal-wa-paste: 10035;
      --z-modal-confirm: 10400;
      --z-modal-alert: 10500;
      --z-modal-stack-base: 10000;
      --z-modal-stack-step: 40;
      --z-loader: 20000;
      --z-toast: 99999;
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Hide scrollbars globally — scrolling still works, bars never show */
    html,
    body,
    * {
      -ms-overflow-style: none !important;
      scrollbar-width: none !important;
    }

    *::-webkit-scrollbar,
    *::-webkit-scrollbar-track,
    *::-webkit-scrollbar-thumb,
    *::-webkit-scrollbar-corner {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      background: transparent !important;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: var(--font-sans);
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      height: 100%;
      overflow: hidden;
      background: var(--bg-main);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    ::selection {
      background: var(--brand-200);
      color: var(--brand-900);
    }

    /* Focus rings disabled — touch UI; no thick stroke on tap */
    :focus,
    :focus-visible {
      outline: none !important;
    }

    input:focus,
    input:focus-visible,
    select:focus,
    select:focus-visible,
    textarea:focus,
    textarea:focus-visible,
    button:focus,
    button:focus-visible,
    a:focus,
    a:focus-visible,
    [role="button"]:focus,
    [role="button"]:focus-visible {
      outline: none !important;
      box-shadow: none !important;
    }

    .visually-hidden {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    table {
      width: 100%;
      margin: 0;
      border-collapse: collapse;
    }

    body {
      color: var(--text-main);
      display: flex;
      justify-content: center;
    }

    .app-wrapper {
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
      background: var(--bg-base);
      height: 100vh;
      /* Mobile browsers report 100vh larger than the visible area while the
         address bar is showing, which pushes the bottom nav off screen. */
      height: 100dvh;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      isolation: isolate;
    }

    /* Three layout tiers: phone, tablet, desktop. */
    .view-box,
    .header-inner,
    .sub-header-inner,
    .nav-inner {
      width: 100%;
      max-width: 520px;
    }

    @media (min-width: 768px) {
      .app-wrapper {
        max-width: 880px !important;
      }

      .view-box,
      .header-inner,
      .sub-header-inner,
      .nav-inner {
        max-width: 880px !important;
      }
    }

    @media (min-width: 1100px) {
      body {
        background: var(--bg-sunken);
      }

      .app-wrapper {
        max-width: var(--shell-max) !important;
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
      }

      .view-box,
      .header-inner,
      .sub-header-inner,
      .nav-inner {
        max-width: var(--shell-max) !important;
      }

      /* Breathing room instead of edge-to-edge phone padding. */
      .scroll-area {
        padding-left: 12px;
        padding-right: 12px;
      }
    }


    /* Views */
    .view-box {
      display: none !important;
      flex-direction: column;
      flex: 1;
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
      background: var(--bg-base);
      overflow: hidden;
    }

    .view-box.active {
      display: flex !important;
      z-index: 10;
      animation: fadeIn var(--dur-slow) var(--ease-out);
    }

    /* Inventory-hub tool pages — reuse existing modal panels as full pages */
    .pi-tool-page {
      padding: 0 !important;
      overflow: hidden;
    }
    .pi-tool-page .pi-tool-host {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 10px 12px 12px;
      box-sizing: border-box;
    }
    .modal-overlay.pi-tool-modal-page {
      position: relative !important;
      inset: auto !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
      z-index: auto !important;
      align-items: stretch !important;
      justify-content: stretch !important;
      pointer-events: auto !important;
    }
    .modal-overlay.pi-tool-modal-page > .pi-modal-panel,
    .modal-overlay.pi-tool-modal-page > .pdm-merge-panel {
      width: 100% !important;
      max-width: none !important;
      max-height: none !important;
      height: 100% !important;
      margin: 0 !important;
      border-radius: 14px !important;
      box-shadow: none !important;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(8px) scale(0.995);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .scroll-area {
      flex: 1;
      overflow-y: auto;
      padding-top: 14px;
      padding-bottom: 20px;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      scroll-padding-top: 12px;
      display: flex;
      flex-direction: column;
    }

    /* Glassmorphism Header */
    .sticky-header-group {
      position: sticky;
      top: 0;
      z-index: 90;
      width: 100%;
    }

    .app-header {
      background-color: var(--bg-surface);
      backdrop-filter: saturate(180%) blur(16px);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      border-bottom: 1px solid var(--border-subtle);
      height: var(--header-h);
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .header-inner {
      width: 100%;
      max-width: 520px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 var(--space-md);
      height: var(--header-h);
      gap: var(--space-md);
    }

    /* Brand lockup ------------------------------------------------------- */
    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      flex: none;
      border-radius: 11px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 0.95rem;
      background: linear-gradient(145deg, var(--brand-500), var(--brand-700));
      box-shadow: 0 3px 8px -2px rgba(10, 68, 74, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .brand-title {
      font-size: 1.05rem;
      font-weight: 800;
      line-height: 1;
      color: var(--text-main);
      letter-spacing: -0.02em;
    }

    .brand-sub {
      font-size: var(--fs-2xs);
      line-height: 1;
      color: var(--text-subtle);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Reusable icon button ----------------------------------------------- */
    .icon-btn {
      width: 36px;
      height: 36px;
      flex: none;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--text-muted);
      font-size: 0.95rem;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
        border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
    }

    .icon-btn:hover {
      background: var(--primary-soft);
      border-color: var(--primary-soft-border);
      color: var(--primary);
    }

    .icon-btn:active {
      transform: scale(0.92);
    }

    .icon-btn:focus-visible {
      outline: none;
      box-shadow: none;
    }

    .icon-btn--danger:hover {
      background: var(--danger-soft);
      color: var(--danger);
    }

    .icon-btn--danger:focus-visible {
      box-shadow: var(--ring-danger);
      border-color: var(--danger);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    /* Contextual band ----------------------------------------------------- */
    .sub-header {
      background: linear-gradient(100deg, var(--brand-700) 0%, var(--brand-600) 45%, var(--brand-500) 100%);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: var(--subheader-h);
      width: 100%;
      position: relative;
    }

    .sub-header::after {
      content: '';
      position: absolute;
      inset: auto 0 0 0;
      height: 1px;
      background: rgba(255, 255, 255, 0.12);
    }

    .sub-header-inner {
      width: 100%;
      max-width: 520px;
      padding: 0 var(--space-md);
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: var(--subheader-h);
      gap: var(--space-sm);
    }

    .brand-name {
      font-size: var(--fs-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand-name>i {
      font-size: 0.65rem;
      opacity: 0.65;
      flex: none;
    }

    .date-disp {
      font-size: var(--fs-2xs);
      font-weight: 600;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: 3px 9px;
      border-radius: var(--radius-pill);
      display: flex;
      align-items: center;
      gap: 6px;
      flex: none;
      letter-spacing: 0.02em;
    }

    .date-disp i {
      font-size: 0.62rem;
      opacity: 0.7;
    }

    .date-sep {
      width: 1px;
      height: 10px;
      background: rgba(255, 255, 255, 0.28);
    }

    /* Bottom action bar */
    .bottom-nav {
      width: 100%;
      background: var(--bg-surface);
      backdrop-filter: saturate(180%) blur(16px);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      border-top: 1px solid var(--border);
      height: auto;
      min-height: 68px;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      display: none;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      margin-top: auto;
      position: relative;
      bottom: auto;
      z-index: 100;
      box-sizing: border-box;
      box-shadow: 0 -6px 20px -12px rgba(6, 47, 52, 0.28);
    }

    body.has-bottom-nav .view-box.active .scroll-area,
    body.has-bottom-nav .view-box.active > .ord,
    body.has-bottom-nav .view-box.active > [style*="overflow-y"] {
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav.inv-nav-bar {
      height: auto;
      min-height: 74px;
      padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .nav-inner {
      width: 100%;
      max-width: 520px;
      display: flex;
      justify-content: center;
      align-items: stretch;
      padding: 0 var(--space-md);
      gap: 8px;
      box-sizing: border-box;
    }

    .nav-inner.nav-four-btns {
      max-width: 100%;
      padding: 0 10px;
      gap: 6px;
      align-items: center;
    }

    .nav-inner button {
      min-width: 0;
      line-height: 1.15;
      text-align: center;
      white-space: normal;
      word-break: break-word;
      hyphens: auto;
      padding: 0 10px !important;
      box-sizing: border-box;
    }

    .nav-inner button span {
      display: block;
      max-width: 100%;
      line-height: 1.15;
      text-align: center;
    }

    .nav-inner.nav-four-btns button {
      height: 46px;
      flex: 1 1 0;
      min-width: 0;
      padding: 4px 6px !important;
      flex-direction: column;
      gap: 2px;
    }

    .nav-inner.nav-four-btns button span {
      display: block !important;
      font-size: 9.5px;
      margin-left: 0 !important;
      margin-top: 1px;
      letter-spacing: 0;
    }

    .nav-inner.nav-four-btns button i {
      font-size: 14px;
      line-height: 1;
    }

    .nav-inner button.is-on {
      border-color: #f59e0b !important;
      color: #b45309 !important;
      background: #fffbeb !important;
    }

    body.dark .nav-inner button.is-on {
      background: rgba(245, 158, 11, 0.14) !important;
      color: #fbbf24 !important;
      border-color: #d97706 !important;
    }

    #main-nav.nav-soft button.nav-square {
      width: 48px !important;
      height: 48px !important;
      min-width: 48px !important;
      max-width: 48px !important;
      flex: 0 0 48px !important;
      padding: 0 !important;
    }

    #main-nav.nav-soft button.nav-square i {
      font-size: 16px !important;
      margin: 0 !important;
    }

    #main-nav.nav-soft button.nav-square.is-on,
    #main-nav.nav-soft .btn-outline.nav-square.is-on {
      background: #ecfdf5 !important;
      color: #15803d !important;
      border-color: #22c55e !important;
    }

    #main-nav.nav-soft button.nav-square:not(.is-on),
    #main-nav.nav-soft .btn-outline.nav-square:not(.is-on) {
      background: var(--bg-surface-light) !important;
      color: #94a3b8 !important;
      border-color: #cbd5e1 !important;
    }

    .inv-del-page-btn {
      min-width: 44px;
      height: 34px;
      padding: 0 12px;
      margin: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-surface);
      color: var(--text-main);
      cursor: pointer;
      font-size: 11px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
    }

    .inv-del-page-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .inv-del-page-info {
      font-size: 11px;
      font-weight: 800;
      color: var(--text-muted);
      white-space: nowrap;
      text-align: center;
      min-width: 92px;
    }

    .inv-del-toolbar-btn {
      height: 36px;
      padding: 0 12px;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .inv-del-toolbar-btn.is-active {
      border-color: #f59e0b !important;
      color: #b45309 !important;
      background: #fffbeb !important;
    }

    body.dark .inv-del-toolbar-btn.is-active {
      background: rgba(245, 158, 11, 0.12) !important;
      color: #fbbf24 !important;
    }

    #view-invoice-delete .inv-del-topbar {
      flex-shrink: 0;
      padding: 12px 15px 8px 15px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-surface);
    }

    /* Invoice Management — list + duplicate-lines side panel */
    #view-invoice-delete .inv-del-body {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: row;
      overflow: hidden;
    }
    #view-invoice-delete #inv-del-list {
      flex: 1;
      min-width: 0;
      overflow-y: auto;
      padding: 8px;
      padding-bottom: 16px;
    }
    #view-invoice-delete #inv-del-dupes-panel {
      display: none;
      flex-direction: column;
      flex: 0 0 min(420px, 46vw);
      max-width: 100%;
      min-width: 0;
      border-left: 1px solid var(--border);
      background: var(--bg-surface);
      overflow: hidden;
    }
    #view-invoice-delete.has-dupes-panel #inv-del-dupes-panel {
      display: flex;
    }
    #view-invoice-delete .inv-del-dupes-hdr {
      flex: 0 0 auto;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    #view-invoice-delete .inv-del-dupes-hdr h3 {
      margin: 0;
      font-size: 13px;
      font-weight: 900;
      color: var(--text-main);
    }
    #view-invoice-delete .inv-del-dupes-hdr p {
      margin: 3px 0 0;
      font-size: 10px;
      line-height: 1.4;
      color: var(--text-muted);
      font-weight: 650;
    }
    #view-invoice-delete .inv-del-dupes-meta {
      flex: 0 0 auto;
      padding: 8px 12px;
      font-size: 11px;
      font-weight: 750;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      background: var(--bg-surface-light);
    }
    #view-invoice-delete #inv-del-dupes-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 8px;
    }
    #view-invoice-delete .inv-dupe-group {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      background: var(--bg-surface-light);
      margin-bottom: 8px;
    }
    #view-invoice-delete .inv-dupe-group-title {
      font-weight: 900;
      font-size: 12px;
      color: var(--text-main);
      line-height: 1.25;
    }
    #view-invoice-delete .inv-dupe-group-sub {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 750;
      margin-top: 3px;
    }
    #view-invoice-delete .inv-dupe-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 850;
      color: var(--warning-strong);
      background: var(--warning-soft);
      border: 1px solid var(--warning);
      border-radius: 999px;
      padding: 2px 8px;
      margin-top: 6px;
    }
    #view-invoice-delete .inv-dupe-line {
      display: grid;
      grid-template-columns: 28px 28px 1fr auto;
      gap: 8px;
      align-items: center;
      margin-top: 6px;
      padding: 6px 8px;
      border-radius: 8px;
      background: var(--bg-surface);
      border: 1px solid var(--border);
      font-size: 10.5px;
      font-weight: 700;
      color: var(--text-main);
    }
    #view-invoice-delete .inv-dupe-line.is-marked-delete {
      border-color: var(--danger);
      background: var(--danger-soft, rgba(239, 68, 68, 0.08));
    }
    #view-invoice-delete .inv-dupe-line input[type="checkbox"] {
      width: 15px;
      height: 15px;
      margin: 0;
      cursor: pointer;
    }
    #view-invoice-delete .inv-dupe-line-meta {
      color: var(--text-muted);
      font-weight: 650;
      text-align: right;
      white-space: nowrap;
    }
    #view-invoice-delete .inv-dupe-group-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    #view-invoice-delete .inv-dupe-group-actions button {
      height: 30px;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg-surface);
      color: var(--text-main);
      font-size: 10px;
      font-weight: 800;
      cursor: pointer;
    }
    #view-invoice-delete #inv-del-dupes-footer {
      display: none;
      flex: 0 0 auto;
      padding: 10px 12px;
      border-top: 1px solid var(--border);
      background: var(--bg-surface);
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    #view-invoice-delete.has-dupes-panel #inv-del-dupes-footer.is-visible {
      display: flex;
    }
    #view-invoice-delete #inv-del-dupes-footer .inv-dupe-footer-hint {
      flex: 1 1 100%;
      font-size: 10px;
      font-weight: 650;
      color: var(--text-muted);
      line-height: 1.35;
    }
    #view-invoice-delete #inv-del-dupes-delete-btn {
      height: 36px;
      padding: 0 14px;
      border-radius: 10px;
      border: 1px solid var(--danger);
      background: var(--danger);
      color: #fff;
      font-size: 11px;
      font-weight: 850;
      cursor: pointer;
    }
    #view-invoice-delete #inv-del-dupes-delete-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    #view-invoice-delete #inv-del-dupes-mark-btn,
    #view-invoice-delete #inv-del-dupes-clear-btn {
      height: 36px;
      padding: 0 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg-surface-light);
      color: var(--text-main);
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }
    #view-invoice-delete #inv-del-dupes-btn.is-on {
      border-color: var(--warning) !important;
      color: var(--warning-strong) !important;
      background: rgba(245, 158, 11, 0.1) !important;
    }
    @media (max-width: 900px) {
      #view-invoice-delete.has-dupes-panel .inv-del-body {
        position: relative;
      }
      #view-invoice-delete.has-dupes-panel #inv-del-list {
        display: none;
      }
      #view-invoice-delete #inv-del-dupes-panel {
        flex: 1 1 auto;
        border-left: none;
      }
    }

    /* Invoice Lines manager */
    #view-purchased-items { padding: 0; }
    #view-purchased-items .pim-topbar {
      flex-shrink: 0; padding: 8px 10px;
      border-bottom: 1px solid var(--border); background: var(--bg-surface);
    }
    #view-purchased-items .pim-tools {
      display: flex; gap: 6px; width: 100%; align-items: center;
    }
    #view-purchased-items .pim-field {
      width: 100%; height: 34px; border: 1px solid var(--border); border-radius: 8px;
      padding: 0 10px; font-size: 12px; font-weight: 700; background: var(--bg-surface);
      color: var(--text-main); outline: none; box-sizing: border-box; min-width: 0;
      flex: 1 1 auto;
    }
    #view-purchased-items .ilm-more-wrap {
      padding: 12px 8px 16px; text-align: center;
    }
    #view-purchased-items .ilm-more-btn {
      height: 36px; min-width: 160px; padding: 0 16px; border-radius: 10px;
      border: 1px solid var(--border); background: var(--bg-surface-light);
      color: var(--text-main); font-size: 12px; font-weight: 800; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    }
    #view-purchased-items .ilm-more-btn:disabled {
      opacity: 0.45; cursor: not-allowed;
    }
    #view-purchased-items .ilm-more-done {
      font-size: 11px; font-weight: 700; color: var(--text-muted);
    }

    /* ── Merge modal (rebuild): scoped, grid-based, no fragile nested flex ── */
    #view-pi-merge .pdm-merge-panel {
      width: min(860px, calc(100vw - 24px)) !important;
      max-width: min(860px, calc(100vw - 24px)) !important;
      max-height: 90vh !important;
      padding: 0 !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
    }
    #view-pi-merge .pdm-merge-hdr {
      flex: 0 0 auto;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    #view-pi-merge .pdm-merge-hdr h3 {
      margin: 0; font-size: 15px; font-weight: 800; color: var(--text-main);
    }
    #view-pi-merge .pdm-merge-hdr p {
      margin: 3px 0 0; font-size: 11px; line-height: 1.35;
      color: var(--text-muted); font-weight: 600;
    }
    #view-pi-merge .pdm-merge-x {
      flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
      border: 1px solid var(--border); background: var(--bg-surface-light);
      color: var(--text-muted); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    #view-pi-merge #pdm-merge-loading {
      flex: 1 1 auto; display: flex; flex-direction: column;
      align-items: center; justify-content: center; padding: 48px 24px;
    }
    #view-pi-merge #pdm-merge-content {
      display: none; flex-direction: column; flex: 1 1 auto;
      min-height: 0; overflow: hidden;
    }
    #view-pi-merge .pdm-merge-meta {
      flex: 0 0 auto; padding: 8px 16px 4px;
      font-size: 12px; font-weight: 700; color: var(--text-muted); line-height: 1.35;
    }
    #view-pi-merge #pdm-merge-body {
      flex: 1 1 auto; min-height: 0; max-height: none;
      overflow-x: hidden; overflow-y: auto; padding: 4px 0 12px;
      -webkit-overflow-scrolling: touch;
    }
    #view-pi-merge #pdm-merge-actions {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0;
      border: none;
      background: transparent;
      justify-content: flex-start;
      align-items: stretch;
    }
    #view-pi-merge .pdm-merge-btn-ghost,
    #view-pi-merge .pdm-merge-btn-primary {
      height: 34px; padding: 0 14px; border-radius: 10px;
      font-weight: 800; font-size: 12px; cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px; border: none;
    }
    #view-pi-merge .pdm-merge-btn-ghost {
      background: var(--bg-main); color: var(--text-main);
    }
    #view-pi-merge .pdm-merge-btn-primary {
      background: var(--success); color: #fff;
    }
    #view-pi-merge .pdm-merge-btn-primary:disabled {
      opacity: 0.45; cursor: not-allowed;
    }
    #view-pi-merge .pdm-mg {
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--bg-surface); margin-bottom: 8px; overflow: hidden;
    }
    #view-pi-merge .pdm-mg.is-off { opacity: 0.55; }
    #view-pi-merge .pdm-mg-top {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px; padding: 6px 10px; background: var(--bg-surface-light);
      border-bottom: 1px solid var(--border);
    }
    #view-pi-merge .pdm-mg-top-left {
      display: flex; align-items: center; gap: 8px; min-width: 0;
      font-size: 12px; font-weight: 800; color: var(--text-main);
    }
    #view-pi-merge .pdm-mg-top-left input {
      width: 15px; height: 15px; margin: 0; flex: 0 0 auto; cursor: pointer;
    }
    #view-pi-merge .pdm-mg-count {
      font-size: 10px; font-weight: 800; color: var(--text-muted); white-space: nowrap;
    }
    #view-pi-merge .pdm-mg-why {
      padding: 4px 10px 0; font-size: 10px; color: var(--text-muted);
      line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #view-pi-merge .pdm-mg-list {
      display: block; padding: 6px; margin: 0;
    }
    /* radio | text | remove — compact row */
    #view-pi-merge .pdm-mg-item {
      display: grid !important;
      grid-template-columns: 18px minmax(0, 1fr) 28px !important;
      column-gap: 8px;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      padding: 5px 8px;
      margin: 0 0 4px 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-surface-light);
      cursor: pointer;
      direction: ltr;
      min-height: 0;
    }
    #view-pi-merge .pdm-mg-item:last-child { margin-bottom: 0; }
    #view-pi-merge .pdm-mg-item.is-keep {
      border-color: var(--success);
      background: rgba(16, 185, 129, 0.10);
    }
    #view-pi-merge .pdm-mg-item.is-hidden-member {
      opacity: 0.75; border-style: dashed;
    }
    #view-pi-merge .pdm-mg-item input[type="radio"] {
      width: 14px; height: 14px; margin: 0;
      padding: 0; flex: none !important; max-width: 14px;
      justify-self: center; cursor: pointer;
    }
    #view-pi-merge .pdm-mg-item-main {
      display: block; min-width: 0; max-width: 100%; overflow: hidden;
    }
    #view-pi-merge .pdm-mg-tag {
      display: none;
    }
    #view-pi-merge .pdm-mg-item.is-keep .pdm-mg-item-name::before {
      content: 'Keep · ';
      color: var(--success);
      font-weight: 800;
      font-size: 10px;
      text-transform: uppercase;
    }
    #view-pi-merge .pdm-mg-item-name {
      display: block; font-size: 12px; font-weight: 750;
      color: var(--text-main); line-height: 1.3;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #view-pi-merge .pdm-mg-item-meta {
      display: block; margin-top: 0; font-size: 10px;
      font-weight: 700; color: var(--text-muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #view-pi-merge .pdm-mg-item.is-hidden-member .pdm-mg-item-meta {
      color: var(--warning-strong); font-weight: 800;
    }
    #view-pi-merge .pdm-mg-rm {
      width: 26px; height: 26px; border: none; border-radius: 6px;
      background: transparent; color: var(--text-muted); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 12px; padding: 0;
    }
    #view-pi-merge .pdm-mg-rm:hover {
      background: var(--danger-soft, #fee2e2); color: var(--danger-strong, #b91c1c);
    }
    #view-pi-merge .pdm-merge-empty {
      text-align: center; padding: 36px 12px; color: var(--text-muted);
    }
    #view-pi-merge .pdm-merge-empty strong {
      display: block; font-size: 14px; font-weight: 800; color: var(--text-main);
    }
    @media (max-width: 700px) {
      #view-pi-merge .pdm-merge-panel {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
      }
    }
    #view-purchased-items .pim-table-wrap { flex: 1; min-height: 0; overflow: auto; }
    #view-purchased-items .pim-table {
      width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px;
    }
    #view-purchased-items .pim-table th {
      position: sticky; top: 0; z-index: 2; background: var(--bg-surface-light);
      border-bottom: 1px solid var(--border); padding: 6px 4px; text-align: left;
      font-size: 9px; font-weight: 800; color: var(--text-muted); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; user-select: none;
    }
    #view-purchased-items .pim-table th.pim-th-num,
    #view-purchased-items .pim-table th.pim-th-act,
    #view-purchased-items .pim-table th.pim-th-off { cursor: default; text-align: center; }
    #view-purchased-items .pim-table td {
      border-bottom: 1px solid var(--border); padding: 2px 3px; vertical-align: middle;
      overflow: hidden;
    }
    #view-purchased-items .pim-table td.pim-num {
      text-align: center; font-size: 10px; font-weight: 800; color: var(--text-muted);
    }
    #view-purchased-items .pim-table col.c-num { width: 36px; }
    #view-purchased-items .pim-table col.c-inv { width: 12%; }
    #view-purchased-items .pim-table col.c-code { width: 11%; }
    #view-purchased-items .pim-table col.c-name { width: 28%; }
    #view-purchased-items .pim-table col.c-link { width: 28%; }
    #view-purchased-items .pim-table col.c-price { width: 11%; }
    #view-purchased-items .pim-table col.c-vendor { width: 14%; }
    #view-purchased-items .pim-table col.c-off { width: 34px; }
    #view-purchased-items .pim-table col.c-act { width: 96px; }
    /* Invoice Lines layout — readable, not crushed */
    #view-purchased-items .pim-table--lines col.c-inv { width: 14%; }
    #view-purchased-items .pim-table--lines col.c-name { width: 30%; }
    #view-purchased-items .pim-table--lines col.c-link { width: 26%; }
    #view-purchased-items .pim-table--lines col.c-price { width: 10%; }
    #view-purchased-items .pim-table--lines col.c-vendor { width: 14%; }
    #view-purchased-items .pim-table--lines col.c-act { width: 96px; }
    #view-purchased-items .pim-table--pi col.c-code { width: 14%; }
    #view-purchased-items .pim-table--pi col.c-name { width: 36%; }
    #view-purchased-items .pim-table--pi col.c-link { width: 32%; }
    #view-purchased-items .pim-cell {
      width: 100%; height: 28px; border: 1px solid transparent; border-radius: 5px;
      padding: 0 5px; font-size: 11px; font-weight: 700; background: transparent;
      color: var(--text-main); outline: none; box-sizing: border-box; min-width: 0;
    }
    #view-purchased-items .pim-cell:focus { border-color: var(--primary); background: var(--bg-surface); }
    #view-purchased-items .pim-cell.is-dirty { border-color: var(--warning-strong); background: var(--warning-soft); }
    #view-purchased-items .pim-link-row {
      display: flex; align-items: center; gap: 4px; min-width: 0; height: 28px;
      cursor: pointer; border-radius: 5px; border: 1px solid transparent; padding: 0 2px;
    }
    #view-purchased-items .pim-link-row.is-dirty {
      border-color: var(--warning-strong); background: var(--warning-soft);
    }
    #view-purchased-items .pim-lk-ico {
      flex: 0 0 auto; font-size: 11px; color: var(--primary); opacity: 0.9;
    }
    #view-purchased-items .pim-lk-text {
      flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-size: 11px; font-weight: 700; color: var(--text-main); line-height: 1.2;
    }
    #view-purchased-items .pim-lk-text.is-empty { color: var(--text-muted); font-weight: 650; }
    #view-purchased-items .pim-check-wrap {
      display: flex; align-items: center; justify-content: center;
    }
    #view-purchased-items .pim-check {
      width: 16px; height: 16px; cursor: pointer; accent-color: var(--warning-strong);
    }
    #view-purchased-items .pim-check.is-dirty { outline: 2px solid var(--warning-strong); outline-offset: 1px; }
    #view-purchased-items .pim-table tbody tr.is-row-dirty td {
      background: rgba(245, 158, 11, 0.10);
    }
    #view-purchased-items .pim-table.has-dirty-rows tbody tr:not(.is-row-dirty) {
      opacity: 0.42;
    }
    #view-purchased-items .pim-act {
      display: flex; justify-content: center; align-items: center; gap: 4px;
    }
    #view-purchased-items .pim-act button {
      width: 26px; height: 26px; border-radius: 6px; border: 1px solid transparent;
      cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
      flex: 0 0 auto;
    }
    /* Save / Cancel hidden until row is dirty — use !important so global button rules can't hide them */
    #view-purchased-items .pim-act .pim-upd-btn,
    #view-purchased-items .pim-act .pim-cancel-btn {
      display: none !important;
    }
    #view-purchased-items .pim-table tbody tr.is-row-dirty .pim-act .pim-upd-btn,
    #view-purchased-items .pim-table tbody tr.is-row-dirty .pim-act .pim-cancel-btn {
      display: inline-flex !important;
    }
    #view-purchased-items td.pim-td-act {
      overflow: visible;
    }
    #view-purchased-items .pim-act .pim-upd-btn {
      border-color: #bbf7d0; background: #ecfdf5; color: #15803d;
    }
    #view-purchased-items .pim-act .pim-cancel-btn {
      border-color: var(--border); background: var(--bg-surface-light); color: var(--text-muted);
    }
    #view-purchased-items .pim-act .pim-del-btn {
      border-color: #fecaca; background: var(--danger-soft); color: var(--danger-strong);
    }

    #view-invoice-delete #inv-del-pagination {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 14px 4px 8px;
      padding: 12px 8px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg-surface);
    }

    #view-invoice-delete #inv-del-pagination.is-issues {
      flex-wrap: nowrap;
      gap: 8px;
    }

    #view-invoice-delete #inv-del-pagination .inv-del-page-btn {
      min-width: 34px;
      height: 34px;
      padding: 0 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-surface-light);
      color: var(--text-main);
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex: 0 0 auto;
    }

    #view-invoice-delete #inv-del-pagination .inv-del-page-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    #view-invoice-delete #inv-del-pagination .inv-del-page-btn.is-current {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }

    #view-invoice-delete #inv-del-pagination .inv-del-page-info {
      flex: 1 1 auto;
      min-width: 0;
      text-align: center;
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #view-invoice-delete #inv-del-pagination.is-issues .inv-del-page-info {
      flex: 0 1 auto;
      max-width: 52%;
    }

    #view-invoice-delete #inv-del-pagination:not(.is-issues) .inv-del-page-info {
      flex: 1 0 100%;
      margin-top: 2px;
    }

    @media (max-width: 480px) {
      .nav-inner.has-many-btns button span {
        display: none !important;
      }

      .nav-inner.has-many-btns button i {
        font-size: 1.3rem !important;
      }
    }

    /* Components */
    .card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      margin-bottom: var(--space-md);
      box-shadow: var(--shadow-sm);
    }

    .unified-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-bottom: 0;
      box-shadow: var(--shadow-xs);
    }

    .unified-search {
      background: var(--bg-surface-light);
      padding: 10px;
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-direction: row;
      gap: 8px;
      /* Left at the default `stretch`: several toolbars rely on it to size
         their buttons to match the search field. */
    }

    .form-group {
      margin-bottom: var(--space-md);
    }

    .form-group label {
      font-size: var(--fs-2xs);
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      display: block;
      margin-bottom: var(--space-xs);
    }

    input:not(.qty-inp):not(.custom-cb),
    select,
    textarea {
      width: 100%;
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0 12px;
      height: 32px;
      font-size: var(--fs-base);
      color: var(--text-main);
      outline: none;
      transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        background var(--dur) var(--ease);
    }

    textarea {
      height: auto;
      padding: 10px 12px;
      line-height: 1.5;
      resize: vertical;
    }

    input:not(.qty-inp):not(.custom-cb):hover,
    select:hover {
      border-color: var(--border-strong);
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--text-subtle);
    }

    select {
      cursor: pointer;
    }

    .qty-inp {
      width: 70px;
      height: 32px;
      padding: 0 8px;
      text-align: center;
      font-weight: 700;
      font-size: 13px;
      border: 1px solid var(--border);
      border-radius: var(--radius-xs);
      background: var(--bg-surface-light);
      color: var(--primary);
      outline: none;
      font-variant-numeric: tabular-nums;
      transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .qty-inp:focus {
      border-color: var(--border);
      background: var(--bg-surface-light);
      box-shadow: none;
    }

    /* Edit Product — mobile-first: 4-col grid (code 1/4 + name 3/4, paired fields, full rows) */
    #view-edit-product .form-group label {
      text-transform: none;
      letter-spacing: 0;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }

    #view-edit-product select,
    #view-edit-product input,
    #view-edit-product textarea {
      text-transform: none;
      font-weight: 600;
    }

    #view-edit-product select option {
      text-transform: none;
    }

    .ep-form-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      align-items: start;
    }

    .ep-form-span-full,
    .ep-form-section-title {
      grid-column: 1 / -1;
    }

    .ep-span-1 {
      grid-column: span 1;
      min-width: 0;
    }

    .ep-span-2 {
      grid-column: span 2;
      min-width: 0;
    }

    .ep-span-3 {
      grid-column: span 3;
      min-width: 0;
    }

    @media (min-width: 900px) {
      .ep-form-grid {
        gap: 14px 16px;
      }
    }

    /* Add/Edit Catalog Item modal (Purchase Intelligence "New Product", etc.) —
       3 columns on PC, 2 on mobile/tablet, 1 on very narrow screens. */
    .ci-form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    @media (min-width: 420px) {
      .ci-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 700px) {
      .ci-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .ci-form-span-full {
      grid-column: 1 / -1;
    }

    .ci-form-grid.pi-quick-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (min-width: 700px) {
      .ci-form-grid.pi-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .pm-param-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    @media (min-width: 420px) {
      .pm-param-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 640px) {
      .pm-param-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    .pm-param-span-full {
      grid-column: 1 / -1;
    }

    .pm-field-label {
      font-size: 9.5px;
      font-weight: 800;
      color: var(--text-muted);
      margin-bottom: 4px;
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .ep-form-section-title {
      grid-column: 1 / -1;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-main);
      margin: 4px 0 0;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }

    .ep-form-section-title:first-child {
      border-top: none;
      padding-top: 0;
      margin-top: 0;
    }

    /* Invoice scan — header fields */
    .is-header-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .is-header-grid .is-field-vendor {
      grid-column: 1 / -1;
    }

    @media (min-width: 768px) {
      .is-header-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }

      .is-header-grid .is-field-id {
        grid-column: 1 / span 2;
        grid-row: 1;
      }

      .is-header-grid .is-field-payment {
        grid-column: 3 / span 2;
        grid-row: 1;
      }

      .is-header-grid .is-field-date {
        grid-column: 5 / span 2;
        grid-row: 1;
      }

      .is-header-grid .is-field-doc {
        grid-column: 1 / span 2;
        grid-row: 2;
      }

      .is-header-grid .is-field-branch {
        grid-column: 3 / span 2;
        grid-row: 2;
      }

      .is-header-grid .is-field-total {
        grid-column: 5 / span 2;
        grid-row: 2;
      }

      .is-header-grid .is-field-vendor {
        grid-column: 1 / -1;
        grid-row: 3;
      }
    }

    /* Invoice item editor layout */
    .ie-invoice-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    #is-item-editor-modal {
      padding: 16px !important;
    }

    #is-item-editor-modal .ie-editor-panel {
      width: 100%;
      max-width: 640px;
      margin: 0;
      padding: 16px;
      border-radius: 20px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      background: var(--bg-surface);
    }

    .ie-row-name-code {
      display: grid;
      grid-template-columns: 3fr 1fr;
      gap: 8px;
    }

    .ie-row-3 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .ie-row-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    @media (min-width: 560px) {
      .ie-row-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .ie-section-label {
      font-size: 9px;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin: 4px 0 0;
      padding-top: 4px;
      border-top: 1px solid var(--border);
    }

    .ie-label-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 4px;
    }

    .ie-label-row>span {
      font-size: 9px;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    .ie-parse-link {
      background: none;
      border: none;
      padding: 0;
      font-size: 9px;
      font-weight: 800;
      color: var(--primary);
      cursor: pointer;
      text-transform: none;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .ie-parse-link:hover {
      text-decoration: underline;
    }

    .ie-pcs-only {
      display: none;
    }

    .ie-pcs-only.is-visible {
      display: block;
    }

    .ie-row-linked {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36px;
      gap: 8px;
      align-items: end;
    }

    .ie-row-linked .form-group {
      min-width: 0;
    }

    #ie-unlink-btn {
      width: 36px;
      height: 36px;
      min-width: 36px;
      max-width: 36px;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-color: var(--danger);
      color: var(--danger);
    }

    #ie-unlink-btn i {
      font-size: 13px;
      margin: 0;
    }

    #ie-apply-price-btn {
      width: 36px;
      height: 36px;
      min-width: 36px;
      max-width: 36px;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-color: var(--success);
      color: var(--success);
    }

    #ie-apply-price-btn:disabled {
      border-color: var(--text-muted);
      color: var(--text-muted);
      opacity: 0.45;
      cursor: not-allowed;
    }

    #ie-apply-price-btn i {
      font-size: 13px;
      margin: 0;
    }

    #btn-invoice-inv-sync,
    #main-nav.nav-soft #btn-invoice-inv-sync,
    #main-nav.nav-soft .btn-outline#btn-invoice-inv-sync {
      width: 48px !important;
      height: 48px !important;
      min-width: 48px !important;
      max-width: 48px !important;
      flex: 0 0 48px !important;
      padding: 0 !important;
      margin: 0 !important;
      border-radius: 10px !important;
      border-width: 1px !important;
      box-shadow: none !important;
      font-size: 12px;
      line-height: 1;
    }

    #btn-invoice-inv-sync i,
    #main-nav.nav-soft #btn-invoice-inv-sync i {
      margin: 0 !important;
      font-size: 16px !important;
    }

    #main-nav.nav-soft #btn-invoice-inv-sync.is-on,
    #main-nav.nav-soft .btn-outline#btn-invoice-inv-sync.is-on {
      background: #ecfdf5 !important;
      color: #15803d !important;
      border-color: #22c55e !important;
    }

    #main-nav.nav-soft #btn-invoice-inv-sync:not(.is-on),
    #main-nav.nav-soft .btn-outline#btn-invoice-inv-sync:not(.is-on) {
      background: var(--bg-surface-light) !important;
      color: #94a3b8 !important;
      border-color: #cbd5e1 !important;
    }

    .ie-invoice-grid .ie-full {
      width: 100%;
    }

    .ie-invoice-grid input:not([readonly]),
    .ie-invoice-grid select,
    #is-lookup-modal .ie-lookup-search {
      background: var(--bg-surface);
      color: var(--text-main);
    }

    .ie-invoice-grid input[readonly] {
      background: var(--bg-surface-light);
      color: var(--text-main);
    }

    .ep-field {
      height: 38px;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0 8px;
      width: 100%;
      background: var(--bg-surface);
      color: var(--text-main);
      outline: none;
      font-size: 12px;
    }

    .ep-field-readonly {
      background: var(--bg-surface-light);
      color: var(--text-muted);
    }

    /* GLOBAL STOCK TABLE - PREMIUM MOBILE-FIRST */
    .table-responsive {
      width: 100%;
      max-height: 64vh;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      background: var(--bg-surface);
    }

    .glb-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-family: 'Outfit', sans-serif;
    }

    .glb-table th,
    .glb-table td {
      padding: 4px;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      font-size: 10px;
    }

    .glb-table thead th {
      background: var(--bg-surface-light);
      color: var(--text-muted);
      font-weight: 800;
      text-transform: uppercase;
      position: sticky;
      top: 0;
      z-index: 20;
      height: 32px;
    }

    .glb-table .sticky-col {
      position: sticky;
      left: 0;
      background: var(--bg-surface);
      z-index: 21;
      width: 48%;
      min-width: 48%;
      max-width: 48%;
      font-weight: 600;
      border-right: 1px solid var(--border);
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .glb-table thead th.sticky-col {
      z-index: 30;
      background: var(--bg-surface-light);
    }

    .glb-table tfoot td {
      position: sticky;
      bottom: 0;
      z-index: 22;
      background: var(--bg-surface-light);
      border-top: 2px solid var(--border);
      font-weight: 900;
      font-size: 9px;
      color: var(--success);
      padding: 8px 4px;
      white-space: nowrap;
    }

    .glb-table tfoot td.sticky-col {
      z-index: 23;
      left: 0;
      color: var(--text-muted);
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
    }

    body.dark .glb-table tfoot td {
      background: var(--bg-surface-light);
    }

    .stock-cell {
      text-align: center;
      width: 7%;
      min-width: 7%;
      font-variant-numeric: tabular-nums;
    }

    /* Stock Level Status Classes */
    .lvl-critical {
      background: var(--danger-soft);
      color: var(--danger-strong);
      font-weight: 800;
    }

    .lvl-warning {
      background: var(--warning-soft);
      color: var(--warning-strong);
      font-weight: 800;
    }

    .lvl-normal {
      background: var(--bg-surface-light);
      color: var(--text-muted);
      font-weight: 600;
    }

    .lvl-empty {
      color: var(--text-subtle);
    }

    .qty-inp:focus {
      border-color: var(--border);
      background: var(--bg-surface-light);
    }

    /* Search + action rows: input ~4/5, button ~1/5 (overrides .btn width:100%) */
    .search-action-row {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .search-action-row>input[type="text"],
    .search-action-row>input:not([type]),
    .search-action-row>.search-input {
      flex: 4 1 0% !important;
      min-width: 0 !important;
      width: auto !important;
      max-width: none !important;
      margin: 0 !important;
    }

    .search-action-row>.btn,
    .search-action-row>.btn-outline,
    .search-action-row>button.btn,
    .search-action-row>button.btn-outline {
      flex: 1 1 0% !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      margin: 0 !important;
      margin-bottom: 0 !important;
      height: 36px !important;
      padding: 0 8px !important;
      font-size: 11px !important;
      white-space: nowrap;
      box-sizing: border-box;
    }

    .btn {
      width: 100%;
      height: 44px;
      background: var(--primary);
      color: var(--primary-contrast);
      border: 1px solid var(--primary);
      border-radius: 10px;
      font-weight: 700;
      font-size: 0.75rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform var(--dur-fast) var(--ease),
        filter var(--dur) var(--ease),
        background var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
      text-transform: none;
      letter-spacing: 0.01em;
      margin-bottom: var(--space-sm);
      position: relative;
      overflow: hidden;
      box-shadow: none;
    }

    .btn:hover:not(:disabled):not(.btn-disabled) {
      filter: brightness(1.06);
      box-shadow: none;
    }

    .btn:active:not(:disabled):not(.btn-disabled) {
      transform: translateY(1px) scale(0.99);
      filter: brightness(0.96);
      box-shadow: none;
    }

    .btn:focus-visible {
      outline: none;
      box-shadow: none;
    }

    .btn-outline {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      color: var(--text-muted);
      height: 44px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.01em;
      text-transform: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      box-shadow: none;
      transition: transform var(--dur-fast) var(--ease),
        background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
    }

    .btn-outline:hover:not(:disabled) {
      background: var(--bg-surface-light);
      border-color: var(--border-strong);
      color: var(--text-main);
      box-shadow: none;
    }

    .btn-outline:active:not(:disabled) {
      transform: translateY(1px) scale(0.99);
      background: var(--bg-surface-light);
      box-shadow: none;
    }

    .btn-outline:focus-visible {
      outline: none;
      border-color: var(--border);
      box-shadow: none;
    }

    /* Semantic buttons share the same chrome — only danger stays red */
    .btn-success,
    .btn-warning {
      background: var(--primary) !important;
      color: var(--primary-contrast) !important;
      border-color: var(--primary) !important;
    }

    .btn-danger {
      background: var(--danger) !important;
      color: #fff !important;
      border-color: var(--danger) !important;
    }

    .btn-disabled,
    .btn:disabled,
    .btn-outline:disabled {
      background: var(--bg-sunken) !important;
      color: var(--text-subtle) !important;
      cursor: not-allowed !important;
      border-color: var(--border) !important;
      box-shadow: none !important;
      filter: none !important;
      transform: none !important;
      opacity: 1;
    }

    /* Soft footer nav — WhatsApp / Shopping List / Order Management / Suppliers */
    #main-nav.nav-soft .btn,
    #main-nav.nav-soft .btn-outline {
      text-transform: none;
      letter-spacing: 0.01em;
      font-weight: 700;
      font-size: 0.75rem;
      height: 44px;
      border-radius: 10px;
      box-shadow: none;
      margin-bottom: 0;
    }

    /* Suppliers list — compact rows (not dash-card tiles) */
    .sup-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 0 15px 20px;
      width: calc(100% - 30px);
    }

    .sup-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 12px;
      min-height: 44px;
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: var(--shadow-xs);
      cursor: pointer;
      box-sizing: border-box;
      transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
    }

    .sup-row:active {
      background: var(--bg-surface-light);
    }

    .sup-row:hover {
      border-color: var(--primary-soft-border);
    }

    .sup-row__main {
      min-width: 0;
      flex: 1;
      text-align: left;
    }

    .sup-row__name {
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--text-main);
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sup-row__desc {
      font-size: 0.625rem;
      font-weight: 500;
      color: var(--text-muted);
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sup-row__meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .sup-badge {
      display: inline-flex;
      align-items: center;
      height: 20px;
      padding: 0 7px;
      border-radius: 6px;
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .sup-badge--credit {
      background: var(--warning-soft);
      color: var(--warning-strong);
    }

    .sup-badge--cash {
      background: var(--success-soft);
      color: var(--success-strong);
    }

    .sup-badge--due {
      background: var(--bg-surface-light);
      color: var(--text-main);
      text-transform: none;
    }

    .sup-row__chevron {
      color: var(--text-muted);
      font-size: 0.65rem;
    }

    .sup-empty {
      padding: 48px 20px;
      text-align: center;
      color: var(--text-muted);
    }

    .sup-empty i {
      font-size: 2.5rem;
      opacity: 0.15;
      margin-bottom: 12px;
    }

    .sup-empty__title {
      font-weight: 700;
      font-size: 0.9375rem;
      color: var(--text-main);
    }

    .sup-empty__sub {
      font-size: 0.75rem;
      margin-top: 6px;
    }

    #main-nav.nav-soft .btn {
      background: var(--primary) !important;
      border: 1px solid var(--primary) !important;
      color: var(--primary-contrast) !important;
    }

    #main-nav.nav-soft .btn.btn-danger {
      background: var(--danger) !important;
      border-color: var(--danger) !important;
      color: #fff !important;
    }

    #main-nav.nav-soft .btn-outline {
      background: var(--bg-surface) !important;
      border: 1px solid var(--border) !important;
      color: var(--text-muted) !important;
    }

    #main-nav.nav-soft .btn:hover:not(:disabled) {
      filter: brightness(1.05);
      box-shadow: none;
    }

    #main-nav.nav-soft .btn-outline:hover:not(:disabled) {
      filter: none;
      box-shadow: none;
      border-color: var(--border-strong);
      color: var(--text-main);
    }

    .btn-logout {
      background: transparent;
      border: 1px solid var(--danger-soft);
      color: var(--danger);
      height: 48px;
      border-radius: var(--radius-md);
      font-weight: 700;
      letter-spacing: 0.045em;
      text-transform: uppercase;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .btn-logout:hover {
      background: var(--danger-soft);
      border-color: var(--danger);
    }

    .btn-group-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);
    }

    .btn-group-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--space-md);
    }

    .btn-group-2 .btn,
    .btn-group-2 .btn-outline,
    .btn-group-3 .btn,
    .btn-group-3 .btn-outline {
      margin-bottom: 0;
    }

    .mkt-card.row-checked {
      background: rgba(34, 197, 94, 0.08) !important;
      border-left: 4px solid var(--success) !important;
    }

    .mkt-card {
      transition: all 0.2s ease;
      border-left: 4px solid transparent;
    }

    .table-responsive {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      /* Borders removed for edge-to-edge mobile feel */
    }

    .std-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.75rem;
      table-layout: fixed;
    }

    .std-table th {
      background: var(--bg-surface-light);
      color: var(--text-muted);
      padding: 9px 8px;
      text-align: left;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      border-bottom: 1px solid var(--border);
      font-size: var(--fs-2xs);
      white-space: nowrap;
    }

    .std-table td {
      padding: 6px 8px;
      border-bottom: 1px solid var(--border-subtle);
      vertical-align: middle;
      line-height: 1.3;
      font-size: var(--fs-sm);
    }

    .std-table tbody tr:last-child td {
      border-bottom: none;
    }

    .custom-cb {
      -webkit-appearance: none;
      appearance: none;
      width: 24px;
      height: 24px;
      border: 2px solid var(--border);
      border-radius: 6px;
      background: var(--bg-surface);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }

    .custom-cb:checked {
      background: var(--success);
      border-color: var(--success);
    }

    .custom-cb:checked::after {
      content: '\f00c';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      color: white;
      font-size: 14px;
    }

    .stock-badge {
      display: inline-block;
      font-size: var(--fs-2xs);
      font-weight: 600;
      padding: 2px 7px;
      border-radius: var(--radius-pill);
      margin-top: 3px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      line-height: 1.5;
    }

    .stock-badge.stock-normal,
    .stock-normal {
      color: var(--text-muted);
    }

    .stock-badge.stock-normal {
      background: var(--bg-sunken);
    }

    .stock-badge.stock-warning,
    .stock-warning {
      color: var(--warning-strong);
    }

    .stock-badge.stock-warning {
      background: var(--warning-soft);
    }

    .stock-badge.stock-critical,
    .stock-critical {
      color: var(--danger-strong);
    }

    .stock-badge.stock-critical {
      background: var(--danger-soft);
    }

    .inv-actions-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 15px;
    }

    .inv-actions-grid .dash-card:first-child {
      grid-column: span 2;
      padding: 18px;
    }

    .inv-actions-grid .dash-card {
      margin-bottom: 0;
      padding: 12px;
      flex-direction: row;
      justify-content: center;
      gap: 10px;
    }

    .inv-actions-grid .dash-card span {
      font-size: 11px;
      margin-top: 0;
    }

    /* Cards & Items */
    .order-card,
    .mkt-item {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 12px;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .oc-title {
      font-weight: 600;
      font-size: 11px;
      color: var(--text-main);
      margin-bottom: 4px;
    }

    .item-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .pill {
      font-size: var(--fs-2xs);
      font-weight: 600;
      padding: 2px 8px;
      border-radius: var(--radius-pill);
      background: var(--bg-surface-light);
      color: var(--text-muted);
      border: 1px solid var(--border);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      line-height: 1.5;
      white-space: nowrap;
    }

    .pill.stock-normal {
      background: var(--bg-sunken);
      color: var(--text-muted);
      border-color: var(--border);
    }

    .pill.stock-warning {
      background: var(--warning-soft);
      color: var(--warning-strong);
      border-color: var(--warning-soft);
    }

    .pill.stock-critical {
      background: var(--danger-soft);
      color: var(--danger-strong);
      border-color: var(--danger-soft);
    }

    .oc-stock {
      font-size: 0.7rem;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: var(--space-md);
      padding: 0 10px;
    }

    .stat-card {
      position: relative;
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 12px 10px;
      text-align: center;
      box-shadow: var(--shadow-xs);
      overflow: hidden;
    }

    /* Hairline accent that ties every KPI tile back to the brand. */
    .stat-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 2px;
      background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
      opacity: 0.9;
    }

    .stat-val {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--primary);
      margin-bottom: 3px;
      line-height: 1.1;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }

    .stat-lbl {
      font-size: var(--fs-2xs);
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      line-height: 1.25;
    }

    /* Dashboard Grid */
    .dash-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 15px;
    }

    .dash-card {
      position: relative;
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 18px 14px;
      min-height: 108px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-align: center;
      cursor: pointer;
      box-shadow: var(--shadow-xs);
      overflow: visible !important;
      -webkit-user-select: none;
      user-select: none;
    }

    .dash-card:active {
      transform: scale(0.97);
      background: var(--bg-surface-light);
    }

    .dash-card:focus-visible {
      outline: none;
      border-color: var(--primary);
      box-shadow: var(--ring);
    }

    /* The icon tile is built entirely in CSS so no view markup has to change.
       Scoped to the tile's own icon: several JS-generated list rows reuse the
       .dash-card class and carry secondary icons (chevrons, edit pencils) that
       must stay plain. */
    .dash-card>i:first-child,
    .dash-card i.dash-icon,
    .dash-card .dash-count {
      font-size: 1.15rem;
      color: var(--primary);
      width: 44px;
      height: 44px;
      flex: none;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: var(--primary-soft);
      border: 1px solid var(--primary-soft-border);
      transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
        border-color var(--dur) var(--ease), transform var(--dur) var(--ease-spring);
    }

    .dash-card .dash-count {
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 1.2rem;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .dash-card:hover>i:first-child,
    .dash-card:hover i.dash-icon,
    .dash-card:hover .dash-count {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff !important;
      transform: scale(1.05);
    }

    .dash-card .dash-label,
    .dash-card span {
      font-family: var(--font-sans) !important;
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--text-main);
      text-transform: uppercase;
      letter-spacing: 0.045em;
      line-height: 1.25;
      margin: 0;
      padding: 0;
    }

    .dash-card.primary {
      background: linear-gradient(150deg, var(--brand-600), var(--brand-800));
      border-color: var(--brand-700);
      box-shadow: var(--shadow-md);
    }

    .dash-card.primary>i:first-child,
    .dash-card.primary i.dash-icon {
      background: rgba(255, 255, 255, 0.14) !important;
      border-color: rgba(255, 255, 255, 0.22) !important;
    }

    .dash-card.primary i,
    .dash-card.primary .dash-label,
    .dash-card.primary span {
      color: white !important;
    }

    .dash-card.disabled {
      background: var(--bg-surface-light);
      border-color: var(--border);
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
      filter: grayscale(1);
      box-shadow: none;
    }

    .dash-card.disabled i,
    .dash-card.disabled span {
      color: var(--text-subtle) !important;
    }

    /* Order Reports / Purchase Report — compact table report */
    #view-order-reports,
    #view-purchase-report {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Purchase Report — desktop two-column layout */
    #view-purchase-report .pr-layout {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      min-height: 0;
      padding: 8px 10px 10px;
      box-sizing: border-box;
      background: #f6f9f9;
    }

    body.dark #view-purchase-report .pr-layout {
      background: var(--bg-main);
    }

    #view-purchase-report .pr-panel-filters,
    #view-purchase-report .pr-panel-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 0;
      min-width: 0;
    }

    #view-purchase-report .pr-panel-filters {
      flex: 0 0 auto;
    }

    #view-purchase-report .pr-panel-list {
      flex: 1;
      background: #fff;
      border: 1px solid #e2e8e8;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;
    }

    body.dark #view-purchase-report .pr-panel-list {
      background: var(--bg-surface);
      border-color: var(--border);
    }

    #view-purchase-report .pr-panel-list .or-tools {
      display: flex;
      flex: 0 0 auto;
      margin: 0;
    }

    #view-purchase-report .pr-panel-list .or-results {
      flex: 1;
      min-height: 0;
      overflow: auto;
      padding: 0;
    }

    #view-purchase-report .pr-search-btn {
      width: 100%;
      justify-content: center;
    }

    #view-purchase-report #pr-stats {
      display: grid;
    }

    @media (min-width: 900px) {
      #view-purchase-report .pr-layout {
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
        padding: 12px 14px 14px;
      }

      #view-purchase-report .pr-panel-filters {
        flex: 0 0 320px;
        width: 320px;
        max-width: 340px;
        overflow-y: auto;
      }

      #view-purchase-report .pr-panel-list {
        flex: 1;
      }

      #view-purchase-report .pr-panel-filters .or-date-row,
      #view-purchase-report .pr-panel-filters .or-filters-row {
        grid-template-columns: 1fr;
      }
    }

    .or-top {
      flex: 0 0 auto;
      padding: 8px 10px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: #f6f9f9;
      z-index: 2;
    }

    body.dark .or-top { background: var(--bg-main); }

    .or-filter-card {
      background: #fff;
      border: 1px solid #e2e8e8;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-sizing: border-box;
    }

    body.dark .or-filter-card {
      background: var(--bg-surface);
      border-color: var(--border);
    }

    .or-date-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .or-filters-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: end;
    }

    .or-field {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .or-field label {
      font-size: 9px;
      line-height: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: #404849;
      margin: 0;
      text-transform: uppercase;
    }

    body.dark .or-field label { color: var(--text-muted); }

    .or-input,
    .or-select {
      width: 100%;
      height: 34px;
      border: 1px solid #e2e8e8;
      border-radius: 8px;
      background: #fff;
      color: var(--text-main);
      font-size: 12px;
      font-weight: 600;
      padding: 0 8px !important;
      outline: none;
      box-sizing: border-box;
      min-width: 0;
      display: block;
    }

    body.dark .or-input,
    body.dark .or-select {
      background: var(--bg-surface);
      border-color: var(--border);
    }

    .or-input:focus,
    .or-select:focus {
      border-color: #0a444a;
      box-shadow: 0 0 0 1px #0a444a;
    }

    .or-generate-btn {
      width: auto;
      min-width: 110px;
      height: 34px;
      margin: 0 !important;
      border: none;
      border-radius: 8px;
      background: #0a444a;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      cursor: pointer;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-sizing: border-box;
      padding: 0 12px;
      white-space: nowrap;
    }

    .or-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .or-stat {
      background: #fff;
      border: 1px solid #e2e8e8;
      border-radius: 8px;
      padding: 6px 4px;
      text-align: center;
      min-height: 0;
    }

    body.dark .or-stat {
      background: var(--bg-surface);
      border-color: var(--border);
    }

    .or-stat-lbl {
      display: block;
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      color: #404849;
    }

    body.dark .or-stat-lbl { color: var(--text-muted); }

    .or-stat-val {
      display: block;
      font-size: 14px;
      line-height: 18px;
      font-weight: 800;
      color: #0a444a;
    }

    body.dark .or-stat-val { color: var(--primary); }

    .or-tools {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .or-cat-select {
      flex: 0 0 38%;
      max-width: 160px;
      height: 34px;
      border: 1px solid #e2e8e8;
      border-radius: 8px;
      background: #fff;
      color: var(--text-main);
      font-size: 11px;
      font-weight: 700;
      padding: 0 8px;
      outline: none;
      box-sizing: border-box;
      min-width: 0;
    }

    body.dark .or-cat-select {
      background: var(--bg-surface);
      border-color: var(--border);
    }

    .or-search-wrap {
      position: relative;
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
    }

    .or-search-wrap > i {
      position: absolute;
      left: 10px;
      color: #404849;
      font-size: 12px;
      pointer-events: none;
      z-index: 1;
    }

    body.dark .or-search-wrap > i { color: var(--text-muted); }

    .or-search {
      width: 100%;
      height: 34px;
      border: 1px solid #e2e8e8;
      border-radius: 8px;
      background: #fff;
      color: var(--text-main);
      padding: 0 8px 0 30px !important;
      font-size: 12px;
      outline: none;
      box-sizing: border-box;
    }

    body.dark .or-search {
      background: var(--bg-surface);
      border-color: var(--border);
    }

    .or-search:focus {
      border-color: #0a444a;
      box-shadow: 0 0 0 1px #0a444a;
    }

    .or-results {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      padding: 8px 10px 10px;
      display: flex;
      flex-direction: column;
      background: #f6f9f9;
    }

    body.dark .or-results { background: var(--bg-main); }

    .or-table-wrap {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      background: #fff;
      border: 1px solid #e2e8e8;
      border-radius: 10px;
    }

    body.dark .or-table-wrap {
      background: var(--bg-surface);
      border-color: var(--border);
    }

    .or-table {
      width: 100%;
      border-collapse: collapse;
      margin: 0;
      min-width: 280px;
    }

    .or-table th,
    .or-table td {
      padding: 6px 8px;
      font-size: 11px;
      line-height: 14px;
      border-bottom: 1px solid #eef2f2;
      vertical-align: middle;
    }

    body.dark .or-table th,
    body.dark .or-table td { border-bottom-color: var(--border); }

    .or-table th {
      background: #f1f4f4;
      color: #404849;
      font-weight: 700;
      font-size: 9px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      position: sticky;
      top: 0;
      z-index: 2;
      white-space: nowrap;
    }

    body.dark .or-table th {
      background: var(--bg-surface-light);
      color: var(--text-muted);
    }

    .or-table th.or-th-item,
    .or-table td.or-td-item {
      text-align: left;
      position: sticky;
      left: 0;
      background: #fff;
      z-index: 1;
      min-width: 120px;
      max-width: 180px;
      white-space: normal;
      word-break: break-word;
      font-weight: 600;
      color: #181c1d;
    }

    body.dark .or-table th.or-th-item,
    body.dark .or-table td.or-td-item {
      background: var(--bg-surface);
      color: var(--text-main);
    }

    .or-table th.or-th-item {
      background: #f1f4f4;
      z-index: 3;
    }

    body.dark .or-table th.or-th-item { background: var(--bg-surface-light); }

    .or-table th.or-th-qty,
    .or-table td.or-td-qty,
    .or-table th.or-th-branch,
    .or-table td.or-td-branch,
    .or-table th.or-th-total,
    .or-table td.or-td-total {
      text-align: center;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      color: #0a444a;
      white-space: nowrap;
      min-width: 48px;
    }

    body.dark .or-table td.or-td-qty,
    body.dark .or-table td.or-td-branch,
    body.dark .or-table td.or-td-total { color: var(--primary); }

    .or-table tr.or-cat-row td {
      background: #eef5f5;
      color: #0a444a;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      padding: 7px 8px;
      border-bottom: 1px solid #d7e3e4;
    }

    body.dark .or-table tr.or-cat-row td {
      background: rgba(10, 68, 74, 0.22);
      color: var(--primary);
      border-bottom-color: var(--border);
    }

    .or-table tr.or-cat-row td span {
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: #5a6a6b;
      margin-left: 4px;
    }

    .or-unit-inline {
      display: inline-block;
      margin-left: 6px;
      font-size: 9px;
      font-weight: 700;
      color: #6a7778;
      text-transform: uppercase;
    }

    #view-purchase-report .pr-tag-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
    }

    #view-purchase-report .pr-tag {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.3;
      color: #2f4f4f;
      background: #e8f2f1;
      border: 1px solid #d0e2e0;
      white-space: nowrap;
      max-width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    body.dark #view-purchase-report .pr-tag {
      color: var(--text-main);
      background: var(--bg-surface-light);
      border-color: var(--border);
    }

    #view-purchase-report .or-th-code,
    #view-purchase-report .or-td-code {
      width: 72px;
      text-align: center;
      white-space: nowrap;
    }

    #view-purchase-report .or-td-code {
      font-size: 11px;
      font-weight: 800;
      color: #5a6a6b;
    }

    body.dark #view-purchase-report .or-td-code {
      color: var(--text-muted);
    }

    .or-empty {
      text-align: center;
      padding: 28px 14px;
      color: #404849;
      border: 1px dashed #e2e8e8;
      border-radius: 10px;
      background: #f1f4f4;
    }

    body.dark .or-empty {
      color: var(--text-muted);
      border-color: var(--border);
      background: var(--bg-surface-light);
    }

    .or-empty > i {
      font-size: 28px;
      opacity: 0.28;
      color: #70797a;
      display: block;
      margin-bottom: 8px;
    }

    .or-empty-title {
      font-weight: 800;
      font-size: 12px;
      color: #181c1d;
      margin-bottom: 4px;
    }

    body.dark .or-empty-title { color: var(--text-main); }

    .or-empty-sub {
      font-size: 11px;
      line-height: 16px;
      color: #404849;
    }

    body.dark .or-empty-sub { color: var(--text-muted); }

    /* Wide tile for a two-column grid. */
    .dash-card--wide {
      grid-column: span 2;
      flex-direction: row;
      justify-content: flex-start;
      gap: 14px;
      text-align: left;
      min-height: 84px;
      padding: 16px 18px;
    }

    /* Icon accents — a little colour coding without breaking the palette. */
    .dash-card i.acc-success {
      background: var(--success-soft);
      border-color: rgba(15, 159, 119, 0.22);
      color: var(--success);
    }

    .dash-card:hover i.acc-success {
      background: var(--success);
      border-color: var(--success);
      color: #fff !important;
    }

    .dash-card i.acc-warning {
      background: var(--warning-soft);
      border-color: rgba(224, 140, 17, 0.24);
      color: var(--warning-strong);
    }

    .dash-card:hover i.acc-warning {
      background: var(--warning);
      border-color: var(--warning);
      color: #fff !important;
    }

    .dash-card i.acc-info {
      background: var(--info-soft);
      border-color: rgba(43, 127, 184, 0.22);
      color: var(--info);
    }

    .dash-card:hover i.acc-info {
      background: var(--info);
      border-color: var(--info);
      color: #fff !important;
    }

    .dash-card i.acc-neutral {
      background: var(--bg-sunken);
      border-color: var(--border);
      color: var(--text-muted);
    }

    .dash-card:hover i.acc-neutral {
      background: var(--n-600);
      border-color: var(--n-600);
      color: #fff !important;
    }

    .card-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      background: var(--danger);
      color: white;
      font-size: var(--fs-2xs);
      font-weight: 700;
      min-width: 20px;
      padding: 2px 6px;
      border-radius: var(--radius-pill);
      border: 2px solid var(--bg-surface);
      box-shadow: var(--shadow-sm);
      line-height: 1.35;
    }

    /* Login Icon Box */
    @keyframes logo-spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    /* =========================================================================
       DESKTOP LOGIN — Stitch Overview A language
       Full-bleed soft slate canvas, one centered card, user rows (not tiles).
       ========================================================================= */
    .login-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 24px 20px;
      width: 100%;
      background:
        radial-gradient(1200px 500px at 50% -10%, rgba(10, 68, 74, 0.08), transparent 60%),
        var(--bg-main);
    }

    .login-shell {
      width: 100%;
      max-width: 420px;
    }

    .login-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .icon-box {
      width: 48px;
      height: 48px;
      margin: 0 auto 12px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--primary);
      color: #fff;
      box-shadow: 0 8px 20px -8px rgba(10, 68, 74, 0.55);
    }

    .icon-box::before { display: none; }

    .icon-box i {
      position: static;
      font-size: 1.35rem;
      color: #fff;
      z-index: 1;
    }

    .app-abbr {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--text-main);
      letter-spacing: -0.03em;
      margin-bottom: 4px;
      line-height: 1.1;
    }

    .app-full-name {
      font-size: 0.75rem;
      color: var(--text-muted);
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin: 0;
    }

    .login-card {
      background: var(--bg-surface);
      padding: 22px;
      border-radius: 16px;
      border: 1px solid var(--border);
      box-shadow: 0 1px 2px rgba(6, 47, 52, 0.04), 0 12px 32px -16px rgba(6, 47, 52, 0.12);
    }

    .login-field { margin-bottom: 16px; }

    .login-field > .label,
    #view-login .label {
      font-size: 0.6875rem !important;
      font-weight: 600 !important;
      color: var(--text-muted) !important;
      text-transform: uppercase !important;
      letter-spacing: 0.06em !important;
      display: block !important;
      margin: 0 0 10px !important;
    }

    .login-input-group { position: relative; margin-top: 0; }

    .login-input-group i {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-subtle);
      font-size: 0.9rem;
      pointer-events: none;
    }

    .login-input-group .input,
    .login-input-group select,
    #view-login .login-input-group .input {
      width: 100% !important;
      padding-left: 42px !important;
      height: 48px !important;
      border-radius: 10px !important;
      background: var(--bg-surface-light) !important;
      border: 1px solid var(--border) !important;
      color: var(--text-main) !important;
      font-size: 1rem !important;
      font-weight: 600 !important;
      outline: none !important;
      letter-spacing: 0.35em;
      margin-bottom: 0 !important;
      transition: border-color 0.15s, box-shadow 0.15s !important;
    }

    .login-input-group .input:focus,
    #view-login .login-input-group .input:focus {
      border-color: var(--primary) !important;
      box-shadow: 0 0 0 3px rgba(10, 68, 74, 0.14) !important;
      background: var(--bg-surface) !important;
    }

        .user-cards-grid,
    #view-login .user-cards-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 8px !important;
      margin-top: 0 !important;
      padding: 0 !important;
      max-height: none;
      overflow: visible;
    }

    .user-card,
    #view-login .user-card {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      width: auto !important;
      min-height: 88px !important;
      text-align: center !important;
      background: var(--bg-surface-light) !important;
      border: 1px solid var(--border) !important;
      border-radius: 12px !important;
      padding: 10px 6px !important;
      cursor: pointer !important;
      position: relative !important;
      box-shadow: none !important;
      transform: none !important;
      animation: none !important;
      transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
      -webkit-user-select: none;
      user-select: none;
    }

    .user-card:hover,
    #view-login .user-card:hover {
      background: var(--bg-surface) !important;
      border-color: #C3CFD2 !important;
    }

    .user-card:active,
    #view-login .user-card:active { transform: scale(0.98) !important; }

    .user-card.active,
    #view-login .user-card.active {
      background: rgba(10, 68, 74, 0.06) !important;
      border-color: var(--primary) !important;
      border-width: 1.5px !important;
      box-shadow: 0 0 0 3px rgba(10, 68, 74, 0.10) !important;
      transform: none !important;
    }

    .user-card-icon,
    #view-login .user-card-icon {
      width: 40px !important;
      height: 40px !important;
      flex: none !important;
      border-radius: 50% !important;
      background: var(--border) !important;
      color: var(--primary) !important;
      display: grid !important;
      place-items: center !important;
      font-size: 0.75rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.02em;
      transition: background 0.15s, color 0.15s, box-shadow 0.15s !important;
      background-size: cover !important;
      background-position: center !important;
      overflow: hidden !important;
    }

    .user-card-icon--photo,
    #view-login .user-card-icon--photo {
      color: transparent !important;
      background-color: var(--border) !important;
    }

    .user-card.active .user-card-icon:not(.user-card-icon--photo),
    #view-login .user-card.active .user-card-icon:not(.user-card-icon--photo) {
      background: var(--primary) !important;
      color: #fff !important;
    }

    .user-card.active .user-card-icon--photo,
    #view-login .user-card.active .user-card-icon--photo {
      box-shadow: 0 0 0 2px var(--primary) !important;
    }

    .user-card-role,
    #view-login .user-card-role {
      display: none !important;
    }

    .user-card-meta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 0;
      width: 100%;
    }

    .user-card-name,
    #view-login .user-card-name {
      font-size: 0.6875rem !important;
      font-weight: 700 !important;
      color: var(--text-main) !important;
      text-transform: none !important;
      letter-spacing: -0.01em !important;
      line-height: 1.2 !important;
      word-break: break-word !important;
      max-width: 100%;
    }

    .user-card.active .user-card-name,
    #view-login .user-card.active .user-card-name {
      color: var(--primary) !important;
    }

    .user-card-role,
    #view-login .user-card-role {
      display: inline-flex !important;
      align-self: center !important;
      font-size: 0.5625rem !important;
      font-weight: 600 !important;
      color: var(--text-muted) !important;
      text-transform: uppercase !important;
      letter-spacing: 0.04em !important;
      background: var(--bg-surface) !important;
      border: 1px solid var(--border) !important;
      padding: 1px 6px !important;
      border-radius: 999px !important;
      margin-top: 0 !important;
    }

    .user-card.active .user-card-role,
    #view-login .user-card.active .user-card-role {
      background: rgba(10, 68, 74, 0.08) !important;
      border-color: transparent !important;
      color: var(--primary) !important;
    }

    .user-card-badge,
    #view-login .user-card-badge {
      position: absolute !important;
      top: 4px !important;
      right: 4px !important;
      margin-left: 0 !important;
      color: var(--success) !important;
      font-size: 0.75rem !important;
      opacity: 0 !important;
      transform: scale(0.8) !important;
      transition: opacity 0.15s, transform 0.15s !important;
    }

    .user-card.active .user-card-badge,
    #view-login .user-card.active .user-card-badge {
      opacity: 1 !important;
      transform: scale(1) !important;
    }

.btn-login,
    #view-login .btn-login {
      width: 100% !important;
      height: 48px !important;
      background: var(--primary) !important;
      color: #fff !important;
      border: none !important;
      border-radius: 10px !important;
      font-size: 0.875rem !important;
      font-weight: 600 !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      cursor: pointer !important;
      margin-top: 4px !important;
      box-shadow: 0 6px 16px -8px rgba(10, 68, 74, 0.55);
      transition: opacity 0.15s, transform 0.15s !important;
    }

    .btn-login:hover { opacity: 0.94; }

    .btn-login:active,
    #view-login .btn-login:active { transform: scale(0.99) !important; }

    #view-login .cards-loading-placeholder {
      text-align: center;
      color: var(--text-muted);
      font-size: 0.8125rem;
      padding: 24px 0;
    }

    @media (min-width: 1024px) {
      body:not(.has-shell) { background: var(--bg-main); }

      body:not(.has-shell) .app-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent;
      }

      body:not(.has-shell) .view-box { max-width: 100% !important; }

      .login-shell { max-width: 440px; }
      .login-card { padding: 24px; }
    }

    /* Loader - UNIFIED GLASSMORPHIC DESIGN */
    #loader {
      position: fixed;
      inset: 0;
      background: rgba(248, 250, 252, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: var(--z-loader);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }

    html.preload #loader {
      display: flex !important;
      background: var(--bg-main);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    html.preload .view-box.active {
      animation: none !important;
    }

    /* Full-viewport dim — covers sidebar + app; modals/dialogs sit above this. */
    #wms-blocking-scrim {
      display: none;
      position: fixed;
      inset: 0;
      z-index: var(--z-scrim);
      background: rgba(6, 47, 52, 0.28);
      backdrop-filter: blur(6px) saturate(140%);
      -webkit-backdrop-filter: blur(6px) saturate(140%);
      pointer-events: none;
    }

    /* Modals are top-level (outside .app-wrapper) so the scrim can dim/blur
       both the sidebar and the dashboard without elevating the app shell. */

    /* Single dim layer — non-top modal backdrops stay transparent so scrim handles the fade.
       Nested topmost (.wms-overlay-top) restores its own dim/blur over lower dialogs. */
    body.wms-blocking-overlay .modal-overlay,
    body.wms-blocking-overlay #price-detail-modal,
    body.wms-blocking-overlay #cat-pick-modal,
    body.wms-blocking-overlay #is-item-editor-modal,
    body.wms-blocking-overlay #is-lookup-modal,
    body.wms-blocking-overlay #shopping-purchase-modal,
    body.wms-blocking-overlay #pm-bulk-review-modal,
    body.wms-blocking-overlay #pm-unit-audit-modal,
    body.wms-blocking-overlay #pm-ai-matching-modal,
    body.wms-blocking-overlay #pm-online-search-modal,
    body.wms-blocking-overlay #pm-formula-wizard-modal,
    body.wms-blocking-overlay #is-ocr-logs-modal,
    body.wms-blocking-overlay #whatsapp-import-modal,
    body.wms-blocking-overlay #product-select-modal,
    body.wms-blocking-overlay #edit-order-modal,
    body.wms-blocking-overlay #wa-paste-modal {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    body.wms-blocking-overlay.wms-nested-overlay .wms-overlay-top {
      background: rgba(6, 47, 52, 0.42) !important;
      backdrop-filter: blur(6px) saturate(140%) !important;
      -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
    }

    #loader,
    #loader *:not(i):not([class*="fa-"]) {
      font-family: 'Inter', sans-serif !important;
    }

    .loader-spinner-container {
      position: relative;
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .loader-spinner {
      width: 100%;
      height: 100%;
      border: 4px solid var(--border);
      border-top: 4px solid var(--primary);
      border-radius: 50%;
      animation: spin 0.8s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
    }

    .loader-icon {
      position: absolute;
      color: var(--primary);
      font-size: 24px;
      animation: breathe 1.5s ease-in-out infinite;
    }

    #loader-status {
      font-size: 0.8rem;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: 1px;
      text-transform: uppercase;
      animation: pulse 1.5s infinite;
      text-align: center;
      max-width: calc(100vw - 48px);
      margin: 0 24px;
      padding: 0 4px;
      box-sizing: border-box;
      word-break: break-word;
      line-height: 1.35;
    }

    #loader .loader-content {
      width: 100%;
      max-width: 100%;
      padding: 0 24px;
      box-sizing: border-box;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes breathe {

      0%,
      100% {
        transform: scale(0.9);
        opacity: 0.8;
      }

      50% {
        transform: scale(1.1);
        opacity: 1;
      }
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

    /* Anti-Hang retry warning styles */
    .loader-retry-box {
      margin-top: 15px;
      text-align: center;
      animation: fadeInUp 0.4s ease-out;
      max-width: calc(100vw - 48px);
      margin-left: auto;
      margin-right: auto;
      padding: 0 8px;
      box-sizing: border-box;
    }

    .loader-retry-text {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--danger);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      line-height: 1.35;
      word-break: break-word;
    }

    .loader-retry-btn {
      background: var(--danger);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      font-size: 0.65rem;
      font-weight: 800;
      cursor: pointer;
      text-transform: uppercase;
      transition: all 0.2s;
    }

    .loader-retry-btn:active {
      transform: scale(0.95);
    }

    @media print {

      body,
      .app-wrapper,
      .view-box,
      .scroll-area {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
      }

      .app-header,
      .sub-header,
      .bottom-nav,
      .btn,
      .btn-outline,
      .sticky-header-group,
      .notice-box,
      .inv-actions-grid,
      .unified-search,
      .card:not(#admin-rep-area *) {
        display: none !important;
      }

      .view-box.active {
        display: block !important;
      }

      #view-admin-reports {
        max-width: 100% !important;
      }
    }

    /* Alias Check page — controls left, results right (not a dialog) */
    #view-pi-alias-check .alias-check-layout {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      background: var(--bg-base);
    }
    #view-pi-alias-check .alias-check-side {
      flex: 0 0 210px;
      width: 210px;
      max-width: 42%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px;
      border-right: 1px solid var(--border);
      background: var(--bg-surface);
      overflow-y: auto;
      box-sizing: border-box;
    }
    #view-pi-alias-check .alias-check-tabs {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    #view-pi-alias-check .alias-check-tab {
      width: 100%;
      text-align: left;
      min-height: 38px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg-surface-light);
      color: var(--text-main);
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      padding: 8px 10px;
      line-height: 1.25;
    }
    #view-pi-alias-check .alias-check-tab.active-tab {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }
    #view-pi-alias-check .alias-check-toolbar {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    #view-pi-alias-check .alias-check-range {
      display: none;
      flex-direction: column;
      gap: 6px;
    }
    #view-pi-alias-check .alias-check-range label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
    }
    #view-pi-alias-check .alias-check-range input {
      height: 34px;
      width: 100%;
      box-sizing: border-box;
      font-weight: 700;
      background: var(--bg-base);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0 8px;
      font-size: 12px;
    }
    #view-pi-alias-check #alias-scan-btn {
      height: 38px;
      width: 100%;
      margin: 0;
      padding: 0 12px;
      border: none;
      border-radius: 10px;
      background: var(--primary);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    #view-pi-alias-check #alias-scan-btn:disabled {
      opacity: 0.6;
      cursor: default;
    }
    #view-pi-alias-check #alias-scan-stat {
      display: none;
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      line-height: 1.4;
    }
    #view-pi-alias-check .alias-check-main {
      flex: 1;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 10px 12px 12px;
      box-sizing: border-box;
    }
    #view-pi-alias-check .alias-check-main > div {
      flex: 1;
      min-height: 0;
    }

    /* Inventory tool pages — controls left, results right */
    .ops-split {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      background: var(--bg-base);
    }
    .ops-side {
      flex: 0 0 220px;
      width: 220px;
      max-width: 42%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px;
      border-right: 1px solid var(--border);
      background: var(--bg-surface);
      overflow-y: auto;
      box-sizing: border-box;
    }
    .ops-note {
      margin: 0;
      font-size: 11px;
      line-height: 1.45;
      color: var(--text-muted);
      font-weight: 600;
    }
    .ops-stats {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 10px;
      font-weight: 800;
    }
    .ops-stats span {
      display: block;
      padding: 6px 8px;
      border-radius: 8px;
    }
    .ops-field {
      width: 100%;
      height: 36px;
      box-sizing: border-box;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 700;
      background: var(--bg-base);
      color: var(--text-main);
      outline: none;
    }

    #view-supplier-analytics .sa-lbl {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
    }
    #view-supplier-analytics .sa-lbl span {
      text-transform: uppercase;
    }
    #view-supplier-analytics .sa-run {
      width: 100%;
      height: 36px;
      border: 0;
      border-radius: 8px;
      background: var(--primary);
      color: #fff;
      font-weight: 800;
      font-size: 12px;
      cursor: pointer;
    }
    #view-supplier-analytics .sa-wrap {
      flex: 1;
      min-height: 0;
      overflow: auto;
    }
    #view-supplier-analytics .sa-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }
    #view-supplier-analytics .sa-table th,
    #view-supplier-analytics .sa-table td {
      border-bottom: 1px solid var(--border);
      padding: 7px 8px;
      text-align: left;
      vertical-align: top;
    }
    #view-supplier-analytics .sa-table th {
      position: sticky;
      top: 0;
      background: var(--bg-surface);
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
    }
    #view-supplier-analytics .sa-table td.num,
    #view-supplier-analytics .sa-table th.num { text-align: right; white-space: nowrap; }
    #view-supplier-analytics .sa-table tfoot td {
      position: sticky;
      bottom: 0;
      background: var(--bg-surface);
      font-weight: 800;
      border-top: 1px solid var(--border);
    }
    #view-supplier-analytics .sa-empty {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 30px 16px;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 700;
    }
    .ops-side .btn,
    .ops-side .btn-outline,
    .ops-side #pdm-merge-actions button,
    .ops-side #pi-ai-match-actions button {
      width: 100%;
      height: 36px;
      margin: 0;
      justify-content: center;
      box-sizing: border-box;
    }
    .ops-side #pdm-merge-actions,
    .ops-side #pi-ai-match-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ops-main {
      flex: 1;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 10px 12px 12px;
      box-sizing: border-box;
    }
    .ops-main > #pi-suspect-loading,
    .ops-main > #pi-suspect-empty,
    .ops-main > #pi-suspect-list,
    .ops-main > #pi-suspect-scan-banner,
    .ops-main > #pi-noinv-loading,
    .ops-main > #pi-noinv-empty,
    .ops-main > #pi-noinv-list,
    .ops-main > #pi-ai-match-loading,
    .ops-main > #pi-ai-match-content,
    .ops-main > #pdm-merge-loading,
    .ops-main > #pdm-merge-content {
      flex: 1;
      min-height: 0;
    }

    /* Alias Check — compact results table */
    .alias-wrong-table-wrap {
      flex: 1;
      min-height: 0;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-surface);
    }

    .alias-wrong-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 10px;
      table-layout: fixed;
    }

    .alias-wrong-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--bg-surface-light);
      text-align: left;
      padding: 6px 8px;
      font-weight: 800;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .alias-wrong-table td {
      padding: 6px 8px;
      border-bottom: 1px solid var(--border-subtle);
      vertical-align: middle;
      line-height: 1.35;
      color: var(--text-main);
    }

    .alias-wrong-table .col-code {
      width: 46px;
      white-space: nowrap;
      font-weight: 800;
      padding-right: 4px;
      padding-left: 8px;
    }

    .alias-wrong-table .col-product {
      width: 22%;
      word-break: break-word;
    }

    .alias-wrong-table .col-link {
      word-break: break-word;
    }

    .alias-wrong-table .col-name {
      word-break: break-word;
    }

    .alias-wrong-table .col-pct {
      width: 40px;
      white-space: nowrap;
      text-align: center;
      font-weight: 800;
      font-size: 10px;
      padding-left: 4px;
      padding-right: 4px;
    }

    .alias-wrong-table .col-act {
      width: 96px;
      white-space: nowrap;
      padding: 4px 6px;
    }

    .alias-pct--ok {
      color: var(--success-strong);
    }

    .alias-pct--warn {
      color: #ea580c;
    }

    .alias-pct--bad {
      color: var(--danger-strong);
    }

    .alias-act-pair {
      display: inline-flex;
      gap: 4px;
      align-items: center;
    }

    .alias-wrong-table tr:last-child td {
      border-bottom: none;
    }

    .alias-wrong-table .alias-act-btn {
      width: auto;
      min-width: 0;
      height: 22px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--bg-surface);
      font-size: 8px;
      font-weight: 800;
      cursor: pointer;
      padding: 0 7px;
      line-height: 1;
      flex-shrink: 0;
    }

    .alias-wrong-table .alias-act-btn--ok {
      color: var(--success);
      border-color: var(--success);
    }

    .alias-wrong-table .alias-act-btn--rm {
      color: var(--danger);
      border-color: #fecaca;
    }

    .alias-wrong-table .alias-act-btn:disabled {
      opacity: 0.45;
      cursor: wait;
    }

    #alias-mini-notice {
      position: fixed;
      top: 14px;
      right: 14px;
      z-index: calc(var(--z-toast) + 1);
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-width: 240px;
      pointer-events: none;
    }

    .alias-mini-notice-item {
      font-size: 10px;
      font-weight: 700;
      padding: 7px 10px;
      border-radius: 8px;
      box-shadow: var(--shadow-sm);
      animation: aliasNoticeIn 0.2s ease-out;
    }

    .alias-mini-notice-item.ok {
      background: var(--success-soft);
      color: var(--success-strong);
      border: 1px solid #bbf7d0;
    }

    .alias-mini-notice-item.err {
      background: var(--danger-soft);
      color: var(--danger-strong);
      border: 1px solid #fecaca;
    }

    @keyframes aliasNoticeIn {
      from { opacity: 0; transform: translateX(12px); }
      to { opacity: 1; transform: translateX(0); }
    }

    /* Toast Overhaul */
    #toast-container {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      max-width: 340px;
      z-index: var(--z-toast);
      display: flex;
      flex-direction: column;
      gap: 12px;
      pointer-events: none;
    }

    .toast {
      background: var(--brand-800);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: #fff;
      border-radius: var(--radius-md);
      padding: 13px 18px;
      display: flex;
      align-items: center;
      gap: 11px;
      font-size: var(--fs-md);
      font-weight: 600;
      line-height: 1.4;
      box-shadow: var(--shadow-xl);
      animation: toastIn 0.4s var(--ease-spring) forwards;
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-left: 4px solid var(--brand-300);
    }

    .toast.success {
      background: #166534;
      border-left-color: #4ade80;
    }

    .toast.error {
      background: #991b1b;
      border-left-color: #f87171;
    }

    .toast.warning {
      background: #854d0e;
      border-left-color: var(--warning);
    }

    .toast.info {
      background: #0c4a6e;
      border-left-color: #38bdf8;
    }

    .is-scan-preview-modal .modal-box {
      max-width: min(920px, 96vw);
      width: 96vw;
      max-height: 92vh;
      display: flex;
      flex-direction: column;
    }

    .is-scan-preview-frame {
      width: 100%;
      min-height: 62vh;
      max-height: 72vh;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #111;
      object-fit: contain;
    }

    @keyframes toastIn {
      from {
        transform: translateY(40px) scale(0.8);
        opacity: 0;
      }

      to {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }

    /* 1. Global modal overlay centering & layout */
    .modal-overlay,
    #is-item-editor-modal,
    #product-select-modal,
    #edit-order-modal,
    #whatsapp-import-modal,
    #is-lookup-modal,
    #cat-pick-modal,
    #pm-ai-matching-modal,
    #pm-online-search-modal,
    #is-ocr-logs-modal,
    #shopping-purchase-modal,
    #pm-formula-wizard-modal,
    #pi-ai-match-modal,
    #pdm-merge-modal,
    #pi-drilldown-modal,
    #pi-alias-conflict-modal,
    #pi-suspect-modal,
    #pi-noinv-modal,
    #pa-stats-modal,
    #customModal,
    #promptModal,
    #globalFormModal {
      position: fixed !important;
      inset: 0 !important;
      background: rgba(6, 47, 52, 0.52) !important;
      backdrop-filter: blur(6px) saturate(140%) !important;
      -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
      display: none;
      align-items: center !important;
      justify-content: center !important;
      padding: 16px !important;
      margin: 0 !important;
      z-index: var(--z-modal) !important;
    }

    #globalFormModal.kb-open,
    #customModal.kb-open,
    #promptModal.kb-open {
      inset: 0 !important;
      width: auto !important;
      height: auto !important;
      align-items: flex-start !important;
      justify-content: center !important;
      padding: 12px 16px !important;
      box-sizing: border-box !important;
    }

    #globalFormModal.kb-open>.modal-box,
    #customModal.kb-open>.modal-box,
    #promptModal.kb-open>.modal-box {
      max-height: min(52vh, calc(100vh - 16px)) !important;
      margin-top: 0 !important;
      overflow: auto !important;
    }

    /* 2. Inner card container properties */
    .modal-overlay>div,
    #is-item-editor-modal .ie-editor-panel,
    #product-select-modal>div,
    #edit-order-modal>div,
    #whatsapp-import-modal>div,
    #is-lookup-modal>div,
    #cat-pick-modal>div,
    #pm-ai-matching-modal>div,
    #pm-online-search-modal>div,
    #is-ocr-logs-modal>div,
    #shopping-purchase-modal>div,
    #pm-formula-wizard-modal>div,
    #pi-ai-match-modal>.pi-modal-panel,
    #pdm-merge-modal>.pi-modal-panel,
    #pi-drilldown-modal>.pi-modal-panel,
    #pi-alias-conflict-modal>.pi-modal-panel,
    #pi-suspect-modal>.pi-modal-panel,
    #pi-noinv-modal>.pi-modal-panel,
    #pa-stats-modal>.pi-modal-panel,
    #customModal>.modal-box,
    #promptModal>.modal-box,
    #globalFormModal>.modal-box {
      background: var(--bg-surface) !important;
      border: 1px solid var(--border-subtle) !important;
      border-radius: var(--radius-xl) !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      box-shadow: var(--shadow-xl) !important;
      animation: modalIn 0.26s var(--ease-out) both;

      max-height: 80vh !important;
      padding: 16px !important;
      width: min(800px, calc(100vw - 32px)) !important;
      max-width: min(800px, calc(100vw - 32px)) !important;
    }

    @keyframes modalIn {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    #customModal>.modal-box,
    #promptModal>.modal-box {
      width: min(420px, calc(100vw - 32px)) !important;
      max-width: min(420px, calc(100vw - 32px)) !important;
    }

    #globalFormModal>.modal-box {
      width: min(480px, calc(100vw - 32px)) !important;
      max-width: min(480px, calc(100vw - 32px)) !important;
    }

    #globalFormModal>.modal-box.modal-box-wide {
      width: min(800px, calc(100vw - 32px)) !important;
      max-width: min(800px, calc(100vw - 32px)) !important;
    }

    /* Product Analytics: only the history table scrolls, so the title and the
       close button stay put no matter how long the purchase history is. */
    #pa-stats-modal>.pi-modal-panel.pi-modal-panel--scroll {
      overflow: hidden !important;
      max-height: 85vh !important;
    }

    #pa-stats-modal .pm-history-wrap {
      flex: 1;
      min-height: 120px;
      max-height: none;
    }

    /* Purchase Intelligence drill-down has mixed content, so the panel keeps
       scrolling — but its action row stays pinned to the top. */
    #pi-drilldown-modal>.pi-modal-panel.pi-modal-panel--scroll {
      overflow-y: auto !important;
      max-height: 85vh !important;
    }

    #pi-drilldown-modal>.pi-modal-panel.pi-modal-panel--scroll>div:first-child {
      position: sticky;
      top: 0;
      z-index: 3;
      background: var(--bg-surface);
      padding-bottom: 8px;
    }

    @media (max-width: 560px) {

      .modal-overlay>div,
      #is-item-editor-modal .ie-editor-panel,
      #product-select-modal>div,
      #edit-order-modal>div,
      #whatsapp-import-modal>div,
      #is-lookup-modal>div,
      #cat-pick-modal>div,
      #pm-ai-matching-modal>div,
      #pm-online-search-modal>div,
      #is-ocr-logs-modal>div,
      #shopping-purchase-modal>div,
      #pm-formula-wizard-modal>div,
      #pi-ai-match-modal>.pi-modal-panel,
      #pdm-merge-modal>.pi-modal-panel,
      #pi-drilldown-modal>.pi-modal-panel,
      #pa-stats-modal>.pi-modal-panel,
      #customModal>.modal-box,
      #promptModal>.modal-box,
      #globalFormModal>.modal-box {
        padding: 16px !important;
        margin: 0 16px !important;
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
      }
    }

    .modal-title {
      font-size: var(--fs-md);
      font-weight: 700;
      color: white;
      background: linear-gradient(100deg, var(--brand-700), var(--brand-600));
      margin: -16px -16px 16px -16px;
      padding: 14px 16px;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .modal-title > #globalFormTitle {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }


    .modal-actions {
      margin-top: 4px;
      padding-top: 15px;
      border-top: 1px solid var(--border);
    }

    .notice-box {
      margin: 0 15px 12px 15px;
      padding: 11px 14px;
      border-radius: var(--radius-md);
      font-size: var(--fs-sm);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
      line-height: 1.45;
      background: var(--bg-surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-xs);
      /* Sentence-length notices were previously shouted in all caps. */
      text-transform: none;
      letter-spacing: 0;
    }

    .notice-box>i {
      flex: none;
      font-size: 0.95rem;
    }

    .stk-card {
      transition: all 0.2s ease;
      border-left: 3px solid transparent;
    }

    .stk-card.counted {
      background: #f0fdf4 !important;
      border-left-color: var(--success) !important;
    }

    .stk-inp::placeholder {
      font-size: 10px;
      opacity: 0.4;
      font-weight: 500;
      text-transform: uppercase;
    }

    @keyframes slideInBanner {
      from {
        transform: translateY(-15px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .notice-error {
      border-left: 4px solid var(--danger);
      border-color: var(--danger-soft);
      border-left-color: var(--danger);
      background: var(--danger-soft);
      color: var(--danger-strong);
    }

    .notice-error i {
      color: var(--danger);
      font-size: 1rem;
    }

    .notice-warning {
      border-left: 4px solid var(--warning);
      border-color: var(--warning-soft);
      border-left-color: var(--warning);
      background: var(--warning-soft);
      color: var(--warning-strong);
    }

    .notice-warning i {
      color: var(--warning);
      font-size: 1rem;
    }

    .notice-info {
      border-left: 4px solid var(--info);
      border-color: var(--info-soft);
      border-left-color: var(--info);
      background: var(--info-soft);
      color: var(--info-strong);
    }

    .notice-info i {
      color: var(--info);
      font-size: 1rem;
    }

    .notice-success {
      border-left: 4px solid var(--success);
      border-color: var(--success-soft);
      border-left-color: var(--success);
      background: var(--success-soft);
      color: var(--success-strong);
    }

    .notice-success i {
      color: var(--success);
      font-size: 1rem;
    }

    .bottom-actions {
      padding: var(--space-md);
      background-color: var(--bg-surface);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid var(--border);
      z-index: 50;
    }

    .modal-body {
      overflow-y: auto;
      max-height: 60vh;
      -webkit-overflow-scrolling: touch;
    }

    /* Confirm modal: body scrolls, actions stay pinned (long Visual Link previews). */
    #customModal>.modal-box {
      max-height: min(80vh, 640px) !important;
    }

    #customModal .modal-title,
    #customModal .modal-actions {
      flex-shrink: 0;
    }

    #customModal .modal-body {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    #customModal.vl-preview-modal>.modal-box {
      width: min(520px, calc(100vw - 32px)) !important;
      max-width: min(520px, calc(100vw - 32px)) !important;
    }

    #customModal.vl-preview-modal .modal-body {
      font-size: 12px;
      line-height: 1.45;
    }

    #customModal .vl-preview-block {
      margin: 0 0 10px 0;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-surface-light);
    }

    #customModal .vl-preview-block:last-child {
      margin-bottom: 0;
    }

    #customModal .vl-preview-list {
      margin: 6px 0 0 0;
      padding: 0;
      list-style: none;
    }

    #customModal .vl-preview-list li {
      padding: 3px 0;
      border-bottom: 1px solid var(--border);
      word-break: break-word;
    }

    #customModal .vl-preview-list li:last-child {
      border-bottom: none;
    }

    /* Visibility Management Styles */
    .vis-card {
      background: var(--bg-surface-light);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
      min-height: 48px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    }

    .vis-card:active {
      transform: scale(0.95);
    }

    .vis-card.active {
      background: #f9fffc !important;
      border-color: #71c4a8 !important;
    }

    .vis-card-title {
      font-weight: 500;
      font-size: 0.6rem;
      color: var(--text-main);
      letter-spacing: 0.2px;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: hidden;
      word-break: break-word;
    }

    .vis-card.active .vis-card-title {
      color: #047857 !important;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      display: none;
      align-items: flex-start;
      justify-content: center;
      z-index: var(--z-modal);
      padding: 50px 15px;
    }

    #customModal {
      z-index: var(--z-modal-custom) !important;
    }

    #promptModal {
      z-index: var(--z-modal-prompt) !important;
    }

    #globalFormModal {
      z-index: var(--z-modal-form) !important;
    }

    #is-paste-text-modal {
      z-index: var(--z-modal-paste) !important;
    }

    #pa-stats-modal {
      z-index: var(--z-modal-stats) !important;
    }

    #pi-alias-conflict-modal {
      z-index: var(--z-modal-alias) !important;
    }

    #pi-suspect-modal,
    #pi-noinv-modal {
      z-index: var(--z-modal-suspect) !important;
    }

    #pdm-merge-modal>.pi-modal-panel.pdm-merge-panel {
      padding: 0 !important;
      width: min(860px, calc(100vw - 24px)) !important;
      max-width: min(860px, calc(100vw - 24px)) !important;
      max-height: 90vh !important;
      overflow: hidden !important;
    }

    #pi-ai-match-modal {
      z-index: var(--z-modal-ai-match) !important;
    }

    #pi-drilldown-modal {
      z-index: var(--z-modal-drilldown) !important;
    }

    #product-select-modal {
      z-index: var(--z-modal-alert) !important;
    }

    #edit-order-modal {
      z-index: var(--z-modal-confirm) !important;
    }

    #wa-paste-modal {
      z-index: var(--z-modal-wa-paste) !important;
      position: fixed !important;
      inset: 0 !important;
      display: none;
      align-items: center !important;
      justify-content: center !important;
      padding: 20px !important;
      margin: 0 !important;
      background: rgba(6, 47, 52, 0.55) !important;
      backdrop-filter: blur(6px) saturate(140%) !important;
      -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
      box-sizing: border-box !important;
    }

    #wa-paste-modal.is-open {
      display: flex !important;
    }

    #pm-bulk-review-modal {
      z-index: var(--z-modal-pm) !important;
    }

    #pm-unit-audit-modal {
      z-index: calc(var(--z-modal-pm) + 1) !important;
    }

    #cat-pick-modal {
      z-index: var(--z-modal-cat-pick) !important;
    }

    #is-item-editor-modal {
      z-index: var(--z-modal-editor) !important;
    }

    #shopping-purchase-modal {
      z-index: var(--z-modal-shopping) !important;
    }

    .modal-box {
      background: var(--bg-surface);
      width: 100%;
      max-width: 400px;
      border-radius: var(--radius-lg);
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    }

    /* Toggle Switch Styles */
    .switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #cbd5e1;
      transition: .4s;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .4s;
    }

    input:checked+.slider {
      background-color: var(--primary);
    }

    input:checked+.slider:before {
      transform: translateX(20px);
    }

    .slider.round {
      border-radius: 24px;
    }

    .slider.round:before {
      border-radius: 50%;
    }

    @keyframes pulseBadge {
      0% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.05);
        opacity: 0.8;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* =========================================================================
       WMS UI ENHANCEMENT SUITE
       ========================================================================= */

    /* Hover states */
    .dash-card {
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
    }

    .dash-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
      border-color: var(--primary-soft-border);
    }

    .order-card,
    .mkt-item {
      transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease;
    }

    .order-card:hover,
    .mkt-item:hover {
      transform: translateX(3px);
      box-shadow: 0 4px 16px rgba(10, 68, 74, 0.10);
    }

    .stat-card {
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .stat-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(10, 68, 74, 0.10);
    }

    /* Stagger entrance */
    @keyframes wms-slideUp {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dash-card {
      animation: wms-slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .dash-card:nth-child(1) {
      animation-delay: 0.00s;
    }

    .dash-card:nth-child(2) {
      animation-delay: 0.05s;
    }

    .dash-card:nth-child(3) {
      animation-delay: 0.10s;
    }

    .dash-card:nth-child(4) {
      animation-delay: 0.15s;
    }

    .dash-card:nth-child(5) {
      animation-delay: 0.20s;
    }

    .dash-card:nth-child(6) {
      animation-delay: 0.25s;
    }

    /* Skeleton loading */
    .skeleton {
      background: linear-gradient(90deg, var(--border) 25%, var(--bg-surface-light) 50%, var(--border) 75%);
      background-size: 200% 100%;
      animation: wms-shimmer 1.4s ease infinite;
      border-radius: 8px;
    }

    @keyframes wms-shimmer {
      from {
        background-position: 200% 0;
      }

      to {
        background-position: -200% 0;
      }
    }

    /* Ripple */
    .ripple-wave {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: scale(0);
      animation: wms-ripple 0.6s ease-out forwards;
      pointer-events: none;
    }

    @keyframes wms-ripple {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }

    /* Scroll-aware header */
    .app-header {
      transition: box-shadow 0.25s ease;
    }

    .app-header.scrolled {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    /* Table row hover */
    .glb-table tbody tr {
      transition: background 0.15s ease;
    }

    .glb-table tbody tr:hover {
      background: rgba(10, 68, 74, 0.04) !important;
    }

    .std-table tbody tr {
      transition: background 0.15s ease;
    }

    .std-table tbody tr:hover {
      background: rgba(10, 68, 74, 0.04) !important;
    }

    /* Focus — no border/ring change on tap */
    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: var(--border);
      box-shadow: none;
    }

    /* Dark mode toggle */
    .dm-toggle {
      position: fixed;
      bottom: 80px;
      right: 16px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 9998;
      transition: transform 0.2s ease;
    }

    .dm-toggle:hover {
      transform: scale(1.1);
    }

    .dm-toggle:active {
      transform: scale(0.9);
    }

    /* Dark mode — gray tonal palette (neutral charcoal, muted accent) */
    /* ==========================================================================
       DARK THEME
       Surfaces and chrome stay cool gray. Accent is a desaturated gray-teal
       so buttons and links stay readable without a neon cyan cast.
       ========================================================================== */
    body.dark {
      color-scheme: dark;
      --primary: #a8b4b5;
      --primary-light: #c2cbcc;
      --primary-soft: rgba(168, 180, 181, 0.12);
      --primary-soft-border: rgba(168, 180, 181, 0.24);
      --primary-contrast: #111111;
      --accent: #8e9c9d;

      --bg-main: #111111;
      --bg-base: #111111;
      --bg-surface: #1a1a1a;
      --bg-surface-light: #242424;
      --bg-sunken: #0a0a0a;
      --bg-inverse: #f2f2f2;

      --text-main: #ececec;
      --text-muted: #9c9c9c;
      --text-subtle: #6e6e6e;
      --text-inverse: #111111;

      --border: #2e2e2e;
      --border-strong: #404040;
      --border-subtle: #222222;

      --success: #6bbf9a;
      --success-soft: rgba(107, 191, 154, 0.14);
      --success-strong: #8fd4b4;
      --danger: #e07a7a;
      --danger-soft: rgba(224, 122, 122, 0.14);
      --danger-strong: #f0a0a0;
      --warning: #d4a84b;
      --warning-soft: rgba(212, 168, 75, 0.14);
      --warning-strong: #e6c06a;
      --info: #7a9bb8;
      --info-soft: rgba(122, 155, 184, 0.14);
      --info-strong: #9db6cc;

      --ring: none;
      --ring-danger: none;

      --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
      --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.65), 0 4px 12px -4px rgba(0, 0, 0, 0.45);
      --shadow-xl: 0 28px 64px -16px rgba(0, 0, 0, 0.75);
      --shadow: var(--shadow-sm);
    }

    body.dark .app-header {
      background-color: rgba(17, 17, 17, 0.92) !important;
      border-bottom-color: var(--border) !important;
    }

    body.dark .sub-header {
      background: #1c1c1c !important;
      border-bottom: 1px solid var(--border) !important;
      color: var(--text-main) !important;
    }

    body.dark .sub-header::after {
      background: rgba(255, 255, 255, 0.06);
    }

    body.dark .brand-name,
    body.dark .context-title {
      color: var(--text-main) !important;
    }

    body.dark .bottom-nav {
      background: rgba(17, 17, 17, 0.94) !important;
      border-top-color: var(--border) !important;
    }

    body.dark ::selection {
      background: #3a3a3a;
      color: #f2f2f2;
    }

    body.dark .card,
    body.dark .dash-card,
    body.dark .order-card,
    body.dark .unified-card,
    body.dark .stat-card {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    body.dark input:not(.qty-inp):not(.custom-cb),
    body.dark select {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
      color: var(--text-main) !important;
    }

    body.dark #is-item-editor-modal input:not([readonly]),
    body.dark #is-item-editor-modal select,
    body.dark #is-lookup-modal .ie-lookup-search {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
      color: var(--text-main) !important;
    }

    body.dark #is-item-editor-modal input[readonly] {
      background: var(--bg-main) !important;
      border-color: var(--border) !important;
      color: var(--text-muted) !important;
    }

    body.dark .ie-lookup-row {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    body.dark .ie-lookup-row:hover {
      background: var(--bg-surface-light) !important;
    }

    body.dark .bottom-nav {
      background-color: rgba(17, 17, 17, 0.94) !important;
      border-top-color: var(--border) !important;
    }

    body.dark .glb-table thead th,
    body.dark .std-table th {
      background: var(--bg-surface-light) !important;
    }

    /* ── Dynamic Components Dark Mode ── */
    body.dark .modal-box {
      background: var(--bg-surface) !important;
      border: 1px solid var(--border) !important;
      color: var(--text-main) !important;
    }

    body.dark .modal-actions {
      border-top-color: var(--border) !important;
    }

    body.dark .notice-box {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
      color: var(--text-muted) !important;
    }

    body.dark .notice-error {
      border-left-color: var(--danger) !important;
      color: #fca5a5 !important;
    }

    body.dark .notice-error i {
      color: #f87171 !important;
    }

    body.dark .notice-warning {
      border-left-color: var(--warning) !important;
      color: #fcd34d !important;
    }

    body.dark .notice-warning i {
      color: #fbbf24 !important;
    }

    body.dark .notice-info {
      border-left-color: #38bdf8 !important;
      color: #7dd3fc !important;
    }

    body.dark .notice-info i {
      color: #38bdf8 !important;
    }

    body.dark .notice-success {
      background: #052e16 !important;
      color: #6ee7b7 !important;
      border-color: #065f46 !important;
    }

    body.dark .vis-card {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
    }

    body.dark .vis-card.active {
      background: #0d3d2d !important;
      border-color: #059669 !important;
    }

    body.dark .vis-card.active .vis-card-title {
      color: #6ee7b7 !important;
    }

    body.dark .stk-card.counted {
      background: #052e16 !important;
      border-left-color: var(--success) !important;
    }

    body.dark .day-pill {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
      color: var(--text-muted) !important;
    }

    body.dark .day-pill:hover {
      background: var(--bg-surface) !important;
    }

    body.dark .bottom-actions {
      background-color: rgba(17, 17, 17, 0.94) !important;
      border-top-color: var(--border) !important;
    }

    body.dark .side-tab-modal {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    body.dark #side-tab-content {
      background: var(--bg-surface-light) !important;
    }

    body.dark .tab-btn {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
      color: var(--text-muted) !important;
    }

    body.dark .tab-btn.active {
      background: var(--primary) !important;
      color: var(--primary-contrast) !important;
      border-color: var(--primary) !important;
    }

    body.dark .btn-outline {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
      color: var(--text-muted) !important;
    }

    body.dark .btn:not(.btn-outline):not(.btn-logout):not(.btn-danger),
    body.dark #view-login .btn-login {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: var(--primary-contrast) !important;
    }

    body.dark .row-item,
    body.dark .list-row,
    body.dark .pm-item-row,
    body.dark .inv-row {
      border-color: var(--border) !important;
      background: var(--bg-surface) !important;
    }

    .pm-item-row {
      background: var(--bg-surface-light);
      border: 1px solid var(--border);
    }

    .pm-item-row:hover {
      border-color: var(--primary) !important;
      background: var(--bg-surface) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    body.dark .pm-item-row:hover {
      border-color: var(--primary) !important;
      background: var(--bg-surface) !important;
      opacity: 0.9;
    }

    /* Price Management — no catalog price */
    .pm-item-row.pm-no-price {
      background: #fff7ed !important;
      border-color: #fdba74 !important;
    }

    .pm-item-row.pm-no-price:hover {
      background: #ffedd5 !important;
      border-color: #fb923c !important;
    }

    body.dark .pm-item-row.pm-no-price {
      background: #431407 !important;
      border-color: #c2410c !important;
    }

    body.dark .pm-item-row.pm-no-price:hover {
      background: #7c2d12 !important;
      border-color: #ea580c !important;
      opacity: 1;
    }

    body.dark .section-label,
    body.dark .form-label {
      color: var(--text-muted) !important;
    }

    /* ── Better Dark Mode Contrast ── */
    /* ── PI Modal Dark Overrides ── */
    body.dark #pi-ai-match-modal>.pi-modal-panel,
    body.dark #pdm-merge-modal>.pi-modal-panel,
    body.dark #pi-drilldown-modal>.pi-modal-panel,
    body.dark #price-detail-modal>.pm-detail-panel,
    body.dark #wa-paste-modal>div {
      background: var(--bg-surface) !important;
      color: var(--text-main) !important;
    }

    body.dark #pi-ai-timer,
    body.dark #pdm-merge-timer {
      background: var(--bg-surface-light) !important;
      color: var(--primary) !important;
    }

    body.dark .glb-table .sticky-col {
      background: var(--bg-surface) !important;
    }

    body.dark .table-responsive {
      background: var(--bg-surface) !important;
    }

    body.dark .custom-cb {
      background: var(--bg-surface) !important;
    }

    body.dark .mkt-card {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    .wh-disp-send-cell {
      background: rgba(99, 102, 241, 0.06);
    }

    .wh-disp-stock-ok {
      background: var(--bg-surface-light) !important;
      color: var(--text-muted) !important;
      border: 1px solid var(--border) !important;
    }

    body.dark .wh-disp-send-cell {
      background: rgba(255, 255, 255, 0.04) !important;
    }

    body.dark .wh-disp-row .disp-qty {
      background: var(--bg-surface) !important;
      color: var(--primary) !important;
      border-color: var(--primary) !important;
    }

    body.dark .wh-disp-row .disp-qty:disabled {
      opacity: 0.55;
      border-color: var(--border) !important;
      color: var(--text-muted) !important;
    }

    body.dark #view-warehouse-dispatch .category-row td {
      background: var(--bg-main) !important;
      color: var(--primary) !important;
      border-color: var(--border) !important;
    }

    body.dark #view-warehouse-dispatch .std-table th {
      background: var(--bg-surface-light) !important;
      color: var(--text-muted) !important;
      border-color: var(--border) !important;
    }

    body.dark #view-warehouse-dispatch .std-table th:last-child {
      background: var(--bg-surface-light) !important;
      color: var(--text-main) !important;
      border-color: var(--border) !important;
    }

    body.dark #warehouse-list-area {
      background: var(--bg-surface) !important;
    }

    body.dark #item-visibility-list-area,
    body.dark #view-item-visibility .unified-card,
    body.dark #cat-audit-modal>div {
      background: var(--bg-surface) !important;
      color: var(--text-main) !important;
    }

    body.dark #loader {
      background: rgba(17, 17, 17, 0.96) !important;
    }

    body.dark .lvl-critical {
      background: rgba(239, 68, 68, 0.25) !important;
      color: #fca5a5 !important;
    }

    body.dark .lvl-warning {
      background: rgba(245, 158, 11, 0.25) !important;
      color: #fcd34d !important;
    }

    body.dark .lvl-normal {
      background: var(--bg-surface-light) !important;
      color: var(--text-main) !important;
    }

    body.dark .lvl-empty {
      color: var(--text-muted) !important;
    }

    body.dark .stk-item-card {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    body.dark .stk-item-card.counted {
      background: rgba(16, 185, 129, 0.15) !important;
      border-color: var(--success) !important;
    }

    body.dark .sl-item-row span[style*="background:#fef3c7"],
    body.dark .mkt-card span[style*="background:#fef3c7"],
    body.dark .sl-item-row span[style*="background: #fef3c7"],
    body.dark .mkt-card span[style*="background: #fef3c7"] {
      background: rgba(245, 158, 11, 0.18) !important;
      color: #fbbf24 !important;
      border-color: rgba(245, 158, 11, 0.35) !important;
    }

    body.dark .sl-item-row span[style*="background:#dbeafe"],
    body.dark .mkt-card span[style*="background:#dbeafe"],
    body.dark .sl-item-row span[style*="background: #dbeafe"],
    body.dark .mkt-card span[style*="background: #dbeafe"] {
      background: rgba(59, 130, 246, 0.18) !important;
      color: #93c5fd !important;
      border-color: rgba(59, 130, 246, 0.35) !important;
    }

    body.dark #view-invoice-delete input#inv-del-search,
    body.dark #view-invoice-delete .btn-outline {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
      color: var(--text-main) !important;
    }

    body.dark #sl-total-est,
    body.dark #mkt-total-est {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
    }

    body.dark #inv-del-pagination {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    body.dark #inv-del-pagination .inv-del-page-btn {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
      color: var(--text-main) !important;
    }

    body.dark #inv-del-pagination .inv-del-page-btn.is-current {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: var(--primary-contrast) !important;
    }

    body.dark .stk-cat-header,
    body.dark .vl-cat-header {
      background: var(--bg-main) !important;
      color: var(--primary) !important;
      border-bottom-color: var(--border) !important;
    }

    body.dark .side-tab-btn.active {
      background: var(--bg-surface) !important;
    }

    body.dark #view-login .user-card {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
    }

    body.dark #view-login .user-card.active {
      background: var(--bg-surface) !important;
      border-color: var(--primary) !important;
    }

    body.dark #view-login .user-card-name {
      color: var(--text-main) !important;
    }

    body.dark #view-login .user-card.active .user-card-name {
      color: var(--primary) !important;
    }

    body.dark #view-login .user-card-role {
      background: rgba(255, 255, 255, 0.05) !important;
      color: var(--text-muted) !important;
    }

    body.dark #view-login .user-card.active .user-card-role {
      color: var(--primary) !important;
      background: rgba(10, 68, 74, 0.25) !important;
    }

    body.dark #view-login .login-card {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    /* ── Global Dark Mode: unified primary buttons ── */
    body.dark .btn:not(.btn-outline):not(.btn-logout):not(.btn-danger),
    body.dark .btn-success,
    body.dark .btn-warning,
    body.dark #view-login .btn-login {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: var(--primary-contrast) !important;
    }

    body.dark .pill.stock-warning {
      background: rgba(245, 158, 11, 0.18) !important;
      color: #fcd34d !important;
      border-color: rgba(245, 158, 11, 0.4) !important;
    }

    body.dark .pill.stock-critical {
      background: rgba(239, 68, 68, 0.18) !important;
      color: #fca5a5 !important;
      border-color: rgba(239, 68, 68, 0.4) !important;
    }

    body.dark .stock-badge.stock-warning {
      background: rgba(245, 158, 11, 0.18) !important;
      color: #fcd34d !important;
    }

    body.dark .stock-badge.stock-critical {
      background: rgba(239, 68, 68, 0.18) !important;
      color: #fca5a5 !important;
    }

    body.dark .qty-inp,
    body.dark input.qty-inp,
    body.dark textarea {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
      color: var(--text-main) !important;
    }

    body.dark .stock-badge.stock-normal {
      background: var(--bg-surface-light) !important;
      color: var(--text-muted) !important;
    }

    body.dark .dash-card.disabled {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
    }

    body.dark .br-inv-card {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    body.dark .br-inv-card.critical {
      background: rgba(239, 68, 68, 0.12) !important;
      border-color: rgba(239, 68, 68, 0.35) !important;
    }

    body.dark .br-inv-card.warning {
      background: rgba(245, 158, 11, 0.12) !important;
      border-color: rgba(245, 158, 11, 0.35) !important;
    }

    body.dark tr.category-row td {
      box-shadow: 0 -2px 0 0 var(--bg-main) !important;
      background: var(--bg-main) !important;
      color: var(--primary) !important;
      border-bottom-color: var(--border) !important;
    }

    body.dark #global-stock-area tr.category-row td {
      box-shadow: 0 -2px 0 0 var(--bg-surface-light) !important;
    }

    body.dark .category-row td,
    body.dark tr.category-row td {
      background: var(--bg-main) !important;
      color: var(--primary) !important;
      border-bottom-color: var(--border) !important;
    }

    body.dark .std-table td,
    body.dark .glb-table td {
      border-color: var(--border) !important;
      color: var(--text-main);
    }

    body.dark .std-table tr:hover td,
    body.dark .glb-table tbody tr:hover td {
      background: var(--bg-surface-light) !important;
    }

    body.dark .tabs {
      background: var(--border) !important;
    }

    body.dark .tab.active {
      background: var(--bg-surface) !important;
      color: var(--primary) !important;
    }

    body.dark .tab:not(.active) {
      color: var(--text-muted) !important;
    }

    body.dark .app-header,
    body.dark .bottom-nav,
    body.dark .bottom-actions,
    body.dark .sticky-header-group {
      background: var(--bg-surface) !important;
      background-color: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    body.dark,
    body.dark.has-shell {
      background: var(--bg-main) !important;
    }

    body.dark .app-wrapper,
    body.dark .view-box {
      background: var(--bg-base) !important;
      color: var(--text-main);
    }

    body.dark .view-box,
    body.dark #app-content {
      color: var(--text-main);
    }

    /* Inline style overrides (dynamic HTML) — safe patterns only (avoid #fffbeb etc.) */
    body.dark [style*="background: white"],
    body.dark [style*="background:white"],
    body.dark [style*="background: var(--bg-surface)"],
    body.dark [style*="background: var(--bg-surface)"],
    body.dark [style*="background: var(--bg-surface);"],
    body.dark [style*="background: var(--bg-surface);"],
    body.dark [style*="background: var(--bg-surface),"],
    body.dark [style*="background: var(--bg-surface),"] {
      background: var(--bg-surface) !important;
    }

    body.dark [style*="background: var(--bg-surface-light)"],
    body.dark [style*="background: var(--bg-surface-light)"],
    body.dark [style*="background: var(--bg-main)"],
    body.dark [style*="background: var(--bg-main)"],
    body.dark [style*="background: #e2e8f0"],
    body.dark [style*="background:#e2e8f0"] {
      background: var(--bg-surface-light) !important;
    }

    body.dark [style*="color:#1e293b"],
    body.dark [style*="color: #1e293b"],
    body.dark [style*="color:#0f172a"],
    body.dark [style*="color: #0f172a"],
    body.dark [style*="color:#334155"],
    body.dark [style*="color: #334155"] {
      color: var(--text-main) !important;
    }

    body.dark [style*="color:#64748b"],
    body.dark [style*="color: #64748b"],
    body.dark [style*="color:#475569"],
    body.dark [style*="color: #475569"],
    body.dark [style*="color:#94a3b8"],
    body.dark [style*="color: #94a3b8"] {
      color: var(--text-muted) !important;
    }

    body.dark [style*="border-color: var(--border)"],
    body.dark [style*="border-color: var(--border)"],
    body.dark [style*="border: 1px solid var(--border)"],
    body.dark [style*="border: 1px solid var(--border)"] {
      border-color: var(--border) !important;
    }

    /* Soft warning / amber callouts in dark */
    body.dark [style*="background:#fffbeb"],
    body.dark [style*="background: #fffbeb"],
    body.dark [style*="background:#fff7ed"],
    body.dark [style*="background: #fff7ed"] {
      background: rgba(245, 158, 11, 0.14) !important;
      color: #fcd34d !important;
    }

    body.dark [style*="background:#f0fdf4"],
    body.dark [style*="background: #f0fdf4"] {
      background: rgba(16, 185, 129, 0.14) !important;
    }

    body.dark [style*="background:#fef2f2"],
    body.dark [style*="background: #fef2f2"],
    body.dark [style*="background:#fff1f2"],
    body.dark [style*="background: #fff1f2"] {
      background: rgba(239, 68, 68, 0.14) !important;
    }

    body.dark .modal-box,
    body.dark [id$="-modal"]>.modal-box,
    body.dark [id$="-modal"]>.pi-modal-panel,
    body.dark [id$="-modal"]>.pm-detail-panel {
      background: var(--bg-surface);
      color: var(--text-main);
    }

    /* Soft UI + shell — gray dark (token-driven, overrides hardcoded whites) */
    body.dark .wms-sidebar {
      background: var(--bg-surface) !important;
      border-right-color: var(--border) !important;
      color: var(--text-main) !important;
    }

    body.dark .wms-sidebar__section {
      color: var(--text-subtle) !important;
    }

    body.dark .wms-nav-group__head {
      color: var(--text-subtle) !important;
    }

    body.dark .wms-nav-group__head:hover {
      color: var(--text-muted) !important;
      background: var(--bg-surface-light) !important;
    }

    body.dark .wms-nav-item {
      color: var(--text-muted) !important;
      background: transparent !important;
    }

    body.dark .wms-nav-item:hover {
      background: var(--bg-surface-light) !important;
      color: var(--text-main) !important;
    }

    body.dark .wms-nav-item.is-active {
      background: var(--bg-surface-light) !important;
      color: var(--primary) !important;
      box-shadow: inset 3px 0 0 var(--primary) !important;
    }

    body.dark .wms-sidebar__mark,
    body.dark .wms-role-chip__avatar {
      background: var(--primary) !important;
      color: var(--primary-contrast) !important;
    }

    body.dark .wms-sidebar__footer,
    body.dark .wms-role-chip {
      border-color: var(--border) !important;
      background: var(--bg-surface-light) !important;
    }

    body.dark .wms-scrim {
      background: rgba(0, 0, 0, 0.62) !important;
    }

    body.dark .sup-row,
    body.dark .om-line,
    body.dark .sl-row,
    body.dark .pick-row,
    body.dark .ovw-item,
    body.dark .ord-tile,
    body.dark .attn-item,
    body.dark .wa-btn,
    body.dark .sl-btn,
    body.dark .kpi,
    body.dark .ov-kpis .kpi,
    body.dark .ov-card,
    body.dark .ov-action,
    body.dark .ov-shortcut,
    body.dark .stat-card,
    body.dark .mkt-card,
    body.dark .order-card,
    body.dark .form-card,
    body.dark .login-card,
    body.dark .user-card {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
      color: var(--text-main) !important;
    }

    body.dark .sup-row:hover,
    body.dark .sup-row:active,
    body.dark .ov-action:hover,
    body.dark .ov-shortcut:hover,
    body.dark .ord-tile:hover,
    body.dark .sl-row.is-done,
    body.dark .wa-btn--ghost,
    body.dark .ov-action,
    body.dark .ov-shortcut {
      background: var(--bg-surface-light) !important;
    }

    body.dark .sup-badge--due,
    body.dark .ov-card__count,
    body.dark .ov-status--draft {
      background: var(--bg-surface-light) !important;
      color: var(--text-muted) !important;
    }

    body.dark .om-panel-head,
    body.dark .om-tools,
    body.dark .ord-search,
    body.dark .sl-tools,
    body.dark .sl-search input,
    body.dark .sl-toolbar,
    body.dark .unified-search,
    body.dark .ov-card--table .ov-card__head,
    body.dark .ov-table thead th {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
      color: var(--text-main) !important;
    }

    body.dark .om-list-panel,
    body.dark .om-detail-panel,
    body.dark .sl-card,
    body.dark .unified-card,
    body.dark .table-responsive,
    body.dark .scroll-area,
    body.dark .content-area {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    body.dark .om-line__qty,
    body.dark .om-line__name-input,
    body.dark .sl-row__buy,
    body.dark .pick-row__send input,
    body.dark .ord-mobile-select,
    body.dark .om-tools__branch,
    body.dark .om-tools__date {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
      color: var(--text-main) !important;
    }

    body.dark .sl-have-btn:not(.is-have),
    body.dark .sl-bought-btn:not(.is-on),
    body.dark .om-line__chip,
    body.dark .om-line__link,
    body.dark .pick-row__check {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
      color: var(--text-muted) !important;
    }

    body.dark .wa-btn--primary,
    body.dark .sl-btn--primary {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: var(--primary-contrast) !important;
    }

    body.dark .ov-table tbody tr:hover,
    body.dark .std-table tbody tr:hover {
      background: var(--bg-surface-light) !important;
    }

    body.dark .dm-toggle {
      background: #2a2a2a !important;
      color: #e8e8e8 !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    }

    body.dark .dash-card>i:first-child,
    body.dark .dash-card i.dash-icon,
    body.dark .dash-card .dash-count {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
      color: var(--primary) !important;
    }

    body.dark .dash-card:hover>i:first-child,
    body.dark .dash-card:hover i.dash-icon,
    body.dark .dash-card:hover .dash-count {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: var(--primary-contrast) !important;
    }

    body.dark .icon-btn {
      background: var(--bg-surface-light) !important;
      border-color: var(--border) !important;
      color: var(--text-muted) !important;
    }

    body.dark #is-upload-wrapper {
      background: var(--bg-surface-light) !important;
      border-color: var(--border-strong) !important;
    }

    body.dark .form-card {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    body.dark #loader {
      background: rgba(17, 17, 17, 0.92) !important;
    }

    html.preload #loader,
    html.preload body.dark #loader {
      background: var(--bg-main) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    @media (min-width: 1024px) {
      body.dark:not(.has-shell) {
        background: var(--bg-main) !important;
      }
    }

    /* Catch leftover hardcoded light fills in class CSS */
    body.dark .ov-kpis .kpi,
    body.dark .ov-card,
    body.dark .ov-mid .ov-card,
    body.dark .ov-bottom .ov-card {
      background: var(--bg-surface) !important;
      border-color: var(--border) !important;
    }

    body.dark [style*="background: var(--bg-surface-light)"],
    body.dark [style*="background: var(--bg-surface-light)"],
    body.dark [style*="background: var(--bg-surface-light)"],
    body.dark [style*="background: var(--bg-surface-light)"],
    body.dark [style*="background: var(--bg-main)"],
    body.dark [style*="background: var(--bg-main)"],
    body.dark [style*="background: var(--bg-main)"],
    body.dark [style*="background: var(--bg-main)"],
    body.dark [style*="background:#EEF2F6"],
    body.dark [style*="background: #EEF2F6"],
    body.dark [style*="background: var(--bg-surface)"],
    body.dark [style*="background: var(--bg-surface)"],
    body.dark [style*="background: var(--bg-surface)"],
    body.dark [style*="background: var(--bg-surface)"],
    body.dark [style*="background: var(--bg-surface)"],
    body.dark [style*="background: var(--bg-surface)"],
    body.dark [style*="background:white"],
    body.dark [style*="background: white"] {
      background: var(--bg-surface) !important;
    }

    body.dark [style*="border: 1px solid var(--border)"],
    body.dark [style*="border: 1px solid var(--border)"],
    body.dark [style*="border: 1px solid var(--border)"],
    body.dark [style*="border: 1px solid var(--border)"],
    body.dark [style*="border-color: var(--border)"],
    body.dark [style*="border-color: var(--border)"] {
      border-color: var(--border) !important;
    }

    .pi-item-card {
      background: var(--bg-surface) !important;
      border: 1px solid var(--border) !important;
      border-radius: 12px;
      padding: 10px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.1s ease;
    }

    .pi-item-card:hover {
      background: var(--bg-surface-light) !important;
    }

    .pi-item-card:active {
      transform: scale(0.99);
    }

    #view-visual-link .vl-panels {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
    }

    @media (min-width: 768px) {
      #view-visual-link .vl-panels {
        flex-direction: row;
      }
    }

    #view-visual-link .vl-panel {
      flex: 1;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    #view-visual-link .vl-list-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border-bottom: 1px solid var(--border);
      border-left: 3px solid transparent;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-main);
      cursor: pointer;
      user-select: none;
    }

    #view-visual-link .vl-list-row:last-child {
      border-bottom: none;
    }

    #view-visual-link .vl-list-row.vl-inv-selected {
      background: #eff6ff;
      border-left-color: var(--primary);
    }

    #view-visual-link .vl-list-row.vl-pur-linked {
      background: #f0fdf4;
    }

    #view-visual-link .vl-list-row.vl-pur-suggest {
      background: #fffbeb;
    }

    #view-visual-link .vl-mini-badge {
      font-size: 8px;
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .pi-count-badge {
      background: var(--bg-surface-light) !important;
      border-radius: 6px;
      font-size: 9px;
      font-weight: 800;
      color: var(--text-muted) !important;
      text-align: center;
      padding: 3px 4px;
    }

    .pi-item-card {
      background: var(--bg-surface-light);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 6px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }

    .pi-item-card:hover {
      border-color: var(--primary);
      background: var(--bg-surface);
    }

    .pi-item-card:active {
      transform: scale(0.995);
    }

    .pi-count-badge {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 9px;
      font-weight: 800;
      color: var(--text-muted) !important;
      text-align: center;
      padding: 3px 4px;
    }

    /* Purchase Intelligence — desktop two-column / mobile stack */
    #view-purchase-intelligence.pi-view {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 0;
    }
    #view-purchase-intelligence .pi-layout {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      overflow: hidden;
    }
    #view-purchase-intelligence .pi-sidebar {
      flex: 0 0 auto;
      padding: 12px 12px 10px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-surface);
      overflow-y: auto;
    }
    #view-purchase-intelligence .pi-stats-bar {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 10px;
    }
    #view-purchase-intelligence .pi-stat-card {
      background: var(--bg-surface-light);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 64px;
      text-align: center;
    }
    #view-purchase-intelligence .pi-stat-card .pi-stat-val {
      font-size: 1.25rem;
      font-weight: 900;
      line-height: 1.2;
      margin-bottom: 2px;
    }
    #view-purchase-intelligence .pi-stat-card .pi-stat-lbl {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      line-height: 1;
    }
    #view-purchase-intelligence .pi-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 10px;
    }
    #view-purchase-intelligence .pi-action-btn {
      height: 40px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg-surface-light);
      color: var(--text-main);
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 10px;
      box-sizing: border-box;
    }
    #view-purchase-intelligence .pi-action-btn i {
      font-size: 13px;
    }
    #view-purchase-intelligence .pi-action-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    #view-purchase-intelligence .pi-action-btn--sync,
    #view-purchase-intelligence .pi-action-btn--merge,
    #view-purchase-intelligence .pi-action-btn--suspects,
    #view-purchase-intelligence .pi-action-btn--ailink,
    #view-purchase-intelligence .pi-action-btn--noinv {
      border-color: var(--border);
      color: var(--text-main);
      background: var(--bg-surface-light);
    }
    #view-purchase-intelligence .pi-filters-bar {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 0;
    }
    #view-purchase-intelligence .pi-filter-supplier {
      width: 100%;
      height: 44px;
      min-height: 44px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      outline: none;
      font-size: 13px;
      font-weight: 700;
      background: var(--bg-surface);
      color: var(--text-main);
      box-sizing: border-box;
      padding: 0 12px;
      line-height: 44px;
      -webkit-appearance: none;
      appearance: none;
    }
    #view-purchase-intelligence .pi-filter-toggles {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      width: 100%;
    }
    #view-purchase-intelligence .pi-filter-toggle {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
      cursor: pointer;
      user-select: none;
      min-height: 36px;
      padding: 0 8px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-surface-light);
      text-align: center;
      line-height: 1.2;
    }
    #view-purchase-intelligence .pi-filter-toggle i {
      font-size: 11px;
    }
    #view-purchase-intelligence .pi-sidebar-hint {
      margin-top: 10px;
      font-size: 10px;
      line-height: 1.45;
      color: var(--text-muted);
      font-weight: 600;
    }
    #view-purchase-intelligence .pi-list-panel {
      flex: 1;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg-main);
    }
    #view-purchase-intelligence .pi-list-toolbar {
      flex: 0 0 auto;
      padding: 10px 12px 8px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-surface);
    }
    #view-purchase-intelligence .pi-list-search-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 38px;
      padding: 0 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-surface-light);
    }
    #view-purchase-intelligence .pi-list-search-wrap i {
      color: var(--text-muted);
      font-size: 12px;
      flex: 0 0 auto;
    }
    #view-purchase-intelligence #pi-filter-search {
      flex: 1;
      min-width: 0;
      height: 100%;
      border: none;
      outline: none;
      background: transparent;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-main);
      padding: 0;
    }
    #view-purchase-intelligence .pi-list-head {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: 1fr 70px 50px;
      gap: 4px;
      padding: 6px 12px;
      background: var(--bg-surface-light);
      border-bottom: 1px solid var(--border);
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
    }
    #view-purchase-intelligence .pi-list-head span:nth-child(2),
    #view-purchase-intelligence .pi-list-head span:nth-child(3) {
      text-align: center;
    }
    #view-purchase-intelligence #pi-list-area {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 8px 12px 16px;
    }

    @media (min-width: 1024px) {
      #view-purchase-intelligence .pi-layout {
        flex-direction: row;
      }
      #view-purchase-intelligence .pi-sidebar {
        flex: 0 0 min(340px, 34vw);
        max-width: 380px;
        max-height: none;
        border-bottom: none;
        border-right: 1px solid var(--border);
        padding: 14px 14px 16px;
      }
      #view-purchase-intelligence .pi-stats-bar {
        margin-bottom: 12px;
      }
      #view-purchase-intelligence .pi-stat-card {
        min-height: 72px;
        padding: 12px 8px;
      }
      #view-purchase-intelligence .pi-actions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
      }
      #view-purchase-intelligence .pi-list-toolbar {
        padding: 12px 14px 10px;
      }
      #view-purchase-intelligence .pi-list-head {
        padding: 8px 14px;
      }
      #view-purchase-intelligence #pi-list-area {
        padding: 10px 14px 18px;
      }
      #view-purchase-intelligence .pi-sidebar-hint {
        display: block;
      }
    }

    @media (max-width: 1023px) {
      #view-purchase-intelligence .pi-sidebar {
        max-height: 46vh;
      }
      #view-purchase-intelligence .pi-sidebar-hint {
        display: none;
      }
      #view-purchase-intelligence .pi-actions {
        grid-template-columns: 1fr 1fr;
      }
      #view-purchase-intelligence .pi-stat-card {
        min-height: 58px;
        padding: 8px 6px;
      }
      #view-purchase-intelligence .pi-stat-card .pi-stat-val {
        font-size: 1.1rem;
      }
      #view-purchase-intelligence .pi-list-panel {
        min-height: 0;
        flex: 1;
      }
    }

    /* Legacy PI filter helpers (kept for non-layout consumers) */
    .pi-filters-bar {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 12px;
    }

    .pi-filters-main {
      display: flex;
      gap: 8px;
      min-width: 0;
    }

    .pi-filter-supplier,
    .pi-filter-search {
      height: 44px;
      min-height: 44px;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      outline: none;
      font-size: 13px;
      min-width: 0;
      box-sizing: border-box;
    }

    .pi-filter-supplier {
      flex: 1;
      font-weight: 700;
      background: var(--bg-surface);
    }

    .pi-filter-search {
      flex: 1.5;
      padding: 0 10px;
    }

    .pi-filter-toggles {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      width: 100%;
    }

    .pi-filter-toggle {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 9px;
      font-weight: 800;
      color: var(--text-muted);
      cursor: pointer;
      user-select: none;
      min-height: 52px;
      padding: 6px 4px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg-surface-light);
      transition: all 0.2s;
      text-align: center;
      line-height: 1.2;
    }

    .pi-filter-toggle i {
      font-size: 12px;
    }

    /* =========================================================================
       OVERVIEW DASHBOARD (Stitch A — desktop)
       KPI band, attention + branch bars, open-orders table, compact actions.
       ========================================================================= */
    .ov {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding-bottom: 24px;
    }

    .ov-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .ov-kpis .kpi {
      min-height: 120px;
      border-radius: 14px;
      border: 1px solid var(--border);
      box-shadow: none;
      background: var(--bg-surface);
      padding: 16px;
    }

    .ov-kpis .kpi__value {
      font-size: 1.5rem;
      letter-spacing: -0.02em;
    }

    .ov-mid,
    .ov-bottom {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .ov-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px;
      min-width: 0;
    }

    .ov-card--table {
      padding: 0;
      overflow: hidden;
    }

    .ov-card--table .ov-card__head {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      margin: 0;
    }

    .ov-card__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .ov-card__title {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-main);
      letter-spacing: -0.01em;
    }

    .ov-card__count {
      font-size: 0.6875rem;
      font-weight: 700;
      color: var(--text-subtle);
      background: var(--bg-surface-light);
      border-radius: 999px;
      padding: 2px 9px;
    }

    .ov-link {
      border: none;
      background: none;
      color: var(--primary);
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font-sans);
      padding: 0;
    }

    .ov-link:hover { text-decoration: underline; }

    .ov-bars {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .ov-bar {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .ov-bar__meta {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 0.75rem;
      font-weight: 500;
    }

    .ov-bar__meta b {
      color: var(--text-main);
      font-weight: 600;
    }

    .ov-bar__meta span {
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
    }

    .ov-bar__track {
      height: 8px;
      border-radius: 999px;
      background: #E2E8F0;
      overflow: hidden;
    }

    .ov-bar__fill {
      height: 100%;
      border-radius: 999px;
      background: var(--primary);
    }

    .ov-table-wrap { overflow-x: auto; }

    .ov-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8125rem;
    }

    .ov-table th {
      text-align: left;
      padding: 10px 16px;
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      background: var(--bg-surface-light);
      border-bottom: 1px solid var(--border);
    }

    .ov-table th.num,
    .ov-table td.num { text-align: right; }

    .ov-table td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      color: var(--text-main);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .ov-table tr:last-child td { border-bottom: none; }

    .ov-table tbody tr:hover { background: var(--bg-surface-light); }

    .ov-empty td {
      text-align: center;
      color: var(--text-subtle);
      padding: 28px 16px !important;
      white-space: normal;
    }

    .ov-status {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 0.6875rem;
      font-weight: 600;
    }

    .ov-status--pending { background: var(--warning-soft); color: var(--warning-strong); }
    .ov-status--transit { background: var(--info-soft); color: var(--info-strong); }
    .ov-status--received { background: var(--success-soft); color: var(--success-strong); }
    .ov-status--draft { background: var(--bg-surface-light); color: var(--text-muted); }

    .ov-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .ov-action {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg-surface-light);
      color: var(--text-main);
      font-family: var(--font-sans);
      font-size: 0.8125rem;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }

    .ov-action i {
      font-size: 1rem;
      color: var(--primary);
    }

    .ov-action:hover {
      background: var(--bg-surface);
      border-color: var(--primary);
    }

    .ov-action:focus-visible {
      outline: none;
      box-shadow: var(--ring);
    }

    /* Clean overview: KPIs + attention + 4 shortcuts. Nothing else. */
    .ov--clean {
      gap: 20px;
      max-width: 1100px;
    }

    .ov-mid--clean {
      grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
      gap: 16px;
    }

    .ov-shortcuts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .ov-shortcut {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      min-height: 112px;
      padding: 18px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--bg-surface-light);
      color: var(--text-main);
      font-family: var(--font-sans);
      font-size: 0.9375rem;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }

    .ov-shortcut i {
      font-size: 1.25rem;
      color: var(--primary);
    }

    .ov-shortcut:hover {
      background: var(--bg-surface);
      border-color: var(--primary);
    }

    .ov-shortcut:focus-visible {
      outline: none;
      box-shadow: var(--ring);
    }

    .ov--clean .attn-list {
      gap: 2px;
    }

    .ov--clean .attn-item {
      padding: 11px 10px;
    }

    @media (max-width: 1099px) {
      .ov-mid--clean { grid-template-columns: 1fr; }
    }

    @media (max-width: 1099px) {
      .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .ov-mid,
      .ov-bottom { grid-template-columns: 1fr; }
    }

    /* =========================================================================
       ORDERS — soft Stitch split (6 tiles + item list)
       ========================================================================= */
    .ord {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      padding: 10px 10px 6px;
      box-sizing: border-box;
      background: var(--bg-main, #F1F5F9);
      gap: 0;
    }

    .ord-split {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 10px;
    }

    .ord-list-panel,
    .ord-detail-panel {
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface, #fff);
    }

    .ord-panel-head {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface-light);
    }

    .ord-panel-head h3 {
      margin: 0;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted, #64748B);
    }

    .ord-panel-head span {
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--text-muted, #64748B);
    }

    .ord-scroll {
      flex: 1;
      overflow: auto;
      min-height: 0;
      padding: 8px;
    }

    .ord-tiles {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
    }

    .ord-tile {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 3px;
      width: 100%;
      min-height: 52px;
      padding: 9px 12px 9px 11px;
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 10px;
      background: var(--bg-surface-light);
      cursor: pointer;
      text-align: left;
      font-family: var(--font-sans);
      color: var(--text-main, #1E293B);
      box-sizing: border-box;
      outline: none !important;
      box-shadow: none !important;
      transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }

    .ord-tile:hover { background: var(--bg-main); border-color: var(--n-300, #c3cfd2); }
    .ord-tile:focus,
    .ord-tile:focus-visible {
      outline: none !important;
      box-shadow: none !important;
    }

    /* Active / focused branch — clear visual focus */
    .ord-tile.is-selected {
      border-color: var(--primary);
      background: var(--primary-soft, #E6F4F1);
      box-shadow: inset 4px 0 0 var(--primary) !important;
    }

    .ord-tile.is-selected .ord-tile__name {
      color: var(--primary);
    }

    .ord-tile.is-empty { opacity: 0.58; }
    .ord-tile.is-empty.is-selected { opacity: 1; }

    .ord-tile__name {
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      min-width: 0;
    }

    .ord-tile__meta {
      font-size: 0.625rem;
      font-weight: 600;
      color: var(--text-muted, #64748B);
    }

    .ord-tile.is-status-draft .ord-tile__meta {
      color: var(--warning-strong);
    }

    .ord-tile.is-status-submitted .ord-tile__meta {
      color: var(--primary);
    }

    .ord-tile.is-status-done .ord-tile__meta {
      color: var(--success-strong);
    }

    .ord-tile.is-selected.is-status-draft .ord-tile__meta {
      color: var(--warning-strong);
    }

    .ord-tile.is-selected.is-status-submitted .ord-tile__meta {
      color: var(--primary);
    }

    .ord-tile.is-status-draft:not(.is-selected) {
      border-color: rgba(224, 140, 17, 0.35);
      background: rgba(253, 243, 227, 0.45);
    }

    .ord-tile.is-status-submitted:not(.is-selected) {
      border-color: var(--primary-soft-border);
      background: rgba(10, 68, 74, 0.04);
    }

    .ord-empty {
      padding: 28px 12px;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.8125rem;
    }

    .ord-tools {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface-light);
    }

    .ord-search {
      position: relative;
      flex: 1;
      min-width: 0;
    }

    .ord-search > i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 0.8rem;
      pointer-events: none;
      z-index: 1;
      width: 1em;
      text-align: center;
    }

    .ord-search input {
      width: 100%;
      height: 34px;
      padding: 0 12px 0 40px !important;
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 8px;
      background: var(--bg-surface);
      font-family: var(--font-sans);
      font-size: 0.8125rem;
      color: var(--text-main);
      outline: none;
      box-sizing: border-box;
    }

    .ord-search input:focus {
      border-color: var(--primary);
      box-shadow: none;
    }

    .ord-tools__meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .ord-count {
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .ord-tools__btn {
      height: 28px;
      width: 28px;
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 7px;
      background: var(--bg-surface);
      color: var(--primary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      outline: none !important;
      box-shadow: none !important;
    }

    .ord-detail-body {
      flex: 1;
      overflow-y: auto;
      min-height: 0;
      background: var(--bg-surface, #fff);
      padding: 8px;
    }

    .pick-list { display: flex; flex-direction: column; gap: 4px; }

    .pick-cat {
      margin-top: 4px;
      padding: 5px 8px;
      background: var(--bg-main);
      color: var(--text-muted, #64748B);
      border-radius: 6px;
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border: 1px solid var(--border, #E2E8F0);
    }

    .pick-row {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) 44px 56px;
      gap: 6px;
      align-items: center;
      padding: 7px 8px;
      background: var(--bg-surface);
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 8px;
      outline: none !important;
      box-shadow: none !important;
    }

    .pick-row:focus,
    .pick-row:focus-visible,
    .pick-row:focus-within {
      outline: none !important;
      box-shadow: none !important;
      border-color: var(--border, #E2E8F0);
    }

    .pick-row.is-done { opacity: 0.45; }
    .pick-row.is-short { border-color: #FCA5A5; }
    .pick-row.is-empty { opacity: 0.6; }

    .pick-row__check {
      width: 15px;
      height: 15px;
      accent-color: var(--primary);
      cursor: pointer;
      margin: 0 auto;
      outline: none !important;
      box-shadow: none !important;
    }

    .pick-row__check:focus,
    .pick-row__check:focus-visible {
      outline: none !important;
      box-shadow: none !important;
    }

    .pick-row__name {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-main, #1E293B);
      line-height: 1.25;
      word-break: break-word;
    }

    .pick-row__unit { font-weight: 500; font-size: 0.625rem; color: var(--text-muted); }
    .pick-row__meta { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }

    .pick-pill {
      display: inline-flex;
      align-items: center;
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 0.5625rem;
      font-weight: 700;
    }

    .pick-pill--ok { background: var(--success-soft); color: var(--success-strong); }
    .pick-pill--warn { background: var(--danger-soft); color: var(--danger-strong); }

    .pick-row__req {
      text-align: center;
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--primary);
      font-variant-numeric: tabular-nums;
    }

    .pick-row__req-label {
      display: block;
      font-size: 0.5rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    .pick-row__send input {
      width: 50px;
      height: 28px;
      text-align: center;
      font-size: 0.75rem;
      font-weight: 700;
      border: 1px solid var(--primary);
      border-radius: 6px;
      outline: none !important;
      background: var(--bg-surface);
      color: var(--primary);
      box-sizing: border-box;
      font-family: var(--font-sans);
      box-shadow: none !important;
    }

    .pick-row__send input:focus,
    .pick-row__send input:focus-visible {
      outline: none !important;
      box-shadow: none !important;
      border-color: var(--primary);
    }

    .pick-row__send input.is-short { border-color: #DC2626; color: #DC2626; }

    .ovw { display: flex; flex-direction: column; gap: 4px; }

    .ovw-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 4px 10px;
      padding: 8px 10px;
      background: var(--bg-surface);
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 8px;
      outline: none !important;
      box-shadow: none !important;
    }

    .ovw-item:focus,
    .ovw-item:focus-visible {
      outline: none !important;
      box-shadow: none !important;
    }

    .ovw-item__name { font-size: 0.75rem; font-weight: 600; color: var(--text-main); line-height: 1.25; }
    .ovw-item__unit { font-weight: 500; font-size: 0.625rem; color: var(--text-muted); }
    .ovw-item__qty { font-size: 0.9375rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; align-self: start; }
    .ovw-item__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }

    .ovw-tag {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 6px;
      border-radius: 5px;
      font-size: 0.625rem;
      font-weight: 700;
      background: var(--bg-main);
      color: var(--text-muted);
      border: 1px solid var(--border, #E2E8F0);
    }

    .ovw-tag.is-sent {
      opacity: 0.42;
    }

    .ovw-tag__tick {
      font-size: 8px;
      line-height: 1;
      width: 8px;
      flex: 0 0 auto;
    }

    .ovw-item.is-all-sent .ovw-item__name,
    .ovw-item.is-all-sent .ovw-item__qty {
      opacity: 0.45;
    }

    .ord-mobile-pick {
      display: none;
      flex-shrink: 0;
      margin: 0 0 8px;
    }

    .ord-mobile-select,
    .om-tools__branch {
      width: 100%;
      height: 42px;
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 10px;
      padding: 0 12px;
      font-family: var(--font-sans);
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--text-main, #1E293B);
      background: var(--bg-surface);
      outline: none;
      box-sizing: border-box;
    }

    .ord-mobile-select:focus,
    .om-tools__branch:focus {
      border-color: var(--primary);
    }

    /* Desktop OM uses branch tiles; select is mobile-only. */
    .om-tools__branch { display: none; }

    @media (max-width: 1099px) {
      .ord-split { grid-template-columns: 1fr; }
      .ord-list-panel { display: none !important; }
      .ord-mobile-pick { display: block; }
      .ord-detail-panel { min-height: 0; flex: 1; }
    }

    /* =========================================================================
       ORDER MANAGEMENT — same soft split as Orders
       ========================================================================= */
    .om {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      padding: 10px 10px 6px;
      box-sizing: border-box;
      background: var(--bg-main, #F1F5F9);
    }

    .om-split {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 10px;
    }

    .om-list-panel,
    .om-detail-panel {
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface, #fff);
    }

    .om-panel-head {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface-light);
    }

    .om-panel-head h3 {
      margin: 0;
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted, #64748B);
    }

    .om-panel-head span {
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--text-muted, #64748B);
    }

    .om-scroll {
      flex: 1;
      overflow: auto;
      min-height: 0;
      padding: 8px;
    }

    .om-tools {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface-light);
    }

    .om-tools__date {
      height: 34px;
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 8px;
      padding: 0 10px;
      font-family: var(--font-sans);
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-main);
      background: var(--bg-surface);
      outline: none;
    }

    .om-tools__date:focus { border-color: var(--primary); }

    .om-status {
      flex: 1;
      min-width: 140px;
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--text-muted);
      padding: 6px 10px;
      border-radius: 8px;
      background: var(--bg-surface);
      border: 1px solid var(--border, #E2E8F0);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      line-height: 1.2;
    }

    .om-status.is-idle {
      background: var(--bg-surface);
      border-color: var(--border);
      color: var(--text-muted);
    }

    .om-status.is-new {
      background: var(--primary-soft);
      border-color: var(--primary-soft-border);
      color: var(--primary);
    }

    .om-status.is-draft {
      background: var(--warning-soft);
      border-color: rgba(224, 140, 17, 0.35);
      color: var(--warning-strong);
    }

    .om-status.is-submitted {
      background: var(--primary-soft);
      border-color: var(--primary-soft-border);
      color: var(--primary);
    }

    .om-status.is-done {
      background: var(--success-soft);
      border-color: rgba(15, 159, 119, 0.3);
      color: var(--success-strong);
    }

    .om-status__pill {
      display: inline-flex;
      align-items: center;
      height: 18px;
      padding: 0 7px;
      border-radius: 999px;
      font-size: 0.5625rem;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      background: rgba(255, 255, 255, 0.65);
      border: 1px solid currentColor;
      opacity: 0.92;
      flex-shrink: 0;
    }

    .om-status__meta {
      color: inherit;
      opacity: 0.78;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .om-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    .om-actions button,
    .om-wa-btn {
      height: 34px;
      padding: 0 12px;
      border-radius: 8px;
      font-family: var(--font-sans);
      font-size: 0.6875rem;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface);
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-shrink: 0;
      white-space: nowrap;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .om-actions button:hover,
    .om-wa-btn:hover {
      background: var(--bg-main);
      border-color: var(--n-300, #c3cfd2);
      color: var(--text-main);
    }

    .om-actions button.om-btn-primary {
      border-color: var(--primary-soft-border);
      background: var(--primary-soft);
      color: var(--primary);
    }

    .om-actions button.om-btn-primary:hover {
      border-color: var(--primary);
      background: var(--primary);
      color: var(--primary-contrast);
    }

    .om-actions button.om-btn-ghost {
      border-color: var(--border);
      background: var(--bg-surface);
      color: var(--text-muted);
    }

    .om-wa-btn {
      border-color: rgba(37, 211, 102, 0.35);
      background: rgba(37, 211, 102, 0.1);
      color: #128C7E;
    }

    .om-wa-btn:hover {
      border-color: #25D366;
      background: rgba(37, 211, 102, 0.18);
      color: #075E54;
    }

    .om-wa-btn.om-btn-ghost {
      border-color: var(--border);
      background: var(--bg-surface);
      color: var(--text-muted);
    }

    .om-wa-btn.om-btn-ghost:hover {
      border-color: var(--n-300, #c3cfd2);
      background: var(--bg-main);
      color: var(--text-main);
    }

    .om-wa-btn i {
      font-size: 0.9rem;
    }

    .om-body {
      flex: 1;
      overflow: auto;
      min-height: 0;
      padding: 8px;
      background: var(--bg-surface, #fff);
    }

    .om-empty {
      height: 100%;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--text-muted);
      gap: 6px;
      padding: 24px;
    }

    .om-empty i { font-size: 2rem; opacity: 0.2; margin-bottom: 4px; }
    .om-empty strong { font-size: 0.875rem; color: var(--text-main); }

    .om-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .om-line {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr) 30px 58px 26px;
      gap: 5px;
      align-items: center;
      padding: 4px 8px;
      background: var(--bg-surface);
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 9px;
      box-sizing: border-box;
    }

    /* Branch Place Order: same card as before, without link column */
    .om-line--branch {
      grid-template-columns: 22px minmax(0, 1fr) 64px 28px;
    }

    /* Desktop: ordered name and linked catalog product side by side in their own columns */
    .om-list-head {
      display: none;
    }

    @media (min-width: 900px) {
      .om-line:not(.om-line--branch) {
        grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) 30px 58px 26px;
        gap: 10px;
      }

      .om-line:not(.om-line--branch) .om-line__main {
        display: contents;
      }

      .om-line:not(.om-line--branch) .om-line__meta {
        margin-top: 0;
      }

      .om-line:not(.om-line--branch) .om-line__linked {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-main, #1E293B);
      }

      .om-line:not(.om-line--branch) .om-line__linked.is-warn {
        color: var(--warning-strong, #B45309);
      }

      .om-list-head {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) 30px 58px 26px;
        gap: 10px;
        padding: 0 9px 2px;
        font-size: 0.6rem;
        font-weight: 800;
        color: var(--text-muted, #64748B);
        text-transform: uppercase;
        letter-spacing: 0.4px;
      }
    }

    .om-line__chip-stock {
      display: inline-flex;
      align-items: center;
      height: 20px;
      padding: 0 7px;
      border-radius: 4px;
      background: var(--primary-soft, #E6F4F1);
      border: 1px solid var(--primary-soft-border, rgba(10, 68, 74, 0.18));
      color: var(--primary, #0A444A);
      font-size: 0.55rem;
      font-weight: 700;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .om-line__chip-unit {
      display: inline-flex;
      align-items: center;
      height: 20px;
      padding: 0 7px;
      border-radius: 4px;
      background: var(--bg-surface-light, #F1F5F9);
      border: 1px solid var(--border, #E2E8F0);
      color: var(--text-muted, #64748B);
      font-size: 0.55rem;
      font-weight: 700;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .om-line__num {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-muted, #64748B);
      text-align: center;
    }

    .om-line__name {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-main, #1E293B);
      line-height: 1.25;
      word-break: break-word;
    }

    .om-line__name-input {
      width: 100%;
      height: 28px;
      border: 1px solid transparent;
      border-radius: 5px;
      padding: 0 6px;
      font-family: var(--font-sans);
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-main, #1E293B);
      background: transparent;
      outline: none;
      box-sizing: border-box;
    }

    .om-line__name-input:hover,
    .om-line__name-input:focus {
      border-color: var(--border, #E2E8F0);
      background: var(--bg-surface-light);
    }

    .om-line__name-input:focus {
      border-color: var(--primary, #0A444A);
      background: var(--bg-surface);
    }

    .om-line__meta {
      margin-top: 1px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
      min-width: 0;
    }

    .om-line__chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      height: 20px;
      padding: 0 7px;
      border-radius: 6px;
      font-size: 0.625rem;
      font-weight: 700;
      border: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface-light);
      color: var(--text-muted, #64748B);
      cursor: pointer;
      font-family: var(--font-sans);
    }

    .om-line__chip.is-ok {
      background: var(--primary-soft);
      border-color: var(--primary-soft-border);
      color: var(--primary);
    }

    .om-line__chip.is-warn {
      background: var(--warning-soft);
      border-color: var(--warning-soft);
      color: var(--warning-strong);
    }

    .om-line__link {
      width: 30px;
      height: 30px;
      min-width: 30px;
      padding: 0;
      border-radius: 7px;
      border: 1px solid var(--border, #E2E8F0);
      background: var(--bg-surface);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
    }

    .om-line__link.is-ok {
      color: #16A34A;
      border-color: rgba(22, 163, 74, 0.35);
      background: rgba(22, 163, 74, 0.08);
    }

    .om-line__link.is-warn {
      color: #DC2626;
      border-color: rgba(220, 38, 38, 0.3);
      background: rgba(220, 38, 38, 0.06);
    }

    .om-line__unit {
      font-size: 0.625rem;
      font-weight: 600;
      color: var(--text-muted, #64748B);
    }

    .om-line__linked {
      font-size: 0.6875rem;
      font-weight: 500;
      color: var(--text-muted, #64748B);
      line-height: 1.2;
      word-break: break-word;
    }

    .om-line__linked.is-warn {
      color: var(--warning-strong, #B45309);
      font-weight: 600;
    }

    .om-line__unit-inline {
      font-size: 0.6rem;
      font-weight: 600;
      color: var(--text-muted, #64748B);
      opacity: 0.85;
    }

    .om-line__qty {
      width: 100%;
      height: 28px;
      border: 1px solid var(--border, #E2E8F0);
      border-radius: 5px;
      text-align: center;
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--primary, #0A444A);
      background: var(--bg-surface-light);
      outline: none;
      box-sizing: border-box;
      padding: 0 2px;
      -moz-appearance: textfield;
      appearance: textfield;
    }

    .om-line__qty::-webkit-outer-spin-button,
    .om-line__qty::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .om-line__qty:focus {
      border-color: var(--primary, #0A444A);
      background: var(--bg-surface);
    }

    .om-line__del {
      height: 28px;
      width: 28px;
      border: none;
      background: transparent;
      color: #DC2626;
      cursor: pointer;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
    }

    .om-line__del:hover { background: var(--danger-soft); }

    /* WhatsApp mode: show mobile branch chips when left panel is hidden */
    .om-wa-mobile-tabs { display: none; }
    .om.is-wa-mode #om-tiles { display: none !important; }
    .om.is-wa-mode #om-wa-tiles { display: grid !important; }
    .om:not(.is-wa-mode) #om-wa-tiles { display: none !important; }
    .om:not(.is-wa-mode) #om-tiles { display: grid; }

    @media (max-width: 1099px) {
      .om-split { grid-template-columns: 1fr; }
      .om-list-panel { display: none !important; }
      .om.is-wa-mode .om-wa-mobile-tabs { display: flex !important; }
      .om-tools {
        padding: 8px;
        gap: 6px;
      }
      .om-tools__branch {
        display: block;
        flex: 1 1 calc(58% - 3px);
        min-width: 0;
        height: 38px;
        order: -2;
      }
      .om-tools__date {
        flex: 1 1 calc(42% - 3px);
        min-width: 110px;
        height: 38px;
        order: -1;
      }
      .om-status {
        flex: 1 1 auto;
        min-width: 0;
        padding: 5px 8px;
      }
      .om-actions button { height: 32px; padding: 0 10px; }
      .om-wa-btn { height: 32px; padding: 0 10px; }
      .om-detail-panel { min-height: 0; flex: 1; }
    }

    .ql-settings {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .ql-settings__title {
      font-size: 10px;
      font-weight: 800;
      color: var(--text-muted);
      margin-bottom: 8px;
      letter-spacing: 0.04em;
    }

    .ql-settings__hint {
      font-size: 10px;
      color: var(--text-muted);
      margin: 0 0 10px;
    }

    .ql-slot {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }

    .ql-slot label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-main);
      margin: 0;
    }

    .ql-slot select {
      height: 36px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg-surface);
      color: var(--text-main);
      font-size: 12px;
      padding: 0 8px;
    }

    /* =========================================================================
       HUB DASHBOARD
       The Stitch overview: a KPI band, an "attention required" queue and the
       quick-action grid. Populated by renderHubKpis()/renderHubAttention().
       ========================================================================= */
    .hub {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      padding-bottom: var(--space-md);
    }

    .kpi-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .kpi {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px;
      min-height: 104px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
      box-shadow: var(--shadow-xs);
    }

    .kpi-row--compact {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .kpi-row--compact .kpi {
      min-height: 84px;
      padding: 11px;
      gap: 6px;
    }

    .kpi-row--compact .kpi__value {
      font-size: 1.2rem;
    }

    .kpi__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    .kpi__label {
      font-size: var(--fs-2xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      color: var(--text-muted);
      line-height: 1.3;
    }

    .kpi__head>i {
      font-size: 0.85rem;
      color: var(--text-subtle);
      flex: none;
    }

    .kpi__value {
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1;
      color: var(--text-main);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }

    .kpi__sub {
      font-size: var(--fs-xs);
      color: var(--text-subtle);
      font-weight: 500;
      margin-top: 5px;
    }

    .kpi--clickable {
      font-family: var(--font-sans);
      text-align: left;
      cursor: pointer;
      transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
    }

    .kpi--clickable:hover {
      border-color: var(--border-strong);
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
    }

    .kpi--clickable:focus-visible {
      outline: none;
      box-shadow: var(--ring);
      border-color: var(--primary);
    }

    .kpi--danger {
      background: var(--danger-soft);
      border-color: var(--danger);
    }

    .kpi--danger .kpi__label,
    .kpi--danger .kpi__value,
    .kpi--danger .kpi__sub,
    .kpi--danger .kpi__head>i {
      color: var(--danger-strong);
    }

    .kpi--warning {
      background: var(--warning-soft);
      border-color: var(--warning);
    }

    .kpi--warning .kpi__label,
    .kpi--warning .kpi__value,
    .kpi--warning .kpi__sub,
    .kpi--warning .kpi__head>i {
      color: var(--warning-strong);
    }

    .kpi--success .kpi__value {
      color: var(--success-strong);
    }

    .hub-cols {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }

    .panel {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 16px;
      box-shadow: var(--shadow-xs);
    }

    .panel__title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: var(--fs-lg);
      font-weight: 600;
      color: var(--text-main);
      margin: 0 0 12px;
      letter-spacing: -0.01em;
    }

    .panel__title>i {
      font-size: 0.85rem;
      color: var(--text-subtle);
    }

    .qa-title-actions {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: none;
    }

    .qa-arrange-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg-surface-light);
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex: none;
      padding: 0;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .qa-arrange-btn:hover {
      color: var(--primary);
      border-color: var(--primary-soft-border);
      background: var(--primary-soft);
    }

    .qa-arrange-btn.is-on {
      background: var(--primary);
      border-color: var(--primary);
      color: var(--primary-contrast);
    }

    .qa-arrange-btn i {
      font-size: 0.8rem;
      color: inherit !important;
    }

    .dash-card.qa-hidden {
      display: none !important;
    }

    .qa-vis-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      max-height: min(60vh, 420px);
      overflow-y: auto;
      margin: 0 -4px;
      padding: 0 4px;
    }

    .qa-vis-section {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin: 12px 0 6px;
    }

    .qa-vis-section:first-child {
      margin-top: 0;
    }

    .qa-vis-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 4px;
      border-bottom: 1px solid var(--border);
    }

    .qa-vis-row:last-child {
      border-bottom: none;
    }

    .qa-vis-row > i {
      width: 18px;
      text-align: center;
      color: var(--text-subtle);
      font-size: 0.9rem;
      flex: none;
    }

    .qa-vis-row > span {
      flex: 1;
      min-width: 0;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-main);
    }

    .qa-vis-hint {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.45;
      margin: 0 0 12px;
    }

    .hub-ops {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 10px;
    }

    .hub-ops > .panel {
      margin: 0;
    }

    .hub-ops .panel__title {
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    @keyframes qa-jiggle {
      0%, 100% { transform: rotate(-1.2deg) translateY(0); }
      50% { transform: rotate(1.2deg) translateY(-1px); }
    }

    .dash-grid.qa-edit-mode .dash-card {
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
      animation: qa-jiggle 0.4s ease-in-out infinite;
      background: var(--primary-soft) !important;
      border-color: var(--primary-soft-border) !important;
      box-shadow: none !important;
    }

    .dash-grid.qa-edit-mode .dash-card:nth-child(even) {
      animation-delay: 0.12s;
    }

    .dash-grid.qa-edit-mode .dash-card:nth-child(3n) {
      animation-delay: 0.22s;
    }

    .dash-grid.qa-edit-mode .dash-card.qa-dragging {
      opacity: 0.55;
      cursor: grabbing;
      animation: none;
      transform: scale(1.04);
      z-index: 5;
      border-color: var(--primary) !important;
    }

    .dash-grid.qa-edit-mode .dash-card.qa-drop-target {
      border-color: var(--primary) !important;
      background: var(--bg-surface) !important;
    }

    body.dark .dash-grid.qa-edit-mode .dash-card {
      background: rgba(168, 180, 181, 0.16) !important;
      border-color: rgba(168, 180, 181, 0.35) !important;
    }

    .panel__count {
      margin-left: auto;
      font-size: var(--fs-2xs);
      font-weight: 700;
      color: var(--text-subtle);
      background: var(--bg-sunken);
      border-radius: var(--radius-pill);
      padding: 2px 9px;
    }

    .attn-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .attn-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 9px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      background: transparent;
      font-family: var(--font-sans);
      text-align: left;
      cursor: pointer;
      transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .attn-item:hover {
      background: var(--bg-surface-light);
      border-color: var(--border);
    }

    .attn-item:focus-visible {
      outline: none;
      box-shadow: var(--ring);
      border-color: var(--primary);
    }

    .attn-item__icon {
      width: 32px;
      height: 32px;
      flex: none;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 0.8rem;
      background: var(--bg-sunken);
      color: var(--text-muted);
    }

    .attn-item__icon.tone-danger {
      background: var(--danger-soft);
      color: var(--danger-strong);
    }

    .attn-item__icon.tone-warning {
      background: var(--warning-soft);
      color: var(--warning-strong);
    }

    .attn-item__icon.tone-info {
      background: var(--info-soft);
      color: var(--info-strong);
    }

    .attn-item__icon.tone-success {
      background: var(--success-soft);
      color: var(--success-strong);
    }

    .attn-item__text {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .attn-item__text b {
      font-size: var(--fs-base);
      font-weight: 600;
      color: var(--text-main);
      line-height: 1.3;
    }

    .attn-item__text span {
      font-size: var(--fs-xs);
      color: var(--text-subtle);
    }

    .attn-item>.fa-chevron-right {
      font-size: 0.7rem;
      color: var(--text-subtle);
      flex: none;
    }

    .attn-empty {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 9px;
      color: var(--text-subtle);
      font-size: var(--fs-base);
    }

    .attn-empty>i {
      color: var(--success);
    }

    /* Runtime-promoted tiles and rows get the same ring as real controls. */
    [role="button"]:focus-visible {
      outline: none;
      box-shadow: var(--ring);
      border-color: var(--primary);
    }

    .drive-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .drive-actions .btn,
    .drive-actions .btn-outline {
      flex: 1 1 0;
      min-width: 0;
    }

    .drive-archive-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .drive-archive-toolbar input[type="month"] {
      flex: 1 1 140px;
      min-width: 0;
      height: 40px;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 0 10px;
      font-weight: 700;
      font-size: 12px;
      background: var(--bg-surface);
      color: var(--text-main);
    }

    .drive-view-toggle {
      display: flex;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      flex: none;
    }

    .drive-view-toggle button {
      width: 40px;
      height: 40px;
      border: none;
      background: var(--bg-surface);
      color: var(--text-muted);
      cursor: pointer;
    }

    .drive-view-toggle button.is-on {
      background: var(--primary);
      color: #fff;
    }

    .drive-file-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 10px;
    }

    .drive-file-card {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: var(--bg-surface);
      text-decoration: none;
      color: inherit;
    }

    .drive-file-card__thumb {
      aspect-ratio: 1;
      background: var(--bg-surface-light);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .drive-file-card__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .drive-file-card__thumb i {
      font-size: 1.8rem;
      color: var(--primary);
      opacity: 0.7;
    }

    .drive-file-card__meta {
      padding: 8px 10px 10px;
      min-width: 0;
    }

    .drive-file-card__meta b,
    .drive-file-card__meta span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .drive-file-card__meta b {
      font-size: 11px;
      font-weight: 800;
      color: var(--text-main);
    }

    .drive-file-card__meta span {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .drive-archive-hint {
      margin: 10px 0 0;
      font-size: 11px;
      line-height: 1.45;
      color: var(--text-muted);
    }

    /* Flex containers drop the whitespace between an icon and its label. */
    .btn {
      gap: 8px;
    }

    input[type="file"] {
      font-size: var(--fs-sm);
      color: var(--text-muted);
    }

    input[type="file"]::file-selector-button {
      margin-right: 10px;
      padding: 6px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-xs);
      background: var(--bg-surface-light);
      color: var(--text-main);
      font-family: var(--font-sans);
      font-size: var(--fs-sm);
      font-weight: 600;
      cursor: pointer;
      transition: background var(--dur) var(--ease);
    }

    input[type="file"]::file-selector-button:hover {
      background: var(--bg-sunken);
    }

    /* Tiles flagged by the dashboard context. Replaces the hardcoded hex
       values the refresh functions used to assign inline. */
    .dash-card.is-flagged {
      border-color: var(--primary);
      background: var(--primary-soft);
    }

    .dash-card.is-warn {
      border-color: var(--warning);
      background: var(--warning-soft);
    }

    .dash-card.is-critical {
      border-color: var(--danger);
      background: var(--danger-soft);
    }

    @media (min-width: 700px) {
      .kpi-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-md);
      }

      .kpi-row--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .hub {
        gap: var(--space-md);
      }
    }

    /* Two columns only once the console rail appears; below that the panels
       are too narrow and their action grids overflow. */
    @media (min-width: 1024px) {
      .hub-cols {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.9fr);
        gap: var(--space-md);
      }

      /* Quick actions first (left), attention second (right, narrower) */
      .hub-cols > .panel:first-child {
        order: 2;
      }

      .hub-cols > .panel:last-child {
        order: 1;
      }
    }

    /* A tile grid inside a panel must fit its column, not the viewport: the
       responsive tiers below pin .dash-grid to a fixed column count. */
    .panel .dash-grid {
      grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
      margin: 0 !important;
      gap: 10px !important;
    }

    /* Phone hub: keep cards off the screen edges; hide scrollbars. */
    @media (max-width: 1023px) {
      .hub {
        padding-left: 14px;
        padding-right: 14px;
      }

      .panel {
        padding: 12px;
      }

      .panel .dash-grid {
        gap: 10px !important;
      }

      #view-warehouse-main .scroll-area,
      #view-branch-main .scroll-area,
      #view-admin-main .scroll-area,
      #view-wh-inventory-hub .scroll-area {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
      }

      #view-warehouse-main .scroll-area::-webkit-scrollbar,
      #view-branch-main .scroll-area::-webkit-scrollbar,
      #view-admin-main .scroll-area::-webkit-scrollbar,
      #view-wh-inventory-hub .scroll-area::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
      }
    }

    /* =========================================================================
       CONSOLE SHELL
       Implements the Stitch console layout: a fixed 260px navigation rail, a
       64px top bar, and a fluid content area. Below 1024px the rail becomes an
       off-canvas drawer and the app falls back to the phone layout.
       ========================================================================= */
    .wms-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: var(--sidebar-w);
      z-index: var(--z-sidebar);
      background: var(--bg-surface);
      border-right: 1px solid var(--border);
      display: none;
      flex-direction: column;
      padding: 16px 12px;
      gap: 2px;
      color: var(--text-main);
    }

    .wms-sidebar__brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 4px 8px 20px;
    }

    .wms-sidebar__mark {
      width: 32px;
      height: 32px;
      flex: none;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: var(--primary-contrast);
      font-size: 0.9rem;
      background: var(--primary);
      box-shadow: none;
    }

    .wms-sidebar__wordmark b {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1;
      color: var(--text-main);
      letter-spacing: -0.02em;
    }

    .wms-sidebar__wordmark span {
      font-size: 0.625rem;
      line-height: 1.2;
      color: var(--text-muted);
      font-weight: 500;
      letter-spacing: 0.02em;
      text-transform: none;
    }

    .wms-sidebar__section {
      font-size: 0.625rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-subtle);
      padding: 16px 12px 6px;
    }

    .wms-nav-group {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-top: 6px;
    }

    .wms-nav-group:first-child {
      margin-top: 0;
    }

    .wms-nav-item--home {
      margin-bottom: 8px;
      font-weight: 700;
      color: var(--text-main);
    }

    .wms-nav-item--home > i {
      color: var(--primary);
    }

    .wms-nav-item--home + .wms-nav-group {
      margin-top: 2px;
    }

    .wms-nav-group__head {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 10px 12px 6px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--text-subtle);
      font-size: 0.625rem;
      font-weight: 700;
      font-family: var(--font-sans);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      cursor: pointer;
      text-align: left;
    }

    .wms-nav-group__head:hover {
      color: var(--text-muted);
      background: var(--bg-surface-light);
    }

    .wms-nav-group__head > span {
      flex: 1;
      min-width: 0;
    }

    .wms-nav-group__chev {
      font-size: 0.65rem;
      transition: transform 0.15s ease;
      color: inherit;
    }

    .wms-nav-group.is-open > .wms-nav-group__head > .wms-nav-group__chev {
      transform: rotate(90deg);
    }

    .wms-nav-group__body {
      display: none;
      flex-direction: column;
      gap: 2px;
      padding: 0 0 4px;
    }

    .wms-nav-group.is-open > .wms-nav-group__body {
      display: flex;
    }

    .wms-nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 12px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: var(--text-muted);
      font-size: 0.875rem;
      font-weight: 500;
      font-family: var(--font-sans);
      text-align: left;
      width: 100%;
      cursor: pointer;
      position: relative;
      transition: background 0.15s, color 0.15s;
      min-height: 40px;
    }

    .wms-nav-item>i {
      font-size: 1.1rem;
      width: 22px;
      flex: none;
      text-align: center;
      opacity: 1;
    }

    .wms-nav-item.is-active {
      background: var(--bg-surface-light);
      border-color: transparent;
      color: var(--primary);
      font-weight: 600;
      box-shadow: inset 3px 0 0 var(--primary);
      border-radius: 8px;
    }

    .wms-nav-item.is-disabled {
      opacity: 0.45;
      cursor: not-allowed;
      filter: grayscale(1);
      pointer-events: none;
    }

    .wms-sidebar__wordmark {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .wms-sidebar__nav {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-height: 0;
    }

    .wms-nav-item>span:not(.wms-nav-item__badge) {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wms-nav-item:hover {
      background: var(--bg-surface-light);
      color: var(--text-main);
    }

    .wms-nav-item:focus-visible {
      outline: none;
      box-shadow: none;
    }

    .wms-nav-item.is-active>i {
      opacity: 1;
    }

    .wms-nav-item__badge {
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      box-sizing: border-box;
      width: max-content;
      max-width: max-content;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      background: var(--danger);
      color: #fff;
      font-size: 0.625rem;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      align-self: center;
    }

    .wms-sidebar__footer {
      border-top: 1px solid var(--border);
      padding-top: 10px;
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .wms-role-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: var(--radius-sm);
      background: var(--bg-surface-light);
      border: 1px solid var(--border-subtle);
    }

    .wms-role-chip__avatar {
      width: 30px;
      height: 30px;
      flex: none;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--primary);
      color: var(--primary-contrast);
      font-size: var(--fs-2xs);
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .wms-role-chip__text {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .wms-role-chip__text b {
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--text-main);
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wms-role-chip__text span {
      font-size: var(--fs-2xs);
      color: var(--text-subtle);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* Off-canvas behaviour ------------------------------------------------ */
    .wms-scrim {
      position: fixed;
      inset: 0;
      z-index: 199;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: none;
    }

    body.has-shell.sidebar-open .wms-scrim {
      display: block;
      animation: fadeIn var(--dur) var(--ease-out);
    }

    body.has-shell.sidebar-open .wms-sidebar {
      display: flex;
      box-shadow: var(--shadow-xl);
      animation: railIn var(--dur-slow) var(--ease-out);
    }

    @keyframes railIn {
      from {
        transform: translateX(-100%);
      }

      to {
        transform: translateX(0);
      }
    }

    /* Top bar -------------------------------------------------------------- */
    .page-title-group {
      display: flex;
      align-items: baseline;
      gap: 10px;
      min-width: 0;
      flex: 1;
    }

    .page-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-main);
      letter-spacing: -0.015em;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .page-date {
      display: none;
      align-items: center;
      gap: 6px;
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--text-subtle);
      white-space: nowrap;
    }

    .user-chip {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 4px 10px 4px 4px;
      border-radius: var(--radius-pill);
      background: var(--bg-surface-light);
      border: 1px solid var(--border-subtle);
      max-width: 190px;
    }

    .user-chip__avatar {
      width: 26px;
      height: 26px;
      flex: none;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--primary);
      color: #fff;
      font-size: var(--fs-2xs);
      font-weight: 700;
    }

    .user-chip .user-display {
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--text-main);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .header-divider {
      width: 1px;
      height: 22px;
      background: var(--border);
      margin: 0 4px;
      flex: none;
    }

    /* Phone/tablet shell: header + footer edge-to-edge; content stays 520. -- */
    @media (max-width: 1023px) {
      body.has-shell .app-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
      }

      body.has-shell .sticky-header-group,
      body.has-shell .app-header,
      body.has-shell .bottom-nav {
        width: 100% !important;
        max-width: 100% !important;
      }

      body.has-shell .header-inner,
      body.has-shell .nav-inner {
        max-width: 100% !important;
      }

      /* Bottom bar stays inside the phone shell — never fixed with sidebar offset. */
      body.has-shell.has-bottom-nav .bottom-nav {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100% !important;
        margin-top: auto;
        flex-shrink: 0;
      }

      body.has-shell.has-bottom-nav .app-wrapper {
        padding-bottom: 0;
      }

      body.has-shell .view-box {
        max-width: 520px !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
    }

    /* Desktop: the rail is permanent and the app becomes full-bleed. -------- */
    @media (min-width: 1024px) {
      body.has-shell.has-bottom-nav .bottom-nav {
        position: fixed;
        left: var(--sidebar-w);
        right: 0;
        bottom: 0;
        width: auto;
        z-index: 120;
        margin-top: 0;
      }

      body.has-shell.has-bottom-nav .app-wrapper {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
      }
      body.has-shell .wms-sidebar {
        display: flex;
      }

      .wms-scrim {
        display: none !important;
      }

      .nav-toggle {
        display: none !important;
      }

      .page-date,
      .user-chip {
        display: flex;
      }

      body.has-shell {
        justify-content: flex-start;
      }

      body.has-shell .app-wrapper {
        margin-left: var(--sidebar-w);
        width: calc(100% - var(--sidebar-w));
        max-width: calc(100% - var(--sidebar-w)) !important;
        border: none;
        box-shadow: none;
      }

      body.has-shell .view-box,
      body.has-shell .header-inner,
      body.has-shell .sub-header-inner,
      body.has-shell .nav-inner {
        max-width: 100% !important;
      }

      .app-header {
        height: 64px;
      }

      .header-inner {
        height: 64px;
        padding: 0 24px;
      }

      .scroll-area {
        padding-left: 24px;
        padding-right: 24px;
      }

      .dash-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .stat-grid,
      .notice-box {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
      }

      .nav-inner {
        padding: 0 24px;
      }
    }

    /* =========================================================================
       RESPONSIVE TIERS
       ========================================================================= */
    /* Laptop layout (768px+) */
    @media (min-width: 768px) {
      .dash-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        margin: 15px !important;
      }

      .stat-grid {
        grid-template-columns: repeat(6, 1fr) !important;
      }

      .scroll-area {
        padding-top: 20px;
      }

      .btn-group-2 {
        grid-template-columns: 1fr 1fr;
      }

      .btn-group-3 {
        grid-template-columns: 1fr 1fr 1fr;
      }

      .nav-inner {
        gap: 20px;
      }
    }

    /* Desktop (1100px+) */
    @media (min-width: 1100px) {
      .dash-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 14px;
        margin: 18px 15px !important;
      }

      .dash-card {
        min-height: 124px;
        padding: 20px 16px;
      }

      .dash-card>i:first-child,
      .dash-card i.dash-icon,
      .dash-card .dash-count {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
      }

      .stat-card {
        padding: 14px 12px;
      }

      /* The action bar reads as a toolbar rather than a phone dock. */
      .nav-inner:not(.nav-four-btns) {
        justify-content: flex-end;
        gap: 10px;
      }

      .nav-inner:not(.nav-four-btns) button {
        flex: 0 1 190px !important;
      }
    }

    /* Global: no focus stroke / ring on tap (overrides component rules) */
    *:focus,
    *:focus-visible {
      outline: none !important;
    }

    input:is(:focus, :focus-visible),
    select:is(:focus, :focus-visible),
    textarea:is(:focus, :focus-visible) {
      box-shadow: none !important;
      border-color: var(--border) !important;
    }

    button:is(:focus, :focus-visible),
    [role="button"]:is(:focus, :focus-visible),
    a:is(:focus, :focus-visible),
    .icon-btn:is(:focus, :focus-visible),
    .dash-card:is(:focus, :focus-visible),
    .pick-row:is(:focus, :focus-visible, :focus-within),
    .ov-action:is(:focus, :focus-visible),
    .ov-shortcut:is(:focus, :focus-visible),
    .ord-tile:is(:focus, :focus-visible),
    .ovw-item:is(:focus, :focus-visible),
    .kpi--clickable:is(:focus, :focus-visible),
    .attn-item:is(:focus, :focus-visible),
    .wms-nav-item:is(:focus, :focus-visible) {
      box-shadow: none !important;
    }

    /* Skip layout/paint work for large off-screen list items. */
    .pi-item-card,
    .vl-list-row,
    .stk-item-card,
    .br-inv-card,
    .order-card,
    .inv-list,
    .dash-card,
    .mkt-card,
    .sl-item-row,
    .stk-cat-section,
    .wms-chunk-row {
      content-visibility: auto;
      contain-intrinsic-size: auto 52px;
    }