/* ---------------------------------------------------- */
/* 💅 SIDEBAR: BASE & MINI-MODE STYLES (CONSOLIDATED) */
/* ---------------------------------------------------- */

/* Base Styles */
.left-sidebar {
    width: 240px;
    transition: width 240ms ease, transform 240ms ease;
    z-index: 1040;
    position: fixed;
    background: #fff;
    padding: 0;
}

/* 🎯 ALIGNMENT FIX: Ensure all links align to the start in EXPANDED mode (Non-Hover) */
.sidebar-link {
    /* Set display to flex to control internal alignment */
    display: flex;
    /* Force content to the start (left) */
    justify-content: flex-start !important;
    /* Sets the standard padding for all primary links */
    padding: 10px 15px; 
    /* Add a gap for icon/text spacing */
    gap: 15px; 
    align-items: center; /* Vertically center icon and text */
}

/* MINI / ICONS-ONLY mode */
.mini-sidebar .left-sidebar {
    width: 76px;
    border-right: 1px solid #eee;
}

/* Hide textual labels and badges in mini mode */
.mini-sidebar .hide-menu {
    display: none !important;
}
.mini-sidebar .sidebar-link.has-arrow::after {
    display: none;
}

/* 🖼️ LOGO ALIGNMENT & SIZING */
.mini-sidebar .brand-logo {
    justify-content: center !important;  
    padding: 10px 0;
}
.mini-sidebar .brand-logo .logo-img {
    width: auto; 
    overflow: hidden; 
    text-align: center;
}
.mini-sidebar .brand-logo .logo-img img {
    width: 36px;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 1;
}
.mini-sidebar .brand-logo .close-btn {
    display: none !important;
}

/* 🔗 Navigation Links Alignment for Mini Mode */
.mini-sidebar .sidebar-link {
    justify-content: center !important;
    padding: 8px 0.5rem; /* Compact vertical padding */
    /* Ensure all direct children are centered for simple links */
    display: flex !important;
    flex-direction: column; 
    align-items: center; /* Center the icon horizontally */
    gap: 0 !important; /* Remove gap in mini mode */
}
.mini-sidebar .sidebar-link .d-flex.align-items-center {
    justify-content: center;
    gap: 0;
}

/* Icons/Spacers in Mini Mode */
.mini-sidebar .sidebar-link iconify-icon,
.mini-sidebar .sidebar-link .icon-small,
.mini-sidebar .nav-small-cap-icon {
    display: block;
    margin: 0 auto;
    font-size: 1.25rem;
    width: 20px;
    height: 20px;
}

/* Remove Section Headers (Dots) */
.mini-sidebar .nav-small-cap {
    display: none !important;
}

/* Hide Sub-menus when in static Mini-mode */
.mini-sidebar .sidebar-nav .collapse {
    display: none !important;
}

/* Fixed Profile in Mini Mode */
.mini-sidebar .fixed-profile .card-body {
    padding: 10px 0 !important;
}

/* 🎯 FIXED: Only show the logout icon by specifically targeting elements for hiding */
.mini-sidebar .fixed-profile .card-body .d-flex > div,
.mini-sidebar .fixed-profile .card-body .d-flex .d-flex {
    display: none !important; /* Hides the profile image and text container */
}
.mini-sidebar .fixed-profile .card-body a[href="./login.php"] {
    display: block !important; /* Ensures the logout icon is visible */
    margin: 0 auto; /* Centers the logout icon */
}


/* ---------------------------------------------------- */
/* 🚀 --- HOVER-TO-EXPAND / FLYOUT LOGIC (Alignment Fix) --- 🚀 */
/* Rules below restore the full, uniform, wide sidebar appearance */
/* ---------------------------------------------------- */

.mini-sidebar .left-sidebar:hover,
.mini-sidebar .sidebar-hover-open .left-sidebar {
    width: 240px;
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
    border-right: none;
}

/* 🎯 ALIGNMENT FIX: Apply uniform padding and left alignment to ALL links on hover */
.mini-sidebar .left-sidebar:hover .sidebar-link,
.mini-sidebar .sidebar-hover-open .sidebar-link {
    /* Use the same consistent padding as the base style */
    padding: 10px 15px !important; 
    justify-content: flex-start !important; /* Forces A tag content to the left */
    /* Reset display properties for hover state */
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 15px !important; /* Restore the gap on hover */
}

