:root {
    --dv-blue: #00A6D6;
    /* DirecTV Celeste */
    --dv-blue-navy: #003865;
    /* DirecTV Navy */
    --dv-blue-deep: #001F3B;
    /* Deeper Navy */
    --dv-white: #FFFFFF;
    --dv-gray-light: #F1F5F9;
    /* Slate 100 */
    --dv-text: #0F172A;
    /* Slate 900 */
    --dv-muted: #64748B;
    /* Slate 500 */
}

body {
    background-color: var(--dv-white) !important;
    color: var(--dv-text) !important;
}

.fi-body {
    background: var(--dv-gray-light) !important;
}

/* Sidebar Styling - Branded Navy */
.fi-sidebar {
    background-color: var(--dv-blue-navy) !important;
    border-right: none !important;
}

.fi-sidebar-header {
    background-color: var(--dv-blue-navy) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.fi-sidebar-header * {
    color: white !important;
}

/* Sidebar labels, icons and group titles */
.fi-sidebar-item-label,
.fi-sidebar-item-icon,
.fi-sidebar-group-label,
.fi-sidebar-group-button {
    color: #FFFFFF !important;
}

.fi-sidebar-item>a {
    color: #FFFFFF !important;
    transition: all 0.2s;
}

.fi-sidebar-item>a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.fi-sidebar-item-active>a {
    background-color: var(--dv-blue) !important;
    color: white !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

.fi-sidebar-item-active>a * {
    color: white !important;
}

/* Sidebar label and user menu */
.fi-sidebar-nav-label {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    opacity: 0.9 !important;
}

/* Topbar Styling - Hiding it */
.fi-topbar {
    display: none !important;
}

/* Main Content Area Optimization */
.fi-main {
    max-width: 100% !important;
    padding-top: 2rem !important;
    /* Small space for banner */
}

.fi-main-ctn {
    max-width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* Hide breadcrumbs and page header specifically */
.fi-header {
    display: none !important;
}

/* Attendance Grid Styling */
.status-p {
    background-color: #10b981 !important;
    color: white !important;
}

.status-a {
    background-color: #ef4444 !important;
    color: white !important;
}

.status-d {
    background-color: #111827 !important;
    color: white !important;
}

.status-l {
    background-color: #f59e0b !important;
    color: white !important;
}

.status-v {
    background-color: #0ea5e9 !important;
    color: white !important;
}

/* Cards and Sections - Modernized Shadows */
.fi-card,
.fi-section,
.fi-ta-ctn,
.fi-wi {
    background-color: var(--dv-white) !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05) !important;
    border-radius: 1rem !important;
}

/* Buttons */
.fi-btn-color-primary {
    background-color: var(--dv-blue) !important;
    border-radius: 0.5rem !important;
}

.fi-btn-color-primary,
.fi-btn-color-primary *,
.fi-btn-color-primary .fi-btn-label {
    color: white !important;
    font-weight: 600 !important;
}

.fi-btn-color-primary:hover {
    background-color: var(--dv-blue-navy) !important;
}

/* Table styling */
.fi-ta-header {
    background-color: #F8FAFC !important;
}

.fi-ta-header-cell {
    color: var(--dv-blue-navy) !important;
    font-weight: 700 !important;
}

.fi-ta-row:hover {
    background-color: #F1F5F9 !important;
}

/* Custom Logout Button for Sidebar */
.fi-sidebar-item-button {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--dv-blue) !important;
}

/* Carousel Styles */
.banner-carousel {
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.banner-carousel img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.5s ease-in-out;
}