/* Buttons
/* ------------------------------------------------------------------------- */
.btn {
    /* Bridge to Bootstrap's button variables so native BS variant classes that EasyAdmin does
       not restyle (.btn-outline-*, .btn-light, .btn-dark, …) still render like Bootstrap. Each
       falls back to EasyAdmin's neutral default, and EA's own variant rules (.btn-primary, …) set
       --button-* directly later in this file, so they always win over the bridge. */
    --button-bg: var(--bs-btn-bg, transparent);
    --button-border-color: var(--bs-btn-border-color, transparent);
    --button-color: var(--bs-btn-color, var(--text-color));
    --button-hover-bg: var(--bs-btn-hover-bg, var(--button-bg));
    --button-hover-color: var(--bs-btn-hover-color, var(--button-color));
    --button-hover-border-color: var(--bs-btn-hover-border-color, var(--button-border-color));
    --button-active-bg: var(--bs-btn-active-bg, var(--button-hover-bg));
    --button-box-shadow: none;

    align-items: center;
    appearance: none;
    background: var(--button-bg);
    border: var(--button-border-width, var(--border-width)) solid;
    border-color: var(--button-border-color);
    border-radius: var(--button-border-radius);
    box-shadow: var(--button-box-shadow);
    color: var(--button-color);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--button-font-size, var(--font-size-base));
    font-weight: var(--button-font-weight, var(--font-weight-medium));
    gap: var(--button-icon-gap, var(--ea-sp-3));
    min-block-size: var(--button-height, var(--ea-sp-16));
    justify-content: space-between;
    line-height: var(--button-line-height);
    padding: var(--button-padding-y, var(--button-padding-y-md)) var(--button-padding-x, var(--button-padding-x-md));
    isolation: isolate;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: var(--ea-transition-duration) var(--ea-transition-timing);
    transition-property: border-color, color, box-shadow, opacity, fill, translate;
    user-select: none;
    white-space: nowrap;
}

/* Button hover and keyboard-focus states. The background is pinned to the resting value because
   Bootstrap's own .btn:hover rule (higher specificity than our base .btn) would otherwise paint
   Bootstrap's --bs-btn-hover-bg under our state layer, and it flashes through while the layer
   fades in (very visible on .btn-outline-warning/info: Bootstrap yellow/cyan under EasyAdmin
   colors). The hover background itself is painted by the ::before state layer below. */
.btn:not(:disabled):not(.disabled):hover,
.btn:not(:disabled):not(.disabled):focus-visible {
    background: var(--button-bg);
    border-color: var(--button-hover-border-color, var(--button-border-color));
    color: var(--button-hover-color, var(--button-color));
    text-decoration: none;
}

/* Button active (pressed) state (background pinned for the same reason as in the hover rule) */
.btn:not(:disabled):not(.disabled):active {
    background: var(--button-bg);
    border-color: var(--button-active-border-color, var(--button-border-color));
    box-shadow: var(--button-active-box-shadow, var(--button-box-shadow));
    color: var(--button-active-color, var(--button-color));
    outline: none;
}

/* subtle press feedback (like shadcn): the button shifts down 1px while pressed;
   dropdown triggers are excluded so the menu being opened doesn't jump */
.btn:not(:disabled):not(.disabled):not([aria-haspopup]):active {
    translate: 0 1px;
}

/* focus ring only for keyboard focus (:focus-visible); clicking with the mouse focuses the
   button too (:focus) but must not show the ring */
.btn:not(:disabled):not(.disabled):focus-visible:not(:active) {
    box-shadow: none;
    outline: var(--ea-focus-ring-width) solid var(--button-focus-outline-color);
    outline-offset: -2px;
}

/* background state layer: crossfades the hover/active background via opacity, because
   gradient backgrounds (background-image) can't be transitioned directly. The base .btn
   keeps the resting background; this layer fades the hover/active background on top.
   isolation:isolate on .btn lets the z-index:-1 layer paint above the button's own
   background but below its content. Scoped to exclude .btn-close, and not triggered
   while loading. */
