/* ============================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-7);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    border: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    line-height: var(--leading-snug);
    /* A label never wraps mid-word. Two flex items in a narrow table cell used to render
       the Set button on /Settings/Users as "S" over "et". */
    white-space: nowrap;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.btn-primary { background: var(--brand); color: var(--text-inverse); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-success { background: var(--success); color: var(--text-inverse); }
.btn-success:hover { background: var(--success-hover); }
.btn-danger { background: var(--danger); color: var(--text-inverse); }
.btn-danger:hover { background: var(--danger-hover); }
.btn-ghost { background: transparent; color: var(--text-body); border: var(--border-width) solid var(--border-strong); }
.btn-ghost:hover { background: var(--surface-hover); }
.btn-action { background: var(--surface-sunken); color: var(--text-body); }
.btn-action:hover { background: var(--border); }
.btn-sm { padding: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.btn-block { width: 100%; justify-content: center; padding: var(--space-5); }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Icon-only row action: a quiet glyph that only resolves into a button on hover, so a list of ten
   repositories reads as a list and not as a wall of buttons. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-14);
    height: var(--space-14);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-base);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-icon:hover { background: var(--surface-hover); color: var(--text-body); }
.btn-icon-danger:hover { background: var(--danger-soft); color: var(--danger-on-soft); }

/* A row of filters or actions above a table. */
.filter-bar {
    display: flex;
    gap: var(--space-4);
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: var(--space-8);
}