/* =============================================================
   Button hover — one gradient hover for every action button.

   On hover a gradient layer sweeps cleanly across the button from left to
   right behind a narrow soft edge, and draws back the same way on leaving; a soft glow in the same hue eases in underneath.
   While the pointer stays, the gradient's colours glide from one end of
   the button to the other and back.
   Filled buttons take a gradient a shade off their own colour so the sweep
   reads (deep blue into sky over brand blue, crimson into pink over red,
   and so on); white and light buttons take an opaque pale-blue sweep and a
   blue border, so their text stays as it was.

   The layer is the button's ::before, placed under the label inside the
   button's own stacking context, so it needs no extra markup and does not
   clip badges or menus. Gradients and glows are the --app-btn-* tokens in
   app/themes/themes.css (light and dark).

   Loaded after page styles (see _Layout.cshtml) because most button rules
   set their hover with !important; only the glow and border need it here.
   Not covered on purpose: .btn-link, .btn-close, icon-only buttons and
   <input type="submit"> (inputs cannot draw a ::before).
   ============================================================= */

/* Every button the hover applies to. Zero specificity here, so a page that
   positions a button absolutely still wins. */
:where(
    .btn:not(.btn-link):not(.btn-close),
    .app-btn,
    .admin-primary-btn, .admin-outline-btn, .admin-danger-btn, .admin-dark-btn,
    .emp-btn-primary, .emp-btn-outline,
    .rx-btn-primary, .rx-btn-submit, .rx-btn-outline, .rx-btn-dark,
    .rp-btn-dark, .rp-btn-outline,
    .lm-btn-dark,
    .doc-btn-primary, .upload-btn-primary, .fg-attendance-capture-btn, .login-submit, .ai-assist-launcher, .attendance-action-btn, .fg-my-attendance-action, .fg-my-attendance-retry,
    .notification-outline-btn
) {
    position: relative;
    isolation: isolate;
    --btn-grad: var(--app-btn-grad-soft, linear-gradient(120deg, rgba(37, 99, 235, .05), rgba(14, 165, 233, .18) 50%, rgba(37, 99, 235, .05)));
    --btn-glow: var(--app-btn-glow-soft, 0 6px 16px -8px rgba(37, 99, 235, .3));
}

