/* ------------------------------------------------------------------
   Vertical navigation + fluid layout overrides (Tabler v1.0.0-alpha.7)
   Loaded after app.css. Keeps the compiled Tabler build untouched.
------------------------------------------------------------------ */

/* Full-width, fluid content: every container inside the app page stretches
   edge-to-edge for better use of the horizontal space next to the sidebar. */
.navbar-vertical.navbar-expand-lg ~ .page [class*="container"] {
    max-width: 100%;
    width: 100%;
}

/* ---- Sidebar shell: soft contrasting panel against the content area ---- */
.navbar-vertical.navbar-expand-lg {
    background-color: #eef2f8;
    border-right: 1px solid rgba(0, 0, 0, .07);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .6);
    padding: .5rem .25rem;
}

.navbar-vertical .navbar-brand {
    padding: 1rem 0 1.25rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.navbar-vertical .navbar-nav {
    padding: .5rem 0;
}

/* ---- Items: consistent height, spacing and icon alignment ---- */
.navbar-vertical .navbar-nav .nav-item {
    margin-bottom: 2px;
}

.navbar-vertical .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    padding: .55rem .85rem;
    border-radius: 6px;
    color: #4a5568;
    transition: background-color .15s ease, color .15s ease;
}

.navbar-vertical .navbar-nav .nav-link:hover {
    background-color: rgba(32, 107, 196, .08);
    color: var(--primary);
}

/* Fixed-width, vertically centred icon so every title lines up */
.navbar-vertical .nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    min-width: 1.4rem;
    height: 1.4rem;
    margin-right: .65rem;
    font-size: 1.05rem;
    line-height: 1;
    opacity: .8;
}
.navbar-vertical .nav-link-icon i,
.navbar-vertical .nav-link-icon svg {
    margin: 0 !important;
    line-height: 1;
    vertical-align: middle;
}

.navbar-vertical .nav-link-title {
    line-height: 1.2;
}

/* Dropdown caret pinned to the right edge */
.navbar-vertical .navbar-nav .dropdown-toggle:after {
    margin-left: auto;
}

/* ---- Active states ---- */
.navbar-vertical .nav-item.active > .nav-link {
    color: var(--primary);
    font-weight: 600;
    background-color: rgba(32, 107, 196, .1);
}
.navbar-vertical .nav-item.active > .nav-link .nav-link-icon {
    opacity: 1;
}

/* ---- Nested (sub-menu) items ---- */
.navbar-vertical .navbar-collapse .dropdown-menu {
    margin: 2px 0 6px;
}
.navbar-vertical .navbar-collapse .dropdown-menu.show {
    display: block;
}
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item {
    padding: .4rem .75rem .4rem 2.9rem;
    border-radius: 6px;
    border-left: 2px solid transparent;
    color: #5a6376;
}
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item:hover {
    background-color: rgba(32, 107, 196, .06);
    color: var(--primary);
}
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item.active {
    color: var(--primary);
    font-weight: 600;
    background-color: rgba(32, 107, 196, .1);
    border-left-color: var(--primary);
}

/* ---- Slim top bar sits flush against the sidebar ---- */
.page > .navbar.navbar-expand-md {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background-color: #fff;
}

/* ---- Responsive: sidebar collapses on small screens ---- */
@media (max-width: 991.98px) {
    .navbar-vertical.navbar-expand-lg ~ .page {
        padding-left: 0;
    }
    .navbar-vertical.navbar-expand-lg {
        width: 100%;
        position: relative;
    }
}