/* Product-wide primitives. Surface-specific typography and brand values live with each surface. */
:root {
  --ylph-control-radius: 0.5rem;
  --ylph-focus-colour: #243943;
  --ylph-selected-bg: #364d59;
  --ylph-selected-text: #fff;
  --ylph-action-padding-x: 0.85rem;
  --ylph-action-padding-y: 0.5rem;
  --ylph-action-icon-size: 0.9em;
  --ylph-action-icon-gap: 0.5rem;
  --ylph-validation-border: #d97706;
  --ylph-validation-bg: #fffbeb;
  --ylph-validation-text: #92400e;
  --ylph-validation-focus-ring: rgb(217 119 6 / 20%);
  --elx-ui-validation-danger: var(--ylph-validation-border);
  --elx-ui-validation-focus-ring: var(--ylph-validation-focus-ring);
  --elx-ui-validation-border: #ead9b8;
  --elx-ui-validation-accent: var(--ylph-validation-border);
  --elx-ui-validation-text: #65350f;
  --elx-ui-validation-bg: #fffdf7;
  --elx-ui-validation-control-bg: var(--ylph-validation-bg);
  --elx-ui-validation-focus-border: var(--ylph-validation-text);
  --ylph-action-neutral-bg: #42636b;
  --ylph-action-neutral-text: #fff;
  --ylph-action-neutral-border: #42636b;
  --ylph-action-neutral-hover-bg: #344f56;
  --ylph-action-neutral-active-bg: #283f45;
  --ylph-action-neutral-divider: rgb(255 255 255 / 32%);
  --ylph-action-danger-bg: #b42318;
  --ylph-action-danger-text: #fff;
  --ylph-action-danger-hover-bg: #912018;
  --ylph-action-danger-active-bg: #7a1b15;
  --ylph-action-positive-bg: #166534;
  --ylph-action-positive-text: #fff;
  --ylph-action-positive-hover-bg: #14532d;
  --ylph-action-positive-active-bg: #104124;
  --ylph-status-neutral-bg: #e9eef5;
  --ylph-status-neutral-text: #243943;
  --ylph-status-success-bg: #dcfce7;
  --ylph-status-success-text: #14532d;
  --ylph-status-warning-bg: #fef3c7;
  --ylph-status-warning-text: #713f12;
  --ylph-status-danger-bg: #fee2e2;
  --ylph-status-danger-text: #7a1b15;
}

/*
 * Shared public layer scale. Keep above public header/nav chrome.
 * Invariant: container overlays (surface) sit below interactive floating UI (select, menu, popover).
 */
:root {
  --ylph-layer-overlay-host: 100002;
  --ylph-layer-surface: 100003;
  --ylph-layer-select: 100006;
  --ylph-layer-popover: 100008;
  --ylph-layer-menu: 100010;
  --ylph-layer-tooltip: 100012;
  --ylph-layer-toast: 100020;
}

/* Shared rich HTML snippets (admin previews + public equipment descriptions) */
.ylph-rich-content {
  line-height: 1.6;
  color: inherit;
  word-break: break-word;
}

.ylph-rich-content p {
  margin: 0 0 1rem;
}

.ylph-rich-content ul,
.ylph-rich-content ol {
  margin: 0 0 1rem 1.25rem;
  padding: 0;
}

.ylph-rich-content h2,
.ylph-rich-content h3 {
  margin: 1rem 0 0.5rem;
  line-height: 1.25;
}

.ylph-rich-content a {
  color: var(--bs-link-color, #174e84);
  text-decoration: underline;
}

.ylph-rich-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
  display: block;
  margin: 0.75rem 0;
}

/*--------------------------------------------------------------
# Managed overlay host (SearchableSelect, PopoverIcon, ExpandoToggle, ManagedCoverSurface)
# Layer order: surface (containers) < select/menu/popover (interactive) < tooltip < toast
--------------------------------------------------------------*/
/* The overlay shell (host element, positioning, visibility, and z-index layering)
   now lives in the shared Elixir.Web.UI package (OverlayHost.razor.css). YLPH only
   maps its own layer tokens onto the package CSS variables; app-specific surface
   styling stays below. */
