/* Approved fine-sheen treatment: visual states only, with no layout changes. */
:root {
  --fine-sheen-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --fine-sheen-focus: #1677dd;
}

/* The decorative layer moves; its button, text and hit area stay fixed. */
:is(
  #agent-login-form > button[type="submit"],
  #bet-button,
  #bet-confirm-submit,
  #jackpot-save-button,
  #refresh-jackpot-report,
  #dashboard-view-results,
  #refresh-dashboard
) {
  position: relative;
  overflow: hidden;
  transform: none;
  transition: background-color 160ms var(--fine-sheen-ease),
    border-color 160ms var(--fine-sheen-ease),
    box-shadow 160ms var(--fine-sheen-ease), filter 100ms ease-out;
}

:is(
  #agent-login-form > button[type="submit"],
  #bet-button,
  #bet-confirm-submit,
  #jackpot-save-button,
  #refresh-jackpot-report,
  #dashboard-view-results,
  #refresh-dashboard
)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.08) 42%,
    rgba(255, 255, 255, 0.26) 50%, rgba(255, 255, 255, 0.08) 58%, transparent 70%);
  opacity: 0;
  transform: translateX(-110%);
  pointer-events: none;
}

@keyframes fine-sheen-pass {
  0% { opacity: 0; transform: translateX(-110%); }
  20% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(110%); }
}

/* One pass per pointer entry. Touch devices do not retain a hover animation. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(
    #agent-login-form > button[type="submit"],
    #bet-button,
    #bet-confirm-submit,
    #jackpot-save-button,
    #refresh-jackpot-report,
    #dashboard-view-results,
    #refresh-dashboard
  ):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover::before {
    animation: fine-sheen-pass 420ms var(--fine-sheen-ease) 1;
  }
}

:is(
  #agent-login-form > button[type="submit"],
  #bet-button,
  #bet-confirm-submit,
  #jackpot-save-button,
  #refresh-jackpot-report,
  #dashboard-view-results,
  #refresh-dashboard
):is(:hover, :focus-visible, :active) {
  transform: none;
}

:is(
  #agent-login-form > button[type="submit"],
  #bet-button,
  #bet-confirm-submit,
  #jackpot-save-button,
  #refresh-jackpot-report,
  #dashboard-view-results,
  #refresh-dashboard
):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  filter: brightness(0.92);
}

:is(
  #agent-login-form > button[type="submit"],
  #bet-button,
  #bet-confirm-submit,
  #jackpot-save-button,
  #refresh-jackpot-report,
  #dashboard-view-results,
  #refresh-dashboard
):focus-visible {
  outline: 2px solid var(--fine-sheen-focus);
  outline-offset: 3px;
}

/* The older shared login hover color is green; this surface stays blue. */
#agent-login-form > button[type="submit"]:not(:disabled):hover {
  background: linear-gradient(180deg, #0a68dc 0%, #063fab 100%);
}

/* A busy form must not look ready for another submission. */
[aria-busy="true"] :is(
  #agent-login-form > button[type="submit"],
  #bet-button,
  #bet-confirm-submit,
  #jackpot-save-button,
  #refresh-jackpot-report,
  #dashboard-view-results,
  #refresh-dashboard
)::before {
  animation: none !important;
  opacity: 0;
}

/* Replace the legacy hover lift without changing selected/locked colors. */
#number-grid .matrix-number-cell,
#number-grid .matrix-number-cell:is(:hover, :focus-visible, :active),
.bet-layout :is(.game-mode-button, .bet-option-button),
.bet-layout :is(.game-mode-button, .bet-option-button):is(:hover, :focus-visible, :active) {
  transform: none;
  transition: border-color 160ms var(--fine-sheen-ease),
    background-color 160ms var(--fine-sheen-ease), box-shadow 160ms var(--fine-sheen-ease);
}

@media (hover: hover) and (pointer: fine) {
  #number-grid .matrix-number-cell:not(:disabled):not([aria-disabled="true"]):not(.is-selected):not(.is-locked):not(.is-sold-out):not(.is-over-limit):hover {
    border-color: var(--fine-sheen-focus);
    box-shadow: inset 0 0 0 1px rgba(22, 119, 221, 0.18), 0 2px 6px rgba(11, 35, 66, 0.07);
  }

  .bet-layout .game-mode-button.is-active:not(:disabled):hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(155, 201, 244, 0.62);
  }
}

#number-grid .matrix-number-cell:focus-visible {
  outline: 2px solid var(--fine-sheen-focus);
  outline-offset: 1px;
}

:is(#agent-login-form, .bet-layout, #jackpot-settings-form, .jackpot-report-toolbar)
  :is(input:not([type="checkbox"]), select):not(:disabled):not([aria-invalid="true"]):focus-visible {
  border-color: var(--fine-sheen-focus);
  outline: 2px solid rgba(22, 119, 221, 0.45);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(22, 119, 221, 0.1);
}

/* Inset outlines retain the existing active-tab underline and dropdown geometry. */
.admin-primary-nav .admin-nav-group > summary,
#dashboard-tab .dashboard-collapse-summary {
  transition: outline-color 160ms var(--fine-sheen-ease),
    background-color 160ms var(--fine-sheen-ease), box-shadow 160ms var(--fine-sheen-ease);
}

@media (hover: hover) and (pointer: fine) {
  .admin-primary-nav .admin-nav-group > summary:hover {
    outline: 1px solid rgba(195, 219, 243, 0.6);
    outline-offset: -4px;
  }

  #dashboard-tab .dashboard-collapse-summary:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}

#dashboard-tab .dashboard-collapse-summary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  :is(
    #agent-login-form > button[type="submit"], #bet-button, #bet-confirm-submit,
    #jackpot-save-button, #refresh-jackpot-report, #dashboard-view-results, #refresh-dashboard
  )::before {
    animation: none;
    content: none;
  }

  :is(
    #agent-login-form > button[type="submit"], #bet-button, #bet-confirm-submit,
    #jackpot-save-button, #refresh-jackpot-report, #dashboard-view-results, #refresh-dashboard,
    #number-grid .matrix-number-cell, .bet-layout .game-mode-button, .bet-layout .bet-option-button,
    .admin-primary-nav .admin-nav-group > summary, #dashboard-tab .dashboard-collapse-summary
  ) {
    transition: none;
  }
}