/* ============================================================================
   Canonical Button Stylesheet — Editorum Design System
   Phase 1: Single source of truth for .btn, .btn-*, .btn-group
   Load order: this file loads LAST among button-rule files so ordinary rules
   win by cascade over Bootstrap 3 / bootstrap-shim / cabinet-ds-overrides.
   Keep !important for documented legacy escape hatches only.
   ============================================================================ */

/* ── Base ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--ds-space-2) var(--ds-space-4);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-btn);
    font-size: var(--ds-font-size-base);
    font-weight: 500;
    line-height: 1.45;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    transition:
        background-color var(--ds-transition-fast),
        border-color     var(--ds-transition-fast),
        color            var(--ds-transition-fast),
        box-shadow       var(--ds-transition-fast);
}

/* Shared icon+label buttons are used for wizard/back actions across cabinet
   and admin shells. Keep their text on the compact action-button scale even
   when legacy heading/link rules bleed into the same header region. */
.btn.btn-icon:not(.btn-xs):not(.btn-sm):not(.btn-lg) {
    font-size: var(--ds-font-size-body-sm) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

.btn > span,
.btn > .btn-label,
.btn.btn-icon > span,
.btn.btn-icon > .btn-label {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit;
}

/* Keep manage filter buttons outlined even though this canonical
   stylesheet loads after manage.css and resets plain `.btn` borders. */
.btn.btn-filter-apply {
    background-color: var(--ds-color-white);
    border-width: 1px;
    border-color: var(--ds-tone-info-soft-border);
    color: var(--ds-color-link);
}

.btn.btn-filter-apply:hover,
.btn.btn-filter-apply:focus,
.btn.btn-filter-apply.focus,
.btn.btn-filter-apply:active,
.btn.btn-filter-apply.active {
    background-color: var(--ds-tone-info-soft-bg);
    border-color: var(--ds-color-link);
    color: var(--ds-color-link);
    text-decoration: none;
}

.btn.btn-filter-reset {
    background-color: var(--ds-color-white);
    border-color: var(--ds-color-border-strong);
    color: var(--ds-color-muted);
}

.btn.btn-filter-reset:hover,
.btn.btn-filter-reset:focus,
.btn.btn-filter-reset.focus,
.btn.btn-filter-reset:active,
.btn.btn-filter-reset.active {
    background-color: var(--ds-color-bg);
    border-color: var(--ds-color-border-strong);
    color: var(--ds-color-body);
    text-decoration: none;
}

.btn:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.btn:focus         { outline: none; }
.btn:active        { box-shadow: none; }
.btn[disabled], .btn.disabled, fieldset[disabled] .btn {
    opacity: 0.55; pointer-events: none; cursor: not-allowed;
}

/* ── Colour variants ──────────────────────────────────────────────────── */
.btn.btn-default { background-color: var(--ds-color-white); border-color: var(--ds-color-border-strong); color: var(--ds-color-body); }
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default.focus,
.btn.btn-default:active,
.btn.btn-default.active,
.btn.btn-default:active:hover,
.btn.btn-default.active:hover,
.btn.btn-default:active:focus,
.btn.btn-default.active:focus,
.open > .dropdown-toggle.btn.btn-default,
.open > .dropdown-toggle.btn.btn-default:hover,
.open > .dropdown-toggle.btn.btn-default:focus {
    background-color: var(--ds-color-bg);
    border-color: var(--ds-color-border-strong);
    color: var(--ds-color-heading);
    text-decoration: none;
}
.btn.btn-default:active,
.btn.btn-default.active,
.btn.btn-default:active:hover,
.btn.btn-default.active:hover,
.btn.btn-default:active:focus,
.btn.btn-default.active:focus,
.open > .dropdown-toggle.btn.btn-default,
.open > .dropdown-toggle.btn.btn-default:hover,
.open > .dropdown-toggle.btn.btn-default:focus {
    background-color: var(--ds-color-border-lt);
}

.btn.btn-primary { background-color: var(--ds-color-link); border-color: var(--ds-color-link); color: var(--ds-color-white); }
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary.focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary:active:hover,
.btn.btn-primary.active:hover,
.btn.btn-primary:active:focus,
.btn.btn-primary.active:focus,
.open > .dropdown-toggle.btn.btn-primary,
.open > .dropdown-toggle.btn.btn-primary:hover,
.open > .dropdown-toggle.btn.btn-primary:focus {
    background-color: var(--ds-color-link-hover);
    border-color: var(--ds-color-link-hover);
    color: var(--ds-color-white);
    text-decoration: none;
}

/* btn-success deliberately remapped to DS primary blue — legacy templates use .btn-success for primary-action buttons. */
.btn.btn-success { background-color: var(--ds-color-link); border-color: var(--ds-color-link); color: var(--ds-color-white); }
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success.focus,
.btn.btn-success:active,
.btn.btn-success.active,
.btn.btn-success:active:hover,
.btn.btn-success.active:hover,
.btn.btn-success:active:focus,
.btn.btn-success.active:focus,
.open > .dropdown-toggle.btn.btn-success,
.open > .dropdown-toggle.btn.btn-success:hover,
.open > .dropdown-toggle.btn.btn-success:focus {
    background-color: var(--ds-color-link-hover);
    border-color: var(--ds-color-link-hover);
    color: var(--ds-color-white);
    text-decoration: none;
}

.btn.btn-danger { background-color: var(--ds-color-danger); border-color: var(--ds-color-danger); color: var(--ds-color-white); }
.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger.focus,
.btn.btn-danger:active,
.btn.btn-danger.active,
.btn.btn-danger:active:hover,
.btn.btn-danger.active:hover,
.btn.btn-danger:active:focus,
.btn.btn-danger.active:focus,
.open > .dropdown-toggle.btn.btn-danger,
.open > .dropdown-toggle.btn.btn-danger:hover,
.open > .dropdown-toggle.btn.btn-danger:focus {
    background-color: var(--ds-color-danger-hover);
    border-color: var(--ds-color-danger-hover);
    color: var(--ds-color-white);
    text-decoration: none;
}

.btn.btn-warning { background-color: var(--ds-color-warning); border-color: var(--ds-color-warning); color: var(--ds-color-white); }
.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning.focus,
.btn.btn-warning:active,
.btn.btn-warning.active,
.btn.btn-warning:active:hover,
.btn.btn-warning.active:hover,
.btn.btn-warning:active:focus,
.btn.btn-warning.active:focus,
.open > .dropdown-toggle.btn.btn-warning,
.open > .dropdown-toggle.btn.btn-warning:hover,
.open > .dropdown-toggle.btn.btn-warning:focus {
    background-color: var(--ds-color-warning-hover);
    border-color: var(--ds-color-warning-hover);
    color: var(--ds-color-white);
    text-decoration: none;
}

/* ── Outline-danger helper: soft tinted border + content ───────────────
   Use the stronger `.btn.btn-default.text-danger` selector so this variant
   survives later generic `.btn-default` overrides in admin/cabinet layers. */
.btn.btn-default.text-danger {
    background-color: var(--ds-color-white);
    border-color: var(--ds-tone-danger-soft-border);
    color: var(--ds-tone-danger-soft-color);
}

.btn.btn-default.text-danger:hover,
.btn.btn-default.text-danger:focus {
    background-color: var(--ds-tone-danger-soft-bg);
    border-color: var(--ds-tone-danger-soft-border);
    color: var(--ds-tone-danger-soft-color);
}

.btn.btn-default.text-danger:active,
.btn.btn-default.text-danger.active {
    background-color: var(--ds-tone-danger-soft-bg-hover);
    border-color: var(--ds-tone-danger-soft-border);
    color: var(--ds-tone-danger-soft-color);
}

.btn.btn-default.text-danger .text-danger,
.btn.btn-default.text-danger .ds-icon,
.btn.btn-default.text-danger .ds-icon use,
.btn-default .text-danger {
    color: inherit;
}

/* ── Size modifiers ───────────────────────────────────────────────────── */
.btn-sm { padding: 6px 12px;  font-size: 13px; line-height: 1.5; border-radius: var(--ds-radius-btn); }

/* Legacy templates still pass `btn-xs` to shared button components in
   workspace forms. Keep that token supported, but align it to the current
   DS action height so it does not render visibly shorter than sibling
   buttons that come from the same component layer. */
.btn-xs {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.45;
    border-radius: var(--ds-radius-btn);
}

.btn-lg { padding: 12px 20px; font-size: 16px; line-height: 1.5; border-radius: var(--ds-radius-btn); }

/* ── Button group ─────────────────────────────────────────────────────── */
.btn-group { position: relative; display: inline-flex; vertical-align: middle; }
.btn-group > .btn { position: relative; flex: 0 1 auto; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:only-child { border-radius: var(--ds-radius-btn); }
.btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }