/* ============================================
   SHARED BUTTON VISUAL CONTRACT

   Feature styles own dimensions and layout. This file is deliberately loaded
   last so every standard button gets the same neutral, hover, active/primary,
   focus, disabled, and danger states. New controls should use `.ui-button`
   plus the state classes below instead of defining their own colors.
   ============================================ */

:root {
    --ui-button-bg: var(--input-bg, var(--button-bg, var(--widget-bg)));
    --ui-button-group-bg: var(--input-bg, var(--button-bg, var(--widget-bg)));
    --ui-button-border: var(--button-border, var(--border-color));
    --ui-button-text: var(--text-muted);
    --ui-button-hover-border: var(--accent-color);
    --ui-button-active-bg: var(--accent-gradient);
    --ui-button-active-border: var(--accent-color);
    --ui-button-active-text: var(--button-primary-text, white);
    --ui-button-danger-outline: var(--danger-color);
    --ui-button-error-outline: var(--error-color, var(--danger-color));
    --ui-button-warning-outline: var(--warning-color);
    --ui-button-radius: 6px;
    --ui-button-transition: background 0.2s ease, border-color 0.2s ease,
        color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease,
        transform 0.2s ease, translate 0.2s ease, scale 0.2s ease,
        filter 0.2s ease;
}

/* Unclassed buttons inherit the same default instead of the old flat accent. */
button {
    background: var(--ui-button-bg);
    border: 1px solid var(--ui-button-border);
    color: var(--ui-button-text);
    transition: var(--ui-button-transition);
}

/* Every enabled button gets the same restrained physical response. Feature
   hover rules can still change color, outline, glow, or brightness. */
button:not(:disabled):not([aria-disabled="true"]):not(.btn-unavailable):hover {
    border-color: var(--ui-button-hover-border);
    translate: 0 -1px;
    scale: 1.012;
}

/* Segmented controls share one dark track. Their inactive segments disappear
   into that track until hover supplies the temporary theme outline. */
:is(
    .panel-tabs,
    .sub-tab-bar,
    .search-mode-tabs,
    .legal-tabs,
    .advanced-toggle-group,
    .toolbar-view-toggles
) {
    background: var(--ui-button-group-bg);
}

/* Search sits directly on the app canvas, so its segmented track should not
   introduce a subtly different panel/input strip behind the two tabs. */
.search-mode-tabs {
    --ui-button-group-bg: var(--bg-color);
}

/* Library owns only the action row's dimensions. Its controls deliberately
   inherit all visual states from the shared button contract above. */
.library-deck-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.library-deck-action {
    padding: 8px 12px;
}

.library-deck-action--load {
    flex: 1;
    padding-inline: 8px;
}

.library-retention-action {
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    font-weight: 700;
}

/* Standard outlined controls and selectable buttons. */
:is(
    .ui-button,
    .panel-tab,
    .lib-tab-btn,
    .search-mode-tab,
    .toggle-btn,
    .deck-filter-btn,
    .view-toggle-btn,
    .toolbar-filter-btn,
    .toolbar-view-btn,
    .deck-toolbar-container .deck-control-btn,
    .synergy-toolbar-btn,
    .filter-action-btn,
    .clear-filters-btn,
    .btn.secondary,
    .secondary-button,
    .btn-secondary,
    .cancel-btn,
    .pod-toggle-btn,
    .pod-secondary-btn,
    .goldfish-action-btn:not(.primary):not(.danger),
    .tour-nav-btn:not(.tour-next-btn),
    .page-btn,
    .pro-cal-nav-btn,
    .pro-cal-today-btn,
    .upgrade-nav-btn,
    .upgrade-swap-btn,
    .notepad-toolbar-btn,
    .notepad-btn:not(.close-btn),
    .card-preview-vendor-button,
    .card-preview-view-button,
    .vendor-btn,
    .legal-tab-btn,
    /* Admin Control Panel */
    .btn-icon,
    .promo-btn,
    .promo-icon-btn,
    .revenue-subtab
) {
    background: var(--ui-button-bg);
    border: 1px solid var(--ui-button-border);
    color: var(--ui-button-text);
    border-radius: var(--ui-button-radius);
    box-shadow: none;
    filter: none;
    transition: var(--ui-button-transition);
}

