/*
 * Buttons, app-wide: the look of the v2 odontogram buttons applied to every Bootstrap .btn.
 * Neutral buttons are a soft grey fill with a thin border, "outline" colour variants become soft tinted fills,
 * solid buttons keep their colour. Everything goes through Bootstrap's --bs-btn-* variables, so .btn-group,
 * .input-group, .active and :disabled keep working.
 */
:root {
    --ui-btn-fg: #15202b;
    --ui-btn-surface: #f3f6f9;
    --ui-btn-line: #dde3e9;
    --ui-btn-accent: #0d6efd;
    --ui-btn-accent-soft: #e3eeff;
    --ui-btn-ok: #198754;
    --ui-btn-ok-soft: #e0f2e8;
    --ui-btn-warn: #b77a00;
    --ui-btn-warn-soft: #fff2cf;
    --ui-btn-danger: #dc3545;
    --ui-btn-danger-soft: #fde6e9;
    --ui-btn-info: #0a7d99;
    --ui-btn-info-soft: #e0f4f8;
}

.btn {
    --bs-btn-padding-x: .9rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: .7rem;
    --bs-btn-focus-box-shadow: none;
    transition: background-color .12s, border-color .12s, color .12s, filter .12s;
}
.btn-sm {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .4rem;
    --bs-btn-font-size: .84rem;
    --bs-btn-border-radius: .65rem;
}
/* "btn-xs" was never defined by Bootstrap: a compact button for dense rows */
.btn-xs {
    --bs-btn-padding-x: .55rem;
    --bs-btn-padding-y: .2rem;
    --bs-btn-font-size: .8rem;
    --bs-btn-border-radius: .55rem;
}
.btn-lg { --bs-btn-border-radius: .8rem; }
.btn:focus-visible { outline: 2px solid var(--ui-btn-accent); outline-offset: 2px; box-shadow: none; }

/* neutral */
.btn-outline-secondary,
.btn-secondary,
.btn-light {
    --bs-btn-color: var(--ui-btn-fg);
    --bs-btn-bg: var(--ui-btn-surface);
    --bs-btn-border-color: var(--ui-btn-line);
    --bs-btn-hover-color: var(--ui-btn-fg);
    --bs-btn-hover-bg: var(--ui-btn-accent-soft);
    --bs-btn-hover-border-color: var(--ui-btn-line);
    --bs-btn-active-color: var(--ui-btn-accent);
    --bs-btn-active-bg: var(--ui-btn-accent-soft);
    --bs-btn-active-border-color: var(--ui-btn-accent);
    --bs-btn-disabled-color: var(--ui-btn-fg);
    --bs-btn-disabled-bg: var(--ui-btn-surface);
    --bs-btn-disabled-border-color: var(--ui-btn-line);
}

/* primary: the one accent colour of the app */
.btn-primary {
    --bs-btn-bg: var(--ui-btn-accent);
    --bs-btn-border-color: var(--ui-btn-accent);
    --bs-btn-hover-bg: var(--ui-btn-accent);
    --bs-btn-hover-border-color: var(--ui-btn-accent);
    --bs-btn-active-bg: var(--ui-btn-accent);
    --bs-btn-active-border-color: var(--ui-btn-accent);
    --bs-btn-disabled-bg: var(--ui-btn-accent);
    --bs-btn-disabled-border-color: var(--ui-btn-accent);
}
.btn-primary:hover { filter: brightness(1.07); }
.btn-outline-primary {
    --bs-btn-color: var(--ui-btn-accent);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--ui-btn-accent);
    --bs-btn-hover-color: var(--ui-btn-accent);
    --bs-btn-hover-bg: var(--ui-btn-accent-soft);
    --bs-btn-hover-border-color: var(--ui-btn-accent);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ui-btn-accent);
    --bs-btn-active-border-color: var(--ui-btn-accent);
    --bs-btn-disabled-color: var(--ui-btn-accent);
    --bs-btn-disabled-bg: #fff;
}

/* tinted outlines: success, warning, danger, info become soft fills, solid when active */
.btn-outline-success {
    --bs-btn-color: var(--ui-btn-ok); --bs-btn-bg: var(--ui-btn-ok-soft); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ui-btn-ok); --bs-btn-hover-bg: #c9e8d6; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ui-btn-ok); --bs-btn-active-border-color: var(--ui-btn-ok);
    --bs-btn-disabled-color: var(--ui-btn-ok); --bs-btn-disabled-bg: var(--ui-btn-ok-soft); --bs-btn-disabled-border-color: transparent;
}
.btn-outline-warning {
    --bs-btn-color: var(--ui-btn-warn); --bs-btn-bg: var(--ui-btn-warn-soft); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ui-btn-warn); --bs-btn-hover-bg: #ffe9a8; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ui-btn-warn); --bs-btn-active-border-color: var(--ui-btn-warn);
    --bs-btn-disabled-color: var(--ui-btn-warn); --bs-btn-disabled-bg: var(--ui-btn-warn-soft); --bs-btn-disabled-border-color: transparent;
}
.btn-outline-danger {
    --bs-btn-color: var(--ui-btn-danger); --bs-btn-bg: var(--ui-btn-danger-soft); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ui-btn-danger); --bs-btn-hover-bg: #fbd0d6; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ui-btn-danger); --bs-btn-active-border-color: var(--ui-btn-danger);
    --bs-btn-disabled-color: var(--ui-btn-danger); --bs-btn-disabled-bg: var(--ui-btn-danger-soft); --bs-btn-disabled-border-color: transparent;
}
.btn-outline-info {
    --bs-btn-color: var(--ui-btn-info); --bs-btn-bg: var(--ui-btn-info-soft); --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ui-btn-info); --bs-btn-hover-bg: #c6e9f0; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ui-btn-info); --bs-btn-active-border-color: var(--ui-btn-info);
}
.btn-outline-dark {
    --bs-btn-color: var(--ui-btn-fg); --bs-btn-bg: var(--ui-btn-surface); --bs-btn-border-color: var(--ui-btn-line);
    --bs-btn-hover-color: var(--ui-btn-fg); --bs-btn-hover-bg: var(--ui-btn-accent-soft); --bs-btn-hover-border-color: var(--ui-btn-line);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ui-btn-fg); --bs-btn-active-border-color: var(--ui-btn-fg);
}

/* solid success / danger / warning keep their colour, with the same hover feel */
.btn-success:hover, .btn-danger:hover, .btn-warning:hover { filter: brightness(1.07); }

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