/* KARETA r293 — unified UI states
   Contract: visual states are shared across old page-specific classes without changing JS logic. */

:root {
  --state-active-bg: color-mix(in srgb, var(--orange, #ff6b00) 12%, transparent);
  --state-active-border: color-mix(in srgb, var(--orange, #ff6b00) 42%, var(--line, rgba(148,163,184,.24)));
  --state-active-color: var(--orange, #ff6b00);
  --state-selected-bg: color-mix(in srgb, var(--orange, #ff6b00) 14%, transparent);
  --state-success-bg: color-mix(in srgb, var(--green, #22c55e) 13%, transparent);
  --state-success-border: color-mix(in srgb, var(--green, #22c55e) 40%, var(--line, rgba(148,163,184,.24)));
  --state-success-color: var(--green, #22c55e);
  --state-danger-bg: color-mix(in srgb, #ef4444 12%, transparent);
  --state-danger-border: color-mix(in srgb, #ef4444 40%, var(--line, rgba(148,163,184,.24)));
  --state-danger-color: #ef4444;
  --state-muted-opacity: .62;
  --state-disabled-opacity: .48;
  --state-focus-ring: 0 0 0 3px color-mix(in srgb, var(--orange, #ff6b00) 22%, transparent);
}

/* Base interactive state */
.ui-state-active,
.is-active,
.active:not(.page):not(.cab-pane):not(.ptbl):not(.auth-step),
[aria-current="page"],
[aria-selected="true"] {
  border-color: var(--state-active-border);
}

.ui-state-selected,
.is-selected,
.selected,
.mo-filter.active,
.parts-cat.active,
.odet-master-chip.active,
.odet-status-btn.active,
.odet-st-btn.active,
.rv-star-btn.active {
  background: var(--state-selected-bg);
  border-color: var(--state-active-border);
  color: var(--state-active-color);
}

.ui-state-current,
.is-current,
.current {
  border-color: var(--state-active-border);
  color: var(--state-active-color);
}

/* Disabled / muted */
.ui-state-disabled,
.is-disabled,
.disabled,
[disabled],
[aria-disabled="true"] {
  opacity: var(--state-disabled-opacity);
  pointer-events: none;
  cursor: not-allowed;
  filter: saturate(.72);
}

.ui-state-muted,
.is-muted,
.muted {
  opacity: var(--state-muted-opacity);
}

/* Loading */
.ui-state-loading,
.is-loading,
.loading,
[aria-busy="true"] {
  position: relative;
  pointer-events: none;
  cursor: progress;
}

.ui-state-loading::after,
.is-loading::after,
.loading::after,
[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: kareta-state-sheen 1.25s linear infinite;
  pointer-events: none;
}

@keyframes kareta-state-sheen {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* Empty / error blocks */
.ui-state-empty,
.is-empty,
.empty-state,
.mo-empty,
.masters-empty,
.parts-empty,
.msng-empty-cta.card,
.news-empty,
.news-empty-state {
  border-radius: var(--ui-radius-card);
  border: 1px dashed color-mix(in srgb, var(--line, rgba(148,163,184,.24)) 82%, transparent);
  background: color-mix(in srgb, var(--surface, #111827) 84%, transparent);
}

.ui-state-error,
.is-error,
.error,
.has-error {
  border-color: var(--state-danger-border) !important;
  background: var(--state-danger-bg);
  color: var(--state-danger-color);
}

/* New / unread / success */
.ui-state-new,
.is-new,
.new,
.unread,
.msng-item--unread,
.notif-item.unread {
  border-color: var(--state-active-border);
  background: color-mix(in srgb, var(--orange, #ff6b00) 7%, var(--surface, #111827));
}

.ui-state-done,
.is-done,
.done,
.success,
.is-success {
  border-color: var(--state-success-border);
  color: var(--state-success-color);
}

.ui-state-danger,
.is-danger,
.danger,
.btn-danger {
  border-color: var(--state-danger-border);
  color: var(--state-danger-color);
}

/* Focus: visible only for keyboard/navigation, not noisy after mouse/touch. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.catalog-tool-btn:focus-visible,
.mo-action-btn:focus-visible,
.msng-action-btn:focus-visible {
  outline: 0;
  box-shadow: var(--state-focus-ring);
}

/* Keep active navigation stable: state must not change element size. */
.nav-link.active,
.bnav-item.active,
.drawer-link.active,
.cab-tab.active,
.ptab.active,
.mprof-tab.active {
  min-width: 0;
  transform: none;
}

/* Timeline/status compatibility */
.mo-tl-dot.done,
.odet-tl-item.done .odet-tl-dot,
.owiz-step.done .owiz-step-dot {
  border-color: var(--state-success-border);
  background: var(--state-success-bg);
}

.mo-status-badge.done,
.hist-badge.done,
.odet-tl-item.done .odet-tl-label,
.owiz-step.done .owiz-step-label {
  color: var(--state-success-color);
}

@media (prefers-reduced-motion: reduce) {
  .ui-state-loading::after,
  .is-loading::after,
  .loading::after,
  [aria-busy="true"]::after {
    animation: none;
  }
}