/* Custom Admin Panel Styling matching Habit Tracker (Sage Green & Deep Navy) */

/* 1. Login/Simple layout page styling */
.fi-simple-layout {
    background: radial-gradient(circle at 10% 20%, rgba(122, 158, 126, 0.9) 0%, rgba(30, 41, 59, 1) 90.2%) !important;
}

.fi-simple-card {
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.dark .fi-simple-card {
    background-color: rgba(30, 41, 59, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 2. Page & Body Background styling (Supabase-like grid dots pattern) */
body {
    background-color: #f8fafc !important;
    background-image: radial-gradient(#cbd5e1 0.8px, transparent 0.8px) !important;
    background-size: 24px 24px !important;
    background-position: 0 0 !important;
}

.dark body {
    background-color: #0b0f19 !important;
    background-image: radial-gradient(#1e293b 1px, transparent 1px) !important;
}

.fi-layout,
.fi-main-ctn,
.fi-main,
.fi-content,
.fi-content > div {
    background-color: transparent !important;
}

/* 3. Header / Topbar Glassmorphic styling */
.fi-topbar {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.dark .fi-topbar {
    background-color: rgba(11, 15, 25, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 4. Global Cards, Container, and Table Shapes */
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-section {
    border-radius: 20px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background-color: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 8px 24px rgba(148, 163, 184, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
}

.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn,
.dark .fi-section {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background-color: rgba(30, 41, 59, 0.65) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* Hover effects for dashboard widget stats */
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 32px rgba(122, 158, 126, 0.08) !important;
    border-color: rgba(122, 158, 126, 0.4) !important;
}

.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(122, 158, 126, 0.5) !important;
}

/* 5. Inputs & Forms Premium focus state */
.fi-fo-field-wrapper input,
.fi-fo-field-wrapper select,
.fi-fo-field-wrapper textarea {
    border-radius: 12px !important;
    transition: all 0.2s ease-in-out !important;
}

.fi-fo-field-wrapper input:focus,
.fi-fo-field-wrapper select:focus,
.fi-fo-field-wrapper textarea:focus {
    border-color: #7A9E7E !important;
    box-shadow: 0 0 0 3px rgba(122, 158, 126, 0.18) !important;
}

/* 6. Sidebar Premium Glass Pill Styling */
.fi-sidebar {
    border-right: 1px solid rgba(226, 232, 240, 0.8) !important;
    background-color: #fcfdfe !important;
}

.dark .fi-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    background-color: #080c14 !important;
}

.fi-sidebar-group-key {
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    color: #94a3b8 !important;
}

/* Active navigation item */
.fi-sidebar-item-active a {
    background: linear-gradient(135deg, rgba(122, 158, 126, 0.12) 0%, rgba(30, 41, 59, 0.03) 100%) !important;
    border: 1px solid rgba(122, 158, 126, 0.25) !important;
    color: #7A9E7E !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(122, 158, 126, 0.06) !important;
}

.dark .fi-sidebar-item-active a {
    background: linear-gradient(135deg, rgba(122, 158, 126, 0.2) 0%, rgba(30, 41, 59, 0.05) 100%) !important;
    border: 1px solid rgba(122, 158, 126, 0.35) !important;
    color: #9cbca0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.fi-sidebar-item a {
    border-radius: 12px !important;
    margin: 2px 8px !important;
    border: 1px solid transparent;
    transition: all 0.2s ease !important;
}

.fi-sidebar-item a:hover:not(.fi-sidebar-item-active a) {
    background-color: rgba(122, 158, 126, 0.05) !important;
    border-color: rgba(122, 158, 126, 0.1) !important;
}

.dark .fi-sidebar-item a:hover:not(.fi-sidebar-item-active a) {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* 7. Tables Design */
.fi-ta-row {
    transition: all 0.2s ease !important;
}

.fi-ta-row:hover {
    background-color: rgba(122, 158, 126, 0.03) !important;
}

.dark .fi-ta-row:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.fi-ta-header-cell {
    background-color: rgba(248, 250, 252, 0.8) !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
}

.dark .fi-ta-header-cell {
    background-color: rgba(15, 23, 42, 0.5) !important;
}

/* 8. Buttons enhancements */
.fi-btn {
    border-radius: 12px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
}

.fi-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(122, 158, 126, 0.2) !important;
}

.fi-btn-color-primary {
    background-color: #7A9E7E !important;
}

.fi-btn-color-primary:hover {
    background-color: #698a6d !important;
}

/* 9. Custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #7A9E7E;
    border-radius: 4px;
}