/* Restore the internal alignment and gap for complex links (those with sub-menus) */
.mini-sidebar .left-sidebar:hover .sidebar-link .d-flex.align-items-center,
.mini-sidebar .sidebar-hover-open .sidebar-link .d-flex.align-items-center {
    justify-content: flex-start !important; /* 🚀 CRITICAL FIX: Strong enforcement on the inner content DIV */
    gap: 15px !important; /* Strong enforcement on inner DIV gap */
}

/* Restore all hidden elements (Text, Headers, Arrows, Profile) */
.mini-sidebar .left-sidebar:hover .hide-menu,
.mini-sidebar .sidebar-hover-open .hide-menu {
    display: inline !important;
}
.mini-sidebar .left-sidebar:hover .sidebar-link.has-arrow::after,
.mini-sidebar .sidebar-hover-open .sidebar-link.has-arrow::after {
    display: block;
}
.mini-sidebar .left-sidebar:hover .nav-small-cap,
.mini-sidebar .sidebar-hover-open .nav-small-cap {
    display: block !important;
    padding: 15px 20px 5px !important;
    text-align: left;
}
.mini-sidebar .left-sidebar:hover .nav-small-cap-icon,
.mini-sidebar .sidebar-hover-open .nav-small-cap-icon {
    display: none;
}

/* LOGO RESTORATION */
.mini-sidebar .left-sidebar:hover .brand-logo .logo-img,
.mini-sidebar .sidebar-hover-open .brand-logo .logo-img {
    width: auto;
    overflow: visible;
}
.mini-sidebar .left-sidebar:hover .brand-logo .logo-img img,
.mini-sidebar .sidebar-hover-open .brand-logo .logo-img img {
    width: 100%;
    margin: 0;
}
.mini-sidebar .left-sidebar:hover .brand-logo,
.mini-sidebar .sidebar-hover-open .brand-logo {
    justify-content: space-between !important;
    padding: 15px 20px;
}

/* Fixed Profile Restoration */
.mini-sidebar .left-sidebar:hover .fixed-profile .card-body .d-flex > div,
.mini-sidebar .sidebar-hover-open .fixed-profile .card-body .d-flex > div,
.mini-sidebar .left-sidebar:hover .fixed-profile .card-body a[href="./login.php"],
.mini-sidebar .sidebar-hover-open .fixed-profile .card-body a[href="./login.php"] {
    display: block !important;
}
.mini-sidebar .left-sidebar:hover .fixed-profile .card-body {
    padding: 1rem !important;
}

/* Sub-menu Visibility */
.mini-sidebar .left-sidebar:hover .sidebar-nav .collapse,
.mini-sidebar .sidebar-hover-open .sidebar-nav .collapse {
    display: block !important;
    visibility: visible;
    max-height: 500px;
}

/* 1. CSS Reset for Body and HTML */
/* This removes any default browser margin/padding that creates the extra space. */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}


/*TOP MARGIN*/ 
.body-wrapper .container-fluid, .body-wrapper .container-sm, .body-wrapper .container-md, .body-wrapper .container-lg, .body-wrapper .container-xl, .body-wrapper .container-xxl {
  max-width: 1300px;
  margin: 0 auto;
  transition: 0.2s ease-in;
  padding-top: 0px;
}

#main-wrapper[data-layout="vertical"][data-sidebar-position="fixed"] .left-sidebar {
  position: fixed;
  top: 0px;
}
CSS

/* ---------------------------------------------------- */
/* 🆕 STYLES FOR BACK ICON BUTTON (CLOSE-BTN) */
/* ---------------------------------------------------- */

.close-btn {
    /* 1. Add padding to the right of the button area */
    padding-right: 15px !important; 
    /* The 'display: none !important;' rule you previously set is still in effect, 
       but if you choose to enable this button, the padding will apply. */
}

.close-btn i.ti {
    /* 2. Change the icon color to blue */
    color:#46caeb; /* A standard blue color, adjust as needed */

    /* Example styling that will apply to the new cart icon if it's within a styled element */
.ti ti-shopping-cart {
    color: #4bd08b; /* Keeps the icon blue */
}