/* omnidata-system.css - the LAST stylesheet layer.
 *
 * One small design system on top of the layered omnidata-v3..v14 sheets. It does
 * NOT change the colour palette: every colour below is an existing --ods-color-*
 * token. It adds tokens (type, space, radius, border, shadow, control height,
 * icon size, z-index, motion) and normalises the shared components (button,
 * field, tab, badge, card, table, dialog, toast, empty state) plus the shell
 * geometry the audit found broken (sidebar footer, 820px empty column, search
 * box, breadcrumbs, sign-in, order economics, inspector header).
 *
 * Selectors start with `body #app`: the id outranks every class-only selector in
 * the older layers, so this file wins without another !important arms race for
 * properties the older layers never marked important; where they did, we do too.
 */

:root{
  /* type scale */
  --sys-fs-1:11px;--sys-fs-2:12px;--sys-fs-3:13px;--sys-fs-4:14px;--sys-fs-5:16px;--sys-fs-6:20px;--sys-fs-7:24px;--sys-fs-8:32px;
  --sys-lh-tight:1.25;--sys-lh-ui:1.4;--sys-lh-text:1.5;
  /* space scale */
  --sys-sp-1:4px;--sys-sp-2:8px;--sys-sp-3:12px;--sys-sp-4:16px;--sys-sp-5:24px;--sys-sp-6:32px;
  /* radius scale */
  --sys-r-sm:4px;--sys-r-md:8px;--sys-r-lg:12px;--sys-r-pill:999px;
  /* borders */
  --sys-bw:1px;
  --sys-border:1px solid var(--ods-color-border,#d9dee3);
  --sys-border-strong:1px solid var(--ods-color-border-strong,#c7cdd3);
  /* shadows (neutral ink, three levels) */
  --sys-shadow-1:0 1px 2px rgba(34,40,49,.06);
  --sys-shadow-2:0 4px 14px rgba(34,40,49,.10);
  --sys-shadow-3:0 14px 40px rgba(34,40,49,.18);
  /* control height: 36 with a mouse, 44 on touch and on narrow screens */
  --sys-control-h:36px;
  --sys-touch-h:44px;
  /* icons */
  --sys-icon-sm:16px;--sys-icon-md:20px;--sys-icon-lg:24px;--sys-icon-stroke:1.75;
  /* z-index scale */
  --sys-z-sticky:10;--sys-z-nav:20;--sys-z-pop:30;--sys-z-drawer:40;--sys-z-modal:50;--sys-z-toast:60;
  /* motion */
  --sys-ease:cubic-bezier(.23,1,.32,1);
  --sys-dur-fast:120ms;--sys-dur:160ms;--sys-dur-enter:200ms;--sys-dur-exit:140ms;
  /* shell */
  --sys-sidebar-w:236px;
  --sys-rail-w:64px;
}
@media (pointer:coarse),(max-width:1180px){:root{--sys-control-h:44px}}

/* ------------------------------------------------------------------ shell */
body.omnidata-v13{--od13-sidebar-collapsed:var(--sys-rail-w)}
/* The grid column is `auto`: it is exactly as wide as the sidebar, so the
   column can never disagree with the sidebar again (820px used to keep a 208px
   column next to a 60px rail, and 1440px a 232px column under a 236px sidebar). */
@media (min-width:721px){
  body #app .shell:not([hidden]),body #app .shell.sidebar-collapsed:not([hidden]){display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;transition:none!important}
  body #app .shell{--sys-sidebar-w:236px}
  body #app .shell.sidebar-collapsed{--sys-sidebar-w:var(--sys-rail-w)}
  body #app .sidebar,body #app .shell.sidebar-collapsed .sidebar{width:var(--sys-sidebar-w)!important;min-width:var(--sys-sidebar-w)!important;max-width:var(--sys-sidebar-w)!important;transition:none!important}
}
@media (min-width:721px) and (max-width:820px){
  body #app .shell,body #app .shell.sidebar-collapsed{--sys-sidebar-w:var(--sys-rail-w)}
}
@media (min-width:721px){
  body #app .sidebar{display:flex!important;flex-direction:column!important;height:100vh!important;height:100dvh!important;overflow:hidden!important;z-index:var(--sys-z-nav)!important}
  /* the list scrolls in its own box and ends above the footer; the footer is in the flow */
  body #app .sidebar .nav{flex:1 1 0!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;padding-bottom:var(--sys-sp-3)!important;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 12px),transparent)}
  body #app .sidebar .sidebar-footer:not([hidden]){flex:0 0 auto!important;position:relative;display:grid!important;gap:var(--sys-sp-1)!important;padding:var(--sys-sp-2) 0 0!important;margin:0!important}
  body #app .sidebar .brand{flex:0 0 auto!important}
}
body #app .topbar{z-index:var(--sys-z-sticky)!important}
body #app .nav-item,body #app .sidebar-action,body #app .nav-group-toggle{box-sizing:border-box!important;min-height:var(--sys-control-h)!important;border-radius:var(--sys-r-md)!important;gap:var(--sys-sp-2)!important}
body #app .nav-item,body #app .sidebar-action{padding-block:0!important;padding-inline:var(--sys-sp-3)!important}
body #app .nav .nav-item:hover:not(.active){transition:background-color var(--sys-dur-fast) var(--sys-ease),color var(--sys-dur-fast) var(--sys-ease)}
body #app .nav-item .icon,body #app .sidebar-action .icon{width:var(--sys-icon-sm)!important;height:var(--sys-icon-sm)!important;flex:0 0 var(--sys-icon-sm)!important}
body #app .nav-group-label{margin-block:var(--sys-sp-3) var(--sys-sp-1)!important;margin-inline:var(--sys-sp-2)!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
body #app .nav-group-toggle{margin:var(--sys-sp-2) 0 var(--sys-sp-1)!important;padding-inline:var(--sys-sp-2)!important;letter-spacing:.02em!important}
body #app .nav-group-label{letter-spacing:.02em!important}
/* collapsed rail: every item is a full 44px target and fits the rail */
@media (min-width:721px){
  body #app .shell.sidebar-collapsed .sidebar,body #app .shell .sidebar:where(.rail){padding-inline:var(--sys-sp-2)!important}
}
@media (min-width:721px) and (max-width:820px){
  body #app .sidebar{padding-inline:var(--sys-sp-2)!important}
  body #app .sidebar .nav-item,body #app .sidebar .sidebar-action,body #app .sidebar .nav-group-toggle{min-width:0!important;width:100%!important;max-width:100%!important;padding-inline:0!important;justify-content:center!important;overflow:hidden!important}
  body #app .sidebar .nav-group-toggle{margin-inline:0!important}
}
@media (min-width:721px) and (max-height:760px){
  body #app .sidebar .sidebar-footer .sidebar-action{min-height:var(--sys-control-h)!important}
}

/* --------------------------------------------------------------- topbar */
body #app .topbar{gap:var(--sys-sp-3)!important;padding-inline:var(--sys-sp-5)!important}
@media (min-width:1181px){
  body #app .topbar{grid-template-columns:minmax(0,1fr) minmax(180px,320px) max-content!important}
}
body #app .topbar .breadcrumb{min-width:0!important;gap:var(--sys-sp-2)!important;overflow:visible!important}
body #app .topbar .breadcrumb>*{flex:0 0 auto!important;max-width:none!important;white-space:nowrap!important}
/* the section crumb gives way first (ellipsis only when the column is really full); the page name never shrinks */
body #app .topbar .breadcrumb>.breadcrumb-muted{flex:0 1 auto!important;min-width:4ch!important;overflow:hidden!important;text-overflow:ellipsis!important}
body #app .topbar .breadcrumb>strong{flex:0 1 auto!important;min-width:0!important;font-size:var(--sys-fs-3)!important;overflow:hidden!important;text-overflow:ellipsis!important}
body #app .topbar .breadcrumb{container-type:inline-size}
/* a column too narrow for root / section / page drops the middle crumb instead of cutting words */
@container (max-width:400px){
  body #app .topbar .breadcrumb>.breadcrumb-root,body #app .topbar .breadcrumb>.breadcrumb-root+.breadcrumb-divider{display:none!important}
}
@container (max-width:520px){
  body #app .topbar .breadcrumb>.breadcrumb-muted,body #app .topbar .breadcrumb>.breadcrumb-muted+.breadcrumb-divider{display:none!important}
}
body #app .topbar .breadcrumb>.breadcrumb-root{padding-inline:var(--sys-sp-3)!important}
body #app .global-search{box-sizing:border-box!important;min-height:var(--sys-control-h)!important;height:auto!important;gap:var(--sys-sp-2)!important;padding:0 var(--sys-sp-3)!important;border:0!important;box-shadow:inset 0 0 0 1px var(--ods-color-border-strong,#c7cdd3)!important;border-radius:var(--sys-r-md)!important}
body #app .global-search:focus-within{box-shadow:inset 0 0 0 2px var(--ods-color-accent,#ff5b22)!important}
body #app .global-search input{border-radius:0!important;min-height:var(--sys-control-h)!important;height:var(--sys-control-h)!important;padding:0!important;font-size:var(--sys-fs-3)!important}
body #app .global-search kbd{padding:0 var(--sys-sp-2)!important;border-radius:var(--sys-r-sm)!important;font-size:var(--sys-fs-1)!important}
@media (pointer:coarse){body #app .global-search kbd{display:none!important}}
body #app .topbar-icon-button,body #app .language-option,body #app .od-v7-help-button{box-sizing:border-box!important;min-width:var(--sys-control-h)!important;min-height:var(--sys-control-h)!important;height:var(--sys-control-h)!important;border-radius:var(--sys-r-md)!important}
body #app .topbar-organisation,body #app .topbar-user{min-height:var(--sys-control-h)!important;border-radius:var(--sys-r-md)!important}
body #app .notification-count{min-width:16px!important;height:16px!important;padding:0 var(--sys-sp-1)!important;border-radius:var(--sys-r-pill)!important;font-size:var(--sys-fs-1)!important;line-height:16px!important;font-weight:700}
body #app .user-avatar{border-radius:50%!important;font-size:var(--sys-fs-1)!important}
body #app .topbar-menu{border-radius:var(--sys-r-md)!important;box-shadow:var(--sys-shadow-2)!important;z-index:var(--sys-z-pop)!important;padding:var(--sys-sp-3)!important}

/* ----------------------------------------------------- page header, eyebrow */
body #app .od14-page-header{gap:var(--sys-sp-3)!important}
body #app .od14-page-header>.od14-page-heading{flex:1 1 auto!important;min-width:0!important}
body #app .od14-page-title{font-size:var(--sys-fs-7)!important;line-height:var(--sys-lh-tight)!important;margin:var(--sys-sp-2) 0 var(--sys-sp-1)!important}
/* the eyebrow is a caption, not a field-looking box */
body #app .od14-page-section{box-sizing:border-box!important;display:block!important;width:auto!important;max-width:100%!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;font-size:var(--sys-fs-1)!important;letter-spacing:.06em}

/* ---------------------------------------------------------------- buttons */
body #app :is(button,.button,[role=button],select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file])){box-sizing:border-box;font-family:inherit}
body #app :is(.button,button.primary,button.secondary,button.danger,button.ghost,.od-filter-button,.od-column-button,.od-hierarchy-button,.icon-button,.syntha-hub-primary,.syntha-hub-secondary){
  min-height:var(--sys-control-h)!important;padding-block:0!important;padding-inline:var(--sys-sp-4)!important;
  border-radius:var(--sys-r-md)!important;border-width:var(--sys-bw)!important;
  font-size:var(--sys-fs-3)!important;font-weight:600!important;line-height:var(--sys-lh-ui)!important;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sys-sp-2)!important;
  transition:background-color var(--sys-dur-fast) var(--sys-ease),border-color var(--sys-dur-fast) var(--sys-ease),color var(--sys-dur-fast) var(--sys-ease),box-shadow var(--sys-dur-fast) var(--sys-ease),transform var(--sys-dur-fast) var(--sys-ease)!important;
}
body #app .button.small{padding-inline:var(--sys-sp-3)!important;font-size:var(--sys-fs-2)!important}
body #app .icon-button{min-width:var(--sys-control-h)!important;padding-inline:0!important}
body #app :is(.button,button.primary,button.secondary,button.danger,button.ghost,.od-filter-button,.od-column-button,.od-hierarchy-button,.icon-button,.topbar-icon-button,.language-option,.syntha-hub-primary,.syntha-hub-secondary,.syntha-hub-card,.syntha-hub-journey-stop,.nav-item,.sidebar-action,[role=tab],.od-tabs button):active:not(:disabled){transform:scale(.97)}
body #app :is(button,[role=button],a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ods-color-accent,#ff5b22)!important;outline-offset:2px!important}
body #app :is(button,.button,input,select,textarea):disabled,body #app :is(button,.button)[aria-disabled=true]{
  opacity:1!important;cursor:not-allowed;color:var(--ods-color-text-soft,#56606a)!important;
  background:var(--ods-color-surface-soft,#f7f8f9)!important;border-color:var(--ods-color-border,#d9dee3)!important;box-shadow:none!important;transform:none!important}
body #app :is(button.primary,.button.primary):disabled{background:var(--ods-color-surface-soft,#f7f8f9)!important;color:var(--ods-color-text-soft,#56606a)!important}

body #app :is(.od-tab,.ls9-tab,.breadcrumb-root,.ls9-filter-button,.od-filter-button,.od-column-button,.od-hierarchy-button){box-sizing:border-box!important;height:var(--sys-control-h)!important;min-height:var(--sys-control-h)!important;border-radius:var(--sys-r-md)!important}

/* ------------------------------------------------------------------ fields */
body #app :is(select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file])):not(.global-search input){
  height:var(--sys-control-h)!important;min-height:var(--sys-control-h)!important;padding-block:0!important;padding-inline:var(--sys-sp-3)!important;border-radius:var(--sys-r-md)!important;
  font-size:var(--sys-fs-3)!important;line-height:var(--sys-lh-ui)!important;
  transition:border-color var(--sys-dur-fast) var(--sys-ease),box-shadow var(--sys-dur-fast) var(--sys-ease)!important}
body #app textarea{height:auto!important;padding-block:var(--sys-sp-2)!important;min-height:calc(var(--sys-control-h)*2)!important}
body #app :is(select,textarea,input):is([aria-invalid=true],.invalid){border-color:var(--ods-color-danger,#a94349)!important}
body #app :is(label>span,.field-label,legend){font-size:var(--sys-fs-2)!important;line-height:var(--sys-lh-ui)!important}
body #app .form-grid{gap:var(--sys-sp-3) var(--sys-sp-4)!important}
body #app .form-grid>label{display:grid;gap:var(--sys-sp-1);align-content:start}

/* search + filter boxes in a phone command bar: never a 220px-tall empty frame.
   (omnidata-v13.css gave them flex:1 1 100% inside a column, i.e. a height basis.) */
@media (max-width:560px){
  body #app :is(.od-search,.od-filter){flex:0 0 auto!important;width:100%!important;max-width:none!important;min-height:0!important;height:auto!important}
  body #app .od-commandbar>.button{flex:0 0 auto!important;width:100%!important;max-width:none!important;min-height:var(--sys-control-h)!important}
  body #app .od-search input,body #app .od-filter select{width:100%!important;height:var(--sys-control-h)!important}
  body #app .od-commandbar{gap:var(--sys-sp-2)!important}
  body #app .od-commandbar :is(.od-filter-button,.od-column-button,.od-hierarchy-button){width:100%!important;max-width:none!important;align-self:stretch!important;margin:0!important}
}

/* -------------------------------------------------------------------- tabs */
body #app :is(.od-tabs,.ls9-tabs,.planning-tabs,.styles-tabs,.materials-tabs,.bom-tabs,.measurement-tabs,.sample-tabs,.sourcing-tabs,.od-inspector-tabs,[role=tablist]){
  display:flex!important;flex-wrap:nowrap!important;gap:var(--sys-sp-2)!important;overflow-x:auto!important;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;border-radius:0!important}
body #app :is(.od-tabs,.ls9-tabs,.planning-tabs,.styles-tabs,.materials-tabs,.bom-tabs,.measurement-tabs,.sample-tabs,.sourcing-tabs,.od-inspector-tabs,[role=tablist])>:is(button,[role=tab],a){
  flex:0 0 auto!important;scroll-snap-align:start;box-sizing:border-box;height:var(--sys-control-h)!important;min-height:var(--sys-control-h)!important;padding-block:0!important;padding-inline:var(--sys-sp-3)!important;
  border-radius:var(--sys-r-md)!important;font-size:var(--sys-fs-2)!important;line-height:var(--sys-lh-ui)!important;white-space:nowrap!important;
  transition:background-color var(--sys-dur-fast) var(--sys-ease),border-color var(--sys-dur-fast) var(--sys-ease),color var(--sys-dur-fast) var(--sys-ease),transform var(--sys-dur-fast) var(--sys-ease)!important}

