/* Globale Aktions-Buttons – moderner Look, bessere Sichtbarkeit (Light + Dark) */

:root {
    --vcp-btn-radius: 10px;
    --vcp-btn-primary-bg: linear-gradient(135deg, #3143dd 0%, #1E2DC0 52%, #1724a0 100%);
    --vcp-btn-primary-border: rgba(255, 255, 255, 0.14);
    --vcp-btn-primary-shadow: 0 2px 10px rgba(30, 45, 192, 0.28), 0 1px 2px rgba(30, 45, 192, 0.12);
    --vcp-btn-primary-hover-shadow: 0 6px 20px rgba(30, 45, 192, 0.34), 0 2px 6px rgba(30, 45, 192, 0.16);
    --vcp-btn-outline-color: #1E2DC0;
    --vcp-btn-outline-border: rgba(30, 45, 192, 0.38);
    --vcp-btn-outline-bg: rgba(30, 45, 192, 0.06);
    --vcp-btn-outline-hover-bg: linear-gradient(135deg, #3143dd 0%, #1E2DC0 100%);
    --vcp-btn-secondary-color: #475569;
    --vcp-btn-secondary-border: rgba(100, 116, 139, 0.38);
    --vcp-btn-secondary-bg: rgba(148, 163, 184, 0.08);
    --vcp-btn-secondary-hover-bg: rgba(100, 116, 139, 0.14);
    /* Feedback-States: kanonisch --vcp-success / --vcp-danger (main.css) */
    --vcp-btn-feedback-success: var(--vcp-success, #16a34a);
    --vcp-btn-feedback-error: var(--vcp-danger, #dc2626);
}

body.dark {
    --vcp-btn-primary-bg: linear-gradient(135deg, #6b78ff 0%, #1E2DC0 48%, #1520a8 100%);
    --vcp-btn-primary-border: rgba(165, 174, 255, 0.28);
    --vcp-btn-primary-shadow: 0 2px 14px rgba(30, 45, 192, 0.5), 0 0 0 1px rgba(165, 174, 255, 0.14);
    --vcp-btn-primary-hover-shadow: 0 8px 26px rgba(30, 45, 192, 0.58), 0 0 0 1px rgba(165, 174, 255, 0.22);
    --vcp-btn-outline-color: #e8ebff;
    --vcp-btn-outline-border: rgba(165, 174, 255, 0.58);
    --vcp-btn-outline-bg: rgba(30, 45, 192, 0.24);
    --vcp-btn-outline-hover-bg: linear-gradient(135deg, #6b78ff 0%, #1E2DC0 100%);
    --vcp-btn-secondary-color: #e2e8f0;
    --vcp-btn-secondary-border: rgba(203, 213, 225, 0.42);
    --vcp-btn-secondary-bg: rgba(148, 163, 184, 0.14);
    --vcp-btn-secondary-hover-bg: rgba(148, 163, 184, 0.24);
    --vcp-btn-feedback-success: var(--vcp-success, #22c55e);
    --vcp-btn-feedback-error: var(--vcp-danger, #ef4444);
}

body .btn.btn-primary:not(.btn-arrow):not(.btn-link):not(.check-button):not(:disabled):not(.disabled),
body .btn.btn-success:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled),
body .btn.btn-danger:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled),
body .btn.btn-warning:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--vcp-btn-radius);
    transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

body .btn.btn-primary:not(.btn-arrow):not(.btn-link):not(.check-button):not(:disabled):not(.disabled) {
    color: #fff !important;
    background: var(--vcp-btn-primary-bg);
    border: 1px solid var(--vcp-btn-primary-border);
    box-shadow: var(--vcp-btn-primary-shadow);
}

body .btn.btn-primary:not(.btn-arrow):not(.btn-link):not(.check-button):not(:disabled):not(.disabled):hover,
body .btn.btn-primary:not(.btn-arrow):not(.btn-link):not(.check-button):not(:disabled):not(.disabled):focus {
    color: #fff !important;
    background: var(--vcp-btn-primary-bg);
    border-color: var(--vcp-btn-primary-border);
    transform: translateY(-1px);
    box-shadow: var(--vcp-btn-primary-hover-shadow);
    filter: brightness(1.04);
}

body .btn.btn-primary:not(.btn-arrow):not(.btn-link):not(.check-button):not(:disabled):not(.disabled):active,
body .btn.btn-primary:not(.btn-arrow):not(.btn-link):not(.check-button):not(:disabled):not(.disabled).active,
body .show > .btn.btn-primary.dropdown-toggle:not(.btn-arrow):not(.btn-link) {
    color: #fff !important;
    transform: translateY(0);
    filter: brightness(0.98);
    box-shadow: var(--vcp-btn-primary-shadow);
}

body .btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--vcp-btn-radius);
    color: var(--vcp-btn-outline-color) !important;
    background: var(--vcp-btn-outline-bg);
    border: 1.5px solid var(--vcp-btn-outline-border);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

body.dark .btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
    color: var(--vcp-btn-outline-color) !important;
    background: var(--vcp-btn-outline-bg);
    border-color: var(--vcp-btn-outline-border);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--vcp-btn-radius);
    color: var(--vcp-btn-secondary-color) !important;
    background: var(--vcp-btn-secondary-bg);
    border: 1.5px solid var(--vcp-btn-secondary-border);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

body.dark .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
body .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus {
    color: #0f172a !important;
    background: var(--vcp-btn-secondary-hover-bg);
    border-color: rgba(100, 116, 139, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

body.dark .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
body.dark .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus {
    color: #fff !important;
    background: var(--vcp-btn-secondary-hover-bg);
    border-color: rgba(203, 213, 225, 0.55);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

body .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):active,
body .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled).active,
body .show > .btn.btn-outline-secondary.dropdown-toggle:not(.btn-arrow):not(.btn-link) {
    color: #0f172a !important;
    transform: translateY(0);
}

body.dark .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):active,
body.dark .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled).active,
body.dark .show > .btn.btn-outline-secondary.dropdown-toggle:not(.btn-arrow):not(.btn-link) {
    color: #fff !important;
}

body .btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
body .btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus {
    color: #fff !important;
    background: var(--vcp-btn-outline-hover-bg);
    border-color: rgba(30, 45, 192, 0.45);
    transform: translateY(-1px);
    box-shadow: var(--vcp-btn-primary-hover-shadow);
}

body.dark .btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
body.dark .btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus {
    border-color: rgba(165, 174, 255, 0.45);
}

body .btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):active,
body .btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled).active,
body .show > .btn.btn-outline-primary.dropdown-toggle:not(.btn-arrow):not(.btn-link) {
    color: #fff !important;
    transform: translateY(0);
    box-shadow: var(--vcp-btn-primary-shadow);
}