.btn:not(.btn-close)::before {
    content: "";
    position: absolute;
    /* extend under the border so the layer's rounded corners (border-radius: inherit = the OUTER
       radius) match the button outline exactly; with inset: 0 the layer only covers the padding
       box, whose corner curve is smaller (outer radius minus border width), leaving dirty corner
       artifacts when the hover fill is subtle */
    inset: calc(-1 * var(--button-border-width, var(--border-width)));
    z-index: -1;
    border-radius: inherit;
    background: var(--button-hover-bg, var(--button-bg));
    opacity: 0;
    transition: opacity var(--ea-transition-duration) var(--ea-transition-timing);
    pointer-events: none;
}
.btn:not(.btn-close):not(.is-loading):not(:disabled):not(.disabled):hover::before,
.btn:not(.btn-close):not(.is-loading):not(:disabled):not(.disabled):focus-visible::before {
    opacity: 1;
}
.btn:not(.btn-close):not(.is-loading):not(:disabled):not(.disabled):active::before {
    background: var(--button-active-bg, var(--button-hover-bg, var(--button-bg)));
    opacity: 1;
}

/* the close button (Bootstrap .btn-close, used by Alert) is excluded from the state
   layer; its translucent solid hover background transitions fine directly. */
.btn-close {
    transition-property: background-color, border-color, color, box-shadow, opacity, fill;
}
.btn-close:not(:disabled):not(.disabled):hover,
.btn-close:not(:disabled):not(.disabled):focus-visible {
    background: var(--button-hover-bg, var(--button-bg));
}
.btn-close:not(:disabled):not(.disabled):active {
    background: var(--button-active-bg, var(--button-hover-bg, var(--button-bg)));
}

.btn-primary,
.btn-primary.btn.disabled,
.btn-primary.btn:disabled {
    --button-box-shadow: var(--button-primary-box-shadow);
    --button-bg: var(--button-primary-bg);
    --button-color: var(--button-primary-color);
    --button-icon-color: var(--button-primary-icon-color);
    --button-border-color: var(--button-primary-border-color);
    --button-hover-bg: var(--button-primary-hover-bg);
    --button-hover-color: var(--button-primary-hover-color);
    --button-hover-border-color: var(--button-primary-hover-border-color);
    --button-active-box-shadow: var(--button-primary-active-box-shadow);
    --button-active-color: var(--button-primary-active-color);
    --button-active-bg: var(--button-primary-active-bg);
    --button-active-border-color: var(--button-primary-active-border-color);
}

.btn-secondary,
.btn-secondary.btn.disabled,
.btn-secondary.btn:disabled {
    --button-box-shadow: var(--button-secondary-box-shadow);
    --button-bg: var(--button-secondary-bg);
    --button-color: var(--button-secondary-color);
    --button-icon-color: var(--button-secondary-icon-color);
    --button-border-color: var(--button-secondary-border-color);
    --button-hover-bg: var(--button-secondary-hover-bg);
    --button-hover-color: var(--button-secondary-hover-color);
    --button-hover-border-color: var(--button-secondary-hover-border-color);
    --button-active-box-shadow: var(--button-secondary-active-box-shadow);
    --button-active-color: var(--button-secondary-active-color);
    --button-active-bg: var(--button-secondary-active-bg);
    --button-active-border-color: var(--button-secondary-active-border-color);
}

.btn-success,
.btn-success.btn.disabled,
.btn-success.btn:disabled {
    --button-box-shadow: var(--button-success-box-shadow);
    --button-bg: var(--button-success-bg);
    --button-color: var(--button-success-color);
    --button-icon-color: var(--button-success-icon-color);
    --button-border-color: var(--button-success-border-color);
    --button-hover-bg: var(--button-success-hover-bg);
    --button-hover-color: var(--button-success-hover-color);
    --button-hover-border-color: var(--button-success-hover-border-color);
    --button-active-box-shadow: var(--button-success-active-box-shadow);
    --button-active-color: var(--button-success-active-color);
    --button-active-bg: var(--button-success-active-bg);
    --button-active-border-color: var(--button-success-active-border-color);
}

