.dark\:bg-danger:is(.dark *) {
    background-color: #8C333A;
}
.dark\:bg-cyan:is(.dark *) {
    background-color: #08d8ea61;
}

.dark\:bg-purple:is(.dark *) {
    background-color: rgba(128, 90, 213, 0.1);
}

.dark\:bg-success:is(.dark *) {
    background-color: #28684A;
}


.dark\:bg-orange:is(.dark *) {
    background-color: #b4671a;
}


/* Light mode */
.fi-badge.fi-color-primary {
    background-color: rgba(223, 234, 255, 1) !important; /* primary-700 */
    color: rgba(54, 87, 195, 1) !important;             /* primary-600 */
}

/* Dark mode */
.dark .fi-badge.fi-color-primary {
    color: rgba(147, 180, 255, 1) !important;           /* primary-900 */
    background-color: rgba(23, 36, 72, 1) !important;   /* primary-800 */
}

.fi-wi-stats-overview-stat{
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.6),
        rgba(245, 245, 245, 0.9)
    );
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.fi-fo-date-time-picker-panel .rounded-full.bg-gray-50{
    background-color: #D0DFFF;
}

.dark .fi-wi-stats-overview-stat{
    background: linear-gradient(
        to bottom,
        oklch(0.21 0.032 264.665),
        #111827,
        rgba(0, 0, 0, 0.2)
    );
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}
.dark .fi-wi-stats-overview-stat::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.2) 0%,
        rbga(255, 255, 255, 0) 40%,
        transparent 60%
    );
    pointer-events: none;
}

.fi-wi-stats-overview-stat::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rbga(255, 255, 255, 0.15) 40%,
        transparent 60%
    );
    pointer-events: none;
}

.bg-danger {
    background-color: #F8d7da;
}
.bg-success {
    background-color: #C4E8D1;
}



.bg-orange {
    background-color: #ffe0b2;
}

.bg-cyan {
    background-color: #d6eaf8;
}

.bg-purple {
    background-color: rgb(128, 90, 213);
}
.fi-badge.tag-danger,
.fi-badge.tag-success,
.fi-badge.tag-cyan,
.fi-badge.tag-orange,
.fi-badge.tag-purple,
.fi-badge.tag-gray {
    border-radius: 9999px;
    padding: 2px 8px;
    font-weight: 500;
    font-size: 0.75rem;
    display: inline-block;
}


.fi-badge.tag-danger {
    background-color: #F8D7DA;
    color: #7F1D1D;
}
.dark .fi-badge.tag-danger {
    background-color: #8C333A;
    color: #FEE2E2;
}


.fi-badge.tag-success {
    background-color: #C4E8D1;
    color: #14532D;
}
.dark .fi-badge.tag-success {
    background-color: #28684A;
    color: #D1FAE5;
}


.fi-badge.tag-cyan {
    background-color: #D6EAF8;
    color: #155E63;
}
.dark .fi-badge.tag-cyan {
    background-color: #08d8ea61;
    color: #A7F3D0;
}

.fi-badge.tag-slate {
    background-color: #CBD5E1; /* Light slate background */
    color: #0052f3;            /* Dark slate text */
}

.dark .fi-badge.tag-slate {
    background-color: #0052f3; /* Dark slate background */
    color: #CBD5E1;            /* Light slate text */
}


.fi-badge.tag-indigo {
    background-color: #C7D2FE; /* Light indigo background */
    color: #3730A3;           /* Darker indigo text */
}

.dark .fi-badge.tag-indigo {
    background-color: #3730A3; /* Dark indigo background */
    color: #C7D2FE;           /* Light indigo text */
}

.fi-badge.tag-purple {
    background-color: #E0D4F7;
    color: #4C1D95;
}
.dark .fi-badge.tag-purple {
    background-color: rgba(128, 90, 213, 0.1);
    color: #C4B5FD;
}


.fi-badge.tag-orange {
    background-color: #FFE0B2;
    color: #92400E;
}

.dark .fi-badge.tag-orange {
    background-color: #b4671a;
    color: #FDE68A;
}


