/* ==========================================================================
   BUTTONS — single source of truth for all .btn styling in the app.
   Replaces the old Bootstrap/bootstrap5.buttons.custom.css and the
   .btn-soft-* block that used to live in app.css.

   Design direction: flat, fast, quiet — Linear/Vercel/GitHub, not a SaaS
   template. No gradients, no shine-sweep animation, no lift-on-hover bounce.
   State changes come from a quick color/background shift only. Bootstrap's
   own per-variant hover shading is left alone (it already does this well);
   we only add what Bootstrap doesn't: soft buttons, sizing/density, and a
   couple of app-specific escape hatches (--mainColor, legacy DataTables
   toolbars).
   ========================================================================== */

/* --- Base: density + motion ---
   0.9rem/tight padding matches the app's lean, breadcrumb-as-title header
   density. Transitions are short and only touch color/background/shadow —
   never transform, so buttons never move under the cursor. */
.btn {
    font-size: var(--ithr-body-font-size, 0.9rem);
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    line-height: 1.5;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.625rem;
}

.btn-lg {
    font-size: 1rem;
    padding: 0.5rem 1.125rem;
    font-weight: 600;
}

/* A single clean keyboard-focus ring, independent of each variant's own color
   (so it still shows up on soft/outline/light buttons where a colored
   box-shadow would be hard to see). Mouse clicks never trigger :focus-visible,
   so this never fires as an unwanted "click flash". */
