/* Inventory family. Screen only: printed labels keep their original geometry. */
@media screen {
  html[data-theme] #content:is([data-route="inventory"], [data-route="product"], [data-route="asset"], [data-route="receive"], [data-route="new"], [data-route="add"], [data-route="new-asset"], [data-route="transfer"], [data-route="suppliers"], [data-route="warehouses"], [data-route="categories"]) {
    font-family: var(--erp-font, inherit);
    color: var(--erp-ink);
  }

  /* Quiet, connected surfaces; the stronger mesh is reserved for summaries. */
  html[data-theme] #content :is(.product-page, .asset-detail-page, .asset-editor-page, .add-inventory-page, .transfer-page, .category-management-page) .panel,
  html[data-theme] #content:is([data-route="new"], [data-route="receive"], [data-route="warehouses"]) .form-panel,
  html[data-theme] #content :is(.batch, .supplier-card, .category-management-card, .transfer-product-row, .transfer-batch-card) {
    border-color: var(--erp-line);
    background: var(--erp-mesh-card, var(--erp-surface));
    color: var(--erp-ink);
    box-shadow: var(--erp-shadow);
  }

  html[data-theme] #content :is(.inventory-value-card, .supplier-purchases, .warehouse-membership-guide, .add-inventory-category, .transfer-source, .transfer-summary, .transfer-route-summary) {
    border-color: var(--erp-line);
    background: var(--erp-mesh-hero, var(--erp-mesh));
    color: var(--erp-ink);
    box-shadow: var(--erp-shadow);
  }

  html[data-theme] #content :is(.asset-notes, .asset-repair-summary, .asset-inline-action, .asset-action-panel:not(.asset-quarantine-action), .asset-action-panel>form, .asset-history-changes, .product-category-form, .purchase-price-fields, .receipt-accounting-notice, .tax-accounting-locked, .transfer-membership-note, .supplier-purchase-card, .supplier-page-purchases, .category-management-archive) {
    border-color: var(--erp-line);
    background: var(--erp-mesh-quiet, var(--erp-soft));
    color: var(--erp-ink);
  }

  html[data-theme] #content :is(.asset-repair-summary>div, .inventory-value-average, .batch-value .money-breakdown, .supplier-purchase-card .money-breakdown) {
    border-color: var(--erp-line);
    background: var(--erp-surface);
    color: var(--erp-ink);
  }

  html[data-theme] #content :is(.product-page, .asset-detail-page, .asset-editor-page, .add-inventory-page, .transfer-page, .category-management-page) :is(.field-hint, .quantity-caption, .metadata dt, .batch-date, .batch-purchase-price),
  html[data-theme] #content :is(.asset-history-event time, .asset-history-event small, .asset-history-event span, .asset-history-changes dt, .asset-history-changes dd, .asset-repair-summary span, .asset-action-panel>summary small, .inventory-value-average>span, .inventory-value-average>small, .inventory-value-coverage, .batch-value>span, .transfer-product-copy small, .transfer-product-stock small, .transfer-batch-stock small, .transfer-batch-card p, .transfer-source-head p, .category-management-create>p, .category-management-card>div>small, .add-inventory-option small, .add-inventory-category p, .warehouse-membership-guide p, .supplier-dialog-intro) {
    color: var(--erp-muted);
    font-size: 14px;
    line-height: 1.5;
  }

  html[data-theme] #content :is(.product-page, .asset-detail-page) .metadata dd,
  html[data-theme] #content :is(.asset-history-event strong, .batch-top strong, .transfer-product-copy strong, .category-management-card>details>summary) {
    color: var(--erp-ink);
    font-size: 16px;
    line-height: 1.4;
  }

  html[data-theme] #content :is(.asset-history-event p, .transfer-membership-note, .transfer-placement-result, .receipt-accounting-notice p, .tax-accounting-locked p, .purchase-price-fields .field-hint) {
    color: var(--erp-muted);
    font-size: 14px;
    line-height: 1.55;
  }

  html[data-theme] #content :is(.add-inventory-option>span, .asset-detail-label, .asset-history-marker, .transfer-product-icon, .transfer-source-head>span, .warehouse-membership-guide>span, .receipt-accounting-notice>span, .tax-accounting-locked>span) {
    border-color: var(--erp-line);
    background: var(--erp-accent);
    color: var(--erp-accent-ink);
    box-shadow: none;
  }

  /* Inventory cards use theme-aware copy and keep image controls above the photo. */
  html[data-theme] #content .inventory-page .product-grid.catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    align-items: stretch;
    gap: 16px;
  }
  html[data-theme] #content .inventory-page .product-card.catalog-card {
    --catalog-card-bg: var(--erp-mesh-card, var(--erp-surface));
    --catalog-card-ink: #fffdf8;
    --catalog-card-muted: #e2e5df;
    --catalog-card-scrim: linear-gradient(180deg, #151a1712, #151a1700 20%, #151a177a 47%, #151a17eb 74%, #151a17fa);
    min-height: 326px;
    aspect-ratio: .82;
    border: 1px solid var(--erp-line);
    border-radius: 26px;
    background: var(--catalog-card-bg);
    color: var(--catalog-card-ink);
    box-shadow: var(--erp-shadow);
  }
  html[data-theme] #content .inventory-page .catalog-card .catalog-card-body {gap: 3px;padding: 16px 18px 19px}
  html[data-theme] #content .inventory-page .catalog-card h3 {font-size: 18px;font-weight: 550;line-height: 1.3;color: var(--catalog-card-ink)}
  html[data-theme] #content .inventory-page .catalog-card .catalog-card-body .sku,
  html[data-theme] #content .inventory-page .catalog-card .catalog-procurement>span,
  html[data-theme] #content .inventory-page .catalog-card .catalog-stock .quantity small {font-size: 14px;line-height: 1.4;color: var(--catalog-card-muted)}
  html[data-theme] #content .inventory-page .catalog-card .catalog-stock .quantity {font-size: 17px;line-height: 1.4;color: var(--catalog-card-ink)}
  html[data-theme] #content .inventory-page .product-card--image-first .catalog-valuation>span {font-size: 13px;line-height: 1.4;color: var(--catalog-card-muted);white-space: normal;overflow-wrap: anywhere}
  html[data-theme] #content .inventory-page .catalog-card .catalog-card-overlay {top: 13px;right: 13px;left: 58px}
  html[data-theme] #content .inventory-page .catalog-card .catalog-card-overlay .catalog-status {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid #ffffff30;
    border-radius: 999px;
    background: #17231dd9;
    color: #e8f5ed;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-align: left;
    text-shadow: none;
    backdrop-filter: blur(12px);
  }
  html[data-theme] #content .inventory-page .catalog-card[data-stock="low"] .catalog-status,
  html[data-theme] #content .inventory-page .catalog-card[data-expiry-state="soon"] .catalog-status {border-color: #edc98877;background: #433722eb;color: #ffe0a8}
  html[data-theme] #content .inventory-page .catalog-card[data-stock="empty"] .catalog-status,
  html[data-theme] #content .inventory-page .catalog-card[data-expiry-state="expired"] .catalog-status {border-color: #e2a69a77;background: #492b2aeb;color: #ffd5cc}
  html[data-theme] #content .inventory-page .catalog-card .catalog-card-label-action {border-color: #ffffff55;background: #18201cdd;color: #fffdf8}

  /* Photo and copy have separate space, so long details never cover the product. */
  html[data-theme] #content .inventory-page .product-card.catalog-card[data-has-image="true"] {
    --catalog-card-ink: var(--erp-ink);
    --catalog-card-muted: var(--erp-muted);
    --catalog-card-scrim: none;
    display: flex;
    flex-direction: column;
    align-self: start;
    min-height: 0;
    aspect-ratio: auto;
  }
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="true"]::after {background: none}
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="true"] .catalog-media {
    position: relative;
    inset: auto;
    flex: 0 0 180px;
    height: 180px;
    aspect-ratio: auto;
    background: var(--erp-soft);
  }
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="true"] .catalog-media-product {object-fit: contain}
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="true"] .catalog-card-body {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    margin: 0;
    background: var(--erp-mesh-card, var(--erp-surface));
    color: var(--erp-ink);
  }
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="true"] :is(.catalog-card-body, .catalog-card-body *, .inventory-item-category) {text-shadow: none}

  /* A missing photo uses a compact icon/status row instead of an empty image stage. */
  html[data-theme] #content .inventory-page .product-card.catalog-card[data-has-image="false"] {
    --catalog-card-ink: var(--erp-ink);
    --catalog-card-muted: var(--erp-muted);
    --catalog-card-scrim: none;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-content: start;
    align-self: start;
    gap: 12px;
    min-height: 0;
    aspect-ratio: auto;
    padding: 72px 18px 18px;
  }
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="false"]::after {background: none}
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="false"] .catalog-media {
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    grid-column: 1;
    width: 32px;
    height: 32px;
    margin: 0;
    aspect-ratio: auto;
    background: transparent;
  }
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="false"] .catalog-placeholder {position: static;width: 32px;height: 32px;margin: 0;color: var(--erp-muted);opacity: 1}
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="false"] .catalog-card-body {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--erp-ink);
  }
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="false"] :is(.catalog-card-body, .catalog-card-body *, .inventory-item-category) {text-shadow: none}
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="false"] .catalog-card-overlay {
    position: relative;
    inset: auto;
    grid-column: 2;
    align-self: center;
    margin: 0;
    padding: 0;
  }
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="false"] :is(.catalog-card-label-action, .catalog-item-action-handle, .inventory-quick-category) {
    border-color: var(--erp-line);
    background: var(--erp-soft);
    color: var(--erp-ink);
    box-shadow: none;
    backdrop-filter: none;
  }
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="false"] :is(.catalog-card-label-action, .catalog-item-action-handle):focus-visible {
    outline-color: var(--erp-focus);
    box-shadow: 0 0 0 3px var(--erp-focus-ring);
  }
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="false"] .catalog-card-overlay .catalog-status {
    border-color: var(--erp-line);
    background: var(--erp-success-surface);
    color: var(--erp-success);
    backdrop-filter: none;
  }
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="false"]:is([data-stock="low"], [data-expiry-state="soon"]) .catalog-status {
    border-color: var(--erp-warning-line);
    background: var(--erp-warning-surface);
    color: var(--erp-warning);
  }
  html[data-theme] #content .inventory-page .catalog-card[data-has-image="false"]:is([data-stock="empty"], [data-expiry-state="expired"]) .catalog-status {
    border-color: var(--erp-danger-line);
    background: var(--erp-danger-surface);
    color: var(--erp-danger);
  }

  /* Objects share the same compact icon/status composition. */
  html[data-theme] #content .inventory-page .product-card.catalog-card.asset-card {
    --catalog-card-ink: var(--erp-ink);
    --catalog-card-muted: var(--erp-muted);
    --catalog-card-scrim: none;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-content: start;
    align-self: start;
    gap: 12px;
    min-height: 0;
    aspect-ratio: auto;
    padding: 72px 18px 18px;
  }
  html[data-theme] #content .inventory-page .asset-card .asset-card-visual {
    position: relative;
    z-index: 3;
    inset: auto;
    display: flex;
    align-items: center;
    grid-column: 1;
    justify-content: center;
    align-self: center;
    width: 32px;
    height: 32px;
    min-width: 0;
    margin: 0;
    background: transparent;
    color: var(--catalog-card-muted);
  }
  html[data-theme] #content .inventory-page .asset-card .asset-card-visual svg {flex: 0 0 28px;width: 28px;height: 28px;opacity: 1}
  html[data-theme] #content .inventory-page .asset-card .asset-card-visual span {display: none}
  html[data-theme] #content .inventory-page .asset-card .catalog-card-overlay {
    position: relative;
    inset: auto;
    grid-column: 2;
    align-self: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
  }
  html[data-theme] #content .inventory-page .asset-card .catalog-card-body {position: relative;inset: auto;z-index: 3;grid-column: 1 / -1;margin: 0;padding: 0;background: transparent;color: var(--erp-ink)}
  html[data-theme] #content .inventory-page .catalog-card:is([data-has-image="false"], .asset-card) .catalog-card-label-action {top: 12px;left: 12px;width: 44px;height: 44px;min-width: 44px;min-height: 44px}
  html[data-theme] #content .inventory-page .asset-card .catalog-card-body :is(.sku, h3, .catalog-procurement>span, .quantity) {text-shadow: none}
  html[data-theme] #content .inventory-page .asset-card .catalog-card-overlay .catalog-status.warning {border-color: var(--erp-warning-line);background: var(--erp-warning-surface);color: var(--erp-warning)}
  html[data-theme] #content .inventory-page .asset-card .catalog-card-overlay .catalog-status.danger {border-color: var(--erp-danger-line);background: var(--erp-danger-surface);color: var(--erp-danger)}

  html[data-theme] #content .inventory-page {
    --mobile-list-surface: var(--erp-surface);
    --mobile-list-line: var(--erp-line);
    --mobile-list-muted: var(--erp-muted);
    --mobile-list-hover: var(--erp-soft);
    --mobile-list-positive: var(--erp-success, var(--erp-accent-ink));
    --mobile-list-warning: var(--erp-warning, #835c18);
    --mobile-list-danger: var(--erp-danger);
  }
  html[data-theme] #content .inventory-page :is(.catalog-table-wrap, .catalog-mobile-list, .inventory-category-actions) {border-color: var(--erp-line);background: var(--erp-mesh-card, var(--erp-surface));color: var(--erp-ink)}
  html[data-theme] #content .inventory-page :is(.catalog-table-row, .catalog-table thead tr) {border-color: var(--erp-line)}
  html[data-theme] #content .inventory-page .catalog-table thead tr {background: var(--erp-soft);color: var(--erp-muted)}
  html[data-theme] #content .inventory-page .catalog-table-row:hover {background: var(--erp-soft)}
  html[data-theme] #content .inventory-page .catalog-table-row:focus-within {background: var(--erp-soft);box-shadow: inset 3px 0 var(--erp-focus)}
  html[data-theme] #content .inventory-page :is(.catalog-table-product h3, .catalog-table-product strong, .catalog-table-supplier, .catalog-table-stock span) {color: var(--erp-ink);font-size: 16px;line-height: 1.4}
  html[data-theme] #content .inventory-page .catalog-table :is(small, .sku, th) {color: var(--erp-muted);font-size: 14px;line-height: 1.4}
  html[data-theme] #content .inventory-page :is(.catalog-table-action>a, .catalog-table-label-action) {border-color: var(--erp-line);background: var(--erp-soft);color: var(--erp-ink)}
  html[data-theme] #content .inventory-page .catalog-table-status>.catalog-status {background: var(--erp-success-surface, var(--erp-soft));color: var(--erp-success, var(--erp-ink));font-size: 14px;line-height: 1.4}
  html[data-theme] #content .inventory-page .catalog-table-row[data-stock="low"] .catalog-status,
  html[data-theme] #content .inventory-page .catalog-table-status>.catalog-status.warning {background: var(--erp-warning-surface, var(--erp-soft));color: var(--erp-warning, var(--erp-ink))}
  html[data-theme] #content .inventory-page .catalog-table-row:is([data-stock="empty"], [data-expiry-state="expired"]) .catalog-status,
  html[data-theme] #content .inventory-page .catalog-table-status>.catalog-status.danger {background: var(--erp-danger-surface);color: var(--erp-danger)}
  html[data-theme] #content .inventory-page :is(.catalog-tool, .catalog-view-switch, .inventory-category-tab, .inventory-category-manage, .inventory-selection-toggle) {border-color: var(--erp-line);background: var(--erp-soft);color: var(--erp-ink);box-shadow: none}
  html[data-theme] #content .inventory-page :is(.inventory-category-tab[aria-pressed="true"], .inventory-selection-toggle[aria-pressed="true"], .catalog-tool.is-active) {border-color: var(--erp-control-line);background: var(--erp-accent);color: var(--erp-accent-ink)}
  html[data-theme] #content .inventory-page :is(.catalog-subtitle, .catalog-head, .catalog-mobile-code, .catalog-mobile-status, .catalog-mobile-meta, .catalog-mobile-stock>small, .catalog-mobile-value small) {font-size: 14px;line-height: 1.4}
  html[data-theme] #content .inventory-page .catalog-mobile-name {font-size: 16px;line-height: 1.4}

  /* Forms use the same field hierarchy as the material editor. */
  html[data-theme] #content:is([data-route="new"], [data-route="receive"], [data-route="new-asset"], [data-route="transfer"], [data-route="warehouses"], [data-route="categories"]) :is(.form-panel, .asset-editor, .category-management-card) label,
  html[data-theme] #content :is(.asset-inline-action label, .asset-danger-actions label, .add-inventory-category>label, .purchase-price-fields label, .purchase-price-fields>legend, .receipt-accounting-notice strong, .tax-accounting-locked strong) {font-size: 14px;line-height: 1.5;color: var(--erp-ink)}
  html[data-theme] #content:is([data-route="new"], [data-route="receive"], [data-route="new-asset"], [data-route="transfer"], [data-route="warehouses"], [data-route="categories"]) :is(input, textarea, select):not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], .quantity-value, .date-picker-input) {
    border-color: var(--erp-control-line);
    border-radius: var(--erp-control-radius, 16px);
    background-color: var(--erp-raised);
    color: var(--erp-ink);
    font-family: inherit;
    font-size: 16px;
  }
  html[data-theme] #content .purchase-price-fields .price-unit-picker .unit-trigger {border-color: var(--erp-control-line);background: var(--erp-raised);color: var(--erp-ink);font-size: 16px}
  html[data-theme] #content .purchase-price-fields .price-unit-picker .unit-menu {border-color: var(--erp-line);background: var(--erp-surface);color: var(--erp-ink)}
  html[data-theme] #content .purchase-price-fields .price-unit-picker .unit-option {background: transparent;color: var(--erp-ink);font-size: 16px}
  html[data-theme] #content .purchase-price-fields .price-unit-picker .unit-option:is(:hover, :focus, [data-active="true"], [aria-selected="true"]),
  html[data-theme] #content .purchase-price-fields .price-unit-picker .unit-trigger[aria-expanded="true"] {background: var(--erp-accent);color: var(--erp-accent-ink)}
  html[data-theme] #content .purchase-price-fields :is(input, .unit-trigger):focus-visible {border-color: var(--erp-focus);background: var(--erp-raised);outline: 2px solid var(--erp-focus);outline-offset: 2px;box-shadow: none}
  html[data-theme] #content .purchase-price-fields .unit-chevron {color: var(--erp-muted)}
  html[data-theme] #content .tax-accounting-choice label>span {border-color: var(--erp-control-line);background: var(--erp-surface);color: var(--erp-ink)}
  html[data-theme] #content .tax-accounting-choice label:has(input:checked)>span {border-color: var(--erp-focus);background: var(--erp-accent);color: var(--erp-accent-ink)}
  html[data-theme] #content .transfer-route-steps li {border-color: var(--erp-line);background: var(--erp-surface);color: var(--erp-muted);font-size: 14px}
  html[data-theme] #content .transfer-route-steps li[aria-current="step"] {border-color: var(--erp-control-line);background: var(--erp-accent);color: var(--erp-accent-ink)}
  html[data-theme] #content .transfer-route-steps li.is-complete {border-color: var(--erp-line);background: var(--erp-success-surface, var(--erp-soft));color: var(--erp-success, var(--erp-ink))}

  /* Supplier details remain legible instead of fading into a tiny grey footnote. */
  html[data-theme] #content .supplier-card {padding: 22px;border-radius: 26px;gap: 16px}
  html[data-theme] #content .supplier-card-head {display: flex;align-items: flex-start;flex-wrap: wrap;gap: 12px 18px}
  html[data-theme] #content .supplier-company-heading {flex: 1 1 190px;min-width: 0}
  html[data-theme] #content .supplier-card-head h3 {font-size: 21px;line-height: 1.3;color: var(--erp-ink)}
  html[data-theme] #content .supplier-card-actions {flex-wrap: wrap;gap: 4px;margin: 0}
  html[data-theme] #content .supplier-status {font-size: 13px;line-height: 1.4;letter-spacing: .04em;color: var(--erp-success, var(--erp-muted))}
  html[data-theme] #content .supplier-status::before {background: var(--erp-success, #56856b)}
  html[data-theme] #content .supplier-card[data-active="false"] {background: var(--erp-soft);color: var(--erp-muted)}
  html[data-theme] #content .supplier-card[data-active="false"] .supplier-status {color: var(--erp-muted)}
  html[data-theme] #content .supplier-card[data-active="false"] .supplier-status::before {background: var(--erp-muted)}
  html[data-theme] #content :is(.supplier-edit-toggle, .supplier-state-toggle, .supplier-order-link) {min-height: 44px;border-color: var(--erp-line);background: var(--erp-soft);color: var(--erp-ink);font-size: 14px;line-height: 1.4}
  html[data-theme] #content .supplier-state-toggle.is-danger {background: var(--erp-danger-surface);color: var(--erp-danger)}
  html[data-theme] #content :is(.supplier-edit-toggle, .supplier-state-toggle, .supplier-order-link):is(:hover, :focus-visible) {border-color: var(--erp-control-line);background: var(--erp-accent);color: var(--erp-accent-ink)}
  html[data-theme] #content .supplier-state-toggle.is-danger:is(:hover, :focus-visible) {background: var(--erp-danger-surface);color: var(--erp-danger)}
  html[data-theme] #content :is(.supplier-card-details, .supplier-card-empty) {border-color: var(--erp-line)}
  html[data-theme] #content :is(.supplier-card-identifiers dt, .supplier-card-terms dt, .supplier-card-address, .supplier-card-notes, .supplier-card-empty, .supplier-purchase-card>div:first-child>span) {color: var(--erp-muted);font-size: 14px;line-height: 1.55}
  html[data-theme] #content :is(.supplier-card-identifiers dd, .supplier-card-terms dd, .supplier-card-contact, .supplier-card-address::before, .supplier-card-notes::before) {color: var(--erp-ink);font-size: 14px;line-height: 1.55}
  html[data-theme] #content :is(.supplier-purchases, .product-page, .asset-detail-page) .money-breakdown {border-color: var(--erp-line);background: var(--erp-surface);color: var(--erp-ink)}
  html[data-theme] #content :is(.supplier-purchases, .product-page, .asset-detail-page) .money-breakdown :is(dt, .money-breakdown-title) {font-size: 14px;line-height: 1.4;color: var(--erp-muted)}
  html[data-theme] #content :is(.supplier-purchases, .product-page, .asset-detail-page) .money-breakdown dd {font-size: 16px;line-height: 1.4;color: var(--erp-ink)}
  html[data-theme] #content .supplier-card-contact a {color: var(--erp-accent-ink);text-decoration: underline;text-underline-offset: 3px}
  html[data-theme] #content :is(.supplier-purchase-card>p, .inventory-value-reconciliation) {color: var(--erp-warning, #80581c);font-size: 14px;line-height: 1.5}
  html[data-theme] #content .supplier-mobile-summary>div {border-color: var(--erp-line);background: var(--erp-mesh-card, var(--erp-surface));color: var(--erp-ink)}
  html[data-theme] #content .supplier-mobile-summary>div:first-child {background: var(--erp-mesh-hero, var(--erp-mesh));color: var(--erp-ink)}
  html[data-theme] #content .supplier-mobile-summary span {font-size: 14px;color: var(--erp-muted);opacity: 1}
  html[data-theme] #content .supplier-directory-search {min-height: 52px;border: 1px solid var(--erp-control-line);background: var(--erp-raised);color: var(--erp-ink);gap: 12px}
  html[data-theme] #content .supplier-directory-search>input,
  html[data-theme] #content .supplier-directory-search>input:is(:focus, :focus-visible) {min-height: 50px;margin: 0;padding: 12px 0;border: 0;outline: none;box-shadow: none;border-radius: 0;background: transparent;color: var(--erp-ink);font: inherit;font-size: 16px;line-height: 1.5}
  html[data-theme] #content .supplier-directory-search:focus-within {border-color: var(--erp-focus);outline: 2px solid var(--erp-focus);outline-offset: 2px}

  /* Warehouse cards share surface tokens while their stock colours stay semantic. */
  html[data-theme] #content .warehouse-group-card {border-color: var(--erp-line);background: var(--erp-mesh-quiet, var(--erp-soft));box-shadow: none}
  html[data-theme] #content .warehouse-group-card:is([data-active="true"], .is-active, [data-editing="true"]) {border-color: var(--erp-control-line);background: var(--erp-mesh-quiet, var(--erp-soft))}
  html[data-theme] #content .warehouse-group-locations {border-color: var(--erp-line)}
  html[data-theme] #content .warehouse-overview-card {
    --warehouse-text: var(--erp-ink);
    --warehouse-muted: var(--erp-muted);
    --warehouse-line: var(--erp-line);
    --warehouse-healthy: var(--erp-success, #7a9c8b);
    --warehouse-low: var(--erp-warning, #b48d50);
    --warehouse-ended: var(--erp-danger);
    --warehouse-track: var(--erp-soft);
    --warehouse-control: var(--erp-soft);
    --warehouse-control-line: var(--erp-control-line);
    --warehouse-action: var(--erp-accent);
    border-color: var(--erp-line);
    background: var(--erp-mesh-card, var(--erp-surface));
    color: var(--erp-ink);
    box-shadow: var(--erp-shadow);
  }
  html[data-theme] #content .warehouse-overview-card:is([data-active="true"], .is-active, [data-editing="true"]) {border-color: var(--erp-control-line);background: var(--erp-mesh-hero, var(--erp-mesh));color: var(--erp-ink);box-shadow: var(--erp-shadow)}
  html[data-theme] #content .warehouse-overview-card .warehouse-card-symbol {border-color: var(--erp-line);background: var(--erp-accent);color: var(--erp-accent-ink)}
  html[data-theme] #content .warehouse-overview-card:is([data-active="true"], .is-active) .warehouse-point-badge {background: var(--erp-success-surface, var(--erp-soft));color: var(--erp-success, var(--erp-ink))}
  html[data-theme] #content .warehouse-overview-card :is(.warehouse-point-badge, .warehouse-overview-stats span, .warehouse-stock-category span, .warehouse-stock-caption, .warehouse-simple-copy>p, .warehouse-rename-form label, .warehouse-rename-actions .button) {font-size: 14px;line-height: 1.45}
  html[data-theme] #content .warehouse-overview-card .warehouse-point-actions .button {border-color: var(--erp-control-line);background: var(--erp-accent);color: var(--erp-accent-ink);font-size: 14px;line-height: 1.4}
  html[data-theme] #content .warehouse-overview-card .warehouse-point-actions .warehouse-transfer-action {background: var(--erp-soft);color: var(--erp-ink)}
  html[data-theme] #content :is(.warehouse-group-card .clinic-rename-form, .warehouse-location-create>form) {border-color: var(--erp-line);background: var(--erp-surface);color: var(--erp-ink)}
  html[data-theme] #content :is(.warehouse-location-create, .transfer-source-head, .batch-value) {border-color: var(--erp-line)}

  /* Warnings are coloured surfaces, not low-contrast text on a normal card. */
  html[data-theme] #content :is(.inventory-value-reconciliation, .warehouse-overview-card .warehouse-point-expiry-warning, .batch.expired) {border-color: var(--erp-warning-line, var(--erp-control-line));background: var(--erp-warning-surface, var(--erp-soft));color: var(--erp-warning, var(--erp-ink))}
  html[data-theme] #content .warehouse-overview-card .warehouse-point-expiry-warning>span {background: var(--erp-warning-surface, var(--erp-soft));color: var(--erp-warning, var(--erp-ink))}
  html[data-theme] #content :is(.asset-repair-summary.is-limit-reached, .asset-repair-summary>p) {border-color: var(--erp-danger-line);background: var(--erp-danger-surface);color: var(--erp-danger)}

  /* These local dialogs inherit the same family, even outside #content. */
  html[data-theme] :is(.supplier-dialog, .product-editor-dialog, .stock-editor-dialog, .product-match-dialog, .catalog-filter-dialog, .invoice-import-dialog) {font-family: var(--erp-font, inherit);color: var(--erp-ink)}
  html[data-theme] :is(.product-editor-heading, .stock-editor-current, .catalog-filter-dialog-heading) {background: var(--erp-mesh-hero, var(--erp-mesh))}
  html[data-theme] .catalog-filter-dialog {border-color: var(--erp-line);background: var(--erp-mesh-quiet, var(--erp-surface));color: var(--erp-ink)}
  html[data-theme] .catalog-filter-dialog :is(.catalog-filter-section, .catalog-filter-dialog-heading, footer) {border-color: var(--erp-line)}
  html[data-theme] .catalog-filter-dialog :is(.catalog-filter-section h3, label) {font-size: 14px;color: var(--erp-ink);line-height: 1.5}
  html[data-theme] .catalog-filter-dialog :is(.unit-trigger, input) {border-color: var(--erp-control-line);background: var(--erp-raised);color: var(--erp-ink);font-size: 16px}
  html[data-theme] .supplier-dialog .supplier-form-grid fieldset {border-color: var(--erp-line);background: var(--erp-mesh-quiet, var(--erp-soft))}
  html[data-theme] .supplier-dialog :is(.supplier-dialog-intro, .supplier-form-grid label, .supplier-form-grid legend) {font-size: 14px;line-height: 1.5;color: var(--erp-muted)}
  html[data-theme] .supplier-dialog .supplier-form-grid :is(input, textarea) {margin: 0;background: var(--erp-raised);color: var(--erp-ink);font-size: 16px}
  html[data-theme] .supplier-dialog .supplier-dialog-actions {background: var(--erp-surface);border-color: var(--erp-line)}
  html[data-theme] :is(.supplier-card .supplier-logo, .supplier-dialog .supplier-logo-preview) {background: var(--erp-mesh-hero, var(--erp-mesh));color: var(--erp-accent-ink)}
  html[data-theme] .supplier-dialog .supplier-logo-editor {background: var(--erp-soft);color: var(--erp-ink)}
  html[data-theme] .supplier-dialog .supplier-logo-upload {background: var(--erp-accent);color: var(--erp-accent-ink)}
  html[data-theme] .supplier-dialog .supplier-logo-editor [data-logo-error] {color: var(--erp-danger)}
  html[data-theme] .product-match-dialog {border-color: var(--erp-line);background: var(--erp-surface)}
  html[data-theme] .product-match-dialog .product-match-list>button {border-color: var(--erp-line);background: var(--erp-mesh-card, var(--erp-soft));color: var(--erp-ink)}
  html[data-theme] .product-match-dialog .product-match-list>button:is(:hover, :focus-visible) {border-color: var(--erp-control-line);background: var(--erp-accent);color: var(--erp-accent-ink)}
  html[data-theme] .product-match-dialog .product-match-list strong {font-size: 16px;line-height: 1.4}
  html[data-theme] .product-match-dialog .product-match-list small {font-size: 14px;line-height: 1.5;color: var(--erp-muted)}
  html[data-theme] .product-editor-dialog :is(.product-editor-heading p, .product-editor-panel small, .product-editor-panel .field-hint, .product-editor-footer .field-hint, .stock-editor-current>div>span, .stock-editor-comparison-value>span, .stock-editor-delta, .stock-editor-price-warning, .stock-editor-valuation>span, .stock-editor-valuation>p, .product-editor-status) {font-size: 14px;line-height: 1.5}
}