/* ------------------------------------------------------------ badges, chips */
body #app :is(.badge,.od-chip,.od-filter-chip,.sourcing-badge,.section-count){
  box-sizing:border-box;display:inline-flex;align-items:center;min-height:22px;padding:0 var(--sys-sp-2)!important;
  border-radius:var(--sys-r-pill)!important;font-size:var(--sys-fs-1)!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap}
body #app .badge{max-width:100%}

/* ------------------------------------------------------------------- cards */
body #app :is(.card,.entity,.od-inspector,.sourcing-panel,.sourcing-toolbar,.sourcing-kpi,.od-master,.od-preview,.od-status-card,.production-orders-card,.production-execution-card,.final-quality-card,.tech-pack-card,.sample-detail-card,.syntha-hub-hero,.syntha-hub-journey,.syntha-hub-recent,.syntha-hub-directory,.od-process-card,.quote-card,.allocation-card,.sourcing-header){
  border-radius:var(--sys-r-lg)!important}
body #app :is(.syntha-hub-card,.syntha-hub-journey-stop,.syntha-hub-metric,.od-process-card,.sourcing-subpanel,.od-hint-note){border-radius:var(--sys-r-md)!important}
body #app :is(.entity,.card){padding:var(--sys-sp-4)!important}

/* titles, status cards and captions wrap instead of ending in an ellipsis */
body #app :is(.entity-title,.entity-title-block h2,.entity h2,.card h2,.od-status-card span,.od-status-card strong,.od-status-card small,.sourcing-inspector-title,.sourcing-inspector-title h2){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;min-width:0}
body #app :is(.od-status-card,.metric,.kpi,.syntha-hub-metric,.od-inspector,.entity){min-width:0}
body #app :is(main,.workspace-content) small:not(.brand small):not(.user-copy small){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
body #app .topbar-organisation{max-width:min(280px,30vw)!important}
body #app .topbar-organisation span{flex:1 1 auto!important}
body #app .od-inspector-title,body #app .od-inspector-head{text-align:left!important}

