/* Phase E5.2 Button Components */
/* 100% Bootstrap CSS Variable Independent */

.btn,
.erp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--erp-font-family);
    font-weight: var(--erp-btn-font-weight, 500);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0 var(--erp-btn-padding-x, 16px);
    font-size: var(--erp-btn-font-size, 13px);
    line-height: var(--erp-line-height-normal);
    border-radius: var(--erp-btn-radius, var(--erp-radius-md));
    transition: var(--erp-transition-fast);
    text-decoration: none;
    background-color: transparent;
    height: var(--erp-btn-height, var(--erp-control-height-standard, 38px));
    gap: var(--erp-btn-gap, 8px);
    box-sizing: border-box;
}

.btn:hover,
.erp-btn:hover {
    text-decoration: none;
}

.btn:focus,
.btn:focus-visible,
.erp-btn:focus,
.erp-btn:focus-visible {
    outline: 0;
    box-shadow: var(--erp-shadow-focus);
}

.btn:active,
.btn.active,
.erp-btn:active,
.erp-btn.active {
    filter: brightness(0.9);
}

.btn:disabled,
.btn.disabled,
.erp-btn:disabled,
.erp-btn.disabled,
fieldset:disabled .btn,
fieldset:disabled .erp-btn {
    pointer-events: none;
    opacity: 0.65;
}

.btn-sm,
.erp-btn--sm {
    padding: 0 var(--erp-btn-padding-x-sm, 12px);
    font-size: var(--erp-btn-font-size-sm, var(--erp-font-size-sm, 12px));
    border-radius: var(--erp-radius-sm);
    height: var(--erp-btn-height-sm, var(--erp-control-height-compact, 34px));
}

.btn-lg,
.erp-btn--lg {
    padding: 0 20px;
    font-size: var(--erp-font-size-lg, 16px);
    border-radius: var(--erp-radius-lg);
    height: var(--erp-btn-height-lg, var(--erp-control-height-lg, 44px));
}

