/* =====================================================================
   buttons.css — Bootstrap button overrides plus the quiet row action.
   ===================================================================== */

.btn {
    --bs-btn-font-size: var(--fs-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-padding-y: .55rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-line-height: 1.45;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    letter-spacing: -.004em;
    white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(.5px); }
.btn i { font-size: 15px; line-height: 1; }
.btn:focus-visible { box-shadow: var(--ring); outline: none; }

.btn-primary {
    --bs-btn-bg: var(--c-brand);
    --bs-btn-border-color: var(--c-brand);
    --bs-btn-hover-bg: var(--c-brand-dark);
    --bs-btn-hover-border-color: var(--c-brand-dark);
    --bs-btn-active-bg: var(--c-brand-darker);
    --bs-btn-active-border-color: var(--c-brand-darker);
    --bs-btn-disabled-bg: var(--c-brand);
    --bs-btn-disabled-border-color: var(--c-brand);
    --bs-btn-disabled-opacity: .55;
    box-shadow: 0 1px 2px rgba(18, 27, 41, .08),
                inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}

.btn-outline-secondary {
    --bs-btn-color: var(--c-ink-2);
    --bs-btn-bg: var(--c-surface);
    --bs-btn-border-color: var(--c-line-strong);
    --bs-btn-hover-bg: var(--c-sunken);
    --bs-btn-hover-color: var(--c-ink);
    --bs-btn-hover-border-color: var(--c-line-strong);
    --bs-btn-active-bg: var(--c-line);
    --bs-btn-active-color: var(--c-ink);
    --bs-btn-active-border-color: var(--c-line-strong);
    --bs-btn-disabled-color: var(--c-ink-4);
    --bs-btn-disabled-border-color: var(--c-line);
}

.btn-danger {
    --bs-btn-bg: var(--c-bad);
    --bs-btn-border-color: var(--c-bad);
    --bs-btn-hover-bg: #97231a;
    --bs-btn-hover-border-color: #97231a;
}

/* A text button for the third-choice action, where a bordered button
   would compete with the one that matters. */
.btn-quiet {
    --bs-btn-color: var(--c-ink-2);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--c-sunken);
    --bs-btn-hover-color: var(--c-ink);
    --bs-btn-hover-border-color: transparent;
}

.btn-sm {
    --bs-btn-font-size: var(--fs-sm);
    --bs-btn-padding-y: .36rem;
    --bs-btn-padding-x: .75rem;
    --bs-btn-border-radius: var(--radius-xs);
}
.btn-sm i { font-size: 13px; }

.btn-lg {
    --bs-btn-font-size: var(--fs-md);
    --bs-btn-padding-y: .72rem;
    --bs-btn-padding-x: 1.2rem;
}

.btn-block { width: 100%; }

/* -- Row actions -----------------------------------------------------
   Quiet until you go looking for them, so a table of 50 rows does not
   read as 150 buttons. */
.row-action {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--c-ink-3);
    font-size: 15px;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}
.row-action:hover { background: var(--c-sunken); border-color: var(--c-line); color: var(--c-ink); }
.row-action--danger:hover { background: var(--c-bad-tint); border-color: var(--c-bad-line); color: var(--c-bad); }
.row-action--ok:hover { background: var(--c-ok-tint); border-color: var(--c-ok-line); color: var(--c-ok); }
.row-action[aria-expanded="true"] { background: var(--c-sunken); border-color: var(--c-line); color: var(--c-ink); }

/* A count on the filter button, so an active filter is visible without
   opening the modal to check. */
.filter-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .25);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
}
.btn-outline-secondary .filter-count { background: var(--c-line); color: var(--c-ink-2); }