/* ------------------------------------------------------------------ tables */
/* header and cell text wraps at word boundaries; nothing is cut mid-word.
   The wrapper scrolls (it is focusable and fades at the edge in older layers). */
body #app :is(.od-table-wrap,.scroll-region,.sourcing-table-wrap){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
body #app table :is(th,td){padding:var(--sys-sp-2) var(--sys-sp-3)!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word!important;word-break:normal!important;hyphens:manual}
body #app table th{white-space:normal!important;vertical-align:bottom;line-height:var(--sys-lh-tight)!important;font-size:var(--sys-fs-1)!important}
body #app table td{vertical-align:middle;line-height:var(--sys-lh-ui)!important}
body #app table tbody tr{transition:background-color var(--sys-dur-fast) var(--sys-ease)}
@media (hover:hover){body #app table tbody tr:hover{background-color:var(--ods-color-surface-hover,#fff8f4)}}
body #app table .button,body #app table button{min-height:var(--sys-control-h)}
body #app .od-mini-table th,body #app .od-mini-table td{padding:var(--sys-sp-2)!important}

/* --------------------------------------------------------- empty, loading */
body #app :is(.empty,.od-empty,.sourcing-empty,.od-v7-empty,.empty-state){
  display:grid;justify-items:center;gap:var(--sys-sp-2);padding:var(--sys-sp-6) var(--sys-sp-4)!important;border-radius:var(--sys-r-lg)!important;text-align:center;font-size:var(--sys-fs-3)!important;line-height:var(--sys-lh-text)}