.btn:focus-visible {
    outline: 2px solid var(--bs-emphasis-color, #212529);
    outline-offset: 2px;
    box-shadow: none;
}

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

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

@media print {
    .btn {
        box-shadow: none !important;
    }
}

/* --- Icon-only / icon+label helper (layout only, no color opinion) --- */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .btn-icon i,
    .btn-icon svg {
        width: 1rem;
        height: 1rem;
    }

/* --- DataTables Buttons extension (~30 legacy, not-yet-modernized pages) always
   wraps its toolbar buttons in .dt-buttons.btn-group — Bootstrap's btn-group CSS
   zeroes the joined inner corners, so a rounded-pill class on the button itself
   has no visible effect there. Raise the base border-radius instead, so these
   toolbar buttons keep rendering pill-shaped, matching those pages' own
   still-pill button language, without touching ~30 files' JS button-wiring.
   Scoped to direct children only — a "collection" button's dropdown menu
   renders in a separate .dt-button-collection container, unaffected. */
.dt-buttons.btn-group > .btn {
    border-radius: 50rem;
}

/* --- Brand CTA (Login / entity-switch screens only) ---
   Flat --mainColor fill instead of the old diagonal gradient; hover is a
   small, precomputed darken so it stays crisp instead of animating a second
   gradient sweep across the button. */
.btn-styled-theme {
    background-color: var(--mainColor, #0d6efd);
    border-color: var(--mainColor, #0d6efd);
    color: #fff;
}

    .btn-styled-theme:hover:not(:disabled):not(.disabled),
    .btn-styled-theme:focus-visible:not(:disabled):not(.disabled) {
        background-color: color-mix(in srgb, var(--mainColor, #0d6efd) 85%, black);
        border-color: color-mix(in srgb, var(--mainColor, #0d6efd) 85%, black);
        color: #fff;
    }

/* ==========================================================================
   SOFT BUTTONS — tinted background, no border. For actions that need to be
   reachable but shouldn't visually compete with a page's primary action
   (e.g. a header-level Eliminar next to Gravar, or a row's edit/delete pair).

   Each variant only sets three custom properties; the shared rules below do
   the actual painting, so adding/adjusting a variant never means touching
   more than one line. Hover/focus fully commits to the solid color, which
   we keep as an intentional, decisive state change — not just a tint bump.
   ========================================================================== */
.btn-soft-primary   { --btn-soft-fg: var(--bs-primary);   --btn-soft-bg: rgba(var(--bs-primary-rgb), 0.1);   --btn-soft-solid: var(--bs-primary);   --btn-soft-solid-fg: #fff; }
.btn-soft-secondary { --btn-soft-fg: var(--bs-secondary); --btn-soft-bg: rgba(var(--bs-secondary-rgb), 0.1); --btn-soft-solid: var(--bs-secondary); --btn-soft-solid-fg: #fff; }
.btn-soft-success   { --btn-soft-fg: var(--bs-success);   --btn-soft-bg: rgba(var(--bs-success-rgb), 0.1);   --btn-soft-solid: var(--bs-success);   --btn-soft-solid-fg: #fff; }
.btn-soft-danger    { --btn-soft-fg: var(--bs-danger);    --btn-soft-bg: rgba(var(--bs-danger-rgb), 0.1);    --btn-soft-solid: var(--bs-danger);    --btn-soft-solid-fg: #fff; }
.btn-soft-warning   { --btn-soft-fg: #997404;             --btn-soft-bg: rgba(var(--bs-warning-rgb), 0.12);  --btn-soft-solid: var(--bs-warning);   --btn-soft-solid-fg: #000; }
.btn-soft-info      { --btn-soft-fg: #087990;             --btn-soft-bg: rgba(var(--bs-info-rgb), 0.1);      --btn-soft-solid: var(--bs-info);      --btn-soft-solid-fg: #000; }
.btn-soft-dark      { --btn-soft-fg: var(--bs-dark);      --btn-soft-bg: rgba(var(--bs-dark-rgb), 0.08);     --btn-soft-solid: var(--bs-dark);      --btn-soft-solid-fg: #fff; }

[class*="btn-soft-"] {
    color: var(--btn-soft-fg);
    background-color: var(--btn-soft-bg);
    border-color: transparent;
}

    [class*="btn-soft-"]:hover:not(:disabled):not(.disabled),
    [class*="btn-soft-"]:focus-visible:not(:disabled):not(.disabled) {
        color: var(--btn-soft-solid-fg);
        background-color: var(--btn-soft-solid);
        border-color: var(--btn-soft-solid);
        outline-color: var(--btn-soft-solid);
    }

/* A 10-12% tint reads fine on a white page but nearly disappears against a dark
   background — raise the tint and brighten the foreground so every soft button
   stays legible in dark mode. */
body[data-bs-theme="dark"] .btn-soft-primary   { --btn-soft-fg: #6ea8fe; --btn-soft-bg: rgba(var(--bs-primary-rgb), 0.22); }
body[data-bs-theme="dark"] .btn-soft-secondary { --btn-soft-fg: #a7acb1; --btn-soft-bg: rgba(var(--bs-secondary-rgb), 0.22); }
body[data-bs-theme="dark"] .btn-soft-success   { --btn-soft-fg: #75b798; --btn-soft-bg: rgba(var(--bs-success-rgb), 0.22); }
body[data-bs-theme="dark"] .btn-soft-danger    { --btn-soft-fg: #ff8f8f; --btn-soft-bg: rgba(var(--bs-danger-rgb), 0.22); }
body[data-bs-theme="dark"] .btn-soft-warning   { --btn-soft-fg: #ffda6a; --btn-soft-bg: rgba(var(--bs-warning-rgb), 0.25); }
body[data-bs-theme="dark"] .btn-soft-info      { --btn-soft-fg: #6edff6; --btn-soft-bg: rgba(var(--bs-info-rgb), 0.22); }
body[data-bs-theme="dark"] .btn-soft-dark      { --btn-soft-fg: #f8f9fa; --btn-soft-bg: rgba(255, 255, 255, 0.15); }

/* btn-soft-dark inverts on hover in dark mode (white fill/black text) instead of
   filling with --bs-dark, which would be nearly invisible against a dark page. */
body[data-bs-theme="dark"] .btn-soft-dark:hover:not(:disabled):not(.disabled),
body[data-bs-theme="dark"] .btn-soft-dark:focus-visible:not(:disabled):not(.disabled) {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    outline-color: #f8f9fa;
}