.sidebar-scrollbar::-webkit-scrollbar { width: 4px; }
      .sidebar-scrollbar::-webkit-scrollbar-track { background: transparent; }
      .sidebar-scrollbar::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 999px; }
      .sidebar-scrollbar::-webkit-scrollbar-thumb:hover { background: #a8a29e; }
      
      /* Sidebar collapsed state */
      #sidebar[data-collapsed="true"] {
        width: 80px !important;
        overflow: visible !important;
      }
      #sidebar[data-collapsed="true"] nav {
        overflow: visible !important;
      }
      #sidebar[data-collapsed="true"] .sidebar-text {
        display: none;
      }
      #sidebar[data-collapsed="true"] .menu-toggle {
        flex-direction: column;
        padding: 8px 4px;
        gap: 4px;
      }
      #sidebar[data-collapsed="true"] .menu-toggle svg:last-child {
        display: none;
      }
      #sidebar[data-collapsed="true"] .menu-subitems {
        display: none !important;
      }
      #sidebar[data-collapsed="true"] nav a:not(.menu-popup a),
      #sidebar[data-collapsed="true"] nav button {
        flex-direction: column;
        padding: 8px 4px;
        gap: 4px;
        text-align: center;
      }
      #sidebar[data-collapsed="true"] nav a .sidebar-text,
      #sidebar[data-collapsed="true"] nav button .sidebar-text {
        display: block;
        font-size: 10px;
        line-height: 1.2;
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #sidebar[data-collapsed="true"] .logo-area {
        flex-direction: column;
        align-items: center;
        padding: 12px 8px;
        gap: 4px;
      }
      #sidebar[data-collapsed="true"] .logo-area .sidebar-text {
        display: block;
        text-align: center;
      }
      #sidebar[data-collapsed="true"] .logo-area .sidebar-text div:first-child {
        display: none;
      }
      #sidebar[data-collapsed="true"] .logo-area .sidebar-text div:last-child {
        font-size: 9px;
      }
      #sidebar[data-collapsed="true"] .logo-area #sidebar-toggle {
        margin-left: 0;
      }
      #sidebar[data-collapsed="true"] .bottom-bar {
        flex-direction: column;
        padding: 8px;
        gap: 8px;
      }
      #sidebar[data-collapsed="true"] .bottom-bar > div {
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
      #sidebar[data-collapsed="true"] .bottom-bar > div > div:first-child {
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      #sidebar[data-collapsed="true"] .bottom-bar .sidebar-text {
        display: block;
        font-size: 10px;
        text-align: center;
      }
      #sidebar[data-collapsed="true"] .bottom-bar .user-avatar {
        display: flex;
      }
      #sidebar[data-collapsed="true"] .bottom-bar .logout-btn {
        flex-direction: column;
        padding: 8px 4px;
        gap: 4px;
      }
      #sidebar[data-collapsed="true"] .bottom-bar .logout-btn .sidebar-text {
        display: block;
        margin-left: 0;
      }
      
      /* Popup menu for collapsed state */
      #sidebar[data-collapsed="true"] .menu-group.active .menu-toggle {
        background-color: rgba(0, 181, 173, 0.1);
        color: #00b5ad;
      }
      
      /* Popup menu - hidden by default, shown only in collapsed state */
      .menu-popup {
        display: none;
      }
      #sidebar[data-collapsed="true"] .menu-popup {
        display: block;
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity 0.15s ease, transform 0.15s ease;
        pointer-events: none;
      }
      #sidebar[data-collapsed="true"] .menu-group:hover .menu-popup {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
      }

      .mobile-sidebar-toggle,
      .mobile-sidebar-close,
      .mobile-sidebar-backdrop {
        display: none;
      }

      @media (max-width: 1023px) {
        .mobile-sidebar-toggle,
        .mobile-sidebar-close {
          display: inline-flex;
        }

        .mobile-sidebar-backdrop {
          position: fixed;
          inset: 0;
          z-index: 30;
          background: rgba(15, 23, 42, 0.42);
          backdrop-filter: blur(2px);
        }

        .mobile-sidebar-backdrop:not([hidden]) {
          display: block;
        }

        #sidebar,
        #sidebar[data-collapsed="true"] {
          position: fixed;
          inset: 0 auto 0 0;
          z-index: 40;
          width: min(18rem, 86vw) !important;
          overflow-x: hidden !important;
          overflow-y: auto !important;
          box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
          transform: translateX(-105%);
          visibility: hidden;
        }

        #sidebar[data-mobile-open="true"] {
          transform: translateX(0);
          visibility: visible;
        }

        #sidebar nav,
        #sidebar[data-collapsed="true"] nav {
          min-height: 0;
          overflow-x: hidden !important;
          overflow-y: auto !important;
          overscroll-behavior: contain;
          touch-action: pan-y;
          -webkit-overflow-scrolling: touch;
        }

        #sidebar .menu-subitems,
        #sidebar[data-collapsed="true"] .menu-subitems {
          overflow-y: hidden !important;
          touch-action: pan-y;
        }

        #sidebar .menu-toggle[data-collapsed="false"] + .menu-subitems {
          max-height: none !important;
          overflow: visible !important;
        }

        #sidebar-toggle {
          display: none;
        }

        #sidebar[data-collapsed="true"] .sidebar-text,
        #sidebar[data-collapsed="true"] .logo-area .sidebar-text,
        #sidebar[data-collapsed="true"] .bottom-bar .sidebar-text {
          display: block;
        }

        #sidebar[data-collapsed="true"] .menu-toggle,
        #sidebar[data-collapsed="true"] nav a:not(.menu-popup a),
        #sidebar[data-collapsed="true"] nav button,
        #sidebar[data-collapsed="true"] .bottom-bar .logout-btn {
          flex-direction: row;
          gap: 0.625rem;
          padding: 0.5rem 0.625rem;
          text-align: left;
        }

        #sidebar[data-collapsed="true"] .menu-toggle svg:last-child {
          display: block;
        }

        #sidebar[data-collapsed="true"] .menu-subitems {
          display: block !important;
        }

        #sidebar[data-collapsed="true"] nav a .sidebar-text,
        #sidebar[data-collapsed="true"] nav button .sidebar-text {
          display: block;
          max-width: none;
          font-size: inherit;
          line-height: inherit;
          white-space: normal;
        }

        #sidebar[data-collapsed="true"] .logo-area,
        #sidebar[data-collapsed="true"] .bottom-bar,
        #sidebar[data-collapsed="true"] .bottom-bar > div,
        #sidebar[data-collapsed="true"] .bottom-bar > div > div:first-child {
          flex-direction: row;
          align-items: center;
        }

        #sidebar[data-collapsed="true"] .logo-area {
          padding: 0.75rem 1rem;
          gap: 0.625rem;
        }

        #sidebar[data-collapsed="true"] .logo-area .sidebar-text {
          text-align: left;
        }

        #sidebar[data-collapsed="true"] .logo-area .sidebar-text div:first-child {
          display: block;
        }

        #sidebar[data-collapsed="true"] .logo-area .sidebar-text div:last-child {
          font-size: 10px;
        }

        #sidebar[data-collapsed="true"] .menu-popup {
          display: none;
        }
      }