/* 
 * BBVM School ERP — Premium Enterprise Design System
 * Brand Color Palette:
 * Primary (Navy Blue): #1d2d6b
 * Secondary (Golden Yellow): #f9c615
 * Danger (Red): #d61a22
 * Success (Green): #2e7d32
 * Info (Blue): #0277bd
 */

/* 1. Global Page Layout & Transitions */
.fi-main {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%) !important;
}

.fi-header {
    background: linear-gradient(90deg, rgba(29, 45, 107, 0.08) 0%, rgba(255, 255, 255, 0.9) 100%) !important;
    border-bottom: 2px solid #1d2d6b !important;
    border-radius: 12px !important;
    padding: 18px 24px !important;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 24px !important;
}

.fi-header-heading {
    color: #1d2d6b !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

/* 2. Collapsible Sidebar & Navigation Options */
.fi-sidebar {
    background: linear-gradient(180deg, #1d2d6b 0%, #10193f 100%) !important;
    border-right: 1px solid #10193f !important;
    padding: 12px !important;
}

/* Sidebar Group Headers - Vibrant Golden Yellow on Dark Background */
.fi-sidebar-group-button,
.fi-sidebar-group-label {
    text-transform: uppercase !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    color: #f9c615 !important;
    padding: 16px 12px 6px 12px !important;
    border-bottom: 1px dashed rgba(249, 198, 21, 0.25) !important;
    margin-bottom: 8px !important;
}

.fi-sidebar-group-button span,
.fi-sidebar-group-label span {
    color: #f9c615 !important;
}

.fi-sidebar-group-button svg,
.fi-sidebar-group-button:hover svg {
    color: #f9c615 !important;
}

/* Inactive Sidebar Items - Light Grey on Dark Background */
.fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-button,
.fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-button span,
.fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-button svg {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

/* Inactive Sidebar Items Hover State - Translucent White with Gold Highlights */
.fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-button:hover,
.fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-button:hover span,
.fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-button:hover svg {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #f9c615 !important;
    font-weight: 700 !important;
}

.fi-sidebar-item-button {
    border-radius: 12px !important;
    padding: 8px 12px !important;
    transition: all 0.2s ease !important;
}

.fi-sidebar-item-button:hover:not(.fi-sidebar-item-active) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    padding-left: 16px !important;
}

/* Active Sidebar Items - Vibrant Golden Yellow Card with Navy Text */
.fi-sidebar-item-active {
    background: linear-gradient(135deg, #f9c615 0%, #e5a900 100%) !important;
    border-left: 4px solid #ffffff !important; /* White Accent */
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(249, 198, 21, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button svg,
.fi-sidebar-item-active .fi-sidebar-item-button span {
    color: #1d2d6b !important;
    font-weight: 850 !important;
}

/* 3. Custom Card styling & Glassmorphism */
.fi-wi-stats-overview-stat-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-left-width: 5px !important;
    border-left-style: solid !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.fi-wi-stats-overview-stat-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 20px -5px rgba(29, 45, 107, 0.12) !important;
}

.fi-wi-stats-overview-stat-card.fi-color-primary,
.fi-wi-stats-overview-stat-card:has(.text-primary-600) {
    border-left-color: #1d2d6b !important;
    background: linear-gradient(to right, #f4f6fc 0%, #ffffff 100%) !important;
}

.fi-wi-stats-overview-stat-card.fi-color-success,
.fi-wi-stats-overview-stat-card:has(.text-success-600) {
    border-left-color: #2e7d32 !important;
    background: linear-gradient(to right, #f1f8f3 0%, #ffffff 100%) !important;
}

.fi-wi-stats-overview-stat-card.fi-color-info,
.fi-wi-stats-overview-stat-card:has(.text-info-600) {
    border-left-color: #0277bd !important;
    background: linear-gradient(to right, #f0f7fc 0%, #ffffff 100%) !important;
}

.fi-wi-stats-overview-stat-card.fi-color-warning,
.fi-wi-stats-overview-stat-card:has(.text-warning-600) {
    border-left-color: #f9c615 !important;
    background: linear-gradient(to right, #fffdf2 0%, #ffffff 100%) !important;
}

.fi-wi-stats-overview-stat-card.fi-color-danger,
.fi-wi-stats-overview-stat-card:has(.text-danger-600) {
    border-left-color: #d61a22 !important;
    background: linear-gradient(to right, #fff5f5 0%, #ffffff 100%) !important;
}

/* 4. Table UI Improvements (SaaS Level) */
.fi-ta {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    background-color: white !important;
    border: 1px solid #e2e8f0 !important;
}

.fi-ta-header {
    background: linear-gradient(to right, #f4f6fc, #ffffff) !important;
    border-bottom: 2px solid #1d2d6b !important;
    padding: 18px 24px !important;
}

.fi-ta-header-title {
    color: #1d2d6b !important;
    font-weight: 800 !important;
}

.fi-ta-row {
    transition: all 0.2s ease !important;
}

.fi-ta-row:hover {
    background-color: rgba(29, 45, 107, 0.03) !important;
}

.fi-ta-col-wrp {
    padding: 14px 16px !important;
}

/* 5. Modern Form Fields & Focus States */
.fi-fo-section {
    border-left: 4px solid #1d2d6b !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 24px !important;
    border-top: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.fi-input-wrp {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
    background-color: #ffffff !important;
}

.fi-input-wrp:focus-within {
    border-color: #1d2d6b !important;
    box-shadow: 0 0 0 3px rgba(29, 45, 107, 0.15) !important;
}

.fi-fo-field-wrp-label label {
    font-weight: 700 !important;
    color: #334155 !important;
    font-size: 0.825rem !important;
}

.fi-fo-field-wrp-helper-text {
    font-size: 0.75rem !important;
    color: #64748b !important;
    margin-top: 4px !important;
}

/* 6. Buttons & Interactive Elements */
.fi-btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
    transition: all 0.2s ease-in-out !important;
}

/* Primary buttons default back to navy blue, hover changes to yellow */
.fi-btn-color-primary, .fi-ac-btn-action, .fi-modal-actions button[type="submit"] {
    background-color: #1d2d6b !important;
    color: #ffffff !important;
}

.fi-btn-color-primary:hover, .fi-ac-btn-action:hover, .fi-modal-actions button[type="submit"]:hover {
    background-color: #f9c615 !important;
    color: #1d2d6b !important;
    box-shadow: 0 4px 12px rgba(249, 198, 21, 0.3) !important;
}

.fi-btn-color-success {
    background-color: #2e7d32 !important;
}
.fi-btn-color-success:hover {
    background-color: #1b5e20 !important;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2) !important;
}

.fi-btn-color-danger {
    background-color: #d61a22 !important;
}
.fi-btn-color-danger:hover {
    background-color: #b71c1c !important;
    box-shadow: 0 4px 12px rgba(214, 26, 34, 0.2) !important;
}

/* 7. Toast & Action Notifications */
.fi-notifications {
    gap: 12px !important;
}

.fi-notification {
    border-radius: 16px !important;
    box-shadow: 0 10px 25px -5px rgba(29, 45, 107, 0.15) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 8. Customized Badges System */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 700 !important;
    padding: 2px 10px !important;
    font-size: 0.725rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.fi-badge-color-primary {
    background-color: rgba(29, 45, 107, 0.1) !important;
    color: #1d2d6b !important;
}
.fi-badge-color-success {
    background-color: rgba(46, 125, 50, 0.1) !important;
    color: #2e7d32 !important;
}
.fi-badge-color-warning {
    background-color: rgba(249, 198, 21, 0.15) !important;
    color: #b8860b !important;
}
.fi-badge-color-danger {
    background-color: rgba(214, 26, 34, 0.1) !important;
    color: #d61a22 !important;
}
.fi-badge-color-info {
    background-color: rgba(2, 119, 189, 0.1) !important;
    color: #0277bd !important;
}

/* 9. Dashboard Specific Enhancements */
.bg-primary-500 { background-color: #1d2d6b !important; }
.bg-success-500 { background-color: #2e7d32 !important; }
.bg-info-500 { background-color: #0277bd !important; }
.bg-warning-500 { background-color: #f9c615 !important; }
.bg-danger-500 { background-color: #d61a22 !important; }

/* Pulse animation for Live system status */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.25);
        opacity: 0.5;
    }
}

.animate-pulse-live {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 10. Print Styles for Reports */
@media print {
    .fi-sidebar,
    .fi-topbar,
    .hero-banner,
    .quick-action-btn,
    .bottom-summary-export,
    .fi-main-header,
    .fi-ta-actions,
    .fi-ta-filters,
    .fi-ta-header-ctas {
        display: none !important;
    }
    
    .fi-main {
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
    }
    
    .glass-card {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        page-break-inside: avoid !important;
        margin-bottom: 20px !important;
    }

    body {
        color: #000000 !important;
        background: #ffffff !important;
        font-size: 12pt !important;
    }
}

/* 11. Custom Grid Definition (Desktop First) */
.kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}
@media (max-width: 1399px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 639px) {
    .kpi-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* 12. Premium Sidebar Branding Header & Floating Logo */
.fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 20px !important;
}

.fi-sidebar-header a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.fi-sidebar-header .fi-logo,
.fi-sidebar-header a {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    font-family: 'Poppins', sans-serif !important;
    word-break: break-word !important;
    white-space: normal !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.fi-sidebar-header .fi-logo:hover,
.fi-sidebar-header a:hover {
    color: #f9c615 !important;
}

/* 13. Sidebar Navigation Badge High-Contrast Overrides */
.fi-sidebar .fi-badge {
    background-color: #f9c615 !important;
    color: #1d2d6b !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(249, 198, 21, 0.2) !important;
}