/* Inactive hover stays outlined; only the border takes on the theme color. */
:is(
    .ui-button,
    .panel-tab,
    .lib-tab-btn,
    .search-mode-tab,
    .toggle-btn,
    .deck-filter-btn,
    .view-toggle-btn,
    .toolbar-filter-btn,
    .toolbar-view-btn,
    .deck-toolbar-container .deck-control-btn,
    .synergy-toolbar-btn,
    .filter-action-btn,
    .clear-filters-btn,
    .btn.secondary,
    .secondary-button,
    .btn-secondary,
    .cancel-btn,
    .pod-toggle-btn,
    .pod-secondary-btn,
    .goldfish-action-btn:not(.primary):not(.danger),
    .tour-nav-btn:not(.tour-next-btn),
    .page-btn,
    .pro-cal-nav-btn,
    .pro-cal-today-btn,
    .upgrade-nav-btn,
    .upgrade-swap-btn,
    .notepad-toolbar-btn,
    .notepad-btn:not(.close-btn),
    .card-preview-vendor-button,
    .card-preview-view-button,
    .vendor-btn,
    .legal-tab-btn,
    /* Admin Control Panel */
    .btn-icon,
    .promo-btn,
    .promo-icon-btn,
    .revenue-subtab
):not(.active):not(.lib-tab-btn--active):not(.search-mode-tab--active):not([aria-pressed="true"]):not([aria-selected="true"]):not(:disabled):hover {
    background: var(--ui-button-bg);
    border-color: var(--ui-button-hover-border);
    color: var(--text-color);
    box-shadow: none;
    filter: none;
}

/* Semantic buttons keep their own stronger outline on hover. The semantic
   border and ring are authoritative so a generic accent rule can never
   replace an error, danger, or warning affordance. */
:is(
    button.ui-button--danger,
    button.danger-btn,
    button.danger,
    button[class*="-danger"],
    button[class*="danger-"],
    .collection-history-revert,
    .panel-tab.invalid,
    .removal-btn
):not(:disabled):hover {
    border-color: var(--ui-button-danger-outline) !important;
    box-shadow: 0 0 0 1px var(--ui-button-danger-outline),
        0 4px 12px var(--danger-bg) !important;
}

:is(
    button.ui-button--error,
    button.error,
    button[class*="-error"],
    button[class*="error-"]
):not(:disabled):hover {
    border-color: var(--ui-button-error-outline) !important;
    box-shadow: 0 0 0 1px var(--ui-button-error-outline),
        0 4px 12px var(--danger-bg) !important;
}

:is(
    button.ui-button--warning,
    button.warning,
    button[class*="-warning"],
    button[class*="warning-"]
):not(:disabled):hover {
    border-color: var(--ui-button-warning-outline) !important;
    box-shadow: 0 0 0 1px var(--ui-button-warning-outline),
        0 4px 12px var(--warning-bg) !important;
}

/* Selected controls and persistent tab states. */
:is(
    .ui-button,
    .panel-tab,
    .lib-tab-btn,
    .search-mode-tab,
    .toggle-btn,
    .deck-filter-btn,
    .view-toggle-btn,
    .toolbar-filter-btn,
    .toolbar-view-btn,
    .deck-toolbar-container .deck-control-btn,
    .synergy-toolbar-btn,
    .legal-tab-btn,
    /* Admin Control Panel */
    .revenue-subtab
):is(.active, .lib-tab-btn--active, .search-mode-tab--active, [aria-pressed="true"], [aria-selected="true"]),
.dropdown-group.active .deck-control-btn {
    background: var(--ui-button-active-bg);
    border-color: var(--ui-button-active-border);
    color: var(--ui-button-active-text);
    box-shadow: 0 4px 12px var(--accent-glow);
    filter: none;
}

/* Primary actions use the same visual state as an active selection. */
:is(
    .ui-button--primary,
    .action-btn:not(.danger-btn),
    .search-btn,
    .btn.primary,
    .primary-button,
    .primary-btn,
    .confirm-btn,
    .tour-cta-btn,
    .tour-next-btn,
    .auth-submit-btn,
    .sign-in-btn,
    .btn-search-explicit,
    .pro-gate-upgrade-btn,
    .deck-control-btn:not(.secondary),
    .view-more-relative-btn,
    .games-auth-btn,
    .games-site-button-primary,
    .lobby-begin-btn,
    .mulligan-run-btn,
    .specter-submit-btn,
    .art-sleuth-submit-btn,
    .game-retry-btn,
    .game-share-btn,
    .save-btn:not(.removal-btn),
    .suggest-btn,
    .synergy-report-btn,
    /* Admin Control Panel */
    .btn-primary,
    .promo-btn-primary
) {
    background: var(--ui-button-active-bg);
    border: 1px solid var(--ui-button-active-border);
    color: var(--ui-button-active-text);
    border-radius: var(--ui-button-radius);
    box-shadow: 0 4px 12px var(--accent-glow);
    filter: none;
    transition: var(--ui-button-transition);
}

