/* Central supplier components. All 20 roles use the same seven normalized theme tokens. */
.supplier-app [data-supplier-component="app-frame"] {
  background-color: var(--supplier-ui-app-frame-bg);
  color: var(--supplier-ui-app-frame-text);
  border-color: var(--supplier-ui-app-frame-border);
  border-width: var(--supplier-ui-app-frame-border-width);
  border-radius: var(--supplier-ui-app-frame-radius);
  padding: var(--supplier-ui-app-frame-padding);
  box-shadow: var(--supplier-ui-app-frame-shadow);
  border-style: solid;
}

.supplier-app .supplier-panel:not([data-supplier-component]),
.supplier-app .supplier-admin-results:not([data-supplier-component]),
.supplier-app .supplier-admin-overlay-panel:not([data-supplier-component]),
.supplier-app [data-supplier-component="panels"],
.supplier-app .supplier-card:not([data-supplier-component]) {
  background-color: var(--supplier-ui-panels-bg);
  color: var(--supplier-ui-panels-text);
  border-color: var(--supplier-ui-panels-border);
  border-width: var(--supplier-ui-panels-border-width);
  border-radius: var(--supplier-ui-panels-radius);
  padding: var(--supplier-ui-panels-padding);
  box-shadow: var(--supplier-ui-panels-shadow);
  border-style: solid;
}

.supplier-app [data-supplier-component="page-container"],
.supplier-app .supplier-page-shell:not([data-supplier-component]) {
  background-color: var(--supplier-ui-page-container-bg);
  color: var(--supplier-ui-page-container-text);
  border-color: var(--supplier-ui-page-container-border);
  border-width: var(--supplier-ui-page-container-border-width);
  border-radius: var(--supplier-ui-page-container-radius);
  padding: var(--supplier-ui-page-container-padding);
  box-shadow: var(--supplier-ui-page-container-shadow);
  border-style: solid;
}

.supplier-app [data-supplier-component="header"],
.supplier-app .supplier-header:not([data-supplier-component]) {
  background-color: var(--supplier-ui-header-bg);
  color: var(--supplier-ui-header-text);
  border-color: var(--supplier-ui-header-border);
  border-width: var(--supplier-ui-header-border-width);
  border-radius: var(--supplier-ui-header-radius);
  padding: var(--supplier-ui-header-padding);
  box-shadow: var(--supplier-ui-header-shadow);
  border-style: solid;
}

.supplier-app [data-supplier-component="navigation"],
.supplier-app .supplier-nav-button:not([data-supplier-component]),
.supplier-app .supplier-mobile-menu-link:not([data-supplier-component]),
.supplier-app .supplier-mobile-nav-button:not([data-supplier-component]) {
  background-color: var(--supplier-ui-navigation-bg);
  color: var(--supplier-ui-navigation-text);
  border-color: var(--supplier-ui-navigation-border);
  border-width: var(--supplier-ui-navigation-border-width);
  border-radius: var(--supplier-ui-navigation-radius);
  padding: var(--supplier-ui-navigation-padding);
  box-shadow: var(--supplier-ui-navigation-shadow);
  border-style: solid;
}

.supplier-app [data-supplier-component="product-cards"],
.supplier-app article[id^="product-card-"]:not([data-supplier-component]) {
  background-color: var(--supplier-ui-product-cards-bg);
  color: var(--supplier-ui-product-cards-text);
  border-color: var(--supplier-ui-product-cards-border);
  border-width: var(--supplier-ui-product-cards-border-width);
  border-radius: var(--supplier-ui-product-cards-radius);
  padding: var(--supplier-ui-product-cards-padding);
  box-shadow: var(--supplier-ui-product-cards-shadow);
  border-style: solid;
}

.supplier-app .supplier-admin-primary-action:not([data-supplier-component]),
.supplier-app .supplier-tabs__button:not([data-supplier-component]),
.supplier-app input:is([type="submit"],[type="button"],[type="reset"]):not([data-supplier-component]),
.supplier-app [data-supplier-component="buttons"],
.supplier-app .supplier-button:not([data-supplier-component]),
.supplier-app .btn-u:not([data-supplier-component]),
.supplier-app button:not([data-supplier-component]):not([class*="backdrop"]):not(.supplier-sales-invoice-number):not([data-wysiwyg-command]):not([data-supplier-component]) {
  background-color: var(--supplier-ui-buttons-bg);
  color: var(--supplier-ui-buttons-text);
  border-color: var(--supplier-ui-buttons-border);
  border-width: var(--supplier-ui-buttons-border-width);
  border-radius: var(--supplier-ui-buttons-radius);
  padding: var(--supplier-ui-buttons-padding);
  box-shadow: var(--supplier-ui-buttons-shadow);
  border-style: solid;
}

.supplier-app [data-supplier-component="forms"],
.supplier-app form.supplier-form:not([data-supplier-component]) {
  background-color: var(--supplier-ui-forms-bg);
  color: var(--supplier-ui-forms-text);
  border-color: var(--supplier-ui-forms-border);
  border-width: var(--supplier-ui-forms-border-width);
  border-radius: var(--supplier-ui-forms-radius);
  padding: var(--supplier-ui-forms-padding);
  box-shadow: var(--supplier-ui-forms-shadow);
  border-style: solid;
}

.supplier-app .supplier-input:not([data-supplier-component]),
.supplier-app .supplier-select:not([data-supplier-component]),
.supplier-app [data-supplier-component="inputs"],
.supplier-app input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([data-supplier-component]),
.supplier-app select:not([data-supplier-component]),
.supplier-app textarea:not([data-supplier-component]) {
  background-color: var(--supplier-ui-inputs-bg);
  color: var(--supplier-ui-inputs-text);
  border-color: var(--supplier-ui-inputs-border);
  border-width: var(--supplier-ui-inputs-border-width);
  border-radius: var(--supplier-ui-inputs-radius);
  padding: var(--supplier-ui-inputs-padding);
  box-shadow: var(--supplier-ui-inputs-shadow);
  border-style: solid;
}

.supplier-app .supplier-category-block:not([data-supplier-component]),
.supplier-app [data-supplier-component="category-blocks"],
.supplier-app .supplier-category-block:not([data-supplier-component]) {
  background-color: var(--supplier-ui-category-blocks-bg);
  color: var(--supplier-ui-category-blocks-text);
  border-color: var(--supplier-ui-category-blocks-border);
  border-width: var(--supplier-ui-category-blocks-border-width);
  border-radius: var(--supplier-ui-category-blocks-radius);
  padding: var(--supplier-ui-category-blocks-padding);
  box-shadow: var(--supplier-ui-category-blocks-shadow);
  border-style: solid;
}

.supplier-app .supplier-price:not([data-supplier-component]),
.supplier-app [data-supplier-component="price-elements"],
.supplier-app .supplier-price:not([data-supplier-component]) {
  background-color: var(--supplier-ui-price-elements-bg);
  color: var(--supplier-ui-price-elements-text);
  border-color: var(--supplier-ui-price-elements-border);
  border-width: var(--supplier-ui-price-elements-border-width);
  border-radius: var(--supplier-ui-price-elements-radius);
  padding: var(--supplier-ui-price-elements-padding);
  box-shadow: var(--supplier-ui-price-elements-shadow);
  border-style: solid;
}

.supplier-app .supplier-admin-alert:not([data-supplier-component]),
.supplier-app .supplier-admin-flash:not([data-supplier-component]),
.supplier-app [data-supplier-component="notices"],
.supplier-app .supplier-alert:not([data-supplier-component]),
.supplier-app .onboarding-error:not([data-supplier-component]),
.supplier-app .onboarding-success:not([data-supplier-component]) {
  background-color: var(--supplier-ui-notices-bg);
  color: var(--supplier-ui-notices-text);
  border-color: var(--supplier-ui-notices-border);
  border-width: var(--supplier-ui-notices-border-width);
  border-radius: var(--supplier-ui-notices-radius);
  padding: var(--supplier-ui-notices-padding);
  box-shadow: var(--supplier-ui-notices-shadow);
  border-style: solid;
}

.supplier-app [data-supplier-component="footer"] {
  background-color: var(--supplier-ui-footer-bg);
  color: var(--supplier-ui-footer-text);
  border-color: var(--supplier-ui-footer-border);
  border-width: var(--supplier-ui-footer-border-width);
  border-radius: var(--supplier-ui-footer-radius);
  padding: var(--supplier-ui-footer-padding);
  box-shadow: var(--supplier-ui-footer-shadow);
  border-style: solid;
}

.supplier-app [data-supplier-component="card-headers"],
.supplier-app .supplier-card-heading:not([data-supplier-component]),
.supplier-app .supplier-card-gradient:not([data-supplier-component]) {
  background-color: var(--supplier-ui-card-headers-bg);
  color: var(--supplier-ui-card-headers-text);
  border-color: var(--supplier-ui-card-headers-border);
  border-width: var(--supplier-ui-card-headers-border-width);
  border-radius: var(--supplier-ui-card-headers-radius);
  padding: var(--supplier-ui-card-headers-padding);
  box-shadow: var(--supplier-ui-card-headers-shadow);
  border-style: solid;
}

.supplier-app [data-supplier-component="table-headers"],
.supplier-app thead th:not([data-supplier-component]),
.supplier-app thead td:not([data-supplier-component]) {
  background-color: var(--supplier-ui-table-headers-bg);
  color: var(--supplier-ui-table-headers-text);
  border-color: var(--supplier-ui-table-headers-border);
  border-width: var(--supplier-ui-table-headers-border-width);
  border-radius: var(--supplier-ui-table-headers-radius);
  padding: var(--supplier-ui-table-headers-padding);
  box-shadow: var(--supplier-ui-table-headers-shadow);
  border-style: solid;
}

