@import url('/css/filament/filament/app.css');

.fi-main-sidebar,
.fi-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}

.fi-main-sidebar .fi-sidebar-item > .fi-sidebar-item-btn {
    border-radius: 10px !important;
    transition: background-color 120ms ease, color 120ms ease !important;
}

.fi-main-sidebar .fi-sidebar-item > .fi-sidebar-item-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: rgba(255, 255, 255, 0.18) !important;
}

.fi-main-sidebar .fi-sidebar-item > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-item > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: #cbd5e1 !important;
}

.fi-main-sidebar .fi-sidebar-item > .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-item > .fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: #ffffff !important;
}

.fi-main-sidebar .fi-sidebar-group-label {
    color: #93c5fd !important;
}

/* Guard against oversized icons if browser had stale CSS */
.fi-main-sidebar .fi-sidebar-item-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    transition: color 120ms ease-in-out !important;
}

.fi-main-sidebar .fi-sidebar-item > a.fi-sidebar-item-btn[href*="/admin/audit-logs"] .fi-sidebar-item-icon {
    color: #14b8a6 !important;
}

.fi-main-sidebar .fi-sidebar-item > a.fi-sidebar-item-btn[href*="/admin/departments"] .fi-sidebar-item-icon {
    color: #38bdf8 !important;
}

.fi-main-sidebar .fi-sidebar-item > a.fi-sidebar-item-btn[href*="/admin/ddos"] .fi-sidebar-item-icon {
    color: #22c55e !important;
}

.fi-main-sidebar .fi-sidebar-item > a.fi-sidebar-item-btn[href*="/admin/snes"] .fi-sidebar-item-icon {
    color: #f59e0b !important;
}

.fi-main-sidebar .fi-sidebar-item > a.fi-sidebar-item-btn[href*="/admin/employees"] .fi-sidebar-item-icon {
    color: #f97316 !important;
}

.fi-main-sidebar .fi-sidebar-item > a.fi-sidebar-item-btn[href*="/admin/users"] .fi-sidebar-item-icon {
    color: #a78bfa !important;
}

.fi-main-sidebar .fi-sidebar-item > a.fi-sidebar-item-btn[href="/admin"] .fi-sidebar-item-icon,
.fi-main-sidebar .fi-sidebar-item > a.fi-sidebar-item-btn[href$="/admin"] .fi-sidebar-item-icon {
    color: #fb7185 !important;
}

.app-stat-grid {
    display: grid;
    gap: 0.7rem;
}

.app-stat-grid--four {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.app-stat-grid--three {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.app-stat-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 6.6rem;
    border: 1px solid #c7d7cf;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, #eef3f1 0%, #ecf1ef 100%);
    padding: 0.9rem 1rem;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.app-stat-card:hover {
    border-color: #b9cbc2;
    box-shadow: 0 10px 25px rgba(148, 163, 184, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.app-stat-orb {
    position: absolute;
    top: -0.65rem;
    right: -0.65rem;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 999px;
    opacity: 0.42;
}

.app-stat-label {
    position: relative;
    z-index: 1;
    margin-bottom: 0.45rem;
    color: #1d6a51;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.app-stat-value {
    position: relative;
    z-index: 1;
    color: #0f172a;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
}

.app-stat-description {
    position: relative;
    z-index: 1;
    margin-top: 0.42rem;
    max-width: 15rem;
    color: #63748a;
    font-size: 0.72rem;
    line-height: 1rem;
}

.app-stat-card--forest .app-stat-orb,
.app-stat-card--sea .app-stat-orb,
.app-stat-card--amber .app-stat-orb,
.app-stat-card--rose .app-stat-orb,
.app-stat-card--sky .app-stat-orb,
.app-stat-card--slate .app-stat-orb {
    background: #aac3b7;
}

@media (min-width: 768px) {
    .app-stat-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-stat-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .app-stat-grid--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .app-stat-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}