:is(
    .ui-button--primary,
    .action-btn:not(.danger-btn),
    .search-btn,
    .btn.primary,
    .primary-button,
    .primary-btn,
    .confirm-btn,
    .tour-cta-btn,
    .tour-next-btn,
    .auth-submit-btn,
    .sign-in-btn,
    .btn-search-explicit,
    .pro-gate-upgrade-btn,
    .deck-control-btn:not(.secondary),
    .view-more-relative-btn,
    .games-auth-btn,
    .games-site-button-primary,
    .lobby-begin-btn,
    .mulligan-run-btn,
    .specter-submit-btn,
    .art-sleuth-submit-btn,
    .game-retry-btn,
    .game-share-btn,
    .save-btn:not(.removal-btn),
    .suggest-btn,
    .synergy-report-btn
):not(:disabled):hover,
:is(
    .panel-tab.active,
    .lib-tab-btn--active,
    .search-mode-tab--active,
    .toggle-btn.active,
    .deck-filter-btn.active,
    .view-toggle-btn.active,
    .toolbar-filter-btn.active,
    .toolbar-view-btn.active,
    .synergy-toolbar-btn.active,
    .legal-tab-btn.active
):not(:disabled):hover {
    background: var(--ui-button-active-bg);
    border-color: var(--ui-button-active-border);
    color: var(--ui-button-active-text);
    box-shadow: 0 5px 15px var(--accent-glow);
    filter: brightness(1.06);
}

/* Toolbar deck controls are selectors by default, even though deck actions
   elsewhere use the primary state. */
.deck-toolbar-container .deck-control-btn:not(.active) {
    background: var(--ui-button-bg);
    border: 1px solid var(--ui-button-border);
    color: var(--ui-button-text);
    box-shadow: none;
    filter: none;
}

.deck-toolbar-container .deck-control-btn:not(.active):not(:disabled):hover {
    background: var(--ui-button-bg);
    border-color: var(--ui-button-hover-border);
    color: var(--text-color);
    box-shadow: none;
    filter: none;
}

/* Destructive actions retain their semantic color but follow the same
   outlined -> filled state model. */
:is(.ui-button--danger, .danger-btn, .goldfish-action-btn.danger, .removal-btn) {
    background: var(--ui-button-bg);
    border: 1px solid var(--danger-border, var(--danger-color));
    color: var(--danger-color);
    box-shadow: none;
    filter: none;
}

:is(.ui-button--danger, .danger-btn, .goldfish-action-btn.danger, .removal-btn):not(:disabled):hover {
    background: var(--danger-bg-hover, var(--danger-bg));
    border-color: var(--danger-color);
    color: var(--danger-color);
    box-shadow: 0 4px 12px var(--danger-bg);
    filter: none;
}

/* These are the individual segments of a grouped control. A transparent
   one-pixel border prevents layout movement when hover reveals the outline. */
:is(
    .panel-tabs .panel-tab:not(.active),
    .sub-tab-bar .lib-tab-btn:not(.lib-tab-btn--active),
    .search-mode-tabs .search-mode-tab:not(.search-mode-tab--active),
    .legal-tabs .legal-tab-btn:not(.active),
    .advanced-toggle-group .toggle-btn:not(.active),
    .toolbar-view-toggles .toolbar-view-btn:not(.active)
) {
    background: var(--ui-button-group-bg);
    border-color: transparent;
    box-shadow: none;
}

:is(
    .panel-tabs .panel-tab:not(.active),
    .sub-tab-bar .lib-tab-btn:not(.lib-tab-btn--active),
    .search-mode-tabs .search-mode-tab:not(.search-mode-tab--active),
    .legal-tabs .legal-tab-btn:not(.active),
    .advanced-toggle-group .toggle-btn:not(.active),
    .toolbar-view-toggles .toolbar-view-btn:not(.active)
):not(:disabled):hover {
    background: var(--ui-button-group-bg);
    border-color: var(--ui-button-hover-border);
    color: var(--text-color);
    box-shadow: none;
    filter: none;
}

/* Keyboard focus is visible and theme-aware for every button style. */
button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

button:disabled,
button[aria-disabled="true"],
.btn-unavailable {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
    filter: grayscale(0.35);
    transform: none;
    translate: none;
    scale: none;
}

button:disabled:hover,
button[aria-disabled="true"]:hover,
.btn-unavailable:hover {
    transform: none;
    translate: none;
    scale: none;
}