/* =============================================
   DrTech Admin — Premium Dashboard Theme
   ============================================= */

/* ---------- Global Enhancements ---------- */
:root {
    --dt-glass-bg: rgba(255, 255, 255, 0.03);
    --dt-glass-border: rgba(255, 255, 255, 0.06);
    --dt-glow-primary: rgba(14, 165, 233, 0.15);
    --dt-glow-success: rgba(16, 185, 129, 0.15);
    --dt-surface-dark: #0c1222;
    --dt-surface-card: #111827;
    --dt-border-subtle: rgba(148, 163, 184, 0.08);
}

/* ---------- Widget Cards — Glassmorphism ---------- */
.fi-wi-stats-overview-stat {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.6)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--dt-glass-border) !important;
    border-radius: 1rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 40px -8px rgba(14, 165, 233, 0.15),
                0 4px 16px -4px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(14, 165, 233, 0.2) !important;
}

.fi-wi-stats-overview-stat:hover::before {
    opacity: 1;
}

/* Light mode stat cards */
.fi-wi-stats-overview-stat:not(.dark *) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.8)) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
}

.fi-wi-stats-overview-stat:not(.dark *):hover {
    box-shadow: 0 12px 40px -8px rgba(14, 165, 233, 0.1),
                0 4px 16px -4px rgba(0, 0, 0, 0.08) !important;
}

/* ---------- Section & Widget Containers ---------- */
.fi-section,
.fi-wi-widget {
    border-radius: 1rem !important;
    border: 1px solid var(--dt-border-subtle) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-section:hover,
.fi-wi-widget:hover {
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.15),
                0 4px 10px -3px rgba(0, 0, 0, 0.08) !important;
}

/* ---------- Dark Mode Surface ---------- */
.dark .fi-section,
.dark .fi-wi-widget {
    background-color: var(--dt-surface-card) !important;
    border-color: var(--dt-border-subtle) !important;
}

.dark .fi-body {
    background: linear-gradient(180deg, #070b14 0%, #0c1222 50%, #0f172a 100%) !important;
}

/* ---------- Sidebar Premium Styling ---------- */
.fi-sidebar-item-active {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.04)) !important;
    border-left: 3px solid #0ea5e9 !important;
    border-top-right-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

.dark .fi-sidebar-item-active {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.15), rgba(14, 165, 233, 0.02)) !important;
}

.fi-sidebar-item {
    transition: all 0.2s ease !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    margin: 1px 8px 1px 0 !important;
}

.fi-sidebar-item:hover {
    background-color: rgba(14, 165, 233, 0.05) !important;
}

/* ---------- Table Enhancements ---------- */
.fi-ta-record {
    transition: all 0.2s ease !important;
}

.fi-ta-record:hover {
    background-color: rgba(248, 250, 252, 0.8) !important;
}

.dark .fi-ta-record:hover {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

/* Striped rows */
.dark .fi-ta-record:nth-child(even) {
    background-color: rgba(15, 23, 42, 0.3);
}

/* ---------- Chart Widget Styling ---------- */
.fi-wi-chart {
    border-radius: 1rem !important;
    overflow: hidden;
}

.dark .fi-wi-chart {
    background: linear-gradient(135deg, #111827, #0f172a) !important;
}

/* ---------- Header / Topbar ---------- */
.dark .fi-topbar {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06) !important;
}

/* ---------- Stat Value Text ---------- */
.fi-wi-stats-overview-stat-value {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    font-feature-settings: 'tnum' !important;
}

/* ---------- Badge Refinements ---------- */
.fi-badge {
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border-radius: 9999px !important;
}

/* ---------- Button Glow on Primary ---------- */
.fi-btn-primary {
    transition: all 0.2s ease !important;
}

.fi-btn-primary:hover {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3) !important;
}

/* ---------- Form Input Focus ---------- */
.dark .fi-input:focus,
.dark .fi-select:focus {
    border-color: rgba(14, 165, 233, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}

/* ---------- Notification Enhancement ---------- */
.fi-notification {
    backdrop-filter: blur(12px) !important;
    border-radius: 0.75rem !important;
}

/* ---------- Dashboard Heading ---------- */
.fi-header-heading {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* ---------- Scrollbar (Dark Mode) ---------- */
.dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.dark ::-webkit-scrollbar-track {
    background: transparent;
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.15);
    border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.25);
}

/* ---------- Subtle Pulse Animation for Pending Badge ---------- */
@keyframes dt-subtle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.fi-badge-warning {
    animation: dt-subtle-pulse 2s ease-in-out infinite;
}

/* ---------- Empty State Styling ---------- */
.fi-ta-empty-state {
    padding: 2rem !important;
}

.fi-ta-empty-state-icon {
    opacity: 0.4 !important;
}