/* ==========================================================================
   Buttons - the one button system for the whole app

   Every button is Bootstrap's .btn plus ONE variant and, optionally, one size.
   Colours come only from the tokens below: change a token here and every
   button of that kind changes - admin panel, candidate panel, public site,
   modals, toolbars. No other stylesheet sets a button's colour.

   Variants
     .btn-primary          solid green - the action someone came for
     .btn-soft             tinted green - a secondary positive action (Edit)
     .btn-outline-primary  white, green outline - an alternative action
     .btn-neutral          white, grey outline - ordinary, non-committal
     .btn-ghost            no fill, no border - toolbar / low-emphasis
     .btn-danger           solid red - confirm a destructive action
     .btn-outline-danger   white, red outline - delete in a list row
     .btn-warning          solid amber
     .btn-outline-warning  white, amber outline - needs attention
     .btn-inverse          white solid - on a coloured background
     .btn-on-dark          transparent, white outline - on a coloured background
     .btn-link             a link that sits where a button would

   Sizes:  .btn-sm  (default)  .btn-lg       Shape:  .btn-icon (square, icon only)

   Aliases, kept so older markup still lands on the system:
     .btn-success                          = .btn-primary
     .btn-blue, .btn-outline-success       = .btn-soft
     .btn-secondary, .btn-light,
     .btn-outline-secondary                = .btn-neutral
     .btn-red                              = .btn-outline-danger
     .btn-info                             = .btn-soft

   Flat colours only - no gradients.
   ========================================================================== */

:root {
    /* shape */
    --btn-radius: 8px;
    --btn-font-weight: 600;
    --btn-gap: .5rem;
    --btn-transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    --btn-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    --btn-focus-ring: 0 0 0 3px rgba(25, 135, 84, .25);

    /* sizes: height, horizontal padding, font size */
    --btn-h: 38px;
    --btn-px: 1rem;
    --btn-fs: .875rem;
    --btn-h-sm: 32px;
    --btn-px-sm: .75rem;
    --btn-fs-sm: .8125rem;
    --btn-h-lg: 46px;
    --btn-px-lg: 1.375rem;
    --btn-fs-lg: 1rem;

    /* primary (brand green) */
    --btn-primary: #198754;
    --btn-primary-hover: #146c43;
    --btn-primary-active: #0f5132;
    --btn-primary-ink: #146c43;
    --btn-primary-soft: #e8f3ee;
    --btn-primary-soft-hover: #d4eadf;
    --btn-primary-line: #b7d6c6;

    /* neutral */
    --btn-neutral-bg: #fff;
    --btn-neutral-ink: #344054;
    --btn-neutral-line: #d0d5dd;
    --btn-neutral-hover-bg: #f2f4f7;
    --btn-neutral-hover-ink: #101828;
    --btn-neutral-hover-line: #98a2b3;

    /* danger */
    --btn-danger: #b42318;
    --btn-danger-hover: #912018;
    --btn-danger-soft: #fdecec;
    --btn-danger-line: #f1c0bb;

    /* warning */
    --btn-warning: #b45309;
    --btn-warning-hover: #92400e;
    --btn-warning-soft: #fdf3e7;
    --btn-warning-line: #efd2ad;

    --btn-disabled-opacity: .5;
}


/* ---------- base ---------- */

.btn {
    --bs-btn-padding-x: var(--btn-px);
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: var(--btn-fs);
    --bs-btn-font-weight: var(--btn-font-weight);
    --bs-btn-line-height: 1.2;
    --bs-btn-border-radius: var(--btn-radius);
    --bs-btn-focus-box-shadow: var(--btn-focus-ring);
    --bs-btn-disabled-opacity: var(--btn-disabled-opacity);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-height: var(--btn-h);
    text-decoration: none;
    transition: var(--btn-transition);
}

.btn > svg,
.btn > .cp-icon {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
}

.btn:focus-visible {
    outline: 0;
    box-shadow: var(--btn-focus-ring);
}

.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
    pointer-events: auto;
}

/* a button stripped to its text (.btn-link.p-0 inline in a sentence) keeps no box */
.btn.p-0 {
    min-height: 0;
}

/* ---------- sizes ---------- */

.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-padding-x: var(--btn-px-sm);
    --bs-btn-font-size: var(--btn-fs-sm);
    --bs-btn-border-radius: var(--btn-radius);
    min-height: var(--btn-h-sm);
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-padding-x: var(--btn-px-lg);
    --bs-btn-font-size: var(--btn-fs-lg);
    --bs-btn-border-radius: var(--btn-radius);
    min-height: var(--btn-h-lg);
}

/* icon only: a square the height of its size */
.btn-icon {
    --bs-btn-padding-x: 0;
    width: var(--btn-h);
}