/* -------------------------------------------------------- dialog and toast */
body #app dialog,dialog{
  border:var(--sys-border);border-radius:var(--sys-r-lg);box-shadow:var(--sys-shadow-3);padding:0;max-width:calc(100vw - 2*var(--sys-sp-4));max-height:calc(100dvh - 2*var(--sys-sp-4));z-index:var(--sys-z-modal);
  opacity:0;transform:translateY(8px);
  transition:opacity var(--sys-dur-exit) ease-in,transform var(--sys-dur-exit) ease-in,overlay var(--sys-dur-exit) allow-discrete,display var(--sys-dur-exit) allow-discrete}
body #app dialog[open],dialog[open]{opacity:1;transform:none;transition:opacity var(--sys-dur-enter) var(--sys-ease),transform var(--sys-dur-enter) var(--sys-ease),overlay var(--sys-dur-enter) allow-discrete,display var(--sys-dur-enter) allow-discrete}
@starting-style{body #app dialog[open],dialog[open]{opacity:0;transform:translateY(8px)}}
dialog::backdrop{opacity:0;transition:opacity var(--sys-dur-exit) ease-in,overlay var(--sys-dur-exit) allow-discrete,display var(--sys-dur-exit) allow-discrete}
dialog[open]::backdrop{opacity:1;transition:opacity var(--sys-dur-enter) var(--sys-ease),overlay var(--sys-dur-enter) allow-discrete,display var(--sys-dur-enter) allow-discrete}
@starting-style{dialog[open]::backdrop{opacity:0}}
body #app .dialog-head{gap:var(--sys-sp-4)!important;margin-bottom:var(--sys-sp-4)!important;padding-bottom:var(--sys-sp-3)!important}
body #app .dialog-head h3{margin:0!important;font-size:var(--sys-fs-6)!important;line-height:var(--sys-lh-tight)!important}
body #app .dialog-body{padding:var(--sys-sp-5)!important}
body #app .dialog-actions{gap:var(--sys-sp-2)!important}
body #app .toast{z-index:var(--sys-z-toast)!important}
body #app .toast>*{animation:sys-toast-in var(--sys-dur-enter) var(--sys-ease) both;border-radius:var(--sys-r-md)!important;box-shadow:var(--sys-shadow-2)!important}
body #app .toast>.is-leaving{animation:sys-toast-out var(--sys-dur-exit) ease-in both}
body #app .notice{border-radius:var(--sys-r-md)!important;font-size:var(--sys-fs-3)!important}
@keyframes sys-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sys-toast-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px)}}
@keyframes sys-pop-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
body #app .topbar-menu:not([hidden]),body #app :is([role=menu],[role=listbox],.od-filter-popover,.od-filter-menu,.od-column-menu):not([hidden]){animation:sys-pop-in var(--sys-dur) var(--sys-ease) both;transform-origin:top right}