.btn-warning,
.btn-warning.btn.disabled,
.btn-warning.btn:disabled {
    --button-box-shadow: var(--button-warning-box-shadow);
    --button-bg: var(--button-warning-bg);
    --button-color: var(--button-warning-color);
    --button-icon-color: var(--button-warning-icon-color);
    --button-border-color: var(--button-warning-border-color);
    --button-hover-bg: var(--button-warning-hover-bg);
    --button-hover-color: var(--button-warning-hover-color);
    --button-hover-border-color: var(--button-warning-hover-border-color);
    --button-active-box-shadow: var(--button-warning-active-box-shadow);
    --button-active-color: var(--button-warning-active-color);
    --button-active-bg: var(--button-warning-active-bg);
    --button-active-border-color: var(--button-warning-active-border-color);
}

.btn-danger,
.btn-danger.btn.disabled,
.btn-danger.btn:disabled {
    --button-box-shadow: var(--button-danger-box-shadow);
    --button-bg: var(--button-danger-bg);
    --button-color: var(--button-danger-color);
    --button-icon-color: var(--button-danger-icon-color);
    --button-border-color: var(--button-danger-border-color);
    --button-hover-bg: var(--button-danger-hover-bg);
    --button-hover-color: var(--button-danger-hover-color);
    --button-hover-border-color: var(--button-danger-hover-border-color);
    --button-active-box-shadow: var(--button-danger-active-box-shadow);
    --button-active-color: var(--button-danger-active-color);
    --button-active-bg: var(--button-danger-active-bg);
    --button-active-border-color: var(--button-danger-active-border-color);
}

.btn-info,
.btn-info.btn.disabled,
.btn-info.btn:disabled {
    --button-box-shadow: var(--button-info-box-shadow);
    --button-bg: var(--button-info-bg);
    --button-color: var(--button-info-color);
    --button-icon-color: var(--button-info-icon-color);
    --button-border-color: var(--button-info-border-color);
    --button-hover-bg: var(--button-info-hover-bg);
    --button-hover-color: var(--button-info-hover-color);
    --button-hover-border-color: var(--button-info-hover-border-color);
    --button-active-box-shadow: var(--button-info-active-box-shadow);
    --button-active-color: var(--button-info-active-color);
    --button-active-bg: var(--button-info-active-bg);
    --button-active-border-color: var(--button-info-active-border-color);
}

/* Outline variants: transparent background with the variant accent as text and border color.
   Defined explicitly (instead of delegating to Bootstrap via the --bs-btn-* bridge above) so
   they use the EasyAdmin palette; e.g. .btn-outline-primary is indigo like .btn-primary, not
   Bootstrap blue. On hover/active they reuse the --button-X-hover/active-* tokens, so an
   outline button fills exactly like its solid counterpart (and adapts to the dark scheme).
   .btn-outline-secondary deviates from this pattern; see the comments in its rule. */
.btn-outline-primary,
.btn-outline-primary.btn.disabled,
.btn-outline-primary.btn:disabled {
    --button-box-shadow: none;
    --button-bg: transparent;
    --button-color: var(--button-outline-primary-color);
    --button-icon-color: inherit;
    --button-border-color: var(--button-outline-primary-color);
    --button-hover-bg: var(--button-primary-hover-bg);
    --button-hover-color: var(--button-primary-hover-color);
    --button-hover-border-color: var(--button-primary-hover-border-color);
    --button-active-box-shadow: var(--button-primary-active-box-shadow);
    --button-active-bg: var(--button-primary-active-bg);
    --button-active-color: var(--button-primary-active-color);
    --button-active-border-color: var(--button-primary-active-border-color);
}