.supplier-app [data-supplier-component="table-cells"],
.supplier-app tbody th:not([data-supplier-component]),
.supplier-app tbody td:not([data-supplier-component]),
.supplier-app tfoot td:not([data-supplier-component]) {
  background-color: var(--supplier-ui-table-cells-bg);
  color: var(--supplier-ui-table-cells-text);
  border-color: var(--supplier-ui-table-cells-border);
  border-width: var(--supplier-ui-table-cells-border-width);
  border-radius: var(--supplier-ui-table-cells-radius);
  padding: var(--supplier-ui-table-cells-padding);
  box-shadow: var(--supplier-ui-table-cells-shadow);
  border-style: solid;
}

.supplier-app .supplier-filterbar:not([data-supplier-component]),
.supplier-app .supplier-admin-filter:not([data-supplier-component]),
.supplier-app [data-supplier-component="toolbars"],
.supplier-app .supplier-toolbar:not([data-supplier-component]),
.supplier-app .onboarding-filters:not([data-supplier-component]) {
  background-color: var(--supplier-ui-toolbars-bg);
  color: var(--supplier-ui-toolbars-text);
  border-color: var(--supplier-ui-toolbars-border);
  border-width: var(--supplier-ui-toolbars-border-width);
  border-radius: var(--supplier-ui-toolbars-radius);
  padding: var(--supplier-ui-toolbars-padding);
  box-shadow: var(--supplier-ui-toolbars-shadow);
  border-style: solid;
}

.supplier-app [data-supplier-component="switches"],
.supplier-app .shopapp-switch__track:not([data-supplier-component]) {
  background-color: var(--supplier-ui-switches-bg);
  color: var(--supplier-ui-switches-text);
  border-color: var(--supplier-ui-switches-border);
  border-width: var(--supplier-ui-switches-border-width);
  border-radius: var(--supplier-ui-switches-radius);
  padding: var(--supplier-ui-switches-padding);
  box-shadow: var(--supplier-ui-switches-shadow);
  border-style: solid;
}

.supplier-app .supplier-overlay-panel:not([data-supplier-component]),
.supplier-app [data-supplier-component="overlays"],
.supplier-app .supplier-dialog:not([data-supplier-component]),
.supplier-app .supplier-underbouwing-panel:not([data-supplier-component]) {
  background-color: var(--supplier-ui-overlays-bg);
  color: var(--supplier-ui-overlays-text);
  border-color: var(--supplier-ui-overlays-border);
  border-width: var(--supplier-ui-overlays-border-width);
  border-radius: var(--supplier-ui-overlays-radius);
  padding: var(--supplier-ui-overlays-padding);
  box-shadow: var(--supplier-ui-overlays-shadow);
  border-style: solid;
}

.supplier-app [data-supplier-component="badges"],
.supplier-app .supplier-badge:not([data-supplier-component]) {
  background-color: var(--supplier-ui-badges-bg);
  color: var(--supplier-ui-badges-text);
  border-color: var(--supplier-ui-badges-border);
  border-width: var(--supplier-ui-badges-border-width);
  border-radius: var(--supplier-ui-badges-radius);
  padding: var(--supplier-ui-badges-padding);
  box-shadow: var(--supplier-ui-badges-shadow);
  border-style: solid;
}


.supplier-app { background-image: var(--supplier-background-image, none); background-position: var(--supplier-background-position, top center); background-size: cover; }
.supplier-app :is(input, select, textarea, td, th) { font-family: var(--supplier-font-body); }
.supplier-app :is(h1,h2,h3,h4,h5,h6,summary) { font-family: var(--supplier-font-heading); letter-spacing: -.02em; }
.supplier-app :is(button,label,legend) { font-family: var(--supplier-font-body); }
.supplier-app :is(input:not([type=hidden]),select,textarea) { max-width: 100%; min-width: 0; }
.supplier-app :is(button, [data-supplier-component=buttons]) { cursor: pointer; }
.supplier-app :is(button,a,[data-supplier-component="navigation"]):focus-visible { outline: 2px solid color-mix(in srgb,var(--supplier-accent) 72%,white 28%); outline-offset: 2px; }
.supplier-app :is(input,select,textarea):focus-visible {outline:2px solid var(--supplier-primary);outline-offset:2px;}

.supplier-app :is(button, [data-supplier-component=buttons]):hover:not(:disabled) { filter: brightness(.96); }
.supplier-app :is(thead, thead tr) { background: var(--supplier-ui-table-headers-bg); color: var(--supplier-ui-table-headers-text); }
.supplier-app table { max-width: 100%; border-spacing: 0; }
.supplier-app .supplier-table-wrap, .supplier-app .onboarding-table { max-width: 100%; overflow-x: auto; }
.supplier-app :is(.supplier-nav-button,.supplier-mobile-menu-link,.supplier-mobile-nav-button)[aria-current=page] { font-weight: 700; }
/* Status is an additional marker: explicit component colours remain authoritative. */
.supplier-app :is(.onboarding-error,.supplier-badge--danger) { border-inline-start-color: var(--supplier-danger-text); border-inline-start-width: max(3px,var(--supplier-ui-notices-border-width)); }
.supplier-app :is(.onboarding-success,.supplier-badge--success) { border-inline-start-color: var(--supplier-success-text); border-inline-start-width: max(3px,var(--supplier-ui-notices-border-width)); }
/* Switch geometry is functional; the configured padding enlarges its outer track.
   Checked, focus and disabled remain visible independently of the chosen palette. */
.supplier-app .shopapp-switch__input:checked ~ .shopapp-switch__track { outline: 2px solid var(--supplier-accent); outline-offset: 1px; }
.supplier-app .shopapp-switch__input:focus-visible ~ .shopapp-switch__track { outline: 2px solid var(--supplier-focus-ring); outline-offset: 3px; }
.supplier-app .shopapp-switch__input:disabled ~ .shopapp-switch__track { opacity: .5; }
.supplier-app [data-supplier-component=card-headers] { background-image: none; }
.supplier-app :is([data-supplier-component=panels],[data-supplier-component=overlays],[data-supplier-component=product-cards]) { min-width: 0; max-width: 100%; }
/* A narrow viewport scrolls dense document tables locally, not the entire app. */
.supplier-app .supplier-main-stage { min-width: 0; }

