aside {
        width: 280px;
        background-color: var(--bg-sidebar);
        border-right: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        padding: 32px 24px;
        flex-shrink: 0;
        overflow-y: auto;
        padding-bottom: 100px;
    }

    .brand-logo { max-width: 128px; margin-bottom: 48px; display: block; }

    .nav-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
    .menu-item a{ text-decoration: none; color: inherit; display:flex; gap: 12px;align-items: center;}
    .menu-item {
        display: flex; align-items: center; gap: 12px; padding: 12px 16px;
        border-radius: 8px; color: var(--bb-text); font-size: 15px; font-weight: 500;
        cursor: pointer; text-decoration: none; border-left: 4px solid transparent; transition: all 0.2s;
    }
    .menu-item:hover { background-color: #f3f4f6; color: var(--bb-dark); }
    .menu-item.active { background-color: #fff9e6; color: #000000; border-left: 4px solid var(--bb-primary); font-weight: 600; }
    
    .menu-icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .menu-icon-automation{ stroke-width: 0;
    fill: currentColor;}
    .menu-icon-custom {     width: 30px;
    height: 30px;
    stroke-width: 0;
    fill: currentColor; }
    /* Sub-menu */
    .sub-menu { list-style: none; padding: 0 0 0 44px; margin: 4px 0 12px 0; display: none; flex-direction: column; gap: 4px; }
    .sub-menu.open { display: flex; }
    .sub-menu-item { color: var(--bb-text); font-size: 14px; text-decoration: none; padding: 8px 12px; border-radius: 6px; display: block; transition: all 0.2s; cursor: pointer; }
    .sub-menu-item:hover { background-color: #f3f4f6; color: var(--bb-dark); }
    .sub-menu-item.active-sub { background-color: #f3f4f6; color: var(--bb-dark); font-weight: 600; }

    /* State visibility — driven by PHP class so correct state renders on first paint */
    .bb-disconnected .state-connected { display: none; }
    .bb-connected .state-disconnected { display: none; }