/* COLOR VARIANTS */
.btn-primary {
    color: #fff;
    background-color: var(--erp-color-primary-600);
    border-color: var(--erp-color-primary-600);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    color: #fff;
    background-color: var(--erp-color-primary-700);
    border-color: var(--erp-color-primary-700);
}
.btn-outline-primary {
    color: var(--erp-color-primary-600);
    border-color: var(--erp-color-primary-600);
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active {
    color: #fff;
    background-color: var(--erp-color-primary-600);
}

.btn-secondary {
    color: #fff;
    background-color: var(--erp-color-slate-500);
    border-color: var(--erp-color-slate-500);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active {
    color: #fff;
    background-color: var(--erp-color-slate-600);
    border-color: var(--erp-color-slate-600);
}
.btn-outline-secondary {
    color: var(--erp-color-slate-500);
    border-color: var(--erp-color-slate-500);
}
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active {
    color: #fff;
    background-color: var(--erp-color-slate-500);
}

.btn-success {
    color: #fff;
    background-color: var(--erp-color-success-600);
    border-color: var(--erp-color-success-600);
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
    color: #fff;
    background-color: var(--erp-color-success-500); /* Note: inverted hover brightness per standard or just use 500 */
    filter: brightness(0.9);
}
.btn-outline-success {
    color: var(--erp-color-success-600);
    border-color: var(--erp-color-success-600);
}
.btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success.active {
    color: #fff;
    background-color: var(--erp-color-success-600);
}

.btn-danger {
    color: #fff;
    background-color: var(--erp-color-danger-600);
    border-color: var(--erp-color-danger-600);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
    color: #fff;
    background-color: var(--erp-color-danger-500);
    filter: brightness(0.9);
}
.btn-outline-danger {
    color: var(--erp-color-danger-600);
    border-color: var(--erp-color-danger-600);
}
.btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger.active {
    color: #fff;
    background-color: var(--erp-color-danger-600);
}

.btn-warning {
    color: var(--erp-color-slate-900);
    background-color: var(--erp-color-warning-500);
    border-color: var(--erp-color-warning-500);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active {
    color: var(--erp-color-slate-900);
    background-color: var(--erp-color-warning-600);
    border-color: var(--erp-color-warning-600);
}
.btn-outline-warning {
    color: var(--erp-color-warning-600);
    border-color: var(--erp-color-warning-600);
}
.btn-outline-warning:hover, .btn-outline-warning:active, .btn-outline-warning.active {
    color: var(--erp-color-slate-900);
    background-color: var(--erp-color-warning-500);
}

.btn-info {
    color: #fff;
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
    color: #fff;
    background-color: #0bacce;
    border-color: #0bacce;
}
.btn-outline-info {
    color: #0dcaf0;
    border-color: #0dcaf0;
}
.btn-outline-info:hover, .btn-outline-info:active, .btn-outline-info.active {
    color: #fff;
    background-color: #0dcaf0;
}

.btn-light {
    color: var(--erp-text-primary);
    background-color: var(--erp-color-slate-50);
    border-color: var(--erp-color-slate-200);
}
.btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active {
    color: var(--erp-text-primary);
    background-color: var(--erp-color-slate-200);
    border-color: var(--erp-color-slate-300);
}
.btn-outline-light {
    color: var(--erp-color-slate-50);
    border-color: var(--erp-color-slate-50);
}
.btn-outline-light:hover, .btn-outline-light:active, .btn-outline-light.active {
    color: var(--erp-text-primary);
    background-color: var(--erp-color-slate-50);
}

.btn-dark {
    color: #fff;
    background-color: var(--erp-color-slate-900);
    border-color: var(--erp-color-slate-900);
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active {
    color: #fff;
    background-color: var(--erp-color-slate-800);
    border-color: var(--erp-color-slate-800);
}
.btn-outline-dark {
    color: var(--erp-color-slate-900);
    border-color: var(--erp-color-slate-900);
}
.btn-outline-dark:hover, .btn-outline-dark:active, .btn-outline-dark.active {
    color: #fff;
    background-color: var(--erp-color-slate-900);
}

/* BUTTON CHECK (Hidden inputs used with labels) */
.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.btn-check:focus + .btn,
.btn-check:focus-visible + .btn {
    outline: 0;
    box-shadow: var(--erp-shadow-focus);
}
.btn-check:checked + .btn,
.btn-check:active + .btn {
    filter: brightness(0.9);
}

/* BUTTON CLOSE */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: var(--erp-text-primary);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f172a'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: var(--erp-radius-sm);
    opacity: 0.5;
    cursor: pointer;
}
.btn-close:hover {
    color: var(--erp-text-primary);
    text-decoration: none;
    opacity: 0.75;
}
.btn-close:focus, .btn-close:focus-visible {
    outline: 0;
    box-shadow: var(--erp-shadow-focus);
    opacity: 1;
}
.btn-close:disabled, .btn-close.disabled {
    pointer-events: none;
    user-select: none;
    opacity: 0.25;
}

/* BUTTON GROUPS */
.btn-group,
.btn-group-sm {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.btn-group > .btn {
    position: relative;
    flex: 1 1 auto;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
    z-index: 1;
}

/* Adjacent sibling margin for borders */
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
    z-index: 1;
}

/* Remove border radius from inner sides */
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Ensure hidden inputs don't affect layout in btn-groups */
.btn-group > .btn-check {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

.btn-group-sm > .btn,
.btn-group-sm > .erp-btn,
.erp-btn-group--sm > .btn,
.erp-btn-group--sm > .erp-btn {
    padding: 0 var(--erp-btn-padding-x-sm, 12px);
    font-size: var(--erp-btn-font-size-sm, var(--erp-font-size-sm, 12px));
    border-radius: var(--erp-radius-sm);
    height: var(--erp-btn-height-sm, var(--erp-control-height-compact, 34px));
}

/* ==========================================================================
   ACTION BUTTONS (Migrated from legacy templates)
   ========================================================================== */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--erp-radius-md);
    padding: 0.42rem 0.85rem;
    font-size: var(--erp-btn-font-size, 13px);
    font-weight: var(--erp-font-weight-semibold, 600);
    border: 1px solid transparent;
    line-height: var(--erp-line-height-normal);
    white-space: nowrap;
    transition: var(--erp-transition-fast);
    box-shadow: var(--erp-shadow-sm);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--erp-font-family);
    box-sizing: border-box;
}

.action-btn:hover {
    text-decoration: none;
}

.action-btn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--erp-shadow-focus);
}

.action-btn.btn-back {
    background-color: var(--erp-bg-surface);
    color: var(--erp-color-slate-700);
    border: 1px solid var(--erp-border-dark);
}

.action-btn.btn-back:hover,
.action-btn.btn-back:focus {
    background-color: var(--erp-bg-surface-hover);
    color: var(--erp-color-slate-900);
    border-color: var(--erp-color-slate-400);
}

.action-btn.btn-temp {
    background-color: var(--erp-bg-surface);
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

.action-btn.btn-temp:hover,
.action-btn.btn-temp:focus {
    background-color: #f5f3ff;
    color: #5b21b6;
    border-color: #c4b5fd;
}

/* Extracted from index.html inline CSS */
.btn-primary { background: var(--primary-gradient, var(--erp-color-primary-600)) !important; border: none !important; border-radius: var(--erp-btn-radius, var(--erp-radius-md)) !important; color: #fff !important; font-weight: var(--erp-btn-font-weight, 500) !important; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.15); }