.btn-outline-secondary,
.btn-outline-secondary.btn.disabled,
.btn-outline-secondary.btn:disabled {
    --button-box-shadow: none;
    --button-bg: transparent;
    --button-color: var(--button-secondary-color);
    --button-icon-color: var(--button-secondary-icon-color);
    /* soft border at rest; on hover/active the border strengthens to the text color */
    --button-border-color: var(--button-secondary-border-color);
    /* the secondary HOVER tokens are nearly white and imperceptible over a transparent resting
       background, so this variant hovers straight to the secondary ACTIVE tokens instead */
    --button-hover-bg: var(--button-secondary-active-bg);
    --button-hover-color: var(--button-secondary-active-color);
    --button-hover-border-color: var(--button-secondary-color);
    --button-active-box-shadow: var(--button-secondary-active-box-shadow);
    --button-active-bg: var(--button-secondary-active-bg);
    --button-active-color: var(--button-secondary-active-color);
    --button-active-border-color: var(--button-secondary-color);
}

.btn-outline-success,
.btn-outline-success.btn.disabled,
.btn-outline-success.btn:disabled {
    --button-box-shadow: none;
    --button-bg: transparent;
    --button-color: var(--button-success-color);
    --button-icon-color: inherit;
    --button-border-color: var(--button-success-color);
    --button-hover-bg: var(--button-success-hover-bg);
    --button-hover-color: var(--button-success-hover-color);
    --button-hover-border-color: var(--button-success-hover-border-color);
    --button-active-box-shadow: var(--button-success-active-box-shadow);
    --button-active-bg: var(--button-success-active-bg);
    --button-active-color: var(--button-success-active-color);
    --button-active-border-color: var(--button-success-active-border-color);
}

.btn-outline-warning,
.btn-outline-warning.btn.disabled,
.btn-outline-warning.btn:disabled {
    --button-box-shadow: none;
    --button-bg: transparent;
    --button-color: var(--button-warning-color);
    --button-icon-color: inherit;
    --button-border-color: var(--button-warning-color);
    --button-hover-bg: var(--button-warning-hover-bg);
    --button-hover-color: var(--button-warning-hover-color);
    --button-hover-border-color: var(--button-warning-hover-border-color);
    --button-active-box-shadow: var(--button-warning-active-box-shadow);
    --button-active-bg: var(--button-warning-active-bg);
    --button-active-color: var(--button-warning-active-color);
    --button-active-border-color: var(--button-warning-active-border-color);
}

.btn-outline-danger,
.btn-outline-danger.btn.disabled,
.btn-outline-danger.btn:disabled {
    --button-box-shadow: none;
    --button-bg: transparent;
    --button-color: var(--button-danger-color);
    --button-icon-color: inherit;
    --button-border-color: var(--button-danger-color);
    --button-hover-bg: var(--button-danger-hover-bg);
    --button-hover-color: var(--button-danger-hover-color);
    --button-hover-border-color: var(--button-danger-hover-border-color);
    --button-active-box-shadow: var(--button-danger-active-box-shadow);
    --button-active-bg: var(--button-danger-active-bg);
    --button-active-color: var(--button-danger-active-color);
    --button-active-border-color: var(--button-danger-active-border-color);
}

.btn-outline-info,
.btn-outline-info.btn.disabled,
.btn-outline-info.btn:disabled {
    --button-box-shadow: none;
    --button-bg: transparent;
    --button-color: var(--button-info-color);
    --button-icon-color: inherit;
    --button-border-color: var(--button-info-color);
    --button-hover-bg: var(--button-info-hover-bg);
    --button-hover-color: var(--button-info-hover-color);
    --button-hover-border-color: var(--button-info-hover-border-color);
    --button-active-box-shadow: var(--button-info-active-box-shadow);
    --button-active-bg: var(--button-info-active-bg);
    --button-active-color: var(--button-info-active-color);
    --button-active-border-color: var(--button-info-active-border-color);
}

/* Link-style buttons (e.g. the "add new item" / "delete item" buttons of collection fields).
   Defined explicitly so they use EasyAdmin's link colors instead of the Bootstrap link colors
   that would otherwise leak in through the --bs-btn-* bridge above. */