.elx-ui-overlay-host {
  --elx-ui-layer-overlay-host: var(--ylph-layer-overlay-host);
  --elx-ui-layer-surface: var(--ylph-layer-surface);
  --elx-ui-layer-select: var(--ylph-layer-select);
  --elx-ui-layer-popover: var(--ylph-layer-popover);
  --elx-ui-layer-menu: var(--ylph-layer-menu);
  --elx-ui-layer-tooltip: var(--ylph-layer-tooltip);
}

/* BusyCover / SearchableSelect / MenuButton / PopoverIcon overlay surfaces ship
   from Elixir.Web.UI (_content/Elixir.Web.UI/css/busy-cover.css,
   searchable-select.css, menu.css, and popover-icon.css). */
/* BusyCover is deliberately opt-in at application boundaries. The overlay itself
   is portalled, but variables cascade from its supplied cover class. Keeping the
   idle minimum at zero avoids inventing whitespace in ordinary forms. */
.ylph-busy-region.elx-ui-busy-cover-region {
  --elx-ui-busy-cover-region-min-block-size: 0;
  min-inline-size: 0;
}

.ylph-busy-cover.elx-ui-busy-cover {
  --elx-ui-busy-cover-offset: 1rem;
  --elx-ui-busy-cover-accent: var(--ylph-action-neutral-bg);
  --elx-ui-busy-cover-text: #243943;
  --elx-ui-busy-cover-muted-text: #455e6a;
  --elx-ui-busy-cover-surface: rgb(244 247 248 / 88%);
  --elx-ui-busy-cover-card-surface: rgb(255 255 255 / 96%);
  --elx-ui-busy-cover-border: rgb(36 57 67 / 18%);
}

.ylph-busy-cover .elx-ui-busy-cover__content {
  border-radius: 0.65rem;
  box-shadow: 0 0.25rem 0.85rem rgba(21, 43, 53, 0.14);
  font-weight: 600;
}

.ylph-busy-cover .elx-ui-busy-cover__spinner {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.ylph-busy-cover--compact.elx-ui-busy-cover {
  --elx-ui-busy-cover-offset: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .ylph-busy-cover.elx-ui-busy-cover {
    backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  .ylph-busy-cover.elx-ui-busy-cover {
    --elx-ui-busy-cover-surface: Canvas;
    --elx-ui-busy-cover-card-surface: Canvas;
    --elx-ui-busy-cover-border: CanvasText;
    --elx-ui-busy-cover-text: CanvasText;
    --elx-ui-busy-cover-muted-text: CanvasText;
    --elx-ui-busy-cover-accent: Highlight;
  }
}
@media (prefers-reduced-motion: reduce) {
  .elx-ui-popover-icon-overlay {
    transition: none;
    transform: none;
  }
  .elx-ui-overlay--visible.elx-ui-popover-icon-overlay {
    transform: none;
  }
}
:is(.form-control, .form-select, .form-check-input, [role=combobox], [contenteditable=true]):is(.invalid, [aria-invalid=true]) {
  border-color: var(--ylph-validation-border);
  background-color: var(--ylph-validation-bg);
  scroll-margin-block: 5rem 3.5rem;
}

:is(.form-control, .form-select, .form-check-input, [role=combobox], [contenteditable=true]):is(.invalid, [aria-invalid=true]):focus {
  border-color: var(--ylph-validation-text);
  outline-color: var(--ylph-validation-text);
  box-shadow: 0 0 0 0.2rem var(--ylph-validation-focus-ring);
}

@media (forced-colors: active) {
  :is(.form-control, .form-select, .form-check-input, [role=combobox], [contenteditable=true]):is(.invalid, [aria-invalid=true]) {
    border-style: dashed;
  }
}
.ylph-action[aria-invalid=true] {
  outline: 2px solid var(--ylph-validation-border);
  outline-offset: 2px;
  scroll-margin-block: 5rem 3.5rem;
}

.ylph-action[aria-invalid=true]:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--ylph-validation-focus-ring);
}

/* Semantic action primitives. Each surface supplies its own primary role values. */
/* Keep geometry overridable by component layouts; roles and states stay shared. */
:where(body.admin-root, body.public-site) .btn.ylph-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ylph-action-icon-gap);
  min-block-size: var(--ylph-control-height);
  padding: var(--ylph-action-padding-y) var(--ylph-action-padding-x);
  border-radius: var(--ylph-control-radius);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  --bs-btn-focus-box-shadow: none;
}

