/*
 * Atom button system
 * -------------------
 * A single, consistent set of buttons for the whole admin panel.
 * Namespaced under .atom-btn on purpose: it never touches Bootstrap/Limitless
 * .btn / .btn-sm / .btn-outline (used by datatables, swal2, icon buttons, ...),
 * so it is safe to load everywhere. Load this file AFTER core.css / app.css.
 *
 * Usage:  <button class="atom-btn atom-btn-primary">Opslaan</button>
 * Sizes:  .atom-btn-sm  .atom-btn-lg   Full width: .atom-btn-block
 * Variants: primary secondary danger danger-soft warning warning-soft ghost line
 */

:root {
    --atom-btn-primary: #6d3bd1;            --atom-btn-primary-hover: #5c30b8;
    --atom-btn-secondary: #eef0f3;          --atom-btn-secondary-hover: #e3e6ea;      --atom-btn-secondary-fg: #2a2f3a;
    --atom-btn-danger: #e04653;             --atom-btn-danger-hover: #cc3a47;
    --atom-btn-dangersoft: #fce9eb;         --atom-btn-dangersoft-hover: #f7d6da;     --atom-btn-dangersoft-fg: #c22f3d;
    --atom-btn-warning: #ffbe0b;            --atom-btn-warning-hover: #f0ad00;        --atom-btn-warning-fg: #231a05;
    --atom-btn-warningsoft: #fdf0cf;        --atom-btn-warningsoft-hover: #fae7b4;    --atom-btn-warningsoft-fg: #8a5200;
    --atom-btn-ghost-fg: #6d3bd1;           --atom-btn-ghost-hover: #f1ecfb;
    --atom-btn-line-border: #d3d7dd;        --atom-btn-line-fg: #2a2f3a;              --atom-btn-line-hover: #f4f6f8;
    --atom-btn-focus: rgba(109, 59, 209, .35);
    --atom-btn-focus-danger: rgba(224, 70, 83, .35);
    /* depth */
    --atom-btn-shadow: 0 1px 2px rgba(16, 24, 40, .09);
    --atom-btn-shadow-primary: 0 2px 11px -3px rgba(109, 59, 209, .5), 0 1px 2px rgba(16, 24, 40, .12);
    --atom-btn-shadow-primary-hover: 0 7px 18px -4px rgba(109, 59, 209, .6);
    --atom-btn-shadow-danger: 0 2px 11px -3px rgba(224, 70, 83, .5), 0 1px 2px rgba(16, 24, 40, .12);
    --atom-btn-shadow-danger-hover: 0 7px 18px -4px rgba(224, 70, 83, .6);
    --atom-btn-shadow-warning-hover: 0 5px 14px -4px rgba(245, 158, 11, .5);
}

.atom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: .5rem;
    cursor: pointer;
    vertical-align: middle;
    box-shadow: var(--atom-btn-shadow);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease, transform .16s ease;
    -webkit-appearance: none;
    appearance: none;
    /* Prepare a GPU layer so the text stays crisp (not blurry) while it lifts on
       hover, without transforming at rest. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

.atom-btn:hover { transform: translate3d(0, -2px, 0); }
.atom-btn:active { transform: translate3d(0, 0, 0); }
.atom-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--atom-btn-focus); }
/* .disabled too: the Bootstrap habit, and code in projects sets it on a button
   while it saves. Without this an .atom-btn stayed clickable during a save and
   a second click sent it twice. */
.atom-btn:disabled,
.atom-btn.is-disabled,
.atom-btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; }
.atom-btn > svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Transparent variants cast no shadow. */
.atom-btn-ghost, .atom-btn-line { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .atom-btn:hover, .atom-btn:active { transform: none; }
}

.atom-btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.atom-btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.atom-btn-block { display: flex; width: 100%; }

