/* =========================================================
   SIDEBAR
========================================================= */

.navbar-vertical.navbar-expand-lg {
    background: #ffffff !important;
    width: 15rem !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1030 !important;
    align-items: flex-start !important;
    transition: transform .3s !important;
    overflow-y: scroll !important;
    padding: 0 !important;

}

.gr1p-sidebar .navbar-vertical.navbar-expand-lg {

    width: 250px !important;

    border-right: 1px solid #e5e7eb !important;
}

/* INNER SPACING */

.gr1p-sidebar .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* BRAND */
.gr1p-sidebar .navbar-brand {
    margin-bottom: 24px !important;
    padding-left: 10px !important;
}

.gr1p-sidebar .navbar-brand a {
    color: #111111 !important;
    text-decoration: none !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* NAVIGATION */

.gr1p-sidebar .navbar-nav {
    gap: 4px !important;
}

/* NAV LINKS */

.gr1p-sidebar .nav-link {
    min-height: 44px !important;
    border-radius: 12px !important;

    padding: 10px 12px !important; /* more balanced */

    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;

    justify-content: flex-start !important;
    text-align: left !important;

    transition: all 0.2s ease !important;
}

/* HOVER */
.navbar .navbar-nav .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.08) !important; /* light hover effect */
    color: #000 !important; /* optional */
}


/* ACTIVE */

.gr1p-sidebar .nav-link.active {

    background: #ebebeb !important;

    color: #000000 !important;
}

/* ICONS */

.gr1p-sidebar .nav-link i {
    width: 20px;              /* equal icon space */
    text-align: center;      /* center icon */
    margin-right: 10px !important;
    font-size: 18px !important;
}

/* LOGOUT */

.gr1p-sidebar-footer {

    padding-top: 24px !important;
}



/* =========================================================
   SIDEBAR SECTION TITLES (SAAS STYLE)
========================================================= */

.sidebar-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    color: #6b7280 !important;
    text-transform: uppercase;
}

/* divider */
.sidebar-divider {
    border: none !important;
    height: 1px !important;
    background: rgba(48, 46, 46, 0.877) !important;
    margin: 8px 0 !important;
}

/* spacing fix for grouped sections */
.navbar-vertical .nav-item {
    margin-bottom: 2px;
}

/* =========================================================
   SIDEBAR MINIMAL SAAS FIX (TABLER VERTICAL LAYOUT)
   Only fixes readability + hover + active state
========================================================= */

/* Sidebar base */
.navbar-vertical {
    background: #ffffff !important;
}

/* Main link style (DO NOT overstyle) */

.navbar-vertical .nav-link:hover {
    background: rgba(79, 70, 229, 0.12) !important;
    border-radius: 8px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

/* IMPORTANT: prevent Tabler muted override on text */
.navbar-vertical .nav-link-title {
    color: inherit !important;
}

/* Hover state (subtle SaaS style) */
.navbar-vertical .nav-link:hover {
    color: var(--tblr-gray-950)
}

/* Ensure text stays readable on hover */
.navbar-vertical .nav-link:hover .nav-link-title,
.navbar-vertical .nav-link:hover .nav-link-icon {
    color: var(--tblr-gray-950)
}

/* Active state (clean accent only) */
.navbar-vertical .nav-link.active {
    color: var(--tblr-gray-950)
}

/* Active text/icon fix */
.navbar-vertical .nav-link.active .nav-link-title,
.navbar-vertical .nav-link.active .nav-link-icon {
    color: var(--tblr-gray-950)
}

.nav-link[aria-expanded="true"] .ti-chevron-down {

    transform: rotate(180deg);
    transition: transform .2s ease;

}

.ti-chevron-down {

    transition: transform .2s ease;

}

.settings-submenu {
    padding-left: 12px !important;
}



/* =========================================================
   MOBILE + TABLET OFFCANVAS (LIGHT MODE FIX)
========================================================= */

@media (max-width: 1199px) {

    /* OFFCANVAS BASE */
    .offcanvas.offcanvas-start {

        width: 280px !important;
        background: #ffffff !important;
        color: #111827 !important;

        border-right: 1px solid #e5e7eb !important;

    }

    /* BODY */
    .offcanvas.offcanvas-start .offcanvas-body {

        background: #ffffff !important;
        color: #111827 !important;

    }

    .offcanvas .nav-link {
    transition: all 0.2s ease;
}

    /* HEADER */
    .offcanvas.offcanvas-start .offcanvas-header {

        background: #ffffff !important;
        border-bottom: 1px solid #e5e7eb !important;

    }

    /* NAV LINKS */
    .offcanvas.offcanvas-start .nav-link {

        min-height: 44px !important;
        padding: 10px 12px !important;

        border-radius: 10px !important;

        display: flex !important;
        align-items: center !important;

        font-weight: 500 !important;

        color: #111827 !important;

        transition: all 0.2s ease !important;

    }

    /* ICONS + TEXT */
    .offcanvas.offcanvas-start .nav-link i,
    .offcanvas.offcanvas-start .nav-link-title {

        color: #111827 !important;

    }

    /* HOVER */
    .offcanvas.offcanvas-start .nav-link:hover {
    background: #f9fafb !important;
    color: #111827 !important;
}

    /* ACTIVE */
    .offcanvas.offcanvas-start .nav-link.active {

    background: #eef2ff !important;
    color: #111827 !important;
}

    /* ICON ALIGNMENT */
    .offcanvas.offcanvas-start .nav-link i {
    width: 20px !important;
    text-align: center !important;
    margin-right: 10px !important;
}

    /* SUBMENU */
    .offcanvas .navbar-nav.ps-3 {
    padding-left: 14px !important;
    border-left: 1px solid #e5e7eb;
    margin-left: 6px;
}

    /* DROPDOWN ICON */
    .offcanvas .ti-chevron-down {

        transition: transform 0.2s ease !important;

    }

    .offcanvas .nav-link[aria-expanded="true"] .ti-chevron-down {

        transform: rotate(180deg);

    }

}