:is(body.admin-root, body.public-site) .btn.ylph-action > .bi,
:is(body.admin-root, body.public-site) .btn.ylph-action > [aria-hidden=true] {
  flex: 0 0 auto;
  line-height: 1;
}

/* Glyph size follows the label; the control's gap is the sole icon/text spacing. */
:is(body.admin-root, body.public-site) .btn.ylph-action > .bi,
:is(body.admin-root, body.public-site) .ylph-action-menu :is(.elx-ui-action-menu-button__default, .elx-ui-action-menu-button__solo-trigger) > .bi,
:is(body.admin-root, body.public-site) .elx-ui-expando-toggle__option > .bi[aria-hidden=true] {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 1em;
  block-size: 1em;
  margin: 0;
  font-size: var(--ylph-action-icon-size);
  line-height: 1;
}

:is(body.admin-root, body.public-site) .ylph-action-menu .elx-ui-action-menu-button__chevron-icon {
  flex: 0 0 auto;
  inline-size: var(--ylph-action-icon-size);
  block-size: var(--ylph-action-icon-size);
}

:is(body.admin-root, body.public-site) .btn.ylph-action--primary {
  --bs-btn-color: var(--ylph-action-primary-text);
  --bs-btn-bg: var(--ylph-action-primary-bg);
  --bs-btn-border-color: var(--ylph-action-primary-border, var(--ylph-action-primary-bg));
  --bs-btn-hover-color: var(--ylph-action-primary-text);
  --bs-btn-hover-bg: var(--ylph-action-primary-hover-bg);
  --bs-btn-hover-border-color: var(--ylph-action-primary-hover-bg);
  --bs-btn-active-color: var(--ylph-action-primary-text);
  --bs-btn-active-bg: var(--ylph-action-primary-active-bg);
  --bs-btn-active-border-color: var(--ylph-action-primary-active-bg);
  --bs-btn-disabled-color: var(--ylph-action-primary-text);
  --bs-btn-disabled-bg: var(--ylph-action-primary-bg);
  --bs-btn-disabled-border-color: var(--ylph-action-primary-border, var(--ylph-action-primary-bg));
}

:is(body.admin-root, body.public-site) .btn.ylph-action--neutral {
  --bs-btn-color: var(--ylph-action-neutral-text);
  --bs-btn-bg: var(--ylph-action-neutral-bg);
  --bs-btn-border-color: var(--ylph-action-neutral-border, var(--ylph-action-neutral-bg));
  --bs-btn-hover-color: var(--ylph-action-neutral-text);
  --bs-btn-hover-bg: var(--ylph-action-neutral-hover-bg);
  --bs-btn-hover-border-color: var(--ylph-action-neutral-hover-bg);
  --bs-btn-active-color: var(--ylph-action-neutral-text);
  --bs-btn-active-bg: var(--ylph-action-neutral-active-bg);
  --bs-btn-active-border-color: var(--ylph-action-neutral-active-bg);
  --bs-btn-disabled-color: var(--ylph-action-neutral-text);
  --bs-btn-disabled-bg: var(--ylph-action-neutral-bg);
  --bs-btn-disabled-border-color: var(--ylph-action-neutral-border, var(--ylph-action-neutral-bg));
}

:is(body.admin-root, body.public-site) .btn.ylph-action--danger {
  --bs-btn-color: var(--ylph-action-danger-text);
  --bs-btn-bg: var(--ylph-action-danger-bg);
  --bs-btn-border-color: var(--ylph-action-danger-border, var(--ylph-action-danger-bg));
  --bs-btn-hover-color: var(--ylph-action-danger-text);
  --bs-btn-hover-bg: var(--ylph-action-danger-hover-bg);
  --bs-btn-hover-border-color: var(--ylph-action-danger-hover-bg);
  --bs-btn-active-color: var(--ylph-action-danger-text);
  --bs-btn-active-bg: var(--ylph-action-danger-active-bg);
  --bs-btn-active-border-color: var(--ylph-action-danger-active-bg);
  --bs-btn-disabled-color: var(--ylph-action-danger-text);
  --bs-btn-disabled-bg: var(--ylph-action-danger-bg);
  --bs-btn-disabled-border-color: var(--ylph-action-danger-border, var(--ylph-action-danger-bg));
}

