/* 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);
}

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);
}

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);
}