/* Smart Apothiki: primary buttons (.btn-brand), solid logo blue.
 *
 * Use
 *   Pages that extend base_app.html:  class="btn btn-brand"   (.btn gives the size)
 *   Stand-alone pages:                 class="btn-brand" next to their own Tailwind
 *                                      size utilities, with this file linked in <head>.
 *   Same look on <button> and <a>. Disabled: the disabled attribute, or
 *   aria-disabled="true" on a link.
 *
 * This file only paints. It never sets display, padding, border, width, height
 * or font size, so a button keeps the same box in every state.
 *
 * Colours: one flat logo blue (#2359f9, --sa-brand), darker on hover (#1a46d6,
 * --sa-brand-600) and pressed (#1638b0, --sa-brand-700). White text is 5.4:1 at
 * rest and more in the other states, WCAG AA for text.
 *
 * The selectors start with :root on purpose. The Tailwind Play CDN appends its
 * <style> at the end of <head>, after this file, so without the extra weight
 * its .btn:focus ring, .btn:disabled and the background reset on
 * [type=submit] would override these rules.
 */

:root .btn-brand,
:root .btn-brand:focus {
    color: #fff;
    background-color: #2359f9;
    background-image: none;
    /* Same four layers in every state so the shadows can animate. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),   /* faint top edge */
        inset 0 0 0 0 rgba(3, 30, 100, 0),         /* pressed shade (off) */
        0 1px 2px rgba(7, 27, 102, 0.16),          /* contact shadow */
        0 4px 12px -4px rgba(35, 89, 249, 0.45);   /* blue glow */
    transition:
        background-color 150ms ease, box-shadow 150ms ease, color 150ms ease, opacity 150ms ease,
        translate 150ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: a deeper blue with a wider glow. Only where a real hover exists,
   so a tap on a phone does not leave the button lit. */
@media (hover: hover) {
    :root .btn-brand:hover:where(:not(:disabled, [aria-disabled="true"])) {
        background-color: #1a46d6;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            inset 0 0 0 0 rgba(3, 30, 100, 0),
            0 2px 4px rgba(7, 27, 102, 0.16),
            0 8px 18px -6px rgba(35, 89, 249, 0.55);
    }
}

/* Every button (.btn and every variant, and .btn-brand on stand-alone pages)
   lifts by 3px with a mouse or trackpad, and drops back while pressed. The
   shadow under it grows at the same time; that is what makes the lift read.
   "translate" composes with any transform the button already has; the press
   uses "transform" (here and in motion.css), so the two never add up.
   Shadows of the other variants go through Tailwind's ring variables, so the
   keyboard focus ring stays. Pressed rules come later in this file and win. */
@media (hover: hover) and (pointer: fine) {
    :root :is(.btn, .btn-brand):hover:where(:not(:disabled, [aria-disabled="true"])) {
        translate: 0 -3px;
    }
    :root .btn-brand:hover:where(:not(:disabled, [aria-disabled="true"])) {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            inset 0 0 0 0 rgba(3, 30, 100, 0),
            0 3px 6px rgba(7, 27, 102, 0.14),
            0 10px 22px -6px rgba(35, 89, 249, 0.6);
    }
    :root :is(.btn-outline, .btn-ghost):hover:where(:not(:disabled, [aria-disabled="true"])) {
        --tw-shadow: 0 2px 4px rgba(7, 27, 102, 0.08), 0 8px 18px -6px rgba(7, 27, 102, 0.28);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    :root .btn-danger:hover:where(:not(:disabled, [aria-disabled="true"])) {
        --tw-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 6px rgba(127, 29, 29, 0.16),
                     0 10px 20px -6px rgba(220, 38, 38, 0.5);
    }
}
:root :is(.btn, .btn-brand):active:where(:not(:disabled, [aria-disabled="true"])) {
    translate: none;
}

/* Pressed: the deepest blue, an inner shadow, no lift. */
:root .btn-brand:active:where(:not(:disabled, [aria-disabled="true"])) {
    background-color: #1638b0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0),
        inset 0 2px 5px rgba(3, 30, 100, 0.35),
        0 1px 1px rgba(7, 27, 102, 0.18),
        0 2px 6px -3px rgba(35, 89, 249, 0.3);
    translate: none;
    transform: scale(0.97);
    transition-duration: 60ms;
}

/* Keyboard focus only: a clear cyan ring (3.3:1 against white). */
:root .btn-brand:focus-visible {
    outline: 2px solid #0596dc;
    outline-offset: 2px;
}

/* Disabled: grey-blue, no glow, no movement. */
:root .btn-brand:disabled,
:root .btn-brand[aria-disabled="true"] {
    background-color: #9fb4c8;
    color: rgba(255, 255, 255, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0),
        inset 0 0 0 0 rgba(3, 30, 100, 0),
        0 0 0 0 rgba(7, 27, 102, 0),
        0 0 0 0 rgba(35, 89, 249, 0);
    cursor: not-allowed;
    opacity: 1;
}

/* Secondary buttons (.btn-outline, .btn-ghost): their colours stay in
   input.css; pressed, a soft inner shadow makes them look pushed in. The
   shadow goes through Tailwind's ring variables, so the keyboard focus ring
   stays visible while the button is held down. */
:root .btn-outline:active:where(:not(:disabled, [aria-disabled="true"])),
:root .btn-ghost:active:where(:not(:disabled, [aria-disabled="true"])) {
    --tw-shadow: inset 0 1px 2px rgba(7, 27, 102, 0.16);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Danger button (.btn-danger): keeps its flat red from input.css and gets
   the finish of the primary button: a faint top edge, a contact shadow, and
   an inner shadow when pressed. Disabled has neither. */
:root .btn-danger {
    --tw-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(127, 29, 29, 0.2);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:root .btn-danger:active:where(:not(:disabled, [aria-disabled="true"])) {
    --tw-shadow: inset 0 1px 3px rgba(69, 10, 10, 0.35);
}
:root .btn-danger:disabled,
:root .btn-danger[aria-disabled="true"] {
    --tw-shadow: 0 0 #0000;
}

@media (prefers-reduced-motion: reduce) {
    :root .btn-brand,
    :root .btn-brand:focus { transition: none !important; }
    :root :is(.btn, .btn-brand):hover,
    :root :is(.btn, .btn-brand):active { translate: none !important; transform: none !important; }
}