.fi-main.mx-auto.h-full.w-full.max-w-7xl {
    max-width: 100% ;
}

body.fi-body.fi-panel-admin.min-h-screen.bg-gray-50.font-normal.text-gray-950.antialiased.dark\:bg-gray-950.dark\:text-white {
    background: linear-gradient(180deg, #FFFAEB 0%, #FFF8EB 100%);
}

.fi-ta-ctn.divide-y.divide-gray-200.overflow-hidden.rounded-xl.bg-white.shadow-sm.ring-1.ring-gray-950\/5.dark\:divide-white\/10.dark\:bg-gray-900.dark\:ring-white\/10 {
    background: linear-gradient(180deg, #FFFAEB 0%, #FFF8EB 100%);
}

header.fi-sidebar-header.flex.h-16.items-center.bg-white.px-6.ring-1.ring-gray-950\/5.dark\:bg-gray-900.dark\:ring-white\/10.lg\:shadow-sm {
    body.fi-body.fi-panel-admin.min-h-screen.bg-gray-50.font-normal.text-gray-950.antialiased.dark\: bg-gray-950.dark\:text-white {
    background: linear-gradient(180deg, #FFFAEB 0%, #FFF8EB 100%);
}

.fi-ta-ctn.divide-y.divide-gray-200.overflow-hidden.rounded-xl.bg-white.shadow-sm.ring-1.ring-gray-950
    \/5.dark\:divide-white\/10.dark\:bg-gray-900.dark\:ring-white\/10 {
    background: linear-gradient(180deg, #FFFAEB 0%, #FFF8EB 100%);
};
    body.fi-body.fi-panel-admin.min-h-screen.bg-gray-50.font-normal.text-gray-950.antialiased.dark\: bg-gray-950.dark\:text-white {
    background: linear-gradient(180deg, #FFFAEB 0%, #FFF8EB 100%);
}

.fi-ta-ctn.divide-y.divide-gray-200.overflow-hidden.rounded-xl.bg-white.shadow-sm.ring-1.ring-gray-950
    \/5.dark\:divide-white\/10.dark\:bg-gray-900.dark\:ring-white\/10 {
    background: linear-gradient(180deg, #FFFAEB 0%, #FFF8EB 100%);
};
    background: linear-gradient(180deg, #FFFAEB 0%, #FFF8EB 100%);
}

nav.flex.h-16.items-center.gap-x-4.bg-white.px-4.shadow-sm.ring-1.ring-gray-950\/5.dark\:bg-gray-900.dark\:ring-white\/10.md\:px-6.lg\:px-8 {
    background: linear-gradient(180deg, #FFFAEB 0%, #FFF8EB 100%);
}

.bg-gray-100{
    background-color: rgba(255, 243, 204, 1)!important;
}

.fi-main-ctn .bg-white {
    background-color: rgba(255, 243, 204, 1)!important;
}

.fi-main-ctn .fi-input-wrp {
    background-color: rgba(255, 243, 204, 1)!important;
}

.fi-modal-window.bg-white {
    background-color: #FFFAEB!important;
}

table .bg-gray-50 {
    /* background-color: rgb(217 175 43); */
    background-color: rgba(255, 243, 204, 1);
}

.hover\:bg-gray-50:hover {
    /* background-color: rgb(217 175 43); */
    background-color: rgba(255, 243, 204, 1)!important;
}

li.fi-sidebar-item.fi-active.fi-sidebar-item-active.flex.flex-col.gap-y-1 {
    background-color: rgba(255, 243, 204, 1);
}

body [type=checkbox]:checked {
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
}

input:checked+.\[input\:checked\+\&\]\:bg-custom-600 {
    --tw-bg-opacity: 1;
    background-color: rgba(var(--c-600), var(--tw-bg-opacity)) !important;
}
#google_translate_element span {
    display: ruby;
}

.work-container .fi-tabs{
    justify-content: center;
}

.bg-green-500 { background-color: #48bb78; }
.bg-red-500 { background-color: #f56565; }

.flex.items-center.gap-x-3.pe-3.border-s.border-gray-200.ps-3.dark\:border-white\/10 {
    background-color: #16a34a;
}

.flex.items-center.gap-x-3.pe-3.border-s.border-gray-200.ps-3.dark\:border-white\/10 button {
    background-color: #16a34a;
    color: #ffff !important;
}

.extra-large-text > legend:first-child {
    font-size: x-large;
}

.pending-bg-color {
    background-color: #ffff00; /* Yellow */
}

.blacklisted-bg-color {
    background-color: #ef4444 !important; /* Red */
}

.not-interested-bg-color {
    background-color: #f97316 !important; /* Orange */
}

.applied-bg-color {
    background-color: #3b82f6; /* Blue */
}

.hired-bg-color {
    background-color: #86efac; /* Light green */
}

.active-bg-color {
    background-color: #22c55e; /* Green */
}

.currently-unavailable-bg-color {
    background-color: #fbbf24; /* Orange gold */
}

.under-review-bg-color {
    background-color: #f97316 !important; /* Orange for Under Review/Not Interested */
}

.job-expired-row {
    background-color: #ef4444 !important; /* Proper red for expired jobs */
}

.job-closed-row {
    background-color: #f97316 !important; /* Proper orange for closed jobs */
}

.job-reposted-row {
    background-color: #22c55e !important; /* Green for reposted jobs */
}

.job-reposted-row {
    background-color: #22c55e !important; /* Green for reposted jobs */
}

/* Status dropdown option colors */
select[name="status"] option[value="Pending"] {
    background-color: #ffff00 !important; /* Yellow */
    color: #000 !important;
}

select[name="status"] option[value="Blacklisted"] {
    background-color: #ef4444 !important; /* Red */
    color: #fff !important;
}

select[name="status"] option[value="Not Interested"] {
    background-color: #f97316 !important; /* Orange for Not Interested */
    color: #fff !important;
}

select[name="status"] option[value="Applied"] {
    background-color: #3b82f6 !important; /* Blue */
    color: #fff !important;
}

select[name="status"] option[value="Hired"] {
    background-color: #86efac !important; /* Light green */
    color: #000 !important;
}

select[name="status"] option[value="Active"] {
    background-color: #22c55e !important; /* Green */
    color: #fff !important;
}

select[name="status"] option[value="Currently Unavailable"] {
    background-color: #fbbf24 !important; /* Orange gold */
    color: #000 !important;
}

/* Also style for the wire model in Livewire */
select[wire\:model*="status"] option[value="Pending"] {
    background-color: #ffff00 !important; /* Yellow */
    color: #000 !important;
}

select[wire\:model*="status"] option[value="Blacklisted"] {
    background-color: #ef4444 !important; /* Red */
    color: #fff !important;
}

select[wire\:model*="status"] option[value="Not Interested"] {
    background-color: #f97316 !important; /* Orange for Not Interested */
    color: #fff !important;
}

select[wire\:model*="status"] option[value="Applied"] {
    background-color: #3b82f6 !important; /* Blue */
    color: #fff !important;
}

select[wire\:model*="status"] option[value="Hired"] {
    background-color: #86efac !important; /* Light green */
    color: #000 !important;
}

select[wire\:model*="status"] option[value="Active"] {
    background-color: #22c55e !important; /* Green */
    color: #fff !important;
}

select[wire\:model*="status"] option[value="Currently Unavailable"] {
    background-color: #fbbf24 !important; /* Orange gold */
    color: #000 !important;
}

/* Colored backgrounds for non-native status dropdown options (Filament custom select) */
/* Target the dropdown list items - matching row colors */
[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Blacklisted"],
.status-select-colored + div [role="listbox"] [role="option"][data-value="Blacklisted"] {
    background-color: #ef4444 !important;
    color: #fff !important;
    font-weight: 500;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Blacklisted"]:hover,
.status-select-colored + div [role="listbox"] [role="option"][data-value="Blacklisted"]:hover {
    background-color: #dc2626 !important;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Not Interested"],
.status-select-colored + div [role="listbox"] [role="option"][data-value="Not Interested"] {
    background-color: #fbbf24 !important;
    color: #000 !important;
    font-weight: 500;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Not Interested"]:hover,
.status-select-colored + div [role="listbox"] [role="option"][data-value="Not Interested"]:hover {
    background-color: #f59e0b !important;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Pending"],
.status-select-colored + div [role="listbox"] [role="option"][data-value="Pending"] {
    background-color: #ffff00 !important;
    color: #000 !important;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Pending"]:hover,
.status-select-colored + div [role="listbox"] [role="option"][data-value="Pending"]:hover {
    background-color: #fde047 !important;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Active"],
.status-select-colored + div [role="listbox"] [role="option"][data-value="Active"] {
    background-color: #22c55e !important;
    color: #fff !important;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Active"]:hover,
.status-select-colored + div [role="listbox"] [role="option"][data-value="Active"]:hover {
    background-color: #16a34a !important;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Applied"],
.status-select-colored + div [role="listbox"] [role="option"][data-value="Applied"] {
    background-color: #3b82f6 !important;
    color: #fff !important;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Applied"]:hover,
.status-select-colored + div [role="listbox"] [role="option"][data-value="Applied"]:hover {
    background-color: #2563eb !important;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Hired"],
.status-select-colored + div [role="listbox"] [role="option"][data-value="Hired"] {
    background-color: #86efac !important;
    color: #000 !important;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Hired"]:hover,
.status-select-colored + div [role="listbox"] [role="option"][data-value="Hired"]:hover {
    background-color: #4ade80 !important;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Currently Unavailable"],
.status-select-colored + div [role="listbox"] [role="option"][data-value="Currently Unavailable"] {
    background-color: #fbbf24 !important;
    color: #000 !important;
}

[data-field-wrapper] .fi-fo-select .fi-select-option[data-value="Currently Unavailable"]:hover,
.status-select-colored + div [role="listbox"] [role="option"][data-value="Currently Unavailable"]:hover {
    background-color: #f59e0b !important;
}

/* Alternative selectors for Filament v3 */
li[data-value="Blacklisted"] {
    background-color: #ef4444 !important;
    color: #fff !important;
}

li[data-value="Not Interested"] {
    background-color: #f97316 !important;
    color: #fff !important;
}

li[data-value="Pending"] {
    background-color: #ffff00 !important;
    color: #000 !important;
}

li[data-value="Active"] {
    background-color: #22c55e !important;
    color: #fff !important;
}

li[data-value="Applied"] {
    background-color: #3b82f6 !important;
    color: #fff !important;
}

li[data-value="Hired"] {
    background-color: #86efac !important;
    color: #000 !important;
}

li[data-value="Currently Unavailable"] {
    background-color: #fbbf24 !important;
    color: #000 !important;
}

/* Very broad selectors for status dropdown in modal */
.fi-modal [wire\:key*="status"] ul li[data-value="Blacklisted"],
div[role="listbox"] li[data-value="Blacklisted"] {
    background-color: #ef4444 !important;
    color: #fff !important;
}

.fi-modal [wire\:key*="status"] ul li[data-value="Not Interested"],
div[role="listbox"] li[data-value="Not Interested"] {
    background-color: #f97316 !important;
    color: #fff !important;
}

.fi-modal [wire\:key*="status"] ul li[data-value="Pending"],
div[role="listbox"] li[data-value="Pending"] {
    background-color: #ffff00 !important;
    color: #000 !important;
}

.fi-modal [wire\:key*="status"] ul li[data-value="Active"],
div[role="listbox"] li[data-value="Active"] {
    background-color: #22c55e !important;
    color: #fff !important;
}

.fi-modal [wire\:key*="status"] ul li[data-value="Applied"],
div[role="listbox"] li[data-value="Applied"] {
    background-color: #3b82f6 !important;
    color: #fff !important;
}

.fi-modal [wire\:key*="status"] ul li[data-value="Hired"],
div[role="listbox"] li[data-value="Hired"] {
    background-color: #86efac !important;
    color: #000 !important;
}

.fi-modal [wire\:key*="status"] ul li[data-value="Currently Unavailable"],
div[role="listbox"] li[data-value="Currently Unavailable"] {
    background-color: #fbbf24 !important;
    color: #000 !important;
}

/* Job status filter colors - using native select options */
select option[value="expired"] {
    background-color: #ef4444 !important;
    color: #fff !important;
}

select option[value="closed"] {
    background-color: #f97316 !important;
    color: #fff !important;
}

select option[value="reposted"] {
    background-color: #22c55e !important;
    color: #fff !important;
}

/* Profile status badge colors - make warning badge orange */
.fi-ta-text-item .fi-badge.fi-color-warning {
    --c-50: 255, 247, 237;
    --c-400: 249, 115, 22;
    --c-600: 234, 88, 12;
}

/* Profile status filter colors */
[wire\:key*="profile_status"] li[data-value="Blacklisted"],
.fi-ta-filters [data-field="profile_status"] li[data-value="Blacklisted"] {
    background-color: #ef4444 !important;
    color: #fff !important;
}

[wire\:key*="profile_status"] li[data-value="Not Interested"],
.fi-ta-filters [data-field="profile_status"] li[data-value="Not Interested"] {
    background-color: #f97316 !important;
    color: #fff !important;
}

/* Filament select filter options with colors */
.fi-fo-select [role="option"][data-value="Blacklisted"] {
    background-color: #ef4444 !important;
    color: #fff !important;
}

.fi-fo-select [role="option"][data-value="Not Interested"] {
    background-color: #f97316 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .fi-dropdown.fi-ta-filters-dropdown .fi-dropdown-panel.absolute.z-10 {
        z-index: 20;
        margin-top: 90px !important;
    }
}