.atom-btn-primary { background: var(--atom-btn-primary); color: #fff; box-shadow: var(--atom-btn-shadow-primary); }
.atom-btn-primary:hover { background: var(--atom-btn-primary-hover); color: #fff; box-shadow: var(--atom-btn-shadow-primary-hover); }

.atom-btn-secondary { background: var(--atom-btn-secondary); color: var(--atom-btn-secondary-fg); }
.atom-btn-secondary:hover { background: var(--atom-btn-secondary-hover); color: var(--atom-btn-secondary-fg); }

.atom-btn-danger { background: var(--atom-btn-danger); color: #fff; box-shadow: var(--atom-btn-shadow-danger); }
.atom-btn-danger:focus-visible { box-shadow: 0 0 0 3px var(--atom-btn-focus-danger); }
.atom-btn-danger:hover { background: var(--atom-btn-danger-hover); color: #fff; box-shadow: var(--atom-btn-shadow-danger-hover); }

.atom-btn-danger-soft { background: var(--atom-btn-dangersoft); color: var(--atom-btn-dangersoft-fg); }
.atom-btn-danger-soft:hover { background: var(--atom-btn-dangersoft-hover); color: var(--atom-btn-dangersoft-fg); }

.atom-btn-warning { background: var(--atom-btn-warning); color: var(--atom-btn-warning-fg); }
.atom-btn-warning:hover { background: var(--atom-btn-warning-hover); color: var(--atom-btn-warning-fg); box-shadow: var(--atom-btn-shadow-warning-hover); }

.atom-btn-warning-soft { background: var(--atom-btn-warningsoft); color: var(--atom-btn-warningsoft-fg); }
.atom-btn-warning-soft:hover { background: var(--atom-btn-warningsoft-hover); color: var(--atom-btn-warningsoft-fg); }

.atom-btn-ghost { background: transparent; color: var(--atom-btn-ghost-fg); }
.atom-btn-ghost:hover { background: var(--atom-btn-ghost-hover); color: var(--atom-btn-ghost-fg); }

.atom-btn-line { background: transparent; color: var(--atom-btn-line-fg); border-color: var(--atom-btn-line-border); }
.atom-btn-line:hover { background: var(--atom-btn-line-hover); color: var(--atom-btn-line-fg); }

/* Links styled as buttons.
   A bare <a> picks up the theme's link colour, and several theme selectors
   score higher than the single classes above, so an <a class="atom-btn"> can
   lose its text colour depending on where it sits. Repeating the colours one
   specificity step higher makes a link button look identical to a real
   <button> on every background. */
a.atom-btn { text-decoration: none; }

a.atom-btn.atom-btn-primary,
a.atom-btn.atom-btn-primary:hover { color: #fff; }

a.atom-btn.atom-btn-secondary,
a.atom-btn.atom-btn-secondary:hover { color: var(--atom-btn-secondary-fg); }

a.atom-btn.atom-btn-danger,
a.atom-btn.atom-btn-danger:hover { color: #fff; }

a.atom-btn.atom-btn-danger-soft,
a.atom-btn.atom-btn-danger-soft:hover { color: var(--atom-btn-dangersoft-fg); }

a.atom-btn.atom-btn-warning,
a.atom-btn.atom-btn-warning:hover { color: var(--atom-btn-warning-fg); }

a.atom-btn.atom-btn-warning-soft,
a.atom-btn.atom-btn-warning-soft:hover { color: var(--atom-btn-warningsoft-fg); }

a.atom-btn.atom-btn-ghost,
a.atom-btn.atom-btn-ghost:hover { color: var(--atom-btn-ghost-fg); }

a.atom-btn.atom-btn-line,
a.atom-btn.atom-btn-line:hover { color: var(--atom-btn-line-fg); }

/* Sticky-submit save bar: the old theme right-aligned the save action with a
   float on .btn; our buttons dropped .btn, so lay the bar out with flex and let
   the existing ml-auto push the primary/save button to the right. */
.sticky-submit .card-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The login shell clips <a> text to a gradient; restore normal text on
   anchor-buttons there so they stay readable. */
.login-body a.atom-btn,
.login-box a.atom-btn {
    -webkit-text-fill-color: currentColor;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

/*
 * Keyboard shortcut keycaps inside (or next to) a button.
 *   <button class="atom-btn atom-btn-secondary">Cursief
 *       <span class="atom-kbd-group"><kbd class="atom-kbd">Ctrl</kbd>
 *           <span class="atom-kbd-plus">+</span><kbd class="atom-kbd">I</kbd></span>
 *   </button>
 * Adapts to the button colour via currentColor (translucent on filled buttons,
 * subtle outline on light ones), with a neutral fallback for old browsers.
 */
.atom-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55em;
    height: 1.6em;
    padding: 0 .45em;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace;
    font-size: .76em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .01em;
    border-radius: 6px;
    color: inherit;
    background: rgba(130, 130, 130, .16);
    border: 1px solid rgba(130, 130, 130, .30);
    box-shadow: inset 0 -1px 0 rgba(130, 130, 130, .22);
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 16%, transparent);
}

.atom-kbd-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.atom-kbd-group .atom-kbd-plus {
    opacity: .55;
    font-size: .8em;
}

/* Third-party fileuploader "choose file" button: retire its blue/purple
   gradient pill and match the button system. Literal colour fallbacks first
   (the plugin can render in a scope where our CSS variables don't resolve),
   then the variable so it follows the button system; gradient explicitly
   killed. */
.fileuploader-input .fileuploader-input-button,
.fileuploader-input-button {
    background: #6d3bd1 !important;
    background: var(--atom-btn-primary, #6d3bd1) !important;
    background-image: none !important;
    background-size: auto !important;
    color: #fff !important;
    border: none !important;
    border-radius: .5rem !important;
    box-shadow: 0 2px 11px -3px rgba(109, 59, 209, .5), 0 1px 2px rgba(16, 24, 40, .12) !important;
    box-shadow: var(--atom-btn-shadow-primary, 0 2px 11px -3px rgba(109, 59, 209, .5)) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    transition: background-color .15s ease, box-shadow .18s ease, transform .12s ease !important;
}
.fileuploader-input .fileuploader-input-button:hover,
.fileuploader-input-button:hover {
    background: #5c30b8 !important;
    background: var(--atom-btn-primary-hover, #5c30b8) !important;
    background-image: none !important;
    background-position: center !important;
    box-shadow: 0 7px 18px -4px rgba(109, 59, 209, .6) !important;
    box-shadow: var(--atom-btn-shadow-primary-hover, 0 7px 18px -4px rgba(109, 59, 209, .6)) !important;
    transform: translateY(-1px) !important;
}

/* Loading spinner helper: <span class="atom-btn-spinner"></span> */
.atom-btn-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: atom-btn-spin .6s linear infinite;
}
@keyframes atom-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .atom-btn-spinner { animation: none; } }

/* A button with only an icon in it: square, so it does not take on the width
   of a text button. Combines with the colour variants and with -sm. */
.atom-icon-btn { width: 2.25rem; padding-left: 0; padding-right: 0; }
.atom-icon-btn.atom-btn-sm { width: 2rem; }