.supplier-theme-preview-grid {display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.supplier-theme-preview-grid > section {min-width:0}
.supplier-theme-preview h3,.supplier-theme-preview h4 {font-weight:700;margin-block:.5rem}

.supplier-app [data-supplier-document-adjusted] {text-decoration:underline;text-decoration-color:var(--supplier-danger-text);text-decoration-style:dotted}

/* Text inside a component inherits its configured foreground, including labels
   formerly coloured by navigation and product-card utilities. */
.supplier-app :where(h1,h2,h3,h4,h5,h6,p,span,label,a,summary,div):not([data-supplier-component]) { color: inherit; }
.supplier-app {font-family:var(--supplier-font-body)}

.supplier-app :is([role="tab"],[data-supplier-underbouwing-tab])[aria-selected="true"] {outline:2px solid var(--supplier-accent);outline-offset:-2px;font-weight:800}

/* Tables join their card edge. Cell padding remains independently themed. */
.supplier-app [data-supplier-component="panels"].supplier-table-panel {
  padding: 0;
  overflow: auto;
}

/* ShopAPP visual contract, 2026-09-18. Own supplier tokens and runtime bindings.
   Functional geometry: joined table cells/headings have square corners; frame
   decoration starts at 1024px, desktop navigation at 1280px, as in ShopAPP. */
body.supplier-app {
  border: 0 solid #e5e7eb; border-radius: 0; padding: 0; box-shadow: none;
  color: var(--supplier-text);
  background: radial-gradient(circle at top left,rgba(255,255,255,.6),transparent 25rem),linear-gradient(180deg,var(--supplier-page-bg),color-mix(in srgb,var(--supplier-page-bg) 82%,white 18%));
  font-family: var(--supplier-font-body);
}
.supplier-app-outer { position:relative;min-height:100vh;width:100%; }
.supplier-layout-shell { display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;min-width:0; }
.supplier-app .supplier-main-shell { min-height:0;min-width:0; }
.supplier-app .supplier-main-stage { min-height:0;min-width:0;padding:0 0 calc(7rem + env(safe-area-inset-bottom,0px)); }
.supplier-app .supplier-main-content-frame {min-width:0;min-height:100%;}
.supplier-app .supplier-page-shell {width:100%;min-width:0;}
.supplier-app .supplier-page-shell > * + * {margin-top:1rem;}
.supplier-app .supplier-desktop-sidebar {
 display:none;min-height:0;overflow-y:auto;padding:2rem 1.5rem;
 background:var(--supplier-chrome);color:var(--supplier-chrome-text);
 border-right:1px solid var(--supplier-border);
}
.supplier-app .supplier-desktop-header {display:none;}
.supplier-app .supplier-mobile-header-menu {display:block;}
.supplier-app .supplier-mobile-menu-panel {position:fixed;left:auto;right:.75rem;top:4.5rem;width:min(24rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 10rem);overflow:auto;background:var(--supplier-surface);color:var(--supplier-text);border:1px solid var(--supplier-border);border-radius:1rem;padding:.75rem;box-shadow:var(--supplier-shadow);}
.supplier-app .supplier-mobile-nav {display:block;padding:.375rem .5rem max(.375rem,env(safe-area-inset-bottom,0px));background:var(--supplier-ui-footer-bg);color:var(--supplier-ui-footer-text);border-top:var(--supplier-ui-footer-border-width) solid var(--supplier-ui-footer-border);box-shadow:0 -10px 28px rgba(10,20,16,.12);backdrop-filter:blur(8px);}
.supplier-app .supplier-mobile-nav-shell {max-width:none;border:0;border-radius:0;box-shadow:none;background:transparent;overflow-x:auto;}
.supplier-app .supplier-mobile-nav-track {display:flex;width:max-content;min-width:100%;justify-content:center;gap:.375rem;padding:0;}
.supplier-app .supplier-mobile-nav-button {display:inline-flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:2.75rem;min-width:0;width:auto;height:auto;font-size:.6875rem;line-height:1.25;white-space:nowrap;}
.supplier-app .supplier-mobile-nav form {margin:0;padding:0;border:0;background:transparent;box-shadow:none;}
.supplier-app :is(button,[data-supplier-component="buttons"],[data-supplier-component="navigation"]) {
 transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.supplier-app :is([data-supplier-component="buttons"],[data-supplier-component="navigation"]) {min-height:2.75rem;}
.supplier-app :is(button,[data-supplier-component="buttons"]):hover:not(:disabled) {filter:none;}
.supplier-app [data-supplier-component="buttons"]:disabled {opacity:.65;cursor:default;}
.supplier-app :is(input,select,textarea):disabled {cursor:not-allowed;}
.supplier-app .supplier-text-muted:not([data-supplier-component]) {color:var(--supplier-muted);}
.supplier-app :is([data-supplier-component="header"],[data-supplier-component="card-headers"],[data-supplier-component="table-headers"],[data-supplier-component="buttons"],[data-supplier-component="navigation"]) .supplier-text-muted {color:inherit;}
.supplier-app .supplier-button-secondary {
 background:color-mix(in srgb,var(--supplier-surface) 96%,white 4%);color:var(--supplier-text);border-color:var(--supplier-border);
}
.supplier-app .supplier-button-secondary:hover {background:color-mix(in srgb,var(--supplier-secondary) 24%,white 76%);border-color:color-mix(in srgb,var(--supplier-primary) 22%,var(--supplier-border) 78%);}
.supplier-app .supplier-button-danger {background:color-mix(in srgb,var(--supplier-danger-text) 88%,black 12%);color:#fff7f5;border-color:color-mix(in srgb,var(--supplier-danger-text) 88%,black 12%);}
.supplier-app .supplier-button-danger:hover {background:color-mix(in srgb,var(--supplier-danger-text) 76%,black 24%);border-color:color-mix(in srgb,var(--supplier-danger-text) 76%,black 24%);}
.supplier-app table {width:100%;border-collapse:collapse;}
.supplier-app :is(td,th) {border-radius:0;}
.supplier-app :is(td,tbody th) {box-shadow:none;}
.supplier-app [data-supplier-layout~="attached"][data-supplier-component="card-headers"] {border-radius:0;}
.supplier-app [data-supplier-component="panels"].supplier-table-panel {padding:0;overflow:auto;}
.supplier-app .supplier-nav-button--sidebar {display:flex;flex-direction:row;justify-content:flex-start;text-align:left;gap:.75rem;}
.supplier-app :is(.supplier-nav-button--sidebar,.supplier-mobile-nav-button,.supplier-nav-button--desktop-dropdown)[aria-current="page"] {
 color:var(--supplier-nav-button-active-text);font-weight:700;
}
.supplier-app :is(.supplier-nav-button--sidebar,.supplier-mobile-nav-button,.supplier-nav-button--desktop-dropdown) * {color:inherit;}
.supplier-app .supplier-nav-label-compact {display:none;}
@media (max-width:1023px) {
 .supplier-app .supplier-layout-shell[data-supplier-component="app-frame"] {background:transparent;border:0 solid #e5e7eb;border-radius:0;padding:0;box-shadow:none;color:var(--supplier-text);}
}
@media (min-width:768px) {
 .supplier-app .supplier-mobile-nav {padding:.5rem .75rem max(.5rem,env(safe-area-inset-bottom,0px));}
 .supplier-app .supplier-mobile-nav-button {font-size:.75rem;}
}
@media (min-width:1024px) {
 .supplier-app .supplier-page-shell > * + * {margin-top:2rem;}
 .supplier-app :is([data-supplier-component="buttons"],[data-supplier-component="navigation"]) {min-height:3rem;}
}
@media (max-width:1279px) {
 html[data-shopapp-menu-type] body.supplier-app .supplier-desktop-sidebar,
 html[data-shopapp-menu-type] body.supplier-app .supplier-desktop-header {display:none;}
 html[data-shopapp-menu-type] body.supplier-app .supplier-layout-shell {grid-template-columns:minmax(0,1fr);}
 .supplier-app .supplier-main-shell {order:initial;}
 .supplier-app .supplier-mobile-nav-button {width:auto !important;height:auto !important;min-width:2.75rem !important;}
}
@media (min-width:1280px) {
 .supplier-app-outer {padding:1rem;}
 .supplier-app .supplier-layout-shell {grid-template-columns:18rem minmax(0,1fr);height:calc(100dvh - 2rem);min-height:calc(100dvh - 2rem);}
 .supplier-app .supplier-desktop-sidebar {display:flex;}
 .supplier-app .supplier-main-shell {height:100%;min-height:0;}
 .supplier-app .supplier-main-stage {padding:0 0 2rem;}
 .supplier-app .supplier-mobile-nav,.supplier-app .supplier-mobile-header-menu {display:none;}
 .supplier-app.shopapp-menu-right .supplier-layout-shell {grid-template-columns:minmax(0,1fr) 18rem;}
 .supplier-app.shopapp-menu-right .supplier-desktop-sidebar {order:2;border-right:0;border-left:1px solid var(--supplier-border);}
 .supplier-app.shopapp-menu-right .supplier-main-shell {order:1;}
 .supplier-app.shopapp-menu-collapsed .supplier-layout-shell {grid-template-columns:6rem minmax(0,1fr);}
 .supplier-app.shopapp-menu-right.shopapp-menu-collapsed .supplier-layout-shell {grid-template-columns:minmax(0,1fr) 6rem;}
 .supplier-app.shopapp-menu-collapsed .supplier-desktop-sidebar {padding-inline:1rem;}
 .supplier-app.shopapp-menu-collapsed .supplier-nav-button--sidebar {flex-direction:column;justify-content:center;min-height:3.75rem;padding-inline:.75rem;gap:0;}
 .supplier-app.shopapp-menu-collapsed :is(.supplier-nav-label-full,.supplier-nav-label-compact,.supplier-logout-label-full,.supplier-logout-label-compact) {display:none;}
 html[data-shopapp-menu-type="dropdown"] .supplier-app .supplier-layout-shell {grid-template-columns:minmax(0,1fr);height:auto;}
 html[data-shopapp-menu-type="dropdown"] .supplier-app .supplier-desktop-sidebar {display:none;}
 html[data-shopapp-menu-type="dropdown"] .supplier-app .supplier-desktop-header {display:block;}
}

/* Square, contiguous table cells are the same structural exception as ShopAPP. */
.supplier-app :is(td,th)[data-supplier-component], .supplier-app table :is(td,th) {border-radius:0;}
.supplier-app :is(td,tbody th)[data-supplier-component], .supplier-app table :is(td,tbody th) {box-shadow:none;}
.supplier-app tbody th {background:var(--supplier-ui-table-cells-bg);color:var(--supplier-ui-table-cells-text);border-color:var(--supplier-ui-table-cells-border);border-width:var(--supplier-ui-table-cells-border-width);padding:var(--supplier-ui-table-cells-padding);}
.supplier-app [data-supplier-component="buttons"].supplier-button-secondary {background:color-mix(in srgb,var(--supplier-surface) 96%,white 4%);color:var(--supplier-text);border-color:var(--supplier-border);}
.supplier-app [data-supplier-component="buttons"].supplier-button-secondary:hover {background:color-mix(in srgb,var(--supplier-secondary) 24%,white 76%);border-color:color-mix(in srgb,var(--supplier-primary) 22%,var(--supplier-border) 78%);}
.supplier-app [data-supplier-component="buttons"].supplier-button-danger {background:color-mix(in srgb,var(--supplier-danger-text) 88%,black 12%);color:#fff7f5;border-color:color-mix(in srgb,var(--supplier-danger-text) 88%,black 12%);}
.supplier-app [data-supplier-component="buttons"].supplier-button-danger:hover {background:color-mix(in srgb,var(--supplier-danger-text) 76%,black 24%);border-color:color-mix(in srgb,var(--supplier-danger-text) 76%,black 24%);}

/* Icon-only actions keep a usable hit area without squeezing their SVG. */
.supplier-app [data-supplier-component="buttons"].supplier-icon-action {width:3rem;height:3rem;min-height:3rem;padding:0;flex:none;display:inline-flex;align-items:center;justify-content:center;}
.supplier-app .supplier-icon-action svg {flex:none;width:1rem;height:1rem;}
.supplier-app .supplier-mobile-header-menu > summary {background:var(--supplier-surface);color:var(--supplier-text);}
.supplier-app .supplier-table-panel > [data-supplier-component="table-headers"],
.supplier-app .supplier-table-rows > [data-supplier-component="table-cells"] {border-radius:0;}
.supplier-app .supplier-table-rows > [data-supplier-component="table-cells"] {box-shadow:none;}

.supplier-app table :is(td,th):not([data-supplier-component]) {border-radius:0;}
.supplier-app table :is(td,tbody th):not([data-supplier-component]) {box-shadow:none;}
@media(min-width:1280px) {
}

/* Shared switch mechanics: fixed track and thumb geometry, as in ShopAPP. */
    .supplier-app .shopapp-switch,
    .supplier-app .shopapp-switch__control {
      --shopapp-switch-off-bg: color-mix(in srgb, var(--supplier-surface, #ffffff) 84%, var(--supplier-border, #d9ded6) 16%);
      --shopapp-switch-off-border: var(--supplier-border, #d9ded6);
      --shopapp-switch-on-bg: var(--supplier-primary, var(--supplier-primary-strong, #275d46));
      --shopapp-switch-on-border: var(--supplier-primary, var(--supplier-primary-strong, #275d46));
      --shopapp-switch-thumb: #ffffff;
      --shopapp-switch-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    }

    .supplier-app .shopapp-switch__control {
      position: relative;
      display: inline-flex;
      height: 1.95rem;
      width: 3.35rem;
      flex: 0 0 auto;
      vertical-align: middle;
    }

    .supplier-app .shopapp-switch__input {
      position: absolute;
      inset: 0;
      z-index: 2;
      margin: 0;
      cursor: pointer;
      opacity: 0;
    }

    .supplier-app .shopapp-switch__control .shopapp-switch__track {
      padding:0;box-shadow:none;color:inherit;
      height: 100%;
      width: 100%;
      border-radius: 9999px;
      border: 1px solid var(--shopapp-switch-off-border);
      background: var(--shopapp-switch-off-bg);
      box-sizing: border-box;
      transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .supplier-app .shopapp-switch__thumb {
      position: absolute;
      top: 50%;
      left: 0.2rem;
      height: 1.45rem;
      width: 1.45rem;
      border-radius: 9999px;
      background: var(--shopapp-switch-thumb);
      box-shadow: var(--shopapp-switch-shadow);
      pointer-events: none;
      transform: translate(0, -50%);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .supplier-app .shopapp-switch__input:checked + .shopapp-switch__track {
      border-color: var(--shopapp-switch-on-border);
      background: var(--shopapp-switch-on-bg);
    }

    .supplier-app .shopapp-switch__input:checked + .shopapp-switch__track + .shopapp-switch__thumb {
      transform: translate(1.38rem, -50%);
    }

    .supplier-app .shopapp-switch__input:focus-visible + .shopapp-switch__track {
      outline: 2px solid color-mix(in srgb, var(--supplier-accent, var(--supplier-primary, #275d46)) 72%, #ffffff 28%);
      outline-offset: 2px;
    }

    .supplier-app .shopapp-switch__input:disabled {
      cursor: not-allowed;
    }

    .supplier-app .shopapp-switch__input:disabled + .shopapp-switch__track,
    .supplier-app .shopapp-switch__input:disabled + .shopapp-switch__track + .shopapp-switch__thumb {
      opacity: 0.55;
    }


.supplier-app .shopapp-switch__input:checked ~ .shopapp-switch__track {background:var(--supplier-ui-switches-bg) !important;outline:0;outline-offset:0;}
.supplier-app .shopapp-switch__input:checked ~ .shopapp-switch__thumb {background:var(--supplier-ui-switches-text) !important;}
.supplier-app .shopapp-switch__input:focus-visible ~ .shopapp-switch__track {outline:2px solid color-mix(in srgb,var(--supplier-accent) 72%,white 28%);outline-offset:2px;}
.supplier-app .shopapp-switch__input:disabled ~ .shopapp-switch__track {opacity:.55;}
.supplier-app .supplier-auth-shell {position:relative;z-index:10;margin:auto;display:grid;place-items:center;max-width:80rem;min-height:100dvh;padding:calc(2rem + env(safe-area-inset-top,0px)) calc(1.5rem + env(safe-area-inset-right,0px)) calc(2rem + env(safe-area-inset-bottom,0px)) calc(1.5rem + env(safe-area-inset-left,0px));}
.supplier-app .supplier-auth-panel {width:100%;max-width:28rem;}
.supplier-app .supplier-auth-panel h1 {font-size:2.25rem;line-height:2.5rem;text-align:left;}
.supplier-app .supplier-auth-field {display:grid;gap:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:600;}

/* ShopAPP components.css semantic status palette; supplier selectors stay local. */
:root {
 --supplier-success-text:#166534;
 --supplier-warning-text:#92400e;
 --supplier-info-text:var(--supplier-primary);
 --supplier-success-bg:color-mix(in srgb,var(--supplier-success-text) 9%,var(--supplier-surface));
 --supplier-success-border:color-mix(in srgb,var(--supplier-success-text) 35%,var(--supplier-border));
 --supplier-warning-bg:color-mix(in srgb,var(--supplier-warning-text) 9%,var(--supplier-surface));
 --supplier-warning-border:color-mix(in srgb,var(--supplier-warning-text) 35%,var(--supplier-border));
 --supplier-info-bg:color-mix(in srgb,var(--supplier-info-text) 9%,var(--supplier-surface));
 --supplier-info-border:color-mix(in srgb,var(--supplier-info-text) 35%,var(--supplier-border));
 --supplier-danger-bg:color-mix(in srgb,var(--supplier-danger-text) 9%,var(--supplier-surface));
 --supplier-danger-border:color-mix(in srgb,var(--supplier-danger-text) 35%,var(--supplier-border));
}

/* Bare secondary/danger primitives follow ShopAPP; explicit layout utilities in
   a screen may add spacing. Vormgeving button geometry applies to primary. */
.supplier-app [data-supplier-component="buttons"].supplier-button-secondary,
.supplier-app [data-supplier-component="buttons"].supplier-button-danger {border-width:0;padding:0;}
.supplier-app [data-supplier-component="buttons"].supplier-button-secondary:disabled {box-shadow:none;}
.supplier-app [data-supplier-component="buttons"].supplier-button-danger {border-radius:0;box-shadow:none;}

.supplier-app button:disabled {cursor:default;}

.supplier-app .supplier-auth-brand {display:flex;justify-content:center;align-items:center;gap:.75rem;margin-bottom:1.5rem;}
.supplier-app .supplier-auth-brand:empty {display:none;}
.supplier-app .supplier-auth-logo {max-height:6rem;max-width:15rem;object-fit:contain;}
.supplier-app .supplier-auth-message {margin-top:1.25rem;border:1px solid var(--supplier-danger-border);background:var(--supplier-danger-bg);color:var(--supplier-danger-text);border-radius:1.35rem;padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;}

/* Runtime hidden state must win over component display rules. */
.supplier-app [hidden] {display:none !important;}

/* Menu reference: ShopAPP Theme.pm and base-base.css, 2026-09-20.
   Variants deliberately differ: Navigatie applies only to sidebar/bottom items. */
.supplier-app .supplier-nav-button--sidebar {
  border: 1px solid var(--supplier-nav-button-border);
  background: var(--supplier-nav-button-bg);
  color: var(--supplier-nav-button-text) !important;
}

.supplier-app .supplier-nav-button--sidebar:hover {
  background: var(--supplier-nav-button-bg-hover);
}

.supplier-app .supplier-nav-button--sidebar.is-active {
  border-color: transparent;
  background: var(--supplier-nav-button-active);
  color: var(--supplier-nav-button-active-text) !important;
  box-shadow: 0 10px 22px rgba(10,20,16,0.16);
}

.supplier-app .supplier-nav-button--sidebar.is-active:hover {
  background: var(--supplier-nav-button-active);
}

.supplier-app .supplier-nav-button--sidebar.is-disabled {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.45) !important;
  cursor: default;
  box-shadow: none;
}

.supplier-app .supplier-nav-button--sidebar.is-disabled:hover {
  background: rgba(255,255,255,0.08);
}

.supplier-app .supplier-mobile-nav-button {
  border: 1px solid color-mix(in srgb, var(--supplier-primary) 24%, var(--supplier-border) 76%);
  background: color-mix(in srgb, var(--supplier-primary) 10%, #fff 90%);
  color: color-mix(in srgb, var(--supplier-text) 84%, var(--supplier-primary) 16%) !important;
  box-shadow: 0 4px 12px rgba(10,20,16,0.08);
}

.supplier-app .supplier-mobile-nav-button:hover {
  border-color: color-mix(in srgb, var(--supplier-primary) 36%, var(--supplier-border) 64%);
  background: color-mix(in srgb, var(--supplier-primary) 16%, #fff 84%);
}

.supplier-app .supplier-mobile-nav-button.is-active {
  border-color: transparent;
  background: var(--supplier-nav-button-active);
  color: var(--supplier-nav-button-active-text) !important;
  box-shadow: 0 10px 22px rgba(10,20,16,0.12);
}

.supplier-app .supplier-mobile-nav-button.is-active:hover {
  background: var(--supplier-nav-button-active);
}

.supplier-app .supplier-mobile-nav-button.is-disabled {
  background: color-mix(in srgb, var(--supplier-surface) 92%, #fff 8%);
  border-color: color-mix(in srgb, var(--supplier-border) 82%, #fff 18%);
  color: var(--supplier-muted) !important;
  cursor: default;
  box-shadow: none;
}

.supplier-app .supplier-mobile-nav-button.is-disabled:hover {
  background: color-mix(in srgb, var(--supplier-surface) 92%, #fff 8%);
}


/* Match the generated reference component priority, including active/disabled text specificity. */
.supplier-app .supplier-nav-button--sidebar,
.supplier-app .supplier-mobile-nav-button {
 background:var(--supplier-ui-navigation-bg) !important;
 color:var(--supplier-ui-navigation-text) !important;
 border-color:var(--supplier-ui-navigation-border) !important;
 border-width:var(--supplier-ui-navigation-border-width) !important;
 border-style:solid !important;
 border-radius:var(--supplier-ui-navigation-radius) !important;
 padding:var(--supplier-ui-navigation-padding) !important;
 box-shadow:var(--supplier-ui-navigation-shadow) !important;
}
.supplier-app [data-supplier-component="menu-item"] {
 display:flex;width:100%;align-items:center;justify-content:flex-start;gap:.75rem;
 border:1px solid transparent;border-radius:1.1rem;background:transparent;
 color:var(--supplier-chrome-text);padding:.75rem .875rem;
 font-size:.875rem;line-height:1.25rem;font-weight:600;text-align:left;
 min-height:2.75rem;box-shadow:none;
 transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.supplier-app [data-supplier-component="menu-item"]:hover {
 background:color-mix(in srgb,white 10%,transparent 90%);
 border-color:color-mix(in srgb,white 18%,transparent 82%);transform:translateY(-1px);
}
.supplier-app [data-supplier-component="menu-item"].is-active {
 border-color:transparent;background:var(--supplier-nav-button-active);
 color:var(--supplier-nav-button-active-text) !important;
 box-shadow:0 10px 22px rgba(10,20,16,.16);font-weight:700;
}
.supplier-app [data-supplier-component="menu-item"].is-active:hover {background:var(--supplier-nav-button-active);}
.supplier-app [data-supplier-component="menu-panel"] {
 width:18rem;max-width:calc(100vw - 1.5rem);border:1px solid color-mix(in srgb,var(--supplier-button-text) 10%,transparent 90%);
 background:color-mix(in srgb,var(--supplier-chrome) 94%,black 6%);color:var(--supplier-chrome-text);
 border-radius:1.4rem;padding:.625rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),0 22px 54px rgba(8,18,13,.34);
}
.supplier-app .supplier-mobile-menu-panel[data-supplier-component="menu-panel"] {
 position:absolute;left:auto;right:0;top:100%;margin-top:.625rem;
 max-height:calc(100dvh - 10rem);overflow:auto;z-index:50;
}
.supplier-app [data-supplier-component="menu-trigger"],
.supplier-app [data-supplier-component="menu-toggle"],
.supplier-app [data-supplier-component="menu-overflow-trigger"] {
 display:inline-flex;align-items:center;justify-content:center;
 border:1px solid color-mix(in srgb,var(--supplier-button-text) 14%,transparent 86%);
 border-radius:9999px;background:color-mix(in srgb,var(--supplier-surface) 8%,transparent 92%);
 color:var(--supplier-button-text);padding:.625rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:600;
 box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),0 1px 2px 0 rgb(0 0 0 / .05);min-height:0;cursor:pointer;
}
.supplier-app [data-supplier-component="menu-trigger"]:hover,
.supplier-app [data-supplier-component="menu-toggle"]:hover {
 border-color:color-mix(in srgb,var(--supplier-button-text) 22%,transparent 78%);
 background:color-mix(in srgb,var(--supplier-surface) 12%,transparent 88%);
}
.supplier-app [data-supplier-component="menu-trigger"].is-active,
.supplier-app [data-supplier-component="menu-overflow-trigger"].is-active {
 background:var(--supplier-nav-button-active);color:var(--supplier-nav-button-active-text);border-color:transparent;
}
.supplier-app [data-supplier-component="menu-toggle"] {width:2.5rem;height:2.5rem;padding:0;}
.supplier-app [data-supplier-component="menu-overflow-trigger"] {
 width:2.25rem;height:2.25rem;padding:0;box-shadow:none;
 border-color:color-mix(in srgb,var(--supplier-button-text) 18%,transparent 82%);
 background:color-mix(in srgb,var(--supplier-surface) 10%,transparent 90%);
}
.supplier-app [data-supplier-component="menu-overflow-trigger"].is-active {background:var(--supplier-nav-button-active);border-color:transparent;}
.supplier-app [data-supplier-component="menu-icon"] {border:0;padding:0;background:transparent;box-shadow:none;color:inherit;}
.supplier-app [data-supplier-component="menu-brand"] {background:transparent;border:0;padding:0;box-shadow:none;color:inherit;}
.supplier-app [data-supplier-component^="menu-"] :is(span,svg) {color:inherit;}
.supplier-app [data-supplier-component="menu-item"]:focus-visible,
.supplier-app .supplier-nav-button--sidebar:focus-visible,
.supplier-app .supplier-mobile-nav-button:focus-visible {
 outline:2px solid color-mix(in srgb,var(--supplier-accent) 72%,white 28%);outline-offset:2px;
}
.supplier-app .supplier-nav-icon {display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.supplier-app .supplier-nav-icon svg {display:block;width:1.15rem;height:1.15rem;}
.supplier-app .supplier-nav-button--sidebar .supplier-nav-icon {width:1.35rem;height:1.35rem;}
.supplier-app .supplier-mobile-nav-button .supplier-nav-icon {width:1.25rem;height:1.25rem;}
.supplier-app .supplier-mobile-nav-button {font-size:.625rem;line-height:1.25;min-width:0 !important;}
@media(min-width:640px) {.supplier-app .supplier-mobile-nav-button {font-size:.6875rem;}}
@media(min-width:768px) and (max-width:1279px) {
 .supplier-app .supplier-mobile-nav-track {width:100%;min-width:0;}
 .supplier-app .supplier-mobile-nav-button {flex:1 1 0;gap:.35rem;font-size:.75rem;line-height:1.1;white-space:normal;}
 .supplier-app .supplier-mobile-nav-button .supplier-nav-icon {width:1.45rem;height:1.45rem;}
 .supplier-app .supplier-mobile-nav-button .supplier-nav-icon svg {width:1.35rem;height:1.35rem;}
 .supplier-app .supplier-mobile-nav form {display:flex;flex:1 1 0;}
}
@media(min-width:1024px) {.supplier-app [data-supplier-component="menu-item"] {min-height:3rem;}}

/* Reference hover utilities also win over the active appearance of round triggers. */
.supplier-app [data-supplier-component="menu-trigger"].is-active:hover {
 border-color:color-mix(in srgb,var(--supplier-button-text) 22%,transparent 78%);
 background:color-mix(in srgb,var(--supplier-surface) 12%,transparent 88%);
}
.supplier-app .supplier-nav-accordion {gap:.5rem;}
.supplier-app .supplier-nav-accordion-panel {gap:.5rem;padding-left:1rem;}

.supplier-app summary[data-supplier-component="menu-trigger"] {justify-content:flex-start;gap:.5rem;}

/* Icon-only controls use the reference's smaller, undecorated treatment. */
.supplier-app [data-supplier-component="menu-toggle"],
.supplier-app [data-supplier-component="menu-overflow-trigger"] {
 font-size:1rem;line-height:1.5rem;font-weight:400;box-shadow:none;
 border-color:color-mix(in srgb,var(--supplier-button-text) 18%,transparent 82%);
 background:color-mix(in srgb,var(--supplier-surface) 10%,transparent 90%);
}
.supplier-app [data-supplier-component="menu-toggle"]:hover {
 border-color:color-mix(in srgb,var(--supplier-button-text) 18%,transparent 82%);
 background:color-mix(in srgb,var(--supplier-surface) 14%,transparent 86%);
}
.supplier-app [data-supplier-component="menu-toggle"]:focus-visible {outline:revert;outline-offset:revert;}
.supplier-app [data-supplier-component="menu-overflow-trigger"].is-active {border-color:transparent;background:var(--supplier-nav-button-active);}
@media(min-width:768px) and (max-width:1279px) {
 .supplier-app [data-supplier-component="menu-overflow-trigger"] {width:2.5rem;height:2.5rem;}
}

.supplier-app [data-supplier-component="menu-toggle"] {font-size:inherit;line-height:inherit;}

/* A single responsive header owns identity, page context and help. */
.supplier-app #supplier-app-header {display:block;position:sticky;top:0;z-index:40;flex-shrink:0;min-width:0;}
.supplier-app .supplier-header-row {display:flex;align-items:center;gap:.75rem;min-width:0;flex-wrap:wrap;}
.supplier-app .supplier-header-title {margin:0;min-width:0;flex:1;font-size:1rem;line-height:1.25;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.supplier-app .supplier-header-actions {display:flex;align-items:center;gap:.5rem;flex-shrink:0;}
.supplier-app #supplier-page-help {display:inline-flex;}
.supplier-app .supplier-header-help {display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.25rem;height:2.25rem;padding:0;border-radius:9999px;border:1px solid color-mix(in srgb,var(--supplier-button-text) 18%,transparent);background:color-mix(in srgb,var(--supplier-surface) 10%,transparent);color:var(--supplier-button-text);box-shadow:none;}
.supplier-app .supplier-header-help svg {width:1rem;height:1rem;}
.supplier-app #supplier-app-header .supplier-header-desktop-actions {display:none;}
.supplier-app #supplier-app-header [data-supplier-component="menu-brand"] {display:none;}
@media(min-width:768px) {.supplier-app .supplier-header-help {width:2.5rem;height:2.5rem;}.supplier-app .supplier-header-help svg {width:1.05rem;height:1.05rem;}}
@media(max-width:1279px) {.supplier-app #supplier-app-header {padding-top:max(var(--supplier-ui-header-padding),env(safe-area-inset-top,0px));}}
@media(min-width:1280px) {
 .supplier-app #supplier-app-header {position:relative;margin:.75rem .75rem 0;}
 .supplier-app #supplier-app-header [data-supplier-component="menu-brand"] {display:flex;}
 .supplier-app .supplier-header-title {flex:0 1 auto;font-size:.625rem;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:9999px;padding:.25rem .75rem;}
 .supplier-app .supplier-header-actions {margin-left:auto;}
 html[data-shopapp-menu-type="dropdown"] .supplier-app #supplier-app-header .supplier-header-desktop-actions {display:flex;}
 .supplier-app .supplier-header-help {width:2.75rem;height:2.75rem;border-color:color-mix(in srgb,var(--supplier-button-text) 14%,transparent);background:color-mix(in srgb,var(--supplier-surface) 8%,transparent);box-shadow:0 1px 2px rgb(0 0 0 / .05);}
 .supplier-app .supplier-header-help svg {width:1.1rem;height:1.1rem;}
 .supplier-app .supplier-header-help:hover {border-color:color-mix(in srgb,var(--supplier-button-text) 22%,transparent);background:color-mix(in srgb,var(--supplier-surface) 12%,transparent);}
}

/* ERP layout. Visual properties come exclusively from the shared component roles. */
.supplier-erp-workspace { position: relative; min-width: 0; }
.supplier-erp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--supplier-ui-panels-padding); align-items: start; }
.supplier-erp-stack, .supplier-erp-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--supplier-ui-panels-padding); min-width: 0; }
.supplier-erp-card-heading h2, .supplier-erp-section-title h3, .supplier-erp-guide h3 { margin: 0; font-family: var(--supplier-font-heading); font-size: inherit; font-weight: 700; }
.supplier-erp-card-heading p { margin: .5em 0 0; }
.supplier-erp-field { display: grid; gap: .5em; min-width: 0; }
.supplier-erp-field label { font-weight: 600; }
.supplier-erp-field input, .supplier-erp-field select { width: 100%; min-width: 0; font: inherit; }
.supplier-erp-hint { margin: 0; overflow-wrap: anywhere; }
.supplier-erp-actions { display: flex; flex-wrap: wrap; gap: .625em; justify-content: flex-end; }
.supplier-erp-status, .supplier-erp-section-title { display: flex; gap: .75em; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.supplier-erp-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5em; }
.supplier-erp-label-note { display: block; margin-top: .25em; font-weight: 400; }
.supplier-erp-facts { display: grid; gap: .75em; margin: 0; }
.supplier-erp-facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .375em 1em; }
.supplier-erp-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.supplier-erp-guide summary { cursor: pointer; font-family: var(--supplier-font-heading); font-weight: 700; }
.supplier-erp-guide[open] summary { margin-bottom: var(--supplier-ui-panels-padding); }
.supplier-erp-endpoint { overflow-wrap: anywhere; }
.supplier-erp-notice { margin-bottom: var(--supplier-ui-notices-padding); }
.supplier-erp-notice a { margin-left: .5em; }
.supplier-erp-progress { position: absolute; right: 0; top: -1.5em; pointer-events: none; }
.supplier-erp-copy-status { margin: .75em 0 0; min-height: 1.25em; }
.supplier-erp-workspace button:disabled { opacity: .55; cursor: wait; }
@media (min-width: 1100px) { .supplier-erp-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
@media (max-width: 480px) {
  .supplier-erp-copy-row { grid-template-columns: minmax(0, 1fr); }
  .supplier-erp-copy-row button { justify-self: end; }
  .supplier-erp-actions > button { width: 100%; }
}

/* ERP settings keep each label, value and action on one table row. */
.supplier-erp-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
.supplier-erp-table { width: 100%; min-width: 680px; table-layout: fixed; border-collapse: collapse; border-spacing: 0; }
.supplier-erp-table caption { text-align: left; font-family: var(--supplier-font-heading); font-weight: 700; padding-bottom: .75em; }
.supplier-erp-table th, .supplier-erp-table td { text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.supplier-erp-table th:first-child { width: 22%; }
.supplier-erp-table th:nth-child(2) { width: 48%; }
.supplier-erp-table th:last-child { width: 30%; }
.supplier-erp-table input, .supplier-erp-table select { width: 100%; min-width: 0; font: inherit; }
.supplier-erp-table label { font-weight: 600; }
.supplier-erp-table .supplier-erp-actions { justify-content: flex-start; }
/* Joined frames: the outer surface owns corners; padding belongs to content.
   Layout attributes are rendered server-side, so full pages and HTMX fragments
   have identical geometry without a client-side restyling pass. */
.supplier-app [data-supplier-layout~="frame"] {
  min-width: 0;
  max-width: 100%;
  padding: 0 !important;
  gap: 0;
  overflow: hidden !important;
  background: var(--supplier-ui-panels-bg);
  color: var(--supplier-ui-panels-text);
  border: var(--supplier-ui-panels-border-width) solid var(--supplier-ui-panels-border);
  border-radius: var(--supplier-ui-panels-radius);
  box-shadow: var(--supplier-ui-panels-shadow);
}
.supplier-app [data-supplier-layout~="joint"]:not([data-supplier-layout~="frame"]) {
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.supplier-app [data-supplier-layout~="viewport"] {
  min-width: 0;
  max-width: 100%;
  padding: 0 !important;
  overflow-x: auto !important;
}
.supplier-app :is([data-supplier-layout~="frame"], [data-supplier-layout~="joint"]) > * {
  margin-top: 0;
  margin-bottom: 0;
}
.supplier-app [data-supplier-layout~="body"]:not([data-supplier-component]) {
  padding: var(--supplier-ui-panels-padding);
}
.supplier-app [data-supplier-component="forms"] > [data-supplier-layout~="body"]:not([data-supplier-component]) {
  padding: var(--supplier-ui-forms-padding);
}
.supplier-app [data-supplier-layout~="attached"],
.supplier-app [data-supplier-layout~="table"] :is(th, td) {
  border-radius: 0;
}
.supplier-app [data-supplier-layout~="attached"][data-supplier-component="table-cells"] {
  box-shadow: none;
}
.supplier-app table[data-supplier-layout~="table"] {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}
.supplier-app table[data-supplier-layout~="table"] > caption {
  text-align: left;
  background: var(--supplier-ui-card-headers-bg);
  color: var(--supplier-ui-card-headers-text);
  padding: var(--supplier-ui-card-headers-padding);
  font-family: var(--supplier-font-heading);
}
.supplier-app .supplier-erp-guide[open] > summary { margin-bottom: 0; }
/* Empty states remain padded, while adjacent table branches have no inset. */
.supplier-app [data-supplier-layout~="frame"] > [data-supplier-layout~="body"]:empty { display: none; }

/* Legacy document adapters use separate framed tables inside a plain collection.
   No legacy print template or shared ShopAPP stylesheet is changed. */
.supplier-app [data-supplier-layout~="collection"],
.supplier-app .supplier-purchase-documents :is(form.sky-form, .panel, .tag-box):has(> [data-supplier-layout~="frame"]) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.supplier-app [data-supplier-layout~="collection"] { gap: var(--supplier-ui-panels-padding); }
.supplier-app .supplier-purchase-documents form.sky-form > [data-supplier-layout~="viewport"] > table {
  min-width: 42rem;
}

/* One typography for data tables and equivalent grid rows on every page.
   rem follows the browser/root text size; font family remains tenant-selected.
   Column widths, sticky positioning and numeric alignment remain functional. */
.supplier-app :is(table[data-supplier-layout~="table"], [data-supplier-component="table-headers"], [data-supplier-component="table-cells"]) {
  font-family: var(--supplier-font-body);
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}
.supplier-app table[data-supplier-layout~="table"] :is(th, td),
.supplier-app [data-supplier-layout~="attached"]:is([data-supplier-component="table-headers"], [data-supplier-component="table-cells"]) {
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
}
.supplier-app table[data-supplier-layout~="table"] thead,
.supplier-app table[data-supplier-layout~="table"] thead :is(tr, th, td),
.supplier-app [data-supplier-component="table-headers"] {
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}
/* Standalone card headings follow their own configured corners. Only explicitly
   attached headings are square at the joins of an enclosing rounded frame. */
.supplier-app [data-supplier-component="card-headers"]:not([data-supplier-layout~="attached"]) {
  border-radius: var(--supplier-ui-card-headers-radius);
}

.supplier-app .supplier-sales-invoice-number {
  margin: 0;
  font-family: var(--supplier-font-body);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  font-weight: 700;
}
.supplier-app .supplier-sales-invoice-underbouwing-link { font-size: inherit; line-height: inherit; }

/* Settings route tabs and local section tabs share the configured navigation
   surface. Active tabs use button colors; inactive tabs use navigation colors. */
.supplier-app .supplier-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .25rem;
  width: 100%;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: var(--supplier-ui-navigation-padding);
}
.supplier-app .supplier-settings-tabs > li { display: flex; margin: 0; }
.supplier-app .supplier-settings-tabs .supplier-settings-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  margin: 0;
  align-self: stretch;
  vertical-align: middle;
  padding: var(--supplier-ui-buttons-padding);
  border: var(--supplier-ui-buttons-border-width) solid transparent;
  border-radius: var(--supplier-ui-buttons-radius);
  background: var(--supplier-ui-navigation-bg);
  color: var(--supplier-ui-navigation-text);
  box-shadow: none;
  font-family: var(--supplier-font-body);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}
.supplier-app .supplier-settings-tabs .supplier-settings-tab:is([aria-current="page"],[aria-selected="true"],:hover) {
  background: var(--supplier-ui-buttons-bg);
  color: var(--supplier-ui-buttons-text);
  border-color: var(--supplier-ui-buttons-border);
  box-shadow: var(--supplier-ui-buttons-shadow);
}
.supplier-app .supplier-settings-tabs .supplier-settings-tab[aria-current="page"],
.supplier-app .supplier-settings-tabs .supplier-settings-tab[aria-selected="true"] {
  text-decoration: underline;
  text-underline-offset: .35em;
}
.supplier-app .supplier-settings-tabs .supplier-settings-tab:focus-visible {
  outline: 2px solid var(--supplier-focus-ring);
  outline-offset: 2px;
}
.supplier-app .supplier-settings-workspace { width: 100%; min-width: 0; }

.supplier-app .supplier-settings-workspace table[data-supplier-layout~="table"] {
  width: 100%;
  min-width: 42.5rem;
  table-layout: fixed;
}
.supplier-app .supplier-settings-workspace table[data-supplier-layout~="table"] tr > :first-child { width: 30%; }
.supplier-app .supplier-settings-workspace .basis-settings-fields { display: table; }
.supplier-app .supplier-settings-workspace .basis-settings-fields > tbody { display: table-row-group; }
.supplier-app .supplier-settings-workspace .basis-settings-fields > tbody > tr { display: table-row; }
.supplier-app .supplier-settings-workspace .basis-settings-fields > tbody > tr > :is(th,td) {
  display: table-cell;
  vertical-align: middle;
}

.supplier-app input:is([type="checkbox"],[type="radio"]):not(.shopapp-switch__input) { accent-color: var(--supplier-ui-switches-bg); }

/* Shared editor CSS emits important palette variants. The Supplier component
   role remains authoritative, also after the editor regenerates that CSS. */
.supplier-app [data-supplier-component="buttons"]:is(.shopapp-button-secondary,.shopapp-button-danger),
.supplier-app [data-supplier-component="buttons"]:is(.shopapp-button-secondary,.shopapp-button-danger):hover {
  background: var(--supplier-ui-buttons-bg) !important;
  color: var(--supplier-ui-buttons-text) !important;
  border-color: var(--supplier-ui-buttons-border) !important;
}

.supplier-app .supplier-settings-workspace .supplier-erp-table th:last-child { width: 22%; }

/* One settings workspace: page spacing once, surfaces once, rows 30/70.
   Editor/media layouts retain their functional controls and preview tokens. */
.supplier-app .supplier-settings-workspace {
  box-sizing: border-box;
  padding: var(--supplier-ui-page-container-padding);
  color: var(--supplier-text);
}
.supplier-app :is(.supplier-settings-stack,.supplier-settings-body) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--supplier-ui-panels-padding);
}
.supplier-app :is(.supplier-settings-stack,.supplier-settings-body) > * {
  margin-block: 0;
  min-width: 0;
}
.supplier-app .supplier-settings-heading { padding: 0; }
.supplier-app .supplier-settings-heading h2 {
  margin: 0;
  font-family: var(--supplier-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}
.supplier-app .supplier-settings-heading p {
  margin: .25rem 0 0;
  color: var(--supplier-text-muted);
  font-size: .875rem;
  line-height: 1.5;
}
.supplier-app .supplier-settings-section-heading {
  padding: var(--supplier-ui-card-headers-padding);
}
.supplier-app .supplier-settings-section-heading :is(h3,p) { margin: 0; font-size: .875rem; line-height: 1.5; }
.supplier-app .supplier-settings-section-heading h3 { font-family: var(--supplier-font-heading); font-weight: 700; }
.supplier-app .supplier-settings-section-heading p { color: inherit; margin-top: .25rem; }
.supplier-app .supplier-settings-fields { display: block; padding: 0; margin: 0; }
.supplier-app .supplier-settings-row {
  display: grid;
  grid-template-columns: minmax(0,30fr) minmax(0,70fr);
  align-items: center;
  column-gap: 0;
  row-gap: 0;
  padding: 0;
  margin: 0;
  color: var(--supplier-ui-table-cells-text);
  background: var(--supplier-ui-table-cells-bg);
  border-bottom: var(--supplier-ui-table-cells-border-width) solid var(--supplier-ui-table-cells-border);
  font-family: var(--supplier-font-body);
  font-size: .875rem;
  line-height: 1.5;
}
.supplier-app .supplier-settings-row > * { min-width: 0; margin: 0; padding: var(--supplier-ui-table-cells-padding); }
.supplier-app .supplier-settings-row > :first-child { font-weight: 600; }
.supplier-app .supplier-settings-row > :is(input,select,textarea) {
  width: calc(100% - 2 * var(--supplier-ui-table-cells-padding));
  margin: var(--supplier-ui-table-cells-padding);
  padding: var(--supplier-ui-inputs-padding);
}
.supplier-app .supplier-settings-checkbox-row > input {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  justify-self: start;
  padding: 0;
}
.supplier-app .supplier-settings-checkbox-row > span { grid-column: 1; grid-row: 1; }
.supplier-app .supplier-settings-options { display: flex; flex-wrap: wrap; gap: 1rem; border: 0; }
.supplier-app .supplier-settings-options label { display: flex; align-items: center; gap: .5rem; }
.supplier-app .supplier-settings-help { display: block; margin-top: .375rem; color: var(--supplier-text-muted); font-size: .8125rem; font-weight: 400; line-height: 1.5; }
.supplier-app .supplier-settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  padding: var(--supplier-ui-footer-padding);
}
.supplier-app .supplier-settings-workspace :is(button,[data-supplier-component="buttons"]) { min-height: 2.75rem; vertical-align: middle; }
.supplier-app .supplier-settings-summary { display: grid; grid-template-columns: minmax(0,30fr) minmax(0,70fr); gap: .5rem; margin-top: 1rem; }
.supplier-app .supplier-settings-summary dd { margin: 0; }
.supplier-app .supplier-quality-row {
  display: grid;
  grid-template-columns: 5rem minmax(0,1fr) auto;
  gap: var(--supplier-ui-table-cells-padding);
  align-items: center;
  padding: var(--supplier-ui-table-cells-padding);
  background: var(--supplier-ui-table-cells-bg);
  color: var(--supplier-ui-table-cells-text);
  border-bottom: var(--supplier-ui-table-cells-border-width) solid var(--supplier-ui-table-cells-border);
}
.supplier-app .supplier-settings-body.basis-instellingen { padding: 0; background: transparent; border: 0; box-shadow: none; }
.supplier-app .supplier-settings-workspace .basis-settings-section { margin: 0; }
.supplier-app .supplier-settings-workspace .basis-settings-section > h3 { margin: 0 0 .5rem; font-family: var(--supplier-font-heading); font-weight: 700; font-size: .875rem; }
.supplier-app .supplier-settings-workspace .basis-settings-section > p:empty { display: none; }
.supplier-app .supplier-settings-workspace .basis-settings-section > p:not(:empty) { margin: 0 0 1rem; font-size: .875rem; color: var(--supplier-text-muted); }
.supplier-app .supplier-profile-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--supplier-ui-panels-padding); }
.supplier-app .supplier-profile-layout > * { min-width: 0; }
.supplier-app .supplier-settings-profile .supplier-settings-row { overflow: hidden; }
.supplier-app .supplier-settings-image-preview { background: var(--supplier-ui-panels-bg); color: var(--supplier-ui-panels-text); }
.supplier-app .supplier-settings-theme .shopapp-page-section { padding: 0; margin: 0; }
.supplier-app .supplier-settings-theme form[data-shopapp-theme-builder] {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: var(--supplier-ui-panels-padding);
}
.supplier-app .supplier-settings-theme [data-shopapp-theme-actions] { justify-content: flex-end; }
.supplier-app .supplier-settings-theme [data-shopapp-theme-builder] > div > section :is(h3,h4) { font-size: .875rem; line-height: 1.5; font-weight: 700; }
.supplier-app .supplier-settings-theme-samples summary { cursor: pointer; font-weight: 600; }
.supplier-app .supplier-settings-theme-samples .shopapp-theme-component-samples { margin-top: var(--supplier-ui-panels-padding); }
@media (min-width:1280px) {
  .supplier-app .supplier-profile-layout { grid-template-columns: minmax(0,7fr) minmax(0,3fr); }
}
@media (max-width:639px) {
  .supplier-app .supplier-settings-row { grid-template-columns: minmax(0,1fr); }
  .supplier-app .supplier-settings-row > * { grid-column: 1; }
  .supplier-app .supplier-settings-row > :first-child { padding-bottom: .25rem; }
  .supplier-app .supplier-settings-checkbox-row { grid-template-columns: minmax(0,1fr) auto; }
  .supplier-app .supplier-settings-checkbox-row > input { grid-column: 2; }
}
.supplier-app .supplier-settings-workspace [hidden] { display: none !important; }
.supplier-app .supplier-settings-workspace :is(.supplier-theme-preview,.shopapp-theme-component-samples) table[data-supplier-layout~="table"] { min-width: 0; table-layout: auto; }
.supplier-app .supplier-settings-theme .shopapp-theme-builder-layout { grid-template-columns: minmax(0,1fr); }
.supplier-app .supplier-settings-theme .shopapp-theme-builder-layout > *,
.supplier-app .supplier-settings-theme .shopapp-theme-editor,
.supplier-app .supplier-settings-theme .shopapp-theme-field-grid > * { min-width: 0; }
.supplier-app .supplier-settings-theme .shopapp-theme-editor { display: flex; flex-direction: column; gap: var(--supplier-ui-panels-padding); }
.supplier-app .supplier-settings-theme .shopapp-theme-editor > * { margin: 0; }
@media(min-width:1280px) {
 .supplier-app .supplier-settings-theme .shopapp-theme-builder-layout { grid-template-columns: minmax(0,7fr) minmax(0,3fr); }
}
/* Short and long tabs retain the same available width when scrolling changes. */
html:has(.supplier-settings-workspace),
.supplier-app .supplier-main-stage:has(.supplier-settings-workspace) { scrollbar-gutter: stable; }
.supplier-app .supplier-settings-workspace :is([data-supplier-component="inputs"],[data-supplier-component="buttons"]):not(:where(.supplier-theme-preview *, .shopapp-theme-component-samples *)) {
  font-family: var(--supplier-font-body);
  font-size: .875rem;
  line-height: 1.5;
}
.supplier-app .supplier-settings-workspace :is(input,select)[data-supplier-component="inputs"]:not(:where(.supplier-theme-preview *, .shopapp-theme-component-samples *)) { min-height: 2.75rem; }
.supplier-app .supplier-settings-workspace th[scope="row"] { font-weight: 600; text-align: left; }
/* The shared editor emits important box styles; its outer wrappers are layout,
   while its sections remain the single themed surfaces. */
.supplier-app .supplier-settings-theme > .shopapp-theme-page-scope > .shopapp-page-section,
.supplier-app .supplier-settings-theme form[data-shopapp-theme-builder],
.supplier-app .supplier-settings-theme .shopapp-theme-editor > section > div:first-child:not(.shopapp-theme-field-grid) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.supplier-app .supplier-settings-theme .shopapp-theme-editor [data-supplier-component="panels"] {
  background: var(--supplier-ui-panels-bg) !important;
  color: var(--supplier-ui-panels-text) !important;
  border: var(--supplier-ui-panels-border-width) solid var(--supplier-ui-panels-border) !important;
  border-radius: var(--supplier-ui-panels-radius) !important;
  padding: var(--supplier-ui-panels-padding) !important;
  box-shadow: var(--supplier-ui-panels-shadow) !important;
}
.supplier-app .supplier-settings-row > div > :is(input,select,textarea)[data-supplier-component="inputs"] { width: 100%; }

/* Uniform native-checkbox switches. The 54x31 track and 44px hit area are
   functional geometry; track padding is structural zero. Theme values own
   colours, border, outer radius and shadow. The thumb remains circular. */
.supplier-app .shopapp-switch__control {
  position: relative;
  display: inline-flex;
  width: 3.35rem;
  height: 2.75rem;
  min-width: 3.35rem;
  flex: 0 0 3.35rem;
  padding: 0;
  vertical-align: middle;
  align-items: center;
}
.supplier-app .shopapp-switch__control > input.shopapp-switch__input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  clip: auto !important;
  z-index: 2;
  cursor: pointer;
}
.supplier-app .shopapp-switch__control > .shopapp-switch__track[data-supplier-component="switches"] {
  position: absolute;
  inset: auto 0;
  height: 1.95rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0 !important;
  background: color-mix(in srgb, var(--supplier-ui-switches-bg) 18%, var(--supplier-surface)) !important;
  color: var(--supplier-ui-switches-text) !important;
  border: var(--supplier-ui-switches-border-width) solid var(--supplier-ui-switches-border) !important;
  border-radius: var(--supplier-ui-switches-radius) !important;
  box-shadow: var(--supplier-ui-switches-shadow) !important;
  pointer-events: none;
}
.supplier-app .shopapp-switch__control > .shopapp-switch__thumb {
  background: var(--supplier-ui-switches-text) !important;
  pointer-events: none;
}
.supplier-app .shopapp-switch__control > .shopapp-switch__input:checked ~ .shopapp-switch__track,
.supplier-app .shopapp-switch__control > .shopapp-switch__input:indeterminate ~ .shopapp-switch__track {
  background: var(--supplier-ui-switches-bg) !important;
}
.supplier-app .shopapp-switch__control > .shopapp-switch__input:indeterminate ~ .shopapp-switch__thumb {
  transform: translate(.69rem, -50%);
}
.supplier-app .shopapp-switch__control > .shopapp-switch__input:indeterminate ~ .shopapp-switch__thumb::after {
  content: "";
  position: absolute;
  inset: calc(50% - 1px) 25%;
  height: 2px;
  background: var(--supplier-ui-switches-bg);
}
.supplier-app .shopapp-switch__control > .shopapp-switch__input:focus-visible ~ .shopapp-switch__track {
  outline: 2px solid var(--supplier-focus-ring) !important;
  outline-offset: 3px;
}
.supplier-app .shopapp-switch__control > .shopapp-switch__input:disabled { cursor: not-allowed; }
.supplier-app .shopapp-switch__control > .shopapp-switch__input:disabled ~ span { opacity: .55; }
.supplier-app .supplier-settings-checkbox-row > .shopapp-switch__control {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  padding: 0;
  margin: var(--supplier-ui-table-cells-padding);
}
.supplier-app .supplier-boolean-field { display: inline-flex; align-items: center; gap: .5rem; }

/* User-selected Noty palette: all outcomes are yellow; type remains semantic. */
.supplier-app {
  --supplier-noty-bg: #fef08a;
  --supplier-noty-text: #422006;
  --supplier-noty-border: #ca8a04;
}
.supplier-app #noty_center_layout_container {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(360px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none;
  z-index: 10000000 !important;
}
.supplier-app #noty_center_layout_container > .supplier-noty {
  position: relative !important;
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 0 .5rem !important;
  background: var(--supplier-noty-bg) !important;
  color: var(--supplier-noty-text) !important;
  border: 1px solid var(--supplier-noty-border) !important;
  border-radius: var(--supplier-ui-notices-radius) !important;
  box-shadow: var(--supplier-ui-notices-shadow) !important;
  font-family: var(--supplier-font-body);
  pointer-events: none;
}
.supplier-app #noty_center_layout_container > .supplier-noty:last-child { margin-bottom: 0 !important; }
.supplier-app .supplier-noty .noty_message {
  background: transparent !important;
  color: inherit !important;
  padding: var(--supplier-ui-notices-padding) !important;
  font-size: .9375rem !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  text-align: center !important;
  overflow-wrap: anywhere;
}
.supplier-app .supplier-noty .noty_close { display: none !important; }
.supplier-app .supplier-noty-close {
  display: block;
  margin: 0 auto .75rem;
  padding: .5rem 1rem;
  min-height: 44px;
  background: var(--supplier-noty-bg);
  color: var(--supplier-noty-text);
  border: 1px solid var(--supplier-noty-border);
  border-radius: var(--supplier-ui-buttons-radius);
  pointer-events: auto;
  cursor: pointer;
}
.supplier-app #noty_center_layout_container:has(.supplier-noty-persistent) { pointer-events: auto; }
.supplier-app .supplier-noty-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Login split is structural; component colors, borders and padding remain theme-owned. */
.supplier-app .supplier-login-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100dvh;}
.supplier-app .supplier-login-story {display:flex;min-width:0;padding:clamp(1rem,3vw,3rem);}
.supplier-app .supplier-login-story-content {position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;width:100%;min-width:0;}
.supplier-app .supplier-login-brand {display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-weight:700;}
.supplier-app .supplier-login-brand .supplier-auth-logo {max-width:min(12rem,100%);max-height:4rem;}
.supplier-app .supplier-login-intro {margin-top:auto;}
.supplier-app .supplier-login-eyebrow {font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.supplier-app .supplier-login-intro h2 {font-size:clamp(2rem,3.5vw,4rem);line-height:1.12;letter-spacing:-.035em;margin:1rem 0;overflow-wrap:anywhere;}
.supplier-app .supplier-login-intro > p:last-child {max-width:30rem;line-height:1.7;}
.supplier-app .supplier-login-image {position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;}
.supplier-app .supplier-login-illustration {width:100%;max-height:15rem;}
.supplier-app .supplier-login-caption {font-size:.875rem;}
.supplier-app .supplier-login-access {display:grid;align-items:center;justify-items:center;min-width:0;padding:clamp(1.5rem,5vw,5rem);}
.supplier-app .supplier-login-workspace {width:100%;max-width:26rem;}
.supplier-app .supplier-login-workspace h1 {font-size:clamp(2rem,3vw,3rem);line-height:1.15;letter-spacing:-.03em;margin:1rem 0;}
.supplier-app .supplier-login-description {line-height:1.6;margin-bottom:2rem;}
.supplier-app .supplier-login-form {display:grid;gap:1.25rem;}
.supplier-app .supplier-login-forgot {justify-self:end;color:var(--supplier-primary);font-size:.875rem;text-decoration:underline;text-underline-offset:.25em;}
.supplier-app .supplier-login-submit {display:flex;justify-content:center;align-items:center;width:100%;font-weight:700;}
.supplier-app .supplier-login-idle {display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;}
.supplier-app .supplier-login-pending {display:none;}
.supplier-app .supplier-login-form.htmx-request .supplier-login-idle {display:none;}
.supplier-app .supplier-login-form.htmx-request .supplier-login-pending {display:inline;}
@media (max-width:767px) {
  .supplier-app .supplier-login-layout {grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;}
  .supplier-app .supplier-login-story {padding:1rem;}
  .supplier-app .supplier-login-story-content {gap:1rem;}
  .supplier-app .supplier-login-intro {margin:0;}
  .supplier-app .supplier-login-intro h2 {font-size:1.75rem;margin:.5rem 0;}
  .supplier-app .supplier-login-intro h2 br {display:none;}
  .supplier-app .supplier-login-illustration,.supplier-app .supplier-login-caption,.supplier-app .supplier-login-intro > p:last-child {display:none;}
  .supplier-app .supplier-login-access {padding:1.5rem 1.5rem max(2rem,env(safe-area-inset-bottom));align-items:start;}
}

/* Login branding policy: opaque contrast pair and minimum action radius.
   User-approved login exception to exact component radius, 2026-09-23. */
.supplier-login-page .supplier-login-layout {grid-template-rows:auto 1fr;}
.supplier-login-page .supplier-login-topbar {grid-column:1 / -1;display:flex;justify-content:flex-end;padding:max(1rem,env(safe-area-inset-top)) max(1.5rem,env(safe-area-inset-right)) .5rem max(1.5rem,env(safe-area-inset-left));min-width:0;}
.supplier-login-page .supplier-login-brand {display:flex;align-items:center;justify-content:flex-end;gap:.75rem;max-width:100%;flex-wrap:wrap;}
.supplier-login-page .supplier-login-marketplace-logo {display:block;object-fit:contain;max-width:min(15rem,65vw);height:3.5rem;background:#ffffff;border-radius:.5rem;padding:.375rem;}
.supplier-login-page .supplier-login-brand-name {max-width:28rem;overflow-wrap:anywhere;font-weight:700;}
.supplier-login-page .supplier-login-intro {background:var(--supplier-login-photo-bg,#19392b);color:var(--supplier-login-photo-text,#ffffff);padding:clamp(1rem,2vw,2rem);border-radius:.5rem;}
.supplier-login-page .supplier-login-intro :is(p,h2) {color:inherit;}
.supplier-login-page .supplier-login-caption {margin-top:1.5rem;}
.supplier-login-page :is(button:not([data-install-modal-backdrop]),.supplier-login-register) {border-radius:max(.5rem,var(--supplier-ui-buttons-radius,.75rem)) !important;}
@media(max-width:767px) {
  .supplier-login-page .supplier-login-layout {grid-template-rows:auto auto 1fr;}
  .supplier-login-page .supplier-login-topbar {padding-bottom:0;}
  .supplier-login-page .supplier-login-marketplace-logo {height:3rem;}
}

.supplier-login-page [data-login-brand-logo][hidden] {display:none;}

/* User refinement: full-height photo and dark green text panel, 2026-09-23. */
.supplier-login-page .supplier-login-story {grid-column:1;grid-row:1 / span 2;padding:30px;background:#ffffff;}
.supplier-login-page .supplier-login-story-content {border-radius:1rem;border:0;background-clip:padding-box;}
.supplier-login-page .supplier-login-topbar {grid-column:2;grid-row:1;}
.supplier-login-page .supplier-login-access {grid-column:2;grid-row:2;}
@media(max-width:767px) {
 .supplier-login-page .supplier-login-layout {grid-template-rows:auto auto 1fr;}
 .supplier-login-page .supplier-login-topbar {grid-column:1;grid-row:1;z-index:1;}
 .supplier-login-page .supplier-login-story {grid-column:1;grid-row:1 / span 2;}
 .supplier-login-page .supplier-login-story-content {padding-top:calc(var(--supplier-login-brand-height, 7rem) + 1rem);}
 .supplier-login-page .supplier-login-access {grid-column:1;grid-row:3;}
 .supplier-login-page .supplier-login-brand-name {max-width:55vw;}
}

.supplier-login-page .supplier-login-brand {background:#ffffff;color:#19392b;border-radius:.5rem;padding:.375rem;}

.supplier-login-page .supplier-login-register {display:flex;justify-content:center;align-items:center;width:100%;margin-top:1rem;text-decoration:none;font-weight:700;}