:root{
    --saauzi-primary: #ff791f;
    --saauzi-primary-light: #f6a772;
    --saauzi-dark: #202124;
    --saauzi-gray-300: #d1d5db;
    --saauzi-gray-500: #718096;
    --saauzi-secondary: #ef4444;

    --white:#ffffff;
    --border: #E6E6E6;
    --border-soft: #b6b6b6;
    --grey: #88888c;
    --button: #eb4848;
    --button-active: #e96e6e;
    --green: #59b801;
}





/* backgrounds */
.bg-primary{
    background: var(--saauzi-primary); /* from-orange-500 to-red-500 */
}

.bg-dark {
    background-color: var(--saauzi-dark)!important;
}

.bg-gray-light {
    background-color: var(--saauzi-gray-300)!important;
}

.bg-gray-dark {
    background-color: var(--saauzi-gray-500)!important;
}


/* Texts */
.text-primary {
    color: var(--saauzi-primary)!important;
}

.text-dark{
    color: var(--saauzi-dark)!important;
}


/* Borders */
.border-dark {
    border-color: var(--saauzi-dark)!important;
}

.border-primary {
    border-color: var(--saauzi-primary)!important;
}

.border-gray-light {
    border-color: var(--saauzi-gray-300)!important;
}

.border-gray-dark {
    border-color: var(--saauzi-gray-500)!important;
}

.border-saauzi-2 {
    border-width: 2px!important;
}



/* Custom Cards */

.saauzi-card {
    background-color: #ffffff; 
    padding: 1.5rem; 
    border-radius: 0.5rem; 
    margin-bottom: 1.5rem; 
    border: 1px solid var(--saauzi-gray-300);
}

.margin-bottom-0 {
    margin-bottom: 0!important;
}

.padding-0 {
    padding: 0!important;
}


/* Tabs */
.tabs .active {
    color: var(--saauzi-primary)!important;
    border-bottom: 1px solid var(--saauzi-primary)!important;
}


/* Button Kits */

.primary-button {
    background: linear-gradient(to right, var(--saauzi-primary), var(--saauzi-secondary)); /* from-orange-500 to-red-500 */
    border: 1px solid var(--saauzi-primary);
    color: white; /* text-white */
    font-weight: 600; /* font-semibold */
    padding: 0.5rem 1.2rem; /* py-3 px-8 */
    border-radius: 0.5rem; /* rounded-xl */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
    transition: all 0.3s ease-in-out; /* transition-all duration-300 ease-in-out */
    transform: scale(1); /* Initial scale */
    text-decoration: none; /* Remove underline for links */
    outline: none; /* focus:outline-none */
}

.primary-button:hover {
background: linear-gradient(to right, var(--saauzi-primary), var(--saauzi-secondary)); /* hover:from-orange-600 hover:to-red-600 */
transform: scale(1.05); /* hover:scale-105 */
}

.primary-button:focus {
outline: none; /* focus:outline-none */
box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.5); /* focus:ring-2 focus:ring-orange-400 focus:ring-offset-2 */
}



/* Outline Primary Button */
.primary-outline-button {
    background-color: transparent;
    background-image: none;
    border: 2px solid var(--saauzi-primary);
    color: var(--saauzi-primary);
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 0.5rem;
    box-shadow: none;
    transition: all 0.3s ease-in-out;
    transform: scale(1);
    text-decoration: none;
    outline: none;
}

.primary-outline-button:hover {
    background-color: var(--saauzi-primary);
    color: white;
    transform: scale(1.05);
}

.primary-outline-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.5);
}

/* Secondary Outline Button */
.secondary-outline-button,
.saauzi-secondary-outline-button {
    color: var(--saauzi-gray-500);
    border: 1px solid var(--saauzi-gray-300);
    background: transparent;
    padding: 0.5rem 1.2rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease-in-out;
    transform: scale(1); /* Initial scale */
    text-decoration: none; /* Remove underline for links */
    outline: none; /* focus:outline-none */
}

.saauzi-secondary-outline-button:hover {
    background: var(--saauzi-dark);
    color: white;
}

