/* ============================================================
   SMARTC&S utilities — opt-in classes for hover/focus states
   that Python inline styles can't express. Inert unless a
   component adds the class (so DORMANT for legacy pages).
   ============================================================ */

/* ---- buttons (ui.button) ---- */
.ds-btn { transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast), transform var(--dur-fast); }
.ds-btn:active { transform: translateY(0.5px); }
.ds-btn--primary:hover   { background: var(--blue-600) !important; }
.ds-btn--secondary:hover { background: var(--ink-50) !important; }
.ds-btn--ghost:hover     { background: var(--blue-50) !important; }
.ds-btn--danger:hover    { background: var(--crit-600) !important; }
.ds-btn:disabled, .ds-btn[disabled] { background: var(--ink-100) !important; color: var(--fg4) !important; border-color: transparent !important; cursor: not-allowed; box-shadow: none !important; }

/* ---- nav items (sidebar) ---- */
.nav-item { transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast); }
.nav-item:hover { background: var(--ink-50); }
.nav-item.is-active { background: var(--blue-50); color: var(--blue-700); font-weight: var(--fw-semibold); }
.nav-item.is-active .nav-ico { color: var(--blue-600); }
.nav-logout:hover { background: var(--crit-50); }

/* ---- inputs / selects (ui.controls) ---- */
.ds-input, .ds-select .Select-control, .ds-textarea {
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ds-input:focus, .ds-textarea:focus {
  outline: none;
  border-color: var(--blue-500) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--fg4); }

/* ---- search field ---- */
.ds-search { transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.ds-search:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--focus-ring); }
.ds-search input { border: none; outline: none; background: transparent; width: 100%; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg1); }

/* ---- card / row hover ---- */
.ds-row-link { cursor: pointer; transition: background var(--dur-fast); }
.ds-row-link:hover { background: var(--ink-50); }

/* ---- segmented control ---- */
.ds-seg { transition: background var(--dur-fast), color var(--dur-fast); }
.ds-seg:hover { background: var(--ink-50); }
.ds-seg.is-active { background: var(--white); color: var(--blue-700); box-shadow: var(--shadow-xs); }