/* SIDEBAR */
    .sidebar {
        position: fixed;      
        top: 0;
        left: 0;
        width: 260px;         
        height: 100vh;        
        background-color: #1c4362; /*#000F1C;*/
        color: #fff;
        overflow-y: auto;     
        overflow-x: hidden;
        transition: width 0.3s;
        display: flex;
        flex-direction: column;
        z-index: 9998;
        /* Custom scrollbar styling */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }
    
    /* Custom scrollbar for WebKit browsers (Chrome, Safari, Edge) */
    .sidebar::-webkit-scrollbar {
        width: 6px;
    }
    
    .sidebar::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .sidebar::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }
    
    .sidebar::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }
    .sidebar.collapsed {
        width: 60px !important;        
    }


    .sidebar-header {
      display: flex;
      align-items: center;
      justify-content: center; /* center horizontally */
      padding: 1rem;
    }

    .sidebar-header .logo {
      max-height: 100%;       /* ensures it doesn't exceed parent height */
      max-width: 100%;        /* ensures it doesn't exceed parent width */
      object-fit: contain;    /* maintain aspect ratio */
      height: auto;           /* override fixed height */
      width: auto;
      transition: all 0.3s;
    }
    
    /* when collapsed: center + shrink */
    .sidebar.collapsed .sidebar-header {
        justify-content: center;        /* move logo into the middle */
    }
    .sidebar.collapsed .sidebar-header .logo {
        height: 28px;                   /* smaller height */
        margin: 0;                      /* reset any left-margin */
    }

    

    /* make every nav‐link a nice pill, with normal weight text */
    .sidebar .nav .nav-link {
        display: flex;        
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        color: #fff;
        text-decoration: none;
        font-weight: 400;                        /* force normal weight */
        border-radius: 8px;                      /* round the corners */
        transition: background-color 0.2s ease;
        margin: 0 9px;
    }
  
    .sidebar .nav .nav-link:hover {
        background-color: #137EA733;
        color: #fff;
    }
    
    .sidebar .nav .nav-link.active {
        background-color: #137EA733;
        color: #fff;
    }


    .brand-text {
        font-size: 1.2rem;
        font-weight: 600;
        margin-left: 0.5rem;
        vertical-align: middle;
    }
    
    .sidebar.collapsed .brand-text {
        display: none;
        visibility: hidden;
    }     

    .sidebar.collapsed .ms-4 {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .sidebar.collapsed .nav > li > a {
        justify-content: center;
    }
    
 
    /* .sidebar.collapsed 
        .nav-item[data-username="Data"] 
        .nav-link .feather.icon-chevron-down {
        transform: rotate(-90deg);
    } */
  

    .nav-item[data-username="Data"] 
        .nav-link .feather.icon-chevron-down {
        transition: transform 0.5s ease;
    }    


    .sidebar-bottom .nav {
        display: flex;           /* re-use flex if you like */
        flex-direction: column;  /* force one-per-line */
        /* or simply: display: block; */
    }
    .sidebar-bottom .nav li {
        width: 100%;             /* make each item fill the width */
    }

    .sidebar-top .nav li {
        width: 100%;  
        border-bottom: none !important;
    }

    .sidebar.collapsed ~ .toggle-btn {
        left: 60px !important;
    }
    /** sidebar changes **/
    .sidebar,
    .pcoded-main-container {
      transition: none !important;
    }

   
    html.sidebar-collapsed .sidebar {
      width: 60px !important;
      overflow-y: auto;
      overflow-x: hidden;
    }
    html.sidebar-collapsed .toggle-btn {
      left: 60px !important;
    }
    html.sidebar-collapsed .pcoded-main-container {
      margin-left: 60px !important;
    }
        html.sidebar-collapsed .sidebar .brand-text {
      display: none !important;
      visibility: hidden !important;
    } 

    
    html.sidebar-collapsed .sidebar .pcoded-mtext {
      display: none !important;
      visibility: hidden !important;
    } 

    .toggle-btn i {
        display: inline-block;              
        transform-origin: center;             
        transition: transform 0.5s ease !important;   
    }

    html.sidebar-collapsed #toggleBtn i.fa-chevron-left:before {
        content: "\f054" !important;
    }
    
    .sidebar-header .logo {
    transition: none !important;
    }

    /**end of changes **/
    .sidebar-bottom .nav {
        display: flex;           
        flex-direction: column;  
        padding: 0;
        margin: 0;
    }
    .sidebar-bottom .nav li {
        width: 100%;            
        border: none;    
    }

    .sidebar-separator {
        border: none;
        border-top: 1px solid rgba(255,255,255,0.1);
        margin: 0.5rem 0;
    }
    .sidebar-top .nav li {
        border-bottom: none !important;  
    }

    .sidebar.collapsed .user-section .user-name {
        display: none !important;
        visibility: hidden;
    }
    .sidebar.collapsed .user-section {
        justify-content: center;
    }

    /* NAVIGATION LIST */
    ul.nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul.nav li {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    ul.nav li:last-child {
        border-bottom: none;
    }
    ul.nav li a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        color: #fff;
        text-decoration: none;
        transition: background-color 0.3s;
    }
    ul.nav li a:hover {
        background-color: #34495e;
    }

    /* Hide text if collapsed */
    .sidebar.collapsed .pcoded-mtext {
        display: none;
        visibility: hidden;
    }

    .sidebar.collapsed ul.nav li a {
        justify-content: center;  
    }

    /* BOTTOM ITEMS */
    .sidebar-bottom {
        margin-top: auto;         /* push to the bottom */
    }



    /* 
        TOGGLE BUTTON (FIXED)
    */
    .toggle-btn {
        position: fixed;
        top: 1rem;
        left: 260px;               /* match the sidebar's expanded width */
        transform: translateX(-50%);
        width: 32px;
        height: 32px;
        background: #1c4362;
        color: #fff;
        border: none;
        font-size: 1.2rem;
        cursor: pointer;
        outline: none;
        z-index: 9999;           
        display: flex;
        align-items: center;
        justify-content: center;
        transition: left 0.3s;
        border: 1px solid #fff;
        border-radius: 5px;      
    }


    .user-section {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.75rem 1rem;
        margin: 0px 5px;
        cursor: pointer;
      }
      
      /* avatar circle */
      .user-section .avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
      }
      
      /* username text */
      .user-section .user-name {
        flex: 1;
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      /* the dropdown container */
      .user-section .user-menu {
        position: absolute;
        bottom: calc(100% + 0.25rem);  /* float just above the row */
        right: auto;
        left: 1rem;             
        background: #2c3e50;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        padding: 0.25rem 0;          
        min-width: 140px;
        z-index: 10000;
        display: none;
      }
      
      /* show when open */
      .user-section.open .user-menu {
        display: block;
      }
      
      /* drop the default list styling */
      .user-section .user-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      
      /* separator between items */
      .user-section .user-menu li + li {
        border-top: 1px solid rgba(255,255,255,0.05);
      }
      
      /* links inside */
      .user-section .user-menu a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        transition: background 0.2s;
      }
      
      /* link hover */
      .user-section .user-menu a:hover {
        background: rgba(255,255,255,0.1);
      }
      
      /* little caret arrow */
      .user-section .user-menu::after {
        content: "";
        position: absolute;
        bottom: -0.4rem;
        right: auto;
        left: 1.5rem;              
        width: 0;
        height: 0;
        border-left: 0.4rem solid transparent;
        border-right: 0.4rem solid transparent;
        border-top: 0.4rem solid #2c3e50;
      }
      
      

    /* shared base for both <img> and placeholder */
    /* .avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    } */
    

    .avatar-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #3b82f6;      
        color: #fff;
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
    }
    
    /* make the select span the full width of the dropdown */
    .user-menu-language select {
        width: calc(100% - 2rem);     /* account for 1rem side padding */
        margin: 0.5rem 1rem;
        padding: 0.4rem 0.6rem;
        background: #14202b;
        border: 1px solid rgba(255,255,255,0.2);
        color: #fff;
        border-radius: 4px;
        font-size: 0.9rem;
        appearance: none;             /* remove default arrow */
        cursor: pointer;
    }
    
    /* optional: add a little down-caret via background */
    .user-menu-language select {
        background-repeat: no-repeat;
        background-position: right 0.8rem center;
        background-size: .6rem .4rem;
    }

    /* timezone: search + scrollable select */
    .user-menu-timezone .timezone-info {
        margin: 0.5rem 1rem 0.25rem;
        font-size: 0.8rem;
        opacity: 0.9;
    }
    .user-menu-timezone .tz-search-input {
        width: calc(100% - 2rem);
        margin: 0.25rem 1rem;
        padding: 0.35rem 0.6rem;
        background: #14202b;
        border: 1px solid rgba(255,255,255,0.2);
        color: #fff;
        border-radius: 4px;
        font-size: 0.85rem;
        box-sizing: border-box;
    }
    .user-menu-timezone .tz-search-input::placeholder {
        color: rgba(255,255,255,0.5);
    }
    .user-menu-timezone .tz-select-scroll {
        width: calc(100% - 2rem);
        margin: 0.25rem 1rem;
        padding: 0.25rem;
        max-height: 180px;
        background: #14202b;
        border: 1px solid rgba(255,255,255,0.2);
        color: #fff;
        border-radius: 4px;
        font-size: 0.85rem;
        overflow-y: auto;
    }
    .user-menu-timezone .tz-select-scroll option {
        padding: 0.2rem 0;
    }
    .user-menu-timezone #tzWarning {
        display: block;
        margin: 0.25rem 1rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* thin separator between select and logout */
    .user-menu-separator {
        height: 1px;
        margin: 0.25rem 0;
        background: rgba(255,255,255,0.1);
    }