.btn-icon.btn-sm { width: var(--btn-h-sm); }
.btn-icon.btn-lg { width: var(--btn-h-lg); }


/* ---------- variants ---------- */

/* solid green */
.btn-primary,
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-primary);
    --bs-btn-border-color: var(--btn-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-primary-hover);
    --bs-btn-hover-border-color: var(--btn-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-primary-active);
    --bs-btn-active-border-color: var(--btn-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--btn-primary);
    --bs-btn-disabled-border-color: var(--btn-primary);
    box-shadow: var(--btn-shadow);
}

/* tinted green */
.btn-soft,
.btn-blue,
.btn-info,
.btn-outline-success {
    --bs-btn-color: var(--btn-primary-ink);
    --bs-btn-bg: var(--btn-primary-soft);
    --bs-btn-border-color: var(--btn-primary-soft);
    --bs-btn-hover-color: var(--btn-primary-ink);
    --bs-btn-hover-bg: var(--btn-primary-soft-hover);
    --bs-btn-hover-border-color: var(--btn-primary-soft-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-primary);
    --bs-btn-active-border-color: var(--btn-primary);
    --bs-btn-disabled-color: var(--btn-primary-ink);
    --bs-btn-disabled-bg: var(--btn-primary-soft);
    --bs-btn-disabled-border-color: var(--btn-primary-soft);
}

/* white, green outline */
.btn-outline-primary {
    --bs-btn-color: var(--btn-primary-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--btn-primary-line);
    --bs-btn-hover-color: var(--btn-primary-ink);
    --bs-btn-hover-bg: var(--btn-primary-soft);
    --bs-btn-hover-border-color: var(--btn-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-primary);
    --bs-btn-active-border-color: var(--btn-primary);
    --bs-btn-disabled-color: var(--btn-primary-ink);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--btn-primary-line);
    box-shadow: var(--btn-shadow);
}

/* white, grey outline */
.btn-neutral,
.btn-secondary,
.btn-light,
.btn-outline-secondary {
    --bs-btn-color: var(--btn-neutral-ink);
    --bs-btn-bg: var(--btn-neutral-bg);
    --bs-btn-border-color: var(--btn-neutral-line);
    --bs-btn-hover-color: var(--btn-neutral-hover-ink);
    --bs-btn-hover-bg: var(--btn-neutral-hover-bg);
    --bs-btn-hover-border-color: var(--btn-neutral-hover-line);
    --bs-btn-active-color: var(--btn-neutral-hover-ink);
    --bs-btn-active-bg: #e4e7ec;
    --bs-btn-active-border-color: var(--btn-neutral-hover-line);
    --bs-btn-disabled-color: var(--btn-neutral-ink);
    --bs-btn-disabled-bg: var(--btn-neutral-bg);
    --bs-btn-disabled-border-color: var(--btn-neutral-line);
    box-shadow: var(--btn-shadow);
}

/* no fill, no border */
.btn-ghost {
    --bs-btn-color: var(--btn-neutral-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--btn-primary-ink);
    --bs-btn-hover-bg: var(--btn-primary-soft);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--btn-primary-ink);
    --bs-btn-active-bg: var(--btn-primary-soft-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--btn-neutral-ink);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/* a toggled toolbar control (the PDF viewer's "fit") */
.btn-ghost.is-active {
    --bs-btn-color: var(--btn-primary-ink);
    --bs-btn-bg: var(--btn-primary-soft);
    --bs-btn-border-color: var(--btn-primary-line);
}

/* solid red */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-danger);
    --bs-btn-border-color: var(--btn-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-danger-hover);
    --bs-btn-hover-border-color: var(--btn-danger-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-danger-hover);
    --bs-btn-active-border-color: var(--btn-danger-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--btn-danger);
    --bs-btn-disabled-border-color: var(--btn-danger);
    --btn-focus-ring: 0 0 0 3px rgba(180, 35, 24, .25);
    box-shadow: var(--btn-shadow);
}

/* white, red outline: fills red on the way to clicking */
.btn-outline-danger,
.btn-red {
    --bs-btn-color: var(--btn-danger);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--btn-danger-line);
    --bs-btn-hover-color: var(--btn-danger);
    --bs-btn-hover-bg: var(--btn-danger-soft);
    --bs-btn-hover-border-color: var(--btn-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-danger);
    --bs-btn-active-border-color: var(--btn-danger);
    --bs-btn-disabled-color: var(--btn-danger);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--btn-danger-line);
    --btn-focus-ring: 0 0 0 3px rgba(180, 35, 24, .25);
    box-shadow: var(--btn-shadow);
}

