/**
 * Buttons
 *
 * One action colour. Red is a light-surface colour, so the primary button is
 * --color-red-dark (white on it reaches 5.2:1) and never the brighter accent
 * red, on which white is 3.9:1.
 *
 * Heights are 48 / 42 / 34px for primary, secondary and small. Hover changes
 * the background and nothing else — the 3D lift and drop shadow the previous
 * build used on every button is gone, because motion here is feedback, not
 * decoration.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: transparent;
    color: inherit;
    font-family: var(--font-body);
    font-size: 0.90625rem;   /* 14.5px */
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing),
                border-color var(--duration-fast) var(--easing),
                color var(--duration-fast) var(--easing);
}

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

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* German runs about 30% longer than English; let a long label wrap rather
   than push the button out of its column. */
@media (max-width: 640px) {
    .btn {
        white-space: normal;
        height: auto;
        min-height: 42px;
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }
}

/* ============================================
   SIZES
   ============================================ */

/*
 * .btn-primary is NOT a size.
 *
 * It used to sit in this selector, so a colour variant silently also set a
 * height — 48px against the base 42px — and every primary/secondary pair in the
 * product mismatched by 6px. Seven of them were visibly adjacent.
 *
 * create-event already wrote "btn-primary btn-lg" for a deliberately large
 * submit, which is the tell: .btn-lg is how a caller asks for this, and getting
 * it for free from the colour was the accident. Anything that wants the larger
 * button now says so, and says it for both halves of the pair.
 */
.btn-lg {
    height: 48px;
    padding: 0 22px;
    font-size: 0.96875rem;   /* 15.5px */
}

.btn-md {
    height: 42px;
    padding: 0 18px;
}

.btn-sm,
.btn-xs {
    height: 34px;
    padding: 0 13px;
    font-size: 0.8125rem;    /* 13px */
}

.btn-block,
.btn-full {
    display: flex;
    width: 100%;
}

/* ============================================
   VARIANTS

   .btn-primary, .btn-secondary and friends are the names the views already
   use, so they keep working; what changes is what they paint.
   ============================================ */

.btn-primary {
    background: var(--color-red-dark);
    color: var(--text-on-dark);
    box-shadow: var(--shadow-cta);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--color-red-dark-hover);
    color: var(--text-on-dark);
}

.btn-primary:active {
    background: var(--color-red-dark-hover);
    box-shadow: none;
}

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

/*
 * The secondary button is transparent, so its border and text come from the
 * surface contract rather than from a colour chosen here.
 */
.btn-secondary,
.btn-tertiary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-info,
.btn-outline-info {
    background: transparent;
    border-color: var(--surface-border);
    color: var(--surface-text);
}

.btn-secondary:hover,
.btn-tertiary:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-info:hover,
.btn-outline-info:hover {
    background: var(--surface-hover);
    color: var(--surface-text);
}

/* Completed things are green, so a "done" action carries it. */
.btn-success {
    background: var(--color-success);
    color: var(--text-on-dark);
}

.btn-success:hover {
    background: var(--color-success-hover);
    color: var(--text-on-dark);
}

/*
 * .btn-warning is gone.
 *
 * It existed to be misused. Its only two call sites were forward actions —
 * "Request confirmations" and "Preview & Send Emails" — so the one gold-filled
 * button in the product was asking to be both a warning and the main thing to
 * do, while the same action was primary red on every other screen. A button is
 * either a warning or the forward action; these were the latter, and say so
 * now. Nothing else referenced the class.
 */

/*
 * Destructive actions are quiet: text only, no fill, no border. The weight of
 * the decision belongs in the confirmation dialog, not in a red slab the eye
 * is drawn to before it has read anything.
 */
/*
 * A destructive action that is not shouting.
 *
 * .btn-danger keeps its outline, because it appears in rows beside other
 * outlined buttons — on the event header it sat between four of them as bare
 * red text, so the row read as four buttons and one stray link. It is still
 * unfilled, which is the point; .btn-danger-solid below is the loud one.
 *
 * .btn-quiet-danger stays completely bare, for the places that want a text
 * action rather than a button.
 */
.btn-danger {
    background: transparent;
    border-color: var(--surface-danger);
    color: var(--surface-danger);
}

.btn-quiet-danger {
    background: transparent;
    border-color: transparent;
    color: var(--surface-danger);
}

.btn-danger:hover,
.btn-quiet-danger:hover {
    background: var(--color-danger-tint);
    color: var(--surface-danger);
}

/* A destructive action that genuinely needs to be filled — the confirm button
   inside a delete dialog — asks for it explicitly. */
.btn-danger-solid {
    background: var(--color-danger);
    border-color: transparent;
    color: var(--text-on-dark);
}

.btn-danger-solid:hover {
    background: var(--color-danger-hover);
    color: var(--text-on-dark);
}

/* ============================================
   ICON BUTTONS
   ============================================ */

.btn-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--radius-md);
}

.btn-icon.btn-sm {
    width: 34px;
    height: 34px;
}

.btn-icon svg {
    width: 20px;
    height: 20px;
}

.btn-rounded {
    border-radius: var(--radius-full);
}

/* Bootstrap's close button, restyled so it is legible on both surfaces. */
.btn-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    opacity: 1;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
}

.btn-close:hover {
    background: rgba(26, 77, 77, 0.08);
}

.btn-close-white:hover {
    background: rgba(247, 243, 232, 0.14);
}

/* ============================================
   GROUPS
   ============================================ */

.btn-group {
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.btn-group-vertical {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-2);
}

.btn-group-connected {
    display: inline-flex;
    gap: 0;
}

.btn-group-connected .btn {
    border-radius: 0;
}

.btn-group-connected .btn:first-child {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.btn-group-connected .btn:last-child {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* ============================================
   LOADING

   The submit button shows a spinner in place and keeps its width, so the
   layout does not jump at the moment the reader is least able to absorb it.
   ============================================ */

.btn[data-loading='true'] {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn[data-loading='true']::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--surface-text);
    border-top-color: transparent;
    border-radius: var(--radius-full);
    animation: btn-spin 620ms linear infinite;
}

.btn-primary[data-loading='true']::after,
.btn-success[data-loading='true']::after,
.btn-danger-solid[data-loading='true']::after {
    border-color: var(--text-on-dark);
    border-top-color: transparent;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .btn[data-loading='true']::after {
        animation-duration: 2s;
    }
}