body .btn.btn-success:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
    color: #fff !important;
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 10px rgba(22, 163, 74, 0.28);
}

body.dark .btn.btn-success:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 2px 14px rgba(34, 197, 94, 0.38), 0 0 0 1px rgba(134, 239, 172, 0.12);
}

body .btn.btn-danger:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
    color: #fff !important;
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.28);
}

body.dark .btn.btn-danger:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    box-shadow: 0 2px 14px rgba(248, 113, 113, 0.34), 0 0 0 1px rgba(252, 165, 165, 0.12);
}

body .btn.btn-warning:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
    color: #422006 !important;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.24);
}

body.dark .btn.btn-warning:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
    color: #fff !important;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    box-shadow: 0 2px 14px rgba(251, 191, 36, 0.34), 0 0 0 1px rgba(253, 224, 71, 0.14);
}

body .btn.btn-success:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
body .btn.btn-success:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus,
body .btn.btn-danger:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
body .btn.btn-danger:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus,
body .btn.btn-warning:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
body .btn.btn-warning:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

body .btn.btn-success:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):active,
body .btn.btn-danger:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):active,
body .btn.btn-warning:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):active {
    transform: translateY(0);
    filter: brightness(0.98);
}

body .btn.btn-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus-visible,
body .btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus-visible,
body .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus-visible,
body .btn.btn-success:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus-visible,
body .btn.btn-danger:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus-visible,
body .btn.btn-warning:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus-visible {
    outline: 2px solid rgba(165, 174, 255, 0.65);
    outline-offset: 2px;
}

body .btn.btn-primary:not(.btn-arrow):not(.btn-link):disabled,
body .btn.btn-primary:not(.btn-arrow):not(.btn-link).disabled,
body .btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):disabled,
body .btn.btn-outline-primary:not(.btn-arrow):not(.btn-link).disabled,
body .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):disabled,
body .btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link).disabled {
    opacity: 0.55;
    transform: none;
    box-shadow: none;
    filter: none;
}

/* Modal-Abbrechen – extra Kontrast auf dunklen Footer-Hintergründen */
body.dark .modal-footer .btn.btn-outline-primary,
body.dark .modal-footer .btn.btn-outline-secondary,
body.dark .vcp-account-modal__footer .btn.btn-outline-primary,
body.dark .vcp-account-modal__footer .btn.btn-outline-secondary,
body.dark .vserver-edit-reinstall-modal__footer .btn.btn-outline-primary,
body.dark .vserver-edit-reinstall-modal__footer .btn.btn-outline-secondary {
    font-weight: 600;
}

