/* Shared action buttons. Loaded after the production bundle.
 * Match padded, rounded actions, including links rendered by React/Inertia.
 * Keep navigation, icon controls and selectable cards in their own layouts.
 */
:root {
    --button-radius: 4px;
    --button-height: 36px;
    --button-focus: #dca842;
}

#app :is(
    button[class*="rounded"][class*="px-"],
    button[class*="rounded"][class*="py-"],
    a[class*="rounded"][class*="px-"],
    [role="button"][class*="rounded"][class*="px-"],
    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    .about-history-toggle
):not(:where(.admin-sidebar-menu *)):not([class~="flex-col"]):not([role="tab"]):not([role="switch"]):not([role="checkbox"]):not([role="radio"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--button-height);
    padding: 6px 16px;
    border-radius: var(--button-radius);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* Includes small icon controls without changing their shape or dimensions. */
#app :is(button, [role="button"], input[type="submit"], input[type="reset"], input[type="button"]):focus-visible,
#app a[class*="rounded"][class*="px-"]:focus-visible {
    outline: 2px solid var(--button-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #0a1730;
}

#app :is(button, input[type="submit"], input[type="reset"], input[type="button"]):disabled,
#app :is(button, a, [role="button"])[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Give compact actions a larger target on touch screens. */
@media (pointer: coarse) {
    :root { --button-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    #app :is(button, [role="button"], input[type="submit"], input[type="reset"], input[type="button"]),
    #app a[class*="rounded"][class*="px-"] {
        transition: none;
        animation: none;
    }
}