@switch (themeService.sidebarStyle()) {
  <!-- ════════════════════════════════════════════════════════════════
       COMPACT SIDEBAR — current default (64px → 260px on hover)
       ════════════════════════════════════════════════════════════════ -->
  @case ('compact') {
    <aside
      class="fixed top-0 start-0 h-screen z-[1000] overflow-hidden flex flex-col
             bg-brand/85 backdrop-blur-xl border-e border-white/[0.08] transition-[width] duration-250
             ease-[cubic-bezier(0.4,0,0.2,1)]"
      [class.sidebar-expanded]="expanded()"
      [style.width]="expanded() ? '260px' : '64px'"
      (mouseenter)="onMouseEnter()"
      (mouseleave)="onMouseLeave()"
    >
      <!-- Logo -->
      <div class="flex items-center px-4 h-16 gap-3 border-b border-white/10 shrink-0">
        <img src="assets/moon-crescent.svg" alt="Moon" class="w-7 h-7 min-w-8" />
        @if (expanded()) {
          <span class="text-xl font-bold text-white whitespace-nowrap tracking-wide">Moon ERP</span>
        }
      </div>

      <!-- Search -->
      @if (expanded()) {
        <div class="px-3 pt-3 pb-1 shrink-0">
          <div class="relative">
            <i class="pi pi-search absolute top-1/2 start-3 -translate-y-1/2 text-white/40 text-[0.8rem]"></i>
            <input
              type="text"
              class="w-full bg-white/10 border border-white/10 rounded-lg py-2 ps-9 pe-3 text-white text-[0.82rem]
                     placeholder-white/40 outline-none focus:border-accent/50 focus:bg-white/15 transition-all"
              [placeholder]="'COMMON.SEARCH' | translate"
              [ngModel]="searchQuery()"
              (ngModelChange)="onSearch($event)"
            />
          </div>
          @if (searchResults().length > 0) {
            <div class="mt-1 bg-white/10 rounded-lg overflow-hidden max-h-48 overflow-y-auto">
              @for (result of searchResults(); track result.route) {
                <a
                  class="flex items-center gap-2 py-2 px-3 text-white/85 text-[0.82rem] no-underline cursor-pointer
                         hover:bg-white/15 hover:text-white transition-colors"
                  (click)="navigateToResult(result.route)"
                >
                  <i [class]="result.icon" class="text-[0.85rem] min-w-5 text-center text-accent"></i>
                  <span>{{ result.translatedLabel }}</span>
                </a>
              }
            </div>
          }
        </div>
      }

      <!-- Menu -->
      <nav class="py-2 flex-1 overflow-x-hidden overflow-y-auto" [class.hidden]="searchQuery().length >= 2 && searchResults().length > 0">
        @for (item of filteredMenuItems(); track item.label) {
          @if (item.isModule) {
            <div
              class="module-header flex items-center py-2.5 px-4 gap-3 cursor-pointer select-none
                     transition-all duration-150 whitespace-nowrap relative mt-1"
              [class.module-active]="isModuleActive(item.label)"
              (click)="toggleModule(item.label)"
              [pTooltip]="expanded() ? '' : (item.label | translate)"
              [tooltipPosition]="langService.isRtl() ? 'left' : 'right'"
            >
              <i [class]="item.icon" class="text-[1.1rem] min-w-8 text-center"
                 [class.text-accent]="isModuleActive(item.label)"
                 [class.text-white/60]="!isModuleActive(item.label)"></i>
              @if (expanded()) {
                <span class="text-[0.78rem] font-bold flex-1 uppercase tracking-wider"
                      [class.text-accent]="isModuleActive(item.label)"
                      [class.text-white/60]="!isModuleActive(item.label)">{{ item.label | translate }}</span>
                <i class="pi pi-chevron-down text-[0.65rem] transition-transform duration-200"
                   [class.rotate-180]="isModuleActive(item.label)"
                   [class.text-accent]="isModuleActive(item.label)"
                   [class.text-white/40]="!isModuleActive(item.label)"></i>
              }
            </div>
            @if (expanded() && isModuleActive(item.label)) {
              <div class="module-content border-s-2 border-accent/30 ms-7 animate-slide-down">
                @for (sub of item.children; track sub.label) {
                  @if (!sub.children) {
                    <a
                      class="nav-link flex items-center py-2.5 ps-4 pe-4 gap-3 text-white/85 no-underline
                             cursor-pointer transition-all duration-150 whitespace-nowrap relative
                             hover:bg-white/8 hover:text-white"
                      [class.active]="isActiveRoute(sub.route!)"
                      [routerLink]="sub.route"
                      routerLinkActive="active"
                    >
                      <i [class]="sub.icon" class="text-[0.9rem] min-w-6 text-center"></i>
                      <span class="text-[0.82rem] font-medium">{{ sub.label | translate }}</span>
                    </a>
                  } @else {
                    <div [class.open]="isGroupActive(sub.label)">
                      <div
                        class="flex items-center py-2.5 ps-4 pe-4 gap-3 text-white/85 cursor-pointer select-none
                               transition-all duration-150 whitespace-nowrap relative
                               hover:bg-white/8 hover:text-white"
                        [class.text-white]="isGroupActive(sub.label)"
                        (click)="toggleGroup(sub.label)"
                      >
                        <i [class]="sub.icon" class="text-[0.9rem] min-w-6 text-center"></i>
                        <span class="text-[0.82rem] font-medium flex-1">{{ sub.label | translate }}</span>
                        <i class="pi pi-chevron-down text-[0.6rem] transition-transform duration-200"
                           [class.rotate-180]="isGroupActive(sub.label)"></i>
                      </div>
                      @if (isGroupActive(sub.label)) {
                        <div class="animate-slide-down">
                          @for (child of sub.children; track child.label) {
                            <a
                              class="nav-link flex items-center py-2 ps-10 pe-4 gap-2.5 text-white/75 no-underline
                                     cursor-pointer transition-all duration-150 whitespace-nowrap relative text-[0.8rem]
                                     hover:bg-white/8 hover:text-white"
                              [class.active]="isActiveRoute(child.route!)"
                              [routerLink]="child.route"
                              routerLinkActive="active"
                            >
                              <i [class]="child.icon" class="text-[0.8rem] min-w-5 text-center"></i>
                              <span class="font-medium">{{ child.label | translate }}</span>
                            </a>
                          }
                        </div>
                      }
                    </div>
                  }
                }
              </div>
            }
          } @else if (!item.children) {
            <a
              class="nav-link flex items-center py-3 px-4 gap-3 text-white/85 no-underline cursor-pointer
                     transition-all duration-150 whitespace-nowrap relative
                     hover:bg-white/8 hover:text-white"
              [routerLink]="item.route"
              routerLinkActive="active"
              [pTooltip]="expanded() ? '' : (item.label | translate)"
              [tooltipPosition]="langService.isRtl() ? 'left' : 'right'"
            >
              <i [class]="item.icon" class="text-[1.1rem] min-w-8 text-center"></i>
              @if (expanded()) {
                <span class="text-[0.88rem] font-medium flex-1">{{ item.label | translate }}</span>
              }
            </a>
          }
        }
      </nav>
    </aside>
  }

  <!-- ════════════════════════════════════════════════════════════════
       FULL SIDEBAR — Metronic-style (always 260px, light bg)
       ════════════════════════════════════════════════════════════════ -->
  @case ('full') {
    <aside class="sidebar-full fixed top-0 start-0 h-screen z-[1000] w-[260px] flex flex-col
                  bg-white border-e border-surface-border shadow-[2px_0_12px_rgba(0,0,0,0.04)] overflow-hidden">
      <!-- Logo -->
      <div class="flex items-center px-5 h-16 gap-3 border-b border-surface-border shrink-0">
        <img src="assets/moon-crescent.svg" alt="Moon" class="w-6 h-6" />
        <span class="text-xl font-bold text-brand whitespace-nowrap tracking-wide">Moon ERP</span>
      </div>

      <!-- Search -->
      <div class="px-4 pt-3 pb-1 shrink-0">
        <div class="relative">
          <i class="pi pi-search absolute top-1/2 start-3 -translate-y-1/2 text-text-muted text-[0.8rem]"></i>
          <input
            type="text"
            class="w-full bg-surface-muted border border-surface-border rounded-lg py-2 ps-9 pe-3
                   text-text-primary text-[0.82rem] placeholder-text-muted outline-none
                   focus:border-accent focus:ring-2 focus:ring-accent-glow transition-all"
            [placeholder]="'COMMON.SEARCH' | translate"
            [ngModel]="searchQuery()"
            (ngModelChange)="onSearch($event)"
          />
        </div>
        @if (searchResults().length > 0) {
          <div class="mt-1 bg-surface-muted rounded-lg overflow-hidden max-h-48 overflow-y-auto border border-surface-border">
            @for (result of searchResults(); track result.route) {
              <a
                class="flex items-center gap-2 py-2 px-3 text-text-secondary text-[0.82rem] no-underline cursor-pointer
                       hover:bg-accent/10 hover:text-accent transition-colors"
                (click)="navigateToResult(result.route)"
              >
                <i [class]="result.icon" class="text-[0.85rem] min-w-5 text-center text-accent"></i>
                <span>{{ result.translatedLabel }}</span>
              </a>
            }
          </div>
        }
      </div>

      <!-- Menu -->
      <nav class="py-2 flex-1 overflow-x-hidden overflow-y-auto" [class.hidden]="searchQuery().length >= 2 && searchResults().length > 0">
        @for (item of filteredMenuItems(); track item.label) {
          @if (item.isModule) {
            <div
              class="flex items-center py-2.5 px-5 gap-3 cursor-pointer select-none
                     transition-all duration-150 whitespace-nowrap relative mt-1
                     hover:bg-surface-hover"
              [class.full-module-active]="isModuleActive(item.label)"
              (click)="toggleModule(item.label)"
            >
              <i [class]="item.icon" class="text-[1.1rem] min-w-6 text-center"
                 [class.text-accent]="isModuleActive(item.label)"
                 [class.text-text-muted]="!isModuleActive(item.label)"></i>
              <span class="text-[0.78rem] font-bold flex-1 uppercase tracking-wider"
                    [class.text-accent]="isModuleActive(item.label)"
                    [class.text-text-secondary]="!isModuleActive(item.label)">{{ item.label | translate }}</span>
              <i class="pi pi-chevron-down text-[0.65rem] transition-transform duration-200"
                 [class.rotate-180]="isModuleActive(item.label)"
                 [class.text-accent]="isModuleActive(item.label)"
                 [class.text-text-muted]="!isModuleActive(item.label)"></i>
            </div>
            @if (isModuleActive(item.label)) {
              <div class="border-s-2 border-accent/30 ms-7 animate-slide-down">
                @for (sub of item.children; track sub.label) {
                  @if (!sub.children) {
                    <a
                      class="full-nav-link flex items-center py-2.5 ps-4 pe-4 gap-3 text-text-secondary no-underline
                             cursor-pointer transition-all duration-150 whitespace-nowrap relative
                             hover:bg-accent/8 hover:text-accent"
                      [class.full-active]="isActiveRoute(sub.route!)"
                      [routerLink]="sub.route"
                      routerLinkActive="full-active"
                    >
                      <i [class]="sub.icon" class="text-[0.9rem] min-w-6 text-center"></i>
                      <span class="text-[0.82rem] font-medium">{{ sub.label | translate }}</span>
                    </a>
                  } @else {
                    <div>
                      <div
                        class="flex items-center py-2.5 ps-4 pe-4 gap-3 text-text-secondary cursor-pointer select-none
                               transition-all duration-150 whitespace-nowrap relative
                               hover:bg-accent/8 hover:text-accent"
                        [class.text-brand]="isGroupActive(sub.label)"
                        [class.font-bold]="isGroupActive(sub.label)"
                        (click)="toggleGroup(sub.label)"
                      >
                        <i [class]="sub.icon" class="text-[0.9rem] min-w-6 text-center"></i>
                        <span class="text-[0.82rem] font-medium flex-1">{{ sub.label | translate }}</span>
                        <i class="pi pi-chevron-down text-[0.6rem] transition-transform duration-200"
                           [class.rotate-180]="isGroupActive(sub.label)"></i>
                      </div>
                      @if (isGroupActive(sub.label)) {
                        <div class="animate-slide-down">
                          @for (child of sub.children; track child.label) {
                            <a
                              class="full-nav-link flex items-center py-2 ps-10 pe-4 gap-2.5 text-text-muted no-underline
                                     cursor-pointer transition-all duration-150 whitespace-nowrap relative text-[0.8rem]
                                     hover:bg-accent/8 hover:text-accent"
                              [class.full-active]="isActiveRoute(child.route!)"
                              [routerLink]="child.route"
                              routerLinkActive="full-active"
                            >
                              <i [class]="child.icon" class="text-[0.8rem] min-w-5 text-center"></i>
                              <span class="font-medium">{{ child.label | translate }}</span>
                            </a>
                          }
                        </div>
                      }
                    </div>
                  }
                }
              </div>
            }
          } @else if (!item.children) {
            <a
              class="full-nav-link flex items-center py-3 px-5 gap-3 text-text-secondary no-underline cursor-pointer
                     transition-all duration-150 whitespace-nowrap relative
                     hover:bg-accent/8 hover:text-accent"
              [routerLink]="item.route"
              routerLinkActive="full-active"
            >
              <i [class]="item.icon" class="text-[1.1rem] min-w-6 text-center"></i>
              <span class="text-[0.88rem] font-medium flex-1">{{ item.label | translate }}</span>
            </a>
          }
        }
      </nav>
    </aside>
  }

  <!-- ════════════════════════════════════════════════════════════════
       MINI SIDEBAR — permanent 64px, popover submenus on click
       ════════════════════════════════════════════════════════════════ -->
  @case ('mini') {
    <aside class="sidebar-mini fixed top-0 start-0 h-screen z-[1000] w-16 flex flex-col
                  bg-gradient-to-b from-brand to-brand-dark overflow-visible">
      <!-- Logo -->
      <div class="flex items-center justify-center h-16 border-b border-white/10 shrink-0">
        <img src="assets/moon-crescent.svg" alt="Moon" class="w-7 h-7" />
      </div>

      <!-- Menu -->
      <nav class="py-2 flex-1 flex flex-col items-center gap-1 overflow-y-auto overflow-x-visible">
        @for (item of filteredMenuItems(); track item.label) {
          @if (item.isModule) {
            <!-- Module icon with popover -->
            <button
              class="w-11 h-11 flex items-center justify-center rounded-xl border-0 bg-transparent
                     cursor-pointer transition-all duration-200 hover:bg-white/10"
              [class.bg-white/15]="isModuleActive(item.label)"
              [class.text-accent]="isModuleActive(item.label)"
              [class.text-white/60]="!isModuleActive(item.label)"
              (click)="toggleMiniPopover(item.label, miniPop, $event)"
              [pTooltip]="miniPopoverModule() === item.label ? '' : (item.label | translate)"
              [tooltipPosition]="langService.isRtl() ? 'left' : 'right'"
            >
              <i [class]="item.icon" class="text-[1.15rem]"></i>
            </button>
            <p-popover #miniPop (onHide)="onMiniPopoverHide()">
              <div class="mini-popover-menu min-w-[220px] max-h-[70vh] overflow-y-auto">
                <div class="px-3 py-2 border-b border-surface-border">
                  <span class="text-[0.75rem] font-bold uppercase tracking-wider text-text-muted">
                    {{ item.label | translate }}
                  </span>
                </div>
                @for (sub of item.children; track sub.label) {
                  @if (!sub.children) {
                    <a
                      class="flex items-center gap-2.5 py-2 px-3 text-text-secondary text-[0.82rem] no-underline
                             cursor-pointer hover:bg-accent/10 hover:text-accent transition-colors rounded-lg mx-1 my-0.5"
                      [class.bg-accent/10]="isActiveRoute(sub.route!)"
                      [class.text-accent]="isActiveRoute(sub.route!)"
                      [class.font-bold]="isActiveRoute(sub.route!)"
                      (click)="navigateFromMini(sub.route!, miniPop)"
                    >
                      <i [class]="sub.icon" class="text-[0.85rem] min-w-5 text-center"></i>
                      <span>{{ sub.label | translate }}</span>
                    </a>
                  } @else {
                    <div class="mt-1">
                      <div class="px-3 py-1.5">
                        <span class="text-[0.7rem] font-bold uppercase tracking-wider text-text-muted">
                          {{ sub.label | translate }}
                        </span>
                      </div>
                      @for (child of sub.children; track child.label) {
                        <a
                          class="flex items-center gap-2.5 py-1.5 px-3 ps-6 text-text-secondary text-[0.8rem] no-underline
                                 cursor-pointer hover:bg-accent/10 hover:text-accent transition-colors rounded-lg mx-1 my-0.5"
                          [class.bg-accent/10]="isActiveRoute(child.route!)"
                          [class.text-accent]="isActiveRoute(child.route!)"
                          [class.font-bold]="isActiveRoute(child.route!)"
                          (click)="navigateFromMini(child.route!, miniPop)"
                        >
                          <i [class]="child.icon" class="text-[0.8rem] min-w-4 text-center"></i>
                          <span>{{ child.label | translate }}</span>
                        </a>
                      }
                    </div>
                  }
                }
              </div>
            </p-popover>
          } @else if (!item.children) {
            <a
              class="w-11 h-11 flex items-center justify-center rounded-xl text-white/85 no-underline
                     cursor-pointer transition-all duration-200 hover:bg-white/10 hover:text-white"
              [routerLink]="item.route"
              routerLinkActive="mini-active"
              [pTooltip]="item.label | translate"
              [tooltipPosition]="langService.isRtl() ? 'left' : 'right'"
            >
              <i [class]="item.icon" class="text-[1.15rem]"></i>
            </a>
          }
        }
      </nav>
    </aside>
  }
}