/* --------------------------------------------------- mobile drawer motion */
@media (max-width:720px){
  body #app .sidebar{transition:transform var(--sys-dur-enter) var(--sys-ease),visibility 0s linear var(--sys-dur-enter)!important;will-change:transform}
  body #app .shell.nav-open .sidebar{transition:transform var(--sys-dur-enter) var(--sys-ease),visibility 0s!important}
  body #app .nav-backdrop{transition:opacity var(--sys-dur-enter) var(--sys-ease),visibility 0s linear var(--sys-dur-enter)!important}
  body #app .shell.nav-open .nav-backdrop{transition:opacity var(--sys-dur-enter) var(--sys-ease),visibility 0s!important}
  body #app .sidebar .nav{flex:1 1 0!important;min-height:0!important;overflow-y:auto!important;padding-bottom:var(--sys-sp-3)!important}
  body #app .sidebar .sidebar-footer{flex:0 0 auto!important;position:relative}
}

/* ------------------------------------------------------------------- icons */
body #app svg.icon,body #app .icon svg{stroke-width:var(--sys-icon-stroke)}
body #app .icon{flex:0 0 auto}

/* ------------------------------------------------------------------ sign-in */
body #app .login-wrap{display:grid!important;place-items:center;min-height:100vh;min-height:100dvh;padding:var(--sys-sp-4)!important;box-sizing:border-box}
body #app .login{box-sizing:border-box;display:grid;gap:var(--sys-sp-4);width:min(440px,100%)!important;max-width:100%!important;margin:0!important;padding:var(--sys-sp-5)!important;border-radius:var(--sys-r-lg)!important;box-shadow:var(--sys-shadow-3)!important}
body #app .login .brand{justify-content:flex-start!important;margin:0!important;padding:var(--sys-sp-3) var(--sys-sp-4)!important;width:auto!important;max-width:100%!important;border-radius:var(--sys-r-md)!important;gap:var(--sys-sp-3)!important}
body #app .login .brand-copy:not([hidden]){display:block!important;opacity:1!important}
body #app .login .brand-copy h1:not([hidden]){display:block!important;font-size:var(--sys-fs-5)!important;line-height:var(--sys-lh-tight)!important;margin:0!important}
body #app .login .brand-copy small:not([hidden]){display:block!important;font-size:var(--sys-fs-1)!important;margin-top:var(--sys-sp-1)!important}
body #app .login p{margin:0!important}
body #app .login .muted{font-size:var(--sys-fs-3)!important;line-height:var(--sys-lh-text)!important}
body #app .login-hint{font-size:var(--sys-fs-2)!important;line-height:var(--sys-lh-text)!important}
body #app .login form{display:grid;gap:var(--sys-sp-3);margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
body #app .login label:not([hidden]){display:grid!important;gap:var(--sys-sp-1)}
body #app .login label>span{font-size:var(--sys-fs-2)!important;font-weight:600}
body #app .login input{width:100%!important;font-size:var(--sys-fs-4)!important}
body #app .login .button{width:100%;font-size:var(--sys-fs-4)!important}
body #app .login .button.primary{margin-top:var(--sys-sp-1)}
body #app .login .language-switcher{display:flex;gap:var(--sys-sp-2)}