:is(body.admin-root, body.public-site) .btn.ylph-action--positive {
  --bs-btn-color: var(--ylph-action-positive-text);
  --bs-btn-bg: var(--ylph-action-positive-bg);
  --bs-btn-border-color: var(--ylph-action-positive-border, var(--ylph-action-positive-bg));
  --bs-btn-hover-color: var(--ylph-action-positive-text);
  --bs-btn-hover-bg: var(--ylph-action-positive-hover-bg);
  --bs-btn-hover-border-color: var(--ylph-action-positive-hover-bg);
  --bs-btn-active-color: var(--ylph-action-positive-text);
  --bs-btn-active-bg: var(--ylph-action-positive-active-bg);
  --bs-btn-active-border-color: var(--ylph-action-positive-active-bg);
  --bs-btn-disabled-color: var(--ylph-action-positive-text);
  --bs-btn-disabled-bg: var(--ylph-action-positive-bg);
  --bs-btn-disabled-border-color: var(--ylph-action-positive-border, var(--ylph-action-positive-bg));
}

:is(body.admin-root, body.public-site) .btn.ylph-action:focus-visible {
  outline: 2px solid var(--ylph-focus-colour);
  outline-offset: 3px;
}

:is(body.admin-root, body.public-site) .btn.ylph-action--compact {
  min-block-size: 2rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.875rem;
}

body.public-site .btn.ylph-action--compact {
  min-block-size: var(--ylph-control-height);
}

:is(body.admin-root, body.public-site) .ylph-action-menu {
  --elx-ui-action-menu-surface: var(--ylph-action-neutral-bg);
  --elx-ui-action-menu-text: var(--ylph-action-neutral-text);
  --elx-ui-action-menu-border: var(--ylph-action-neutral-border);
  --elx-ui-action-menu-hover-surface: var(--ylph-action-neutral-hover-bg);
  --elx-ui-action-menu-focus: var(--ylph-focus-colour);
  --elx-ui-action-menu-radius: var(--ylph-control-radius);
  --elx-ui-action-menu-min-height: var(--ylph-control-height);
  --elx-ui-action-menu-padding-x: var(--ylph-action-padding-x);
  --elx-ui-action-menu-padding-y: var(--ylph-action-padding-y);
  --elx-ui-action-menu-default-gap: var(--ylph-action-icon-gap);
  --elx-ui-action-menu-solo-gap: var(--ylph-action-icon-gap);
  --elx-ui-action-menu-chevron-min-width: var(--ylph-control-height);
  --elx-ui-action-menu-divider: var(--ylph-action-neutral-divider);
  font-weight: 600;
}

@media (pointer: coarse) {
  :is(body.admin-root, body.public-site) .btn.ylph-action {
    min-block-size: 2.75rem;
  }
  :is(body.admin-root, body.public-site) .ylph-action-menu {
    --elx-ui-action-menu-min-height: 2.75rem;
    --elx-ui-action-menu-chevron-min-width: 2.75rem;
  }
}
@media (forced-colors: active) {
  :is(body.admin-root, body.public-site) .btn.ylph-action:focus-visible {
    outline-color: Highlight;
  }
}
/* Reusable, high-contrast state labels. Feature styles may opt into role modifiers. */
.ylph-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}

.ylph-status--neutral {
  color: var(--ylph-status-neutral-text);
  background: var(--ylph-status-neutral-bg);
}

.ylph-status--success {
  color: var(--ylph-status-success-text);
  background: var(--ylph-status-success-bg);
}

.ylph-status--warning {
  color: var(--ylph-status-warning-text);
  background: var(--ylph-status-warning-bg);
}

.ylph-status--danger {
  color: var(--ylph-status-danger-text);
  background: var(--ylph-status-danger-bg);
}

.circuit-failure {
  display: none;
  position: fixed;
  inset: auto 0 0;
  z-index: 13000;
  padding: 1rem;
  background: #fff4ce;
  color: #29251a;
  border-top: 1px solid #b99c44;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1333333333);
}
.circuit-failure__reload {
  margin-left: 1rem;
  color: #174e84;
  font-weight: 600;
}
.circuit-failure__dialog-recovery {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.75rem;
  background: #fff4ce;
  color: #29251a;
  border: 1px solid #b99c44;
  border-radius: 0.25rem;
}
.circuit-failure__dialog-recovery-reload {
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: #174e84;
  font-weight: 600;
  text-decoration: underline;
}