:root {
    --button-radius: 8px;
    --button-radius-small: 7px;
    --button-height: 38px;
    --button-height-small: 32px;
    --button-padding: 9px 13px;
    --button-padding-small: 6px 9px;
    --button-font-weight: 800;
    --button-primary-text: var(--app-primary-contrast, #ffffff);
    --button-danger-solid-bg: #b91c1c;
    --button-danger-solid-hover: #991b1b;
    --button-danger-solid-text: #ffffff;
    --button-excel-bg: #107c41;
    --button-excel-hover: #0b6334;
    --button-excel-text: #ffffff;
    --button-disabled-opacity: 0.52;
}

:where(button, .btn) {
    appearance: none;
    box-sizing: border-box;
    min-height: var(--button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--button-radius);
    padding: var(--button-padding);
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: var(--button-font-weight);
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

:where(button, .btn):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--app-primary) 38%, transparent);
    outline-offset: 2px;
}

:where(button, .btn):active:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-loading) {
    transform: translateY(1px);
}

:where(button, .btn):disabled,
:where(button, .btn)[aria-disabled="true"] {
    opacity: var(--button-disabled-opacity);
    cursor: not-allowed;
    box-shadow: none;
}

:where(button, .btn)[aria-busy="true"],
:where(button, .btn).is-loading {
    position: relative;
    color: transparent !important;
    cursor: wait;
    pointer-events: none;
}

:where(button, .btn)[aria-busy="true"]::after,
:where(button, .btn).is-loading::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: var(--button-primary-text);
    animation: button-loading-spin 0.7s linear infinite;
}

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

.btn-primary,
.billing-save-btn,
.billing-export-btn,
.billing-print-btn,
.summary-copy-btn,
.auth-primary-btn,
.btn-save,
.source-mail-general-btn {
    border-color: var(--app-primary);
    color: var(--button-primary-text);
    background: var(--app-primary);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--app-primary) 22%, transparent);
}

.btn-primary:hover:not(:disabled),
.billing-save-btn:hover:not(:disabled),
.billing-export-btn:hover:not(:disabled),
.billing-print-btn:hover:not(:disabled),
.summary-copy-btn:hover:not(:disabled),
.auth-primary-btn:hover:not(:disabled),
.btn-save:hover:not(:disabled),
.source-mail-general-btn:hover:not(:disabled) {
    border-color: var(--app-primary-strong);
    background: var(--app-primary-strong);
}

.btn-secondary,
.btn-cancel,
.auth-secondary-btn,
.season-select-btn,
.calendar-nav-btn,
.archive-btn,
.outings-bulk-btn,
.saved-invoice-reuse,
.source-copy-mail-btn {
    border-color: var(--app-border);
    color: var(--app-text);
    background: var(--app-panel-strong);
    box-shadow: none;
}

.btn-secondary,
.invoice-delete-btn {
    margin-top: 8px;
}

.btn-cancel {
    min-height: var(--button-height);
    margin-top: 0;
    border-width: 1px;
    padding: var(--button-padding);
    font-weight: var(--button-font-weight);
}

.btn-pdf::before {
    content: "PDF";
    width: 22px;
    height: 24px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    box-sizing: border-box;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
}

.btn-secondary:hover:not(:disabled),
.btn-cancel:hover:not(:disabled),
.auth-secondary-btn:hover:not(:disabled),
.season-select-btn:hover:not(:disabled),
.calendar-nav-btn:hover:not(:disabled),
.archive-btn:hover:not(:disabled),
.outings-bulk-btn:hover:not(:disabled),
.saved-invoice-reuse:hover:not(:disabled),
.source-copy-mail-btn:hover:not(:disabled) {
    border-color: var(--app-border-strong);
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
}

.btn-excel {
    border-color: var(--button-excel-bg);
    color: var(--button-excel-text);
    background: var(--button-excel-bg);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--button-excel-bg) 20%, transparent);
}

.btn-excel:hover:not(:disabled) {
    border-color: var(--button-excel-hover);
    color: var(--button-excel-text);
    background: var(--button-excel-hover);
}

.btn-excel:focus-visible {
    outline-color: color-mix(in srgb, var(--button-excel-bg) 42%, transparent);
}

.btn-excel::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m9 10 6 7'/%3E%3Cpath d='m15 10-6 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m9 10 6 7'/%3E%3Cpath d='m15 10-6 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn-excel > svg {
    display: none;
}
.btn-danger,
.invoice-delete-btn {
    border-color: color-mix(in srgb, var(--app-danger) 38%, transparent);
    color: var(--app-danger);
    background: color-mix(in srgb, var(--app-danger) 11%, var(--app-panel-solid));
    box-shadow: none;
}

.btn-danger:hover:not(:disabled),
.invoice-delete-btn:hover:not(:disabled) {
    border-color: var(--app-danger);
    background: color-mix(in srgb, var(--app-danger) 20%, var(--app-panel-solid));
}

.btn-danger-solid,
[data-logout-nav],
.btn-remove-location,
.btn-remove-additional-amodiataire {
    border-color: var(--button-danger-solid-bg);
    color: var(--button-danger-solid-text);
    background: var(--button-danger-solid-bg);
    box-shadow: none;
}

.btn-danger-solid:hover:not(:disabled),
[data-logout-nav]:hover:not(:disabled),
.btn-remove-location:hover:not(:disabled),
.btn-remove-additional-amodiataire:hover:not(:disabled) {
    border-color: var(--button-danger-solid-hover);
    background: var(--button-danger-solid-hover);
}

.btn-sm {
    min-height: var(--button-height-small);
    border-radius: var(--button-radius-small);
    padding: var(--button-padding-small);
    font-size: 13px;
}

.btn-icon-only,
.calendar-nav-btn,
.saved-invoice-reuse,
.source-copy-mail-btn,
.btn-remove-location,
.btn-remove-additional-amodiataire {
    padding: 0;
}

.btn-remove-location,
.btn-remove-additional-amodiataire {
    width: 32px;
    height: 32px;
    min-height: 32px;
    font-size: 20px;
    line-height: 1;
}

:where(
    .button-icon,
    .billing-action-icon,
    .btn-icon,
    [data-logout-nav] svg,
    .source-copy-mail-btn svg,
    .source-mail-general-btn svg
) {
    width: 17px;
    height: 17px;
    display: block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.segmented-tab {
    min-height: 34px;
    border: 0;
    border-radius: var(--button-radius-small);
    padding: 7px 14px;
    color: var(--app-muted);
    background: transparent;
    font-weight: var(--button-font-weight);
    box-shadow: none;
    white-space: nowrap;
}

.segmented-tab:hover:not(:disabled) {
    color: var(--app-text);
    background: var(--app-primary-softer);
}

.segmented-tab.is-active {
    color: var(--button-primary-text);
    background: var(--app-primary);
}

[data-logout-nav] {
    width: 100%;
    margin-top: 5px;
}

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

    :where(button, .btn)[aria-busy="true"]::after,
    :where(button, .btn).is-loading::after {
        animation-duration: 1.4s;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .segmented-tab {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 13px;
    }
}