/* Copied from the design playground (branch claude/modest-shtern-f64ddd @ 887b161, assets/webui/css/interactions.css) for the release backend's portal and admin panel (D-144), WITHOUT the bot's own Start / Pause / Stop button rules (.btn.cta / .btn.halt): the web pages have no such buttons. Do not edit here: changes go to the design branch and are copied again. */
/* Interaction layer (owner 2026-10-22: "buttons like Figma", reference
   C:\altis-studio\design\referenzen\figma-buttons-analyse.md). One change per state,
   180 ms ease-out, hover only with a real pointer (no stuck hover on touch). */

:root { --t-ui: 180ms; --ease-ui: cubic-bezier(.2, .8, .2, 1); }

.btn { transition: background var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui), transform 120ms var(--ease-ui); }

/* action buttons: the label steps aside and an arrow fades in; the width never changes */
.btn.go { position: relative; padding-right: 22px; }
.btn.go .go-text { transition: transform var(--t-ui) var(--ease-ui); }
.btn.go .go-arrow { position: absolute; right: 9px; top: 50%; width: 14px; height: 14px; margin-top: -7px; opacity: 0; transform: translateX(-4px);
  transition: opacity var(--t-ui) var(--ease-ui), transform var(--t-ui) var(--ease-ui); }
.btn.go .go-arrow svg { width: 14px; height: 14px; }

/* the rail: a pill forms around the item, the icon wakes up */
.nav { position: relative; isolation: isolate; transition: color var(--t-ui) var(--ease-ui); }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .05);
  opacity: 0; transform: scale(.94); transition: opacity var(--t-ui) var(--ease-ui), transform var(--t-ui) var(--ease-ui); }
.nav[aria-current="page"]::before { opacity: 0; }
.nav svg { transition: color var(--t-ui) var(--ease-ui), transform var(--t-ui) var(--ease-ui); }
.nav span:first-of-type { transition: transform var(--t-ui) var(--ease-ui); }

/* segmented controls and filter pills: an 8 % surface fades in under the pointer */
.seg button::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: rgba(255, 255, 255, .06); opacity: 0;
  transition: opacity var(--t-ui) var(--ease-ui); }
.seg button[aria-pressed="true"]::before { display: none; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: rgba(255, 255, 255, .3); }               /* secondary: only the ring darkens */
  .btn.primary:hover { background: rgba(255, 255, 255, .86); }        /* primary: only the fill changes */
  .btn.ghost:hover { background: var(--raised-3); color: var(--ink); border-color: transparent; }
  .btn.go:hover .go-text { transform: translateX(-6px); }
  .btn.go:hover .go-arrow { opacity: 1; transform: none; }
  .nav:hover { color: var(--ink); }
  .nav:hover::before { opacity: 1; transform: none; }
  .nav:hover svg { color: var(--ink); transform: translateX(1px); }
  .nav:hover span:first-of-type { transform: translateX(2px); }
  .nav[aria-current="page"]:hover svg { color: var(--accent-hover); }
  .seg button:hover::before { opacity: 1; }
  .filter:hover { color: var(--ink-2); border-color: rgba(255, 255, 255, .3); }
  .menu-item:hover { background: var(--raised-4); }
  .table tr:hover td { background: rgba(255, 255, 255, .02); }
  .next-item:hover { background: rgba(255, 255, 255, .025); }
}