/* ⚪ Default / Gray */
.fi-badge.tag-gray {
    background-color: #E5E7EB;
    color: #1F2937;
}
.dark .fi-badge.tag-gray {
    background-color: #374151;
    color: #F3F4F6;
}
.shadow-2xl {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

.fi-sidebar-nav {
    border-inline-end: 1px solid rgb(229, 231, 235);
}

.dark .fi-sidebar-nav {
    border-inline-end: 1px solid rgb(55, 65, 81); /* Tailwind's gray-700 */
}
.fi-panel-admin .fi-wi-stats-overview-stats-ctn:not(.fi-resource-tickets .fi-wi-stats-overview-stats-ctn) {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
}

.fi-fo-date-time-picker-calendar-day.fi-fo-date-time-picker-calendar-day-today.fi-focused {
    background-color: #D0DFFF; /* light blue for today */
}

/* Dark mode */
.dark .fi-fo-date-time-picker-calendar-day.fi-fo-date-time-picker-calendar-day-today.fi-focused {
    background-color: #1E3A8A; /* darker blue for dark mode */
}

/* Optional: ensure stats don’t stretch too much */
.fi-wi-stats-overview-stats-ctn > * {
    width: 100%;
}
/* Dark mode */

.pending{
    background-color: #714F19 !important;
}

.resolved{
    background-color: #714F19 !important;
}



.dark .fi-simple-main{
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important;

}
.fi-simple-main{
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;

}
.fi-simple-main::before {
    z-index: -1;
    content: "";
    width: 40rem;
    height: 40rem;
    background: radial-gradient(circle at 30% 30%, rgba(102, 21, 33, 0.1), #5a8aff);
    border-radius: 50%;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 22px 22px rgba(0, 0, 0, 0.1) !important;
    position: absolute;
    top: -30%;
    left: 0%;
    animation: float 5s infinite ease-in-out;
}

/* Stars */
.fi-simple-main::after {
    z-index: -1;
    content: "";
    width: 16rem;
    height: 16rem;
    background: radial-gradient(circle at 70% 70%, #87a5ef 20%, #5a8aff 80%);
    border-radius: 50%;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 22px 22px rgba(0, 0, 0, 0.1) !important;
    position: absolute;
    top: 64%;
    right: 24%;
    animation: float 3s infinite ease-in-out alternate; /* Different timing */
}

.fi-icon-btn-badge-ctn{
    background-color: rgb(239, 68, 68) !important;
}
.fi-icon-btn-badge-ctn .fi-badge,.fi-modal-heading .fi-badge{
    background-color: rgb(239, 68, 68) !important;
    color: white !important;

}


/* Twinkle animation for stars */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}








.fi-badge.tag-5 {
    background-color: #62ba42 !important;
    color: #172b0f !important;
}
.dark .fi-badge.tag-5 {
    background-color: #356424 !important;
    color: #80f357 !important;
}
.fi-badge.tag-13 {
    background-color: #8134d8 !important;
    color: #1e0c32 !important;
}
.dark .fi-badge.tag-13 {
    background-color: #451c74 !important;
    color: #a844ff !important;
}
.fi-badge.tag-2 {
    background-color: #f33a3a !important;
    color: #641818 !important;
}
.dark .fi-badge.tag-2 {
    background-color: #641818 !important;
    color: #f33a3a !important;
}
.fi-badge.tag-4 {
    background-color: #a0b9ff !important;
    color: #424c94 !important;
}
.dark .fi-badge.tag-4 {
    background-color: #424c94 !important;
    color: #a0b9ff !important;
}
.fi-badge.tag-21 {
    background-color: #ffe29e !important;
    color: #7d5d41 !important;
}
.dark .fi-badge.tag-21 {
    background-color: #7d5d41 !important;
    color: #ffe29e !important;
}
.fi-badge.tag-3 {
    background-color: #ffff81 !important;
    color: #927635 !important;
}
.dark .fi-badge.tag-3 {
    background-color: #927635 !important;
    color: #ffff81 !important;
}
.tag-9 { background-color: #993b3b; }
.fi-badge.tag-9 {
    background-color: rgba(176, 255, 235, 0.45) !important;
    color: rgba(106, 173, 141, 1) !important;
}
.dark .fi-badge.tag-9 {
    background-color: rgba(85, 138, 113, 0.35) !important;
    color: rgba(212, 255, 255, 1) !important;
}
.fi-badge.tag-8 {
    background-color: rgba(255, 171, 171, 0.45) !important;
    color: rgba(173, 103, 103, 1) !important;
}
.dark .fi-badge.tag-8 {
    background-color: rgba(138, 82, 82, 0.35) !important;
    color: rgba(255, 206, 206, 1) !important;
}



.fi-badge.tag-1 {
    background-color: rgba(255, 59, 59, 0.45) !important;
    color: rgba(153, 35, 35, 1) !important;
}
.dark .fi-badge.tag-1 {
    background-color: rgba(122, 28, 28, 0.35) !important;
    color: rgba(255, 71, 71, 1) !important;
}