body.dark .modal-footer .btn.btn-outline-primary,
body.dark .vcp-account-modal__footer .btn.btn-outline-primary,
body.dark .vserver-edit-reinstall-modal__footer .btn.btn-outline-primary {
    color: #f1f5ff !important;
    background: rgba(30, 45, 192, 0.3);
    border-color: rgba(199, 206, 255, 0.62);
}

body.dark .modal-footer .btn.btn-outline-secondary,
body.dark .vcp-account-modal__footer .btn.btn-outline-secondary,
body.dark .vserver-edit-reinstall-modal__footer .btn.btn-outline-secondary {
    color: #f8fafc !important;
    background: rgba(148, 163, 184, 0.16);
    border-color: rgba(226, 232, 240, 0.45);
}

body.dark .vserver-firewall-btn--secondary,
body.dark .vserver-firewall-btn--outline {
    color: #f1f5ff !important;
    background: rgba(30, 45, 192, 0.24);
    border-color: rgba(165, 174, 255, 0.58);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark .vserver-firewall-btn--secondary:hover:not(:disabled),
body.dark .vserver-firewall-btn--secondary:focus:not(:disabled),
body.dark .vserver-firewall-btn--outline:hover:not(:disabled),
body.dark .vserver-firewall-btn--outline:focus:not(:disabled) {
    color: #fff !important;
    background: var(--vcp-btn-outline-hover-bg);
    border-color: rgba(165, 174, 255, 0.45);
    box-shadow: var(--vcp-btn-primary-hover-shadow);
}

/* Custom Aktions-Buttons (Seiten-spezifische Klassen) */
body.dark .dashboard-hero__btn--primary,
body.dark .vserver-firewall-btn--primary,
body.dark .vserver-firewall-btn--activate {
    border: 1px solid var(--vcp-btn-primary-border);
    box-shadow: var(--vcp-btn-primary-shadow);
}

body.dark .dashboard-hero__btn--primary:hover,
body.dark .vserver-firewall-btn--primary:hover:not(:disabled),
body.dark .vserver-firewall-btn--primary:focus:not(:disabled),
body.dark .vserver-firewall-btn--activate:hover:not(:disabled),
body.dark .vserver-firewall-btn--activate:focus:not(:disabled) {
    box-shadow: var(--vcp-btn-primary-hover-shadow);
}

body.dark .dashboard-hero__btn--ghost {
    color: var(--vcp-btn-outline-color);
    background: var(--vcp-btn-outline-bg);
    border-color: var(--vcp-btn-outline-border);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.16);
}

body.dark .dashboard-hero__btn--ghost:hover {
    color: #fff;
    background: var(--vcp-btn-outline-hover-bg);
    border-color: rgba(165, 174, 255, 0.4);
    box-shadow: var(--vcp-btn-primary-hover-shadow);
}

/*
 * Generisches Submit-Button-Feedback (admin-form-api.js: is-loading / is-success / is-error).
 * Muss Bootstrap-:disabled und body .btn.btn-primary:disabled (opacity) schlagen.
 * Impersonate bewusst ausgenommen (nur Dimmen, kein Success-Face).
 */
body .btn:not(.admin-impersonate-modal__submit).is-loading,
body .btn:not(.admin-impersonate-modal__submit).is-success {
    background: var(--vcp-btn-feedback-success) !important;
    border-color: var(--vcp-btn-feedback-success) !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none;
}

body .btn:not(.admin-impersonate-modal__submit).is-loading {
    cursor: wait;
    pointer-events: none;
}

body .btn:not(.admin-impersonate-modal__submit).is-success {
    cursor: default;
    animation: vcp-btn-feedback-pop 0.35s ease;
}

body .btn:not(.admin-impersonate-modal__submit).is-error {
    background: var(--vcp-btn-feedback-error) !important;
    border-color: var(--vcp-btn-feedback-error) !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none;
    cursor: default;
    animation: vcp-btn-feedback-shake 0.4s ease;
}

/* Spinner-Klasse aus admin-form-api.js (BUTTON_SAVE_ICON_SPINNER) */
body .btn .vserver-edit-config-save__spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vcp-btn-feedback-spin 0.75s linear infinite;
    vertical-align: -0.125em;
}

@keyframes vcp-btn-feedback-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes vcp-btn-feedback-pop {
    0% {
        transform: scale(0.96);
    }

    60% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes vcp-btn-feedback-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-4px);
    }

    40%,
    80% {
        transform: translateX(4px);
    }
}