/* ------------------------------------------------------ inspector (Details) */
body #app .od-inspector-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sys-sp-2) var(--sys-sp-3)!important}
body #app .od-inspector-title,body #app .sourcing-inspector-title{font-size:var(--sys-fs-5)!important;font-weight:700!important;line-height:var(--sys-lh-tight)!important;margin:0!important;padding-top:0!important}
body #app .od-inspector-head .badge{margin:0!important}
body #app .od-inspector-actions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))!important;gap:var(--sys-sp-2)!important;justify-content:stretch!important}
body #app .od-inspector-actions>.button{width:100%!important;flex:none!important;min-width:0}
body #app .od-inspector-actions>.button.primary{grid-column:1/-1}
body #app .od-inspector-title>*{margin-left:0!important;padding-left:0!important;text-indent:0!important}
body #app :is(.od-inspector-head-main,.od-inspector-title){min-width:0!important;max-width:100%!important}
body #app .od-inspector-title h3{max-width:100%;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;margin:var(--sys-sp-1) 0 0!important;font-size:var(--sys-fs-5)!important;font-weight:700!important;line-height:var(--sys-lh-tight)!important;overflow-wrap:anywhere}
body #app .od-inspector-title p{max-width:100%;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;margin:0!important;font-size:var(--sys-fs-2)!important;line-height:var(--sys-lh-ui)!important}
body #app .od-inspector-title{display:grid!important;gap:var(--sys-sp-1)!important;justify-items:start}
body #app .od-inspector dd{font-size:var(--sys-fs-3)!important}

