:root {
    /* Back Button Variables */
    --back-button-bg: var(--color-gray-700);
    --back-button-text: var(--color-gray-50);
    --back-button-hover-bg: var(--color-gray-800);
    --back-button-active-bg: var(--color-gray-900);
    --back-button-shadow: var(--shadow-small);
    --back-button-hover-shadow: var(--shadow-medium);

    /* Logout Button Variables */
    --logout-button-bg: var(--color-primary-600);
    --logout-button-text: var(--color-gray-50);
    --logout-button-hover-bg: var(--color-primary-700);
    --logout-button-active-bg: var(--color-primary-800);
    --logout-button-shadow: var(--shadow-small);
    --logout-button-hover-shadow: var(--shadow-medium);
    --logout-button-icon-color: var(--color-red-500);

    /* Primary Button Variables */
    --primary-button-bg: var(--color-primary-500);
    --primary-button-text: var(--color-gray-50);
    --primary-button-hover-bg: var(--color-primary-600);
    --primary-button-active-bg: var(--color-primary-700);
    --primary-button-shadow: var(--shadow-small);
    --primary-button-hover-shadow: var(--shadow-medium);
    --primary-button-disabled-bg: var(--color-gray-400);
}

html.dark {
    /* Back Button in dark mode */
    --back-button-bg: var(--color-gray-800);
    --back-button-text: var(--color-gray-200);
    --back-button-hover-bg: var(--color-gray-700);
    --back-button-active-bg: var(--color-gray-900);
    --back-button-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.4);
    --back-button-hover-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.6);

    /* Logout Button in dark mode */
    --logout-button-bg: var(--color-primary-700);
    --logout-button-text: var(--color-gray-200);
    --logout-button-hover-bg: var(--color-primary-600);
    --logout-button-active-bg: var(--color-primary-800);
    --logout-button-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.4);
    --logout-button-hover-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.6);
    --logout-button-icon-color: var(--color-red-400);

    /* Primary Button in dark mode */
    --primary-button-bg: var(--color-primary-600);
    --primary-button-text: var(--color-gray-100);
    --primary-button-hover-bg: var(--color-primary-500);
    --primary-button-active-bg: var(--color-primary-700);
    --primary-button-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.4);
    --primary-button-hover-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.6);
    --primary-button-disabled-bg: var(--color-gray-600);
}

/* Back Button Styling (now renamed to btn-custom-secondary) */
.btn-custom-secondary,
a.btn-custom-secondary {
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background-color: var(--back-button-bg);
    color: var(--back-button-text) !important; /* Ensure text color override */
    border-radius: 0.5rem;
    font-weight: 600;
    box-shadow: var(--back-button-shadow);
    transition: var(--transition-smooth);
    cursor: pointer;
    text-align: center;
    direction: rtl;
    border: none; /* Remove default border */
    outline: none;
}

/* Disabled state for secondary button */
.btn-custom-secondary:disabled,
a.btn-custom-secondary.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Back Button inside modals with smaller border radius */
.modal .btn-custom-secondary,
.modal a.btn-custom-secondary {
    border-radius: 0.5rem;
}

.btn-custom-secondary:hover,
a.btn-custom-secondary:hover {
    background-color: var(--back-button-hover-bg);
    box-shadow: var(--back-button-hover-shadow);
    /* transform: translateY(-0.125rem); */
    color: var(--back-button-text) !important; /* Maintain text color */
    text-decoration: none; /* Prevent underline */
}

.btn-custom-secondary:active,
a.btn-custom-secondary:active,
.btn-custom-secondary:focus,
a.btn-custom-secondary:focus {
    background-color: var(--back-button-active-bg);
    transform: translateY(0);
    box-shadow: var(--back-button-shadow);
    color: var(--back-button-text) !important; /* Maintain text color */
    text-decoration: none;
    outline: none;
}

/* Primary Button Styling */
.btn-custom-primary,
a.btn-custom-primary {
    font-size: var(--font-size-base) !important;
    text-decoration: none;
    display: inline-flex; /* Use inline-flex for alignment */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background-color: var(--primary-button-bg);
    color: var(--primary-button-text) !important; /* Override link color */
    border-radius: 0.5rem;
    font-weight: 600;
    box-shadow: var(--primary-button-shadow);
    transition: var(--transition-smooth);
    cursor: pointer;
    text-align: center;
    direction: rtl;
    border: none; /* Remove default border */
    outline: none;
}

/* Disabled state for primary button */
.btn-custom-primary:disabled,
a.btn-custom-primary.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    background-color: var(--primary-button-disabled-bg);
}

/* Icon styling inside primary button */
.btn-custom-primary i,
.btn-custom-primary svg,
a.btn-custom-primary i,
a.btn-custom-primary svg {
    font-size: var(--font-size-base) !important;
    color: inherit; /* Inherit color from button text */
    transition: var(--transition-smooth);
}

.btn-custom-primary:hover,
a.btn-custom-primary:hover {
    background-color: var(--primary-button-hover-bg);
    box-shadow: var(--primary-button-hover-shadow);
    /* transform: translateY(-0.125rem); */
    color: var(--primary-button-text) !important; /* Maintain text color */
    text-decoration: none; /* Prevent underline */
}

/* Add slight animation to icon on hover */
.btn-custom-primary:hover i,
.btn-custom-primary:hover svg,
a.btn-custom-primary:hover i,
a.btn-custom-primary:hover svg {
    transform: scale(1.1);
}

.btn-custom-primary:active,
a.btn-custom-primary:active,
.btn-custom-primary:focus,
a.btn-custom-primary:focus {
    background-color: var(--primary-button-active-bg);
    transform: translateY(0);
    box-shadow: var(--primary-button-shadow);
    color: var(--primary-button-text) !important; /* Maintain text color */
    text-decoration: none;
    outline: none;
}

/* Logout Button Styling */
.btn-custom-logout,
a.btn-custom-logout {
    font-size: var(--font-size-base) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background-color: var(--logout-button-bg);
    color: var(
        --logout-button-text
    ) !important; /* Override Bootstrap link color */
    border-radius: 0.5rem;
    font-weight: 600;
    box-shadow: var(--logout-button-shadow);
    transition: var(--transition-smooth);
    cursor: pointer;
    text-align: center;
    direction: rtl;
    border: none; /* Remove Bootstrap border if any */
    outline: none;
}

/* Icon styling inside logout button */
.btn-custom-logout i,
.btn-custom-logout svg,
a.btn-custom-logout i,
a.btn-custom-logout svg {
    font-size: var(--font-size-base) !important;

    color: var(--logout-button-icon-color);
    transition: var(--transition-smooth);
}

.btn-custom-logout:hover,
a.btn-custom-logout:hover {
    background-color: var(--logout-button-hover-bg);
    box-shadow: var(--logout-button-hover-shadow);
    /* transform: translateY(-0.125rem); */
    color: var(
        --logout-button-text
    ) !important; /* Maintain text color on hover */
    text-decoration: none; /* Prevent underline on hover */
}

/* Add slight animation to icon on hover */
.btn-custom-logout:hover i,
.btn-custom-logout:hover svg,
a.btn-custom-logout:hover i,
a.btn-custom-logout:hover svg {
    transform: scale(1.1);
}

.btn-custom-logout:active,
a.btn-custom-logout:active,
.btn-custom-logout:focus,
a.btn-custom-logout:focus {
    background-color: var(--logout-button-active-bg);
    transform: translateY(0);
    box-shadow: var(--logout-button-shadow);
    color: var(--logout-button-text) !important;
    text-decoration: none;
    outline: none;
}