.btn-link,
.btn-link.btn.disabled,
.btn-link.btn:disabled {
    --button-box-shadow: none;
    --button-bg: transparent;
    --button-color: var(--link-color);
    --button-icon-color: inherit;
    --button-border-color: transparent;
    --button-hover-bg: transparent;
    --button-hover-color: var(--link-hover-color);
    --button-hover-border-color: transparent;
    --button-active-box-shadow: none;
    --button-active-color: var(--link-hover-color);
    --button-active-bg: transparent;
    --button-active-border-color: transparent;
}
.btn-link:not(:disabled):not(.disabled):hover,
.btn-link:not(:disabled):not(.disabled):focus-visible {
    text-decoration: underline;
}

.btn-link.btn-link-danger,
.btn-link.btn-link-danger.btn.disabled,
.btn-link.btn-link-danger.btn:disabled {
    --button-color: var(--link-danger-color);
    --button-hover-color: var(--link-danger-hover-color);
    --button-active-color: var(--link-danger-hover-color);
}

.btn-invisible,
.btn-invisible.btn.disabled,
.btn-invisible.btn:disabled {
    --button-box-shadow: var(--button-invisible-box-shadow);
    --button-bg: var(--button-invisible-bg);
    --button-color: var(--button-invisible-color);
    --button-icon-color: var(--button-invisible-icon-color);
    --button-border-color: var(--button-invisible-border-color);
    --button-hover-bg: var(--button-invisible-hover-bg);
    --button-hover-color: var(--button-invisible-hover-color);
    --button-hover-border-color: var(--button-invisible-hover-border-color);
    --button-active-box-shadow: var(--button-invisible-active-box-shadow);
    --button-active-color: var(--button-invisible-active-color);
    --button-active-bg: var(--button-invisible-active-bg);
    --button-active-border-color: var(--button-invisible-active-border-color);
}
.btn-invisible:hover,
.btn-invisible:focus,
.btn-invisible:focus-visible,
.btn-invisible:active {
    box-shadow: none;
}

.btn-invisible.btn-danger,
.btn-invisible.btn-danger.btn.disabled,
.btn-invisible.btn-danger.btn:disabled {
    --button-color: var(--button-invisible-danger-color);
    --button-icon-color: var(--button-invisible-danger-hover-icon-color);
    --button-hover-color: var(--button-invisible-danger-hover-color);
    --button-hover-bg: var(--button-invisible-danger-hover-hover-bg);
    --button-active-color: var(--button-invisible-danger-active-color);
    --button-active-bg: var(--button-invisible-danger-hover-active-bg);
}
.btn-invisible.btn-danger:hover,
.btn-invisible.btn-danger:focus,
.btn-invisible.btn-danger:focus-visible,
.btn-invisible.btn-danger:active {
    box-shadow: none;
}

/* Button sizes */
.btn-sm {
    --button-font-size: var(--button-font-size-sm);
    --button-padding-y: var(--button-padding-y-sm);
    --button-padding-x: var(--button-padding-x-sm);
    --button-icon-gap: var(--ea-sp-2);
    --button-height: var(--ea-sp-14);
}

.btn-lg {
    --button-font-size: var(--button-font-size-lg);
    --button-padding-y: var(--button-padding-y-lg);
    --button-padding-x: var(--button-padding-x-lg);
    --button-height: var(--ea-sp-18);
}

.btn-block {
    display: block;
    inline-size: 100%;
    place-content: center;
}

/* Disabled state */
.btn.disabled,
.btn:disabled {
    background: var(--button-bg);
    border-color: var(--button-border-color);
    color: var(--button-color);
    box-shadow: none;
    cursor: not-allowed;
    opacity: var(--button-disabled-opacity);
    pointer-events: none;
}

/* For anchor tags styled as buttons */
a.btn.disabled,
fieldset:disabled a.btn {
    pointer-events: unset;
}

/* Button content elements */
.btn > .btn-label {
    align-items: center;
    display: inline-flex;
    margin: 0;
}

