/**
 * WastHub ERP — Global Core Components (Phase 2)
 * Contract: html[data-wast-ui] or html[data-wh-shell] + .wh-* + data-wh-* states/behaviors.
 * This layer intentionally does not style legacy or Bootstrap selectors.
 */

html:is([data-wast-ui], [data-wh-shell]) {
  --wh-component-control-bg: var(--wh-color-surface-card);
  --wh-component-control-hover: var(--wh-color-surface-subtle);
  --wh-component-disabled-opacity: 0.58;
  --wh-component-backdrop: var(--wh-color-surface-overlay);
  --wh-component-max-dialog: 36rem;
  --wh-component-max-dialog-wide: 52rem;
}

html:is([data-wast-ui], [data-wh-shell]) .wh-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Actions */
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-btn, .wh-icon-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wh-space-2);
  min-block-size: var(--wh-control-height);
  border: var(--wh-border-width-default) solid transparent;
  border-radius: var(--wh-radius-md);
  font: inherit;
  font-size: var(--wh-font-size-md);
  font-weight: var(--wh-font-weight-semibold);
  line-height: var(--wh-line-height-control);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--wh-duration-fast) var(--wh-easing-standard), border-color var(--wh-duration-fast) var(--wh-easing-standard), color var(--wh-duration-fast) var(--wh-easing-standard), transform var(--wh-duration-fast) var(--wh-easing-standard);
}

