@import url("../backoffice/base-color.css");

.btn {
    font-weight: 600;
    border-radius: 6px !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap; /* Prevent button text from wrapping */
    margin: 0.5px;
}

.btn-primary {
    background: linear-gradient(
        135deg,
        var(--aml-primary-1) 0%,
        var(--aml-supporting-2) 100%
    );
    border: none;
    box-shadow: 0 8px 15px rgba(75, 73, 172, 0.2);
}

.btn-primary:hover {
    background: linear-gradient(
        135deg,
        var(--aml-supporting-2) 0%,
        var(--aml-primary-1) 100%
    );
}

.btn-secondary {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    border: none;
    box-shadow: 0 8px 15px rgba(100, 116, 139, 0.2);
    color: white;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    box-shadow: 0 8px 15px rgba(245, 158, 11, 0.2);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.btn-danger {
    background: linear-gradient(135deg, #f3797e 0%, #ef4444 100%);
    border: none;
    box-shadow: 0 8px 15px rgba(239, 68, 68, 0.2);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    box-shadow: 0 8px 15px rgba(34, 197, 94, 0.2);
}

.btn-success:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

.btn-info {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    border: none;
    box-shadow: 0 8px 15px rgba(14, 165, 233, 0.2);
    color: white;
}

.btn-info:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
}

/* Button with icon styling */
.btn i,
.btn svg,
.btn .bi {
    font-size: 1.1rem;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* Reduce border-radius for Add Data and Excel export buttons */
.btn-add-data,
#excel-button-container .dt-button {
    border-radius: 6px !important;
}

.btn-primary.btn-sm {
    border-radius: 6px !important;
}
.btn-warning.btn-sm {
    border-radius: 6px !important;
}
.btn-success.btn-sm {
    border-radius: 6px !important;
}
.btn-danger.btn-sm {
    border-radius: 6px !important;
}
.btn-secondary.btn-sm {
    border-radius: 6px !important;
}
.btn-info.btn-sm {
    border-radius: 6px !important;
}

/* Clapped effect for button (smooth white overlay) */
.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(
        255,
        255,
        255,
        0.65
    ); /* opacity lebih tinggi agar lebih terlihat */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.btn:active::after {
    opacity: 1;
    transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:active {
    transform: scale(0.97);
    transition: background 0.2s, transform 0.1s;
}

/* Ripple effect for button (tetap putih) */
.btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.5) 10%,
        transparent 10.01%
    );
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
}

.btn:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}