/* =====================================================================
   Modern Sidebar Theme
   Overrides the legacy gray gradient sidebar in style.css with a flat,
   modern dark look (navy charcoal + blue active accent).
   Loaded AFTER style.css so these rules win.
   ===================================================================== */

/* ---- container ---- */
#sidebar {
    background: #16202e !important; /* deep navy */
    box-shadow: 2px 0 8px rgba(0, 0, 0, .25);
    width: 210px !important;
}

.sidebar-scroll {
    background: #16202e;
    width: 210px !important;
    /* native scroll so the menu reflows and stays reachable when a dropdown expands
       (overrides the base rule "overflow: inherit !important" in style.css) */
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: transform .2s ease, visibility .2s ease;
    -webkit-transition: -webkit-transform .2s ease, visibility .2s ease;
}

/* push the page content over to match the wider sidebar */
#main-content {
    margin-left: 195px !important;
}
.sidebar-closed #main-content {
    margin-left: 0 !important;
}

/* Move the fixed wrapper itself when navigation is collapsed. Moving only
   #sidebar leaves this dark 160px wrapper on top of the page content. */
.sidebar-closed .sidebar-scroll {
    display: none !important;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
}

.sidebar-closed #sidebar {
    margin-left: 0;
}

#main-content {
    transition: margin-left .2s ease;
    -webkit-transition: margin-left .2s ease;
}

#sidebar > ul {
    padding-top: 6px !important;
}

/* ---- top-level items ---- */
#sidebar > ul > li {
    margin: 0 !important;
    line-height: normal !important;
}

#sidebar > ul > li > a {
    background: transparent !important;        /* kill the old gradient */
    background-image: none !important;
    margin: 3px 10px !important;               /* inset so the highlight is a rounded pill */
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    color: #c3ccd9 !important;
    border: none !important;
    border-radius: 8px !important;
    transition: background .2s ease, color .2s ease !important;
    -webkit-transition: background .2s ease, color .2s ease !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar > ul > li > a > span {
    vertical-align: middle;
}

/* icons */
#sidebar > ul > li a i {
    color: #e6a838 !important;            /* light-blue icons */
    font-size: 17px !important;
    width: 24px !important;
    text-align: center;
    transition: color .2s ease !important;
}

/* ---- distinct, colourful icon per top-level menu item (keyed by page slug so it
   works regardless of menu order / user permissions) ---- */
#sidebar > ul > li > a > i:before { font-family: 'FontAwesome' !important; }
#sidebar .menu-dashboard        > a > i:before { content: "\f0e4" !important; } /* dashboard  */
#sidebar .menu-setup            > a > i:before { content: "\f085" !important; } /* cogs       */
#sidebar .menu-selecthead       > a > i:before { content: "\f0e8" !important; } /* sitemap    */
#sidebar .menu-saleofficer      > a > i:before { content: "\f007" !important; } /* user       */
#sidebar .menu-vendors          > a > i:before { content: "\f0b1" !important; } /* briefcase  */
#sidebar .menu-customervisits   > a > i:before { content: "\f041" !important; } /* map-marker */
#sidebar .menu-adminpanel       > a > i:before { content: "\f132" !important; } /* shield     */
#sidebar .menu-targatedschool   > a > i:before { content: "\f02d" !important; } /* book       */
#sidebar .menu-distributor      > a > i:before { content: "\f0d1" !important; } /* truck      */
#sidebar .menu-managesamples    > a > i:before { content: "\f0c3" !important; } /* beaker     */
#sidebar .menu-onlineattendance > a > i:before { content: "\f017" !important; } /* clock      */
#sidebar .menu-sendsms          > a > i:before { content: "\f086" !important; } /* comments   */

/* all sidebar icons white (distinct glyphs above are kept) */
#sidebar .sidebar-menu > li > a > i { color: #ffffff !important; }

/* hover -> same rounded blue pill as the active item */
#sidebar > ul > li > a:hover {
    background: linear-gradient(135deg, #efa01e, #d38701) !important;
    color: #ffffff !important;
    border: none !important;
    text-decoration: none;
}

#sidebar > ul > li > a:hover i {
    color: #ffffff !important;
}

/* active (current section) */
#sidebar > ul > li.active > a {
    background: linear-gradient(135deg, #efa01e, #d38701) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
}

#sidebar > ul > li.active > a i {
    color: #ffffff !important;
}

/* ---- arrows ---- */
#sidebar ul > li > a .arrow {
    border-left-color: #6b7a8d;
    margin-top: 6px;
}

#sidebar > ul > li > a .arrow.open {
    border-top-color: #6b7a8d;
    margin-top: 7px;
}

#sidebar ul > li.active > a .arrow,
#sidebar ul > li > a:hover .arrow {
    border-left-color: #fff;
    margin-top: 6px;
}

#sidebar > ul > li.active > a .arrow.open,
#sidebar > ul > li > a:hover .arrow.open {
    border-top-color: #fff;
    margin-top: 7px;
}

/* ---- sub menus ---- */
#sidebar > ul > li > ul.sub {
    background: #18222e !important;
}

#sidebar > ul > li > ul.sub > li {
    margin: 0 !important;
}

#sidebar > ul > li > ul.sub > li > a {
    padding: 10px 12px 10px 42px !important;   /* indent under parent icon */
    color: #97a4b5 !important;
    text-shadow: none !important;
    font-size: 13px !important;
    border-left: 3px solid transparent !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

#sidebar > ul > li > ul.sub > li > a:hover {
    background: #222f3e !important;
    color: #ffffff !important;
    border-left-color: #efa01e !important;
    text-decoration: none;
}

#sidebar > ul > li > ul.sub > li.active > a {
    background: #222f3e !important;
    color: #ffffff !important;
    border-left-color: #d38701 !important;
    font-weight: 600 !important;
}

/* ---- third-level sub menus (Setup > Manage Product > Brand / Subject / Segment) ----
   The base theme only styles two levels, so the nesting below is defined here. Like
   level two, it opens on page load via .active and is toggled by the sidebar script. */
#sidebar > ul > li > ul.sub > li > ul.sub {
    display: none;
    list-style: none;
    clear: both;
    margin: 0 !important;
    background: #131c26 !important;
}

#sidebar > ul > li > ul.sub > li.active > ul.sub {
    display: block;
}

#sidebar > ul > li > ul.sub > li > ul.sub > li {
    background: none !important;
    margin: 0 !important;
    padding: 0;
}

#sidebar > ul > li > ul.sub > li > ul.sub > li > a {
    display: block;
    padding: 9px 12px 9px 58px !important;   /* one indent step deeper than its parent */
    color: #8593a5 !important;
    text-shadow: none !important;
    font-size: 12.5px !important;
    border-left: 3px solid transparent !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}

#sidebar > ul > li > ul.sub > li > ul.sub > li > a:hover {
    background: #1c2836 !important;
    color: #ffffff !important;
    border-left-color: #efa01e !important;
    text-decoration: none;
}

#sidebar > ul > li > ul.sub > li > ul.sub > li.active > a {
    background: #1c2836 !important;
    color: #ffffff !important;
    border-left-color: #d38701 !important;
    font-weight: 600 !important;
}

/* the nested group's own row keeps the level-two indent, with room for its arrow */
#sidebar > ul > li > ul.sub > li.sub-menu > a .arrow {
    float: right;
    margin-right: 10px;
}

/* ---- custom scrollbar for the sidebar ---- */
.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: #16202e;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: #3a4a5e;
    border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #4a5d75;
}