html:is([data-wast-ui], [data-wh-shell]) .wh-btn { padding: var(--wh-control-padding-block) var(--wh-control-padding-inline); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn[data-wh-size="compact"] { min-block-size: var(--wh-control-height-compact); padding: var(--wh-space-1) var(--wh-space-2); font-size: var(--wh-font-size-sm); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn[data-wh-size="large"] { min-block-size: var(--wh-control-height-touch); padding-inline: var(--wh-space-5); font-size: var(--wh-font-size-lg); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn[data-wh-variant="primary"] { color: var(--wh-color-text-on-primary); background: var(--wh-color-action-primary); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn[data-wh-variant="primary"]:hover { background: var(--wh-color-action-primary-hover); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn[data-wh-variant="primary"]:active { background: var(--wh-color-action-primary-pressed); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn[data-wh-variant="secondary"] { color: var(--wh-color-text-primary); background: var(--wh-component-control-bg); border-color: var(--wh-color-border-strong); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn[data-wh-variant="secondary"]:hover { background: var(--wh-component-control-hover); border-color: var(--wh-color-border-interactive); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn[data-wh-variant="ghost"] { color: var(--wh-color-action-primary); background: transparent; }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn[data-wh-variant="ghost"]:hover { background: var(--wh-color-action-primary-subtle); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn[data-wh-variant="danger"] { color: var(--wh-color-text-on-primary); background: var(--wh-color-action-danger); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn[data-wh-variant="danger"]:hover { background: var(--wh-color-action-danger-hover); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-btn, .wh-icon-btn):active { transform: translateY(1px); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-btn, .wh-icon-btn):disabled,
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-btn, .wh-icon-btn)[aria-disabled="true"] { opacity: var(--wh-component-disabled-opacity); cursor: not-allowed; pointer-events: none; }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-btn, .wh-icon-btn)[data-wh-state="loading"] { cursor: wait; }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-btn, .wh-icon-btn)[data-wh-state="loading"] > :not(.wh-spinner) { visibility: hidden; }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-btn, .wh-icon-btn)[data-wh-state="loading"] > .wh-spinner { position: absolute; }
html:is([data-wast-ui], [data-wh-shell]) .wh-icon-btn { inline-size: var(--wh-control-height); padding: var(--wh-space-2); color: var(--wh-color-text-secondary); background: transparent; }
html:is([data-wast-ui], [data-wh-shell]) .wh-icon-btn:hover { color: var(--wh-color-text-primary); background: var(--wh-component-control-hover); }
html:is([data-wast-ui], [data-wh-shell]) .wh-icon-btn > :where(svg, img) { inline-size: 1.25rem; block-size: 1.25rem; }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn-group { display: inline-flex; align-items: stretch; }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn-group > :where(.wh-btn, .wh-icon-btn) { border-radius: 0; margin-inline-start: calc(var(--wh-border-width-default) * -1); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn-group > :first-child { margin-inline-start: 0; border-start-start-radius: var(--wh-radius-md); border-end-start-radius: var(--wh-radius-md); }
html:is([data-wast-ui], [data-wh-shell]) .wh-btn-group > :last-child { border-start-end-radius: var(--wh-radius-md); border-end-end-radius: var(--wh-radius-md); }

/* Forms */
html:is([data-wast-ui], [data-wh-shell]) .wh-field { display: grid; gap: var(--wh-space-2); min-inline-size: 0; }
html:is([data-wast-ui], [data-wh-shell]) .wh-label { color: var(--wh-color-text-primary); font-size: var(--wh-font-size-md); font-weight: var(--wh-font-weight-semibold); }
html:is([data-wast-ui], [data-wh-shell]) .wh-label[data-wh-required]::after { content: " *"; color: var(--wh-color-status-negative); }
html:is([data-wast-ui], [data-wh-shell]) .wh-label[data-wh-optional]::after { content: " (" attr(data-wh-optional) ")"; color: var(--wh-color-text-muted); font-size: var(--wh-font-size-xs); font-weight: var(--wh-font-weight-regular); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-input, .wh-textarea, .wh-select) {
  inline-size: 100%;
  min-block-size: var(--wh-control-height);
  box-sizing: border-box;
  padding: var(--wh-control-padding-block) var(--wh-control-padding-inline);
  color: var(--wh-color-text-primary);
  background: var(--wh-component-control-bg);
  border: var(--wh-border-width-default) solid var(--wh-color-border-strong);
  border-radius: var(--wh-radius-md);
  font: inherit;
  font-size: var(--wh-font-size-md);
  line-height: var(--wh-line-height-control);
  transition: border-color var(--wh-duration-fast) var(--wh-easing-standard), box-shadow var(--wh-duration-fast) var(--wh-easing-standard);
}
html:is([data-wast-ui], [data-wh-shell]) .wh-textarea { min-block-size: 7rem; resize: vertical; }
html:is([data-wast-ui], [data-wh-shell]) .wh-select { appearance: auto; }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-input, .wh-textarea, .wh-select)::placeholder { color: var(--wh-color-text-muted); opacity: 1; }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-input, .wh-textarea, .wh-select):hover:not(:disabled) { border-color: var(--wh-color-border-interactive); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-input, .wh-textarea, .wh-select):focus-visible { border-color: var(--wh-color-border-interactive); box-shadow: var(--wh-focus-ring); outline: none; }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-input, .wh-textarea, .wh-select):disabled { color: var(--wh-color-text-disabled); background: var(--wh-color-surface-subtle); cursor: not-allowed; opacity: var(--wh-component-disabled-opacity); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-input, .wh-textarea)[readonly] { color: var(--wh-color-text-secondary); background: var(--wh-color-surface-subtle); }
html:is([data-wast-ui], [data-wh-shell]) .wh-field[data-wh-state="invalid"] :where(.wh-input, .wh-textarea, .wh-select) { border-color: var(--wh-color-border-error); }
html:is([data-wast-ui], [data-wh-shell]) .wh-field[data-wh-state="valid"] :where(.wh-input, .wh-textarea, .wh-select) { border-color: var(--wh-color-status-positive); }
html:is([data-wast-ui], [data-wh-shell]) .wh-help-text,
html:is([data-wast-ui], [data-wh-shell]) .wh-validation-message { margin: 0; font-size: var(--wh-font-size-sm); line-height: var(--wh-line-height-body); }
html:is([data-wast-ui], [data-wh-shell]) .wh-help-text { color: var(--wh-color-text-muted); }
html:is([data-wast-ui], [data-wh-shell]) .wh-validation-message { display: none; color: var(--wh-color-status-negative); }
html:is([data-wast-ui], [data-wh-shell]) .wh-field[data-wh-state="invalid"] .wh-validation-message { display: block; }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-choice, .wh-checkbox, .wh-radio) { display: inline-flex; align-items: flex-start; gap: var(--wh-space-2); color: var(--wh-color-text-primary); cursor: pointer; }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-choice, .wh-checkbox, .wh-radio) > input { inline-size: 1.125rem; block-size: 1.125rem; margin: var(--wh-space-1) 0 0; accent-color: var(--wh-color-action-primary); flex: 0 0 auto; }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-choice, .wh-checkbox, .wh-radio):has(input:disabled) { color: var(--wh-color-text-disabled); cursor: not-allowed; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toggle { display: inline-flex; align-items: center; gap: var(--wh-space-2); cursor: pointer; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toggle > input { position: absolute; opacity: 0; pointer-events: none; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toggle__track { position: relative; inline-size: 2.75rem; block-size: 1.5rem; flex: 0 0 auto; background: var(--wh-color-border-strong); border-radius: var(--wh-radius-full); transition: background-color var(--wh-duration-fast) var(--wh-easing-standard); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toggle__track::after { content: ""; position: absolute; inset-block-start: var(--wh-space-1); inset-inline-start: var(--wh-space-1); inline-size: 1rem; block-size: 1rem; background: var(--wh-color-neutral-0); border-radius: var(--wh-radius-full); box-shadow: var(--wh-elevation-1); transition: inset-inline-start var(--wh-duration-fast) var(--wh-easing-standard); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toggle > input:checked + .wh-toggle__track { background: var(--wh-color-action-primary); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toggle > input:checked + .wh-toggle__track::after { inset-inline-start: calc(100% - 1.25rem); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toggle > input:focus-visible + .wh-toggle__track { box-shadow: var(--wh-focus-ring); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toggle:has(input:disabled) { color: var(--wh-color-text-disabled); cursor: not-allowed; opacity: var(--wh-component-disabled-opacity); }
html:is([data-wast-ui], [data-wh-shell]) .wh-search { position: relative; display: flex; align-items: center; min-inline-size: 12rem; }
html:is([data-wast-ui], [data-wh-shell]) .wh-search .wh-input { padding-inline-start: var(--wh-space-10); }
html:is([data-wast-ui], [data-wh-shell]) .wh-search__icon { position: absolute; inset-inline-start: var(--wh-space-3); inline-size: 1rem; block-size: 1rem; color: var(--wh-color-text-muted); pointer-events: none; }

/* Status and feedback */
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-badge, .wh-status-badge, .wh-priority-badge, .wh-filter-chip) { display: inline-flex; align-items: center; gap: var(--wh-space-1); max-inline-size: 100%; border-radius: var(--wh-radius-full); font-size: var(--wh-font-size-xs); font-weight: var(--wh-font-weight-semibold); line-height: var(--wh-line-height-control); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-badge, .wh-status-badge, .wh-priority-badge) { padding: var(--wh-space-1) var(--wh-space-2); color: var(--wh-color-text-secondary); background: var(--wh-color-surface-subtle); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-badge, .wh-status-badge, .wh-priority-badge)[data-wh-tone="positive"] { color: var(--wh-color-status-positive); background: var(--wh-color-status-positive-surface); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-badge, .wh-status-badge, .wh-priority-badge)[data-wh-tone="progress"],
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-badge, .wh-status-badge, .wh-priority-badge)[data-wh-tone="informational"] { color: var(--wh-color-status-progress); background: var(--wh-color-status-progress-surface); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-badge, .wh-status-badge, .wh-priority-badge)[data-wh-tone="waiting"],
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-badge, .wh-status-badge, .wh-priority-badge)[data-wh-tone="attention"] { color: var(--wh-color-status-waiting); background: var(--wh-color-status-waiting-surface); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-badge, .wh-status-badge, .wh-priority-badge)[data-wh-tone="warning"] { color: var(--wh-color-status-warning); background: var(--wh-color-status-warning-surface); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-badge, .wh-status-badge, .wh-priority-badge)[data-wh-tone="negative"] { color: var(--wh-color-status-negative); background: var(--wh-color-status-negative-surface); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-badge, .wh-status-badge, .wh-priority-badge)[data-wh-tone="inactive"] { color: var(--wh-color-status-inactive); background: var(--wh-color-status-inactive-surface); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-badge, .wh-status-badge, .wh-priority-badge)[data-wh-tone="urgent"] { color: var(--wh-color-status-urgent); background: var(--wh-color-status-urgent-surface); }
html:is([data-wast-ui], [data-wh-shell]) .wh-alert { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--wh-space-3); padding: var(--wh-space-3) var(--wh-space-4); color: var(--wh-color-text-primary); background: var(--wh-color-surface-subtle); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-inline-start: var(--wh-border-width-strong) solid var(--wh-color-text-muted); border-radius: var(--wh-radius-lg); }
html:is([data-wast-ui], [data-wh-shell]) .wh-alert[data-wh-tone="positive"] { border-inline-start-color: var(--wh-color-status-positive); background: var(--wh-color-status-positive-surface); }
html:is([data-wast-ui], [data-wh-shell]) .wh-alert[data-wh-tone="warning"] { border-inline-start-color: var(--wh-color-status-warning); background: var(--wh-color-status-warning-surface); }
html:is([data-wast-ui], [data-wh-shell]) .wh-alert[data-wh-tone="negative"] { border-inline-start-color: var(--wh-color-status-negative); background: var(--wh-color-status-negative-surface); }
html:is([data-wast-ui], [data-wh-shell]) .wh-alert[data-wh-tone="informational"] { border-inline-start-color: var(--wh-color-status-info); background: var(--wh-color-status-info-surface); }
html:is([data-wast-ui], [data-wh-shell]) .wh-alert__title { margin: 0 0 var(--wh-space-1); font-size: var(--wh-font-size-md); font-weight: var(--wh-font-weight-bold); }
html:is([data-wast-ui], [data-wh-shell]) .wh-alert__body { margin: 0; font-size: var(--wh-font-size-sm); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast-region { position: fixed; z-index: var(--wh-z-toast); top: calc(var(--wh-shell-header-height, var(--wh-topbar-height)) + var(--wh-space-3)); left: var(--wh-space-4); right: auto; display: grid; gap: var(--wh-space-3); width: min(25rem, calc(100vw - var(--wh-space-8))); max-height: calc(100vh - var(--wh-shell-header-height, var(--wh-topbar-height)) - var(--wh-space-6)); overflow-y: auto; overscroll-behavior: contain; pointer-events: none; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast { --wh-toast-tone: var(--wh-color-status-info); --wh-toast-tone-surface: var(--wh-color-status-info-surface); position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: start; gap: var(--wh-space-3); min-block-size: 5rem; padding: var(--wh-space-3) var(--wh-space-3) calc(var(--wh-space-3) + 2px); overflow: hidden; color: var(--wh-color-text-primary); background: color-mix(in srgb, var(--wh-toast-tone-surface) 46%, var(--wh-color-surface-elevated)); border: var(--wh-border-width-default) solid color-mix(in srgb, var(--wh-toast-tone) 22%, var(--wh-color-border-default)); border-radius: var(--wh-radius-lg); box-shadow: var(--wh-elevation-2); pointer-events: auto; animation: wh-toast-enter 220ms var(--wh-easing-standard); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast[data-wh-tone="positive"] { --wh-toast-tone: var(--wh-color-status-positive); --wh-toast-tone-surface: var(--wh-color-status-positive-surface); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast[data-wh-tone="negative"] { --wh-toast-tone: var(--wh-color-status-negative); --wh-toast-tone-surface: var(--wh-color-status-negative-surface); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast[data-wh-tone="warning"] { --wh-toast-tone: var(--wh-color-status-warning); --wh-toast-tone-surface: var(--wh-color-status-warning-surface); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast[data-wh-variant="neutral"] { background: var(--wh-color-surface-elevated); border-color: var(--wh-color-border-default); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; color: var(--wh-toast-tone); background: var(--wh-toast-tone-surface); border-radius: var(--wh-radius-md); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__icon svg,
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__control svg { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__content { min-width: 0; padding-block-start: 1px; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__title { display: block; overflow: hidden; font-size: var(--wh-font-size-sm); font-weight: var(--wh-font-weight-semibold); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__message { display: -webkit-box; margin: var(--wh-space-1) 0 0; overflow: hidden; color: var(--wh-color-text-secondary); font-size: var(--wh-font-size-xs); line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__controls { display: flex; gap: 2px; margin-block-start: calc(var(--wh-space-1) * -1); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__control { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; padding: 0; color: var(--wh-color-text-muted); background: transparent; border: 0; border-radius: var(--wh-radius-md); cursor: pointer; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__control:hover { color: var(--wh-color-text-primary); background: var(--wh-component-control-hover); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__control:focus-visible { outline: none; box-shadow: var(--wh-focus-ring); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__details { grid-column: 1 / -1; margin-block-start: var(--wh-space-3); padding-block-start: var(--wh-space-3); border-block-start: var(--wh-border-width-default) solid var(--wh-color-border-default); transform-origin: top; animation: wh-toast-details-in 160ms var(--wh-easing-standard); transition: opacity 140ms var(--wh-easing-standard), transform 140ms var(--wh-easing-standard); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__details[hidden] { display: none; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__details[data-wh-state="closing"] { opacity: 0; transform: translateY(-4px); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__details p { margin: 0 0 var(--wh-space-3); color: var(--wh-color-text-secondary); font-size: var(--wh-font-size-xs); line-height: 1.65; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__progress { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; overflow: hidden; background: color-mix(in srgb, var(--wh-toast-tone) 14%, transparent); }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast__progress-bar { display: block; inline-size: 100%; block-size: 100%; background: var(--wh-toast-tone); transform-origin: inline-start center; }
html:is([data-wast-ui], [data-wh-shell]) .wh-toast[data-wh-state="closing"] { opacity: 0; transform: translateX(-10px) scale(.98); transition: opacity 170ms var(--wh-easing-standard), transform 170ms var(--wh-easing-standard); }
@keyframes wh-toast-enter { from { opacity: 0; transform: translateX(-16px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes wh-toast-details-in { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 30rem) { html:is([data-wast-ui], [data-wh-shell]) .wh-toast-region { left: var(--wh-space-3); right: var(--wh-space-3); width: auto; } html:is([data-wast-ui], [data-wh-shell]) .wh-toast { grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--wh-space-2); } html:is([data-wast-ui], [data-wh-shell]) .wh-toast__icon { inline-size: 2.25rem; block-size: 2.25rem; } @keyframes wh-toast-enter { from { opacity: 0; transform: translateX(-8px) scale(.99); } } html:is([data-wast-ui], [data-wh-shell]) .wh-toast[data-wh-state="closing"] { transform: translateX(-6px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { html:is([data-wast-ui], [data-wh-shell]) .wh-toast { animation: none; } html:is([data-wast-ui], [data-wh-shell]) .wh-toast[data-wh-state="closing"], html:is([data-wast-ui], [data-wh-shell]) .wh-toast__details { transition: none; transform: none; animation: none; } html:is([data-wast-ui], [data-wh-shell]) .wh-toast__progress-bar { visibility: hidden; } }
@media (max-width: 64rem) { html:is([data-wast-ui], [data-wh-shell])[data-wh-nav-open="true"] .wh-toast-region { visibility: hidden; } }
html:is([data-wast-ui], [data-wh-shell]) .wh-spinner { display: inline-block; inline-size: 1.25rem; block-size: 1.25rem; border: var(--wh-border-width-strong) solid currentColor; border-inline-end-color: transparent; border-radius: var(--wh-radius-full); animation: wh-spin var(--wh-duration-slow) linear infinite; }
html:is([data-wast-ui], [data-wh-shell]) .wh-spinner[data-wh-size="large"] { inline-size: 2rem; block-size: 2rem; }
html:is([data-wast-ui], [data-wh-shell]) .wh-progress { inline-size: 100%; block-size: var(--wh-space-2); overflow: hidden; background: var(--wh-color-surface-subtle); border-radius: var(--wh-radius-full); }
html:is([data-wast-ui], [data-wh-shell]) .wh-progress__bar { block-size: 100%; inline-size: var(--wh-progress-value, 0%); background: var(--wh-color-action-primary); border-radius: inherit; transition: inline-size var(--wh-duration-normal) var(--wh-easing-standard); }
html:is([data-wast-ui], [data-wh-shell]) .wh-progress__bar[data-wh-value="64"] { --wh-progress-value: 64%; }
html:is([data-wast-ui], [data-wh-shell]) .wh-progress[data-wh-state="indeterminate"] .wh-progress__bar { inline-size: 35%; animation: wh-progress 1.2s var(--wh-easing-standard) infinite; }

/* Navigation and interaction */
html:is([data-wast-ui], [data-wh-shell]) .wh-tabs { min-inline-size: 0; }
html:is([data-wast-ui], [data-wh-shell]) .wh-tab-list { display: flex; gap: var(--wh-space-1); overflow-x: auto; border-block-end: var(--wh-border-width-default) solid var(--wh-color-border-default); scrollbar-width: thin; }
html:is([data-wast-ui], [data-wh-shell]) .wh-tab { flex: 0 0 auto; min-block-size: var(--wh-control-height); padding: var(--wh-space-2) var(--wh-space-3); color: var(--wh-color-text-secondary); background: transparent; border: 0; border-block-end: var(--wh-border-width-strong) solid transparent; font: inherit; font-weight: var(--wh-font-weight-semibold); cursor: pointer; }
html:is([data-wast-ui], [data-wh-shell]) .wh-tab:hover { color: var(--wh-color-text-primary); background: var(--wh-component-control-hover); }
html:is([data-wast-ui], [data-wh-shell]) .wh-tab[aria-selected="true"],
html:is([data-wast-ui], [data-wh-shell]) .wh-tab[data-wh-state="selected"] { color: var(--wh-color-action-primary); border-block-end-color: var(--wh-color-action-primary); }
html:is([data-wast-ui], [data-wh-shell]) .wh-tab-panel { padding-block: var(--wh-space-4); }
html:is([data-wast-ui], [data-wh-shell]) .wh-tab-panel[hidden] { display: none; }
html:is([data-wast-ui], [data-wh-shell]) .wh-filter-chip { min-block-size: var(--wh-control-height-compact); padding: var(--wh-space-1) var(--wh-space-3); color: var(--wh-color-text-secondary); background: var(--wh-component-control-bg); border: var(--wh-border-width-default) solid var(--wh-color-border-strong); font: inherit; font-size: var(--wh-font-size-sm); cursor: pointer; }
html:is([data-wast-ui], [data-wh-shell]) .wh-filter-chip[aria-pressed="true"],
html:is([data-wast-ui], [data-wh-shell]) .wh-filter-chip[data-wh-state="selected"] { color: var(--wh-color-action-primary); background: var(--wh-color-action-primary-subtle); border-color: var(--wh-color-action-primary); }
html:is([data-wast-ui], [data-wh-shell]) .wh-tooltip { position: fixed; z-index: var(--wh-z-tooltip); max-inline-size: 18rem; padding: var(--wh-space-1) var(--wh-space-2); color: var(--wh-color-neutral-0); background: var(--wh-color-neutral-900); border-radius: var(--wh-radius-sm); font-size: var(--wh-font-size-xs); line-height: var(--wh-line-height-body); pointer-events: none; }
html:is([data-wast-ui], [data-wh-shell]) .wh-dropdown { position: relative; display: inline-block; }
html:is([data-wast-ui], [data-wh-shell]) .wh-dropdown-menu { position: absolute; z-index: var(--wh-z-dropdown); inset-block-start: calc(100% + var(--wh-space-1)); inset-inline-end: 0; display: none; min-inline-size: 12rem; max-inline-size: min(22rem, calc(100vw - var(--wh-space-8))); padding: var(--wh-space-1); background: var(--wh-color-surface-elevated); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: var(--wh-radius-lg); box-shadow: var(--wh-elevation-3); }
html:is([data-wast-ui], [data-wh-shell]) .wh-dropdown[data-wh-state="open"] > .wh-dropdown-menu { display: grid; }
html:is([data-wast-ui], [data-wh-shell]) .wh-dropdown-item { display: flex; align-items: center; gap: var(--wh-space-2); inline-size: 100%; min-block-size: var(--wh-control-height-compact); padding: var(--wh-space-2) var(--wh-space-3); color: var(--wh-color-text-primary); background: transparent; border: 0; border-radius: var(--wh-radius-md); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
html:is([data-wast-ui], [data-wh-shell]) .wh-dropdown-item:hover,
html:is([data-wast-ui], [data-wh-shell]) .wh-dropdown-item:focus-visible { background: var(--wh-component-control-hover); }
html:is([data-wast-ui], [data-wh-shell]) .wh-dropdown-item[data-wh-tone="negative"] { color: var(--wh-color-status-negative); }

/* Data states */
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-empty-state, .wh-loading-state, .wh-error-state) { display: grid; justify-items: center; gap: var(--wh-space-3); padding: var(--wh-space-8) var(--wh-space-4); color: var(--wh-color-text-secondary); text-align: center; background: var(--wh-color-surface-card); border: var(--wh-border-width-default) dashed var(--wh-color-border-strong); border-radius: var(--wh-radius-xl); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-empty-state, .wh-loading-state, .wh-error-state) h3 { margin: 0; color: var(--wh-color-text-primary); font-size: var(--wh-font-size-xl); }
html:is([data-wast-ui], [data-wh-shell]) :where(.wh-empty-state, .wh-loading-state, .wh-error-state) p { max-inline-size: 38rem; margin: 0; }
html:is([data-wast-ui], [data-wh-shell]) .wh-error-state { border-color: var(--wh-color-border-error); }

/* Overlay contracts */
html:is([data-wast-ui], [data-wh-shell]) .wh-modal { position: fixed; z-index: var(--wh-z-modal); inset: 0; display: none; place-items: center; padding: var(--wh-space-4); background: var(--wh-component-backdrop); }
html:is([data-wast-ui], [data-wh-shell]) .wh-modal[data-wh-state="open"] { display: grid; }
html:is([data-wast-ui], [data-wh-shell]) .wh-modal__dialog { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; inline-size: min(100%, var(--wh-component-max-dialog)); max-block-size: min(90vh, 48rem); overflow: hidden; color: var(--wh-color-text-primary); background: var(--wh-color-surface-elevated); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: var(--wh-radius-xl); box-shadow: var(--wh-elevation-4); }
html:is([data-wast-ui], [data-wh-shell]) .wh-modal[data-wh-size="wide"] .wh-modal__dialog { inline-size: min(100%, var(--wh-component-max-dialog-wide)); }
html:is([data-wast-ui], [data-wh-shell]) .wh-modal__header,
html:is([data-wast-ui], [data-wh-shell]) .wh-modal__footer { display: flex; align-items: center; gap: var(--wh-space-3); padding: var(--wh-space-4); }
html:is([data-wast-ui], [data-wh-shell]) .wh-modal__header { justify-content: space-between; border-block-end: var(--wh-border-width-default) solid var(--wh-color-border-default); }
html:is([data-wast-ui], [data-wh-shell]) .wh-modal__title { margin: 0; font-size: var(--wh-font-size-xl); }
html:is([data-wast-ui], [data-wh-shell]) .wh-modal__body { overflow: auto; padding: var(--wh-space-4); }
html:is([data-wast-ui], [data-wh-shell]) .wh-modal__footer { justify-content: flex-end; flex-wrap: wrap; border-block-start: var(--wh-border-width-default) solid var(--wh-color-border-default); }
html:is([data-wast-ui], [data-wh-shell])[data-wh-scroll-lock="true"] { overflow: hidden; }

@keyframes wh-spin { to { transform: rotate(1turn); } }
@keyframes wh-progress { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
html:is([data-wast-ui], [data-wh-shell])[dir="rtl"] .wh-progress[data-wh-state="indeterminate"] .wh-progress__bar { animation-direction: reverse; }

@media (max-width: 30rem) {
  html:is([data-wast-ui], [data-wh-shell]) .wh-modal { padding: var(--wh-space-2); align-items: end; }
  html:is([data-wast-ui], [data-wh-shell]) .wh-modal__dialog { inline-size: 100%; max-block-size: 94vh; border-end-start-radius: 0; border-end-end-radius: 0; }
  html:is([data-wast-ui], [data-wh-shell]) .wh-modal__footer > .wh-btn { flex: 1 1 auto; }
  html:is([data-wast-ui], [data-wh-shell]) .wh-btn-group { max-inline-size: 100%; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html:is([data-wast-ui], [data-wh-shell]) :where(.wh-spinner, .wh-progress__bar) { animation-duration: 1ms; animation-iteration-count: 1; }
}