@media screen and (max-width: 700px) {
  html[data-theme] #content .supplier-card {padding: 18px}
  html[data-theme] #content .supplier-card-head h3 {font-size: 20px}
  html[data-theme] #content .supplier-card-actions {width: 100%}
  html[data-theme] #content .supplier-card-details {grid-template-columns: minmax(0, 1fr)}
  html[data-theme] #content .supplier-order-link {grid-column: 1;grid-row: auto;justify-self: start}
  html[data-theme] #content .supplier-card-identifiers>div,
  html[data-theme] #content .supplier-card-terms>div {display: flex;flex-wrap: wrap;gap: 4px 8px}
  html[data-theme] #content .inventory-page .catalog-mobile-link {padding-block: 16px}
  html[data-theme] #content .inventory-page .catalog-mobile-stock {gap: 5px}
  html[data-theme] #content .transfer-product-row {grid-template-columns: 40px minmax(0, 1fr) auto;gap: 10px}
  html[data-theme] #content .transfer-product-row>svg {display: none}
  html[data-theme] #content .transfer-product-icon {width: 40px;height: 40px}
  html[data-theme] #content .transfer-product-copy :is(strong, small) {white-space: normal;overflow-wrap: anywhere}
  html[data-theme] #content .asset-history-changes>div {grid-template-columns: minmax(0, 1fr);gap: 3px}
}