/* --------------------------------------------------------- order economics */
body #app .order-economics-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sys-sp-3);margin-bottom:var(--sys-sp-4)}
body #app .order-economics-kpi{display:grid;gap:var(--sys-sp-1);align-content:start;padding:var(--sys-sp-3) var(--sys-sp-4);border:var(--sys-border);border-radius:var(--sys-r-md);background:var(--ods-color-surface-soft,#f7f8f9)}
body #app .order-economics-kpi.wide{grid-column:1/-1}
body #app .order-economics-kpi-label{font-size:var(--sys-fs-1);color:var(--ods-color-muted,#69727d);line-height:var(--sys-lh-ui)}
body #app .order-economics-kpi-value{font-size:var(--sys-fs-5);font-weight:700;line-height:var(--sys-lh-tight);color:var(--ods-color-text,#222831);overflow-wrap:anywhere}
body #app .order-economics-kpi.wide .order-economics-kpi-value{font-size:var(--sys-fs-3);font-weight:600;line-height:var(--sys-lh-text)}
body #app .order-economics-step{grid-template-areas:none!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:var(--sys-sp-2)!important;margin:0 0 var(--sys-sp-3)!important;padding:var(--sys-sp-4)!important;border:var(--sys-border)!important;border-radius:var(--sys-r-lg)!important;background:var(--ods-color-surface,#fff)!important}
body #app .order-economics-step>*{grid-area:auto!important;grid-column:1!important}
body #app .order-economics-step .entity-head:not([hidden]){display:flex!important;align-items:flex-start!important;justify-content:space-between;gap:var(--sys-sp-3)!important}
body #app .order-economics-step .entity-title{font-size:var(--sys-fs-4)!important;font-weight:700!important}
body #app .order-economics-step .meta:not([hidden]){display:grid!important;gap:var(--sys-sp-1)!important;font-size:var(--sys-fs-2)!important;line-height:var(--sys-lh-text)}
body #app .order-economics-step .entity-actions:not([hidden]){display:flex!important;flex-wrap:wrap;gap:var(--sys-sp-2)!important;justify-content:flex-start!important}

/* ------------------------------------------------- hub (overview) geometry */
body #app .syntha-hub-journey-rail{gap:var(--sys-sp-3)!important;padding:var(--sys-sp-1)!important;scroll-padding-inline:var(--sys-sp-4)!important}
body #app .syntha-hub-journey-stop{flex:0 0 auto;gap:var(--sys-sp-3)!important;padding:var(--sys-sp-3)!important}
body #app .syntha-hub-stats{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important;gap:var(--sys-sp-3)!important}
body #app .syntha-hub-stats>:last-child:nth-child(odd){grid-column:1/-1}
body #app .syntha-hub-card-name{font-size:var(--sys-fs-4)!important}
body #app .od-process-number{font-size:var(--sys-fs-6)!important}

/* --------------------------------- scale mop-up: radii and spacing off the scale */
body #app :is([class*="-table-wrap"],[class*="-kpi"],[class$="-inspector"],[class*="-filters"],[class*="-registry"],.scroll-region,.od-definition-item,.od-commandbar,.od-section,.tech-pack-readiness,.final-quality-create,.tech-pack-actions,.syntha-hub-card-grid,.language-switcher,.od-hint-note,.od-preview-mark,.syntha-hub-card-symbol,.production-risk-text,.operational-collaboration-panel,.sourcing-warning,.sourcing-error,.sourcing-confirm,.tp-doc-note){border-radius:var(--sys-r-md)!important}
body #app :is(.od-inspector-code,kbd,input[type=checkbox],.od-tag){border-radius:var(--sys-r-sm)!important}
body #app .main{padding-bottom:var(--sys-sp-6)!important}
body #app .sidebar{padding-inline:var(--sys-sp-2)!important;padding-bottom:var(--sys-sp-3)!important}
body #app .sidebar .brand{box-sizing:border-box!important;width:calc(100% + 2*var(--sys-sp-2))!important;margin-inline:calc(-1*var(--sys-sp-2))!important;min-width:0!important;overflow:hidden;padding:0 var(--sys-sp-3)!important;gap:var(--sys-sp-3)!important}
body #app .nav-group-label{padding:0 var(--sys-sp-2)!important}
body #app .nav-group-toggle,body #app .nav-item,body #app .sidebar-action{gap:var(--sys-sp-2)!important}
body #app .od-v7-system-footer{padding-inline:var(--sys-sp-4)!important}
body #app :is(button,.button,[role=button],label.od-filter,label.od-search,.od-filter,.od-search){column-gap:var(--sys-sp-2)!important;row-gap:var(--sys-sp-2)!important}
body #app :is(.topbar-icon-button,.od-v7-help-button){padding:0!important}
body #app :is(.breadcrumb-root,.language-option,.od-tab,.ls9-tab){padding-block:0!important;padding-inline:var(--sys-sp-3)!important}
body #app .language-option{padding-inline:var(--sys-sp-2)!important}
body #app :is(.od-status-card){padding:var(--sys-sp-2) var(--sys-sp-3)!important;gap:var(--sys-sp-2)!important}
body #app :is(label.od-filter,label.od-search){padding-block:0!important;padding-inline:var(--sys-sp-3)!important}
body #app .od-inspector-head{padding:var(--sys-sp-4)!important}
body #app .od-section-head{padding:var(--sys-sp-3)!important}
body #app .bom-line-view{padding:var(--sys-sp-3)!important;gap:var(--sys-sp-2)!important}
body #app .syntha-hub-card{padding:var(--sys-sp-4)!important;gap:var(--sys-sp-2)!important}
body #app .syntha-hub-card-lead{gap:var(--sys-sp-3)!important}
body #app .syntha-hub-card-tail{padding:var(--sys-sp-1) var(--sys-sp-2)!important}
body #app .syntha-hub-group{gap:var(--sys-sp-3)!important}
body #app .syntha-hub{gap:var(--sys-sp-5)!important}
body #app .syntha-hub-hero-copy{padding:var(--sys-sp-6)!important;gap:var(--sys-sp-4)!important}
body #app :is(.syntha-hub-journey,.syntha-hub-recent,.syntha-hub-directory){padding:var(--sys-sp-5)!important;gap:var(--sys-sp-4)!important}
body #app .syntha-hub-sections{gap:var(--sys-sp-5)!important}
body #app :is(.od-process-list,.syntha-hub-directory-top){gap:var(--sys-sp-3)!important}
body #app .od-inspector-title h3{padding:0!important}
body #app .od-inspector-code{padding:var(--sys-sp-1) var(--sys-sp-2)!important}

