/* Custom CSS Variables - Add these to your existing :root */
:root, [data-bs-theme="light"] {
    --ibr-sidebar-bg: #1e293b; /* Deep Slate */
    --ibr-sidebar-text: #cbd5e1;
    --ibr-sidebar-hover: #ffffff;
    --ibr-sidebar-active-bg: #334155;
    --ibr-sidebar-width: 280px;
    --ibr-sidebar-collapsed-width: 70px;
    --ibr-header-height: 64px;
}

[data-bs-theme="dark"] {
    --ibr-sidebar-bg: #0f172a; 
    --ibr-sidebar-active-bg: #1e293b;
}

/* -----------------------------------------
   App Layout Grid
----------------------------------------- */
body {
    background-color: var(--ibr-bg-body);
    color: var(--ibr-text);
    overflow: hidden; /* Prevent body scroll, let main-content scroll */
}

.app-wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* -----------------------------------------
   Sidebar Styles
----------------------------------------- */
.app-sidebar {
    width: var(--ibr-sidebar-width);
    background-color: var(--ibr-sidebar-bg);
    color: var(--ibr-sidebar-text);
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    flex-shrink: 0;
    z-index: 1000;
}

/* State: Collapsed */
.sidebar-is-collapsed .app-sidebar {
    width: var(--ibr-sidebar-collapsed-width);
}

.sidebar-brand {
    height: var(--ibr-header-height);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sidebar-nav {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0;
}

/* Hide text and carets when collapsed */
.sidebar-is-collapsed .nav-title, 
.sidebar-is-collapsed .sidebar-nav .dropdown-toggle::after {
    display: none;
}

/* Center icons when collapsed */
.sidebar-is-collapsed .sidebar-nav .nav-link {
    justify-content: center;
    padding: 0.75rem 0;
}

.sidebar-is-collapsed .sidebar-nav .nav-link i {
    margin-right: 0 !important;
    font-size: 1.25rem;
}

/* Nav Links */
/* -----------------------------------------
   Nav Links & Animation Jitter Fix
----------------------------------------- */
/* Force the GPU to handle the accordion to prevent text snapping */
.app-sidebar .collapse {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.app-sidebar .nav-link {
    color: var(--ibr-sidebar-text);
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: color 0.2s ease, background-color 0.2s ease;
    
    /* Stabilize text thickness during animations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus {
    color: var(--ibr-sidebar-hover);
    background-color: var(--ibr-sidebar-active-bg);
}

/* Submenus (Decoupled from Bootstrap animation classes) */
.app-sidebar .submenu-link {
    padding-left: 3.5rem; 
    font-size: 0.9em;
    font-weight: 400;
}

/* Ensure the active border doesn't shift the submenu text */
.app-sidebar .submenu-link.active-link {
    padding-left: calc(3.5rem - 3px); 
}

/* The Enterprise "Active" State (Replaces fw-bold) */
.app-sidebar .nav-link.active-link {
    color: #ffffff;
    background-color: var(--ibr-sidebar-active-bg);
    border-left: 3px solid var(--ibr-primary);
    padding-left: calc(3.5rem - 3px); /* Offsets the border so text doesn't shift */
}

/* Hide submenus when pinned shut */
.sidebar-is-collapsed .app-sidebar .collapse {
    display: none !important; 
}

/* Submenus */
.app-sidebar .collapse .nav-link {
    padding-left: 3.5rem; /* Indent children */
    font-size: 0.9em;
    font-weight: 400;
}

.sidebar-is-collapsed .app-sidebar .collapse {
    display: none !important; /* Force hide submenus when pinned shut */
}

/* -----------------------------------------
   Main Content & Top Header
----------------------------------------- */
.app-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-header {
    height: var(--ibr-header-height);
    background-color: var(--ibr-bg-card);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    flex-shrink: 0;
}
[data-bs-theme="dark"] .app-header { border-bottom: 1px solid rgba(255,255,255,0.05); }

.app-content {
    flex-grow: 1;
    padding: 2rem;
    overflow-y: auto; /* This is what actually scrolls now */
}