/* ---------- Tones ---------- */
:is(.btn-primary, .btn-outline-primary, .app-btn-primary, .admin-primary-btn, .emp-btn-primary, .emp-add-btn,
    .rx-btn-primary, .rx-btn-submit, .rp-btn-dark, .doc-btn-primary, .upload-btn-primary, .fg-attendance-capture-btn, .login-submit, .ai-assist-launcher, .fg-record-attn-submit-btn,
    .lm-btn-primary) {
    --btn-grad: var(--app-btn-grad-primary, linear-gradient(120deg, #1e40af, #0ea5e9 50%, #1e40af));
    --btn-glow: var(--app-btn-glow-primary, 0 8px 20px -8px rgba(37, 99, 235, .55));
}

:is(.btn-danger, .btn-outline-danger, .app-btn-danger, .admin-danger-btn, .btn-checkout) {
    --btn-grad: var(--app-btn-grad-danger, linear-gradient(120deg, #be123c, #fb7185 50%, #be123c));
    --btn-glow: var(--app-btn-glow-danger, 0 8px 20px -8px rgba(225, 29, 72, .55));
}

:is(.btn-success, .btn-outline-success, .btn-checkin, .fg-my-attendance-checkin, .fg-my-attendance-endbreak) {
    --btn-grad: var(--app-btn-grad-success, linear-gradient(120deg, #047857, #14b8a6 50%, #047857));
    --btn-glow: var(--app-btn-glow-success, 0 8px 20px -8px rgba(13, 148, 136, .55));
}

:is(.btn-warning, .btn-outline-warning, .fg-my-attendance-break) {
    --btn-grad: var(--app-btn-grad-warning, linear-gradient(120deg, #ea580c, #f59e0b 50%, #ea580c));
    --btn-glow: var(--app-btn-glow-warning, 0 8px 20px -8px rgba(249, 115, 22, .55));
}

:is(.btn-info, .btn-outline-info) {
    --btn-grad: var(--app-btn-grad-info, linear-gradient(120deg, #0369a1, #38bdf8 50%, #0369a1));
    --btn-glow: var(--app-btn-glow-info, 0 8px 20px -8px rgba(14, 165, 233, .55));
}

:is(.btn-dark, .btn-outline-dark, .btn-secondary, .admin-dark-btn, .rx-btn-dark, .lm-btn-dark) {
    --btn-grad: var(--app-btn-grad-dark, linear-gradient(120deg, #0f172a, #1e40af 50%, #0f172a));
    --btn-glow: var(--app-btn-glow-dark, 0 8px 20px -8px rgba(15, 23, 42, .55));
}

/* White and light buttons: an opaque pale-blue sweep, so the hover reads
   clearly over a white surface while the dark label stays as it was. Listed
   after the dark tone because a secondary button in a page header is drawn
   white (design-button.css) and must not take the navy gradient. */
:is(.btn-light, .btn-outline-secondary, .btn-ghost, .btn-outline-figma,
    .app-btn:not(.app-btn-primary):not(.app-btn-danger), .admin-outline-btn, .emp-btn-outline,
    .rx-btn-outline, .rp-btn-outline, .notification-outline-btn,
    .fg-my-attendance-checkout, .fg-my-attendance-retry, .fg-record-attn-cancel-btn),
:is(.page-header, .content-header) .btn-secondary {
    --btn-grad: var(--app-btn-grad-light, linear-gradient(120deg, #eff6ff, #bfdbfe 50%, #eff6ff));
    --btn-glow: var(--app-btn-glow-light, 0 8px 18px -8px rgba(37, 99, 235, .45));
}

/* ---------- The gradient layer ---------- */
:is(
    .btn:not(.btn-link):not(.btn-close),
    .app-btn,
    .admin-primary-btn, .admin-outline-btn, .admin-danger-btn, .admin-dark-btn,
    .emp-btn-primary, .emp-btn-outline,
    .rx-btn-primary, .rx-btn-submit, .rx-btn-outline, .rx-btn-dark,
    .rp-btn-dark, .rp-btn-outline,
    .lm-btn-dark,
    .doc-btn-primary, .upload-btn-primary, .fg-attendance-capture-btn, .login-submit, .ai-assist-launcher, .attendance-action-btn, .fg-my-attendance-action, .fg-my-attendance-retry,
    .notification-outline-btn
)::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: var(--btn-grad);
    /* Twice the button's width, so the colours can glide end to end and
       back. The glide is paused off hover, so it resumes where it stopped
       rather than jumping back to the start. */
    background-size: 200% 100%;
    background-position: 0% 50%;
    animation: btn-grad-glide 2.4s ease-in-out infinite alternate paused;
    /* The sweep: a mask twice the button's width, opaque on its left half
       and clear on its right half, with a narrow soft edge (a fifth of the
       button) between. Parked at the right it hides the layer; sliding it
       to the left carries that edge cleanly across the button from the
       start to the end, and back again on leaving. */
    -webkit-mask-image: linear-gradient(90deg, #000 0 45%, transparent 55% 100%);
    mask-image: linear-gradient(90deg, #000 0 45%, transparent 55% 100%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    pointer-events: none;
    transition:
        -webkit-mask-position .6s cubic-bezier(.45, 0, .25, 1),
        mask-position .6s cubic-bezier(.45, 0, .25, 1),
        filter .15s ease;
}

:is(
    .btn:not(.btn-link):not(.btn-close),
    .app-btn,
    .admin-primary-btn, .admin-outline-btn, .admin-danger-btn, .admin-dark-btn,
    .emp-btn-primary, .emp-btn-outline,
    .rx-btn-primary, .rx-btn-submit, .rx-btn-outline, .rx-btn-dark,
    .rp-btn-dark, .rp-btn-outline,
    .lm-btn-dark,
    .doc-btn-primary, .upload-btn-primary, .fg-attendance-capture-btn, .login-submit, .ai-assist-launcher, .attendance-action-btn, .fg-my-attendance-action, .fg-my-attendance-retry,
    .notification-outline-btn
):hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    box-shadow: var(--btn-glow) !important;
}

/* The glow, border and label ease in and out with the sweep rather than
   snapping (the button rules set a .16s transition with !important). */
:is(
    .btn:not(.btn-link):not(.btn-close),
    .app-btn,
    .admin-primary-btn, .admin-outline-btn, .admin-danger-btn, .admin-dark-btn,
    .emp-btn-primary, .emp-btn-outline,
    .rx-btn-primary, .rx-btn-submit, .rx-btn-outline, .rx-btn-dark,
    .rp-btn-dark, .rp-btn-outline,
    .lm-btn-dark,
    .doc-btn-primary, .upload-btn-primary, .fg-attendance-capture-btn, .login-submit, .ai-assist-launcher, .attendance-action-btn, .fg-my-attendance-action, .fg-my-attendance-retry,
    .notification-outline-btn
) {
    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .45s ease,
        box-shadow .55s cubic-bezier(.4, 0, .2, 1),
        transform .2s ease,
        opacity .2s ease !important;
}

:is(
    .btn:not(.btn-link):not(.btn-close),
    .app-btn,
    .admin-primary-btn, .admin-outline-btn, .admin-danger-btn, .admin-dark-btn,
    .emp-btn-primary, .emp-btn-outline,
    .rx-btn-primary, .rx-btn-submit, .rx-btn-outline, .rx-btn-dark,
    .rp-btn-dark, .rp-btn-outline,
    .lm-btn-dark,
    .doc-btn-primary, .upload-btn-primary, .fg-attendance-capture-btn, .login-submit, .ai-assist-launcher, .attendance-action-btn, .fg-my-attendance-action, .fg-my-attendance-retry,
    .notification-outline-btn
):hover:not(:disabled):not(.disabled):not([aria-disabled="true"])::before {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
    animation-play-state: running;
}

@keyframes btn-grad-glide {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* Outline buttons in a colour fill with their gradient, so the label turns
   white (dark on amber), as Bootstrap's own hover does. */
:is(.btn-outline-primary, .btn-outline-danger, .btn-outline-success, .btn-outline-info,
    .btn-outline-dark, .btn-checkout):hover:not(:disabled):not(.disabled) {
    color: #fff;
}

.btn-outline-warning:hover:not(:disabled):not(.disabled) {
    color: #1f2937;
}

/* Blue outline buttons rest in the standard brand blue, like each page's main
   action, and take the blue gradient on hover, instead of sitting white and
   turning blue only under the pointer. !important because design-button.css
   forces header outline buttons white with !important. */
.btn-outline-primary,
.page-header .btn-outline-primary,
.mobility-deptteams-actions .btn-outline-primary,
.btn-outline-primary:is(:hover, :focus, :active, .active),
.page-header .btn-outline-primary:is(:hover, :focus, :active, .active),
.mobility-deptteams-actions .btn-outline-primary:is(:hover, :focus, :active, .active) {
    background-color: var(--fg-primary, #2563eb) !important;
    border-color: var(--fg-primary, #2563eb) !important;
    color: #fff !important;
}

/* Pressed: the layer dims a touch. */
:is(
    .btn:not(.btn-link):not(.btn-close),
    .app-btn,
    .admin-primary-btn, .admin-outline-btn, .admin-danger-btn, .admin-dark-btn,
    .emp-btn-primary, .emp-btn-outline,
    .rx-btn-primary, .rx-btn-submit, .rx-btn-outline, .rx-btn-dark,
    .rp-btn-dark, .rp-btn-outline,
    .lm-btn-dark,
    .doc-btn-primary, .upload-btn-primary, .fg-attendance-capture-btn, .login-submit, .ai-assist-launcher, .attendance-action-btn, .fg-my-attendance-action, .fg-my-attendance-retry,
    .notification-outline-btn
):active:not(:disabled):not(.disabled)::before {
    filter: brightness(.92);
}

/* Keyboard focus keeps its ring while hovered. */
:is(.btn, .app-btn):hover:focus-visible:not(:disabled) {
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, .25)), var(--btn-glow) !important;
}

/* ---------- Neutral and outline buttons ----------
   The pale-blue sweep (light tone above) over the button's own surface, a blue border, and the
   text left alone. Bootstrap fills .btn-outline-secondary grey with white
   text on hover; it keeps its surface and text here so the tint reads. */
:is(.app-btn:not(.app-btn-primary):not(.app-btn-danger), .admin-outline-btn, .emp-btn-outline,
    .rx-btn-outline, .rp-btn-outline, .notification-outline-btn,
    .btn-outline-secondary, .btn-light, .btn-ghost, .btn-outline-figma,
    .fg-my-attendance-checkout, .fg-my-attendance-retry, .fg-record-attn-cancel-btn):hover:not(:disabled):not(.disabled) {
    border-color: var(--app-primary-border, #bfdbfe) !important;
}

:is(.btn-outline-secondary, .btn-light):hover:not(:disabled):not(.disabled) {
    background-color: var(--app-card, #ffffff);
    color: var(--app-text-strong, #0f172a);
}


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    :is(.btn, .app-btn, .admin-primary-btn, .admin-outline-btn, .admin-danger-btn, .admin-dark-btn,
        .emp-btn-primary, .emp-btn-outline, .rx-btn-primary, .rx-btn-submit, .rx-btn-outline, .rx-btn-dark,
        .rp-btn-dark, .rp-btn-outline, .lm-btn-dark, .doc-btn-primary, .upload-btn-primary, .fg-attendance-capture-btn, .login-submit, .ai-assist-launcher, .attendance-action-btn, .fg-my-attendance-action, .fg-my-attendance-retry,
        .notification-outline-btn)::before {
        transition: none;
        animation: none;
    }
}

:is([data-reduce-animations="true"], .reduce-motion) :is(.btn, .app-btn, .admin-primary-btn, .admin-outline-btn,
    .admin-danger-btn, .admin-dark-btn, .emp-btn-primary, .emp-btn-outline, .rx-btn-primary, .rx-btn-submit,
    .rx-btn-outline, .rx-btn-dark, .rp-btn-dark, .rp-btn-outline, .lm-btn-dark, .doc-btn-primary,
    .upload-btn-primary, .fg-attendance-capture-btn, .login-submit, .ai-assist-launcher, .attendance-action-btn, .fg-my-attendance-action, .fg-my-attendance-retry, .notification-outline-btn)::before {
    transition: none;
    animation: none;
}