.header-panel-navigation {
    display: flex;
    gap: 1rem;
    margin-right: 1rem;
}

.header-panel-navigation-link {
    color: #395e96;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s;
}
.fi-panel-implement .header-panel-navigation-link, .fi-panel-implement-admin .header-panel-navigation-link {
    color: #444444;
}
.header-panel-navigation-link.active {
    font-weight: bold;
    color: #96bc00;
}

.header-panel-navigation-link:hover {
    color: #96bc00;
}

main, .fi-sidebar-nav, .fi-main-ctn  {
    background-color: #e8eef6;
}
.fi-panel-implement main, .fi-panel-implement .fi-sidebar-nav, .fi-panel-implement .fi-main-ctn,
.fi-panel-implement-admin main, .fi-panel-implement-admin .fi-sidebar-nav, .fi-panel-implement-admin .fi-main-ctn {
    background-color: #e7e7e7;
}

.fi-sidebar-item-active a {
    background-color: #96bc00;
}

.fi-sidebar-item-active a span, .fi-sidebar-item-active a svg {
    color: white;
}

.fi-sidebar-item a:hover {
    background-color: #96bc00;
}

.fi-sidebar-item a:hover span, .fi-sidebar-item a:hover svg {
    color: white;
}

/* Status-based coloring for Filament SelectColumn (dropdown only) */
.status-publish select {
    background-color: #d1fae5 !important; /* green-100 */
    color: #065f46 !important;           /* green-800 */
}
.status-draft select {
    background-color: #fef3c7 !important; /* yellow-100 */
    color: #92400e !important;            /* yellow-800 */
}
.status-trash select,
.status-cancelled select {
    background-color: #fee2e2 !important; /* red-100 */
    color: #991b1b !important;            /* red-800 */
}
.status-pending select,
.status-under_review select {
    background-color: #e0e7ff !important; /* blue-100 */
    color: #3730a3 !important;            /* blue-800 */
}
.status-gray select {
    background-color: #f3f4f6 !important; /* gray-100 */
    color: #374151 !important;            /* gray-800 */
}

/* Make status dropdowns look more like badges */
.status-publish select,
.status-draft select,
.status-trash select,
.status-cancelled select,
.status-pending select,
.status-under_review select,
.status-gray select {
    border-radius: 0.5rem !important;   /* Subtle rounded */
    padding: 0.25em 1em !important;     /* Padding for pill shape */
    font-weight: bold !important;       /* Bold text */
    border: none !important;            /* Remove border for cleaner look */
    box-shadow: none !important;        /* Remove shadow */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    min-width: 100px;                   /* Optional: ensure consistent width */
    text-align: center;                 /* Center text */
    cursor: pointer;
    outline: none; /* Remove default outline */
}

/* Custom focus outline with matching border-radius */
.status-publish select:focus,
.status-draft select:focus,
.status-trash select:focus,
.status-cancelled select:focus,
.status-pending select:focus,
.status-under_review select:focus,
.status-gray select:focus {
    outline: 2px solid #2563eb; /* blue-600, or your preferred color */
    outline-offset: 2px;
    border-radius: 0.5rem !important; /* Ensure outline matches badge shape */
}