/* Native button and interaction parity.
   Loaded last so legacy glass experiments cannot leak into controls. */

:root,
html[data-theme="dark"] {
  --native-action-height: 48px;
  --native-pill-width: 54px;
  --native-pill-height: 44px;
  --native-pill-icon-size: 24px;
  --native-control-bg: #1a1a1a;
  --native-control-bg-pressed: #202020;
  --native-control-line: #2a2a2a;
  --native-control-icon: #92969d;
}

/* Buttons in the Android app are opaque surfaces, never blurred glass. */
.app-shell button,
.app-shell [role="button"],
.side-sheet button,
.picker-sheet button,
.modal button {
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.app-shell button:hover,
.app-shell button:active,
.app-shell button:focus-visible,
.side-sheet button:hover,
.side-sheet button:active,
.picker-sheet button:hover,
.picker-sheet button:active,
.modal button:hover,
.modal button:active {
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

:where(
  .header-icon-button,
  .icon-button,
  .page-back-button,
  .account-avatar,
  .sidebar-quick-action,
  .home-native-wallet-select,
  .home-native-action-surface,
  .chart-filters,
  .chart-filter,
  .picker-field,
  .picker-input-button,
  .date-time-field,
  .number-input-shell,
  .amount-mode-button,
  .add-selection-button,
  .secondary-button,
  .ghost-button,
  .native-icon-pill,
  .native-clear-button
) {
  background-color: var(--native-control-bg) !important;
  background-image: none !important;
  border-color: var(--native-control-line) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* The native Home action does not paint the whole 82x68 touch target. */
.home-native-menu-action,
.home-native-menu-action:hover,
.home-native-menu-action:active,
.home-native-menu-action:focus,
.home-native-menu-action:focus-visible,
.home-native-more,
.home-native-more:hover,
.home-native-more:active,
.home-native-more:focus,
.home-native-more:focus-visible,
.home-native-menu.is-expanded .home-native-more {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.home-native-menu-action .home-native-action-surface,
.home-native-menu-action:hover .home-native-action-surface,
.home-native-menu-action:active .home-native-action-surface,
.home-native-menu-action:focus-visible .home-native-action-surface,
.home-native-more .home-native-action-surface,
.home-native-more:hover .home-native-action-surface,
.home-native-more:active .home-native-action-surface,
.home-native-more:focus-visible .home-native-action-surface {
  border: 0.65px solid var(--native-control-line) !important;
  border-radius: 999px !important;
  background: var(--native-control-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.home-native-menu-action,
.home-native-menu-action .app-icon-svg,
.home-native-menu-action > span:last-child {
  color: var(--native-control-icon) !important;
  --app-icon-color: var(--native-control-icon) !important;
}

/* The central plus uses the same neutral icon tint as the Android dock. */
.sidebar .nav-add-item,
.sidebar .nav-add-item:hover,
.sidebar .nav-add-item:active,
.sidebar .nav-add-item:focus,
.sidebar .nav-add-item:focus-visible,
.sidebar .nav-add-item.active,
html[data-theme="dark"] .sidebar .nav-add-item,
html[data-theme="dark"] .sidebar .nav-add-item:hover,
html[data-theme="dark"] .sidebar .nav-add-item:active,
html[data-theme="dark"] .sidebar .nav-add-item.active {
  border-color: transparent !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--native-control-icon) !important;
  --app-icon-color: var(--native-control-icon) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.sidebar .nav-add-item .button-icon,
.sidebar .nav-add-item .app-icon-svg {
  color: var(--native-control-icon) !important;
  --app-icon-color: var(--native-control-icon) !important;
}

.sidebar .nav-add-pill {
  display: none !important;
}

/* Native pressed feedback: a short opaque tone change, without lift or glow. */
:where(
  .header-icon-button,
  .icon-button,
  .page-back-button,
  .secondary-button,
  .ghost-button,
  .native-icon-pill
):active {
  background-color: var(--native-control-bg-pressed) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.primary-button,
.save-bet-button {
  background: var(--primary) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Canonical Android geometry ---------------------------------------------
   Icon pills are 54x44; labelled action pills are 48px tall. Keeping these
   two families explicit prevents old page-specific rules from drifting. */
:where(
  .app-shell .header-icon-button,
  .app-shell .topbar .icon-button,
  .app-shell .topbar .account-avatar.page-back-button,
  .side-sheet .settings-back-button,
  .side-sheet-header [data-close-sheet],
  .picker-sheet .side-sheet-header [data-close-picker-sheet],
  .modal-header [data-close-modal],
  .native-icon-pill,
  .home-native-action-surface
) {
  box-sizing: border-box !important;
  width: var(--native-pill-width) !important;
  min-width: var(--native-pill-width) !important;
  max-width: var(--native-pill-width) !important;
  height: var(--native-pill-height) !important;
  min-height: var(--native-pill-height) !important;
  max-height: var(--native-pill-height) !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
}

:where(
  .app-shell .header-icon-button,
  .app-shell .topbar .icon-button,
  .app-shell .topbar .account-avatar.page-back-button,
  .side-sheet .settings-back-button,
  .side-sheet-header [data-close-sheet],
  .picker-sheet .side-sheet-header [data-close-picker-sheet],
  .modal-header [data-close-modal],
  .native-icon-pill,
  .home-native-action-surface
) :is(.app-icon-svg, .button-icon, svg) {
  width: var(--native-pill-icon-size) !important;
  height: var(--native-pill-icon-size) !important;
  flex: 0 0 var(--native-pill-icon-size) !important;
}

:where(
  .primary-button,
  .secondary-button,
  .danger-button,
  .save-bet-button,
  .add-selection-button,
  .settings-subscription-cta,
  .pro-upgrade-sheet-actions > button,
  .auth-icon-button,
  .auth-form .primary-button,
  .auth-back-action
) {
  box-sizing: border-box !important;
  height: var(--native-action-height) !important;
  min-height: var(--native-action-height) !important;
  max-height: var(--native-action-height) !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

/* Native controls are opaque. The diagonal edge belongs to the border only. */
:where(
  .auth-form input:not([type="checkbox"]),
  .auth-icon-button,
  .auth-form .primary-button,
  .auth-back-action
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* The Android auth page starts near the safe-area top instead of centering
   the entire form in the viewport. */
@media (max-width: 560px) {
  .auth-screen {
    align-items: start !important;
  }

  .auth-layout {
    min-height: auto !important;
    align-content: start !important;
  }

  .auth-panel {
    align-self: start !important;
  }
}

/* Overlay buttons cover the viewport; they are not visual controls. */
:is(.side-sheet-backdrop, .modal-backdrop, .picker-sheet-backdrop) {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .588) !important;
  box-shadow: none !important;
}