.saauzi-secondary-outline-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}



/*  Delete outline button */
.delete-outline-button {
    background-color: transparent;
    border: 1px solid #fecaca; /* Tailwind's red-200 */
    color: #ef4444; /* Tailwind's red-600 / red-500 */
    padding: 0.5rem 1.2rem; /* py-2 px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.delete-outline-button:hover {
    background-color: #ef4444; /* red-500 */
    color: white;
    border-color: #dc2626; /* red-600 */
}

.delete-outline-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(254, 202, 202, 0.5); /* red-200 with transparency */
}


/* Table Utitlities Styles Start */
.saauzi-tr {
    background-color: #f3f4f6; /* bg-gray-100 */
    text-align: left; /* text-left */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #374151; /* text-gray-700 */
}

.saauzi-tr th {
    padding-left: 1rem;  /* px-4 */
    padding-right: 1rem; /* px-4 */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
}

.saauzi-tr-body {
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    font-size: 0.875rem; /* text-sm */
    color: #1a202c; /* text-gray-900 */
}

.saauzi-tr-body:hover {
    background-color: #f9fafb; /* bg-gray-50 */
    transition-property: background-color; /* Specify the property to transition */
    transition-duration: 0.15s; /* duration-150 */
    transition-timing-function: ease-in-out; /* ease-in-out */
}

.saauzi-tr-body:last-child {
    border-bottom: 1px solid #e5e7eb; /* Tailwind's gray-200 equivalent */
}


/* Table Buttons */
/* Grey Table Button */
.grey-table-button {
    font-size: 0.75rem; /* text-xs */
    gap: 0.25rem; /* gap-1 */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    display: flex;
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #4b5563; /* text-gray-600 */
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.3s ease, transform 0.3s ease; /* transition duration-300 */
}

.grey-table-button:hover {
    background-color: #e5e7eb; /* hover:bg-gray-200 */
}

/* Edit Table Button */
.edit-table-button {
    font-size: 0.75rem; /* text-xs */
    gap: 0.25rem; /* gap-1 */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    display: flex;
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    background-color: #fef3c7; /* bg-yellow-100 */
    color: #4b5563; /* text-gray-600 */
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.3s ease, transform 0.3s ease; /* transition duration-300 */
}

.edit-table-button:hover {
    background-color: #fde68a; /* hover:bg-yellow-200 */
}

/* Delete Table Button */
.delete-table-button {
    font-size: 0.75rem; /* text-xs */
    gap: 0.25rem; /* gap-1 */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    display: flex;
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    background-color: #fee2e2; /* bg-red-100 */
    color: #4b5563; /* text-gray-600 */
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.3s ease, transform 0.3s ease; /* transition duration-300 */
}

.delete-table-button:hover {
    background-color: #fecaca; /* hover:bg-red-200 */
}

.delete-table-button:focus {
    outline: none; /* focus:outline-none */
    box-shadow: 0 0 0 2px #d1d5db; /* focus:ring-2 focus:ring-gray-300 */
}

.blue-table-button {
    font-size: 0.75rem; /* text-xs */
    gap: 0.25rem; /* gap-1 */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    display: flex;
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    background-color: #dbeafe; /* bg-blue-100 */
    color: #1e293b; /* text-dark */
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.3s ease; /* transition duration-300 */
}

.blue-table-button:hover {
    background-color: #bfdbfe; /* hover:bg-blue-200 */
}


.blue-table-button:focus, .edit-table-button:focus, .grey-table-button:focus  {
    outline: none; /* focus:outline-none */
    box-shadow: 0 0 0 2px #d1d5db; /* focus:ring-2 focus:ring-gray-300 */
}

/* Table Utitlities Styles End */

/* Unstructured Dumped CSS - these were shifted from the template file itself. */
.gradient-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: white;
}

.gradient-btn-confirm {
    background: linear-gradient(90deg, #28a745, #218838); /* Green gradient */
}

.gradient-btn-cancel {
    background: linear-gradient(90deg, #dc3545, #bd2130); /* Red gradient */
}

.gradient-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}