@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

:root {
    --font-family-base: 'Tajawal', sans-serif;
    
    /* Colors */
    --fbr-primary: #0A47A1;     /* Royal Blue */
    --fbr-secondary: #4FB3FF;   /* Sky Blue */
    --fbr-sidebar-bg: #0B1727;  /* Dark Navy */
    --fbr-bg: #F4F7FA;          /* Light Gray Background */
    --fbr-card: #FFFFFF;        /* White Card */
    --fbr-text: #1F2933;        /* Dark Text */
    --fbr-text-muted: #6B7280;
}

body {
    font-family: var(--font-family-base) !important;
    background-color: var(--fbr-bg) !important;
    color: var(--fbr-text);
}

/* --- 1. Sidebar (The Luxurious Dark Look) --- */
.fi-sidebar {
    background-color: var(--fbr-sidebar-bg) !important;
    border-right: none !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.05);
}

.fi-sidebar-header {
    background-color: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Sidebar Links */
.fi-sidebar-item-label {
    color: #94A3B8 !important; /* Slate 400 */
    font-weight: 500 !important;
    transition: all 0.2s;
}

.fi-sidebar-item:hover .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* Active Item Style */
.fi-sidebar-item-active {
    background: rgba(79, 179, 255, 0.15) !important; /* Sky Blue Tint */
    border-right: 3px solid var(--fbr-secondary) !important;
    border-radius: 0 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--fbr-secondary) !important;
}

/* --- 2. Topbar --- */
.fi-topbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* --- 3. Cards & Widgets --- */
.fi-section, .fi-widget, .fi-ta {
    background-color: var(--fbr-card) !important;
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* --- 4. Buttons --- */
.fi-btn-primary {
    background-color: var(--fbr-primary) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

.fi-btn-primary:hover {
    background-color: #083a85 !important;
}

/* --- 5. Student Portal Specifics (Friendly UI) --- */
.student-layout .navbar {
    background: white;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.student-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    transition: transform 0.2s;
}
.student-card:hover {
    transform: translateY(-2px);
}