/* solid amber */
.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-warning);
    --bs-btn-border-color: var(--btn-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-warning-hover);
    --bs-btn-hover-border-color: var(--btn-warning-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-warning-hover);
    --bs-btn-active-border-color: var(--btn-warning-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--btn-warning);
    --bs-btn-disabled-border-color: var(--btn-warning);
    --btn-focus-ring: 0 0 0 3px rgba(180, 83, 9, .25);
    box-shadow: var(--btn-shadow);
}

/* white, amber outline */
.btn-outline-warning {
    --bs-btn-color: var(--btn-warning-hover);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--btn-warning-line);
    --bs-btn-hover-color: var(--btn-warning-hover);
    --bs-btn-hover-bg: var(--btn-warning-soft);
    --bs-btn-hover-border-color: var(--btn-warning);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-warning);
    --bs-btn-active-border-color: var(--btn-warning);
    --bs-btn-disabled-color: var(--btn-warning-hover);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--btn-warning-line);
    --btn-focus-ring: 0 0 0 3px rgba(180, 83, 9, .25);
    box-shadow: var(--btn-shadow);
}

/* on a coloured background (the public site's hero) */
.btn-inverse {
    --bs-btn-color: var(--btn-primary-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--btn-primary-ink);
    --bs-btn-hover-bg: var(--btn-primary-soft);
    --bs-btn-hover-border-color: var(--btn-primary-soft);
    --bs-btn-active-color: var(--btn-primary-ink);
    --bs-btn-active-bg: var(--btn-primary-soft-hover);
    --bs-btn-active-border-color: var(--btn-primary-soft-hover);
    --btn-focus-ring: 0 0 0 3px rgba(255, 255, 255, .45);
}

.btn-on-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 255, 255, .55);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .12);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, .2);
    --bs-btn-active-border-color: #fff;
    --btn-focus-ring: 0 0 0 3px rgba(255, 255, 255, .45);
}

/* a link where a button would be: same height, no box */
.btn-link {
    --bs-btn-color: var(--btn-primary-ink);
    --bs-btn-hover-color: var(--btn-primary-active);
    --bs-btn-active-color: var(--btn-primary-active);
    --bs-btn-disabled-color: var(--btn-neutral-ink);
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
}


/* ---------- a table's Actions column ----------
   <th class="table-actions"> and <td class="table-actions"> on every list.
   The column shrinks to its buttons and starts them at its left edge, so a
   row's first (main) action sits in the same place on every row, however
   many actions follow it. Order inside the cell: main action (.btn-soft),
   then ordinary ones (.btn-neutral), then Delete (.btn-outline-danger). */

.table th.table-actions,
.table td.table-actions {
    width: 1%;
    padding-right: 24px;
    text-align: left;
    white-space: nowrap;
}

.table td.table-actions > .btn,
.table td.table-actions > form,
.table td.table-actions > .btn-group,
.table td.table-actions > .dropdown {
    display: inline-flex;
    vertical-align: middle;
    margin: 2px 0;
}

.table td.table-actions > * + * {
    margin-left: .375rem !important;
}

/* ---------- SweetAlert2 ----------
   The app's dialogs pass buttonsStyling: false with these classes
   (admin-applications-list, image-size-limit.js); a dialog that keeps
   SweetAlert's own styling gets the same look through .swal2-styled. */

.swal2-custom-confirm-btn,
.swal2-custom-cancel-btn,
.swal2-popup .swal2-actions .swal2-styled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-h);
    margin: 0 4px;
    padding: 0 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    font-size: var(--btn-fs);
    font-weight: var(--btn-font-weight);
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    transition: var(--btn-transition);
}

.swal2-custom-confirm-btn:focus-visible,
.swal2-custom-cancel-btn:focus-visible,
.swal2-popup .swal2-actions .swal2-styled:focus {
    outline: 0;
    box-shadow: var(--btn-focus-ring);
}

.swal2-custom-confirm-btn,
.swal2-popup .swal2-actions .swal2-confirm {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: #fff;
}

.swal2-custom-confirm-btn:hover,
.swal2-popup .swal2-actions .swal2-confirm:hover {
    background: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    color: #fff;
}

.swal2-popup .swal2-actions .swal2-deny {
    background: var(--btn-danger);
    border-color: var(--btn-danger);
    color: #fff;
}

.swal2-custom-cancel-btn,
.swal2-popup .swal2-actions .swal2-cancel {
    background: var(--btn-neutral-bg);
    border-color: var(--btn-neutral-line);
    color: var(--btn-neutral-ink);
}

.swal2-custom-cancel-btn:hover,
.swal2-popup .swal2-actions .swal2-cancel:hover {
    background: var(--btn-neutral-hover-bg);
    border-color: var(--btn-neutral-hover-line);
    color: var(--btn-neutral-hover-ink);
}

.swal2-popup .swal2-actions .swal2-styled:hover {
    background-image: none;
}


@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}