/* ============================================================
   NOVA MASTER THEME: FRENCH CHIC (STABLE)
   ============================================================ */

:root {
    --navy: #0B1426; /* Deep Sidebar Navy */
    --navy-mid: #101D35;
    --bp: #1A6FDB; /* Nova Primary Blue */
    --bg: #F6F8FE; /* Main Content Background */ /*#F4F6FA*/
    --sur: #FFFFFF; /* Card Surface */
    --bdr: rgba(0,0,0,0.08);
    --t1: #0B1426; /* Primary Text */
    --t2: #5A6478; /* Subtext */
    --crdback: #F6F8FE; /* Very Light Background for Cards */
    /* Semantic Colors */
    --gr: #0F8A5F;
    --grb: #E6F5F0;
    --or: #D4730A;
    --orb: #FFF3E2;
    --rd: #C0392B;
    --rdb: #FDF0EF;
}

/* --- BASE LAYOUT --- */
html, body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg) !important;
    color: var(--t1);
    margin: 0;
    padding: 0;
}

/* --- SIDEBAR STRUCTURE --- */
.sidebar {
    width: 260px !important;
    background-color: var(--navy) !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    position: sticky !important;
    top: 0;
    z-index: 100;
}

/* Navigation Items */
.ni {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.65) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.2s ease;
    margin: 2px 12px !important;
}

    .ni:hover {
        background: rgba(255,255,255,0.08) !important;
        color: #fff !important;
    }

    .ni.active {
        background-color: var(--bp) !important;
        color: #fff !important;
    }

.nav-label {
    padding: 20px 20px 8px 25px;
    font-size: 11px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    letter-spacing: 1.2px;
    font-weight: 600;
}

/* Pinned User Section */
.su {
    margin-top: auto !important;
    padding: 20px 16px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
}

/* --- DASHBOARD ELEMENTS --- */
.pg {
    padding: 32px 40px;
}

.ph {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    margin-bottom: 30px;
}

.pt {
    font-size: 24px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.5px;
}

.ps {
    font-size: 14px;
    color: var(--t2);
    margin-top: 4px;
}

/* Stats Grid */
.sg {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
    margin-bottom: 30px;
}

.sc {
    background: #fff;
    border: 1px solid var(--bdr);
    border-radius: 12px;
    padding: 20px;
    display: flex !important;
    align-items: center;
    gap: 16px;
}

.si {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

    .si.bl {
        background: #EBF3FF;
        color: #1A6FDB;
    }

    .si.gr {
        background: #E6F5F0;
        color: #0F8A5F;
    }

    .si.or {
        background: #FFF3E2;
        color: #D4730A;
    }

    .si.rd {
        background: #FDF0EF;
        color: #C0392B;
    }

.sn {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: var(--navy);
}

.sl {
    font-size: 12px;
    color: var(--t2);
    margin-top: 4px;
}

.btn.bo {
    background: #fff !important;
    border: 1px solid var(--bdr) !important;
    color: var(--t1) !important;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/*CHIC TABLE AND BOTTON ORIGINATING FROM CASEMANAGER-V300.RAZOR*/
/* --- EXACT IMAGE REPLICATION STYLES --- */
.chic-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

    .chic-table th {
        padding: 16px 12px;
        border-bottom: 1px solid var(--bdr);
        background: #fafbfc;
    }

    .chic-table td {
        padding: 14px 12px;
        border-bottom: 1px solid var(--bdr);
        font-size: 13px;
    }

.status-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    display: inline-block;
}

    .status-dot.gr {
        background: var(--gr);
    }

    .status-dot.rd {
        background: var(--rd);
    }

.btn-chic-action {
    padding: 5px 16px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid var(--bp);
}

    .btn-chic-action.primary {
        background: var(--bp);
        color: #fff;
    }

    .btn-chic-action.outline {
        background: transparent;
        color: var(--bp);
    }

    .btn-chic-action:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

.btn-white {
    background: #fff;
    color: var(--t1);
}

.btn-xs {
    padding: 2px 8px;
    font-size: 10px;
}

.x-small {
    font-size: 11px;
}

.cursor-pointer {
    cursor: pointer;
}


.nova-card-light {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
    .nova-card-light:hover {
        transform: translateY(-3px);
    }





/* --- MOBILE & BURGER BAR (Final Logic) --- */
.mobile-top-bar {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-top-bar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        background-color: var(--navy) !important;
        padding: 0 20px !important;
        height: 60px !important;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100% !important;
        z-index: 10000;
    }

    .sidebar {
        display: none !important;
        position: fixed !important;
        top: 60px !important;
        left: 0;
        width: 100% !important;
        height: calc(100vh - 60px) !important;
        z-index: 9999;
    }

        .sidebar.show-menu {
            display: flex !important;
        }

    .sg {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* 2 columns on mobile */
    .ph {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* --- NESTED NAVIGATION (French Chic) --- */
.ni-nested {
    margin-left: 12px; /* Pulls the children slightly right */
    border-left: 1px solid rgba(255,255,255,0.05); /* Subtle vertical line for visual guide */
    margin-bottom: 8px;
}

    .ni-nested .ni {
        font-size: 13px !important; /* Slightly smaller for hierarchy */
        color: rgba(255,255,255,0.5) !important;
        padding-left: 30px !important; /* Indent text further */
        margin: 0 12px !important;
    }

        .ni-nested .ni:hover {
            color: #fff !important;
            background: transparent !important; /* Don't highlight the whole block, just text */
        }

/* Ensure icons and text have consistent gap in the group header */
.ni span {
    display: flex;
    align-items: center;
    gap: 12px;
}