/*************************************************Button Start*************************************************/

:root {
    --btn-padding: 6px 14px;
    --btn-font: 13px;
    --btn-radius: 6px;
    --btn-family: "Font Awesome 6 Free";
    --btn-weight: 900;
}

/* Auto-apply base styles to any .Ruahbtn-* class */
[class^="Ruahbtn-"], [class*=" Ruahbtn-"] {
    display: inline-flex;
    align-items: center;
    padding: var(--btn-padding);
    font-size: var(--btn-font);
    font-weight: 500;
    border: none;
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background: var(--btn-bg, #444);
    color: white;
    margin: 5px;
    position: relative;
    text-decoration: none;
}

    [class^="Ruahbtn-"]::before,
    [class*=" Ruahbtn-"]::before {
        content: var(--btn-icon);
        font-family: var(--btn-family);
        font-weight: var(--btn-weight);
        font-size: 13px;
        margin-right: 6px;
        display: inline-block;
    }

    [class^="Ruahbtn-"]::after,
    [class*=" Ruahbtn-"]::after {
        content: var(--btn-text);
    }

    [class^="Ruahbtn-"]:hover,
    [class*=" Ruahbtn-"]:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

/* Button Types with Icons + Text + Backgrounds */

.Ruahbtn-save {
    --btn-text: "Save";
    --btn-icon: "\f0c7";
    --btn-bg: linear-gradient(135deg, #00c896, #02af7a);
}

.Ruahbtn-save-close {
    --btn-text: "Save and Close";
    --btn-icon: "\f058";
    --btn-bg: linear-gradient(135deg, #ff9800, #f57c00);
}

.Ruahbtn-save-new {
    --btn-text: "Save and New";
    --btn-icon: "\f055";
    --btn-bg: linear-gradient(135deg, #007bff, #0056b3);
}

.Ruahbtn-delete {
    --btn-text: "Delete";
    --btn-icon: "\f1f8";
    --btn-bg: linear-gradient(135deg, #f43f5e, #e11d48);
}

.Ruahbtn-refresh {
    --btn-text: "Refresh";
    --btn-icon: "\f2f1";
    --btn-bg: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

.Ruahbtn-search {
    --btn-text: "Search";
    --btn-icon: "\f002";
    --btn-bg: linear-gradient(135deg, #6366f1, #4f46e5);
}

.Ruahbtn-clear {
    --btn-text: "Clear";
    --btn-icon: "\f12d";
    --btn-bg: linear-gradient(135deg, #9ca3af, #6b7280);
}

.Ruahbtn-print {
    --btn-text: "Print";
    --btn-icon: "\f02f";
    --btn-bg: linear-gradient(135deg, #4b5563, #374151);
}

.Ruahbtn-reports {
    --btn-text: "Reports";
    --btn-icon: "\f15c";
    --btn-bg: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.Ruahbtn-export {
    --btn-text: "Export";
    --btn-icon: "\f56e";
    --btn-bg: linear-gradient(135deg, #10b981, #059669);
}

.Ruahbtn-back {
    --btn-text: "Back";
    --btn-icon: "\f104";
    --btn-bg: linear-gradient(135deg, #94a3b8, #64748b);
}

.Ruahbtn-next {
    --btn-text: "Next";
    --btn-icon: "\f105";
    --btn-bg: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.Ruahbtn-previous {
    --btn-text: "Previous";
    --btn-icon: "\f104";
    --btn-bg: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.Ruahbtn-upload {
    --btn-text: "Upload";
    --btn-icon: "\f093";
    --btn-bg: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.Ruahbtn-download {
    --btn-text: "Download";
    --btn-icon: "\f019";
    --btn-bg: linear-gradient(135deg, #f59e0b, #d97706);
}

.Ruahbtn-approve {
    --btn-text: "Approve";
    --btn-icon: "\f058";
    --btn-bg: linear-gradient(135deg, #22c55e, #16a34a);
}

.Ruahbtn-reject {
    --btn-text: "Reject";
    --btn-icon: "\f05e";
    --btn-bg: linear-gradient(135deg, #ef4444, #dc2626);
}

.Ruahbtn-help {
    --btn-text: "Help";
    --btn-icon: "\f059";
    --btn-bg: linear-gradient(135deg, #3b82f6, #2563eb);
}

.Ruahbtn-info {
    --btn-text: "Info";
    --btn-icon: "\f05a";
    --btn-bg: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.Ruahbtn-add-new {
    --btn-text: "Add New";
    --btn-icon: "\f055";
    --btn-bg: linear-gradient(135deg, #9c27b0, #7b1fa2);
}

.Ruahbtn-cancel {
    --btn-text: "Cancel";
    --btn-icon: "\f057";
    --btn-bg: linear-gradient(135deg, #9ca3af, #6b7280);
}

.Ruahbtn-yesdelete {
    --btn-text: "Yes Delete";
    --btn-icon: "\f1f8";
    --btn-bg: linear-gradient(135deg, #ef4444, #b91c1c);
}

.Ruahbtn-update {
    --btn-text: "Update";
    --btn-icon: "\f044";
    --btn-bg: linear-gradient(135deg, #4f46e5, #2563eb);
}

.Ruahbtn-continue {
    --btn-text: "Continue";
    --btn-icon: "\f061"; /* FontAwesome arrow-right */
    --btn-bg: linear-gradient(135deg, #4caf50, #2e7d32);
}
/*************************************************Button End*************************************************/