body #app :is(dl,.od-definition-grid)>div,body #app .od-handoff-step,body #app :is([class*="-actions"],[class*="-create"],[class*="-payment"],[class*="-warn"],[class^="ls9-"],.od-process-board,.quote-card,.allocation-card,.bom-line-view,.measurement-header,.sample-summary>*){border-radius:var(--sys-r-md)!important}
body #app :is(.sourcing-workspace,.measurement-page,.bom-page){gap:var(--sys-sp-4)!important}
body #app :is(.sourcing-inspector-title,.bom-inspector-head,.tech-pack-inspector-head,.sample-inspector-head){padding:var(--sys-sp-3) var(--sys-sp-4)!important;gap:var(--sys-sp-2)!important}
body #app :is(.quote-card,.allocation-card,.bom-risk-list,.bom-line-list,.od-process-board){padding:var(--sys-sp-3)!important;gap:var(--sys-sp-2)!important}
body #app :is(.bom-line-group-count,.bom-line-main,.od-inline-actions,.row){gap:var(--sys-sp-2)!important}
body #app :is(.bom-line-group-count,.bom-line-main){padding-inline:var(--sys-sp-2)!important}

body #app :is(.od-tabs,.od-inspector-tabs){padding-block:var(--sys-sp-2)!important}
body #app :is(.od-commandbar,.od-metrics,.od-status-strip){padding:var(--sys-sp-2) var(--sys-sp-3)!important;gap:var(--sys-sp-2)!important}
body #app .toast>*,body #app :is(.notice,.dialog-error){padding:var(--sys-sp-2) var(--sys-sp-3)!important;border-radius:var(--sys-r-md)!important}
body #app :is(.measurement-inspector-head,.sample-inspector-head){padding:var(--sys-sp-3) var(--sys-sp-4)!important}
body #app .od-status-value{font-size:var(--sys-fs-2)!important}
body #app td.final-quality-empty,body #app .toast{border-radius:var(--sys-r-md)!important}

body #app :is(.ls9-inspector-head,.measurement-inspector-head){padding:var(--sys-sp-3) var(--sys-sp-4)!important}
body #app :is(.ls9-search,label.ls9-search){padding:0 var(--sys-sp-3)!important;gap:var(--sys-sp-2)!important}
body #app .ls9-select{padding-inline:var(--sys-sp-3)!important}
body #app .tech-pack-readiness{padding:var(--sys-sp-3)!important}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  /* four :not() raise the specificity above every component rule of this file and of the older layers */
  body #app *:not(.rm-a):not(.rm-b):not(.rm-c):not(.rm-d),body #app *:not(.rm-a):not(.rm-b):not(.rm-c):not(.rm-d)::before,body #app *:not(.rm-a):not(.rm-b):not(.rm-c):not(.rm-d)::after,dialog,dialog::backdrop{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  body #app :active:not(.rm-a):not(.rm-b):not(.rm-c):not(.rm-d){transform:none!important}
  body #app dialog,dialog{transform:none!important}
  body #app .toast>*,body #app .topbar-menu:not([hidden]){animation:none!important;transform:none!important}
  body #app .sidebar{will-change:auto}
}