.btn > .btn-icon {
    color: var(--button-icon-color, currentColor);
    display: grid;
    flex-shrink: 0;
    place-content: center;
    inline-size: 1em;
}

.btn .btn-icon svg {
    color: var(--button-icon-color, currentColor);
    fill: var(--button-icon-color, currentColor);
}

.btn > .btn-icon + .btn-label,
.btn > i + .btn-label {
    margin-inline-start: 0;
}

.btn > .btn-label + .btn-icon,
.btn > .btn-label + i {
    margin-inline-start: 0;
}

.btn > .btn-icon + .btn-label:empty {
    display: none;
}

/* Icon-only buttons render as a true square: no padding and a minimum width equal to the button
   height (28/32/36px for sm/md/lg, like shadcn's icon sizes). Scoped to buttons that actually
   contain an EA icon so that native Bootstrap buttons (no .btn-icon and no .btn-label) keep
   their horizontal padding. */
.btn:has(.btn-icon):not(:has(.btn-label)) {
    justify-content: center;
    min-inline-size: var(--button-height, var(--ea-sp-16));
    padding: 0;
}

/* Button groups: adjacent buttons overlap their borders and flatten their inner corners to
   render as a single segmented control. Bootstrap ships equivalent rules but they live in the
   'vendor' layer, so the 'ea' layer's .btn border-radius would override them; these mirror
   Bootstrap's selectors with logical properties so RTL works. */
.btn-group > .btn-group:not(:first-child),
.btn-group > :not(.btn-check:first-child) + .btn {
    margin-inline-start: calc(-1 * var(--button-border-width, var(--border-width)));
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn.dropdown-toggle-split:first-child,
.btn-group > .btn-group:not(:last-child) > .btn {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.btn-group > .btn:nth-child(n + 3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
.btn-group > .btn.dropdown-toggle.dropdown-toggle-split {
    padding-inline-end: var(--ea-sp-4);
    padding-inline-start: var(--ea-sp-4);
}
.dropdown-menu .dropdown-submenu .dropdown-toggle.dropdown-toggle-split {
    border: 0;
    inline-size: auto;
}

/* Block buttons (full width) */
.btn-block {
    display: flex;
    inline-size: 100%;
}

/* Button with badge */
.btn .badge {
    margin-inline-start: var(--button-icon-gap);
}

/* Loading state placeholder */
.btn.is-loading {
    color: transparent;
    pointer-events: none;
    position: relative;
}

.btn.is-loading::after {
    animation: button-spin 500ms linear infinite;
    /* the spinner can't use currentColor because .is-loading sets 'color: transparent' to hide
       the label; the --button-color token still holds the variant's real text color */
    border: 2px solid var(--button-color, currentColor);
    border-radius: var(--border-radius-full);
    border-inline-end-color: transparent;
    border-block-start-color: transparent;
    content: "";
    block-size: 1em;
    inset-inline-start: 50%;
    position: absolute;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
    inline-size: 1em;
}

@keyframes button-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Ensure compatibility with existing button usage */
.btn > i {
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
}

/* RTL support using logical properties */
[dir="rtl"] .btn > .btn-icon + .btn-label,
[dir="rtl"] .btn > i + .btn-label {
    margin-inline-start: 0;
    margin-inline-end: 0;
}

[dir="rtl"] .btn > .btn-label + .btn-icon,
[dir="rtl"] .btn > .btn-label + i {
    margin-inline-start: 0;
    margin-inline-end: 0;
}

/* fallback focus ring for buttons excluded from the main :focus-visible rule at the top of this
   file (e.g. disabled anchor buttons, which remain focusable); on regular buttons that rule wins
   because it has a higher specificity */
.btn:focus-visible {
    outline: var(--ea-focus-ring-width) solid var(--link-color);
    outline-offset: 2px;
}

/* Ensure button text doesn't wrap */
.btn {
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Allow wrapping when needed */
.btn.text-wrap {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}